matcha-components 1.0.6 → 1.0.8

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 { }

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

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

package/src/lib/matcha-forms/matcha-form-field-appearance.directive.ts

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

package/src/lib/matcha-forms/matcha-form-field-argtype.ts

@@ -1,73 +0,0 @@
-export const formFieldArgtypes = {
-    appearance: {
-      description: 'The form field appearance style',
-      control: 'select',
-      defaultValue: 'standard',
-      table: {
-        defaultValue: { summary: 'outline' },
-      },
-      options: [
-        'outline',
-      ]
-    },
-    color: {
-      description: 'Theme color palette',
-      control: 'select',
-      defaultValue: 'primary',
-      table: {
-        defaultValue: { summary: 'primary' },
-      },
-      options: [
-        'primary',
-        'accent',
-        'warn',
-      ]
-    },
-    floatLabel: {
-      description: 'Whether the label should always float, never float or float as the user types',
-      control: 'select',
-      defaultValue: 'primary',
-      table: {
-        defaultValue: { summary: 'primary' },
-      },
-      options: [
-        'always',
-        'never',
-        'auto',
-      ]
-    },
-    hideRequiredMarker: {
-      description: 'Whether the required marker should be hidden',
-      defaultValue: false,
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-      control: {
-        type: 'boolean'
-      }
-    },
-    hintLabel: {
-      description: 'Text for the form field hint',
-      defaultValue: '',
-      table: {
-        type: { summary: 'text' },
-        defaultValue: { summary: '' },
-      },
-      control: {
-        type: 'text'
-      }
-    },
-    alignHint: {
-      description: 'Whether to align the hint label at the start or end of the line',
-      control: 'select',
-      defaultValue: 'start',
-      table: {
-        defaultValue: { summary: 'start' },
-      },
-      options: [
-        'start',
-        'end',
-      ]
-    },
-  }

package/src/lib/matcha-forms/matcha-form-field.mdx

@@ -1,284 +0,0 @@
-import {Story} from '@storybook/blocks';
-import LinkTo from '@storybook/addon-links/react';
-
-import linkImage from '../../../assets/open_in_new.png'
-import * as ComponentStories from './matcha-form-field.stories';
-
-# Form field
-
-> *mat-form-field* is a component used to wrap several Angular Material components and apply common Text field styles such as the underline, floating label, and hint messages.
-
-<br/>
-
-## Installation
-
-`import {MatFormFieldModule} from '@angular/material/form-field';`
-
-[Official documentation](https://material.angular.io/components/form-field/overview)
-
-<br/>
-
-## Basic usage
-
-<br/>
-<br/>
-
-<article class="inline-story">
-  <header>
-    <h5>Basic usage</h5>
-    <LinkTo kind="components-form-field" story="aa-with-basic-usage">
-      <img src={linkImage} aria-hidden={true}/>
-    </LinkTo>
-  </header>
-  <Story id="components-form-field--aa-with-basic-usage" />
-</article>
-
-<br/>
-<br/>
-<br/>
-
-## State
-
-<br/>
-<br/>
-<br/>
-
-<section class="stories-container">
-  <article class="inline-story">
-    <header>
-      <h5>Inactive</h5>
-      <LinkTo kind="components-form-field" story="aa-with-basic-usage">
-        <img src={linkImage} aria-hidden={true}/>
-      </LinkTo>
-    </header>
-    <Story id="components-form-field--aa-with-basic-usage" />
-  </article>
-
-  <article class="inline-story">
-    <header>
-      <h5>Filled</h5>
-      <LinkTo kind="components-form-field" story="with-state-filled">
-        <img src={linkImage} aria-hidden={true}/>
-      </LinkTo>
-    </header>
-    <Story id="components-form-field--with-state-filled" />
-  </article>
-
-  <article class="inline-story">
-    <header>
-      <h5>Hover</h5>
-      <LinkTo kind="components-form-field" story="with-state-hover">
-        <img src={linkImage} aria-hidden={true}/>
-      </LinkTo>
-    </header>
-    <Story id="components-form-field--with-state-hover" />
-  </article>
-
-  <article class="inline-story">
-    <header>
-      <h5>Focused</h5>
-      <LinkTo kind="components-form-field" story="with-state-focused">
-        <img src={linkImage} aria-hidden={true}/>
-      </LinkTo>
-    </header>
-    <Story id="components-form-field--with-state-focused" />
-  </article>
-
-  <article class="inline-story">
-    <header>
-      <h5>Disabled</h5>
-      <LinkTo kind="components-form-field" story="with-state-disabled">
-        <img src={linkImage} aria-hidden={true}/>
-      </LinkTo>
-    </header>
-    <Story id="components-form-field--with-state-disabled" />
-  </article>
-
-  <article class="inline-story">
-    <header>
-      <h5>Error</h5>
-      <LinkTo kind="components-form-field" story="with-error-message">
-        <img src={linkImage} aria-hidden={true}/>
-      </LinkTo>
-    </header>
-    <Story id="components-form-field--with-error-message" />
-  </article>
-</section>
-
-
-<br/>
-<br/>
-<br/>
-
-
-## Appearance
-
-> supports 4 different appearance variants.
-
-<a href="https://material.angular.io/components/form-field/overview#form-field-appearance-variants" target="_blank">Official
-  documentation</a>
-
-<br/>
-<br/>
-<br/>
-
-<section class="stories-container">
-  <article class="inline-story">
-    <header>
-      <h5>Legacy</h5>
-      <LinkTo kind="components-form-field" story="with-appearance-legacy">
-        <img src={linkImage} aria-hidden={true}/>
-      </LinkTo>
-    </header>
-    <Story id="components-form-field--with-appearance-legacy" />
-  </article>
-
-  <article class="inline-story">
-    <header>
-      <h5>Standard</h5>
-      <LinkTo kind="components-form-field" story="with-appearance-standard">
-        <img src={linkImage} aria-hidden={true}/>
-      </LinkTo>
-    </header>
-    <Story id="components-form-field--with-appearance-standard" />
-  </article>
-
-  <article class="inline-story">
-    <header>
-      <h5>Fill</h5>
-      <LinkTo kind="components-form-field" story="with-appearance-fill">
-        <img src={linkImage} aria-hidden={true}/>
-      </LinkTo>
-    </header>
-    <Story id="components-form-field--with-appearance-fill" />
-  </article>
-
-  <article class="inline-story">
-    <header>
-      <h5>Outline</h5>
-      <LinkTo kind="components-form-field" story="with-appearance-outline">
-        <img src={linkImage} aria-hidden={true}/>
-      </LinkTo>
-    </header>
-    <Story id="components-form-field--with-appearance-outline" />
-  </article>
-</section>
-
-<br/>
-<br/>
-<br/>
-
-## Hints
-
-> Hint labels are additional descriptive text that appears below the form field's underline.
-
-<a href="https://material.angular.io/components/form-field/overview#hint-labels" target="_blank">Official
-  documentation</a>
-
-<br/>
-<br/>
-<br/>
-
-<section class="stories-container">
-  <article class="inline-story">
-    <header>
-      <h5>Left hint</h5>
-      <LinkTo kind="components-form-field" story="with-start-hint">
-        <img src={linkImage} aria-hidden={true}/>
-      </LinkTo>
-    </header>
-    <Story id="components-form-field--with-start-hint" />
-  </article>
-
-  <article class="inline-story">
-    <header>
-      <h5>Right hint</h5>
-      <LinkTo kind="components-form-field" story="with-end-hint">
-        <img src={linkImage} aria-hidden={true}/>
-      </LinkTo>
-    </header>
-    <Story id="components-form-field--with-end-hint" />
-  </article>
-
-  <article class="inline-story">
-    <header>
-      <h5>Double hints</h5>
-      <LinkTo kind="components-form-field" story="with-double-hints">
-        <img src={linkImage} aria-hidden={true}/>
-      </LinkTo>
-    </header>
-    <Story id="components-form-field--with-double-hints" />
-  </article>
-</section>
-
-<br/>
-<br/>
-<br/>
-
-## Prefix and suffix
-
-> Custom content can be included before and after the input tag, as a prefix or suffix.
-
-<a href="https://material.angular.io/components/form-field/overview#prefix--suffix" target="_blank">Official
-  documentation</a>
-
-<br/>
-<br/>
-<br/>
-
-<section class="stories-container">
-  <article class="inline-story">
-    <header>
-      <h5>Prefix</h5>
-      <LinkTo kind="components-form-field" story="with-prefix">
-        <img src={linkImage} aria-hidden={true}/>
-      </LinkTo>
-    </header>
-    <Story id="components-form-field--with-prefix" />
-  </article>
-
-  <article class="inline-story">
-    <header>
-      <h5>Suffix</h5>
-      <LinkTo kind="components-form-field" story="with-suffix">
-        <img src={linkImage} aria-hidden={true}/>
-      </LinkTo>
-    </header>
-    <Story id="components-form-field--with-suffix" />
-  </article>
-
-  <article class="inline-story">
-    <header>
-      <h5>Prefix and suffix</h5>
-      <LinkTo kind="components-form-field" story="with-prefix-and-suffix">
-        <img src={linkImage} aria-hidden={true}/>
-      </LinkTo>
-    </header>
-    <Story id="components-form-field--with-prefix-and-suffix" />
-  </article>
-</section>
-
-<br/>
-<br/>
-<br/>
-
-## Error message
-
-> Error messages can be shown under the form field underline.
-
-<a href="https://material.angular.io/components/form-field/overview#error-messages" target="_blank">Official
-  documentation</a>
-
-<br/>
-<br/>
-<br/>
-
-<article class="inline-story">
-  <header>
-    <h5>Error message</h5>
-    <LinkTo kind="components-form-field" story="with-error-message">
-      <img src={linkImage} aria-hidden={true}/>
-    </LinkTo>
-  </header>
-  <Story id="components-form-field--with-error-message" />
-</article>

package/src/lib/matcha-forms/matcha-form-input-text.directive.ts

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

package/src/lib/matcha-icon/matcha-icon-position-pos.directive.ts

@@ -1,15 +0,0 @@
-import { Directive, ElementRef, Renderer2 } from '@angular/core';
-
-@Directive({
-  selector: '[icon-position-pos]'
-})
-export class MatchaIconPositionPosDirective {
-
-  constructor(
-    private _elementRef: ElementRef,
-    private _renderer: Renderer2
-  ) {
-    this._renderer.addClass(this._elementRef.nativeElement,'icon-position-pos')
-  }
-
-}

package/src/lib/matcha-icon/matcha-icon-position-pre.directive.ts

@@ -1,15 +0,0 @@
-import { Directive, ElementRef, Renderer2 } from '@angular/core';
-
-@Directive({
-  selector: '[icon-position-pre]'
-})
-export class MatchaIconPositionPreDirective {
-
-  constructor(
-    private _elementRef: ElementRef,
-    private _renderer: Renderer2
-  ) {
-    this._renderer.addClass(this._elementRef.nativeElement,'icon-position-pre')
-  }
-
-}

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

@@ -1,76 +0,0 @@
-import { storiesOf } from '@storybook/angular';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatButtonModule } from '@angular/material/button';
-
-storiesOf('Menu', module)
-    .add('Basic', () => ({
-        template: `
-    <div>
-      <button mat-button [disabled]="disabled" [matMenuTriggerFor]="menu">Menu</button>
-      <mat-menu #menu="matMenu">
-        <button mat-menu-item>Item 1</button>
-        <button mat-menu-item>Item 2</button>
-      </mat-menu>
-    </div>
-    `,
-        props: {
-            disabled: { disabled: false },
-        },
-        moduleMetadata: {
-            imports: [MatMenuModule, MatButtonModule, BrowserAnimationsModule],
-        },
-    }))
-    .add('Nested', () => ({
-        template: `
-    <div>
-      <button mat-button [disabled]="disabled" [matMenuTriggerFor]="animals">Animal index</button>
-      <mat-menu #animals="matMenu">
-        <button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
-        <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
-      </mat-menu>
-      <mat-menu #vertebrates="matMenu">
-        <button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>
-        <button mat-menu-item [matMenuTriggerFor]="amphibians">Amphibians</button>
-        <button mat-menu-item [matMenuTriggerFor]="reptiles">Reptiles</button>
-        <button mat-menu-item>Birds</button>
-        <button mat-menu-item>Mammals</button>
-      </mat-menu>
-      <mat-menu #invertebrates="matMenu">
-        <button mat-menu-item>Insects</button>
-        <button mat-menu-item>Molluscs</button>
-        <button mat-menu-item>Crustaceans</button>
-        <button mat-menu-item>Corals</button>
-        <button mat-menu-item>Arachnids</button>
-        <button mat-menu-item>Velvet worms</button>
-        <button mat-menu-item>Horseshoe crabs</button>
-      </mat-menu>
-      <mat-menu #fish="matMenu">
-        <button mat-menu-item>Baikal oilfish</button>
-        <button mat-menu-item>Bala shark</button>
-        <button mat-menu-item>Ballan wrasse</button>
-        <button mat-menu-item>Bamboo shark</button>
-        <button mat-menu-item>Banded killifish</button>
-      </mat-menu>
-      <mat-menu #amphibians="matMenu">
-        <button mat-menu-item>Sonoran desert toad</button>
-        <button mat-menu-item>Western toad</button>
-        <button mat-menu-item>Arroyo toad</button>
-        <button mat-menu-item>Yosemite toad</button>
-      </mat-menu>
-      <mat-menu #reptiles="matMenu">
-        <button mat-menu-item>Banded Day Gecko</button>
-        <button mat-menu-item>Banded Gila Monster</button>
-        <button mat-menu-item>Black Tree Monitor</button>
-        <button mat-menu-item>Blue Spiny Lizard</button>
-        <button mat-menu-item disabled>Velociraptor</button>
-      </mat-menu>
-    </div>
-    `,
-        props: {
-            disabled: { disabled: false },
-        },
-        moduleMetadata: {
-            imports: [MatMenuModule, MatButtonModule, BrowserAnimationsModule],
-        },
-    }));