matcha-components 1.0.6 → 1.0.7

package/src/lib/matcha-buttons/matcha-btn-md.directive.ts

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

package/src/lib/matcha-buttons/matcha-btn-pill.directive.ts

@@ -1,15 +0,0 @@
-import { Directive, ElementRef, Renderer2 } from '@angular/core';
-
-@Directive({
-  selector: '[matcha-btn-pill]'
-})
-export class MatchaBtnPillDirective {
-
-  constructor(
-    private _elementRef: ElementRef,
-    private _renderer: Renderer2
-  ) {
-    this._renderer.addClass(this._elementRef.nativeElement, 'matcha-button-pill')
-  }
-
-}

package/src/lib/matcha-buttons/matcha-btn-size.directive.ts

@@ -1,17 +0,0 @@
-import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
-
-@Directive({
-    selector: '[size]'
-})
-export class MatchaBtnSizeDirective {
-    @Input('size') size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null = null;
-
-    constructor(
-        private _elementRef: ElementRef,
-        private _renderer: Renderer2
-    ) {
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-
-        this.size == null ? null : this._renderer.addClass(this._elementRef.nativeElement,`matcha-button-${this.size}`);
-    }
-}

package/src/lib/matcha-buttons/matcha-btn-xl.directive.ts

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

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

@@ -1,55 +0,0 @@
-import { Story } from '@storybook/blocks';
-import * as ComponentStories from './matcha-card.stories';
-
-
-# Progress bar
-
-> *matcha-card*  the purpose of the matcha-card is to visually separate content, and it may also receive some options to improve understanding of the content presented.
-
-<br/>
-
-## Installation
-
-`import { MatchaCardModule } from './matcha-card/matcha-card.module';`
-
-<br/>
-
-## Example
-
-<br/>
-
-<Story of={ComponentStories.WithBasicUsage} />
-
-
-
-
-import { Story } from '@storybook/blocks';
-import * as ComponentStories from './matcha-card.stories';
-
-
-# Progress bar
-
-> *matcha-card*  the purpose of the matcha-card is to visually separate content, and it may also receive some options to improve understanding of the content presented.
-
-<br/>
-
-## Installation
-
-`import { MatchaCardModule } from './matcha-card/matcha-card.module';`
-
-<br/>
-
-## Example
-
-<br/>
-
-<Story name="matcha-card - Flat" of={ComponentStories.WithBasicUsage} />
-
-
-<br/>
-
-## Code
-```html
-    <matcha-card elevation="0" background="surface">Meu card</matcha-card>
-```
-

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

@@ -1,123 +0,0 @@
-export const matchaCardArgtypes = {
-    elevation: {
-        description: 'Elevation level of the card',
-        control: 'select',
-        defaultValue: '1',
-        table: {
-            defaultValue: { summary: '1' },
-        },
-        options: [
-            '0' ,
-            '1' ,
-            '2' ,
-            '3' ,
-            '4' ,
-            '5' ,
-            '6' ,
-            '7' ,
-            '8' ,
-            '9' ,
-            '10' ,
-            '11' ,
-            '12' ,
-            '13' ,
-            '14' ,
-            '15' ,
-            '16' ,
-            '17' ,
-            '18' ,
-            '19' ,
-            '20' ,
-            '21' ,
-            '22' ,
-            '23' ,
-            '24'
-        ]
-    },
-    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: 'primary',
-        table: {
-            defaultValue: { summary: 'primary' },
-        },
-        options: [
-            'accent',
-            'primary',
-            'warn',
-            'background',
-            'foreground',
-            'red',
-            'pink',
-            'purple',
-            'deep-purple',
-            'indigo',
-            'blue',
-            'light-blue',
-            'cyan',
-            'teal',
-            'green',
-            'light-green',
-            'lime',
-            'yellow',
-            'amber',
-            'orange',
-            'deep-orange'
-        ]
-    },
-    backgroundColor: {
-        description: 'Theme color palette for the card background',
-        control: 'select',
-        defaultValue: 'surface',
-        table: {
-            defaultValue: { summary: 'surface' },
-        },
-        options: [
-            'surface',
-            'surface',
-            'bg',
-            'background',
-            'foreground',
-            '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 backgroundColor',
-        control: 'boolean',
-        defaultValue: true,
-        table: {
-            defaultValue: { summary: true },
-        },
-    },
-    label: {
-        control: 'text'
-    },
-  }

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

@@ -1,3 +0,0 @@
-<div class="matcha-card-content">
-    <ng-content></ng-content>
-</div>

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

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

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

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'matcha-card-content',
-  templateUrl: './matcha-card-content.component.html',
-  styleUrls: ['./matcha-card-content.component.scss']
-})
-export class MatchaCardContentComponent {
-
-}

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

@@ -1,3 +0,0 @@
-<div class="matcha-card-footer">
-    <ng-content></ng-content>
-</div>

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

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

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

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'matcha-card-footer',
-  templateUrl: './matcha-card-footer.component.html',
-  styleUrls: ['./matcha-card-footer.component.scss']
-})
-export class MatchaCardFooterComponent {
-
-}

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

@@ -1,4 +0,0 @@
-<div class="matcha-card-header d-flex-space-between pb-8">
-    <ng-content></ng-content>
-</div>
-

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

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

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

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'matcha-card-header',
-  templateUrl: './matcha-card-header.component.html',
-  styleUrls: ['./matcha-card-header.component.scss']
-})
-export class MatchaCardHeaderComponent {
-
-}

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

@@ -1,117 +0,0 @@
-    // -----------------------------------------------------------------------------------------------------
-    // @ Cards
-    // -----------------------------------------------------------------------------------------------------
-    .matcha-card,
-    .matcha-card-raised,
-    .matcha-card-flat {
-        padding: 16px;
-        border-radius: 8px;
-
-        &-border,
-        &.matcha-card-border,
-        &-border-left,
-        &.matcha-card-border-left {
-            border-left: 8px solid;
-        }
-
-        &-border-right,
-        &.matcha-card-border-right {
-            border-right: 8px solid;
-        }
-
-        &.disabled {
-            transition: opacity 100ms linear;
-            opacity: 0.5;
-            pointer-events: none;
-        }
-
-        &.enabled {
-            transition: opacity 100ms linear;
-            opacity: 1;
-        }
-
-        &.variable-width {
-            min-width: 0;
-        }
-
-        &.auto-width {
-            min-width: 0;
-            max-width: none;
-        }
-
-        &.fixed-width {
-            min-width: 264px;
-            max-width: 264px;
-            width: 264px;
-        }
-
-        // Buttons
-        .mat-button {
-            min-width: 0 !important;
-            padding: 0 8px !important;
-        }
-
-        // Button Toggle Group
-        .mat-button-toggle-group,
-        .mat-button-toggle-standalone {
-            box-shadow: none !important;
-        }
-
-        .mat-tab-label {
-            min-width: 0 !important;
-        }
-
-        // Divider
-        .card-divider {
-            margin: 16px;
-
-            &.full-width {
-                margin: 0;
-            }
-        }
-
-        // Expand Area
-        .card-expand-area {
-            overflow: hidden;
-
-            .card-expanded-content {
-                padding: 8px 16px 16px 16px;
-                line-height: 1.75;
-            }
-        }
-
-        .title {
-            line-height: 24px;
-            margin: 0 0 16px 0;
-            display: flex;
-            align-items: center;
-
-            .title-bullet {
-                height: 100%;
-                width: 8px;
-                margin: 0px 8px 0 0;
-                display: inline-block;
-                position: relative;
-                border-radius: 10px;
-            }
-
-            .title-content {
-                line-height: 20px;
-                display: -webkit-box;
-                -webkit-line-clamp: 2;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                word-break: break-word;
-                white-space: initial;
-                -webkit-box-orient: vertical;
-                text-transform: capitalize;
-            }
-        }
-
-        .title-sm {
-            display: block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-    }

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

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MatchaCardComponent } from './matcha-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/matcha-card.component.ts

@@ -1,43 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-    selector: 'matcha-card',
-    templateUrl: './matcha-card.component.html',
-    styleUrls: ['./matcha-card.component.scss']
-})
-
-export class MatchaCardComponent {
-
-    // border-color-bg
-    // background-bg
-    // fill-bg
-    // stroke-bg
-
-    @Input()
-    elevation: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '13' | '14' | '15' | '16' | '17' | '18' | '19' | '20' | '21' | '22' | '23' | '24' = '0';
-
-    @Input()
-    blockquote: 'left' | 'right' | 'none' = 'none';
-
-    @Input()
-    blockquoteColor: 'bg' | 'fg' | 'accent' | 'primary' | 'warn' | 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' = 'fg';
-
-    @Input()
-    backgroundColor: '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' = 'surface';
-
-    @Input()
-    alpha: boolean = false;
-
-    @Input()
-    loading: boolean = false;
-
-    public get classes(): string {
-        const backgroundColor = this.backgroundColor ? `background-${this.backgroundColor}` : '';
-        const blockquoteColor = this.blockquoteColor ? `border-color-${this.blockquoteColor}` : '';
-        const elevation = `elevation-z-${this.elevation}`;
-        const blockquoteLeft = this.blockquote === 'left' ? `matcha-card-border-${this.blockquote}` : '';
-        const blockquoteRight = this.blockquote === 'right' ? `matcha-card-border-${this.blockquote}` : '';
-        const activeClasses = `matcha-card ${elevation} ${blockquoteLeft} ${blockquoteRight} ${blockquoteColor} ${backgroundColor}${this.alpha ? '-alpha' : ''} ${this.loading ? 'loading' : ''}`;
-        return activeClasses;
-    }
-}

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

@@ -1,27 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaCardHeaderComponent } from './matcha-card-header/matcha-card-header.component';
-import { MatchaCardContentComponent } from './matcha-card-content/matcha-card-content.component';
-import { MatchaCardFooterComponent } from './matcha-card-footer/matcha-card-footer.component';
-import { MatchaCardComponent } from './matcha-card.component';
-
-
-
-@NgModule({
-  declarations: [
-    MatchaCardHeaderComponent,
-    MatchaCardContentComponent,
-    MatchaCardFooterComponent,
-    MatchaCardComponent
-  ],
-  imports: [
-      CommonModule,
-    ],
-  exports:[
-    MatchaCardHeaderComponent,
-    MatchaCardContentComponent,
-    MatchaCardFooterComponent,
-    MatchaCardComponent
-  ]
-})
-export class MatchaCardModule { }

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

@@ -1,80 +0,0 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { MatchaCardModule } from './matcha-card.module';
-import { matchaCardArgtypes } from './matcha-card-argtype';
-
-/** Este é o card principal */
-export default {
-    title: 'Atoms/Card',
-    decorators: [
-        moduleMetadata({
-            imports: [MatchaCardModule],
-        }),
-    ],
-    tags: ['autodocs'],
-
-    args: {
-        elevation: '1',
-        blockquote: 'left',
-        blockquoteColor: 'foreground',
-        backgroundColor: 'surface',
-        label: 'O mais incrível é que funciona.',
-    },
-    argTypes: matchaCardArgtypes,
-    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 WithBasicUsage: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-            <matcha-card [blockquoteColor]="blockquoteColor" [elevation]="elevation" [blockquote]="blockquote" [backgroundColor]="backgroundColor" [alpha]="alpha">{{ label }}</matcha-card>
-        `,
-    }),
-    name: 'Matcha Card - Flat',
-};
-
-export const WithBlockquoteUsage: StoryObj = {
-    render: () => ({
-        props: {
-            elevation: '10',
-            blockquote: 'left',
-            blockquoteColor: 'foreground',
-            backgroundColor: 'surface',
-            label: 'O mais incrível é que funciona.',
-        },
-        template: `
-            <matcha-card blockquoteColor="foreground" elevation="1" blockquote="left" backgroundColor="surface"> Seu conteúdo vai aqui </matcha-card>
-        `,
-        inlineStory: true,
-    }),
-    name: 'Card - Blockquote Left',
-};
-
-export const WithColoredUsage: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-            elevation: '1',
-            blockquote: 'left',
-            blockquoteColor: 'yellow',
-            backgroundColor: 'yellow',
-        },
-        template: `
-            <matcha-card [blockquoteColor]="blockquoteColor" [elevation]="elevation" [blockquote]="blockquote" [backgroundColor]="backgroundColor">{{ label }}</matcha-card>
-        `,
-    }),
-    name: 'matcha-card - Raised',
-};

package/src/lib/matcha-expansion-panel/expansion-panel.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaExpansionPanelDirective } from './matcha-expansion-panel.directive';
-
-@NgModule({
-  declarations: [MatchaExpansionPanelDirective],
-  imports: [
-    CommonModule
-  ],
-  exports:[
-      MatchaExpansionPanelDirective
-  ]
-})
-export class MatchaExpansionPanelModule { }