Develop

package.json

@@ -10,7 +10,6 @@
   "repository": "ovh-ux/ovh-ui-angular",
   "main": "./dist/oui-angular.min.js",
   "browser": "./dist/oui-angular.min.js",
-  "module": "./packages/oui-angular/src/index.js",
   "scripts": {
     "commit": "npm-scripts-config commit",
     "commitmsg": "npm-scripts-config commitmsg",
@@ -35,18 +34,25 @@
     }
   },
   "dependencies": {
+    "bloodhound-js": "^1.2.3",
+    "clipboard": "^2.0.1",
+    "escape-string-regexp": "^1.0.5",
+    "flatpickr": "^4.5.2",
+    "popper.js": "^1.14.4",
+    "ui-select": "^0.19.8"
+  },
+  "peerDependencies": {
     "angular": ">=1.6.x",
     "angular-aria": ">=1.6.x",
     "angular-sanitize": ">=1.6.x",
-    "clipboard": "^2.0.1",
-    "escape-string-regexp": "^1.0.5",
     "flatpickr": "^4.5.2",
-    "ovh-ui-kit": "^2.20.0",
-    "popper.js": "^1.14.4"
+    "ovh-ui-kit": "^2.20.0"
   },
   "devDependencies": {
+    "angular": ">=1.6.x",
+    "angular-aria": ">=1.6.x",
+    "angular-sanitize": ">=1.6.x",
     "angular-mocks": ">=1.6.x",
-    "autoprefixer": "^9.1.5",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^9.0.0",
@@ -59,15 +65,11 @@
     "babel-preset-stage-2": "^6.24.1",
     "babel-register": "^6.26.0",
     "cross-env": "^5.2.0",
-    "css-loader": "^1.0.0",
     "eslint": "^4.3.0",
     "eslint-config-ovh": "^0.1.1",
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-loader": "^2.1.1",
-    "eventsource-polyfill": "^0.9.6",
-    "express": "^4.16.3",
     "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^3.2.0",
     "istanbul-instrumenter-loader": "^3.0.1",
     "jasmine-core": "^3.2.1",
     "karma": "^3.0.0",
@@ -80,29 +82,17 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "^0.0.32",
     "karma-webpack": "^4.0.0-rc.2",
-    "less": "^3.8.1",
-    "less-loader": "^4.1.0",
-    "loader-utils": "^1.1.0",
     "lodash": "^4.17.11",
     "lodash-webpack-plugin": "^0.11.5",
-    "marked": "^0.5.0",
-    "minimist": "^1.2.0",
     "npm-scripts-config": "^0.0.2",
     "npm-scripts-conventional-changelog": "^0.1.0",
-    "opn": "^5.3.0",
-    "portscanner": "^2.2.0",
-    "postcss-loader": "^3.0.0",
     "rimraf": "^2.6.2",
-    "style-loader": "^0.23.0",
     "webpack": "^4.19.1",
     "webpack-cli": "^3.1.0",
     "webpack-dev-middleware": "^3.3.0",
     "webpack-hot-middleware": "^2.24.0",
     "webpack-merge": "^4.1.4"
   },
-  "peerDependencies": {
-    "ovh-ui-kit": "*"
-  },
   "engines": {
     "node": ">= 6.9.0",
     "npm": ">= 3.10.0",

packages/oui-angular/src/index.js

@@ -1,4 +1,5 @@
 import ActionMenu from "@ovh-ui/oui-action-menu";
+import Autocomplete from "@ovh-ui/oui-autocomplete";
 import BackButton from "@ovh-ui/oui-back-button";
 import Button from "@ovh-ui/oui-button";
 import Calendar from "@ovh-ui/oui-calendar";
@@ -10,7 +11,9 @@ import CriteriaAdder from "@ovh-ui/oui-criteria-adder";
 import CriteriaContainer from "@ovh-ui/oui-criteria-container";
 import Datagrid from "@ovh-ui/oui-datagrid";
 import Dropdown from "@ovh-ui/oui-dropdown";
+import DualList from "@ovh-ui/oui-dual-list";
 import Field from "@ovh-ui/oui-field";
+import File from "@ovh-ui/oui-file";
 import FormActions from "@ovh-ui/oui-form-actions";
 import GuideMenu from "@ovh-ui/oui-guide-menu";
 import HeaderTabs from "@ovh-ui/oui-header-tabs";
@@ -32,13 +35,15 @@ import Slideshow from "@ovh-ui/oui-slideshow";
 import Spinner from "@ovh-ui/oui-spinner";
 import Stepper from "@ovh-ui/oui-stepper";
 import Switch from "@ovh-ui/oui-switch";
+import Tabs from "@ovh-ui/oui-tabs";
 import Textarea from "@ovh-ui/oui-textarea";
 import Tile from "@ovh-ui/oui-tile";
 import Tooltip from "@ovh-ui/oui-tooltip";
 
 export default angular
     .module("oui", [
         ActionMenu,
+        Autocomplete,
         BackButton,
         Button,
         Calendar,
@@ -50,7 +55,9 @@ export default angular
         CriteriaContainer,
         Datagrid,
         Dropdown,
+        DualList,
         Field,
+        File,
         FormActions,
         GuideMenu,
         HeaderTabs,
@@ -72,6 +79,7 @@ export default angular
         Spinner,
         Stepper,
         Switch,
+        Tabs,
         Textarea,
         Tile,
         Tooltip

packages/oui-angular/src/index.spec.js

@@ -1,6 +1,7 @@
 import "@ovh-ui/common/test-utils";
 
 loadTests(require.context("../../oui-action-menu/src/", true, /.*((\.spec)|(index))$/));
+loadTests(require.context("../../oui-autocomplete/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-back-button/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-button/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-calendar/src/", true, /.*((\.spec)|(index))$/));
@@ -12,7 +13,9 @@ loadTests(require.context("../../oui-criteria-adder/src/", true, /.*((\.spec)|(i
 loadTests(require.context("../../oui-criteria-container/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-datagrid/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-dropdown/src/", true, /.*((\.spec)|(index))$/));
+loadTests(require.context("../../oui-dual-list/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-field/src/", true, /.*((\.spec)|(index))$/));
+loadTests(require.context("../../oui-file/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-form-actions/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-guide-menu/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-header-tabs/src/", true, /.*((\.spec)|(index))$/));
@@ -34,6 +37,7 @@ loadTests(require.context("../../oui-slideshow/src/", true, /.*((\.spec)|(index)
 loadTests(require.context("../../oui-spinner/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-stepper/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-switch/src/", true, /.*((\.spec)|(index))$/));
+loadTests(require.context("../../oui-tabs/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-tile/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-textarea/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-tooltip/src/", true, /.*((\.spec)|(index))$/));

packages/oui-autocomplete/README.md

@@ -0,0 +1,83 @@
+# Autocomplete
+
+<component-status cx-design="complete" ux="rc"></component-status>
+
+## Usage
+
+### Basic
+
+#### Array of strings
+
+```html:preview
+<input type="text" class="oui-input oui-input_inline" 
+    placeholder="Search country name"
+    ng-model="$ctrl.modelStrings"
+    oui-autocomplete="$ctrl.suggestionStrings">
+```
+
+#### Array of objects
+
+```html:preview
+<input type="text" class="oui-input oui-input_inline" 
+    placeholder="Search country name"
+    ng-model="$ctrl.modelObjects"
+    oui-autocomplete="$ctrl.suggestionObjects"
+    oui-autocomplete-property="country.name">
+```
+
+### Events
+
+**Note**: If you want to access the parameters inside `on-select` callback, you need to use `value` variable as below.
+It will return the corresponding value from your array of suggestions.
+
+```html:preview
+<input type="text" class="oui-input oui-input_inline" 
+    placeholder="Search country name"
+    ng-model="$ctrl.modelOnSelect"
+    oui-autocomplete="$ctrl.suggestionObjects"
+    oui-autocomplete-property="country.name"
+    oui-autocomplete-on-select="$ctrl.selectedValue = value">
+<div class="oui-doc-preview-only">
+    <p><strong>model value:</strong> {{$ctrl.modelOnSelect | json}}</p>
+    <p><strong>onSelect 'value' value:</strong> {{$ctrl.selectedValue | json}}</p>
+</div>
+```
+
+## Variants
+
+### Search
+
+See [Search](#!/oui-angular/search)  component.
+
+```html:preview
+<oui-search
+    model="$ctrl.modelSearch"
+    autocomplete="$ctrl.suggestionObjects"
+    autocomplete-property="country.name"
+    placeholder="Search country name">
+</oui-search>
+```
+
+## API
+
+| Attribute                     | Type      | Binding   | One-time binding  | Values | Default   | Description
+| ----                          | ----      | ----      | ----              | ----   | ----      | ----
+| `oui-autocomplete`            | array     | <         | no                | n/a    | n/a       | array of suggestions
+| `oui-autocomplete-options`    | object    | <?        | yes               | n/a    | n/a       | options of autocomplete
+| `oui-autocomplete-property`   | string    | @?        | no                | n/a    | n/a       | property path used to get value from suggestion
+| `oui-autocomplete-on-select`  | function  | &         | no                | n/a    | n/a       | handler triggered when suggestion is selected
+
+## Configuration
+
+The autocomplete can be globally configured with a provider.
+
+```js
+angular.module("myModule", [
+    "oui.autocomplete"
+]).config(ouiAutocompleteConfigurationProvider => {
+    ouiAutocompleteConfigurationProvider.setOptions({ // default options
+        debounceDelay: 500,
+        minLength: 2
+    });
+});
+```

packages/oui-autocomplete/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@ovh-ui/oui-autocomplete",
+  "version": "1.0.0",
+  "main": "./src/index.js",
+  "license": "BSD-3-Clause",
+  "author": "OVH SAS",
+  "dependencies": {
+    "bloodhound-js": "^1.2.3",
+    "popper.js": "^1.14.4"
+  }
+}