matcha-components 20.13.0 → 20.15.0

package/src/lib/matcha-button-toggle/button-toggle/button-toggle.component.ts

@@ -0,0 +1,87 @@
+import {
+  AfterContentInit, Component, ContentChildren, HostBinding,
+  Input, QueryList, ElementRef
+} from '@angular/core';
+import { MatchaButtonComponent } from '../../matcha-button/button/button.component';
+
+@Component({
+  selector: 'matcha-button-toggle',
+  templateUrl: './button-toggle.component.html',
+  styleUrl: './button-toggle.component.scss',
+  standalone: false
+})
+export class MatchaButtonToggleComponent implements AfterContentInit {
+
+    private _multiple = false;
+  @Input() get multiple() { return this._multiple; }
+  set multiple(v: boolean | string) { this._multiple = v === 'false' ? false : !!v; }
+
+  private _disabled = false;
+  @Input() get disabled() { return this._disabled; }
+  set disabled(v: boolean | string) { this._disabled = v === 'false' ? false : !!v; }
+  @HostBinding('attr.disabled') get isDisabled() { return this.disabled || null; }
+
+  private _required = false;
+  @Input() get required() { return this._required; }
+  set required(v: boolean | string) { this._required = v === 'false' ? false : !!v; }
+
+  @Input() inactiveColor = 'primary';
+
+  @Input() inactiveType: string = 'solid';
+
+  private _gap = 16;
+  @Input() set gap(v: string | number) { const n = +v; this._gap = isNaN(n) ? 16 : n; }
+  get gapClass() { return `gap-${this._gap}`; }
+
+  get gap(): number {
+    return this._gap;
+  }
+
+  @ContentChildren(MatchaButtonComponent)
+  buttons!: QueryList<MatchaButtonComponent>;
+
+  constructor(private elementRef: ElementRef) {}
+
+  ngAfterContentInit(): void {
+    const buttons = this.elementRef.nativeElement.querySelectorAll('button[matcha-button]');
+    buttons.forEach((button: Element, index: number) => {
+      const isActive = button.hasAttribute('active');
+      this.setButtonState(button as HTMLElement, isActive);
+
+      button.addEventListener('click', () => this.onButtonSelected(button as HTMLElement));
+    });
+  }
+
+  private setButtonState(button: HTMLElement, isActive: boolean): void {
+    if (isActive) {
+      button.setAttribute('active', '');
+    } else {
+      button.removeAttribute('active');
+    }
+  }
+
+  private onButtonSelected(selectedButton: HTMLElement): void {
+    const buttons = this.elementRef.nativeElement.querySelectorAll('button[matcha-button]');
+    const activeButtons = Array.from(buttons).filter((button: unknown) =>
+      (button as Element).hasAttribute('active')
+    );
+
+    if (this.required && activeButtons.length === 1 && activeButtons[0] === selectedButton) {
+      return;
+    }
+
+    if (this.multiple) {
+      const isActive = selectedButton.hasAttribute('active');
+      this.setButtonState(selectedButton, !isActive);
+      return;
+    }
+
+    if (selectedButton.hasAttribute('active')) {
+      this.setButtonState(selectedButton, false);
+    } else {
+      buttons.forEach((button: Element) => {
+        this.setButtonState(button as HTMLElement, button === selectedButton);
+      });
+    }
+  }
+}

package/src/lib/matcha-button-toggle/button-toggle.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaButtonToggleComponent } from './button-toggle/button-toggle.component';
+import { MatchaTooltipModule } from '../matcha-tooltip/tooltip.module';
+
+
+
+@NgModule({
+  declarations: [MatchaButtonToggleComponent],
+  imports: [
+    CommonModule,
+    MatchaTooltipModule
+  ],
+  exports: [MatchaButtonToggleComponent]
+})
+export class MatchaButtonToggleModule { }

package/src/lib/matcha-button-toggle/button-toggle.stories.ts

@@ -0,0 +1,106 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { MatchaTooltipModule } from '../matcha-tooltip/tooltip.module';
+import { MatchaTitleModule } from '../matcha-title/title.module';
+import { MatchaButtonModule } from '../matcha-button/button.module';
+import { MatchaDividerModule } from '../matcha-divider/divider.module';
+import { MatchaIconModule } from '../matcha-icon/icon.module';
+import { MatchaButtonToggleModule } from './button-toggle.module';
+export default {
+    title: 'Components / Button Toggle',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [
+                CommonModule,
+                MatchaButtonToggleModule,
+                MatchaTitleModule,
+                MatchaTooltipModule,
+                MatchaButtonModule,
+                MatchaIconModule,
+                MatchaDividerModule
+            ],
+        }),
+    ],
+    tags: ['autodocs'],
+    args: {
+        multiple: false,
+        required: false,
+        disabled: false,
+        inactiveColor: 'grey',
+        inactiveType: 'alpha',
+        gap:16,
+    },
+    argTypes: {
+        inactiveColor: {
+            control: 'select',
+            options: ['primary', 'accent', 'warn', 'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', 'brown', 'grey', 'blue-grey'],
+        },
+        inactiveType: {
+            control: 'select',
+            options: ['solid', 'basic', 'outline', 'alpha', 'link'],
+        },
+        gap: {
+            control: {
+                type: 'range',
+                min: 0,
+                max: 48,
+                step: 4,
+            },
+        },
+
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+/**
+ * Para Importar o componente, use o seguinte comando:
+ *
+ * ```typescript
+ * import {MatchaButtonToggleModule} from 'matcha-components/button-toggle';
+ * ```
+ */
+export const ButtonToggleControls: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <matcha-button-toggle
+            ${args['required'] ? `required="${args['required']}"` : ''}
+            ${args['multiple'] ? `multiple="${args['multiple']}"` : ''}
+            ${args['inactiveColor'] ? `inactiveColor="${args['inactiveColor']}"` : ''}
+            ${args['inactiveType'] ? `inactiveType="${args['inactiveType']}"` : ''}
+            ${args['gap'] ? `gap="${args['gap']}"` : 'gap=0'}
+            ${args['disabled'] ? `disabled="${args['disabled']}"` : ''}>
+                <button matcha-button color="blue" size="tiny">Criar</button>
+                <button matcha-button color="blue" size="tiny" active>Buscar</button>
+                <button matcha-button color="blue" size="tiny">Transferir</button>
+                <button matcha-button color="blue" size="tiny">Exportar</button>
+            </matcha-button-toggle>
+        `,
+
+    }),
+    name: 'Button Toggle Controls',
+};
+export const ButtonToggleDisabled: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <matcha-button-toggle gap="0" inactiveColor="grey" inactiveType="basic" disabled="true">
+                <button matcha-button color="blue" size="tiny">Criar</button>
+                <button matcha-button color="blue" size="tiny" active>Buscar</button>
+            </matcha-button-toggle>
+        `,
+
+    }),
+    name: 'Button Toggle Disabled',
+};

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

@@ -0,0 +1 @@
+<ng-content></ng-content>

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

@@ -0,0 +1,86 @@
+import { ChangeDetectionStrategy, Component, Directive, HostBinding, Inject, InjectionToken, Input, Optional, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'matcha-card',
+    templateUrl: './card.component.html',
+    styleUrls: ['./card.component.scss'],
+    standalone: false
+})
+export class MatchaCardComponent {
+
+    private _color = 'surface';
+    @Input() get color() { return this._color; }
+    set color(v: string | null) { this._color = v || 'surface';}
+
+    @HostBinding('attr.color')
+    get colorAttr(): string | null {
+        return this.color;
+    }
+
+    @Input()
+    blockquote: 'left' | 'right' | 'none' | null = 'none';
+
+    @Input()
+    blockquoteColor: string | null = null;
+
+    @Input()
+    class: string | null = '';
+
+    private _alpha = false;
+    @Input() get alpha() { return this._alpha; }
+    set alpha(v: boolean | string) { this._alpha = v === 'false' ? false : !!v;}
+
+    @HostBinding('attr.alpha')
+    get alphaAttr(): string | null {
+        return this.alpha ? 'true' : 'false';
+    }
+
+
+    private _tint = false;
+    @Input() get tint() { return this._tint; }
+    set tint(v: boolean | string) { this._tint = v === 'false' ? false : !!v;}
+
+    @HostBinding('attr.tint')
+    get tintAttr(): string | null {
+        return this.tint ? 'true' : 'false';
+    }
+
+    private _loading = false;
+    @Input() get loading() { return this._loading; }
+    set loading(v: boolean | string) { this._loading = v === 'false' ? false : !!v;}
+
+    @HostBinding('class')
+    public get classes(): string {
+        let backgroundColor = '';
+        let blockquoteColor = '';
+        let blockquotePosition = null;
+
+        if (this.color === 'bg' || this.color === 'surface') {
+            if (this.hasBlockquotePosition()) {
+                blockquotePosition = `matcha-card-border-${this.blockquote}`;
+                blockquoteColor = this.blockquoteColor ? `border-color-${this.blockquoteColor}` : '';
+            } else {
+                blockquotePosition = '';
+                blockquoteColor = '';
+            }
+
+        } else {
+            if (this.hasBlockquotePosition()) {
+                blockquotePosition = `matcha-card-border-${this.blockquote}`;
+                blockquoteColor = this.color ? `border-color-${this.blockquoteColor}` : '';
+            } else {
+                blockquotePosition = '';
+                blockquoteColor = '';
+            }
+        }
+
+        const activeClasses = `matcha-card ${blockquotePosition} ${blockquoteColor} ${backgroundColor} ${this.loading ? 'loading' : ''} ${this.class}`;
+        return activeClasses;
+    }
+
+    public hasBlockquotePosition(): boolean {
+        return this.blockquote === 'left' || this.blockquote === 'right';
+    }
+
+
+}

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

@@ -0,0 +1,54 @@
+export const cardArgtypes = {
+    elevation: {
+        description: 'Elevation level of the card',
+        defaultValue: '0',
+        table: {
+            type: { summary: 'range' },
+            defaultValue: { summary: '0' },
+        },
+        control: {
+            type: 'range',
+            min: '0',
+            max: '24',
+            step: '1',
+        },
+    },
+    blockquote: {
+        description: 'Position of the blockquote bar',
+        control: 'select',
+        defaultValue: '',
+        table: {
+            defaultValue: { summary: '' },
+        },
+        options: ['left', 'right', 'none'],
+    },
+    blockquoteColor: {
+        description: 'Theme color palette for the blockquote bar',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['fg', 'accent', 'primary', 'warn', 'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', null],
+    },
+    color: {
+        description: 'Theme color palette for the card background',
+        control: 'select',
+        defaultValue: 'surface',
+        table: {
+            defaultValue: { summary: 'surface' },
+        },
+        options: ['bg', 'fg', 'surface', 'accent', 'primary', 'warn', 'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange'],
+    },
+    alpha: {
+        description: 'Opacity of the card color',
+        control: 'boolean',
+        defaultValue: 'true',
+        table: {
+            defaultValue: { summary: 'true' },
+        },
+    },
+    label: {
+        control: 'text',
+    },
+};

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

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaCardComponent } from './card/card.component';
+import { MatchaDividerModule } from '../matcha-divider/divider.module';
+import { MatchaIconModule } from '../matcha-icon/icon.module';
+import { MatchaElevationModule } from '../matcha-elevation/elevation.module';
+import { MatchaTitleModule } from '../matcha-title/title.module';
+import { MatchaTooltipModule } from '../matcha-tooltip/tooltip.module';
+
+@NgModule({
+    declarations: [MatchaCardComponent],
+    imports: [
+        CommonModule,
+        MatchaElevationModule,
+        MatchaIconModule,
+        MatchaTitleModule,
+        MatchaDividerModule,
+        MatchaTooltipModule,
+    ],
+    exports: [MatchaCardComponent],
+})
+export class MatchaCardModule {}