matcha-components 1.0.8 → 1.0.15

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

@@ -1,10 +0,0 @@
-<ng-content select="[mat-card-avatar], [matCardAvatar]"></ng-content>
-<div class="title text-bold">
-    <span class="title-bullet matcha-background-accent h-24 w-8"></span>
-    <ng-content
-        select="mat-card-title, mat-card-subtitle,
-      [mat-card-title], [mat-card-subtitle],
-      [matCardTitle], [matCardSubtitle]"
-    ></ng-content>
-</div>
-<ng-content></ng-content>

package/src/lib/matcha-card/card-title-group.html

@@ -1,12 +0,0 @@
-<div>
-  <ng-content
-      select="mat-card-title, mat-card-subtitle,
-      [mat-card-title], [mat-card-subtitle],
-      [matCardTitle], [matCardSubtitle]"></ng-content>
-</div>
-<ng-content select="[mat-card-image], [matCardImage],
-                    [mat-card-sm-image], [matCardImageSmall],
-                    [mat-card-md-image], [matCardImageMedium],
-                    [mat-card-lg-image], [matCardImageLarge],
-                    [mat-card-xl-image], [matCardImageXLarge]"></ng-content>
-<ng-content></ng-content>

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

@@ -1,3 +0,0 @@
-<div [class]="classes">
-    <ng-content></ng-content>
-</div>

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

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MatchaCardComponent } from './card.component';
-
-describe('MatchaCardComponent', () => {
-    let component: MatchaCardComponent;
-    let fixture: ComponentFixture<MatchaCardComponent>;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            declarations: [MatchaCardComponent],
-        });
-        fixture = TestBed.createComponent(MatchaCardComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
-});

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

@@ -1,47 +0,0 @@
-import { ChangeDetectionStrategy, Component, Directive, Inject, InjectionToken, Input, Optional, ViewEncapsulation } from '@angular/core';
-
-@Component({
-    selector: 'matcha-card',
-    templateUrl: './card.component.html',
-    styleUrls: ['./card.component.scss'],
-})
-export class MatchaCardComponent {
-    @Input()
-    elevation: number | string = 0;
-
-    @Input()
-    blockquote: 'left' | 'right' | 'none' | null = 'none';
-
-    @Input()
-    color: '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' | string = 'surface';
-
-    @Input()
-    blockquoteColor: '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 = null;
-
-    @Input()
-    class: string = '';
-
-    @Input()
-    alpha: boolean = false;
-
-    @Input()
-    loading: boolean = false;
-
-    public get classes(): string {
-        const elevation = `elevation-z-${this.elevation}`;
-        let blockquoteposition = this.blockquote === 'right' || 'left' ? `matcha-card-border-${this.blockquote}` : '';
-        let backgroundColor = '';
-        let blockquoteColor = '';
-
-        if (this.color === 'bg' || this.color === 'surface') {
-            backgroundColor = `background-${this.color}${this.alpha ? '-alpha' : ''}`;
-            blockquoteColor = this.blockquoteColor ? `border-color-${this.blockquoteColor}` : '';
-        } else {
-            backgroundColor = `background-${this.color}${this.alpha ? '-alpha' : ''} border-color-${this.color}`;
-            this.alpha ? (blockquoteposition = this.blockquote === 'right' || 'left' ? `matcha-card-border-${this.blockquote}` : '') : (blockquoteposition = '');
-        }
-
-        const activeClasses = `matcha-card ${elevation} ${blockquoteposition} ${blockquoteColor} ${backgroundColor} ${this.loading ? 'loading' : ''} ${this.class}`;
-        return activeClasses;
-    }
-}

package/src/lib/matcha-card/card.mdx

@@ -1,43 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./card.stories";
-
-<Meta title="Atoms / Card / Documentação" />
-
-# Card
-
-> _card_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
-
----
-
-### Modes
-
-<div class="d-flex-column gap-16">
-    <div class="d-flex-column">
-        <div class="matcha-card background-surface d-flex-column gap-16">
-            <span class="h5">Card overview</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.CardOverview} />
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-                <matcha-card blockquoteColor="foreground" elevation="1" blockquote="left" backgroundColor="surface" alpha="false">
-                    Card Content
-                </matcha-card>
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import { MatchaCardModule } from 'matcha-components';`
-
-<br />

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

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaCardComponent } from './card.component';
-
-@NgModule({
-    declarations: [MatchaCardComponent],
-    imports: [CommonModule],
-    exports: [MatchaCardComponent],
-})
-export class MatchaCardModule {}

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

@@ -1,92 +0,0 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { MatchaCardModule } from './card.module';
-import { cardArgtypes } from './card-argtype';
-
-/** Este é o card principal */
-export default {
-    title: 'Atoms/Card',
-    decorators: [
-        moduleMetadata({
-            imports: [MatchaCardModule],
-        }),
-    ],
-    // tags: ['autodocs'],
-    args: {
-        elevation: 1,
-        blockquote: 'left',
-        blockquoteColor: 'accent',
-        color: 'surface',
-        label: 'Card Content',
-    },
-    argTypes: cardArgtypes,
-    parameters: {
-        docs: {
-            // canvas: { sourceState: 'shown' },
-            source: { type: 'code' },
-        },
-        controls: {
-            expanded: true,
-            exclude: ['mode'],
-        },
-        componentSubtitle: 'Displays an image that represents a user or organization',
-    },
-} as Meta;
-
-/** Este é o card principal */
-export const CardOverview: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <div class="d-flex-column gap-16">
-            <matcha-card [blockquoteColor]="blockquoteColor" [elevation]="elevation" [blockquote]="blockquote" [color]="color" [alpha]="alpha">{{ label }}</matcha-card>
-        <div>
-        `,
-    }),
-    name: 'Card Overview',
-};
-
-export const WithNestedUsage: StoryObj = {
-    render: () => ({
-        props: {
-            elevation: 10,
-            blockquote: 'left',
-            blockquoteColor: 'foreground',
-            color: 'surface',
-            label: 'Card Content',
-        },
-        template: `
-        <div class="d-flex-column gap-16">
-            <matcha-card elevation="1" blockquote="left" color="surface">
-                Surface Color
-                <matcha-card elevation="1" blockquote="right" color="bg" class="p-0">
-                    Background color
-                    <matcha-card elevation="1" blockquote="left" color="surface" alpha="true">
-                        Surface Alpha
-                        <matcha-card elevation="1" blockquote="right" color="bg" alpha="true">Background Alpha</matcha-card>
-                    </matcha-card>
-                </matcha-card>
-            </matcha-card>
-        <div>
-        `,
-        inlineStory: true,
-    }),
-    name: 'Nested',
-};
-
-export const WithColoredUsage: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-            elevation: 1,
-            blockquote: 'left',
-            blockquoteColor: 'yellow',
-            color: 'yellow',
-        },
-        template: `
-            <matcha-card [blockquoteColor]="blockquoteColor" [elevation]="elevation" [blockquote]="blockquote" [color]="color">{{ label }}</matcha-card>
-        `,
-    }),
-    name: 'Raised',
-};

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

@@ -1,79 +0,0 @@
-export const checkboxArgtypes = {
-    disabled: {
-        description: 'Whether the checkbox is disabled',
-        control: 'boolean',
-        defaultValue: true,
-        table: {
-            defaultValue: { summary: true },
-        },
-    },
-    checked: {
-        description: 'Whether the checkbox is checked',
-        control: 'boolean',
-        defaultValue: true,
-        table: {
-            defaultValue: { summary: true },
-        },
-    },
-    required: {
-        description: 'Whether the checkbox is required',
-        control: 'boolean',
-        defaultValue: true,
-        table: {
-            defaultValue: { summary: true },
-        },
-    },
-    indeterminate: {
-        description: 'Whether the checkbox is indeterminate',
-        control: 'boolean',
-        defaultValue: true,
-        table: {
-            defaultValue: { summary: true },
-        },
-    },
-    disableRipple: {
-        description: 'Whether the checkbox is disableRipple',
-        control: 'boolean',
-        defaultValue: true,
-        table: {
-            defaultValue: { summary: true },
-        },
-    },
-    color: {
-        description: 'Theme color palette',
-        control: 'select',
-        defaultValue: 'accent',
-        table: {
-            defaultValue: { summary: 'accent' },
-        },
-        options: ['primary', 'accent', 'warn'],
-    },
-    labelPosition: {
-        description: 'Theme color palette',
-        control: 'select',
-        defaultValue: 'after',
-        table: {
-            defaultValue: { summary: 'after' },
-        },
-        options: ['before', 'after'],
-    },
-    value: {
-        description: 'Value of the checkbox',
-        defaultValue: 'Option Selected',
-        table: {
-            defaultValue: { summary: 'Option Selected' },
-        },
-        control: 'text',
-    },
-    change: {
-        action: 'change',
-    },
-    label: {
-        description: 'Value of the checkbox',
-        defaultValue: 'Check-me',
-        table: {
-            defaultValue: { summary: 'Check-me' },
-        },
-        control: 'text',
-    },
-};

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

@@ -1,14 +0,0 @@
-import { Directive, ElementRef, Renderer2 } from '@angular/core';
-
-@Directive({
-    selector: '[matcha-checkbox]',
-})
-export class MatchaCheckboxDirective {
-    constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(
-            this._elementRef.nativeElement,
-            'matcha-checkbox'
-        );
-    }
-}

package/src/lib/matcha-checkbox/checkbox.mdx

@@ -1,76 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./checkbox.stories";
-
-<Meta title="Atoms / Checkbox / Documentação" />
-
-# Checkbox
-
-> _checkbox_ é um componente atômico usado para permitir que os usuários selecionem várias opções independentes, ou seja, podem marcar ou desmarcar várias caixas de seleção ao mesmo tempo.
-
----
-
-### Modes
-<div class="d-flex-column gap-16">
-    <div class="d-flex-column">
-        <div class="matcha-card background-surface d-flex-column gap-16">
-            <span class="h5">Checkbox - Colors</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.CheckboxColors} />
-            </div>
-            <div class="d-flex-column">
-                ```html
-                <mat-checkbox checked="true" color="primary">primary</mat-checkbox>
-                <mat-checkbox checked="true" color="accent">accent</mat-checkbox>
-                <mat-checkbox checked="true" color="warn">warn</mat-checkbox>
-                ```
-            </div>
-        </div>
-    </div>
-
-    <div class="grid-md-2 gap-16">
-        <div class="matcha-card background-surface d-flex-column gap-16">
-            <span class="h5">Checkbox - Label Position</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.CheckboxLabelPosition} />
-            </div>
-            <div class="d-flex-column">
-                ```html
-                <mat-checkbox checked='true' labelPosition="before">
-                    Check me
-                </mat-checkbox>
-                <mat-checkbox checked='true' labelPosition="after">
-                    Check me
-                </mat-checkbox>
-                ```
-            </div>
-        </div>
-
-        <div class="matcha-card background-surface d-flex-column gap-16">
-            <span class="h5">Checkbox - Disabled</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.CheckboxDisabled} />
-            </div>
-            <div class="d-flex-column">
-                ```html
-                <mat-checkbox disabled='false' checked='true'>
-                    Check me
-                </mat-checkbox>
-                <mat-checkbox disabled='false' checked='false'>
-                    Check me
-                </mat-checkbox>
-                ```
-            </div>
-        </div>
-    </div>
-</div>
-
-<br />
-
-### Installation
-
-`import {MatCheckboxModule} from '@angular/material/checkbox';`
-
-[Official documentation](https://material.angular.io/components/checkbox/overview)
-
-<br />

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

@@ -1,9 +0,0 @@
-import { NgModule } from '@angular/core';
-import { MatchaCheckboxDirective } from './checkbox.directive';
-
-@NgModule({
-    declarations: [MatchaCheckboxDirective],
-    imports: [],
-    exports: [MatchaCheckboxDirective],
-})
-export class MatchaCheckboxModule {}

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

@@ -1,161 +0,0 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { action } from '@storybook/addon-actions';
-import { checkboxArgtypes } from './checkbox.argtype';
-import { MatchaCheckboxDirective } from './checkbox.directive';
-
-import { config } from '@storybook/addon-designs';
-
-export default {
-    title: 'Atoms / Checkbox',
-    decorators: [
-        moduleMetadata({
-            imports: [MatCheckboxModule],
-            declarations: [MatchaCheckboxDirective],
-        }),
-    ],
-    args: {
-        disabled: false,
-        label: 'Check me',
-        change: action('change'),
-        checked: true,
-        required: false,
-        indeterminate: false,
-        disableRipple: false,
-        color: 'accent',
-        labelPosition: 'after',
-        value: 'Option Selected',
-    },
-    argTypes: checkboxArgtypes,
-    parameters: {
-        controls: {
-            expanded: false,
-        },
-        design: config({
-            type: 'figma',
-            url: 'https://www.figma.com/file/Enji6Zk0UvtHyt8fdOPdBx/DS-PAINEL-(Copy)?type=design&mode=design&t=IKqH3YB1sj5qgDHJ-1',
-        }),
-    },
-} as Meta;
-
-export const CheckboxDefault: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-            <div class="d-flex gap-16">
-                <mat-checkbox matcha-checkbox [disabled]="disabled" [checked]='checked' [color]="color" [labelPosition]="labelPosition" [value]="label" (change)="change($event)">
-                    {{label}}
-                </mat-checkbox>
-            </div>
-        `,
-    }),
-    name: 'Checkbox Default',
-};
-
-export const CheckboxColors: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-        <div class="d-flex gap-16">
-            <mat-checkbox matcha-checkbox [checked]='checked' color="primary" [labelPosition]="labelPosition" [disabled]="disabled" [value]="value" (change)="change($event)">
-                Primary
-            </mat-checkbox>
-            
-            <mat-checkbox matcha-checkbox [checked]='checked' color="accent" [labelPosition]="labelPosition" [disabled]="disabled" [value]="value" (change)="change($event)">
-                Accent
-            </mat-checkbox>
-            
-            <mat-checkbox matcha-checkbox [checked]='checked' color="warn" [labelPosition]="labelPosition" [disabled]="disabled" [value]="value" (change)="change($event)">
-                Warn
-            </mat-checkbox>
-        </div>
-        `,
-    }),
-    parameters: {
-        controls: {
-            exclude: [
-                'color',
-                'indeterminate',
-                'required',
-                'disableRipple',
-                'label',
-            ],
-        },
-    },
-    name: 'Checkbox Colors',
-};
-
-export const CheckboxDisabled: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-        <div class="d-flex gap-16">
-            <mat-checkbox matcha-checkbox disabled="disabled" checked='true'>
-                {{label}}
-            </mat-checkbox>
-            
-            <div class="d-flex-center-center">
-                <div class="border-color-disabled br-2 h-24"></div>
-            </div>
-            
-            <mat-checkbox matcha-checkbox disabled="disabled" checked='false'>
-                {{label}}
-            </mat-checkbox>
-        </div>
-        `,
-    }),
-    parameters: {
-        controls: {
-            exclude: [
-                'change',
-                'color',
-                'labelPosition',
-                'checked',
-                'disabled',
-                'indeterminate',
-                'required',
-                'disableRipple',
-                'value',
-            ],
-        },
-    },
-    name: 'Checkbox Disabled',
-};
-
-export const CheckboxLabelPosition: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-        <div class="d-flex gap-16">
-            <mat-checkbox matcha-checkbox checked='true' labelPosition="before">
-                {{label}}
-            </mat-checkbox>
-            
-            <div class="d-flex-center-center">
-                <div class="border-color-disabled br-2 h-24"></div>
-            </div>
-            
-            <mat-checkbox matcha-checkbox checked='true' labelPosition="after">
-                {{label}}
-            </mat-checkbox>
-        </div>
-        `,
-    }),
-    parameters: {
-        controls: {
-            exclude: [
-                'change',
-                'color',
-                'labelPosition',
-                'checked',
-                'disabled',
-                'indeterminate',
-                'required',
-                'disableRipple',
-                'value',
-            ],
-        },
-    },
-    name: 'Checkbox Label Position',
-};

package/src/lib/matcha-checkbox/checkbox.stories.txt

@@ -1,74 +0,0 @@
-import {Meta, moduleMetadata} from '@storybook/angular';
-import {MatCheckbox, MatCheckboxModule} from '@angular/material/checkbox';
-import {action} from '@storybook/addon-actions';
-import {boolean, text} from '@storybook/addon-knobs';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatchaCheckboxDirective } from './matcha-checkbox.directive';
-
-
-export default {
-    title: 'Componentes/Matcha Checkbox',
-    component: MatCheckbox,
-    decorators: [
-      moduleMetadata({
-          imports: [MatCheckboxModule, BrowserAnimationsModule],
-          declarations: [MatchaCheckboxDirective],
-      }),
-    ],
-    args: {
-        disabled: boolean('disabled', false),
-        label: text('label', 'Check me'),
-        onChange: action('change')
-    },
-    argTypes: {
-        disabled: { control: 'boolean' },
-        label: { control: 'text' },
-        onChange: { control: 'boolean' }
-    }
-} as Meta;
-
-export const checkbox = () => ({
-    component: MatCheckbox,
-    template: `
-        <div>
-            <mat-checkbox [disabled]="disabled" (change)="onChange($event)">
-                {{label}}
-            </mat-checkbox>
-        </div>
-    `,
-    props: {
-      text: 'Botão com ícone',
-      icon: 'favorite',
-      onClick: action('Botão com ícone clicado'),
-    },
-  });
-
-
-// export default MATCHA_CARD;
-
-// export const Default2: MatCheckbox = {
-//     render: (args: any) => ({
-//         props: args,
-//     }),
-// };
-
-
-
-// storiesOf('Checkbox', module)
-//   .add('Basic', () => ({
-//     template: `
-//     <div>
-//       <mat-checkbox [disabled]="disabled" (change)="onChange($event)">
-//         {{label}}
-//       </mat-checkbox>
-//     </div>
-//     `,
-//     props: {
-//       disabled: boolean('disabled', false),
-//       label: text('label', 'Check me'),
-//       onChange: action('change')
-//     },
-//     moduleMetadata: {
-//       imports: [MatCheckboxModule]
-//     }
-//   }));

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

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { MatchaChipsDirective } from './matcha-chips.directive';
-
-@NgModule({
-  declarations: [MatchaChipsDirective],
-  imports: [
-  ],
-  exports:[
-      MatchaChipsDirective
-  ]
-})
-export class MatchaChipsModule { }