matcha-components 1.0.6 → 1.0.7

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],
-        },
-    }));

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

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

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

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaSnackbarDirective } from './matcha-snackbar.directive';
-
-@NgModule({
-  declarations: [MatchaSnackbarDirective],
-  imports: [
-    CommonModule
-  ],
-  exports:[MatchaSnackbarDirective]
-})
-export class MatchaSnackbarModule { }

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

@@ -1,33 +0,0 @@
-<ng-container [ngSwitch]="level">
-
-    <h1 class="title" *ngSwitchCase="1">
-        <span class="title-bullet h-32 w-8" [ngClass]="bulletColor" *ngIf="bulletColor"></span>
-        {{title}}
-    </h1>
-
-    <h2 class="title" *ngSwitchCase="2">
-        <span class="title-bullet h-28 w-8" [ngClass]="bulletColor" *ngIf="bulletColor"></span>
-        {{title}}
-    </h2>
-
-    <h3 class="title" *ngSwitchCase="3">
-        <span class="title-bullet h-24 w-8" [ngClass]="bulletColor" *ngIf="bulletColor"></span>
-        {{title}}
-    </h3>
-
-    <h4 class="title" *ngSwitchCase="4">
-        <span class="title-bullet h-24 w-8" [ngClass]="bulletColor" *ngIf="bulletColor"></span>
-        {{title}}
-    </h4>
-
-    <h5 class="title" *ngSwitchCase="5">
-        <span class="title-bullet h-20 w-8" [ngClass]="bulletColor" *ngIf="bulletColor"></span>
-        {{title}}
-    </h5>
-
-    <h6 class="title" *ngSwitchCase="6">
-        <span class="title-bullet h-16 w-8" [ngClass]="bulletColor" *ngIf="bulletColor"></span>
-        {{title}}
-    </h6>
-
-</ng-container>

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

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

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

@@ -1,24 +0,0 @@
-import { Component, Input, OnInit, Sanitizer } from '@angular/core';
-
-@Component({
-  selector: 'matcha-title',
-  templateUrl: './matcha-title.component.html',
-  styleUrls: ['./matcha-title.component.scss']
-})
-export class MatchaTitleComponent implements OnInit {
-
-  @Input('level') level: number = 1;
-
-  @Input('bulletColor') bulletColor: string = '';
-
-  @Input('title') title: string = '';
-
-  constructor() {}
-
-
-  ngOnInit(): void {
-    this.bulletColor = this.bulletColor ?  `background-${this.bulletColor}` : '';
-  }
-
-
-}

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

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaTitleComponent } from './matcha-title.component';
-
-
-
-@NgModule({
-  declarations: [
-    MatchaTitleComponent
-  ],
-  imports: [
-      CommonModule
-    ],
-  exports:[
-    MatchaTitleComponent
-  ]
-})
-export class MatchaTitleModule { }