feat(SelectionList): new component

demo/app/components/components.component.ts

@@ -9,7 +9,7 @@ import {
   Router,
 } from '@angular/router';
 import { VERSION as NGX_VERSION } from '@terminus/ngx-tools/utilities';
-import { VERSION as UI_VERSION } from '@terminus/ui';
+import { VERSION as UI_VERSION } from '@terminus/ui/utilities';
 import { componentsList } from './components.constant';
 
 import { orderArrayByProperty } from './../utilities/orderArrayByProperty';

demo/app/components/components.constant.ts

@@ -212,6 +212,13 @@ export const componentsList: Routes = [
       name: 'Select',
     },
   },
+  {
+    path: 'selection-list',
+    loadChildren: `./components/selection-list/selection-list.module#SelectionListModule`,
+    data: {
+      name: 'Selection List',
+    },
+  },
   {
     path: 'spacing',
     loadChildren: `./components/spacing/spacing.module#SpacingModule`,

demo/app/components/select/select-routing.module.ts

@@ -1,5 +1,8 @@
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import {
+  RouterModule,
+  Routes,
+} from '@angular/router';
 
 import { SelectComponent } from './select.component';
 

demo/app/components/selection-list/data.ts

@@ -0,0 +1,245 @@
+
+export interface State {
+  name: string;
+  abbreviation: string;
+}
+
+
+export const STATES: State[] = [
+  {
+    name: 'Alabama',
+    abbreviation: 'AL',
+  },
+  {
+    name: 'Alaska',
+    abbreviation: 'AK',
+  },
+  {
+    name: 'American Samoa',
+    abbreviation: 'AS',
+  },
+  {
+    name: 'Arizona',
+    abbreviation: 'AZ',
+  },
+  {
+    name: 'Arkansas',
+    abbreviation: 'AR',
+  },
+  {
+    name: 'California',
+    abbreviation: 'CA',
+  },
+  {
+    name: 'Colorado',
+    abbreviation: 'CO',
+  },
+  {
+    name: 'Connecticut',
+    abbreviation: 'CT',
+  },
+  {
+    name: 'Delaware',
+    abbreviation: 'DE',
+  },
+  {
+    name: 'District Of Columbia',
+    abbreviation: 'DC',
+  },
+  {
+    name: 'Federated States Of Micronesia',
+    abbreviation: 'FM',
+  },
+  {
+    name: 'Florida',
+    abbreviation: 'FL',
+  },
+  {
+    name: 'Georgia',
+    abbreviation: 'GA',
+  },
+  {
+    name: 'Guam Gu',
+    abbreviation: 'GU',
+  },
+  {
+    name: 'Hawaii',
+    abbreviation: 'HI',
+  },
+  {
+    name: 'Idaho',
+    abbreviation: 'ID',
+  },
+  {
+    name: 'Illinois',
+    abbreviation: 'IL',
+  },
+  {
+    name: 'Indiana',
+    abbreviation: 'IN',
+  },
+  {
+    name: 'Iowa',
+    abbreviation: 'IA',
+  },
+  {
+    name: 'Kansas',
+    abbreviation: 'KS',
+  },
+  {
+    name: 'Kentucky',
+    abbreviation: 'KY',
+  },
+  {
+    name: 'Louisiana',
+    abbreviation: 'LA',
+  },
+  {
+    name: 'Maine',
+    abbreviation: 'ME',
+  },
+  {
+    name: 'Marshall Islands',
+    abbreviation: 'MH',
+  },
+  {
+    name: 'Maryland',
+    abbreviation: 'MD',
+  },
+  {
+    name: 'Massachusetts',
+    abbreviation: 'MA',
+  },
+  {
+    name: 'Michigan',
+    abbreviation: 'MI',
+  },
+  {
+    name: 'Minnesota',
+    abbreviation: 'MN',
+  },
+  {
+    name: 'Mississippi',
+    abbreviation: 'MS',
+  },
+  {
+    name: 'Missouri',
+    abbreviation: 'MO',
+  },
+  {
+    name: 'Montana',
+    abbreviation: 'MT',
+  },
+  {
+    name: 'Nebraska',
+    abbreviation: 'NE',
+  },
+  {
+    name: 'Nevada',
+    abbreviation: 'NV',
+  },
+  {
+    name: 'New Hampshire',
+    abbreviation: 'NH',
+  },
+  {
+    name: 'New Jersey',
+    abbreviation: 'NJ',
+  },
+  {
+    name: 'New Mexico',
+    abbreviation: 'NM',
+  },
+  {
+    name: 'New York',
+    abbreviation: 'NY',
+  },
+  {
+    name: 'North Carolina',
+    abbreviation: 'NC',
+  },
+  {
+    name: 'North Dakota',
+    abbreviation: 'ND',
+  },
+  {
+    name: 'Northern Mariana Islands',
+    abbreviation: 'MP',
+  },
+  {
+    name: 'Ohio',
+    abbreviation: 'OH',
+  },
+  {
+    name: 'Oklahoma',
+    abbreviation: 'OK',
+  },
+  {
+    name: 'Oregon',
+    abbreviation: 'OR',
+  },
+  {
+    name: 'Palau',
+    abbreviation: 'PW',
+  },
+  {
+    name: 'Pennsylvania',
+    abbreviation: 'PA',
+  },
+  {
+    name: 'Puerto Rico',
+    abbreviation: 'PR',
+  },
+  {
+    name: 'Rhode Island',
+    abbreviation: 'RI',
+  },
+  {
+    name: 'South Carolina',
+    abbreviation: 'SC',
+  },
+  {
+    name: 'South Dakota',
+    abbreviation: 'SD',
+  },
+  {
+    name: 'Tennessee',
+    abbreviation: 'TN',
+  },
+  {
+    name: 'Texas',
+    abbreviation: 'TX',
+  },
+  {
+    name: 'Utah',
+    abbreviation: 'UT',
+  },
+  {
+    name: 'Vermont',
+    abbreviation: 'VT',
+  },
+  {
+    name: 'Virgin Islands',
+    abbreviation: 'VI',
+  },
+  {
+    name: 'Virginia',
+    abbreviation: 'VA',
+  },
+  {
+    name: 'Washington',
+    abbreviation: 'WA',
+  },
+  {
+    name: 'West Virginia',
+    abbreviation: 'WV',
+  },
+  {
+    name: 'Wisconsin',
+    abbreviation: 'WI',
+  },
+  {
+    name: 'Wyoming',
+    abbreviation: 'WY',
+  },
+];

demo/app/components/selection-list/selection-list-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { SelectionListComponent } from './selection-list.component';
+
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SelectionListComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SelectionListRoutingModule { }

demo/app/components/selection-list/selection-list.component.html

@@ -0,0 +1,95 @@
+
+<ts-card tsVerticalSpacing fxFlex>
+  <form
+    novalidate
+    fxLayout="column"
+    fxLayout.gt-sm="row"
+    fxLayoutGap="1rem"
+  >
+    <h3 tsCardTitle tsVerticalSpacing>
+      SelectionList w/complex object (allowMultiple)
+    </h3>
+
+    <div tsVerticalSpacing>
+      <button (click)="seedSelections(complexMultipleControl)" tabindex="-1">
+        Seed selections
+      </button>
+    </div>
+
+    <ts-selection-list
+      label="Select states"
+      hint="Begin typing to search.."
+      [formControl]="complexMultipleControl"
+      [allowMultiple]="true"
+      [reopenAfterSelection]="true"
+      [showProgress]="complexMultipleAsync"
+      [displayFormatter]="formatter"
+      (duplicateSelection)="duplicate($event, 'complexMultiple')"
+      (selectionChange)="selectionChange($event, 'complexMultiple')"
+      (queryChange)="queryHasChanged($event, 'complexMultiple')"
+      (closed)="wasClosed('complexMultiple')"
+      (opened)="wasOpened('complexMultiple')"
+      (backdropClicked)="backdropClick('complexMultiple')"
+      tsVerticalSpacing
+    >
+      <ts-option
+        [value]="state"
+        [option]="state"
+        *ngFor="let state of complexMultipleResults | async"
+      >
+        {{ state.name }}
+      </ts-option>
+    </ts-selection-list>
+
+    <div>
+      FormControl value: {{ complexMultipleControl.value | json }}
+    </div>
+  </form>
+</ts-card>
+
+
+<ts-card tsVerticalSpacing fxFlex>
+  <form
+    novalidate
+    fxLayout="column"
+    fxLayout.gt-sm="row"
+    fxLayoutGap="1rem"
+  >
+    <h3 tsCardTitle tsVerticalSpacing="small--1">
+      SelectionList (single)
+    </h3>
+
+    <div tsVerticalSpacing>
+      <button (click)="seedSelections(simpleControl, [states[0]])" tabindex="-1">
+        Seed selection
+      </button>
+    </div>
+
+    <ts-selection-list
+      label="Select states"
+      hint="Begin typing to search.."
+      [formControl]="simpleControl"
+      [showProgress]="simpleAsync"
+      [displayFormatter]="formatter"
+      (duplicateSelection)="duplicate($event, 'simple')"
+      (selectionChange)="selectionChange($event, 'simple')"
+      (queryChange)="queryHasChanged($event, 'simple')"
+      (closed)="wasClosed('simple')"
+      (opened)="wasOpened('simple')"
+      (backdropClicked)="backdropClick('simple')"
+      tsVerticalSpacing
+    >
+      <ts-option
+        [value]="state"
+        [option]="state"
+        *ngFor="let state of simpleResults | async"
+      >
+        {{ state.name }}
+      </ts-option>
+    </ts-selection-list>
+
+    <div>
+      FormControl value: {{ simpleControl.value | json }}
+    </div>
+  </form>
+</ts-card>