matcha-components 1.0.5 → 1.0.6

package/src/lib/matcha-dialog2/confirmation-dialog.component.ts.txt

@@ -0,0 +1,54 @@
+import {Component, ViewEncapsulation} from "@angular/core";
+import {MatDialog, MatDialogModule} from "@angular/material/dialog";
+import {MatIconModule} from "@angular/material/icon";
+import {MatButtonModule} from "@angular/material/button";
+
+@Component({
+  template: `
+    <section>
+      <button mat-stroked-button (click)="openDialog()">OPEN DIALOG</button>
+    </section>
+  `,
+  styles: [
+    'section {display: flex; justify-content: center; align-items: center; height: 100%}',
+    '.dialog-border mat-dialog-container {border-radius: 20px; border: 5px solid green} '
+  ],
+  standalone: true,
+  imports: [
+    MatDialogModule,
+    MatButtonModule
+  ],
+  encapsulation: ViewEncapsulation.None
+})
+export class ConfirmationDialogComponent {
+  constructor(private readonly dialog: MatDialog) {}
+
+  openDialog(): void {
+    this.dialog.open(ConfirmationDialogDialogComponent, {
+      width: '250px',
+      autoFocus: false,
+      panelClass: 'dialog-border'
+    });
+  }
+}
+
+@Component({
+  template: `
+    <mat-icon>check_circle</mat-icon>
+    <h3>Your order has been created successfully!</h3>
+    <button mat-stroked-button mat-dialog-close>TRACK MY ORDER</button>
+  `,
+  styles: [
+    ':host  {display: flex; justify-content: center; align-items: center; flex-direction: column}',
+    'h3 {text-align: center}',
+    'mat-icon {color: green; height: 6rem; width: 6rem; font-size: 6rem}'
+  ],
+  standalone: true,
+  imports: [
+    MatIconModule,
+    MatButtonModule,
+    MatDialogModule
+  ]
+})
+class ConfirmationDialogDialogComponent {
+}

package/src/lib/matcha-dialog2/confirmation-dialog.stories.ts.txt

@@ -0,0 +1,24 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { ConfirmationDialogComponent } from './confirmation-dialog.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { defaultUsecasesParameters } from '../../../.storybook/utils';
+
+export default {
+  title: 'Usecases/Dialog',
+  component: ConfirmationDialogComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [BrowserAnimationsModule],
+    }),
+  ],
+  parameters: {
+    ...defaultUsecasesParameters,
+  },
+} as Meta;
+
+export const Template: StoryObj<ConfirmationDialogComponent> = {
+  render: (args) => ({
+    props: args,
+  }),
+  name: 'success (custom css)',
+};

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+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/forms.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaFormInputTextDirective } from './matcha-form-input-text.directive';
+import { MatchaFormFieldAppearanceDirective } from './matcha-form-field-appearance.directive';
+
+@NgModule({
+    declarations: [
+        MatchaFormInputTextDirective,
+        MatchaFormFieldAppearanceDirective
+    ],
+    imports: [
+        CommonModule
+    ],
+    exports: [
+        MatchaFormInputTextDirective,
+        MatchaFormFieldAppearanceDirective
+    ]
+})
+export class MatchaFormsModule { }

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

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

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

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