Merge pull request #3705 from sparkdesignsystem/staging

Publish December Jan 4th, 2020

angular/package.json

@@ -10,7 +10,8 @@
     "lint": "ng lint",
     "coverage": "jest --coverage --config ./projects/spark-angular/jest.config.js",
     "docs:json": "compodoc --disableLifeCycleHooks -p ./tsconfig.json -e json -d .",
-    "build-styles": "cd '../styles/' && npm install && node build.js",
+    "build-css": "node-sass ./_spark.scss web/css/spark.min.css --output-style compressed",
+    "build-styles": "cd '../styles/' && npm install && node build.js && npm run build-css",
     "set-version": "PACKAGE_VERSION=$(node -p -e \"require('./projects/spark-angular/package.json').version\") && replace '(version).*' \"version: '$PACKAGE_VERSION'\" ./projects/spark-angular/src/environment/environment.ts",
     "sassdocmodifiers": "sassdoc '../styles/**/_*.scss' --parse > ../src/data/sass-modifiers.json",
     "prebuild:storybook": "npm run build-styles && npm run sassdocmodifiers && npm run test:generate-output && npm run docs:json",

angular/projects/spark-angular/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sparkdesignsystem/spark-angular",
   "description": "A collection of Spark Design System components in Angular 6+",
-  "version": "12.0.1",
+  "version": "12.0.2",
   "author": "Quicken Loans",
   "license": "MIT",
   "scripts": {
@@ -23,7 +23,7 @@
     "@angular/router": ">=7.0.0 < 9.2.0"
   },
   "dependencies": {
-    "@sparkdesignsystem/spark-styles": "^1.0.0",
+    "@sparkdesignsystem/spark-styles": "^1.1.0",
     "focus-visible": "5.0.2",
     "lodash": "^4.17.20",
     "tiny-date-picker": "github:sparkdesignsystem/tiny-date-picker#v3.2.9"

angular/projects/spark-angular/src/environment/environment.ts

@@ -1,3 +1,3 @@
 export const environment = {
-  version: '12.0.1',
+  version: '12.0.2-beta.0',
 };

html/components/autocomplete.js

@@ -0,0 +1,166 @@
+/* global document */
+import getElements from '../utilities/getElements';
+import {
+  isEscPressed,
+  isUpPressed,
+  isDownPressed,
+} from '../utilities/keypress';
+import generateAriaControls from '../utilities/generateAriaControls';
+import generateAriaOwns from '../utilities/generateAriaOwns';
+import resetListItems from '../utilities/resetListItems';
+import isElementVisible from '../utilities/isElementVisible';
+
+const activeClass = 'sprk-c-Autocomplete__result--active';
+
+const hideList = (autocompleteContainer, inputEl) => {
+  if (
+    isElementVisible(
+      '[data-sprk-autocomplete="results"]',
+      autocompleteContainer,
+    )
+  ) {
+    const listEl = autocompleteContainer.querySelector(
+      '[data-sprk-autocomplete="results"]',
+    );
+    resetListItems(
+      listEl.querySelectorAll('[data-sprk-autocomplete="result"]'),
+      activeClass,
+    );
+    listEl.classList.add('sprk-u-Display--none');
+    inputEl.removeAttribute('aria-activedescendant');
+    inputEl.parentNode.setAttribute('aria-expanded', false);
+  }
+};
+
+const highlightListItem = (result, inputEl) => {
+  inputEl.setAttribute('aria-activedescendant', result.id);
+  result.classList.add(activeClass);
+  result.setAttribute('aria-selected', true);
+
+  const listItemTop = result.getBoundingClientRect().top;
+  const listItemBottom = result.getBoundingClientRect().bottom;
+
+  const listTop = result.parentNode.getBoundingClientRect().top;
+  const listBottom = result.parentNode.getBoundingClientRect().bottom;
+
+  // if the list item is not vertically contained within the list
+  if (listItemTop < listTop || listItemBottom > listBottom) {
+    // the distance from the top of the <li> to the top of the <ul>
+    const childTop = result.offsetTop;
+
+    // eslint-disable-next-line no-param-reassign
+    result.parentNode.scrollTop = childTop;
+  }
+};
+
+const getActiveItemIndex = (listEl) => {
+  let activeIndex = null;
+  listEl.forEach((listItem, index) => {
+    if (listItem.classList.contains(activeClass)) {
+      activeIndex = index;
+    }
+  });
+
+  return activeIndex;
+};
+
+const advanceHighlightedItem = (results, inputEl) => {
+  const activeIndex = getActiveItemIndex(results);
+  resetListItems(results, activeClass);
+
+  if (activeIndex === null) {
+    highlightListItem(results[0], inputEl);
+  } else if (activeIndex + 1 <= results.length - 1) {
+    highlightListItem(results[activeIndex + 1], inputEl);
+  } else {
+    highlightListItem(results[0], inputEl);
+  }
+};
+
+const retreatHighlightedItem = (results, inputEl) => {
+  const activeIndex = getActiveItemIndex(results);
+  resetListItems(results, activeClass);
+
+  if (activeIndex === null || activeIndex - 1 === -1) {
+    highlightListItem(results[results.length - 1], inputEl);
+  } else {
+    highlightListItem(results[activeIndex - 1], inputEl);
+  }
+};
+
+const calculateListWidth = (listEl, inputEl) => {
+  const currentInputWidth = inputEl.offsetWidth;
+  listEl.setAttribute('style', `max-width:${currentInputWidth}px`);
+};
+
+const bindUIEvents = (autocompleteContainer) => {
+  const inputEl = autocompleteContainer.querySelector(
+    '[data-sprk-autocomplete="input"]',
+  );
+  const listEl = autocompleteContainer.querySelector(
+    '[data-sprk-autocomplete="results"]',
+  );
+
+  generateAriaControls(inputEl, listEl, 'autocomplete');
+  generateAriaOwns(inputEl.parentNode, listEl, 'autocomplete');
+
+  inputEl.addEventListener('keydown', (e) => {
+    const selectableListItems = listEl.querySelectorAll(
+      'li:not([data-sprk-autocomplete-no-select])',
+    );
+
+    if (isUpPressed(e)) {
+      e.stopPropagation();
+      e.preventDefault();
+
+      if (
+        isElementVisible(
+          '[data-sprk-autocomplete="results"]',
+          autocompleteContainer,
+        )
+      ) {
+        retreatHighlightedItem(selectableListItems, inputEl);
+      }
+    } else if (isDownPressed(e)) {
+      e.stopPropagation();
+      e.preventDefault();
+
+      if (
+        isElementVisible(
+          '[data-sprk-autocomplete="results"]',
+          autocompleteContainer,
+        )
+      ) {
+        advanceHighlightedItem(selectableListItems, inputEl);
+      }
+    }
+  });
+
+  // Hide results if Escape is pressed
+  document.addEventListener('keydown', (e) => {
+    if (isEscPressed(e)) {
+      hideList(autocompleteContainer, inputEl);
+    }
+  });
+
+  // Hide results if the document body is clicked
+  document.addEventListener('click', (e) => {
+    if (!(inputEl.contains(e.target) || listEl.contains(e.target))) {
+      hideList(autocompleteContainer, inputEl);
+    }
+  });
+
+  // when the window resizes, reset the max-width of the list
+  window.addEventListener('resize', () => {
+    calculateListWidth(listEl, inputEl);
+  });
+
+  // calculate the max-width on init
+  calculateListWidth(listEl, inputEl);
+};
+
+const autocomplete = () => {
+  getElements('[data-sprk-autocomplete="container"]', bindUIEvents);
+};
+
+export { autocomplete, bindUIEvents };