feat(Input): Rewrite input, merge mask in, update usage docs

GetTerminus · Aug 27, 2018 · 3d43950 · 3d43950
1 parent e0f0d9f
commit 3d43950
Show file tree

Hide file tree

Showing 39 changed files with 3,080 additions and 1,137 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ The library of UI components used for Terminus applications.
 [![Github release][gh-release-badge]][gh-releases]
 [![Library size][file-size-badge]][raw-distribution-js]
 <br>
-[![components](https://img.shields.io/badge/Components-31-blue.svg)](#components)
+[![components](https://img.shields.io/badge/Components-30-blue.svg)](#components)
 [![pipes](https://img.shields.io/badge/Pipes-5-blue.svg)](#pipes)
 [![services](https://img.shields.io/badge/Services-1-blue.svg)](#services)
 [![style helpers](https://img.shields.io/badge/StyleHelpers-8-blue.svg)](#style-helpers)
@@ -97,7 +97,6 @@ for each feature.
 | divider                                |                                            |                    |                                 |                              |                             |
 | expansion                              |                                            |                    |                                 |                              |                             |
 | [file-upload][src-file-upload]         | File upload with drag and drop             | :white_check_mark: | [Demo][demo-file-upload]        | [Docs][file-upload-docs]     | [Usage][file-upload-usage]  |
-| [input mask][src-mask]                 | Custom masks for inputs (phone, zip, etc)  | :white_check_mark: | [Demo][demo-mask]               | [Docs][mask-docs]            | [Usage][mask-usage]         |
 | [icon][src-icon]                       | Supported icons: https://material.io/icons | :white_check_mark: | [Demo][demo-icon]               | [Docs][icon-docs]            | [Usage][icon-usage]         |
 | [icon-button][src-button]              |                                            | :white_check_mark: | [Demo][demo-icon-button]        | [Docs][icon-button-docs]     | [Usage][icon-button-usage]  |
 | [input][src-input]                     |                                            | :white_check_mark: | [Demo][demo-input]              | [Docs][input-docs]           | [Usage][input-usage]        |
@@ -309,7 +308,6 @@ This project follows the [all-contributors](https://github.com/kentcdodds/all-co
 [demo-link]: https://terminus-ui-demos.stackblitz.io/components/link
 [demo-loading-overlay]: https://terminus-ui-demos.stackblitz.io/components/loading-overlay
 [demo-log-in-form]: https://terminus-ui-demos.stackblitz.io/components/log-in-form
-[demo-mask]: https://terminus-ui-demos.stackblitz.io/components/mask
 [demo-menu]: https://terminus-ui-demos.stackblitz.io/components/menu
 [demo-navigation]: https://terminus-ui-demos.stackblitz.io/components/navigation
 [demo-paginator]: https://terminus-ui-demos.stackblitz.io/components/paginator
@@ -354,7 +352,6 @@ This project follows the [all-contributors](https://github.com/kentcdodds/all-co
 [src-link]: ./terminus-ui/src/link/
 [src-loading-overlay]: ./terminus-ui/src/loading-overlay/
 [src-login-form]: ./terminus-ui/src/login-form/
-[src-mask]: ./terminus-ui/src/mask/
 [src-menu]: ./terminus-ui/src/menu/
 [src-navigation]: ./terminus-ui/src/navigation/
 [src-paginator]: ./terminus-ui/src/paginator/
@@ -394,7 +391,6 @@ This project follows the [all-contributors](https://github.com/kentcdodds/all-co
 [link-docs]: https://getterminus.github.io/terminus-ui/components/TsLinkComponent.html
 [loading-overlay-docs]: https://getterminus.github.io/terminus-ui/components/TsLoadingOverlayComponent.html
 [login-form-docs]: https://getterminus.github.io/terminus-ui/components/TsLoginFormComponent.html
-[mask-docs]: https://getterminus.github.io/terminus-ui/directives/TsMaskDirective.html
 [menu-docs]: https://getterminus.github.io/terminus-ui/components/TsMenuComponent.html
 [navigation-docs]: https://getterminus.github.io/terminus-ui/components/TsNavigationComponent.html
 [paginator-docs]: https://getterminus.github.io/terminus-ui/components/TsPaginatorComponent.html
@@ -426,7 +422,6 @@ This project follows the [all-contributors](https://github.com/kentcdodds/all-co
 [icon-usage]: https://getterminus.github.io/terminus-ui/components/TsIconComponent.html#readme
 [input-usage]: https://getterminus.github.io/terminus-ui/components/TsInputComponent.html#readme
 [link-usage]: https://getterminus.github.io/terminus-ui/components/TsLinkComponent.html#readme
-[mask-usage]: https://getterminus.github.io/terminus-ui/directives/TsMaskDirective.html#readme
 [menu-usage]: https://getterminus.github.io/terminus-ui/components/TsMenuComponent.html#readme
 [paginator-usage]: https://getterminus.github.io/terminus-ui/components/TsPaginatorComponent.html#readme
 [radio-group-usage]: https://getterminus.github.io/terminus-ui/components/TsRadioGroupComponent.html#readme

diff --git a/demo/app/app.module.ts b/demo/app/app.module.ts
@@ -62,7 +62,6 @@ import {
   TsLinkModule,
   TsLoadingOverlayModule,
   TsLoginFormModule,
-  TsMaskModule,
   TsMenuModule,
   TsNavigationModule,
   TsPaginatorModule,
@@ -109,7 +108,6 @@ import { InputComponent } from './components/input/input.component';
 import { LinkComponent } from './components/link/link.component';
 import { LoadingOverlayComponent } from './components/loading-overlay/loading-overlay.component';
 import { LoginFormComponent } from './components/login-form/login-form.component';
-import { MaskComponent } from './components/mask/mask.component';
 import { MenuComponent } from './components/menu/menu.component';
 import { NavigationComponent } from './components/navigation/navigation.component';
 import { PaginatorComponent } from './components/paginator/paginator.component';
@@ -162,7 +160,6 @@ import { ValidationComponent } from './components/validation/validation.componen
     TsLinkModule,
     TsLoadingOverlayModule,
     TsLoginFormModule,
-    TsMaskModule,
     TsMenuModule,
     TsNavigationModule,
     TsPaginatorModule,
@@ -211,7 +208,6 @@ import { ValidationComponent } from './components/validation/validation.componen
     LinkComponent,
     LoadingOverlayComponent,
     LoginFormComponent,
-    MaskComponent,
     MenuComponent,
     NavigationComponent,
     PaginatorComponent,

diff --git a/demo/app/components/components.constant.ts b/demo/app/components/components.constant.ts
@@ -19,7 +19,6 @@ import { InputComponent } from './input/input.component';
 import { LinkComponent } from './link/link.component';
 import { LoadingOverlayComponent } from './loading-overlay/loading-overlay.component';
 import { LoginFormComponent } from './login-form/login-form.component';
-import { MaskComponent } from './mask/mask.component';
 import { MenuComponent } from './menu/menu.component';
 import { NavigationComponent } from './navigation/navigation.component';
 import { PaginatorComponent } from './paginator/paginator.component';
@@ -173,13 +172,6 @@ export const componentsList: Routes = [
       name: 'Login Form',
     },
   },
-  {
-    path: 'mask',
-    component: MaskComponent,
-    data: {
-      name: 'Mask',
-    },
-  },
   {
     path: 'menu',
     component: MenuComponent,

diff --git a/demo/app/components/input/input.component.html b/demo/app/components/input/input.component.html
@@ -1,31 +1,68 @@
 <ts-card tsVerticalSpacing>
   <h3 tsCardTitle tsVerticalSpacing>
-    Demo Controls
+    Input: ngModel
   </h3>
 
-  <button (click)="shouldDisable = !shouldDisable">
-    Toggle disabled inputs
-  </button>
-  <br>
-  <button (click)="foo.reset()">Reset name input</button>
-  <br>
-  <button (click)="submit(myForm.value)">Submit</button>
-</ts-card>
+  <div style="max-width: 20rem;" tsVerticalSpacing>
+    <ts-select
+      [(ngModel)]="activeMask"
+      [items]="masks"
+      label="Change active mask"
+      hint="Select a mask to apply it to the input below."
+    ></ts-select>
 
-<ts-card tsVerticalSpacing>
-  <h3 tsCardTitle tsVerticalSpacing>
-    ngModel
-  </h3>
+    <label>
+      <input type="checkbox" [(ngModel)]="sanitizeValue">
+      Sanitize model value
+    </label>
+    <br>
+    <label>
+      <input type="checkbox" [(ngModel)]="isClearable">
+      Allow input to be cleared
+    </label>
+    <br>
+    <label>
+      <input type="checkbox" [(ngModel)]="isDisabled">
+      Disabled
+    </label>
+    <br>
+    <label>
+      <input type="checkbox" [(ngModel)]="isFocused">
+      Focused
+    </label>
+    <br>
+    <label>
+      <input type="checkbox" [(ngModel)]="hideRequiredMarker">
+      Hide required marker
+    </label>
+    <br>
+    <label>
+      <input type="checkbox" [(ngModel)]="isReadonly">
+      Readonly
+    </label>
+    <br>
+    <label>
+      <input type="checkbox" [(ngModel)]="allowDecimal">
+      Allow decimal
+    </label>
+  </div>
 
   <ts-input
     [(ngModel)]="myValue"
-    label="Input with ngModel & isFocused flag"
-    isClearable="true"
-    isRequired="true"
+    label="Input with ngModel"
+    [maskSanitizeValue]="sanitizeValue"
+    [isRequired]="true"
+    [hideRequiredMarker]="hideRequiredMarker"
+    [isClearable]="isClearable"
+    [isDisabled]="isDisabled"
+    [isFocused]="isFocused"
+    [maskAllowDecimal]="allowDecimal"
+    [readOnly]="isReadonly"
+    [mask]="activeMask"
+    [autocomplete]="'on'"
     name="static input"
     theme="accent"
-    [isDisabled]="shouldDisable"
-    tsVerticalSpacing
+    tsVerticalSpacing="small--0"
   ></ts-input>
 
   <strong>ngModel value: {{ myValue }}</strong>
@@ -34,9 +71,16 @@ <h3 tsCardTitle tsVerticalSpacing>
 
 <ts-card>
   <h3 tsCardTitle tsVerticalSpacing>
-    Form
+    Input: Reactive Form
   </h3>
 
+  <button (click)="updateLabel()" tsVerticalSpacing>Update Label</button>
+  <button (click)="submit(myForm.value)">Submit Form</button>
+  <button (click)="foo.reset()">Reset name input</button>
+  <button (click)="shouldDisable = !shouldDisable">
+    {{ shouldDisable ? 'Enable' : 'Disable' }} the name input
+  </button>
+  <br>
 
   <form [formGroup]="myForm" novalidate>
     <ts-input

diff --git a/demo/app/components/input/input.component.ts b/demo/app/components/input/input.component.ts
@@ -18,11 +18,29 @@ export class InputComponent {
   icon = 'home';
   model1 = 'A seeded value';
   myValue!: string;
-  shouldDisable = true;
+  shouldDisable = false;
+  activeMask = 'none';
+  masks: any[] = [
+    'none',
+    'currency',
+    'date',
+    'number',
+    'percentage',
+    'phone',
+    'postal',
+  ];
+  sanitizeValue = false;
+  allowDecimal = true;
+  hideRequiredMarker = false;
+  isClearable = false;
+  isDisabled = false;
+  isFocused = false;
+  isReadonly = false;
   myForm: FormGroup = this.formBuilder.group({
     name: [
       null,
       [
+        Validators.required,
       ],
     ],
     email: [
@@ -60,4 +78,12 @@ export class InputComponent {
     console.log('Demo submit!: ', v);
   }
 
+  updateLabel() {
+    if (this.label1.length < 10) {
+      this.label1 = 'My really long input label that will test the responsive nature..';
+    } else {
+      this.label1 = 'My Input';
+    }
+  }
+
 }
diff --git a/demo/app/components/mask/mask.component.html b/demo/app/components/mask/mask.component.html
diff --git a/demo/app/components/mask/mask.component.ts b/demo/app/components/mask/mask.component.ts
diff --git a/package.json b/package.json
@@ -137,7 +137,7 @@
     "@angular/platform-browser": "^6.0.7",
     "@angular/platform-browser-dynamic": "^6.0.7",
     "@angular/router": "^6.0.7",
-    "@terminus/ngx-tools": "^2.23.0",
+    "@terminus/ngx-tools": "^2.25.2",
     "@terminus/ui": "^8.13.1",
     "date-fns": "2.0.0-alpha.7",
     "highcharts": "^6.1.1",