feat(chips): add inputPosition input to change its position to befo…

…re or after (closes #990) (#1061) * feat(chips): add `inputPosition` input to change its position to before or after * feat(chips): add unit test to see if the class gets properly added for before position * chore(): move rtl mark to jsonformatter theme since build is failing when css is inside compiled js * chore(): fix stylelint issue * chore(): fix build error for covalent
Teradata · Jan 4, 2018 · 70887dc · 70887dc
1 parent e6bb7fc
commit 70887dc
Show file tree

Hide file tree

Showing 11 changed files with 121 additions and 25 deletions.
diff --git a/src/app/components/components/chips/chips.component.html b/src/app/components/components/chips/chips.component.html
@@ -11,9 +11,10 @@
                   [chipRemoval]="chipRemoval"
                   [items]="filteredStrings"
                   [(ngModel)]="stringsModel"
-                  placeholder="Enter autocomplete strings"
+                  placeholder="Type here"
                   [disabled]="disabled"
                   (inputChange)="filterStrings($event)"
+                  [inputPosition]="before ? 'before' : 'after'"
                   requireMatch>
         </td-chips>
       </div>
@@ -28,8 +29,9 @@
                       [chipRemoval]="chipRemoval"
                       [items]="filteredStrings"
                       [(ngModel)]="stringsModel"
-                      placeholder="Enter autocomplete strings"
+                      placeholder="Type here"
                       [disabled]="disabled"
+                      [inputPosition]="before ? 'before' : 'after'"
                       (inputChange)="filterStrings($event)"
                       requireMatch>
             </td-chips>
@@ -42,6 +44,7 @@
               disabled: boolean = false;
               chipAddition: boolean = true;
               chipRemoval: boolean = true;
+              before: boolean = false;
 
               strings: string[] = [
                 'stepper',
@@ -101,6 +104,12 @@
         Chip removal
       </mat-slide-toggle>
     </div>
+    <mat-divider></mat-divider>
+    <div class="pad-sm">
+      <mat-slide-toggle color="accent" [(ngModel)]="before">
+        Input Position Before
+      </mat-slide-toggle>
+    </div>
   </mat-card-actions>
 </mat-card>
 <mat-card>
@@ -115,7 +124,7 @@
         <td-chips color="accent"
                   [items]="filteredObjects"
                   [(ngModel)]="objectsModel"
-                  placeholder="Enter autocomplete strings"
+                  placeholder="Type here"
                   (inputChange)="filterObjects($event)"
                   requireMatch>
           <ng-template td-chip let-chip="chip">
@@ -138,7 +147,7 @@
             <td-chips color="accent"
                       [items]="filteredObjects"
                       [(ngModel)]="objectsModel"
-                      placeholder="Enter autocomplete strings"
+                      placeholder="Type here"
                       (inputChange)="filterObjects($event)"
                       requireMatch>
               <ng-template td-chip let-chip="chip">
@@ -202,7 +211,7 @@
         <td-chips [items]="filteredAsync"
                   [debounce]="500"
                   [(ngModel)]="asyncModel"
-                  placeholder="Enter autocomplete strings"
+                  placeholder="Type here"
                   (inputChange)="filterAsync($event)"
                   requireMatch>
           <ng-template td-chip let-chip="chip">
@@ -221,7 +230,7 @@
             <td-chips [items]="filteredAsync"
                       [debounce]="500"
                       [(ngModel)]="asyncModel"
-                      placeholder="Enter autocomplete strings"
+                      placeholder="Type here"
                       (inputChange)="filterAsync($event)"
                       requireMatch>
               <ng-template td-chip let-chip="chip">
@@ -279,7 +288,7 @@
 </mat-card>
 <mat-card>
   <mat-card-title>Stacked chips and Autocomplete with custom inputs</mat-card-title>
-  <mat-card-subtitle>Autocomplete demo allowing custom inputs and stacked chips</mat-card-subtitle>
+  <mat-card-subtitle>Autocomplete demo allowing custom inputs, 'before' input position and stacked chips</mat-card-subtitle>
   <mat-divider></mat-divider>
   <mat-tab-group mat-stretch-tabs dynamicHeight>
     <mat-tab>
@@ -290,6 +299,7 @@
                   [(ngModel)]="stackedStringsModel"
                   placeholder="Enter any string"
                   (inputChange)="filterStackedStrings($event)"
+                  inputPosition="before"
                   stacked>
           <ng-template td-chip let-chip="chip">
             <div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.substring(0, 1).toUpperCase()}}</div> {{chip}}
@@ -307,6 +317,7 @@
                       [(ngModel)]="stackedStringsModel"
                       placeholder="Enter any string"
                       (inputChange)="filterStackedStrings($event)"
+                      inputPosition="before"
                       stacked>
             </td-chips>
           ]]>
@@ -395,7 +406,7 @@
         <div class="mat-body-1">Type and select a preset option or press enter:</div>
         <td-chips [items]="filteredStrings"
                   [(ngModel)]="stringsModel"
-                  placeholder="Enter autocomplete strings"
+                  placeholder="Type here"
                   (add)="handleAdd($event)"
                   (remove)="handleRemove($event)"
                   (inputChange)="filterStrings($event)"
@@ -419,7 +430,7 @@
           <![CDATA[
             <td-chips [items]="filteredStrings"
                   [(ngModel)]="stringsModel"
-                  placeholder="Enter autocomplete strings"
+                  placeholder="Type here"
                   (add)="handleAdd($event)"
                   (remove)="handleRemove($event)"
                   (inputChange)="filterStrings($event)"

diff --git a/src/app/components/components/chips/chips.component.ts b/src/app/components/components/chips/chips.component.ts
@@ -17,6 +17,7 @@ export class ChipsDemoComponent implements OnInit {
   disabled: boolean = false;
   chipAddition: boolean = true;
   chipRemoval: boolean = true;
+  before: boolean = false;
   events: string[] = [];
 
   filteringAsync: boolean = false;

diff --git a/src/platform/core/chips/README.md b/src/platform/core/chips/README.md
@@ -16,6 +16,7 @@ Properties:
 | `items?` | `any[]` | Renders the `mat-autocomplete` with the provided list to display as options.
 | `requireMatch?` | `boolean` | Blocks custom inputs and only allows selections from the autocomplete list.
 | `stacked?` | `boolean` | Set stacked or horizontal chips depending on value. Defaults to false.
+| `inputPosition?` | 'before' or 'after' | Set input position before or after the chips. Defaults to 'after'.
 | `placeholder?` | `string` | Placeholder for the autocomplete input.
 | `disabled?` | `boolean` | Sets disabled state and disabled addition/removal of chips.
 | `chipAddition` | `boolean` | Disables the ability to add chips. When setting disabled as true, this will be overriden. Defaults to true.
@@ -51,6 +52,7 @@ Example for HTML usage:
 <td-chips placeholder="placeholder"
           color="primary"
           [items]="items"
+          [inputPosition]="'before'"
           [(ngModel)]="model"
           [disabled]="disabled" 
           [chipAddition]="chipAddition"

diff --git a/src/platform/core/chips/chips.component.html b/src/platform/core/chips/chips.component.html
@@ -1,4 +1,6 @@
-<div class="td-chips-wrapper" [class.td-chips-stacked]="stacked">
+<div class="td-chips-wrapper"
+     [class.td-chips-stacked]="stacked"
+     [class.td-chips-input-before-position]="inputPosition === 'before'">
   <ng-template let-chip let-first="first" let-index="index" ngFor [ngForOf]="value">
     <mat-basic-chip [class.td-chip-disabled]="disabled"
                    [class.td-chip-after-pad]="!canRemoveChip"
@@ -23,9 +25,10 @@
     </mat-basic-chip>
   </ng-template>
   <mat-form-field floatPlaceholder="never"
-                      [style.width.px]="canAddChip ? null : 0"
-                      [style.height.px]="canAddChip ? null : 0"
-                      [color]="color">
+                  class="td-chips-form-field"
+                  [style.width.px]="canAddChip ? null : 0"
+                  [style.height.px]="canAddChip ? null : 0"
+                  [color]="color">
     <input matInput
             #input
             [tabIndex]="-1"

diff --git a/src/platform/core/chips/chips.component.scss b/src/platform/core/chips/chips.component.scss
@@ -10,9 +10,15 @@
     flex-direction: row;
     flex-wrap: wrap;
     align-items: flex-start;
-    &.td-chips-stacked .mat-basic-chip {
+    &.td-chips-stacked .mat-basic-chip,
+    &.td-chips-stacked .td-chips-form-field {
       width: 100%;
     }
+    &.td-chips-input-before-position {
+      .td-chips-form-field {
+        order: -1;
+      }
+    }
   }
   .td-chip {
     &, > .td-chip-content {
@@ -74,6 +80,17 @@
         }
       }
     }
+    .td-chips-stacked {
+      .mat-basic-chip {
+        margin: 4px 0;
+        &:first-of-type {
+          margin: 8px 0 4px;
+        }
+        &:last-of-type {
+          margin: 4px 0 8px;
+        }
+      }
+    }
   }
   .mat-form-field-underline {
     position: relative;

diff --git a/src/platform/core/chips/chips.component.spec.ts b/src/platform/core/chips/chips.component.spec.ts
@@ -44,6 +44,7 @@ describe('Component: Chips', () => {
         TdChipsBasicTestComponent,
         TdChipsObjectsRequireMatchTestComponent,
         TdChipsStackedTestComponent,
+        TdChipsBeforeAfterTestComponent,
         TdChipRemovalTestComponent,
         TdChipsEventsTestComponent,
       ],
@@ -475,6 +476,35 @@ describe('Component: Chips', () => {
 
   });
 
+  describe('position usage: ', () => {
+    let fixture: ComponentFixture<TdChipsBeforeAfterTestComponent>;
+    let input: DebugElement;
+    let chips: DebugElement;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(TdChipsBeforeAfterTestComponent);
+      fixture.detectChanges();
+
+      chips = fixture.debugElement.query(By.directive(TdChipsComponent));
+    });
+
+    it('should rendered input before the list of chips at all times', (done: DoneFn) => {
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+
+        expect((<HTMLElement>chips.query(By.css('.td-chips-wrapper')).nativeElement).classList.contains('td-chips-input-before-position'))
+          .toBeFalsy();
+        fixture.componentInstance.position = 'before';
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          expect((<HTMLElement>chips.query(By.css('.td-chips-wrapper')).nativeElement).classList.contains('td-chips-input-before-position'))
+            .toBeTruthy();
+          done();
+        });
+      });
+    });
+  });
+
   describe('events: ', () => {
     let fixture: ComponentFixture<TdChipsEventsTestComponent>;
     let chips: DebugElement;
@@ -846,6 +876,26 @@ class TdChipsStackedTestComponent {
   selectedItems: string[] = this.items.slice(0, 3);
 }
 
+@Component({
+  template: `
+      <td-chips [items]="items" [(ngModel)]="selectedItems" [stacked]="stacked" [inputPosition]="position">
+      </td-chips>`,
+})
+class TdChipsBeforeAfterTestComponent {
+  position: string = 'after';
+  stacked: boolean = false;
+  items: string[] = [
+    'steak',
+    'pizza',
+    'tacos',
+    'sandwich',
+    'chips',
+    'pasta',
+    'sushi',
+  ];
+  selectedItems: string[] = this.items.slice(0, 3);
+}
+
 @Component({
   template: `
       <td-chips [items]="items" [(ngModel)]="selectedItems" [chipRemoval]="chipRemoval"

diff --git a/src/platform/core/chips/chips.component.ts b/src/platform/core/chips/chips.component.ts
@@ -72,6 +72,7 @@ export class TdChipsComponent extends _TdChipsMixinBase implements IControlValue
   private _stacked: boolean = false;
   private _requireMatch: boolean = false;
   private _color: 'primary' | 'accent' | 'warn' = 'primary';
+  private _inputPosition: 'before' | 'after' = 'after';
   private _chipAddition: boolean = true;
   private _chipRemoval: boolean = true;
   private _focused: boolean = false;
@@ -127,6 +128,19 @@ export class TdChipsComponent extends _TdChipsMixinBase implements IControlValue
   get stacked(): boolean {
     return this._stacked;
   }
+
+  /**
+   * inputPosition?: 'before' | 'after'
+   * Set input position before or after the chips.
+   * Defaults to 'after'.
+   */
+  @Input('inputPosition')
+  set inputPosition(inputPosition: 'before' | 'after') {
+    this._inputPosition = inputPosition;
+  }
+  get inputPosition(): 'before' | 'after' {
+    return this._inputPosition;
+  }
 
   /**
    * requireMatch?: boolean

diff --git a/src/platform/core/dialogs/services/dialog.service.ts b/src/platform/core/dialogs/services/dialog.service.ts
@@ -133,12 +133,10 @@ export class TdDialogService {
     return dialogRef;
   }
 
-  private _createConfig(config: MatDialogConfig): MatDialogConfig {
+  private _createConfig(config: IDialogConfig): MatDialogConfig {
     let dialogConfig: MatDialogConfig = new MatDialogConfig();
     dialogConfig.width = '400px';
-    for (let key in config) {
-      dialogConfig[key] = config[key];
-    }
+    Object.assign(dialogConfig, config);
     return dialogConfig;
   }
 

diff --git a/src/platform/core/json-formatter/_json-formatter-theme.scss b/src/platform/core/json-formatter/_json-formatter-theme.scss
@@ -17,6 +17,12 @@
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
   .td-json-formatter-wrapper {
+    .function::after,
+    .date::after,
+    .td-object-name::after,
+    .td-array-length::after {
+      content: '\200E';
+    }
     .td-key {
       &.td-key-node {
         &:focus,

diff --git a/src/platform/core/json-formatter/json-formatter.component.scss b/src/platform/core/json-formatter/json-formatter.component.scss
@@ -1,11 +1,5 @@
 :host {
   display: block;
-  .function::after,
-  .date::after,
-  .td-object-name::after,
-  .td-array-length::after {
-    content: '\200E‎';
-  }
 }
 .td-json-formatter-wrapper {
   padding-top: 2px;

diff --git a/...tform/dynamic-forms/dynamic-elements/dynamic-datepicker/dynamic-datepicker.component.scss b/...tform/dynamic-forms/dynamic-elements/dynamic-datepicker/dynamic-datepicker.component.scss
@@ -9,4 +9,4 @@
     flex: 1;
     box-sizing: border-box;
   }
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,4 +9,4 @@ @@
         flex: 1;
         box-sizing: border-box;
       }
-    }
+    }