matcha-components 20.15.0 → 20.16.0

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

@@ -1,339 +0,0 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { MatchaCardModule } from './card.module';
-import { cardArgtypes } from './card-argtype';
-import { MatchaElevationModule } from '../matcha-elevation/elevation.module';
-import { MatchaIconModule } from '../matcha-icon/icon.module';
-import { MatchaDividerModule } from '../matcha-divider/divider.module';
-import { MatchaTitleModule } from '../matcha-title/title.module';
-import { MatchaTooltipModule } from '../matcha-tooltip/tooltip.module';
-
-export default {
-    title: 'Atoms/Card',
-    decorators: [
-        moduleMetadata({
-            imports: [
-                MatchaCardModule,
-                MatchaElevationModule,
-                MatchaIconModule,
-                MatchaTitleModule,
-                MatchaDividerModule,
-                MatchaTooltipModule,
-            ],
-        }),
-    ],
-    tags: ['autodocs'],
-    args: {
-        elevation: 1,
-        blockquote: 'left',
-        blockquoteColor: 'accent',
-        color: 'surface',
-        label: 'Card Content',
-        alpha: false,
-    },
-    argTypes: cardArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-export const CardControls: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <matcha-card
-            blockquoteColor="${args['blockquoteColor']}"
-            elevation="${args['elevation']}"
-            blockquote="${args['blockquote']}"
-            color="${args['color']}"
-            alpha="${args['alpha']}">${args['label']}
-        </matcha-card>
-        `,
-    }),
-    name: 'Card Controls',
-};
-
-export const WithNestedUsage: StoryObj = {
-    render: () => ({
-        template: `
-        <div class="flex-column gap-16">
-            <matcha-card elevation="1" color="surface" class="flex-column gap-16">
-                Surface Color
-                <matcha-card elevation="1" color="bg"  class="flex-column gap-16">
-                    Background color
-                    <matcha-card elevation="1" color="surface" alpha="true" class="flex-column gap-16">
-                        Surface Alpha
-                        <matcha-card elevation="1" color="bg" alpha="true" class="flex-column gap-16">Background Alpha</matcha-card>
-                    </matcha-card>
-                </matcha-card>
-            </matcha-card>
-
-            <matcha-card blockquoteColor="accent" blockquote="left" color="surface" class="flex-column gap-16">
-                Surface Color
-                <matcha-card blockquoteColor="accent" blockquote="left" color="bg"  class="flex-column gap-16">
-                    Background color
-                    <matcha-card blockquoteColor="accent" blockquote="left" color="surface" alpha="true" class="flex-column gap-16">
-                        Surface Alpha
-                        <matcha-card blockquoteColor="accent" blockquote="left" color="bg" alpha="true" class="flex-column gap-16">Background Alpha</matcha-card>
-                    </matcha-card>
-                </matcha-card>
-            </matcha-card>
-        <div>
-        `,
-        inlineStory: true,
-    }),
-    name: 'Nested Cards',
-};
-
-export const WithBlockquoteUsage: StoryObj = {
-    render: () => ({
-        template: `
-        <div class="flex-column gap-16">
-
-            <matcha-card blockquote="left" blockquoteColor="red" alpha color="red" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="red"></matcha-icon>Message Box - red
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="pink" alpha color="pink" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="pink"></matcha-icon>Message Box - pink
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="purple" alpha color="purple" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="purple"></matcha-icon>Message Box - purple
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="deep-purple" alpha color="deep-purple" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="deep-purple"></matcha-icon>Message Box - deep purple
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="indigo" alpha color="indigo" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="indigo"></matcha-icon>Message Box - indigo
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="blue" alpha color="blue" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="blue"></matcha-icon>Message Box - blue
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="light-blue" alpha color="light-blue" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="light-blue"></matcha-icon>Message Box - light blue
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="cyan" alpha color="cyan" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="cyan"></matcha-icon>Message Box - cyan
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="teal" alpha color="teal" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="teal"></matcha-icon>Message Box - teal
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="green" alpha color="green" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="green"></matcha-icon>Message Box - green
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="light-green" alpha color="light-green" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="light-green"></matcha-icon>Message Box - light green
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="lime" alpha color="lime" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="lime"></matcha-icon>Message Box - lime
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="yellow" alpha color="yellow" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="yellow"></matcha-icon>Message Box - yellow
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="amber" alpha color="amber" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="amber"></matcha-icon>Message Box - amber
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="orange" alpha color="orange" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="orange"></matcha-icon>Message Box - orange
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="deep-orange" alpha color="deep-orange" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="deep-orange"></matcha-icon>Message Box - deep orange
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="brown" alpha color="brown" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="brown"></matcha-icon>Message Box - brown
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="grey" alpha color="grey" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="grey"></matcha-icon>Message Box - grey
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="blue-grey" alpha color="blue-grey" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="blue-grey"></matcha-icon>Message Box - blue grey
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="primary" alpha color="primary" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="primary"></matcha-icon>Message Box - primary
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="accent" alpha color="accent" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="accent"></matcha-icon>Message Box - accent
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="warn" alpha color="warn" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="warn"></matcha-icon>Message Box - warn
-            </matcha-card>
-
-            <matcha-card blockquote="left" blockquoteColor="fg" alpha color="fg" class="flex-align-center gap-16">
-                <matcha-icon name="info" color="fg"></matcha-icon>Message Box - fg
-            </matcha-card>
-
-        <div>
-        `,
-        inlineStory: true,
-    }),
-    name: 'Blockquote Cards',
-};
-
-export const WithColoredUsage: StoryObj = {
-    render: () => ({
-        template: `
-            <div class="d-flex flex-wrap gap-16">
-                <matcha-card elevation="1" color="red">card red</matcha-card>
-                <matcha-card elevation="1" color="pink">card pink</matcha-card>
-                <matcha-card elevation="1" color="purple">card purple</matcha-card>
-                <matcha-card elevation="1" color="deep-purple">card deep purple</matcha-card>
-                <matcha-card elevation="1" color="indigo">card indigo</matcha-card>
-                <matcha-card elevation="1" color="blue">card blue</matcha-card>
-                <matcha-card elevation="1" color="light-blue">card light blue</matcha-card>
-                <matcha-card elevation="1" color="cyan">card cyan</matcha-card>
-                <matcha-card elevation="1" color="teal">card teal</matcha-card>
-                <matcha-card elevation="1" color="green">card green</matcha-card>
-                <matcha-card elevation="1" color="light-green">card light green</matcha-card>
-                <matcha-card elevation="1" color="lime">card lime</matcha-card>
-                <matcha-card elevation="1" color="yellow">card yellow</matcha-card>
-                <matcha-card elevation="1" color="amber">card amber</matcha-card>
-                <matcha-card elevation="1" color="orange">card orange</matcha-card>
-                <matcha-card elevation="1" color="deep-orange">card deep orange</matcha-card>
-                <matcha-card elevation="1" color="brown">card brown</matcha-card>
-                <matcha-card elevation="1" color="grey">card grey</matcha-card>
-                <matcha-card elevation="1" color="blue-grey">card blue grey</matcha-card>
-
-                <matcha-card elevation="1" color="accent">card accent</matcha-card>
-                <matcha-card elevation="1" color="primary">card primary</matcha-card>
-                <matcha-card elevation="1" color="warn">card warn</matcha-card>
-
-                <matcha-card elevation="1" color="fg">card fg</matcha-card>
-                <matcha-card elevation="1" color="bg">card bg</matcha-card>
-                <matcha-card elevation="1" color="surface">card surface</matcha-card>
-            </div>
-        `,
-    }),
-    name: 'Filled Cards',
-};
-
-export const WithAlphaColoredUsage: StoryObj = {
-    render: () => ({
-        template: `
-            <div class="d-flex flex-wrap gap-16">
-                <matcha-card alpha color="red">card red alpha</matcha-card>
-                <matcha-card alpha color="pink">card pink alpha</matcha-card>
-                <matcha-card alpha color="purple">card purple alpha</matcha-card>
-                <matcha-card alpha color="deep-purple">card deep purple alpha</matcha-card>
-                <matcha-card alpha color="indigo">card indigo alpha</matcha-card>
-                <matcha-card alpha color="blue">card blue alpha</matcha-card>
-                <matcha-card alpha color="light-blue">card light blue alpha</matcha-card>
-                <matcha-card alpha color="cyan">card cyan alpha</matcha-card>
-                <matcha-card alpha color="teal">card teal alpha</matcha-card>
-                <matcha-card alpha color="green">card green alpha</matcha-card>
-                <matcha-card alpha color="light-green">card light green alpha</matcha-card>
-                <matcha-card alpha color="lime">card lime alpha</matcha-card>
-                <matcha-card alpha color="yellow">card yellow alpha</matcha-card>
-                <matcha-card alpha color="amber">card amber alpha</matcha-card>
-                <matcha-card alpha color="orange">card orange alpha</matcha-card>
-                <matcha-card alpha color="deep-orange">card deep orange alpha</matcha-card>
-                <matcha-card alpha color="brown">card brown alpha</matcha-card>
-                <matcha-card alpha color="grey">card grey alpha</matcha-card>
-                <matcha-card alpha color="blue-grey">card blue grey alpha</matcha-card>
-
-                <matcha-card alpha color="accent">card accent alpha</matcha-card>
-                <matcha-card alpha color="primary">card primary alpha</matcha-card>
-                <matcha-card alpha color="warn">card warn alpha</matcha-card>
-
-                <matcha-card alpha color="fg">card fg alpha</matcha-card>
-                <matcha-card alpha color="bg">card bg alpha</matcha-card>
-                <matcha-card alpha color="surface">card surface alpha</matcha-card>
-            </div>
-        `,
-    }),
-    name: 'Alpha Cards',
-};
-
-export const WithTintUsage: StoryObj = {
-    render: () => ({
-        template: `
-            <div class="d-flex flex-wrap gap-16">
-                <matcha-card tint color="red">card red tint</matcha-card>
-                <matcha-card tint color="pink">card pink tint</matcha-card>
-                <matcha-card tint color="purple">card purple tint</matcha-card>
-                <matcha-card tint color="deep-purple">card deep purple tint</matcha-card>
-                <matcha-card tint color="indigo">card indigo tint</matcha-card>
-                <matcha-card tint color="blue">card blue tint</matcha-card>
-                <matcha-card tint color="light-blue">card light blue tint</matcha-card>
-                <matcha-card tint color="cyan">card cyan tint</matcha-card>
-                <matcha-card tint color="teal">card teal tint</matcha-card>
-                <matcha-card tint color="green">card green tint</matcha-card>
-                <matcha-card tint color="light-green">card light green tint</matcha-card>
-                <matcha-card tint color="lime">card lime tint</matcha-card>
-                <matcha-card tint color="yellow">card yellow tint</matcha-card>
-                <matcha-card tint color="amber">card amber tint</matcha-card>
-                <matcha-card tint color="orange">card orange tint</matcha-card>
-                <matcha-card tint color="deep-orange">card deep orange tint</matcha-card>
-                <matcha-card tint color="brown">card brown tint</matcha-card>
-                <matcha-card tint color="grey">card grey tint</matcha-card>
-                <matcha-card tint color="blue-grey">card blue grey tint</matcha-card>
-
-                <matcha-card tint color="accent">card accent tint</matcha-card>
-                <matcha-card tint color="primary">card primary tint</matcha-card>
-                <matcha-card tint color="warn">card warn tint</matcha-card>
-
-                <matcha-card tint color="fg">card fg tint</matcha-card>
-                <matcha-card tint color="bg">card bg tint</matcha-card>
-                <matcha-card tint color="surface">card surface tint</matcha-card>
-            </div>
-        `,
-    }),
-    name: 'Tint Cards',
-};
-
-export const WithOutlineColoredUsage: StoryObj = {
-    render: () => ({
-        template: `
-            <div class="d-flex flex-wrap gap-16">
-                <matcha-card outline color="red">card red alpha</matcha-card>
-                <matcha-card outline color="pink">card pink alpha</matcha-card>
-                <matcha-card outline color="purple">card purple alpha</matcha-card>
-                <matcha-card outline color="deep-purple">card deep purple alpha</matcha-card>
-                <matcha-card outline color="indigo">card indigo alpha</matcha-card>
-                <matcha-card outline color="blue">card blue alpha</matcha-card>
-                <matcha-card outline color="light-blue">card light blue alpha</matcha-card>
-                <matcha-card outline color="cyan">card cyan alpha</matcha-card>
-                <matcha-card outline color="teal">card teal alpha</matcha-card>
-                <matcha-card outline color="green">card green alpha</matcha-card>
-                <matcha-card outline color="light-green">card light green alpha</matcha-card>
-                <matcha-card outline color="lime">card lime alpha</matcha-card>
-                <matcha-card outline color="yellow">card yellow alpha</matcha-card>
-                <matcha-card outline color="amber">card amber alpha</matcha-card>
-                <matcha-card outline color="orange">card orange alpha</matcha-card>
-                <matcha-card outline color="deep-orange">card deep orange alpha</matcha-card>
-                <matcha-card outline color="brown">card brown alpha</matcha-card>
-                <matcha-card outline color="grey">card grey alpha</matcha-card>
-                <matcha-card outline color="blue-grey">card blue grey alpha</matcha-card>
-
-                <matcha-card outline color="accent">card accent alpha</matcha-card>
-                <matcha-card outline color="primary">card primary alpha</matcha-card>
-                <matcha-card outline color="warn">card warn alpha</matcha-card>
-
-                <matcha-card outline color="fg">card fg alpha</matcha-card>
-                <matcha-card outline color="bg">card bg alpha</matcha-card>
-                <matcha-card outline color="surface">card surface alpha</matcha-card>
-            </div>
-        `,
-    }),
-    name: 'Outline Cards',
-};

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

@@ -1,19 +0,0 @@
-<label
-    class="matcha-checkbox flex-align-center"
-    [class.matcha-checkbox-disabled]="disabled">
-    <div
-        class="matcha-checkbox-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="checkbox"
-            class="matcha-checkbox-input"
-            [checked]="checked"
-            [disabled]="disabled"
-            [indeterminate]="indeterminate"
-            (change)="onInputChange($event)">
-    </div>
-
-    <span class="matcha-checkbox-label fw-500 fs-16 lh-20">
-        <ng-content></ng-content>
-    </span>
-</label>

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

@@ -1,79 +0,0 @@
-import { Component, Input, Output, EventEmitter, forwardRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-@Component({
-  selector: 'matcha-checkbox',
-  templateUrl: './checkbox.component.html',
-  styleUrls: ['./checkbox.component.scss'],
-  standalone: false,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => MatchaCheckboxComponent),
-      multi: true
-    }
-  ]
-})
-export class MatchaCheckboxComponent implements ControlValueAccessor {
-  @Input() color: string = 'accent';
-  @Input() indeterminate: boolean = false;
-
-  private _disabled = false;
-  @Input()
-  get disabled(): boolean {
-    return this._disabled;
-  }
-  set disabled(value: boolean | string) {
-    // Converte 'false' (string) ou false (boolean) para false, e qualquer outro valor para true.
-    this._disabled = value != null && `${value}` !== 'false';
-  }
-
-  private _checked = false;
-  @Input()
-  get checked(): boolean {
-    return this._checked;
-  }
-  set checked(value: boolean | string) {
-    // Converte string para boolean: 'false' (string) ou false (boolean) para false, qualquer outro valor para true
-    const booleanValue = value != null && `${value}` !== 'false';
-    if (booleanValue !== this._checked) {
-      this._checked = booleanValue;
-      this.onChange(this._checked);
-    }
-  }
-
-  @Output() checkedChange = new EventEmitter<{ checked: boolean }>();
-  @Output() change = new EventEmitter<Event>();
-
-  // ControlValueAccessor methods
-  onChange: any = () => {};
-  onTouched: any = () => {};
-
-  writeValue(value: boolean): void {
-    this._checked = 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;
-
-    const input = event.target as HTMLInputElement;
-    this.checked = input.checked;
-    this.onTouched();
-
-    const eventData = { checked: this.checked };
-    this.checkedChange.emit(eventData);
-    this.change.emit(event);
-  }
-}

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

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