matcha-components 20.13.0 → 20.15.0

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

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

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

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

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