fix(SelectionList): single and multiple select now have matching height

demo/app/components/form-controls/form-controls.component.html

@@ -3,24 +3,18 @@
   <p tsVerticalSpacing>Horizontal alignment test cases.</p>
 
   <row>
-    <ts-button>
-      Action
-    </ts-button>
+    <ts-button>Foo</ts-button>
 
     <ts-input [(ngModel)]="inputModel" label="Enter information"></ts-input>
 
-    <ts-button>
-      Action
-    </ts-button>
+    <ts-button>Foo</ts-button>
   </row>
 
   <row>
-    <ts-button>
-      Action
-    </ts-button>
+    <ts-button>Foo</ts-button>
 
     <ts-selection-list
-      label="Select items"
+      label="Seeded multi-select"
       [allowMultiple]="true"
       [(ngModel)]="selectionListModel"
       [displayFormatter]="selectionListFormatter"
@@ -30,43 +24,74 @@
       </ts-option>
     </ts-selection-list>
 
-    <ts-button>
-      Action
-    </ts-button>
+    <ts-button>Foo</ts-button>
+
+    <ts-selection-list
+      label="Seeded single select"
+      [allowMultiple]="false"
+      [(ngModel)]="selectionListModelSingle"
+      [displayFormatter]="selectionListFormatter"
+    >
+      <ts-option [option]="item" [value]="item" *ngFor="let item of options">
+        {{ selectionListFormatter(item) }}
+      </ts-option>
+    </ts-selection-list>
+
+    <ts-button>Foo</ts-button>
+  </row>
+
+  <row>
+    <ts-button>Foo</ts-button>
+
+    <ts-selection-list
+      label="Empty multi-select"
+      [allowMultiple]="true"
+      [(ngModel)]="emptyModel1"
+      [displayFormatter]="selectionListFormatter"
+    >
+      <ts-option [option]="item" [value]="item" *ngFor="let item of options">
+        {{ selectionListFormatter(item) }}
+      </ts-option>
+    </ts-selection-list>
+
+    <ts-button>Foo</ts-button>
+
+    <ts-selection-list
+      label="Empty single select"
+      [allowMultiple]="false"
+      [(ngModel)]="emptyModel2"
+      [displayFormatter]="selectionListFormatter"
+    >
+      <ts-option [option]="item" [value]="item" *ngFor="let item of options">
+        {{ selectionListFormatter(item) }}
+      </ts-option>
+    </ts-selection-list>
+
+    <ts-button>Foo</ts-button>
   </row>
 
   <row>
-    <ts-button>
-      Action
-    </ts-button>
+    <ts-button>Foo</ts-button>
 
     <ts-toggle>Toggle Me!</ts-toggle>
 
-    <ts-button>
-      Action
-    </ts-button>
+    <ts-button>Foo</ts-button>
   </row>
 
   <row>
-    <ts-button>
-      Action
-    </ts-button>
+    <ts-button>Foo</ts-button>
 
     <ts-radio-group
       [options]="options"
       [formatUILabelFn]="uiFormatterRadio"
       [formatModelValueFn]="modelFormatterRadio"
     ></ts-radio-group>
 
-    <ts-button>
-      Action
-    </ts-button>
+    <ts-button>Foo</ts-button>
   </row>
 
   <row>
-    <ts-button>
-      Action
-    </ts-button>
+    <ts-button>Foo</ts-button>
 
     <ts-select
       label="Make a selection"
@@ -78,21 +103,15 @@
       >{{ item.name }}</ts-option>
     </ts-select>
 
-    <ts-button>
-      Action
-    </ts-button>
+    <ts-button>Foo</ts-button>
   </row>
 
   <row>
-    <ts-button>
-      Action
-    </ts-button>
+    <ts-button>Foo</ts-button>
 
     <ts-checkbox>My checkbox!</ts-checkbox>
 
-    <ts-button>
-      Action
-    </ts-button>
+    <ts-button>Foo</ts-button>
   </row>
 
 </ts-card>

demo/app/components/form-controls/form-controls.component.ts

@@ -30,7 +30,10 @@ export class FormControlsComponent {
     },
   ];
   selectionListModel = [this.options[0]];
-  selectionListFormatter = v => v.name;
+  selectionListModelSingle = [this.options[0]];
+  emptyModel1 = [];
+  emptyModel2 = [];
+  selectionListFormatter = v => v ? v.name : '';
   uiFormatterRadio = v => v.name;
   modelFormatterRadio = v => v.value;
   inputModel = 'My value';

demo/app/components/form-controls/row.component.html

@@ -1,3 +1,3 @@
-<div fxLayout="row" fxLayoutAlign="start" tsVerticalSpacing>
+<div fxLayout="row" fxLayoutAlign="start start" tsVerticalSpacing>
   <ng-content></ng-content>
 </div>

demo/app/components/form-controls/row.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'row',
-  templateUrl: 'row.component.html',
+  templateUrl: './row.component.html',
 })
 
 export class RowComponent implements OnInit {

package.json

@@ -168,7 +168,7 @@
     "@terminus/ui": "15.8.3",
     "date-fns": "2.9.0",
     "ngx-perfect-scrollbar": "8.0.0",
-    "popper.js": "1.16.0",
+    "popper.js": "^1.16.0",
     "text-mask-addons": "3.8.0",
     "text-mask-core": "5.1.2"
   },

terminus-ui/selection-list/src/selection-list.component.scss

@@ -91,6 +91,13 @@
   &:-moz-ui-invalid {
     box-shadow: none;
   }
+
+  // Style overrides for the input trigger when in single selection mode
+  .ts-selection-list--single & {
+    margin-bottom: 0;
+    min-height: auto;
+    padding-top: 0;
+  }
 }
 
 

yarn.lock

@@ -11373,7 +11373,6 @@ npm@^6.10.3:
     cmd-shim "^3.0.3"
     columnify "~1.5.4"
     config-chain "^1.1.12"
-    debuglog "*"
     detect-indent "~5.0.0"
     detect-newline "^2.1.0"
     dezalgo "~1.0.3"
@@ -11388,7 +11387,6 @@ npm@^6.10.3:
     has-unicode "~2.0.1"
     hosted-git-info "^2.8.5"
     iferr "^1.0.2"
-    imurmurhash "*"
     infer-owner "^1.0.4"
     inflight "~1.0.6"
     inherits "^2.0.4"
@@ -11407,14 +11405,8 @@ npm@^6.10.3:
     libnpx "^10.2.0"
     lock-verify "^2.1.0"
     lockfile "^1.0.4"
-    lodash._baseindexof "*"
     lodash._baseuniq "~4.6.0"
-    lodash._bindcallback "*"
-    lodash._cacheindexof "*"
-    lodash._createcache "*"
-    lodash._getnative "*"
     lodash.clonedeep "~4.5.0"
-    lodash.restparam "*"
     lodash.union "~4.6.0"
     lodash.uniq "~4.5.0"
     lodash.without "~4.4.0"
@@ -12463,7 +12455,7 @@ polylabel@^1.0.2:
   dependencies:
     tinyqueue "^1.1.0"
 
-popper.js@1.16.0:
+popper.js@^1.16.0:
   version "1.16.0"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.0.tgz#2e1816bcbbaa518ea6c2e15a466f4cb9c6e2fbb3"
   integrity sha512-+G+EkOPoE5S/zChTpmBSSDYmhXJ5PsW8eMhH8cP/CQHMFPBG/kC9Y5IIw6qNYgdJ+/COf0ddY2li28iHaZRSjw==