matcha-components 20.15.0 → 20.16.0

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

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

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

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

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

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

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

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

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