Merge pull request #1367 from GSA/side-nav

Storybook demo: Side nav

libs/documentation/src/lib/storybook/side-navigation/side-navigation-filters/services/autocomplete-sample.data.ts

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

libs/documentation/src/lib/storybook/side-navigation/side-navigation-filters/services/autocomplete-sample.service.ts

@@ -0,0 +1,51 @@
+/* tslint:disable */
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { SDSAutocompleteServiceInterface, SDSHiercarchicalServiceResult } from '@gsa-sam/components';
+import { map } from 'rxjs/operators';
+
+import { SampleAutocompleteData } from './autocomplete-sample.data';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AutocompleteSampleDataService implements SDSAutocompleteServiceInterface {
+  private loadedData;
+  constructor() {
+    this.loadedData = SampleAutocompleteData;
+  }
+
+  getDataByText(currentItems: number, searchValue?: string): Observable<SDSHiercarchicalServiceResult> {
+    let itemIncrease = 25;
+    let data = of(this.loadedData);
+    let itemsOb: Observable<Object[]>;
+
+    if (searchValue) {
+      itemsOb = data.pipe(
+        map((items) =>
+          items.filter((itm) => itm.name.indexOf(searchValue) !== -1 || itm.subtext.indexOf(searchValue) !== -1)
+        )
+      );
+    } else {
+      itemsOb = data;
+    }
+
+    let items: object[];
+    itemsOb.subscribe((result) => {
+      items = result;
+    });
+    let totalItemCount = items.length;
+
+    let maxSectionPosition = currentItems + itemIncrease;
+    if (maxSectionPosition > totalItemCount) {
+      maxSectionPosition = totalItemCount;
+    }
+    let selectedtems = items.slice(currentItems, maxSectionPosition);
+
+    let returnItem = {
+      items: selectedtems,
+      totalItems: totalItemCount,
+    };
+    return of(returnItem);
+  }
+}

libs/documentation/src/lib/storybook/side-navigation/side-navigation-filters/side-navigation-filters.component.html

@@ -0,0 +1,81 @@
+<div class="desktop:grid-col-4 tablet-lg:grid-col-12 mobile-lg:grid-col-12 margin-bottom-3">
+  <sds-side-toolbar
+    [responsiveButtonText]="'Advanced Search'"
+    [responsiveDialogOptions]="responsiveDialogOptions"
+    [showApply]="true"
+    [dialogTitleText]="'Advanced Search'"
+    [backButtonAria]="'Close Advanced Search'"
+  >
+    <ng-template #toolbarContent>
+      <div class="sds-card sds-card--collapsible" [ngClass]="{ 'sds-card--collapsed': !domainsExpanded }">
+        <div
+          role="button"
+          class="sds-card__header sds-card__header--action"
+          [attr.aria-expanded]="domainsExpanded"
+          aria-controls="panelBody"
+          tabindex="0"
+          aria-label="Select Domain"
+          (click)="domainsExpanded = !domainsExpanded"
+          (keyup.enter)="domainsExpanded = !domainsExpanded"
+        >
+          <div class="sds-card__title">
+            Select Domain<br />
+            <span class="sds-card__subtitle">
+              {{ selectedPanel?.text }}
+            </span>
+          </div>
+
+          <div class="sds-card__action sds-card__collapse"></div>
+        </div>
+
+        <div class="sds-card__body sds-card__body--accent-cool" id="panelBody">
+          <sds-selection-panel
+            [model]="navigationModel"
+            [currentSelection]="selectedPanel"
+            (panelSelected)="onPanelSelection($event)"
+          >
+          </sds-selection-panel>
+        </div>
+      </div>
+
+      <div
+        class="sds-card"
+        *ngIf="selectedPanel && selectedPanel.children"
+        [ngClass]="{ 'display-none': domainsExpanded }"
+      >
+        <div class="sds-card__body sds-card__body--accent-cool">
+          <sds-sub-panel [model]="selectedPanel.children" (subPanelClicked)="onSubPanelClicked($event)">
+          </sds-sub-panel>
+        </div>
+      </div>
+
+      <div class="sds-card sds-card--collapsible" [ngClass]="{ 'sds-card--collapsed': !filtersExpanded }">
+        <div
+          class="sds-card__header sds-card__header--action"
+          role="button"
+          tabindex="0"
+          aria-controls="filtersBody"
+          [attr.aria-label]="'Filter By'"
+          [attr.aria-expanded]="filtersExpanded"
+          (click)="filtersExpanded = !filtersExpanded"
+          (keyup.enter)="filtersExpanded = !filtersExpanded"
+        >
+          <div class="sds-card__title">Filter By</div>
+          <div class="sds-card__action sds-card__collapse"></div>
+        </div>
+        <div class="sds-card__body sds-card__body--accent-cool" id="filtersBody">
+          <sds-filters
+            #filters
+            [options]="filterPanelConfig.options"
+            [advancedFilters]="filterPanelConfig.advancedFilters"
+            [form]="filterPanelConfig.form"
+            [fields]="filterPanelConfig.fields"
+            [model]="filterPanelConfig.model"
+            (filterChange)="filterChange$.next($event)"
+          >
+          </sds-filters>
+        </div>
+      </div>
+    </ng-template>
+  </sds-side-toolbar>
+</div>