From 94f0038ea26b67d5b99639a3f7be959cb1381eac Mon Sep 17 00:00:00 2001
From: Axel Peter <15101925+AxelPeter@users.noreply.github.com>
Date: Thu, 20 Dec 2018 11:42:06 +0100
Subject: [PATCH 01/14] feat(oui-select): add multiple selection (#332)

---
 .htmlhintrc                                   |  25 ++++
 packages/oui-field/README.md                  |  18 ++-
 packages/oui-select/README.md                 |  58 +++++----
 packages/oui-select/src/index.spec.js         | 111 ++++++++++++++----
 packages/oui-select/src/select.controller.js  |  85 ++++++++++++--
 packages/oui-select/src/select.directive.js   |   1 +
 packages/oui-select/src/select.html           |  23 ++--
 .../src/templates/match-multiple.html         |  24 ++--
 packages/oui-select/src/templates/match.html  |   3 +-
 .../src/templates/select-multiple.html        |  36 +++---
 packages/oui-select/src/templates/select.html |   6 +-
 11 files changed, 289 insertions(+), 101 deletions(-)
 create mode 100644 .htmlhintrc

diff --git a/.htmlhintrc b/.htmlhintrc
new file mode 100644
index 00000000..5d3fb3d9
--- /dev/null
+++ b/.htmlhintrc
@@ -0,0 +1,25 @@
+{
+  "alt-require": true,
+  "attr-lowercase": true,
+  "attr-no-duplication": true,
+  "attr-unsafe-chars": true,
+  "attr-value-double-quotes": true,
+  "attr-value-not-empty": false,
+  "doctype-first": false,
+  "doctype-html5": true,
+  "head-script-disabled": true,
+  "href-abs-or-rel": false,
+  "id-class-ad-disabled": true,
+  "id-class-value": false,
+  "id-unique": true,
+  "inline-script-disabled": true,
+  "inline-style-disabled": false,
+  "space-tab-mixed-disabled": "space",
+  "spec-char-escape": true,
+  "src-not-empty": true,
+  "style-disabled": true,
+  "tag-pair": true,
+  "tag-self-close": false,
+  "tagname-lowercase": true,
+  "title-require": true
+}
diff --git a/packages/oui-field/README.md b/packages/oui-field/README.md
index 8b740adb..81651370 100644
--- a/packages/oui-field/README.md
+++ b/packages/oui-field/README.md
@@ -172,13 +172,23 @@
     <oui-field label="Recovery OS" size="m">
         <oui-select name="recovery_os"
             model="$ctrl.recoveryOs"
-            data-title="Select the recovery OS"
+            title="Select the recovery OS"
+            placeholder="Select the recovery OS..."
+            items="$ctrl.osList"
+            match="label"
+            required>
+        </oui-select>
+    </oui-field>
+
+    <oui-field label="Recovery OS" size="m">
+        <oui-select name="recovery_os2"
+            model="$ctrl.recoveryOs2"
+            title="Select the recovery OS"
             placeholder="Select the recovery OS..."
             items="$ctrl.osList"
-            required
             match="label"
-            data-align="start">
-            <span ng-bind="$item.label"></span>
+            required
+            multiple>
         </oui-select>
     </oui-field>
 </form>
diff --git a/packages/oui-select/README.md b/packages/oui-select/README.md
index 766721fa..026791ca 100644
--- a/packages/oui-select/README.md
+++ b/packages/oui-select/README.md
@@ -45,6 +45,19 @@
 </oui-select>
 ```
 
+### Multiple
+
+```html:preview
+<oui-select name="country"
+    model="$ctrl.modelMultiple"
+    placeholder="Select a country..."
+    items="$ctrl.countries"
+    match="name"
+    multiple
+    searchable>
+</oui-select>
+```
+
 ### Disabled
 
 ```html:preview
@@ -52,9 +65,7 @@
     model="$ctrl.modelDisabled"
     placeholder="Select a country..."
     items="$ctrl.countries"
-    required
     match="name"
-    data-align="start"
     disabled>
 </oui-select>
 ```
@@ -117,6 +128,11 @@
 </oui-message>
 
 ```html:preview
+<div class="oui-doc-preview-only">
+    <p><strong>Last onChange value:</strong> {{ $ctrl.onChangeModelValue | json}}</p>
+    <p><strong>onBlur counter:</strong> {{ $ctrl.onBlurCounter }}</p>
+    <p><strong>onFocus counter:</strong> {{ $ctrl.onFocusCounter }}</p>
+</div>
 <oui-select name="country"
     model="$ctrl.modelOnChange"
     placeholder="Select a country..."
@@ -124,7 +140,6 @@
     required
     group-by="$ctrl.groupByFirstLetter"
     match="name"
-    data-align="start"
     on-change="$ctrl.onChange(modelValue)"
     on-blur="$ctrl.onBlur()"
     on-focus="$ctrl.onFocus()">
@@ -133,31 +148,26 @@
         Code: <span ng-bind="$item.code"></span>
     </small>
 </oui-select>
-<div class="oui-doc-preview-only">
-    <p><strong>Last onChange value:</strong> {{ $ctrl.onChangeModelValue | json}}</p>
-    <p><strong>onBlur counter:</strong> {{ $ctrl.onBlurCounter }}</p>
-    <p><strong>onFocus counter:</strong> {{ $ctrl.onFocusCounter }}</p>
-</div>
-
 ```
 
 ## API
 
-| Attribute     | Type      | Binding   | One-time binding  | Values            | Default   | Description
-| ----          | ----      | ----      | ----              | ----              | ----      | ----
-| `model`       | object    | =         | no                | n/a               | n/a       | model bound to component
-| `name`        | string    | @?        | yes               | n/a               | n/a       | name of the form component
-| `title`       | string    | @?        | yes               | n/a               | n/a       | title attribute of the component
-| `placeholder` | string    | @?        | yes               | n/a               | n/a       | placeholder displayed when model is undefined
-| `match`       | string    | @?        | no                | n/a               | n/a       | property of item to show as selected item
-| `items`       | array     | <         | no                | n/a               | n/a       | array used to populate the list
-| `disable-items`| function | &         | no                | n/a               | n/a       | predicate to determine items to disable
-| `required`    | boolean   | <?        | no                | `true`, `false`   | `false`   | define if the field is required
-| `disabled`    | boolean   | <?        | no                | `true`, `false`   | `false`   | define if the field is disabled
-| `group-by`    | function  | <?        | no                | n/a               | n/a       | function taking an item as parameter and returning the group name as as string
-| `on-blur`     | function  | &         | no                | n/a               | n/a       | called focus is lost
-| `on-focus`    | function  | &         | no                | n/a               | n/a       | called on focus
-| `on-change`   | function  | &         | no                | n/a               | n/a       | handler triggered when value has changed
+| Attribute         | Type      | Binding   | One-time binding  | Values            | Default   | Description
+| ----              | ----      | ----      | ----              | ----              | ----      | ----
+| `model`           | object    | =         | no                | n/a               | n/a       | model bound to component
+| `name`            | string    | @?        | yes               | n/a               | n/a       | name of the form component
+| `title`           | string    | @?        | yes               | n/a               | n/a       | title of the form component
+| `placeholder`     | string    | @?        | yes               | n/a               | n/a       | placeholder displayed when model is undefined
+| `match`           | string    | @?        | no                | n/a               | n/a       | property of item to show as selected item
+| `items`           | array     | <         | no                | n/a               | n/a       | array used to populate the list
+| `disable-items`   | function  | &         | no                | n/a               | n/a       | predicate to determine items to disable
+| `required`        | boolean   | <?        | no                | `true`, `false`   | `false`   | define if the field is required
+| `disabled`        | boolean   | <?        | no                | `true`, `false`   | `false`   | define if the field is disabled
+| `multiple`        | boolean   | <?        | yes               | `true`, `false`   | `false`   | allow multiple selection
+| `group-by`        | function  | <?        | no                | n/a               | n/a       | function taking an item as parameter and returning the group name as as string
+| `on-blur`         | function  | &         | no                | n/a               | n/a       | called focus is lost
+| `on-focus`        | function  | &         | no                | n/a               | n/a       | called on focus
+| `on-change`       | function  | &         | no                | n/a               | n/a       | handler triggered when value has changed
 
 #### Deprecated
 
diff --git a/packages/oui-select/src/index.spec.js b/packages/oui-select/src/index.spec.js
index 604f4ed2..e637ac46 100644
--- a/packages/oui-select/src/index.spec.js
+++ b/packages/oui-select/src/index.spec.js
@@ -19,6 +19,8 @@ describe("ouiSelect", () => {
 
     const getContainer = element => element[0].querySelector(".ui-select-container");
     const getDropdownButton = element => element[0].querySelector(".ui-select-match");
+    const getMultipleDropdownButton = element => element[0].querySelector(".ui-select-match-container");
+    const getMultipleMatchItem = element => element[0].querySelectorAll(".ui-select-match-item");
     const getDropdown = element => element[0].querySelector(".ui-select-choices-content");
     const getFocusser = element => element[0].querySelector(".ui-select-focusser");
     const getItemsGroups = element => element[0].querySelectorAll(".ui-select-choices-group");
@@ -39,7 +41,6 @@ describe("ouiSelect", () => {
                     placeholder="${placeholder}"
                     items="$ctrl.countries"
                     match="name">
-                    <span ng-bind="$item.name"></span>
                 </oui-select>`, {
                 countries: data
             });
@@ -58,7 +59,6 @@ describe("ouiSelect", () => {
                     placeholder="Select a country..."
                     items="$ctrl.countries"
                     match="name">
-                    <span ng-bind="$item.name"></span>
                 </oui-select>`, {
                 countries: data
             });
@@ -140,6 +140,73 @@ describe("ouiSelect", () => {
             });
         });
 
+        describe("Multiple select", () => {
+            it("should not close dropdown when an item is selected", () => {
+                const element = TestUtils.compileTemplate(`
+                    <oui-select name="country"
+                        model="$ctrl.country"
+                        title="Select a country"
+                        placeholder="Select a country..."
+                        items="$ctrl.countries"
+                        match="name"
+                        multiple>
+                    </oui-select>`, {
+                    countries: data
+                });
+
+                const $triggerButton = angular.element(getMultipleDropdownButton(element));
+
+                expect($triggerButton.attr("aria-expanded")).toBe("false");
+
+                // Open the dropdown
+                $triggerButton.triggerHandler("click");
+
+                // Select 5th element and check if it's highlighted.
+                const $itemButton = angular.element(getDropdownItem(element, 4)); // eslint-disable-line no-magic-numbers
+                $itemButton.triggerHandler("click");
+
+                // The dropdown should stay opened.
+                expect($triggerButton.attr("aria-expanded")).toBe("true");
+            });
+
+            it("should remove item selected", () => {
+                const element = TestUtils.compileTemplate(`
+                    <oui-select name="country"
+                        model="$ctrl.country"
+                        title="Select a country"
+                        placeholder="Select a country..."
+                        items="$ctrl.countries"
+                        match="name"
+                        multiple>
+                    </oui-select>`, {
+                    countries: data
+                });
+
+                const $triggerButton = angular.element(getMultipleDropdownButton(element));
+
+                expect($triggerButton.attr("aria-expanded")).toBe("false");
+
+                // Open the dropdown
+                $triggerButton.triggerHandler("click");
+
+                // Select 5th element and check if it's highlighted.
+                let $itemButton = angular.element(getDropdownItem(element, 4)); // eslint-disable-line no-magic-numbers
+                $itemButton.triggerHandler("click");
+
+                $itemButton = angular.element(getDropdownItem(element, 4)); // eslint-disable-line no-magic-numbers
+                $itemButton.triggerHandler("click");
+
+                // The dropdown should stay opened.
+                let matchItems = getMultipleMatchItem(element);
+                expect(matchItems.length).toBe(2); // eslint-disable-line no-magic-numbers
+
+                angular.element(matchItems[0].querySelector(".oui-chip__close")).triggerHandler("click");
+                matchItems = getMultipleMatchItem(element);
+
+                expect(matchItems.length).toBe(1); // eslint-disable-line no-magic-numbers
+            });
+        });
+
         describe("Not grouped", () => {
             it("should display all the choices (objectArray)", () => {
                 const element = TestUtils.compileTemplate(`
@@ -149,7 +216,6 @@ describe("ouiSelect", () => {
                         placeholder="Select a country..."
                         items="$ctrl.countries"
                         match="name">
-                        <span ng-bind="$item.name"></span>
                     </oui-select>`, {
                     countries: data
                 });
@@ -171,7 +237,6 @@ describe("ouiSelect", () => {
                         title="Select a country"
                         model="$ctrl.country"
                         items="$ctrl.array">
-                        <span ng-bind="$item"></span>
                     </oui-select>`, {
                     array: stringArray
                 });
@@ -198,7 +263,6 @@ describe("ouiSelect", () => {
                         items="$ctrl.countries"
                         match="name"
                         group-by="$ctrl.groupByFirstLetter">
-                        <span ng-bind="$item.name"></span>
                     </oui-select>`, {
                     countries: data,
                     groupByFirstLetter
@@ -230,7 +294,6 @@ describe("ouiSelect", () => {
                         items="$ctrl.countries"
                         match="name"
                         on-blur="$ctrl.onBlur()">
-                        <span ng-bind="$item.name"></span>
                     </oui-select>`, {
                     onBlur
                 });
@@ -238,6 +301,10 @@ describe("ouiSelect", () => {
                 $timeout.flush();
 
                 angular.element(getFocusser(element)).triggerHandler("blur");
+
+                // Need to flush again for the callback
+                $timeout.flush();
+
                 expect(onBlur).toHaveBeenCalled();
             });
         });
@@ -253,7 +320,6 @@ describe("ouiSelect", () => {
                         items="$ctrl.countries"
                         match="name"
                         on-focus="$ctrl.onFocus()">
-                        <span ng-bind="$item.name"></span>
                     </oui-select>`, {
                     onFocus
                 });
@@ -261,6 +327,10 @@ describe("ouiSelect", () => {
                 $timeout.flush();
 
                 angular.element(getFocusser(element)).triggerHandler("focus");
+
+                // Need to flush again for the callback
+                $timeout.flush();
+
                 expect(onFocus).toHaveBeenCalled();
             });
         });
@@ -276,7 +346,6 @@ describe("ouiSelect", () => {
                         items="$ctrl.countries"
                         match="name"
                         on-change="$ctrl.onChange(modelValue)">
-                        <span ng-bind="$item.name"></span>
                     </oui-select>`, {
                     countries: data,
                     onChange
@@ -305,13 +374,12 @@ describe("ouiSelect", () => {
                 const disableCountry = (item) => item.name === data[3].name;
                 const element = TestUtils.compileTemplate(`
                     <oui-select name="country"
-                                model="$ctrl.country"
-                                title="Select a country"
-                                placeholder="Select a country..."
-                                items="$ctrl.countries"
-                                disable-items="$ctrl.disableCountry($item)"
-                                match="name">
-                        <span ng-bind="$item.name"></span>
+                        model="$ctrl.country"
+                        title="Select a country"
+                        placeholder="Select a country..."
+                        items="$ctrl.countries"
+                        disable-items="$ctrl.disableCountry($item)"
+                        match="name">
                     </oui-select>`, {
                     countries: data,
                     disableCountry
@@ -329,13 +397,12 @@ describe("ouiSelect", () => {
                 const disableCountry = (item) => item.code === "";
                 const element = TestUtils.compileTemplate(`
                     <oui-select name="country"
-                                model="$ctrl.country"
-                                title="Select a country"
-                                placeholder="Select a country..."
-                                items="$ctrl.countries"
-                                disable-items="$ctrl.disableCountry($item)"
-                                match="name">
-                        <span ng-bind="$item.name"></span>
+                        model="$ctrl.country"
+                        title="Select a country"
+                        placeholder="Select a country..."
+                        items="$ctrl.countries"
+                        disable-items="$ctrl.disableCountry($item)"
+                        match="name">
                     </oui-select>`, {
                     countries,
                     disableCountry
diff --git a/packages/oui-select/src/select.controller.js b/packages/oui-select/src/select.controller.js
index 76fcc69a..bb42a48e 100644
--- a/packages/oui-select/src/select.controller.js
+++ b/packages/oui-select/src/select.controller.js
@@ -14,11 +14,17 @@ export default class {
     $onInit () {
         addBooleanParameter(this, "disabled");
         addBooleanParameter(this, "required");
+        addBooleanParameter(this, "multiple");
         addBooleanParameter(this, "searchable");
     }
 
     $postLink () {
         const $htmlContent = angular.element(this.htmlContent);
+
+        if (this.multiple) {
+            $htmlContent.attr("multiple", true);
+        }
+
         this.$compile($htmlContent)(this.$scope, (clone) => {
             this.$element.append(clone);
         });
@@ -28,11 +34,14 @@ export default class {
                 .removeAttr("name")
                 .removeAttr("title");
 
-            this.$select.focusser
-                .on("blur", () => this.onUiSelectBlur())
-                .on("focus", () => this.onUiSelectFocus());
+            if (this.$select.focusInput) {
+                this.$select.focusInput
+                    .on("blur", () => this.onUiSelectBlur())
+                    .on("focus", () => this.onUiSelectFocus());
+            }
         });
 
+        // For focus from oui-field label
         this.unregisterFocus = this.$scope.$on("oui:focus", () => this.$select.setFocus());
     }
 
@@ -42,21 +51,71 @@ export default class {
         }
     }
 
-    onUiSelectBlur () {
-        if (this.fieldCtrl) {
-            this.fieldCtrl.hasFocus = false;
-            this.fieldCtrl.checkControlErrors(this.$select.$element[0], this.name);
+    removeChoice (e, index, callback) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        // Call $selectMultiple.removeChoice of ui-select
+        callback(index, this);
+    }
+
+    onUiSelectClick () {
+        if (!this.$select.focus) {
+            this.$select.setFocus();
         }
 
-        this.onBlur();
+        // The plugin toggle open/close by itself
+        this.$select.activate();
     }
 
-    onUiSelectFocus () {
-        if (this.fieldCtrl) {
-            this.fieldCtrl.hasFocus = true;
-            this.fieldCtrl.hideErrors(this.$select.$element[0], this.name);
+    onUiSelectChange (modelValue) {
+        this.onChange({ modelValue });
+
+        // Fix focus input (unfocus on select in multiple mode)
+        if (this.multiple) {
+            this.$select.setFocus();
         }
+    }
+
+    onUiSelectBlur () {
+        // Fix focus property (no focusser in multiple mode)
+        this.$select.focus = false;
+
+        // Need $timeout to get the refreshed value of $select.open from UI Select
+        this.$timeout(() => {
+            // Since UI Select toggle focus between focusInput and searchInput
+            // We need to check if the blur event is the one we really need (only in single mode)
+            if (this.multiple || !this.$select.open) {
+                if (this.fieldCtrl) {
+                    this.fieldCtrl.hasFocus = false;
+                    this.fieldCtrl.checkControlErrors(this.$select.$element[0], this.name);
+                }
+
+                this.onBlur();
+            } else {
+                this.isOpen = true;
+            }
+        });
+    }
 
-        this.onFocus();
+    onUiSelectFocus () {
+        // Fix focus property (no focusser in multiple mode)
+        this.$select.focus = true;
+
+        // Need $timeout to get the refreshed value of $select.open from UI Select
+        this.$timeout(() => {
+            // Since UI Select toggle focus between focusInput and searchInput
+            // We need to check if the focus event is the one we really need (only in single mode)
+            if (this.multiple || this.$select.open || (!this.$select.open && !this.isOpen)) {
+                if (this.fieldCtrl) {
+                    this.fieldCtrl.hasFocus = true;
+                    this.fieldCtrl.hideErrors(this.$select.$element[0], this.name);
+                }
+
+                this.onFocus();
+            } else {
+                this.isOpen = false;
+            }
+        });
     }
 }
diff --git a/packages/oui-select/src/select.directive.js b/packages/oui-select/src/select.directive.js
index 20aa8d0e..5ffadfd3 100644
--- a/packages/oui-select/src/select.directive.js
+++ b/packages/oui-select/src/select.directive.js
@@ -20,6 +20,7 @@ export default () => ({
         groupBy: "<?",
         required: "<?",
         disabled: "<?",
+        multiple: "<?",
         searchable: "<?",
         onBlur: "&",
         onFocus: "&",
diff --git a/packages/oui-select/src/select.html b/packages/oui-select/src/select.html
index 6b388bf4..14dfebfb 100644
--- a/packages/oui-select/src/select.html
+++ b/packages/oui-select/src/select.html
@@ -1,14 +1,17 @@
 <ui-select class="oui-field__component"
-        ng-attr-name="{{::$ctrl.name}}"
-        ng-attr-title="{{::$ctrl.title}}"
-        ng-init="$ctrl.$select = $select"
-        ng-model="$ctrl.model"
-        ng-required="$ctrl.required && !$select.open"
-        ng-disabled="$ctrl.disabled"
-        on-select="$ctrl.onChange({ modelValue: $model })"
-        search-enabled="{{::!!$ctrl.searchable}}"
-        theme="oui-ui-select">
-    <ui-select-match placeholder="{{::$ctrl.placeholder}}"></ui-select-match>
+    ng-attr-name="{{::$ctrl.name}}"
+    ng-attr-title="{{::$ctrl.title}}"
+    ng-init="$ctrl.$select = $select"
+    ng-model="$ctrl.model"
+    ng-required="$ctrl.required && !$select.open"
+    ng-disabled="$ctrl.disabled"
+    close-on-select="{{!$ctrl.multiple}}"
+    on-select="$ctrl.onUiSelectChange($model)"
+    search-enabled="{{::!!$ctrl.searchable}}"
+    theme="oui-ui-select">
+    <ui-select-match placeholder="{{::$ctrl.placeholder}}">
+        <span ng-bind-html="$item[$ctrl.match] || $item"></span>
+    </ui-select-match>
     <ui-select-choices repeat="$item in $ctrl.items | filter: $select.search track by $index"
         ui-disable-choice="$ctrl.disableItems({ $item: $item })">
         <span ng-bind-html="($item[$ctrl.match] || $item) | highlight: $select.search"></span>
diff --git a/packages/oui-select/src/templates/match-multiple.html b/packages/oui-select/src/templates/match-multiple.html
index 04def96c..31447d1d 100644
--- a/packages/oui-select/src/templates/match-multiple.html
+++ b/packages/oui-select/src/templates/match-multiple.html
@@ -1,16 +1,22 @@
 <span class="ui-select-match">
-    <span ng-repeat="$item in $select.selected track by $index">
-        <span class="ui-select-match-item" type="button"
+    <span class="ui-select-placeholder"
+        ng-hide="!$select.isEmpty() || ($select.searchEnabled && $select.open)"
+        ng-bind="::$select.placeholder">
+    </span>
+    <span class="ui-select-match-items">
+        <button type="button" class="oui-chip oui-chip_closable ui-select-match-item"
+            ng-repeat="$item in $select.selected track by $index"
             ng-disabled="$select.disabled"
-            ng-click="$selectMultiple.activeMatchIndex = $index;"
-            ng-class="{
-                'btn-primary': $selectMultiple.activeMatchIndex === $index,
-                'select-locked': $select.isLocked(this, $index)
-            }"
             ui-select-sort="$select.selected"
             tabindex="-1">
-            <span class="ui-select-match-close" ng-hide="$select.disabled" ng-click="$selectMultiple.removeChoice($index)">&nbsp;&times;</span>
             <span uis-transclude-append></span>
-        </span>
+            <span class="oui-chip__close"
+                ng-hide="$select.disabled"
+                ng-click="$ctrl.removeChoice($event, $index, $selectMultiple.removeChoice)"
+                tabindex="-1">
+                <span class="oui-icon oui-icon-close_thin" aria-hidden="true"></span>
+            </span>
+        </button>
     </span>
+    <span class="oui-icon oui-icon-chevron-down"></span>
 </span>
diff --git a/packages/oui-select/src/templates/match.html b/packages/oui-select/src/templates/match.html
index 4cff7035..3c6d94a4 100644
--- a/packages/oui-select/src/templates/match.html
+++ b/packages/oui-select/src/templates/match.html
@@ -1,10 +1,11 @@
 <button class="ui-select-match"
     aria-haspopup="true"
     aria-expanded="{{$select.open}}"
+    aria-owns="ui-select-choices-{{ $select.generatedId }}"
     ng-class="{ 'ui-select-match_focus': $select.focus }"
     ng-hide="$select.searchEnabled && $select.open"
     ng-disabled="$select.disabled"
-    ng-click="$select.activate()"
+    ng-click="$ctrl.onUiSelectClick()"
     tabindex="-1"
     type="button">
     <span class="ui-select-toggle"
diff --git a/packages/oui-select/src/templates/select-multiple.html b/packages/oui-select/src/templates/select-multiple.html
index bc470935..097469f2 100644
--- a/packages/oui-select/src/templates/select-multiple.html
+++ b/packages/oui-select/src/templates/select-multiple.html
@@ -1,21 +1,27 @@
-<div class="oui-ui-select ui-select-container ui-select-multiple"
+<div class="oui-ui-select oui-ui-select_multiple ui-select-container ui-select-multiple"
     ng-class="{ 'ui-select-container_open': $select.open }">
-    <input class="ui-select-search"
+    <button class="ui-select-match-container"
+        aria-haspopup="true"
         aria-expanded="{{$select.open}}"
-        aria-label="{{$select.baseTitle}}"
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="off"
-        ng-click="$select.activate()"
+        aria-owns="ui-select-choices-{{ $select.generatedId }}"
+        ng-class="{ 'ui-select-match-container_focus': $select.focus }"
+        ng-click="$ctrl.onUiSelectClick()"
         ng-disabled="$select.disabled"
-        ng-model="$select.search"
-        placeholder="{{::$select.getPlaceholder()}}"
-        role="combobox"
-        spellcheck="false"
-        tabindex="-1"
-        type="search">
-    <div class="ui-select-match"></div><!-- replaced by match-multiple.html -->
-    <div class="ui-select-dropdown">
+        tabindex="-1">
+        <span class="ui-select-match"></span><!-- replaced by match-multiple.html -->
+        <input class="ui-select-search"
+            aria-label="{{$select.baseTitle}}"
+            autocomplete="off"
+            autocorrect="off"
+            autocapitalize="off"
+            ng-class="{ 'ui-select-search_hidden': !$select.searchEnabled || !$select.open }"
+            ng-disabled="$select.disabled"
+            ng-model="$select.search"
+            placeholder="{{::$select.placeholder}}"
+            type="search">
+    </button>
+    <div class="ui-select-dropdown"
+        ng-show="$select.items.length > 0">
         <div class="ui-select-header"></div><!-- replaced by header.html -->
         <div class="ui-select-choices"></div><!-- replaced by choices.html -->
         <div class="ui-select-footer"></div><!-- replaced by footer.html -->
diff --git a/packages/oui-select/src/templates/select.html b/packages/oui-select/src/templates/select.html
index eef5eea9..6cb7cea6 100644
--- a/packages/oui-select/src/templates/select.html
+++ b/packages/oui-select/src/templates/select.html
@@ -1,9 +1,8 @@
-<div class="oui-ui-select ui-select-container"
+<div class="oui-ui-select oui-ui-select_single ui-select-container"
     ng-class="{ 'ui-select-container_open': $select.open }">
     <input class="ui-select-search"
         aria-expanded="{{$select.open}}"
         aria-label="{{$select.baseTitle}}"
-        aria-owns="ui-select-choices-{{ $select.generatedId }}"
         autocomplete="off"
         autocorrect="off"
         autocapitalize="off"
@@ -13,7 +12,8 @@
         tabindex="-1"
         type="search">
     <div class="ui-select-match"></div><!-- replaced by match.html -->
-    <div class="ui-select-dropdown">
+    <div class="ui-select-dropdown"
+        ng-show="$select.items.length > 0">
         <div class="ui-select-header"></div><!-- replaced by header.html -->
         <div class="ui-select-choices"></div><!-- replaced by choices.html -->
         <div class="ui-select-footer"></div><!-- replaced by footer.html -->

From bc012570b90a9b1de9995630c6ce66892aafe12c Mon Sep 17 00:00:00 2001
From: Axel Peter <15101925+AxelPeter@users.noreply.github.com>
Date: Fri, 21 Dec 2018 14:26:48 +0100
Subject: [PATCH 02/14] feat(oui-password): add password component (#335)

---
 index.html                                    |  14 -
 packages/oui-angular/src/index.js             |   2 +
 packages/oui-angular/src/index.spec.js        |   1 +
 packages/oui-field/src/field.controller.js    |   2 +-
 packages/oui-field/src/field.provider.js      |   2 +
 packages/oui-password/README.md               | 143 ++++++++++
 packages/oui-password/package.json            |   7 +
 packages/oui-password/src/index.js            |  12 +
 packages/oui-password/src/index.spec.js       | 250 ++++++++++++++++++
 .../oui-password/src/password.component.js    |  26 ++
 .../oui-password/src/password.controller.js   |  48 ++++
 packages/oui-password/src/password.html       |  55 ++++
 .../oui-password/src/password.provider.js     |  33 +++
 .../src/rule/password-rule.component.js       |  16 ++
 .../src/rule/password-rule.controller.js      |  38 +++
 .../oui-password/src/rule/password-rule.html  |  12 +
 .../strength/password-strength.component.js   |  15 ++
 .../strength/password-strength.controller.js  |  65 +++++
 .../src/strength/password-strength.html       |  10 +
 19 files changed, 736 insertions(+), 15 deletions(-)
 delete mode 100644 index.html
 create mode 100644 packages/oui-password/README.md
 create mode 100644 packages/oui-password/package.json
 create mode 100644 packages/oui-password/src/index.js
 create mode 100644 packages/oui-password/src/index.spec.js
 create mode 100644 packages/oui-password/src/password.component.js
 create mode 100644 packages/oui-password/src/password.controller.js
 create mode 100644 packages/oui-password/src/password.html
 create mode 100644 packages/oui-password/src/password.provider.js
 create mode 100644 packages/oui-password/src/rule/password-rule.component.js
 create mode 100644 packages/oui-password/src/rule/password-rule.controller.js
 create mode 100644 packages/oui-password/src/rule/password-rule.html
 create mode 100644 packages/oui-password/src/strength/password-strength.component.js
 create mode 100644 packages/oui-password/src/strength/password-strength.controller.js
 create mode 100644 packages/oui-password/src/strength/password-strength.html

diff --git a/index.html b/index.html
deleted file mode 100644
index fef47ab0..00000000
--- a/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!doctype html>
-<html data-ng-app="preview" data-ng-strict-di data-ng-cloak lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="x-ua-compatible", content="ie=edge">
-    <title>Preview</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
-  </head>
-  <body>
-    <preview></preview>
-    <script src="./<%= assets.chunks['preview'].entry %>"></script>
-    <script src="./<%= assets.chunks['component'].entry %>"></script>
-  </body>
-</html>
diff --git a/packages/oui-angular/src/index.js b/packages/oui-angular/src/index.js
index 62b6ec9d..04abcbef 100644
--- a/packages/oui-angular/src/index.js
+++ b/packages/oui-angular/src/index.js
@@ -24,6 +24,7 @@ import Navbar from "@ovh-ui/oui-navbar";
 import Numeric from "@ovh-ui/oui-numeric";
 import PageHeader from "@ovh-ui/oui-page-header";
 import Pagination from "@ovh-ui/oui-pagination";
+import Password from "@ovh-ui/oui-password";
 import Popover from "@ovh-ui/oui-popover";
 import Progress from "@ovh-ui/oui-progress";
 import Radio from "@ovh-ui/oui-radio";
@@ -68,6 +69,7 @@ export default angular
         Numeric,
         PageHeader,
         Pagination,
+        Password,
         Popover,
         Progress,
         Radio,
diff --git a/packages/oui-angular/src/index.spec.js b/packages/oui-angular/src/index.spec.js
index d62f271c..a75ee49c 100644
--- a/packages/oui-angular/src/index.spec.js
+++ b/packages/oui-angular/src/index.spec.js
@@ -26,6 +26,7 @@ loadTests(require.context("../../oui-navbar/src/", true, /.*((\.spec)|(index))$/
 loadTests(require.context("../../oui-numeric/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-page-header/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-pagination/src/", true, /.*((\.spec)|(index))$/));
+loadTests(require.context("../../oui-password/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-popover/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-progress/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-radio/src/", true, /.*((\.spec)|(index))$/));
diff --git a/packages/oui-field/src/field.controller.js b/packages/oui-field/src/field.controller.js
index 88eff445..4d1fd7e2 100644
--- a/packages/oui-field/src/field.controller.js
+++ b/packages/oui-field/src/field.controller.js
@@ -192,7 +192,7 @@ export default class FieldController {
     }
 
     getMessageString (errorName) {
-        return (this.errorMessages && this.errorMessages[errorName]) || this.ouiFieldConfiguration.translations.errors[errorName];
+        return (this.errorMessages && this.errorMessages[errorName]) || this.ouiFieldConfiguration.translations.errors[errorName] || this.ouiFieldConfiguration.translations.errors.invalid;
     }
 
     getErrorMessage (errorName) {
diff --git a/packages/oui-field/src/field.provider.js b/packages/oui-field/src/field.provider.js
index 738e1d56..c215c568 100644
--- a/packages/oui-field/src/field.provider.js
+++ b/packages/oui-field/src/field.provider.js
@@ -4,9 +4,11 @@ export default class {
     constructor () {
         this.translations = {
             errors: {
+                invalid: "Invalid field.",
                 required: "Mandatory.",
                 number: "Invalid number.",
                 email: "Invalid email.",
+                password: "Invalid password.",
                 min: "Too low ({{min}} min).",
                 max: "Too high ({{max}} max).",
                 minlength: "Too short ({{minlength}} characters min).",
diff --git a/packages/oui-password/README.md b/packages/oui-password/README.md
new file mode 100644
index 00000000..4647e5f0
--- /dev/null
+++ b/packages/oui-password/README.md
@@ -0,0 +1,143 @@
+# oui-password
+
+<component-status cx-design="complete" ux="rc"></component-status>
+
+## Usage
+
+### Basic
+
+```html:preview
+<oui-password model="$ctrl.modelBasic"></oui-password>
+```
+
+### Placeholder
+
+```html:preview
+<oui-password model="$ctrl.modelPlaceholder" placeholder="Password"></oui-password>
+```
+
+### Disabled
+
+```html:preview
+<oui-password model="$ctrl.modelDisabled" disabled></oui-password>
+```
+
+### Form validation
+
+```html:preview
+<form name="form" novalidate>
+    <oui-field label="Password" size="xl">
+        <oui-password model="$ctrl.modelForm" 
+            minlength="4"
+            maxlength="16"
+            pattern="^[a-zA-Z0-9]+$"
+            required>
+        </oui-password>
+    </oui-field>
+</form>
+```
+
+### Password rules & strength
+
+<oui-message type="warning">
+    The component doesn't include any password strength estimator. You can use one like <a href="https://github.com/dropbox/zxcvbn">zxcvbn</a> to provide a score, like in this example.
+</oui-message>
+
+```html:preview
+<form name="form2" novalidate>
+    <oui-field label="Password" size="xl">
+        <oui-password model="$ctrl.modelPasswordRules" on-change="$ctrl.getPasswordScore(modelValue)">
+            <oui-password-strength score="$ctrl.passwordScore"></oui-password-strength>
+            <oui-password-rule validator="$ctrl.checkPasswordLength(modelValue)">
+                Must contain between 8 and 30 characters
+            </oui-password-rule>
+            <oui-password-rule pattern="[0-9]+">
+                Have at least one number
+            </oui-password-rule>
+            <oui-password-rule pattern="[A-Z]+">
+                Have at least capital letter
+            </oui-password-rule>
+        </oui-password>
+    </oui-field>
+</form>
+```
+
+#### Custom strength feedback
+
+The feedback of password strength can be overridden by adding your custom feedback in `oui-password-strength`.
+It can also be globally changed with `ouiPasswordProvider` (see **Configuration** below).
+
+```html:preview
+<oui-password model="$ctrl.modelCustomFeedback" on-change="$ctrl.getPasswordScore(modelValue)">
+    <oui-password-strength score="$ctrl.passwordScore" ng-switch="$ctrl.passwordScore">
+        <span ng-switch-when="4">Score 4: Etiam volutpat congue odio imperdiet tincidunt.</span>
+        <span ng-switch-when="3">Score 3: Suspendisse vehicula ut nisl non laoreet.</span>
+        <span ng-switch-when="2">Score 2: Curabitur malesuada mi lectus, eget pharetra erat malesuada sed.</span>
+        <span ng-switch-when="1">Score 1: Vestibulum pulvinar congue lacus sed ultricies.</span>
+        <span ng-switch-default="">Score 0: Lorem ipsum dolor sit amet.</span>
+    </oui-password-strength>
+</oui-password>
+```
+
+#### Score scale
+
+`oui-password-strength`'s score scale is based on <a href="https://github.com/dropbox/zxcvbn#usage">zxcvbn</a> scale:
+
+* `0`: Risky password,
+* `1`: Bad password,
+* `2`: Weak password,
+* `3`: Good password,
+* `4`: Strong password
+
+## API
+
+### oui-password
+
+| Attribute     | Type                  | Binding   | One-time binding  | Values                | Default   | Description
+| ----          | ----                  | ----      | ----              | ----                  | ----      | ----
+| `model`       | string                | =         | no                | n/a                   | n/a       | model bound to component
+| `id`          | string                | @?        | yes               | n/a                   | n/a       | id attribute of the input
+| `name`        | string                | @?        | yes               | n/a                   | n/a       | name attritebu of the input
+| `placeholder` | string                | @?        | yes               | `true`, `false`       | `false`   | placeholder text
+| `disabled`    | boolean               | <?        | no                | n/a                   | n/a       | disabled flag
+| `maxlength`   | number                | <?        | yes               | n/a                   | n/a       | max length of the model value
+| `minlength`   | number                | <?        | yes               | n/a                   | n/a       | min length of the model value
+| `pattern`     | string&lt;regexp&gt;  | @?        | yes               | n/a                   | n/a       | pattern of the model value
+| `required`    | boolean               | <?        | no                | `true`, `false`       | `false`   | required flag
+| `on-change`   | function              | &         | no                | n/a                   | n/a       | handler triggered when value has changed
+
+### oui-rule
+
+| Attribute     | Type                  | Binding   | One-time binding  | Values                | Default   | Description
+| ----          | ----                  | ----      | ----              | ----                  | ----      | ----
+| `pattern`     | string&lt;regexp&gt;  | @?        | no                | n/a                   | n/a       | pattern of the model value
+| `validator`   | function              | &         | no                | n/a                   | n/a       | validator function to test the password value; should return a boolean
+
+### oui-strength
+
+| Attribute     | Type                  | Binding   | One-time binding  | Values                | Default   | Description
+| ----          | ----                  | ----      | ----              | ----                  | ----      | ----
+| `score`       | number                | <?        | no                | See **Score scale**   | n/a       | score provided by a password strength estimator
+
+## Configuration
+
+The password translations can be globally configured with a provider.
+
+```js
+angular.module("myModule", [
+    "oui.password"
+]).config(ouiPasswordConfigurationProvider => {
+    ouiPasswordConfigurationProvider.setTranslations({
+        allRulesValidLabel: "All password rules are met.",
+        ariaHidePasswordLabel: "Hide password",
+        ariaShowPasswordLabel: "Show password",
+        ariaValidRuleLabel: "Valid rule.",
+        ariaInvalidRuleLabel: "Invalid rule.",
+        riskyPasswordLabel: "Risky password.",
+        badPasswordLabel: "Bad password.",
+        weakPasswordLabel: "Weak password.",
+        goodPasswordLabel: "Good password.",
+        strongPasswordLabel: "Strong password."
+    });
+});
+```
diff --git a/packages/oui-password/package.json b/packages/oui-password/package.json
new file mode 100644
index 00000000..e0f266b4
--- /dev/null
+++ b/packages/oui-password/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "@ovh-ui/oui-password",
+  "version": "1.0.0",
+  "main": "./src/index.js",
+  "license": "BSD-3-Clause",
+  "author": "OVH SAS"
+}
diff --git a/packages/oui-password/src/index.js b/packages/oui-password/src/index.js
new file mode 100644
index 00000000..967eaed3
--- /dev/null
+++ b/packages/oui-password/src/index.js
@@ -0,0 +1,12 @@
+import Password from "./password.component";
+import PasswordConfigurationProvider from "./password.provider";
+import PasswordRule from "./rule/password-rule.component";
+import PasswordStrength from "./strength/password-strength.component";
+
+export default angular
+    .module("oui.password", [])
+    .component("ouiPassword", Password)
+    .component("ouiPasswordRule", PasswordRule)
+    .component("ouiPasswordStrength", PasswordStrength)
+    .provider("ouiPasswordConfiguration", PasswordConfigurationProvider)
+    .name;
diff --git a/packages/oui-password/src/index.spec.js b/packages/oui-password/src/index.spec.js
new file mode 100644
index 00000000..abab4053
--- /dev/null
+++ b/packages/oui-password/src/index.spec.js
@@ -0,0 +1,250 @@
+describe("ouiPassword", () => {
+    let $timeout;
+    let TestUtils;
+
+    const getInput = (element) => angular.element(element[0].querySelector(".oui-password__input"));
+    const getStrengthMeter = (element) => angular.element(element[0].querySelector(".oui-progress"));
+    const getVisibilityButton = (element) => angular.element(element[0].querySelector(".oui-password__visibility"));
+
+    beforeEach(angular.mock.module("oui.password"));
+    beforeEach(angular.mock.module("oui.password.configuration"));
+    beforeEach(angular.mock.module("oui.test-utils"));
+
+    beforeEach(inject((_$timeout_, _TestUtils_) => {
+        $timeout = _$timeout_;
+        TestUtils = _TestUtils_;
+    }));
+
+    describe("Provider", () => {
+        let configuration;
+        const foo = { foo: "bar" };
+
+        angular.module("oui.password.configuration", [
+            "oui.password"
+        ]).config(ouiPasswordConfigurationProvider => {
+            ouiPasswordConfigurationProvider.setTranslations(foo);
+        });
+
+        beforeEach(inject(_ouiPasswordConfiguration_ => {
+            configuration = _ouiPasswordConfiguration_;
+        }));
+
+        it("should have custom translations", () => {
+            expect(configuration.translations.foo).toEqual("bar");
+        });
+    });
+
+    describe("Component", () => {
+        describe("Basic", () => {
+            let element;
+            let input;
+            let controller;
+
+            beforeEach(() => {
+                element = TestUtils.compileTemplate('<oui-password id="foo" name="bar" model="$ctrl.model" disabled></oui-password>');
+
+                $timeout.flush();
+
+                controller = element.controller("ouiPassword");
+                input = getInput(element);
+            });
+
+            it("should have a default classname, id and name", () => {
+                expect(element.hasClass("oui-password")).toBeTruthy();
+            });
+
+            it("should move id and name on input", () => {
+                expect(element.attr("id")).toBeUndefined();
+                expect(element.attr("name")).toBeUndefined();
+
+                expect(input.attr("id")).toBe("foo");
+                expect(input.attr("name")).toBe("bar");
+            });
+
+            it("should switch between input password and text", () => {
+                const button = getVisibilityButton(element);
+
+                expect(input.attr("type")).toBe("password");
+                button.triggerHandler("click");
+                expect(input.attr("type")).toBe("text");
+                button.triggerHandler("click");
+                expect(input.attr("type")).toBe("password");
+            });
+
+            it("should have disabled input", () => {
+                expect(input.attr("disabled")).toBeDefined();
+
+                controller.disabled = false;
+                element.scope().$digest();
+                expect(input.attr("disabled")).toBeUndefined();
+
+                controller.disabled = true;
+                element.scope().$digest();
+                expect(input.attr("disabled")).toBeDefined();
+            });
+        });
+
+        describe("Validation", () => {
+            let form;
+            let element;
+            let controller;
+            let input;
+
+            beforeEach(() => {
+                form = TestUtils.compileTemplate(`
+                <form name="form">
+                    <oui-password id="foo" name="bar"
+                        model="$ctrl.model"
+                        minlength="4"
+                        maxlength="16"
+                        pattern="^[a-zA-Z0-9]+$"
+                        required>
+                    </oui-password>
+                </form>`);
+
+                $timeout.flush();
+
+                element = form.find("oui-password");
+                controller = element.controller("ouiPassword");
+                input = getInput(element);
+            });
+
+            it("should get an error 'minlength'", () => {
+                input.val("foo");
+                input.triggerHandler("input");
+
+                expect(controller.form.$error).toBeTruthy();
+                expect(controller.form.$error.minlength).toBeTruthy();
+            });
+
+            it("should get an error 'maxlength'", () => {
+                input.val("valueoversixteencharacters");
+                input.triggerHandler("input");
+
+                expect(controller.form.$error).toBeTruthy();
+                expect(controller.form.$error.maxlength).toBeTruthy();
+            });
+
+            it("should return error 'pattern'", () => {
+                input.val("!&()$");
+                input.triggerHandler("input");
+
+                expect(controller.form.$error).toBeTruthy();
+                expect(controller.form.$error.pattern).toBeTruthy();
+            });
+
+            it("should return error 'required'", () => {
+                form.triggerHandler("submit");
+
+                expect(controller.form.$error).toBeTruthy();
+                expect(controller.form.$error.required).toBeTruthy();
+            });
+        });
+
+        describe("Strength", () => {
+            const compileStrength = (score) => TestUtils.compileTemplate(`
+            <oui-password id="foo" name="bar" model="$ctrl.model">
+                <oui-password-strength score="$ctrl.score"></oui-password-strength>
+            </oui-password>`, {
+                score
+            });
+
+            it("should have a default classname", () => {
+                const element = compileStrength();
+                $timeout.flush();
+
+                const strength = element.find("oui-password-strength");
+                expect(strength.hasClass("oui-password-strength")).toBeTruthy();
+
+                const meter = getStrengthMeter(element);
+                expect(meter.hasClass("oui-progress_error")).toBeTruthy();
+            });
+
+            it("should have bad score", () => {
+                const element = compileStrength(1);
+                const meter = getStrengthMeter(element);
+                expect(meter.hasClass("oui-progress_error")).toBeTruthy();
+            });
+
+            it("should have weak score", () => {
+                const element = compileStrength(2);
+                const meter = getStrengthMeter(element);
+                expect(meter.hasClass("oui-progress_warning")).toBeTruthy();
+            });
+
+            it("should have good score", () => {
+                const element = compileStrength(3);
+                const meter = getStrengthMeter(element);
+                expect(meter.hasClass("oui-progress_success")).toBeTruthy();
+            });
+
+            it("should have strong score", () => {
+                const element = compileStrength(4);
+                const meter = getStrengthMeter(element);
+                expect(meter.hasClass("oui-progress_success")).toBeTruthy();
+            });
+        });
+
+        describe("Rule", () => {
+            let form;
+            let element;
+            let controller;
+            let input;
+
+            beforeEach(() => {
+                form = TestUtils.compileTemplate(`
+                <form name="form">
+                    <oui-password id="foo" name="bar" model="$ctrl.model">
+                        <oui-password-rule validator="$ctrl.checkPasswordLength(modelValue)">
+                            Must contain between 8 and 30 characters
+                        </oui-password-rule>
+                        <oui-password-rule pattern="[0-9]+">
+                            Have at least one number
+                        </oui-password-rule>
+                        <oui-password-rule pattern="[A-Z]+">
+                            Have at least capital letter
+                        </oui-password-rule>
+                    </oui-password>
+                </form>`, {
+                    checkPasswordLength: (password) => {
+                        const minLength = 8;
+                        const maxLength = 30;
+                        return angular.isString(password) && password.length >= minLength && password.length <= maxLength;
+                    }
+                });
+
+                $timeout.flush();
+
+                element = form.find("oui-password");
+                controller = element.controller("ouiPassword");
+                input = getInput(element);
+            });
+
+            it("should have a default classname", () => {
+                expect(element.find("oui-password-rule").hasClass("oui-password-rule")).toBeTruthy();
+            });
+
+            it("should return error 'password' for invalid rules", () => {
+                const invalidRules = 3;
+                input.val("foo");
+                input.triggerHandler("input");
+
+                expect(controller.valid).toBeFalsy();
+                expect(Object.keys(controller.errors).length).toBe(invalidRules);
+                expect(controller.form.$error).toBeTruthy();
+                expect(controller.form.$error.password).toBeTruthy();
+                expect(controller.form.$invalid).toBeTruthy();
+            });
+
+            it("should return error 'password' for invalid rules", () => {
+                const invalidRules = 0;
+                input.val("F0azeruiop");
+                input.triggerHandler("input");
+
+                expect(controller.valid).toBeTruthy();
+                expect(Object.keys(controller.errors).length).toBe(invalidRules);
+                expect(controller.form.$valid).toBeTruthy();
+            });
+        });
+    });
+});
diff --git a/packages/oui-password/src/password.component.js b/packages/oui-password/src/password.component.js
new file mode 100644
index 00000000..3575abbd
--- /dev/null
+++ b/packages/oui-password/src/password.component.js
@@ -0,0 +1,26 @@
+import controller from "./password.controller";
+import template from "./password.html";
+
+export default {
+    require: {
+        form: "?^^form"
+    },
+    bindings: {
+        model: "=",
+        id: "@?",
+        name: "@?",
+        placeholder: "@?",
+        disabled: "<?",
+        maxlength: "<?",
+        minlength: "<?",
+        pattern: "@?",
+        required: "<?",
+        onChange: "&"
+    },
+    controller,
+    template,
+    transclude: {
+        ruleSlot: "?ouiPasswordRule",
+        strengthSlot: "?ouiPasswordStrength"
+    }
+};
diff --git a/packages/oui-password/src/password.controller.js b/packages/oui-password/src/password.controller.js
new file mode 100644
index 00000000..c6bc5c44
--- /dev/null
+++ b/packages/oui-password/src/password.controller.js
@@ -0,0 +1,48 @@
+import { addBooleanParameter, addDefaultParameter } from "@ovh-ui/common/component-utils";
+
+export default class {
+    constructor ($attrs, $element, $scope, $timeout, ouiPasswordConfiguration) {
+        "ngInject";
+
+        this.$attrs = $attrs;
+        this.$element = $element;
+        this.$id = $scope.$id;
+        this.$timeout = $timeout;
+        this.translations = ouiPasswordConfiguration.translations;
+    }
+
+    toggleVisibility () {
+        this.isVisible = !this.isVisible;
+    }
+
+    updateValidity (key, isValid) {
+        if (isValid) {
+            delete this.errors[key];
+        } else {
+            this.errors[key] = true;
+        }
+
+        this.valid = !Object.keys(this.errors).length;
+        this.form[this.name].$setValidity("password", this.valid);
+    }
+
+    $onInit () {
+        addBooleanParameter(this, "disabled");
+        addBooleanParameter(this, "required");
+
+        addDefaultParameter(this, "id", `ouiPassword${this.$id}`);
+        addDefaultParameter(this, "name", `ouiPassword${this.$id}`);
+
+        this.errors = {};
+        this.isVisible = false;
+    }
+
+    $postLink () {
+        this.$timeout(() =>
+            this.$element
+                .removeAttr("id")
+                .removeAttr("name")
+                .addClass("oui-password")
+        );
+    }
+}
diff --git a/packages/oui-password/src/password.html b/packages/oui-password/src/password.html
new file mode 100644
index 00000000..baaffdae
--- /dev/null
+++ b/packages/oui-password/src/password.html
@@ -0,0 +1,55 @@
+<div class="oui-input-group oui-input-group_button">
+    <input class="oui-password__input oui-input"
+        aria-describedby="{{::$ctrl.id}}Rules"
+        ng-attr-id="{{::$ctrl.id}}"
+        ng-attr-name="{{::$ctrl.name}}"
+        ng-attr-type="{{$ctrl.isVisible ? 'text' : 'password'}}"
+        ng-attr-placeholder="{{::$ctrl.placeholder}}"
+        ng-change="$ctrl.onChange({ modelValue: $ctrl.model })"
+        ng-model="$ctrl.model"
+        ng-pattern="::$ctrl.pattern"
+        ng-disabled="$ctrl.disabled"
+        ng-maxlength="{{::$ctrl.maxlength}}"
+        ng-minlength="{{::$ctrl.minlength}}"
+        ng-required="$ctrl.required"
+        ng-blur="$ctrl.focused = false"
+        ng-focus="$ctrl.focused = true">
+
+    <!-- Visibility Buttons -->
+    <button class="oui-password__visibility oui-button" type="button"
+        ng-attr-aria-label="{{$ctrl.isVisible ? $ctrl.ariaHidePasswordLabel : $ctrl.ariaShowPasswordLabel}}"
+        ng-click="$ctrl.toggleVisibility()"
+        ng-disabled="$ctrl.disabled">
+        <span class="oui-icon"
+            ng-class="{
+                'oui-icon-eye': !$ctrl.isVisible,
+                'oui-icon-eye-blocked': $ctrl.isVisible
+            }">
+        </span>
+    </button>
+    <!-- /Visibility Buttons -->
+
+</div>
+
+<!-- Strength Meter -->
+<div class="oui-password__strength" aria-live="polite"
+    ng-show="$ctrl.focused"
+    ng-transclude="strengthSlot">
+</div>
+<!-- /Strength Meter -->
+
+<!-- Validation Rules -->
+<div class="oui-password__rules" id="{{::$ctrl.id}}Rules"
+    ng-show="$ctrl.focused && !$ctrl.valid"
+    ng-transclude="ruleSlot">
+</div>
+<!-- /Validation Rules -->
+
+<!-- Validation Success -->
+<div class="oui-password__success oui-password-rule"
+    aria-live="polite"
+    ng-show="$ctrl.focused && $ctrl.valid">
+    <span class="oui-icon oui-icon-success" aria-hidden="true"></span>
+    <span ng-bind="::$ctrl.translations.allRulesValidLabel"></span>
+</div>
+<!-- /Validation Success -->
diff --git a/packages/oui-password/src/password.provider.js b/packages/oui-password/src/password.provider.js
new file mode 100644
index 00000000..0ec2ec0f
--- /dev/null
+++ b/packages/oui-password/src/password.provider.js
@@ -0,0 +1,33 @@
+import merge from "lodash/merge";
+
+export default class {
+    constructor () {
+        this.translations = {
+            allRulesValidLabel: "All password rules are met.",
+            ariaHidePasswordLabel: "Hide password",
+            ariaShowPasswordLabel: "Show password",
+            ariaValidRuleLabel: "Valid rule.",
+            ariaInvalidRuleLabel: "Invalid rule.",
+            riskyPasswordLabel: "Risky password.",
+            badPasswordLabel: "Bad password.",
+            weakPasswordLabel: "Weak password.",
+            goodPasswordLabel: "Good password.",
+            strongPasswordLabel: "Strong password."
+        };
+    }
+
+    /**
+     * Set the translations
+     * @param {Object} translations a map of translations
+     */
+    setTranslations (translations) {
+        this.translations = merge(this.translations, translations);
+        return this;
+    }
+
+    $get () {
+        return {
+            translations: this.translations
+        };
+    }
+}
diff --git a/packages/oui-password/src/rule/password-rule.component.js b/packages/oui-password/src/rule/password-rule.component.js
new file mode 100644
index 00000000..0ae06be2
--- /dev/null
+++ b/packages/oui-password/src/rule/password-rule.component.js
@@ -0,0 +1,16 @@
+import controller from "./password-rule.controller";
+import template from "./password-rule.html";
+
+export default {
+    require: {
+        password: "^ouiPassword"
+    },
+    bindings: {
+        caption: "@?",
+        pattern: "@?",
+        validator: "&"
+    },
+    controller,
+    template,
+    transclude: true
+};
diff --git a/packages/oui-password/src/rule/password-rule.controller.js b/packages/oui-password/src/rule/password-rule.controller.js
new file mode 100644
index 00000000..21cd42c5
--- /dev/null
+++ b/packages/oui-password/src/rule/password-rule.controller.js
@@ -0,0 +1,38 @@
+export default class {
+    constructor ($attrs, $element, $scope, $timeout, ouiPasswordConfiguration) {
+        "ngInject";
+
+        this.$attrs = $attrs;
+        this.$element = $element;
+        this.$timeout = $timeout;
+        this.$scope = $scope;
+        this.translations = ouiPasswordConfiguration.translations;
+    }
+
+    setValidity (value) {
+        if (this.pattern) {
+            const regexp = new RegExp(this.pattern);
+            this.valid = regexp.test(value);
+        } else if (this.validator) {
+            this.valid = this.validator({ modelValue: value });
+        }
+
+        this.password.updateValidity(this.name, this.valid);
+    }
+
+    $onInit () {
+        this.name = `ouiPasswordRule${this.$scope.$id}`;
+    }
+
+    $postLink () {
+        this.$timeout(() =>
+            this.$element
+                .addClass("oui-password-rule")
+        );
+
+        this.$scope.$watch(
+            () => this.password.model,
+            (value) => this.setValidity(value)
+        );
+    }
+}
diff --git a/packages/oui-password/src/rule/password-rule.html b/packages/oui-password/src/rule/password-rule.html
new file mode 100644
index 00000000..b05289b8
--- /dev/null
+++ b/packages/oui-password/src/rule/password-rule.html
@@ -0,0 +1,12 @@
+<span class="oui-icon"
+    aria-label="{{
+        $ctrl.valid
+            ? $ctrl.translations.ariaValidRuleLabel
+            : $ctrl.translations.ariaInvalidRuleLabel
+    }}"
+    ng-class="{
+        'oui-icon-error': !$ctrl.valid,
+        'oui-icon-success': $ctrl.valid
+    }">
+</span>
+<span ng-transclude></span>
diff --git a/packages/oui-password/src/strength/password-strength.component.js b/packages/oui-password/src/strength/password-strength.component.js
new file mode 100644
index 00000000..7eecc820
--- /dev/null
+++ b/packages/oui-password/src/strength/password-strength.component.js
@@ -0,0 +1,15 @@
+import controller from "./password-strength.controller";
+import template from "./password-strength.html";
+
+export default {
+    require: {
+        password: "^ouiPassword"
+    },
+    bindings: {
+        label: "@?",
+        score: "<?"
+    },
+    controller,
+    template,
+    transclude: true
+};
diff --git a/packages/oui-password/src/strength/password-strength.controller.js b/packages/oui-password/src/strength/password-strength.controller.js
new file mode 100644
index 00000000..5a4bef21
--- /dev/null
+++ b/packages/oui-password/src/strength/password-strength.controller.js
@@ -0,0 +1,65 @@
+export default class {
+    constructor ($attrs, $element, $scope, $timeout, ouiPasswordConfiguration) {
+        "ngInject";
+
+        this.$attrs = $attrs;
+        this.$element = $element;
+        this.$scope = $scope;
+        this.$timeout = $timeout;
+        this.translations = ouiPasswordConfiguration.translations;
+    }
+
+    updateStrength (score) {
+        // By default, use zxcvbn score scale (from 0 to 4)
+        // Convert input score to this scale for the result
+        let currentScore = !angular.isNumber(score) ? 0 : Math.round(score);
+        currentScore = Math.max(currentScore, this.minScore);
+        currentScore = Math.min(currentScore, this.maxScore);
+
+        switch (currentScore) {
+        case this.scale.strong:
+            this.classname = "oui-progress_success";
+            this.feedback = this.translations.strongPasswordLabel;
+            break;
+        case this.scale.good:
+            this.classname = "oui-progress_success";
+            this.feedback = this.translations.goodPasswordLabel;
+            break;
+        case this.scale.weak:
+            this.classname = "oui-progress_warning";
+            this.feedback = this.translations.weakPasswordLabel;
+            break;
+        case this.scale.bad:
+            this.classname = "oui-progress_error";
+            this.feedback = this.translations.badPasswordLabel;
+            break;
+        default:
+            this.classname = "oui-progress_error";
+            this.feedback = this.translations.riskyPasswordLabel;
+            break;
+        }
+    }
+
+    $onInit () {
+        this.scale = {
+            strong: 4,
+            good: 3,
+            weak: 2,
+            bad: 1
+        };
+        this.minScore = 0;
+        this.maxScore = Object.keys(this.scale).length;
+    }
+
+    $postLink () {
+        this.$timeout(() =>
+            this.$element
+                .addClass("oui-password-strength")
+        );
+
+        this.$scope.$watch(
+            () => this.score,
+            (score) => this.updateStrength(score)
+        );
+    }
+}
diff --git a/packages/oui-password/src/strength/password-strength.html b/packages/oui-password/src/strength/password-strength.html
new file mode 100644
index 00000000..d2e23aa3
--- /dev/null
+++ b/packages/oui-password/src/strength/password-strength.html
@@ -0,0 +1,10 @@
+<p class="oui-field__helper"
+    ng-transclude>
+    <span ng-bind="$ctrl.feedback"></span>
+</p>
+<progress class="oui-progress"
+    max="{{::$ctrl.maxScore}}"
+    min="{{::$ctrl.minScore}}"
+    value="{{$ctrl.score}}"
+    ng-class="$ctrl.classname">
+</progress>

From 8683eb7d2545cd96cdd100abdc233155bf0eeb3f Mon Sep 17 00:00:00 2001
From: Axel Peter <15101925+AxelPeter@users.noreply.github.com>
Date: Fri, 21 Dec 2018 15:02:37 +0100
Subject: [PATCH 03/14] build: update karma configuration (#336)

---
 build/karma.conf.js                           |   8 +-
 package.json                                  |   9 +-
 packages/oui-action-menu/test/index.js        |   7 +
 packages/oui-angular/src/index.spec.js        |  48 -----
 packages/oui-autocomplete/test/index.js       |   7 +
 packages/oui-back-button/test/index.js        |   7 +
 packages/oui-button/test/index.js             |   7 +
 packages/oui-calendar/test/index.js           |   7 +
 packages/oui-checkbox/test/index.js           |   7 +
 packages/oui-chips/test/index.js              |   7 +
 packages/oui-clipboard/test/index.js          |   7 +
 packages/oui-collapsible/test/index.js        |   7 +
 packages/oui-criteria-adder/test/index.js     |   7 +
 packages/oui-criteria-container/test/index.js |   7 +
 packages/oui-datagrid/test/index.js           |   7 +
 packages/oui-dropdown/test/index.js           |   7 +
 packages/oui-dual-list/test/index.js          |   7 +
 packages/oui-field/test/index.js              |   7 +
 packages/oui-file/test/index.js               |   7 +
 packages/oui-form-actions/test/index.js       |   7 +
 packages/oui-guide-menu/test/index.js         |   7 +
 packages/oui-header-tabs/test/index.js        |   7 +
 packages/oui-inline-adder/test/index.js       |   7 +
 packages/oui-message/test/index.js            |   7 +
 packages/oui-modal/test/index.js              |   7 +
 packages/oui-navbar/test/index.js             |   7 +
 packages/oui-numeric/test/index.js            |   7 +
 packages/oui-page-header/test/index.js        |   7 +
 packages/oui-pagination/test/index.js         |   7 +
 packages/oui-password/test/index.js           |   7 +
 packages/oui-popover/test/index.js            |   7 +
 packages/oui-progress/test/index.js           |   7 +
 packages/oui-radio/test/index.js              |   7 +
 packages/oui-search/test/index.js             |   7 +
 packages/oui-select-picker/test/index.js      |   7 +
 packages/oui-select/test/index.js             |   7 +
 packages/oui-skeleton/test/index.js           |   7 +
 packages/oui-slideshow/test/index.js          |   7 +
 packages/oui-spinner/test/index.js            |   7 +
 packages/oui-stepper/test/index.js            |   7 +
 packages/oui-switch/test/index.js             |   7 +
 packages/oui-tabs/test/index.js               |   7 +
 packages/oui-textarea/test/index.js           |   7 +
 packages/oui-tile/test/index.js               |   7 +
 packages/oui-tooltip/test/index.js            |   7 +
 yarn.lock                                     | 165 +-----------------
 46 files changed, 301 insertions(+), 223 deletions(-)
 create mode 100644 packages/oui-action-menu/test/index.js
 delete mode 100644 packages/oui-angular/src/index.spec.js
 create mode 100644 packages/oui-autocomplete/test/index.js
 create mode 100644 packages/oui-back-button/test/index.js
 create mode 100644 packages/oui-button/test/index.js
 create mode 100644 packages/oui-calendar/test/index.js
 create mode 100644 packages/oui-checkbox/test/index.js
 create mode 100644 packages/oui-chips/test/index.js
 create mode 100644 packages/oui-clipboard/test/index.js
 create mode 100644 packages/oui-collapsible/test/index.js
 create mode 100644 packages/oui-criteria-adder/test/index.js
 create mode 100644 packages/oui-criteria-container/test/index.js
 create mode 100644 packages/oui-datagrid/test/index.js
 create mode 100644 packages/oui-dropdown/test/index.js
 create mode 100644 packages/oui-dual-list/test/index.js
 create mode 100644 packages/oui-field/test/index.js
 create mode 100644 packages/oui-file/test/index.js
 create mode 100644 packages/oui-form-actions/test/index.js
 create mode 100644 packages/oui-guide-menu/test/index.js
 create mode 100644 packages/oui-header-tabs/test/index.js
 create mode 100644 packages/oui-inline-adder/test/index.js
 create mode 100644 packages/oui-message/test/index.js
 create mode 100644 packages/oui-modal/test/index.js
 create mode 100644 packages/oui-navbar/test/index.js
 create mode 100644 packages/oui-numeric/test/index.js
 create mode 100644 packages/oui-page-header/test/index.js
 create mode 100644 packages/oui-pagination/test/index.js
 create mode 100644 packages/oui-password/test/index.js
 create mode 100644 packages/oui-popover/test/index.js
 create mode 100644 packages/oui-progress/test/index.js
 create mode 100644 packages/oui-radio/test/index.js
 create mode 100644 packages/oui-search/test/index.js
 create mode 100644 packages/oui-select-picker/test/index.js
 create mode 100644 packages/oui-select/test/index.js
 create mode 100644 packages/oui-skeleton/test/index.js
 create mode 100644 packages/oui-slideshow/test/index.js
 create mode 100644 packages/oui-spinner/test/index.js
 create mode 100644 packages/oui-stepper/test/index.js
 create mode 100644 packages/oui-switch/test/index.js
 create mode 100644 packages/oui-tabs/test/index.js
 create mode 100644 packages/oui-textarea/test/index.js
 create mode 100644 packages/oui-tile/test/index.js
 create mode 100644 packages/oui-tooltip/test/index.js

diff --git a/build/karma.conf.js b/build/karma.conf.js
index 101b97c7..c4242eb6 100644
--- a/build/karma.conf.js
+++ b/build/karma.conf.js
@@ -11,6 +11,7 @@ module.exports = function (config) {
         // 1. install corresponding karma launcher
         //    http://karma-runner.github.io/0.13/config/browsers.html
         // 2. add it to the `browsers` array below.
+        basePath: "../",
         browsers: ["PhantomJS"],
         frameworks: ["jasmine"],
         client: {
@@ -18,13 +19,12 @@ module.exports = function (config) {
                 includeStack: true
             }
         },
-        reporters: ["nyan"],
         files: [
             require.resolve("angular"), // eslint-disable-line no-undef
             require.resolve("angular-mocks"), // eslint-disable-line no-undef
             require.resolve("angular-aria"), // eslint-disable-line no-undef
             require.resolve("angular-sanitize"), // eslint-disable-line no-undef
-            "../packages/oui-angular/src/index.spec.js"
+            "packages/**/test/index.js"
         ],
         preprocessors: {
             // eslint-disable-next-line no-undef
@@ -33,7 +33,7 @@ module.exports = function (config) {
             [require.resolve("angular-mocks")]: ["webpack", "sourcemap"],
             [require.resolve("angular-aria")]: ["webpack", "sourcemap"],
             [require.resolve("angular-sanitize")]: ["webpack", "sourcemap"],
-            "../packages/oui-angular/src/index.spec.js": ["webpack", "sourcemap"]
+            "packages/**/test/index.js": ["webpack", "sourcemap"]
         },
         webpack: webpackConfig,
         webpackMiddleware: {
@@ -43,7 +43,7 @@ module.exports = function (config) {
             }
         },
         coverageReporter: {
-            dir: "../coverage/",
+            dir: "coverage/",
             reporters: [
                 { type: "text" },
                 { type: "lcov", subdir: "report-lcov" },
diff --git a/package.json b/package.json
index 95101651..64293cd1 100644
--- a/package.json
+++ b/package.json
@@ -24,10 +24,8 @@
     "build:watch": "webpack --progress --colors --config build/webpack.dist.config.js --watch",
     "eslint": "eslint ./packages",
     "eslint:fix": "eslint --fix ./packages",
-    "test": "npm run unit:ci",
-    "unit": "cross-env NODE_ENV=test babel-node node_modules/karma/bin/karma start build/karma.conf.js --reporters nyan,coverage --single-run",
-    "unit:ci": "cross-env NODE_ENV=test babel-node node_modules/karma/bin/karma start build/karma.conf.js --reporters spec,coverage --single-run",
-    "unit:watch": "cross-env NODE_ENV=test BABEL_ENV=test node -r babel-register node_modules/karma/bin/karma start build/karma.conf.js --watch"
+    "test": "cross-env NODE_ENV=test babel-node ./node_modules/karma/bin/karma start build/karma.conf.js --reporters spec,coverage --single-run",
+    "test:watch": "cross-env NODE_ENV=test BABEL_ENV=test node -r babel-register ./node_modules/karma/bin/karma start build/karma.conf.js --watch"
   },
   "config": {
     "commitizen": {
@@ -74,11 +72,8 @@
     "istanbul-instrumenter-loader": "^3.0.1",
     "jasmine-core": "^3.2.1",
     "karma": "^3.0.0",
-    "karma-chrome-launcher": "^2.2.0",
     "karma-coverage": "^1.1.2",
     "karma-jasmine": "^1.1.2",
-    "karma-junit-reporter": "^1.2.0",
-    "karma-nyan-reporter": "^0.2.5",
     "karma-phantomjs-launcher": "^1.0.4",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "^0.0.32",
diff --git a/packages/oui-action-menu/test/index.js b/packages/oui-action-menu/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-action-menu/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-angular/src/index.spec.js b/packages/oui-angular/src/index.spec.js
deleted file mode 100644
index a75ee49c..00000000
--- a/packages/oui-angular/src/index.spec.js
+++ /dev/null
@@ -1,48 +0,0 @@
-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))$/));
-loadTests(require.context("../../oui-checkbox/src/", true, /.*((\.spec)|(index))$/));
-loadTests(require.context("../../oui-chips/src/", true, /.*((\.spec)|(index))$/));
-loadTests(require.context("../../oui-clipboard/src/", true, /.*((\.spec)|(index))$/));
-loadTests(require.context("../../oui-collapsible/src/", true, /.*((\.spec)|(index))$/));
-loadTests(require.context("../../oui-criteria-adder/src/", true, /.*((\.spec)|(index))$/));
-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))$/));
-loadTests(require.context("../../oui-inline-adder/src/", true, /.*((\.spec)|(index))$/));
-loadTests(require.context("../../oui-message/src/", true, /.*((\.spec)|(index))$/));
-loadTests(require.context("../../oui-modal/src/", true, /.*((\.spec)|(index))$/));
-loadTests(require.context("../../oui-navbar/src/", true, /.*((\.spec)|(index))$/));
-loadTests(require.context("../../oui-numeric/src/", true, /.*((\.spec)|(index))$/));
-loadTests(require.context("../../oui-page-header/src/", true, /.*((\.spec)|(index))$/));
-loadTests(require.context("../../oui-pagination/src/", true, /.*((\.spec)|(index))$/));
-loadTests(require.context("../../oui-password/src/", true, /.*((\.spec)|(index))$/));
-loadTests(require.context("../../oui-popover/src/", true, /.*((\.spec)|(index))$/));
-loadTests(require.context("../../oui-progress/src/", true, /.*((\.spec)|(index))$/));
-loadTests(require.context("../../oui-radio/src/", true, /.*((\.spec)|(index))$/));
-loadTests(require.context("../../oui-search/src/", true, /.*((\.spec)|(index))$/));
-loadTests(require.context("../../oui-select/src/", true, /.*((\.spec)|(index))$/));
-loadTests(require.context("../../oui-select-picker/src/", true, /.*((\.spec)|(index))$/));
-loadTests(require.context("../../oui-skeleton/src/", true, /.*((\.spec)|(index))$/));
-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))$/));
-
-function loadTests (context) {
-    context.keys().forEach(context);
-}
diff --git a/packages/oui-autocomplete/test/index.js b/packages/oui-autocomplete/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-autocomplete/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-back-button/test/index.js b/packages/oui-back-button/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-back-button/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-button/test/index.js b/packages/oui-button/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-button/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-calendar/test/index.js b/packages/oui-calendar/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-calendar/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-checkbox/test/index.js b/packages/oui-checkbox/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-checkbox/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-chips/test/index.js b/packages/oui-chips/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-chips/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-clipboard/test/index.js b/packages/oui-clipboard/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-clipboard/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-collapsible/test/index.js b/packages/oui-collapsible/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-collapsible/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-criteria-adder/test/index.js b/packages/oui-criteria-adder/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-criteria-adder/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-criteria-container/test/index.js b/packages/oui-criteria-container/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-criteria-container/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-datagrid/test/index.js b/packages/oui-datagrid/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-datagrid/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-dropdown/test/index.js b/packages/oui-dropdown/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-dropdown/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-dual-list/test/index.js b/packages/oui-dual-list/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-dual-list/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-field/test/index.js b/packages/oui-field/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-field/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-file/test/index.js b/packages/oui-file/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-file/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-form-actions/test/index.js b/packages/oui-form-actions/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-form-actions/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-guide-menu/test/index.js b/packages/oui-guide-menu/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-guide-menu/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-header-tabs/test/index.js b/packages/oui-header-tabs/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-header-tabs/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-inline-adder/test/index.js b/packages/oui-inline-adder/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-inline-adder/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-message/test/index.js b/packages/oui-message/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-message/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-modal/test/index.js b/packages/oui-modal/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-modal/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-navbar/test/index.js b/packages/oui-navbar/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-navbar/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-numeric/test/index.js b/packages/oui-numeric/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-numeric/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-page-header/test/index.js b/packages/oui-page-header/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-page-header/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-pagination/test/index.js b/packages/oui-pagination/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-pagination/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-password/test/index.js b/packages/oui-password/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-password/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-popover/test/index.js b/packages/oui-popover/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-popover/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-progress/test/index.js b/packages/oui-progress/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-progress/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-radio/test/index.js b/packages/oui-radio/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-radio/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-search/test/index.js b/packages/oui-search/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-search/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-select-picker/test/index.js b/packages/oui-select-picker/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-select-picker/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-select/test/index.js b/packages/oui-select/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-select/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-skeleton/test/index.js b/packages/oui-skeleton/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-skeleton/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-slideshow/test/index.js b/packages/oui-slideshow/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-slideshow/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-spinner/test/index.js b/packages/oui-spinner/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-spinner/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-stepper/test/index.js b/packages/oui-stepper/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-stepper/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-switch/test/index.js b/packages/oui-switch/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-switch/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-tabs/test/index.js b/packages/oui-tabs/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-tabs/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-textarea/test/index.js b/packages/oui-textarea/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-textarea/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-tile/test/index.js b/packages/oui-tile/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-tile/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/packages/oui-tooltip/test/index.js b/packages/oui-tooltip/test/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-tooltip/test/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}
diff --git a/yarn.lock b/yarn.lock
index bed9b58d..f84c885f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2040,16 +2040,6 @@ clean-css@4.2.x:
   dependencies:
     source-map "~0.6.0"
 
-cli-color@^0.3.2:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/cli-color/-/cli-color-0.3.3.tgz#12d5bdd158ff8a0b0db401198913c03df069f6f5"
-  integrity sha1-EtW90Vj/igsNtAEZiRPAPfBp9vU=
-  dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.6"
-    memoizee "~0.3.8"
-    timers-ext "0.1"
-
 cli-cursor@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
@@ -2589,20 +2579,6 @@ cz-conventional-changelog@^2.1.0:
     right-pad "^1.0.1"
     word-wrap "^1.0.3"
 
-d@1:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
-  integrity sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=
-  dependencies:
-    es5-ext "^0.10.9"
-
-d@~0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/d/-/d-0.1.1.tgz#da184c535d18d8ee7ba2aa229b914009fae11309"
-  integrity sha1-2hhMU10Y2O57oqoim5FACfrhEwk=
-  dependencies:
-    es5-ext "~0.10.2"
-
 dargs@^4.0.1:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/dargs/-/dargs-4.1.0.tgz#03a9dbb4b5c2f139bf14ae53f0b8a2a6a86f4e17"
@@ -2959,33 +2935,6 @@ error-ex@^1.2.0, error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.11, es5-ext@~0.10.14, es5-ext@~0.10.2, es5-ext@~0.10.5, es5-ext@~0.10.6:
-  version "0.10.46"
-  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.46.tgz#efd99f67c5a7ec789baa3daa7f79870388f7f572"
-  integrity sha512-24XxRvJXNFwEMpJb3nOkiRJKRoupmjYmOPVlI65Qy2SrtxwOTB+g6ODjBKOtwEHbYrhWRty9xxOWLNdClT2djw==
-  dependencies:
-    es6-iterator "~2.0.3"
-    es6-symbol "~3.1.1"
-    next-tick "1"
-
-es6-iterator@~0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-0.1.3.tgz#d6f58b8c4fc413c249b4baa19768f8e4d7c8944e"
-  integrity sha1-1vWLjE/EE8JJtLqhl2j45NfIlE4=
-  dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.5"
-    es6-symbol "~2.0.1"
-
-es6-iterator@~2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
-  integrity sha1-p96IkUGgWpSwhUQDstCg+/qY87c=
-  dependencies:
-    d "1"
-    es5-ext "^0.10.35"
-    es6-symbol "^3.1.1"
-
 es6-promise@^3.0.2:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
@@ -2996,22 +2945,6 @@ es6-promise@^4.0.3:
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.5.tgz#da6d0d5692efb461e082c14817fe2427d8f5d054"
   integrity sha512-n6wvpdE43VFtJq+lUDYDBFUwV8TZbuGXLV4D6wKafg13ldznKsyEvatubnmUe31zcvelSzOHF+XbaT+Bl9ObDg==
 
-es6-symbol@^3.1.1, es6-symbol@~3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77"
-  integrity sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=
-  dependencies:
-    d "1"
-    es5-ext "~0.10.14"
-
-es6-symbol@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-2.0.1.tgz#761b5c67cfd4f1d18afb234f691d678682cb3bf3"
-  integrity sha1-dhtcZ8/U8dGK+yNPaR1nhoLLO/M=
-  dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.5"
-
 es6-templates@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/es6-templates/-/es6-templates-0.2.3.tgz#5cb9ac9fb1ded6eb1239342b81d792bbb4078ee4"
@@ -3020,16 +2953,6 @@ es6-templates@^0.2.3:
     recast "~0.11.12"
     through "~2.3.6"
 
-es6-weak-map@~0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-0.1.4.tgz#706cef9e99aa236ba7766c239c8b9e286ea7d228"
-  integrity sha1-cGzvnpmqI2undmwjnIueKG6n0ig=
-  dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.6"
-    es6-iterator "~0.1.3"
-    es6-symbol "~2.0.1"
-
 escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
@@ -3205,14 +3128,6 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
   integrity sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=
 
-event-emitter@~0.3.4:
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
-  integrity sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=
-  dependencies:
-    d "1"
-    es5-ext "~0.10.14"
-
 eventemitter3@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.0.tgz#090b4d6cdbd645ed10bf750d4b5407942d7ba163"
@@ -3637,13 +3552,6 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
-fs-access@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/fs-access/-/fs-access-1.0.1.tgz#d6a87f262271cefebec30c553407fb995da8777a"
-  integrity sha1-1qh/JiJxzv6+wwxVNAf7mV2od3o=
-  dependencies:
-    null-check "^1.0.0"
-
 fs-exists-sync@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz#982d6893af918e72d08dec9e8673ff2b5a8d6add"
@@ -4798,14 +4706,6 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
-karma-chrome-launcher@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/karma-chrome-launcher/-/karma-chrome-launcher-2.2.0.tgz#cf1b9d07136cc18fe239327d24654c3dbc368acf"
-  integrity sha512-uf/ZVpAabDBPvdPdveyk1EPgbnloPvFFGgmRhYLTDH7gEB4nZdSBk8yTU47w1g/drLSx5uMOkjKk7IWKfWg/+w==
-  dependencies:
-    fs-access "^1.0.0"
-    which "^1.2.1"
-
 karma-coverage@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/karma-coverage/-/karma-coverage-1.1.2.tgz#cc09dceb589a83101aca5fe70c287645ef387689"
@@ -4822,21 +4722,6 @@ karma-jasmine@^1.1.2:
   resolved "https://registry.yarnpkg.com/karma-jasmine/-/karma-jasmine-1.1.2.tgz#394f2b25ffb4a644b9ada6f22d443e2fd08886c3"
   integrity sha1-OU8rJf+0pkS5rabyLUQ+L9CIhsM=
 
-karma-junit-reporter@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/karma-junit-reporter/-/karma-junit-reporter-1.2.0.tgz#4f9c40cedfb1a395f8aef876abf96189917c6396"
-  integrity sha1-T5xAzt+xo5X4rvh2q/lhiZF8Y5Y=
-  dependencies:
-    path-is-absolute "^1.0.0"
-    xmlbuilder "8.2.2"
-
-karma-nyan-reporter@^0.2.5:
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/karma-nyan-reporter/-/karma-nyan-reporter-0.2.5.tgz#aab7925f34166ebcef9308bbee11679f58ddaa31"
-  integrity sha1-qreSXzQWbrzvkwi77hFnn1jdqjE=
-  dependencies:
-    cli-color "^0.3.2"
-
 karma-phantomjs-launcher@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/karma-phantomjs-launcher/-/karma-phantomjs-launcher-1.0.4.tgz#d23ca34801bda9863ad318e3bb4bd4062b13acd2"
@@ -5159,13 +5044,6 @@ lru-cache@^4.0.1, lru-cache@^4.1.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
-lru-queue@0.1:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/lru-queue/-/lru-queue-0.1.0.tgz#2738bd9f0d3cf4f84490c5736c48699ac632cda3"
-  integrity sha1-Jzi9nw089PhEkMVzbEhpmsYyzaM=
-  dependencies:
-    es5-ext "~0.10.2"
-
 make-dir@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
@@ -5234,19 +5112,6 @@ mem@^4.0.0:
     mimic-fn "^1.0.0"
     p-is-promise "^1.1.0"
 
-memoizee@~0.3.8:
-  version "0.3.10"
-  resolved "https://registry.yarnpkg.com/memoizee/-/memoizee-0.3.10.tgz#4eca0d8aed39ec9d017f4c5c2f2f6432f42e5c8f"
-  integrity sha1-TsoNiu057J0Bf0xcLy9kMvQuXI8=
-  dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.11"
-    es6-weak-map "~0.1.4"
-    event-emitter "~0.3.4"
-    lru-queue "0.1"
-    next-tick "~0.2.2"
-    timers-ext "0.1"
-
 memory-fs@^0.4.0, memory-fs@~0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -5553,16 +5418,6 @@ neo-async@^2.5.0:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.5.2.tgz#489105ce7bc54e709d736b195f82135048c50fcc"
   integrity sha512-vdqTKI9GBIYcAEbFAcpKPErKINfPF5zIuz3/niBfq8WUZjpT2tytLlFVrBgWdOtqI4uaA/Rb6No0hux39XXDuw==
 
-next-tick@1:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
-  integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
-
-next-tick@~0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-0.2.2.tgz#75da4a927ee5887e39065880065b7336413b310d"
-  integrity sha1-ddpKkn7liH45BliABltzNkE7MQ0=
-
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -5721,11 +5576,6 @@ npmlog@^4.0.2:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
-null-check@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/null-check/-/null-check-1.0.0.tgz#977dffd7176012b9ec30d2a39db5cf72a0439edd"
-  integrity sha1-l33/1xdgErnsMNKjnbXPcqBDnt0=
-
 number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
@@ -7385,14 +7235,6 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
-timers-ext@0.1:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/timers-ext/-/timers-ext-0.1.5.tgz#77147dd4e76b660c2abb8785db96574cbbd12922"
-  integrity sha512-tsEStd7kmACHENhsUPaxb8Jf8/+GZZxyNFQbZD07HQOyooOa6At1rQqjffgvg7n+dxscQa9cjjMdWhJtsP2sxg==
-  dependencies:
-    es5-ext "~0.10.14"
-    next-tick "1"
-
 tiny-emitter@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.0.2.tgz#82d27468aca5ade8e5fd1e6d22b57dd43ebdfb7c"
@@ -7838,7 +7680,7 @@ which-module@^2.0.0:
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
-which@^1.1.1, which@^1.2.1, which@^1.2.10, which@^1.2.12, which@^1.2.9:
+which@^1.1.1, which@^1.2.10, which@^1.2.12, which@^1.2.9:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
@@ -7903,11 +7745,6 @@ ws@~3.3.1:
     safe-buffer "~5.1.0"
     ultron "~1.1.0"
 
-xmlbuilder@8.2.2:
-  version "8.2.2"
-  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-8.2.2.tgz#69248673410b4ba42e1a6136551d2922335aa773"
-  integrity sha1-aSSGc0ELS6QuGmE2VR0pIjNap3M=
-
 xmlhttprequest-ssl@~1.5.4:
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"

From 9595b1f284104c0b947af30e4c5698d3844a1060 Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Fri, 21 Dec 2018 15:04:29 +0100
Subject: [PATCH 04/14] build: clean unused assets

---
 assets/svg/.gitkeep                | 0
 assets/svg/checkbox-facade.svg     | 6 ------
 assets/svg/close-icon.svg          | 3 ---
 assets/svg/error-icon_circle.svg   | 4 ----
 assets/svg/info-icon_circle.svg    | 4 ----
 assets/svg/success-icon_circle.svg | 4 ----
 assets/svg/warning-icon_circle.svg | 5 -----
 7 files changed, 26 deletions(-)
 delete mode 100644 assets/svg/.gitkeep
 delete mode 100644 assets/svg/checkbox-facade.svg
 delete mode 100644 assets/svg/close-icon.svg
 delete mode 100644 assets/svg/error-icon_circle.svg
 delete mode 100644 assets/svg/info-icon_circle.svg
 delete mode 100644 assets/svg/success-icon_circle.svg
 delete mode 100644 assets/svg/warning-icon_circle.svg

diff --git a/assets/svg/.gitkeep b/assets/svg/.gitkeep
deleted file mode 100644
index e69de29b..00000000
diff --git a/assets/svg/checkbox-facade.svg b/assets/svg/checkbox-facade.svg
deleted file mode 100644
index 2d2a2b02..00000000
--- a/assets/svg/checkbox-facade.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg class="oui-checkbox__facade" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
-  <path class="oui-checkbox__false-bottom" d="M2,16H15V3H2Z"/>
-  <path class="oui-checkbox__outline oui-checkbox__outline_unchecked" d="M16 17H1V2h15zM2 16h13V3H2z"/>
-  <path class="oui-checkbox__outline oui-checkbox__outline_checked" d="M15,9.09V16H2V3h9.55l.81-1H1V17H16V7.85Z"/>
-  <path class="oui-checkbox__checkmark" d="M8.53,9.58l2.14-2.65,4.84-6A.81.81,0,0,1,16.83.78l1,.82A.78.78,0,0,1,18,2.82L9.6,13.2a1.1,1.1,0,0,1-1.52.38,1.74,1.74,0,0,1-.49-.39q-2-2.36-4-4.74a.77.77,0,0,1,.1-1.16l1.07-.91A.79.79,0,0,1,6,6.48L8.4,9.36A1.57,1.57,0,0,1,8.53,9.58Z"/>
-</svg>
diff --git a/assets/svg/close-icon.svg b/assets/svg/close-icon.svg
deleted file mode 100644
index a56bf0f9..00000000
--- a/assets/svg/close-icon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg class="oui-message__icon oui-message__icon_close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <path class="oui-message__icon_x" d="M42.87,32,61.76,13.11A7.68,7.68,0,0,0,50.89,2.24L32,21.13,13.11,2.24A7.68,7.68,0,0,0,2.24,13.11L21.13,32,2.24,50.89a7.71,7.71,0,0,0,0,10.87h0a7.71,7.71,0,0,0,10.87,0L32,42.87,50.89,61.76a7.71,7.71,0,0,0,10.87,0h0a7.71,7.71,0,0,0,0-10.87Z"/>
-</svg>
diff --git a/assets/svg/error-icon_circle.svg b/assets/svg/error-icon_circle.svg
deleted file mode 100644
index 2358d18a..00000000
--- a/assets/svg/error-icon_circle.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg class="oui-message__icon oui-message__icon_error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <circle class="oui-message__icon_circle" cx="32" cy="32" r="32"/>
-  <path class="oui-message__icon_x" d="M17.92 24l6.24 6.24L25.89 32l-1.73 1.73L17.92 40a2.45 2.45 0 0 0 0 3.45l1.33 1.33 1.33 1.33a2.45 2.45 0 0 0 3.45 0l8-8 1.73 1.73L40 46.08a2.45 2.45 0 0 0 3.45 0l1.33-1.33 1.33-1.33a2.45 2.45 0 0 0 0-3.45l-8-8 8-8a2.45 2.45 0 0 0 0-3.45l-2.66-2.66a2.45 2.45 0 0 0-3.45 0l-6.24 6.24L32 25.89l-8-8a2.45 2.45 0 0 0-3.45 0l-2.66 2.66a2.45 2.45 0 0 0 .03 3.45z"/>
-</svg>
diff --git a/assets/svg/info-icon_circle.svg b/assets/svg/info-icon_circle.svg
deleted file mode 100644
index 535273d6..00000000
--- a/assets/svg/info-icon_circle.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg class="oui-message__icon oui-message__icon_info" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <circle class="oui-message__icon_circle" cx="32" cy="32" r="32"/>
-  <path class="oui-message__icon_i" d="M27.53 17c0-2.36 1.89-4 4.47-4s4.47 1.63 4.47 4-1.84 4-4.47 4-4.47-1.61-4.47-4zm.63 9.06h7.72V51h-7.72z"/>
-</svg>
diff --git a/assets/svg/success-icon_circle.svg b/assets/svg/success-icon_circle.svg
deleted file mode 100644
index f5c67761..00000000
--- a/assets/svg/success-icon_circle.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg class="oui-message__icon oui-message__icon_success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <circle class="oui-message__icon_circle" cx="32" cy="32" r="32"/>
-  <path class="oui-message__icon_check" d="M50.16 20l-2.22-2.38a2.37 2.37 0 0 0-3.34-.12L43 19l-9.6 9-6.32 5.89-1.75 1.61-6.16-6.6a2.37 2.37 0 0 0-3.34-.12l-.42.4-1.87 1.74a2.37 2.37 0 0 0-.12 3.34l8 8.54 2 2.17a2.37 2.37 0 0 0 3.34.12l9.9-9.23L50 23.38a2.37 2.37 0 0 0 .16-3.38z"/>
-</svg>
diff --git a/assets/svg/warning-icon_circle.svg b/assets/svg/warning-icon_circle.svg
deleted file mode 100644
index b0c1fa83..00000000
--- a/assets/svg/warning-icon_circle.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg class="oui-message__icon oui-message__icon_warning" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <path class="oui-message__icon_triangle" d="M29.33,7.26c1.47-2.53,3.88-2.53,5.35,0L46.35,27.32l5.35,9.2L63.37,56.58c1.47,2.53.28,4.6-2.64,4.6H3.28c-2.93,0-4.12-2.07-2.64-4.6L12.3,36.52l5.35-9.2Z"/>
-  <path class="oui-message__icon_exclamation" d="M35.23,21c0-1.82-1.15-2.87-3.15-2.87S28.74,19.21,28.74,21a160.94,160.94,0,0,0,1,20.8c.19,1.81,1.37,2,2.37,2a2,2,0,0,0,2.28-2A152.5,152.5,0,0,0,35.23,21Z"/>
-  <circle class="oui-message__icon_exclamation" cx="32" cy="50.83" r="3.34"/>
-</svg>

From eece09ee9e8e3c4a847271bd7a9bac7926ae0aaa Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Fri, 21 Dec 2018 15:57:16 +0100
Subject: [PATCH 05/14] style: update project structure

---
 build/karma.conf.js                                      | 4 ++--
 packages/oui-action-menu/{test => tests}/index.js        | 0
 packages/oui-autocomplete/{test => tests}/index.js       | 0
 packages/oui-back-button/{test => tests}/index.js        | 0
 packages/oui-button/{test => tests}/index.js             | 0
 packages/oui-calendar/{test => tests}/index.js           | 0
 packages/oui-checkbox/{test => tests}/index.js           | 0
 packages/oui-chips/{test => tests}/index.js              | 0
 packages/oui-clipboard/{test => tests}/index.js          | 0
 packages/oui-collapsible/{test => tests}/index.js        | 0
 packages/oui-criteria-adder/{test => tests}/index.js     | 0
 packages/oui-criteria-container/{test => tests}/index.js | 0
 packages/oui-datagrid/{test => tests}/index.js           | 0
 packages/oui-dropdown/{test => tests}/index.js           | 0
 packages/oui-dual-list/{test => tests}/index.js          | 0
 packages/oui-field/{test => tests}/index.js              | 0
 packages/oui-file/{test => tests}/index.js               | 0
 packages/oui-form-actions/{test => tests}/index.js       | 0
 packages/oui-guide-menu/{test => tests}/index.js         | 0
 packages/oui-header-tabs/{test => tests}/index.js        | 0
 packages/oui-inline-adder/{test => tests}/index.js       | 0
 packages/oui-message/{test => tests}/index.js            | 0
 packages/oui-modal/{test => tests}/index.js              | 0
 packages/oui-navbar/{test => tests}/index.js             | 0
 packages/oui-numeric/{test => tests}/index.js            | 0
 packages/oui-page-header/{test => tests}/index.js        | 0
 packages/oui-pagination/{test => tests}/index.js         | 0
 packages/oui-password/{test => tests}/index.js           | 0
 packages/oui-popover/{test => tests}/index.js            | 0
 packages/oui-progress/{test => tests}/index.js           | 0
 packages/oui-radio/{test => tests}/index.js              | 0
 packages/oui-search/{test => tests}/index.js             | 0
 packages/oui-select-picker/{test => tests}/index.js      | 0
 packages/oui-select/{test => tests}/index.js             | 0
 packages/oui-skeleton/{test => tests}/index.js           | 0
 packages/oui-slideshow/{test => tests}/index.js          | 0
 packages/oui-spinner/{test => tests}/index.js            | 0
 packages/oui-stepper/{test => tests}/index.js            | 0
 packages/oui-switch/{test => tests}/index.js             | 0
 packages/oui-tabs/{test => tests}/index.js               | 0
 packages/oui-textarea/{test => tests}/index.js           | 0
 packages/oui-tile/{test => tests}/index.js               | 0
 packages/oui-tooltip/{test => tests}/index.js            | 0
 43 files changed, 2 insertions(+), 2 deletions(-)
 rename packages/oui-action-menu/{test => tests}/index.js (100%)
 rename packages/oui-autocomplete/{test => tests}/index.js (100%)
 rename packages/oui-back-button/{test => tests}/index.js (100%)
 rename packages/oui-button/{test => tests}/index.js (100%)
 rename packages/oui-calendar/{test => tests}/index.js (100%)
 rename packages/oui-checkbox/{test => tests}/index.js (100%)
 rename packages/oui-chips/{test => tests}/index.js (100%)
 rename packages/oui-clipboard/{test => tests}/index.js (100%)
 rename packages/oui-collapsible/{test => tests}/index.js (100%)
 rename packages/oui-criteria-adder/{test => tests}/index.js (100%)
 rename packages/oui-criteria-container/{test => tests}/index.js (100%)
 rename packages/oui-datagrid/{test => tests}/index.js (100%)
 rename packages/oui-dropdown/{test => tests}/index.js (100%)
 rename packages/oui-dual-list/{test => tests}/index.js (100%)
 rename packages/oui-field/{test => tests}/index.js (100%)
 rename packages/oui-file/{test => tests}/index.js (100%)
 rename packages/oui-form-actions/{test => tests}/index.js (100%)
 rename packages/oui-guide-menu/{test => tests}/index.js (100%)
 rename packages/oui-header-tabs/{test => tests}/index.js (100%)
 rename packages/oui-inline-adder/{test => tests}/index.js (100%)
 rename packages/oui-message/{test => tests}/index.js (100%)
 rename packages/oui-modal/{test => tests}/index.js (100%)
 rename packages/oui-navbar/{test => tests}/index.js (100%)
 rename packages/oui-numeric/{test => tests}/index.js (100%)
 rename packages/oui-page-header/{test => tests}/index.js (100%)
 rename packages/oui-pagination/{test => tests}/index.js (100%)
 rename packages/oui-password/{test => tests}/index.js (100%)
 rename packages/oui-popover/{test => tests}/index.js (100%)
 rename packages/oui-progress/{test => tests}/index.js (100%)
 rename packages/oui-radio/{test => tests}/index.js (100%)
 rename packages/oui-search/{test => tests}/index.js (100%)
 rename packages/oui-select-picker/{test => tests}/index.js (100%)
 rename packages/oui-select/{test => tests}/index.js (100%)
 rename packages/oui-skeleton/{test => tests}/index.js (100%)
 rename packages/oui-slideshow/{test => tests}/index.js (100%)
 rename packages/oui-spinner/{test => tests}/index.js (100%)
 rename packages/oui-stepper/{test => tests}/index.js (100%)
 rename packages/oui-switch/{test => tests}/index.js (100%)
 rename packages/oui-tabs/{test => tests}/index.js (100%)
 rename packages/oui-textarea/{test => tests}/index.js (100%)
 rename packages/oui-tile/{test => tests}/index.js (100%)
 rename packages/oui-tooltip/{test => tests}/index.js (100%)

diff --git a/build/karma.conf.js b/build/karma.conf.js
index c4242eb6..f4b1d029 100644
--- a/build/karma.conf.js
+++ b/build/karma.conf.js
@@ -24,7 +24,7 @@ module.exports = function (config) {
             require.resolve("angular-mocks"), // eslint-disable-line no-undef
             require.resolve("angular-aria"), // eslint-disable-line no-undef
             require.resolve("angular-sanitize"), // eslint-disable-line no-undef
-            "packages/**/test/index.js"
+            "packages/**/tests/index.js"
         ],
         preprocessors: {
             // eslint-disable-next-line no-undef
@@ -33,7 +33,7 @@ module.exports = function (config) {
             [require.resolve("angular-mocks")]: ["webpack", "sourcemap"],
             [require.resolve("angular-aria")]: ["webpack", "sourcemap"],
             [require.resolve("angular-sanitize")]: ["webpack", "sourcemap"],
-            "packages/**/test/index.js": ["webpack", "sourcemap"]
+            "packages/**/tests/index.js": ["webpack", "sourcemap"]
         },
         webpack: webpackConfig,
         webpackMiddleware: {
diff --git a/packages/oui-action-menu/test/index.js b/packages/oui-action-menu/tests/index.js
similarity index 100%
rename from packages/oui-action-menu/test/index.js
rename to packages/oui-action-menu/tests/index.js
diff --git a/packages/oui-autocomplete/test/index.js b/packages/oui-autocomplete/tests/index.js
similarity index 100%
rename from packages/oui-autocomplete/test/index.js
rename to packages/oui-autocomplete/tests/index.js
diff --git a/packages/oui-back-button/test/index.js b/packages/oui-back-button/tests/index.js
similarity index 100%
rename from packages/oui-back-button/test/index.js
rename to packages/oui-back-button/tests/index.js
diff --git a/packages/oui-button/test/index.js b/packages/oui-button/tests/index.js
similarity index 100%
rename from packages/oui-button/test/index.js
rename to packages/oui-button/tests/index.js
diff --git a/packages/oui-calendar/test/index.js b/packages/oui-calendar/tests/index.js
similarity index 100%
rename from packages/oui-calendar/test/index.js
rename to packages/oui-calendar/tests/index.js
diff --git a/packages/oui-checkbox/test/index.js b/packages/oui-checkbox/tests/index.js
similarity index 100%
rename from packages/oui-checkbox/test/index.js
rename to packages/oui-checkbox/tests/index.js
diff --git a/packages/oui-chips/test/index.js b/packages/oui-chips/tests/index.js
similarity index 100%
rename from packages/oui-chips/test/index.js
rename to packages/oui-chips/tests/index.js
diff --git a/packages/oui-clipboard/test/index.js b/packages/oui-clipboard/tests/index.js
similarity index 100%
rename from packages/oui-clipboard/test/index.js
rename to packages/oui-clipboard/tests/index.js
diff --git a/packages/oui-collapsible/test/index.js b/packages/oui-collapsible/tests/index.js
similarity index 100%
rename from packages/oui-collapsible/test/index.js
rename to packages/oui-collapsible/tests/index.js
diff --git a/packages/oui-criteria-adder/test/index.js b/packages/oui-criteria-adder/tests/index.js
similarity index 100%
rename from packages/oui-criteria-adder/test/index.js
rename to packages/oui-criteria-adder/tests/index.js
diff --git a/packages/oui-criteria-container/test/index.js b/packages/oui-criteria-container/tests/index.js
similarity index 100%
rename from packages/oui-criteria-container/test/index.js
rename to packages/oui-criteria-container/tests/index.js
diff --git a/packages/oui-datagrid/test/index.js b/packages/oui-datagrid/tests/index.js
similarity index 100%
rename from packages/oui-datagrid/test/index.js
rename to packages/oui-datagrid/tests/index.js
diff --git a/packages/oui-dropdown/test/index.js b/packages/oui-dropdown/tests/index.js
similarity index 100%
rename from packages/oui-dropdown/test/index.js
rename to packages/oui-dropdown/tests/index.js
diff --git a/packages/oui-dual-list/test/index.js b/packages/oui-dual-list/tests/index.js
similarity index 100%
rename from packages/oui-dual-list/test/index.js
rename to packages/oui-dual-list/tests/index.js
diff --git a/packages/oui-field/test/index.js b/packages/oui-field/tests/index.js
similarity index 100%
rename from packages/oui-field/test/index.js
rename to packages/oui-field/tests/index.js
diff --git a/packages/oui-file/test/index.js b/packages/oui-file/tests/index.js
similarity index 100%
rename from packages/oui-file/test/index.js
rename to packages/oui-file/tests/index.js
diff --git a/packages/oui-form-actions/test/index.js b/packages/oui-form-actions/tests/index.js
similarity index 100%
rename from packages/oui-form-actions/test/index.js
rename to packages/oui-form-actions/tests/index.js
diff --git a/packages/oui-guide-menu/test/index.js b/packages/oui-guide-menu/tests/index.js
similarity index 100%
rename from packages/oui-guide-menu/test/index.js
rename to packages/oui-guide-menu/tests/index.js
diff --git a/packages/oui-header-tabs/test/index.js b/packages/oui-header-tabs/tests/index.js
similarity index 100%
rename from packages/oui-header-tabs/test/index.js
rename to packages/oui-header-tabs/tests/index.js
diff --git a/packages/oui-inline-adder/test/index.js b/packages/oui-inline-adder/tests/index.js
similarity index 100%
rename from packages/oui-inline-adder/test/index.js
rename to packages/oui-inline-adder/tests/index.js
diff --git a/packages/oui-message/test/index.js b/packages/oui-message/tests/index.js
similarity index 100%
rename from packages/oui-message/test/index.js
rename to packages/oui-message/tests/index.js
diff --git a/packages/oui-modal/test/index.js b/packages/oui-modal/tests/index.js
similarity index 100%
rename from packages/oui-modal/test/index.js
rename to packages/oui-modal/tests/index.js
diff --git a/packages/oui-navbar/test/index.js b/packages/oui-navbar/tests/index.js
similarity index 100%
rename from packages/oui-navbar/test/index.js
rename to packages/oui-navbar/tests/index.js
diff --git a/packages/oui-numeric/test/index.js b/packages/oui-numeric/tests/index.js
similarity index 100%
rename from packages/oui-numeric/test/index.js
rename to packages/oui-numeric/tests/index.js
diff --git a/packages/oui-page-header/test/index.js b/packages/oui-page-header/tests/index.js
similarity index 100%
rename from packages/oui-page-header/test/index.js
rename to packages/oui-page-header/tests/index.js
diff --git a/packages/oui-pagination/test/index.js b/packages/oui-pagination/tests/index.js
similarity index 100%
rename from packages/oui-pagination/test/index.js
rename to packages/oui-pagination/tests/index.js
diff --git a/packages/oui-password/test/index.js b/packages/oui-password/tests/index.js
similarity index 100%
rename from packages/oui-password/test/index.js
rename to packages/oui-password/tests/index.js
diff --git a/packages/oui-popover/test/index.js b/packages/oui-popover/tests/index.js
similarity index 100%
rename from packages/oui-popover/test/index.js
rename to packages/oui-popover/tests/index.js
diff --git a/packages/oui-progress/test/index.js b/packages/oui-progress/tests/index.js
similarity index 100%
rename from packages/oui-progress/test/index.js
rename to packages/oui-progress/tests/index.js
diff --git a/packages/oui-radio/test/index.js b/packages/oui-radio/tests/index.js
similarity index 100%
rename from packages/oui-radio/test/index.js
rename to packages/oui-radio/tests/index.js
diff --git a/packages/oui-search/test/index.js b/packages/oui-search/tests/index.js
similarity index 100%
rename from packages/oui-search/test/index.js
rename to packages/oui-search/tests/index.js
diff --git a/packages/oui-select-picker/test/index.js b/packages/oui-select-picker/tests/index.js
similarity index 100%
rename from packages/oui-select-picker/test/index.js
rename to packages/oui-select-picker/tests/index.js
diff --git a/packages/oui-select/test/index.js b/packages/oui-select/tests/index.js
similarity index 100%
rename from packages/oui-select/test/index.js
rename to packages/oui-select/tests/index.js
diff --git a/packages/oui-skeleton/test/index.js b/packages/oui-skeleton/tests/index.js
similarity index 100%
rename from packages/oui-skeleton/test/index.js
rename to packages/oui-skeleton/tests/index.js
diff --git a/packages/oui-slideshow/test/index.js b/packages/oui-slideshow/tests/index.js
similarity index 100%
rename from packages/oui-slideshow/test/index.js
rename to packages/oui-slideshow/tests/index.js
diff --git a/packages/oui-spinner/test/index.js b/packages/oui-spinner/tests/index.js
similarity index 100%
rename from packages/oui-spinner/test/index.js
rename to packages/oui-spinner/tests/index.js
diff --git a/packages/oui-stepper/test/index.js b/packages/oui-stepper/tests/index.js
similarity index 100%
rename from packages/oui-stepper/test/index.js
rename to packages/oui-stepper/tests/index.js
diff --git a/packages/oui-switch/test/index.js b/packages/oui-switch/tests/index.js
similarity index 100%
rename from packages/oui-switch/test/index.js
rename to packages/oui-switch/tests/index.js
diff --git a/packages/oui-tabs/test/index.js b/packages/oui-tabs/tests/index.js
similarity index 100%
rename from packages/oui-tabs/test/index.js
rename to packages/oui-tabs/tests/index.js
diff --git a/packages/oui-textarea/test/index.js b/packages/oui-textarea/tests/index.js
similarity index 100%
rename from packages/oui-textarea/test/index.js
rename to packages/oui-textarea/tests/index.js
diff --git a/packages/oui-tile/test/index.js b/packages/oui-tile/tests/index.js
similarity index 100%
rename from packages/oui-tile/test/index.js
rename to packages/oui-tile/tests/index.js
diff --git a/packages/oui-tooltip/test/index.js b/packages/oui-tooltip/tests/index.js
similarity index 100%
rename from packages/oui-tooltip/test/index.js
rename to packages/oui-tooltip/tests/index.js

From 1e29bbe4e7c3d9fd9b0c039c0efb4741d0f688cd Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Mon, 7 Jan 2019 10:49:58 +0100
Subject: [PATCH 06/14] style(oui-password): add ng-attr prefix on attributes

---
 .../src/strength/password-strength.controller.js            | 3 +++
 packages/oui-password/src/strength/password-strength.html   | 6 +++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/oui-password/src/strength/password-strength.controller.js b/packages/oui-password/src/strength/password-strength.controller.js
index 5a4bef21..f6c1a8ea 100644
--- a/packages/oui-password/src/strength/password-strength.controller.js
+++ b/packages/oui-password/src/strength/password-strength.controller.js
@@ -49,6 +49,9 @@ export default class {
         };
         this.minScore = 0;
         this.maxScore = Object.keys(this.scale).length;
+
+        // Avoid idle animation on Windows when undefined
+        this.score = this.score || this.minScore;
     }
 
     $postLink () {
diff --git a/packages/oui-password/src/strength/password-strength.html b/packages/oui-password/src/strength/password-strength.html
index d2e23aa3..bd489a5f 100644
--- a/packages/oui-password/src/strength/password-strength.html
+++ b/packages/oui-password/src/strength/password-strength.html
@@ -3,8 +3,8 @@
     <span ng-bind="$ctrl.feedback"></span>
 </p>
 <progress class="oui-progress"
-    max="{{::$ctrl.maxScore}}"
-    min="{{::$ctrl.minScore}}"
-    value="{{$ctrl.score}}"
+    ng-attr-max="{{::$ctrl.maxScore}}"
+    ng-attr-min="{{::$ctrl.minScore}}"
+    ng-attr-value="{{$ctrl.score}}"
     ng-class="$ctrl.classname">
 </progress>

From 505eefcb99c337722b4ccd03b09392c00c8dc49b Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Mon, 7 Jan 2019 11:40:22 +0100
Subject: [PATCH 07/14] style(oui-select): move ng-click to parent button

---
 packages/oui-select/src/templates/match-multiple.html | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/oui-select/src/templates/match-multiple.html b/packages/oui-select/src/templates/match-multiple.html
index 31447d1d..fcea1609 100644
--- a/packages/oui-select/src/templates/match-multiple.html
+++ b/packages/oui-select/src/templates/match-multiple.html
@@ -4,16 +4,15 @@
         ng-bind="::$select.placeholder">
     </span>
     <span class="ui-select-match-items">
-        <button type="button" class="oui-chip oui-chip_closable ui-select-match-item"
+        <button type="button" class="oui-chip ui-select-match-item"
+            ng-class="{ 'oui-chip_closable': !$select.disabled }"
+            ng-click="$ctrl.removeChoice($event, $index, $selectMultiple.removeChoice)"
             ng-repeat="$item in $select.selected track by $index"
             ng-disabled="$select.disabled"
             ui-select-sort="$select.selected"
             tabindex="-1">
             <span uis-transclude-append></span>
-            <span class="oui-chip__close"
-                ng-hide="$select.disabled"
-                ng-click="$ctrl.removeChoice($event, $index, $selectMultiple.removeChoice)"
-                tabindex="-1">
+            <span class="oui-chip__close">
                 <span class="oui-icon oui-icon-close_thin" aria-hidden="true"></span>
             </span>
         </button>

From 18f1ea2b56f60a5456f6dfb9b965ba3b73266f29 Mon Sep 17 00:00:00 2001
From: Jisay <jean-christophe.alleman@corp.ovh.com>
Date: Mon, 7 Jan 2019 14:10:52 +0100
Subject: [PATCH 08/14] feat(oui-tabs): add onActive callback (#340)

---
 packages/oui-tabs/README.md                       |  1 +
 packages/oui-tabs/src/item/tabs-item.component.js |  3 ++-
 packages/oui-tabs/src/tabs.controller.js          | 11 +++++++----
 packages/oui-tabs/src/tabs.html                   |  2 +-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/oui-tabs/README.md b/packages/oui-tabs/README.md
index 260607c1..20ca503b 100644
--- a/packages/oui-tabs/README.md
+++ b/packages/oui-tabs/README.md
@@ -79,3 +79,4 @@
 | `heading`     | string    | @?        | yes               | n/a               | n/a       | heading text of the tab
 | `aria-label`  | string    | @?        | yes               | n/a               | n/a       | accessibility label
 | `checked`     | booldean  | <?        | yes               | `true`, `false`   | n/a       | check mark flag of the tab
+| `on-active`   | function  | &         | no                | n/a               | n/a       | function called when tab is active
diff --git a/packages/oui-tabs/src/item/tabs-item.component.js b/packages/oui-tabs/src/item/tabs-item.component.js
index 0209960f..3fdf07d4 100644
--- a/packages/oui-tabs/src/item/tabs-item.component.js
+++ b/packages/oui-tabs/src/item/tabs-item.component.js
@@ -9,7 +9,8 @@ export default {
         id: "@?",
         heading: "@?",
         ariaLabel: "@?",
-        checked: "<?"
+        checked: "<?",
+        onActive: "&"
     },
     controller,
     template,
diff --git a/packages/oui-tabs/src/tabs.controller.js b/packages/oui-tabs/src/tabs.controller.js
index a4291f33..9d7c54a6 100644
--- a/packages/oui-tabs/src/tabs.controller.js
+++ b/packages/oui-tabs/src/tabs.controller.js
@@ -16,7 +16,7 @@ export default class {
 
         // Set first added tab active
         if (this.items.length === 1) {
-            this.setActiveTab(item.id);
+            this.setActiveTab(item);
         }
     }
 
@@ -29,12 +29,15 @@ export default class {
 
         // If was activeId, set first item as active
         if (this.items.length && item.id === this.activeId) {
-            this.setActiveTab(this.items[0].id);
+            this.setActiveTab(this.items[0]);
         }
     }
 
-    setActiveTab (id) {
-        this.activeId = id;
+    setActiveTab (item) {
+        this.activeId = item.id;
+        if (angular.isFunction(item.onActive)) {
+            item.onActive();
+        }
     }
 
     $onInit () {
diff --git a/packages/oui-tabs/src/tabs.html b/packages/oui-tabs/src/tabs.html
index c9def067..10bb5e1a 100644
--- a/packages/oui-tabs/src/tabs.html
+++ b/packages/oui-tabs/src/tabs.html
@@ -6,7 +6,7 @@
         ng-attr-aria-label="{{::item.ariaLabel}}"
         ng-attr-aria-selected="{{item.id === $ctrl.activeId}}"
         ng-class="{ 'oui-tabs__tab_checked': item.checked }"
-        ng-click="$ctrl.setActiveTab(item.id)">
+        ng-click="$ctrl.setActiveTab(item)">
         <span class="oui-icon oui-icon-success"
             ng-if="::item.hasCheckmark">
         </span>

From c4f8f7237dc8b1afa64bb0c8bf82380eeef063d6 Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Mon, 7 Jan 2019 14:53:07 +0100
Subject: [PATCH 09/14] style(oui-select): use div instead of button for
 container

---
 packages/oui-select/src/templates/select-multiple.html | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/oui-select/src/templates/select-multiple.html b/packages/oui-select/src/templates/select-multiple.html
index 097469f2..9039ab1b 100644
--- a/packages/oui-select/src/templates/select-multiple.html
+++ b/packages/oui-select/src/templates/select-multiple.html
@@ -1,12 +1,14 @@
 <div class="oui-ui-select oui-ui-select_multiple ui-select-container ui-select-multiple"
     ng-class="{ 'ui-select-container_open': $select.open }">
-    <button class="ui-select-match-container"
+    <div class="ui-select-match-container"
         aria-haspopup="true"
         aria-expanded="{{$select.open}}"
         aria-owns="ui-select-choices-{{ $select.generatedId }}"
-        ng-class="{ 'ui-select-match-container_focus': $select.focus }"
+        ng-class="{
+            'ui-select-match-container_focus': $select.focus,
+            'ui-select-match-container_disabled': $select.disabled
+        }"
         ng-click="$ctrl.onUiSelectClick()"
-        ng-disabled="$select.disabled"
         tabindex="-1">
         <span class="ui-select-match"></span><!-- replaced by match-multiple.html -->
         <input class="ui-select-search"
@@ -19,7 +21,7 @@
             ng-model="$select.search"
             placeholder="{{::$select.placeholder}}"
             type="search">
-    </button>
+    </div>
     <div class="ui-select-dropdown"
         ng-show="$select.items.length > 0">
         <div class="ui-select-header"></div><!-- replaced by header.html -->

From ef21f2cb1657a49ad030852b3ea61bff5b0ffd5b Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Tue, 8 Jan 2019 10:43:47 +0100
Subject: [PATCH 10/14] style(oui-select): optimize getPropertyValue method

---
 packages/oui-select/src/index.spec.js        | 2 +-
 packages/oui-select/src/select.controller.js | 2 +-
 packages/oui-select/src/templates/match.html | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/oui-select/src/index.spec.js b/packages/oui-select/src/index.spec.js
index e637ac46..8bf74621 100644
--- a/packages/oui-select/src/index.spec.js
+++ b/packages/oui-select/src/index.spec.js
@@ -200,7 +200,7 @@ describe("ouiSelect", () => {
                 let matchItems = getMultipleMatchItem(element);
                 expect(matchItems.length).toBe(2); // eslint-disable-line no-magic-numbers
 
-                angular.element(matchItems[0].querySelector(".oui-chip__close")).triggerHandler("click");
+                angular.element(matchItems[0]).triggerHandler("click");
                 matchItems = getMultipleMatchItem(element);
 
                 expect(matchItems.length).toBe(1); // eslint-disable-line no-magic-numbers
diff --git a/packages/oui-select/src/select.controller.js b/packages/oui-select/src/select.controller.js
index af16c8e1..84f980f8 100644
--- a/packages/oui-select/src/select.controller.js
+++ b/packages/oui-select/src/select.controller.js
@@ -121,6 +121,6 @@ export default class {
     }
 
     getPropertyValue (item) {
-        return get(item, this.match, null);
+        return get(item, this.match, item);
     }
 }
diff --git a/packages/oui-select/src/templates/match.html b/packages/oui-select/src/templates/match.html
index 2beb06cb..7f43eabc 100644
--- a/packages/oui-select/src/templates/match.html
+++ b/packages/oui-select/src/templates/match.html
@@ -16,7 +16,7 @@
         </span>
         <span class="ui-select-match-text"
             ng-hide="$select.isEmpty()"
-            ng-bind-html="$ctrl.getPropertyValue($select.selected) || $select.selected">
+            ng-bind-html="$ctrl.getPropertyValue($select.selected)">
         </span>
         <span class="oui-icon oui-icon-chevron-down"></span>
     </span>

From 5cf0a5fa6f9c2ecca52a414f3beb544d9598101a Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Wed, 9 Jan 2019 11:40:26 +0100
Subject: [PATCH 11/14] fix(oui-select): fix getPropertyValue in the root
 template

---
 packages/oui-select/README.md                |  22 +-
 packages/oui-select/src/index.spec.data.json | 486 +++++++++----------
 packages/oui-select/src/select.html          |   4 +-
 3 files changed, 256 insertions(+), 256 deletions(-)

diff --git a/packages/oui-select/README.md b/packages/oui-select/README.md
index 026791ca..1a835996 100644
--- a/packages/oui-select/README.md
+++ b/packages/oui-select/README.md
@@ -19,7 +19,7 @@
 <oui-select name="country"
     model="$ctrl.modelBasicObject"
     items="$ctrl.countries"
-    match="name">
+    match="country.name">
 </oui-select>
 ```
 
@@ -40,7 +40,7 @@
     model="$ctrl.modelSearchable"
     placeholder="Select a country..."
     items="$ctrl.countries"
-    match="name"
+    match="country.name"
     searchable>
 </oui-select>
 ```
@@ -52,7 +52,7 @@
     model="$ctrl.modelMultiple"
     placeholder="Select a country..."
     items="$ctrl.countries"
-    match="name"
+    match="country.name"
     multiple
     searchable>
 </oui-select>
@@ -65,7 +65,7 @@
     model="$ctrl.modelDisabled"
     placeholder="Select a country..."
     items="$ctrl.countries"
-    match="name"
+    match="country.name"
     disabled>
 </oui-select>
 ```
@@ -83,7 +83,7 @@
     placeholder="Select a country..."
     items="$ctrl.countries"
     disable-items="$ctrl.disableItems($item)"
-    match="name">
+    match="country.name">
 </oui-select>
 ```
 
@@ -95,7 +95,7 @@
     placeholder="Select a country..."
     items="$ctrl.countries"
     group-by="$ctrl.groupByFirstLetter"
-    match="name">
+    match="country.name">
 </oui-select>
 ```
 
@@ -112,10 +112,10 @@
     placeholder="Select a country..."
     items="$ctrl.countries"
     group-by="$ctrl.groupByFirstLetter"
-    match="name">
-    <span ng-bind="$item.name" class="d-inline-block text-truncate"></span><br>
+    match="country.name">
+    <span ng-bind="$item.country.name" class="d-inline-block text-truncate"></span><br>
     <small>
-        Code: <span ng-bind="$item.code"></span>
+        Code: <span ng-bind="$item.country.code"></span>
     </small>
 </oui-select>
 ```
@@ -139,11 +139,11 @@
     items="$ctrl.countries"
     required
     group-by="$ctrl.groupByFirstLetter"
-    match="name"
+    match="country.name"
     on-change="$ctrl.onChange(modelValue)"
     on-blur="$ctrl.onBlur()"
     on-focus="$ctrl.onFocus()">
-    <span ng-bind="$item.name"></span><br>
+    <span ng-bind="$item.country.name"></span><br>
     <small>
         Code: <span ng-bind="$item.code"></span>
     </small>
diff --git a/packages/oui-select/src/index.spec.data.json b/packages/oui-select/src/index.spec.data.json
index e8df8918..3cb81ee3 100644
--- a/packages/oui-select/src/index.spec.data.json
+++ b/packages/oui-select/src/index.spec.data.json
@@ -1,245 +1,245 @@
 [
-{"name": "Afghanistan", "code": "AF"},
-{"name": "Åland Islands", "code": "AX"},
-{"name": "Albania", "code": "AL"},
-{"name": "Algeria", "code": "DZ"},
-{"name": "American Samoa", "code": "AS"},
-{"name": "AndorrA", "code": "AD"},
-{"name": "Angola", "code": "AO"},
-{"name": "Anguilla", "code": "AI"},
-{"name": "Antarctica", "code": "AQ"},
-{"name": "Antigua and Barbuda", "code": "AG"},
-{"name": "Argentina", "code": "AR"},
-{"name": "Armenia", "code": "AM"},
-{"name": "Aruba", "code": "AW"},
-{"name": "Australia", "code": "AU"},
-{"name": "Austria", "code": "AT"},
-{"name": "Azerbaijan", "code": "AZ"},
-{"name": "Bahamas", "code": "BS"},
-{"name": "Bahrain", "code": "BH"},
-{"name": "Bangladesh", "code": "BD"},
-{"name": "Barbados", "code": "BB"},
-{"name": "Belarus", "code": "BY"},
-{"name": "Belgium", "code": "BE"},
-{"name": "Belize", "code": "BZ"},
-{"name": "Benin", "code": "BJ"},
-{"name": "Bermuda", "code": "BM"},
-{"name": "Bhutan", "code": "BT"},
-{"name": "Bolivia", "code": "BO"},
-{"name": "Bosnia and Herzegovina", "code": "BA"},
-{"name": "Botswana", "code": "BW"},
-{"name": "Bouvet Island", "code": "BV"},
-{"name": "Brazil", "code": "BR"},
-{"name": "British Indian Ocean Territory", "code": "IO"},
-{"name": "Brunei Darussalam", "code": "BN"},
-{"name": "Bulgaria", "code": "BG"},
-{"name": "Burkina Faso", "code": "BF"},
-{"name": "Burundi", "code": "BI"},
-{"name": "Cambodia", "code": "KH"},
-{"name": "Cameroon", "code": "CM"},
-{"name": "Canada", "code": "CA"},
-{"name": "Cape Verde", "code": "CV"},
-{"name": "Cayman Islands", "code": "KY"},
-{"name": "Central African Republic", "code": "CF"},
-{"name": "Chad", "code": "TD"},
-{"name": "Chile", "code": "CL"},
-{"name": "China", "code": "CN"},
-{"name": "Christmas Island", "code": "CX"},
-{"name": "Cocos (Keeling) Islands", "code": "CC"},
-{"name": "Colombia", "code": "CO"},
-{"name": "Comoros", "code": "KM"},
-{"name": "Congo", "code": "CG"},
-{"name": "Congo, The Democratic Republic of the", "code": "CD"},
-{"name": "Cook Islands", "code": "CK"},
-{"name": "Costa Rica", "code": "CR"},
-{"name": "Cote D'Ivoire", "code": "CI"},
-{"name": "Croatia", "code": "HR"},
-{"name": "Cuba", "code": "CU"},
-{"name": "Cyprus", "code": "CY"},
-{"name": "Czech Republic", "code": "CZ"},
-{"name": "Denmark", "code": "DK"},
-{"name": "Djibouti", "code": "DJ"},
-{"name": "Dominica", "code": "DM"},
-{"name": "Dominican Republic", "code": "DO"},
-{"name": "Ecuador", "code": "EC"},
-{"name": "Egypt", "code": "EG"},
-{"name": "El Salvador", "code": "SV"},
-{"name": "Equatorial Guinea", "code": "GQ"},
-{"name": "Eritrea", "code": "ER"},
-{"name": "Estonia", "code": "EE"},
-{"name": "Ethiopia", "code": "ET"},
-{"name": "Falkland Islands (Malvinas)", "code": "FK"},
-{"name": "Faroe Islands", "code": "FO"},
-{"name": "Fiji", "code": "FJ"},
-{"name": "Finland", "code": "FI"},
-{"name": "France", "code": "FR"},
-{"name": "French Guiana", "code": "GF"},
-{"name": "French Polynesia", "code": "PF"},
-{"name": "French Southern Territories", "code": "TF"},
-{"name": "Gabon", "code": "GA"},
-{"name": "Gambia", "code": "GM"},
-{"name": "Georgia", "code": "GE"},
-{"name": "Germany", "code": "DE"},
-{"name": "Ghana", "code": "GH"},
-{"name": "Gibraltar", "code": "GI"},
-{"name": "Greece", "code": "GR"},
-{"name": "Greenland", "code": "GL"},
-{"name": "Grenada", "code": "GD"},
-{"name": "Guadeloupe", "code": "GP"},
-{"name": "Guam", "code": "GU"},
-{"name": "Guatemala", "code": "GT"},
-{"name": "Guernsey", "code": "GG"},
-{"name": "Guinea", "code": "GN"},
-{"name": "Guinea-Bissau", "code": "GW"},
-{"name": "Guyana", "code": "GY"},
-{"name": "Haiti", "code": "HT"},
-{"name": "Heard Island and Mcdonald Islands", "code": "HM"},
-{"name": "Holy See (Vatican City State)", "code": "VA"},
-{"name": "Honduras", "code": "HN"},
-{"name": "Hong Kong", "code": "HK"},
-{"name": "Hungary", "code": "HU"},
-{"name": "Iceland", "code": "IS"},
-{"name": "India", "code": "IN"},
-{"name": "Indonesia", "code": "ID"},
-{"name": "Iran, Islamic Republic Of", "code": "IR"},
-{"name": "Iraq", "code": "IQ"},
-{"name": "Ireland", "code": "IE"},
-{"name": "Isle of Man", "code": "IM"},
-{"name": "Israel", "code": "IL"},
-{"name": "Italy", "code": "IT"},
-{"name": "Jamaica", "code": "JM"},
-{"name": "Japan", "code": "JP"},
-{"name": "Jersey", "code": "JE"},
-{"name": "Jordan", "code": "JO"},
-{"name": "Kazakhstan", "code": "KZ"},
-{"name": "Kenya", "code": "KE"},
-{"name": "Kiribati", "code": "KI"},
-{"name": "Korea, Democratic People'S Republic of", "code": "KP"},
-{"name": "Korea, Republic of", "code": "KR"},
-{"name": "Kuwait", "code": "KW"},
-{"name": "Kyrgyzstan", "code": "KG"},
-{"name": "Lao People'S Democratic Republic", "code": "LA"},
-{"name": "Latvia", "code": "LV"},
-{"name": "Lebanon", "code": "LB"},
-{"name": "Lesotho", "code": "LS"},
-{"name": "Liberia", "code": "LR"},
-{"name": "Libyan Arab Jamahiriya", "code": "LY"},
-{"name": "Liechtenstein", "code": "LI"},
-{"name": "Lithuania", "code": "LT"},
-{"name": "Luxembourg", "code": "LU"},
-{"name": "Macao", "code": "MO"},
-{"name": "Macedonia, The Former Yugoslav Republic of", "code": "MK"},
-{"name": "Madagascar", "code": "MG"},
-{"name": "Malawi", "code": "MW"},
-{"name": "Malaysia", "code": "MY"},
-{"name": "Maldives", "code": "MV"},
-{"name": "Mali", "code": "ML"},
-{"name": "Malta", "code": "MT"},
-{"name": "Marshall Islands", "code": "MH"},
-{"name": "Martinique", "code": "MQ"},
-{"name": "Mauritania", "code": "MR"},
-{"name": "Mauritius", "code": "MU"},
-{"name": "Mayotte", "code": "YT"},
-{"name": "Mexico", "code": "MX"},
-{"name": "Micronesia, Federated States of", "code": "FM"},
-{"name": "Moldova, Republic of", "code": "MD"},
-{"name": "Monaco", "code": "MC"},
-{"name": "Mongolia", "code": "MN"},
-{"name": "Montserrat", "code": "MS"},
-{"name": "Morocco", "code": "MA"},
-{"name": "Mozambique", "code": "MZ"},
-{"name": "Myanmar", "code": "MM"},
-{"name": "Namibia", "code": "NA"},
-{"name": "Nauru", "code": "NR"},
-{"name": "Nepal", "code": "NP"},
-{"name": "Netherlands", "code": "NL"},
-{"name": "Netherlands Antilles", "code": "AN"},
-{"name": "New Caledonia", "code": "NC"},
-{"name": "New Zealand", "code": "NZ"},
-{"name": "Nicaragua", "code": "NI"},
-{"name": "Niger", "code": "NE"},
-{"name": "Nigeria", "code": "NG"},
-{"name": "Niue", "code": "NU"},
-{"name": "Norfolk Island", "code": "NF"},
-{"name": "Northern Mariana Islands", "code": "MP"},
-{"name": "Norway", "code": "NO"},
-{"name": "Oman", "code": "OM"},
-{"name": "Pakistan", "code": "PK"},
-{"name": "Palau", "code": "PW"},
-{"name": "Palestinian Territory, Occupied", "code": "PS"},
-{"name": "Panama", "code": "PA"},
-{"name": "Papua New Guinea", "code": "PG"},
-{"name": "Paraguay", "code": "PY"},
-{"name": "Peru", "code": "PE"},
-{"name": "Philippines", "code": "PH"},
-{"name": "Pitcairn", "code": "PN"},
-{"name": "Poland", "code": "PL"},
-{"name": "Portugal", "code": "PT"},
-{"name": "Puerto Rico", "code": "PR"},
-{"name": "Qatar", "code": "QA"},
-{"name": "Reunion", "code": "RE"},
-{"name": "Romania", "code": "RO"},
-{"name": "Russian Federation", "code": "RU"},
-{"name": "RWANDA", "code": "RW"},
-{"name": "Saint Helena", "code": "SH"},
-{"name": "Saint Kitts and Nevis", "code": "KN"},
-{"name": "Saint Lucia", "code": "LC"},
-{"name": "Saint Pierre and Miquelon", "code": "PM"},
-{"name": "Saint Vincent and the Grenadines", "code": "VC"},
-{"name": "Samoa", "code": "WS"},
-{"name": "San Marino", "code": "SM"},
-{"name": "Sao Tome and Principe", "code": "ST"},
-{"name": "Saudi Arabia", "code": "SA"},
-{"name": "Senegal", "code": "SN"},
-{"name": "Serbia and Montenegro", "code": "CS"},
-{"name": "Seychelles", "code": "SC"},
-{"name": "Sierra Leone", "code": "SL"},
-{"name": "Singapore", "code": "SG"},
-{"name": "Slovakia", "code": "SK"},
-{"name": "Slovenia", "code": "SI"},
-{"name": "Solomon Islands", "code": "SB"},
-{"name": "Somalia", "code": "SO"},
-{"name": "South Africa", "code": "ZA"},
-{"name": "South Georgia and the South Sandwich Islands", "code": "GS"},
-{"name": "Spain", "code": "ES"},
-{"name": "Sri Lanka", "code": "LK"},
-{"name": "Sudan", "code": "SD"},
-{"name": "Suriname", "code": "SR"},
-{"name": "Svalbard and Jan Mayen", "code": "SJ"},
-{"name": "Swaziland", "code": "SZ"},
-{"name": "Sweden", "code": "SE"},
-{"name": "Switzerland", "code": "CH"},
-{"name": "Syrian Arab Republic", "code": "SY"},
-{"name": "Taiwan, Province of China", "code": "TW"},
-{"name": "Tajikistan", "code": "TJ"},
-{"name": "Tanzania, United Republic of", "code": "TZ"},
-{"name": "Thailand", "code": "TH"},
-{"name": "Timor-Leste", "code": "TL"},
-{"name": "Togo", "code": "TG"},
-{"name": "Tokelau", "code": "TK"},
-{"name": "Tonga", "code": "TO"},
-{"name": "Trinidad and Tobago", "code": "TT"},
-{"name": "Tunisia", "code": "TN"},
-{"name": "Turkey", "code": "TR"},
-{"name": "Turkmenistan", "code": "TM"},
-{"name": "Turks and Caicos Islands", "code": "TC"},
-{"name": "Tuvalu", "code": "TV"},
-{"name": "Uganda", "code": "UG"},
-{"name": "Ukraine", "code": "UA"},
-{"name": "United Arab Emirates", "code": "AE"},
-{"name": "United Kingdom", "code": "GB"},
-{"name": "United States", "code": "US"},
-{"name": "United States Minor Outlying Islands", "code": "UM"},
-{"name": "Uruguay", "code": "UY"},
-{"name": "Uzbekistan", "code": "UZ"},
-{"name": "Vanuatu", "code": "VU"},
-{"name": "Venezuela", "code": "VE"},
-{"name": "Viet Nam", "code": "VN"},
-{"name": "Virgin Islands, British", "code": "VG"},
-{"name": "Virgin Islands, U.S.", "code": "VI"},
-{"name": "Wallis and Futuna", "code": "WF"},
-{"name": "Western Sahara", "code": "EH"},
-{"name": "Yemen", "code": "YE"},
-{"name": "Zambia", "code": "ZM"},
-{"name": "Zimbabwe", "code": "ZW"}
+    {"country": {"name": "Afghanistan", "code": "AF"} },
+    {"country": {"name": "Åland Islands", "code": "AX"} },
+    {"country": {"name": "Albania", "code": "AL"} },
+    {"country": {"name": "Algeria", "code": "DZ"} },
+    {"country": {"name": "American Samoa", "code": "AS"} },
+    {"country": {"name": "AndorrA", "code": "AD"} },
+    {"country": {"name": "Angola", "code": "AO"} },
+    {"country": {"name": "Anguilla", "code": "AI"} },
+    {"country": {"name": "Antarctica", "code": "AQ"} },
+    {"country": {"name": "Antigua and Barbuda", "code": "AG"} },
+    {"country": {"name": "Argentina", "code": "AR"} },
+    {"country": {"name": "Armenia", "code": "AM"} },
+    {"country": {"name": "Aruba", "code": "AW"} },
+    {"country": {"name": "Australia", "code": "AU"} },
+    {"country": {"name": "Austria", "code": "AT"} },
+    {"country": {"name": "Azerbaijan", "code": "AZ"} },
+    {"country": {"name": "Bahamas", "code": "BS"} },
+    {"country": {"name": "Bahrain", "code": "BH"} },
+    {"country": {"name": "Bangladesh", "code": "BD"} },
+    {"country": {"name": "Barbados", "code": "BB"} },
+    {"country": {"name": "Belarus", "code": "BY"} },
+    {"country": {"name": "Belgium", "code": "BE"} },
+    {"country": {"name": "Belize", "code": "BZ"} },
+    {"country": {"name": "Benin", "code": "BJ"} },
+    {"country": {"name": "Bermuda", "code": "BM"} },
+    {"country": {"name": "Bhutan", "code": "BT"} },
+    {"country": {"name": "Bolivia", "code": "BO"} },
+    {"country": {"name": "Bosnia and Herzegovina", "code": "BA"} },
+    {"country": {"name": "Botswana", "code": "BW"} },
+    {"country": {"name": "Bouvet Island", "code": "BV"} },
+    {"country": {"name": "Brazil", "code": "BR"} },
+    {"country": {"name": "British Indian Ocean Territory", "code": "IO"} },
+    {"country": {"name": "Brunei Darussalam", "code": "BN"} },
+    {"country": {"name": "Bulgaria", "code": "BG"} },
+    {"country": {"name": "Burkina Faso", "code": "BF"} },
+    {"country": {"name": "Burundi", "code": "BI"} },
+    {"country": {"name": "Cambodia", "code": "KH"} },
+    {"country": {"name": "Cameroon", "code": "CM"} },
+    {"country": {"name": "Canada", "code": "CA"} },
+    {"country": {"name": "Cape Verde", "code": "CV"} },
+    {"country": {"name": "Cayman Islands", "code": "KY"} },
+    {"country": {"name": "Central African Republic", "code": "CF"} },
+    {"country": {"name": "Chad", "code": "TD"} },
+    {"country": {"name": "Chile", "code": "CL"} },
+    {"country": {"name": "China", "code": "CN"} },
+    {"country": {"name": "Christmas Island", "code": "CX"} },
+    {"country": {"name": "Cocos (Keeling) Islands", "code": "CC"} },
+    {"country": {"name": "Colombia", "code": "CO"} },
+    {"country": {"name": "Comoros", "code": "KM"} },
+    {"country": {"name": "Congo", "code": "CG"} },
+    {"country": {"name": "Congo, The Democratic Republic of the", "code": "CD"} },
+    {"country": {"name": "Cook Islands", "code": "CK"} },
+    {"country": {"name": "Costa Rica", "code": "CR"} },
+    {"country": {"name": "Cote D'Ivoire", "code": "CI"} },
+    {"country": {"name": "Croatia", "code": "HR"} },
+    {"country": {"name": "Cuba", "code": "CU"} },
+    {"country": {"name": "Cyprus", "code": "CY"} },
+    {"country": {"name": "Czech Republic", "code": "CZ"} },
+    {"country": {"name": "Denmark", "code": "DK"} },
+    {"country": {"name": "Djibouti", "code": "DJ"} },
+    {"country": {"name": "Dominica", "code": "DM"} },
+    {"country": {"name": "Dominican Republic", "code": "DO"} },
+    {"country": {"name": "Ecuador", "code": "EC"} },
+    {"country": {"name": "Egypt", "code": "EG"} },
+    {"country": {"name": "El Salvador", "code": "SV"} },
+    {"country": {"name": "Equatorial Guinea", "code": "GQ"} },
+    {"country": {"name": "Eritrea", "code": "ER"} },
+    {"country": {"name": "Estonia", "code": "EE"} },
+    {"country": {"name": "Ethiopia", "code": "ET"} },
+    {"country": {"name": "Falkland Islands (Malvinas)", "code": "FK"} },
+    {"country": {"name": "Faroe Islands", "code": "FO"} },
+    {"country": {"name": "Fiji", "code": "FJ"} },
+    {"country": {"name": "Finland", "code": "FI"} },
+    {"country": {"name": "France", "code": "FR"} },
+    {"country": {"name": "French Guiana", "code": "GF"} },
+    {"country": {"name": "French Polynesia", "code": "PF"} },
+    {"country": {"name": "French Southern Territories", "code": "TF"} },
+    {"country": {"name": "Gabon", "code": "GA"} },
+    {"country": {"name": "Gambia", "code": "GM"} },
+    {"country": {"name": "Georgia", "code": "GE"} },
+    {"country": {"name": "Germany", "code": "DE"} },
+    {"country": {"name": "Ghana", "code": "GH"} },
+    {"country": {"name": "Gibraltar", "code": "GI"} },
+    {"country": {"name": "Greece", "code": "GR"} },
+    {"country": {"name": "Greenland", "code": "GL"} },
+    {"country": {"name": "Grenada", "code": "GD"} },
+    {"country": {"name": "Guadeloupe", "code": "GP"} },
+    {"country": {"name": "Guam", "code": "GU"} },
+    {"country": {"name": "Guatemala", "code": "GT"} },
+    {"country": {"name": "Guernsey", "code": "GG"} },
+    {"country": {"name": "Guinea", "code": "GN"} },
+    {"country": {"name": "Guinea-Bissau", "code": "GW"} },
+    {"country": {"name": "Guyana", "code": "GY"} },
+    {"country": {"name": "Haiti", "code": "HT"} },
+    {"country": {"name": "Heard Island and Mcdonald Islands", "code": "HM"} },
+    {"country": {"name": "Holy See (Vatican City State)", "code": "VA"} },
+    {"country": {"name": "Honduras", "code": "HN"} },
+    {"country": {"name": "Hong Kong", "code": "HK"} },
+    {"country": {"name": "Hungary", "code": "HU"} },
+    {"country": {"name": "Iceland", "code": "IS"} },
+    {"country": {"name": "India", "code": "IN"} },
+    {"country": {"name": "Indonesia", "code": "ID"} },
+    {"country": {"name": "Iran, Islamic Republic Of", "code": "IR"} },
+    {"country": {"name": "Iraq", "code": "IQ"} },
+    {"country": {"name": "Ireland", "code": "IE"} },
+    {"country": {"name": "Isle of Man", "code": "IM"} },
+    {"country": {"name": "Israel", "code": "IL"} },
+    {"country": {"name": "Italy", "code": "IT"} },
+    {"country": {"name": "Jamaica", "code": "JM"} },
+    {"country": {"name": "Japan", "code": "JP"} },
+    {"country": {"name": "Jersey", "code": "JE"} },
+    {"country": {"name": "Jordan", "code": "JO"} },
+    {"country": {"name": "Kazakhstan", "code": "KZ"} },
+    {"country": {"name": "Kenya", "code": "KE"} },
+    {"country": {"name": "Kiribati", "code": "KI"} },
+    {"country": {"name": "Korea, Democratic People'S Republic of", "code": "KP"} },
+    {"country": {"name": "Korea, Republic of", "code": "KR"} },
+    {"country": {"name": "Kuwait", "code": "KW"} },
+    {"country": {"name": "Kyrgyzstan", "code": "KG"} },
+    {"country": {"name": "Lao People'S Democratic Republic", "code": "LA"} },
+    {"country": {"name": "Latvia", "code": "LV"} },
+    {"country": {"name": "Lebanon", "code": "LB"} },
+    {"country": {"name": "Lesotho", "code": "LS"} },
+    {"country": {"name": "Liberia", "code": "LR"} },
+    {"country": {"name": "Libyan Arab Jamahiriya", "code": "LY"} },
+    {"country": {"name": "Liechtenstein", "code": "LI"} },
+    {"country": {"name": "Lithuania", "code": "LT"} },
+    {"country": {"name": "Luxembourg", "code": "LU"} },
+    {"country": {"name": "Macao", "code": "MO"} },
+    {"country": {"name": "Macedonia, The Former Yugoslav Republic of", "code": "MK"} },
+    {"country": {"name": "Madagascar", "code": "MG"} },
+    {"country": {"name": "Malawi", "code": "MW"} },
+    {"country": {"name": "Malaysia", "code": "MY"} },
+    {"country": {"name": "Maldives", "code": "MV"} },
+    {"country": {"name": "Mali", "code": "ML"} },
+    {"country": {"name": "Malta", "code": "MT"} },
+    {"country": {"name": "Marshall Islands", "code": "MH"} },
+    {"country": {"name": "Martinique", "code": "MQ"} },
+    {"country": {"name": "Mauritania", "code": "MR"} },
+    {"country": {"name": "Mauritius", "code": "MU"} },
+    {"country": {"name": "Mayotte", "code": "YT"} },
+    {"country": {"name": "Mexico", "code": "MX"} },
+    {"country": {"name": "Micronesia, Federated States of", "code": "FM"} },
+    {"country": {"name": "Moldova, Republic of", "code": "MD"} },
+    {"country": {"name": "Monaco", "code": "MC"} },
+    {"country": {"name": "Mongolia", "code": "MN"} },
+    {"country": {"name": "Montserrat", "code": "MS"} },
+    {"country": {"name": "Morocco", "code": "MA"} },
+    {"country": {"name": "Mozambique", "code": "MZ"} },
+    {"country": {"name": "Myanmar", "code": "MM"} },
+    {"country": {"name": "Namibia", "code": "NA"} },
+    {"country": {"name": "Nauru", "code": "NR"} },
+    {"country": {"name": "Nepal", "code": "NP"} },
+    {"country": {"name": "Netherlands", "code": "NL"} },
+    {"country": {"name": "Netherlands Antilles", "code": "AN"} },
+    {"country": {"name": "New Caledonia", "code": "NC"} },
+    {"country": {"name": "New Zealand", "code": "NZ"} },
+    {"country": {"name": "Nicaragua", "code": "NI"} },
+    {"country": {"name": "Niger", "code": "NE"} },
+    {"country": {"name": "Nigeria", "code": "NG"} },
+    {"country": {"name": "Niue", "code": "NU"} },
+    {"country": {"name": "Norfolk Island", "code": "NF"} },
+    {"country": {"name": "Northern Mariana Islands", "code": "MP"} },
+    {"country": {"name": "Norway", "code": "NO"} },
+    {"country": {"name": "Oman", "code": "OM"} },
+    {"country": {"name": "Pakistan", "code": "PK"} },
+    {"country": {"name": "Palau", "code": "PW"} },
+    {"country": {"name": "Palestinian Territory, Occupied", "code": "PS"} },
+    {"country": {"name": "Panama", "code": "PA"} },
+    {"country": {"name": "Papua New Guinea", "code": "PG"} },
+    {"country": {"name": "Paraguay", "code": "PY"} },
+    {"country": {"name": "Peru", "code": "PE"} },
+    {"country": {"name": "Philippines", "code": "PH"} },
+    {"country": {"name": "Pitcairn", "code": "PN"} },
+    {"country": {"name": "Poland", "code": "PL"} },
+    {"country": {"name": "Portugal", "code": "PT"} },
+    {"country": {"name": "Puerto Rico", "code": "PR"} },
+    {"country": {"name": "Qatar", "code": "QA"} },
+    {"country": {"name": "Reunion", "code": "RE"} },
+    {"country": {"name": "Romania", "code": "RO"} },
+    {"country": {"name": "Russian Federation", "code": "RU"} },
+    {"country": {"name": "RWANDA", "code": "RW"} },
+    {"country": {"name": "Saint Helena", "code": "SH"} },
+    {"country": {"name": "Saint Kitts and Nevis", "code": "KN"} },
+    {"country": {"name": "Saint Lucia", "code": "LC"} },
+    {"country": {"name": "Saint Pierre and Miquelon", "code": "PM"} },
+    {"country": {"name": "Saint Vincent and the Grenadines", "code": "VC"} },
+    {"country": {"name": "Samoa", "code": "WS"} },
+    {"country": {"name": "San Marino", "code": "SM"} },
+    {"country": {"name": "Sao Tome and Principe", "code": "ST"} },
+    {"country": {"name": "Saudi Arabia", "code": "SA"} },
+    {"country": {"name": "Senegal", "code": "SN"} },
+    {"country": {"name": "Serbia and Montenegro", "code": "CS"} },
+    {"country": {"name": "Seychelles", "code": "SC"} },
+    {"country": {"name": "Sierra Leone", "code": "SL"} },
+    {"country": {"name": "Singapore", "code": "SG"} },
+    {"country": {"name": "Slovakia", "code": "SK"} },
+    {"country": {"name": "Slovenia", "code": "SI"} },
+    {"country": {"name": "Solomon Islands", "code": "SB"} },
+    {"country": {"name": "Somalia", "code": "SO"} },
+    {"country": {"name": "South Africa", "code": "ZA"} },
+    {"country": {"name": "South Georgia and the South Sandwich Islands", "code": "GS"} },
+    {"country": {"name": "Spain", "code": "ES"} },
+    {"country": {"name": "Sri Lanka", "code": "LK"} },
+    {"country": {"name": "Sudan", "code": "SD"} },
+    {"country": {"name": "Suriname", "code": "SR"} },
+    {"country": {"name": "Svalbard and Jan Mayen", "code": "SJ"} },
+    {"country": {"name": "Swaziland", "code": "SZ"} },
+    {"country": {"name": "Sweden", "code": "SE"} },
+    {"country": {"name": "Switzerland", "code": "CH"} },
+    {"country": {"name": "Syrian Arab Republic", "code": "SY"} },
+    {"country": {"name": "Taiwan, Province of China", "code": "TW"} },
+    {"country": {"name": "Tajikistan", "code": "TJ"} },
+    {"country": {"name": "Tanzania, United Republic of", "code": "TZ"} },
+    {"country": {"name": "Thailand", "code": "TH"} },
+    {"country": {"name": "Timor-Leste", "code": "TL"} },
+    {"country": {"name": "Togo", "code": "TG"} },
+    {"country": {"name": "Tokelau", "code": "TK"} },
+    {"country": {"name": "Tonga", "code": "TO"} },
+    {"country": {"name": "Trinidad and Tobago", "code": "TT"} },
+    {"country": {"name": "Tunisia", "code": "TN"} },
+    {"country": {"name": "Turkey", "code": "TR"} },
+    {"country": {"name": "Turkmenistan", "code": "TM"} },
+    {"country": {"name": "Turks and Caicos Islands", "code": "TC"} },
+    {"country": {"name": "Tuvalu", "code": "TV"} },
+    {"country": {"name": "Uganda", "code": "UG"} },
+    {"country": {"name": "Ukraine", "code": "UA"} },
+    {"country": {"name": "United Arab Emirates", "code": "AE"} },
+    {"country": {"name": "United Kingdom", "code": "GB"} },
+    {"country": {"name": "United States", "code": "US"} },
+    {"country": {"name": "United States Minor Outlying Islands", "code": "UM"} },
+    {"country": {"name": "Uruguay", "code": "UY"} },
+    {"country": {"name": "Uzbekistan", "code": "UZ"} },
+    {"country": {"name": "Vanuatu", "code": "VU"} },
+    {"country": {"name": "Venezuela", "code": "VE"} },
+    {"country": {"name": "Viet Nam", "code": "VN"} },
+    {"country": {"name": "Virgin Islands, British", "code": "VG"} },
+    {"country": {"name": "Virgin Islands, U.S.", "code": "VI"} },
+    {"country": {"name": "Wallis and Futuna", "code": "WF"} },
+    {"country": {"name": "Western Sahara", "code": "EH"} },
+    {"country": {"name": "Yemen", "code": "YE"} },
+    {"country": {"name": "Zambia", "code": "ZM"} },
+    {"country": {"name": "Zimbabwe", "code": "ZW"} }
 ]
diff --git a/packages/oui-select/src/select.html b/packages/oui-select/src/select.html
index 14dfebfb..2aa14785 100644
--- a/packages/oui-select/src/select.html
+++ b/packages/oui-select/src/select.html
@@ -10,10 +10,10 @@
     search-enabled="{{::!!$ctrl.searchable}}"
     theme="oui-ui-select">
     <ui-select-match placeholder="{{::$ctrl.placeholder}}">
-        <span ng-bind-html="$item[$ctrl.match] || $item"></span>
+        <span ng-bind-html="$ctrl.getPropertyValue($item)"></span>
     </ui-select-match>
     <ui-select-choices repeat="$item in $ctrl.items | filter: $select.search track by $index"
         ui-disable-choice="$ctrl.disableItems({ $item: $item })">
-        <span ng-bind-html="($item[$ctrl.match] || $item) | highlight: $select.search"></span>
+        <span ng-bind-html="$ctrl.getPropertyValue($item) | highlight: $select.search"></span>
     </ui-select-choices>
 </ui-select>

From af4e3dd0b53315c3c66bf091d39d331a55019461 Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Thu, 10 Jan 2019 13:57:14 +0100
Subject: [PATCH 12/14] test(oui-select): fix data property path

---
 packages/oui-select/src/index.spec.js | 38 +++++++++++++--------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/oui-select/src/index.spec.js b/packages/oui-select/src/index.spec.js
index 8bf74621..9b40b6d8 100644
--- a/packages/oui-select/src/index.spec.js
+++ b/packages/oui-select/src/index.spec.js
@@ -40,7 +40,7 @@ describe("ouiSelect", () => {
                     title="${title}"
                     placeholder="${placeholder}"
                     items="$ctrl.countries"
-                    match="name">
+                    match="country.name">
                 </oui-select>`, {
                 countries: data
             });
@@ -58,7 +58,7 @@ describe("ouiSelect", () => {
                     title="Select a country"
                     placeholder="Select a country..."
                     items="$ctrl.countries"
-                    match="name">
+                    match="country.name">
                 </oui-select>`, {
                 countries: data
             });
@@ -84,8 +84,8 @@ describe("ouiSelect", () => {
                         title="Select a country"
                         placeholder="Select a country..."
                         items="$ctrl.countries"
-                        match="name">
-                        <span ng-bind="$item.name"></span>
+                        match="country.name">
+                        <span ng-bind="$item.country.name"></span>
                     </oui-select>
                     <button class="outside-button">Outside</button>
                 </div>`, {
@@ -111,8 +111,8 @@ describe("ouiSelect", () => {
                         title="Select a country"
                         placeholder="Select a country..."
                         items="$ctrl.countries"
-                        match="name">
-                        <span ng-bind="$item.name"></span>
+                        match="country.name">
+                        <span ng-bind="$item.country.name"></span>
                     </oui-select>`, {
                     countries: data
                 });
@@ -148,7 +148,7 @@ describe("ouiSelect", () => {
                         title="Select a country"
                         placeholder="Select a country..."
                         items="$ctrl.countries"
-                        match="name"
+                        match="country.name"
                         multiple>
                     </oui-select>`, {
                     countries: data
@@ -176,7 +176,7 @@ describe("ouiSelect", () => {
                         title="Select a country"
                         placeholder="Select a country..."
                         items="$ctrl.countries"
-                        match="name"
+                        match="country.name"
                         multiple>
                     </oui-select>`, {
                     countries: data
@@ -215,7 +215,7 @@ describe("ouiSelect", () => {
                         title="Select a country"
                         placeholder="Select a country..."
                         items="$ctrl.countries"
-                        match="name">
+                        match="country.name">
                     </oui-select>`, {
                     countries: data
                 });
@@ -225,8 +225,8 @@ describe("ouiSelect", () => {
                 $triggerButton.triggerHandler("click");
 
                 expect(getDropdownItems(element).length).toEqual(data.length);
-                expect(angular.element(getDropdownItem(element, 0)).text()).toContain(data[0].name);
-                expect(angular.element(getDropdownItem(element, data.length - 1)).text()).toContain(data[data.length - 1].name);
+                expect(angular.element(getDropdownItem(element, 0)).text()).toContain(data[0].country.name);
+                expect(angular.element(getDropdownItem(element, data.length - 1)).text()).toContain(data[data.length - 1].country.name);
                 expect(getItemsGroups(element).length).toEqual(1);
             });
 
@@ -254,14 +254,14 @@ describe("ouiSelect", () => {
 
         describe("Grouped", () => {
             it("should display all the choices", () => {
-                const groupByFirstLetter = (item) => item.name.substr(0, 1).toUpperCase();
+                const groupByFirstLetter = (item) => item.country.name.substr(0, 1).toUpperCase();
                 const element = TestUtils.compileTemplate(`
                     <oui-select name="country"
                         model="$ctrl.country"
                         title="Select a country"
                         placeholder="Select a country..."
                         items="$ctrl.countries"
-                        match="name"
+                        match="country.name"
                         group-by="$ctrl.groupByFirstLetter">
                     </oui-select>`, {
                     countries: data,
@@ -292,7 +292,7 @@ describe("ouiSelect", () => {
                         title="Select a country"
                         placeholder="Select a country..."
                         items="$ctrl.countries"
-                        match="name"
+                        match="country.name"
                         on-blur="$ctrl.onBlur()">
                     </oui-select>`, {
                     onBlur
@@ -318,7 +318,7 @@ describe("ouiSelect", () => {
                         title="Select a country"
                         placeholder="Select a country..."
                         items="$ctrl.countries"
-                        match="name"
+                        match="country.name"
                         on-focus="$ctrl.onFocus()">
                     </oui-select>`, {
                     onFocus
@@ -344,7 +344,7 @@ describe("ouiSelect", () => {
                         title="Select a country"
                         placeholder="Select a country..."
                         items="$ctrl.countries"
-                        match="name"
+                        match="country.name"
                         on-change="$ctrl.onChange(modelValue)">
                     </oui-select>`, {
                     countries: data,
@@ -371,7 +371,7 @@ describe("ouiSelect", () => {
 
         describe("Disable options", () => {
             it("should disable corresponding items", () => {
-                const disableCountry = (item) => item.name === data[3].name;
+                const disableCountry = (item) => item.country.name === data[3].country.name;
                 const element = TestUtils.compileTemplate(`
                     <oui-select name="country"
                         model="$ctrl.country"
@@ -379,7 +379,7 @@ describe("ouiSelect", () => {
                         placeholder="Select a country..."
                         items="$ctrl.countries"
                         disable-items="$ctrl.disableCountry($item)"
-                        match="name">
+                        match="country.name">
                     </oui-select>`, {
                     countries: data,
                     disableCountry
@@ -402,7 +402,7 @@ describe("ouiSelect", () => {
                         placeholder="Select a country..."
                         items="$ctrl.countries"
                         disable-items="$ctrl.disableCountry($item)"
-                        match="name">
+                        match="country.name">
                     </oui-select>`, {
                     countries,
                     disableCountry

From e2434da917cfaec4b4fe2a235bd353957e40d0f6 Mon Sep 17 00:00:00 2001
From: Axel Peter <15101925+AxelPeter@users.noreply.github.com>
Date: Thu, 10 Jan 2019 14:03:24 +0100
Subject: [PATCH 13/14] feat(oui-timepicker): add timepicker component (#344)

---
 packages/oui-angular/src/index.js             |   2 +
 packages/oui-calendar/README.md               |  16 ++-
 .../oui-calendar/src/calendar.component.js    |   6 +-
 .../oui-calendar/src/calendar.controller.js   |  32 +++--
 packages/oui-calendar/src/calendar.html       |  13 --
 packages/oui-calendar/src/index.spec.js       |  39 ++----
 packages/oui-timepicker/README.md             | 115 ++++++++++++++++++
 packages/oui-timepicker/package.json          |  10 ++
 packages/oui-timepicker/src/index.js          |   7 ++
 packages/oui-timepicker/src/index.spec.js     |  91 ++++++++++++++
 .../src/timepicker.component.js               |  29 +++++
 .../src/timepicker.controller.js              |  61 ++++++++++
 packages/oui-timepicker/src/timepicker.html   |  16 +++
 packages/oui-timepicker/tests/index.js        |   7 ++
 14 files changed, 388 insertions(+), 56 deletions(-)
 create mode 100644 packages/oui-timepicker/README.md
 create mode 100644 packages/oui-timepicker/package.json
 create mode 100644 packages/oui-timepicker/src/index.js
 create mode 100644 packages/oui-timepicker/src/index.spec.js
 create mode 100644 packages/oui-timepicker/src/timepicker.component.js
 create mode 100644 packages/oui-timepicker/src/timepicker.controller.js
 create mode 100644 packages/oui-timepicker/src/timepicker.html
 create mode 100644 packages/oui-timepicker/tests/index.js

diff --git a/packages/oui-angular/src/index.js b/packages/oui-angular/src/index.js
index 04abcbef..d90dbe87 100644
--- a/packages/oui-angular/src/index.js
+++ b/packages/oui-angular/src/index.js
@@ -39,6 +39,7 @@ 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 Timepicker from "@ovh-ui/oui-timepicker";
 import Tooltip from "@ovh-ui/oui-tooltip";
 
 export default angular
@@ -84,6 +85,7 @@ export default angular
         Tabs,
         Textarea,
         Tile,
+        Timepicker,
         Tooltip
     ])
     .name;
diff --git a/packages/oui-calendar/README.md b/packages/oui-calendar/README.md
index 0d54e3cd..29e3a1c2 100644
--- a/packages/oui-calendar/README.md
+++ b/packages/oui-calendar/README.md
@@ -160,6 +160,16 @@ Use `mode` to set a different selection mode for the calendar
 * `selectedDates` returns an array of Date objects selected by the user. When there are no dates selected, the array is empty.
 * `dateStr` returns a string representation of the latest selected Date object by the user. The string is formatted as per the `dateFormat` option.
 
+## Variants
+
+### Timepicker
+
+See <a href="#!/oui-angular/timepicker">Action menu component</a>.
+
+```html:preview
+<oui-timepicker model="$ctrl.timepickerModel" placeholder="HH:MM"></oui-timepicker>
+```
+
 ## API
 
 | Attribute         | Type      | Binding   | One-time Binding  | Values                                                                                    | Default   | Description
@@ -168,19 +178,19 @@ Use `mode` to set a different selection mode for the calendar
 | `id`              | string    | @?        | yes               | n/a                                                                                       | n/a       | id attribute of the field
 | `name`            | string    | @?        | yes               | n/a                                                                                       | n/a       | name attribute of the field
 | `placeholder`     | string    | @?        | yes               | n/a                                                                                       | n/a       | placeholder text
-| `inline`          | boolean   | <?        | no                | `true`, `false`                                                                           | `false`   | show the calendar below the input
-| `static`          | boolean   | <?        | no                | `true`, `false`                                                                           | `false`   | position the calendar relatively to the input
 | `mode`            | string    | @?        | yes               | `single`, `multiple`, `range`                                                             | `single`  | selection mode
 | `format`          | string    | @?        | yes               | See [Formatting Tokens](https://flatpickr.js.org/formatting/)                             | `Y-m-d`   | format the date of the model
 | `alt-format`      | string    | @?        | yes               | See [Formatting Tokens](https://flatpickr.js.org/formatting/)                             | `Y-m-d`   | format the date of the field. `format` is used if undefined
 | `append-to-body`  | boolean   | <?        | yes               | `true`, `false`                                                                           | `false`   | append the calendar to the body of the page
-| `inline`          | boolean   | <?        | yes               | `true`, `false`                                                                           | `false`   | show the calendar below the input in `inline-block`
+| `inline`          | boolean   | <?        | no                | `true`, `false`                                                                           | `false`   | show the calendar below the input
+| `static`          | boolean   | <?        | no                | `true`, `false`                                                                           | `false`   | position the calendar relatively to the input
 | `max-date`        | object    | <?        | yes               | See [Supplying Dates](https://flatpickr.js.org/examples/#supplying-dates-for-flatpickr)   | n/a       | specifies the maximum/latest date (inclusively) allowed for selection
 | `min-date`        | object    | <?        | yes               | See [Supplying Dates](https://flatpickr.js.org/examples/#supplying-dates-for-flatpickr)   | n/a       | specifies the minimum/earliest date (inclusively) allowed for selection
 | `disable-date`    | array     | <?        | yes               | See [Supplying Dates](https://flatpickr.js.org/examples/#supplying-dates-for-flatpickr)   | n/a       | make certain dates unavailable for selection
 | `enable-date`     | array     | <?        | yes               | See [Supplying Dates](https://flatpickr.js.org/examples/#supplying-dates-for-flatpickr)   | n/a       | make certain dates only available for selection
 | `enable-time`     | boolean   | <?        | yes               | `true`, `false`                                                                           | `false`   | enables time selection
 | `week-numbers`    | boolean   | <?        | yes               | `true`, `false`                                                                           | `false`   | week numbers flag
+| `options`         | object    | <?        | yes               | See [Options](https://flatpickr.js.org/options/)                                          | n/a       | flatpickr options for more advanced configuration
 | `disabled`        | boolean   | <?        | no                | `true`, `false`                                                                           | `false`   | disabled flag
 | `required`        | boolean   | <?        | no                | `true`, `false`                                                                           | `false`   | required flag
 | `on-change`       | function  | &         | no                | n/a                                                                                       | n/a       | handler triggered when the user selects a date, or changes the time on a selected date
diff --git a/packages/oui-calendar/src/calendar.component.js b/packages/oui-calendar/src/calendar.component.js
index 3b3c039c..96cd38e0 100644
--- a/packages/oui-calendar/src/calendar.component.js
+++ b/packages/oui-calendar/src/calendar.component.js
@@ -14,16 +14,18 @@ export default {
 
         appendToBody: "<?",
         inline: "<?",
+        "static": "<?",
         maxDate: "<?",
         minDate: "<?",
         disableDate: "<?",
         enableDate: "<?",
-
         enableTime: "<?",
+        weekNumbers: "<?",
+
+        options: "<?",
 
         disabled: "<?",
         required: "<?",
-        weekNumbers: "<?",
 
         onChange: "&",
         onClose: "&",
diff --git a/packages/oui-calendar/src/calendar.controller.js b/packages/oui-calendar/src/calendar.controller.js
index 794485bb..2d8b516b 100644
--- a/packages/oui-calendar/src/calendar.controller.js
+++ b/packages/oui-calendar/src/calendar.controller.js
@@ -1,15 +1,17 @@
-import { addBooleanParameter } from "@ovh-ui/common/component-utils";
+import { addBooleanParameter, addDefaultParameter } from "@ovh-ui/common/component-utils";
 import Flatpickr from "flatpickr";
+import merge from "lodash/merge";
 
 export default class {
-    constructor ($attrs, $element, $timeout, ouiCalendarConfiguration) {
+    constructor ($attrs, $element, $scope, $timeout, ouiCalendarConfiguration) {
         "ngInject";
 
         this.$attrs = $attrs;
         this.$element = $element;
+        this.$id = $scope.$id;
         this.$timeout = $timeout;
         this.locale = ouiCalendarConfiguration.locale;
-        this.options = angular.copy(ouiCalendarConfiguration.options);
+        this.config = angular.copy(ouiCalendarConfiguration.options);
     }
 
     setModelValue (value) {
@@ -19,7 +21,7 @@ export default class {
     setEventHooks (hooks) {
         // Add a callback for each events
         hooks.forEach((hook) => {
-            this.options[hook] = (selectedDates, dateStr) => {
+            this.config[hook] = (selectedDates, dateStr) => {
                 this.model = dateStr;
                 this.$timeout(this[hook]({ selectedDates, dateStr }));
             };
@@ -28,11 +30,15 @@ export default class {
 
     setOptionsProperty (property, value) {
         if (angular.isDefined(value)) {
-            this.options[property] = value;
+            this.config[property] = value;
         }
     }
 
     initCalendarInstance () {
+        if (this.options) {
+            this.config = merge(this.config, this.options);
+        }
+
         // Set options from attributes
         this.setOptionsProperty("appendTo", this.appendTo);
         this.setOptionsProperty("defaultDate", this.model);
@@ -50,7 +56,7 @@ export default class {
         this.setOptionsProperty("dateFormat", this.format);
 
         if (angular.isDefined(this.altFormat)) {
-            this.setOptionsProperty("altInput", true);
+            this.setOptionsProperty("altInput", !this.disabled);
             this.setOptionsProperty("altFormat", this.altFormat);
         }
 
@@ -76,7 +82,7 @@ export default class {
         });
 
         // Init the flatpickr instance
-        this.flatpickr = new Flatpickr(this.$element.find("input")[0], this.options);
+        this.flatpickr = new Flatpickr(this.$element.find("input")[0], this.config);
     }
 
     $onInit () {
@@ -84,10 +90,14 @@ export default class {
         addBooleanParameter(this, "disabled");
         addBooleanParameter(this, "enableTime");
         addBooleanParameter(this, "inline");
+        addBooleanParameter(this, "noCalendar");
         addBooleanParameter(this, "required");
         addBooleanParameter(this, "static");
         addBooleanParameter(this, "weekNumbers");
 
+        addDefaultParameter(this, "id", `ouiCalendar${this.$id}`);
+        addDefaultParameter(this, "name", `ouiCalendar${this.$id}`);
+
         this.initCalendarInstance();
     }
 
@@ -96,16 +106,20 @@ export default class {
     }
 
     $postLink () {
-        // Avoid $element DOM unsync for jqLite methods
         this.$timeout(() => {
+            const controls = angular.element(this.$element[0].querySelectorAll(".oui-calendar__control"));
+
             this.$element
                 .addClass("oui-calendar")
                 .removeAttr("id")
                 .removeAttr("name");
 
-            // Add class for `inline`
+            // Avoid 'alt-input' to take bad value of placeholder
+            controls.attr("placeholder", this.placeholder);
+
             if (this.inline) {
                 this.$element.addClass("oui-calendar_inline");
+                controls.attr("type", "hidden");
             }
         });
     }
diff --git a/packages/oui-calendar/src/calendar.html b/packages/oui-calendar/src/calendar.html
index a422784f..67b32f10 100644
--- a/packages/oui-calendar/src/calendar.html
+++ b/packages/oui-calendar/src/calendar.html
@@ -3,20 +3,7 @@
         autocomplete="off"
         ng-attr-id="{{::$ctrl.id}}"
         ng-attr-name="{{::$ctrl.name}}"
-        ng-attr-placeholder="{{::$ctrl.placeholder}}"
         ng-model="$ctrl.model"
         ng-disabled="$ctrl.disabled"
         ng-required="$ctrl.required" />
 </div>
-<!-- TEMP: Waiting for UI (Uncomment specs too)
-<button type="button"
-    ng-disabled="$ctrl.disabled"
-    ng-click="$ctrl.setModelValue('today')">
-    Today
-</button>
-<button type="button"
-    ng-disabled="$ctrl.disabled"
-    ng-show="$ctrl.model.length"
-    ng-click="$ctrl.setModelValue()">
-    Reset
-</button> -->
diff --git a/packages/oui-calendar/src/index.spec.js b/packages/oui-calendar/src/index.spec.js
index e35fedf1..d0bf51a4 100644
--- a/packages/oui-calendar/src/index.spec.js
+++ b/packages/oui-calendar/src/index.spec.js
@@ -65,7 +65,7 @@ describe("ouiCalendar", () => {
 
             $timeout.flush();
 
-            expect(controller.options.inline).toBe(true);
+            expect(controller.config.inline).toBe(true);
             expect(component.hasClass("oui-calendar_inline")).toBe(true);
         });
 
@@ -76,7 +76,7 @@ describe("ouiCalendar", () => {
 
             $timeout.flush();
 
-            expect(controller.options.appendTo).toBeUndefined();
+            expect(controller.config.appendTo).toBeUndefined();
             expect(calendar).toBeNull();
         });
 
@@ -98,6 +98,8 @@ describe("ouiCalendar", () => {
             const component = testUtils.compileTemplate('<oui-calendar model="$ctrl.model" placeholder="foo"></oui-calendar>');
             const input = component.find("input");
 
+            $timeout.flush();
+
             expect(input.attr("placeholder")).toBe("foo");
         });
 
@@ -106,7 +108,7 @@ describe("ouiCalendar", () => {
             const ctrl = component.controller("ouiCalendar");
 
             ctrl.setOptionsProperty("foo", "bar");
-            expect(ctrl.options.foo).toBe("bar");
+            expect(ctrl.config.foo).toBe("bar");
         });
 
         it("should change the value formatting of the model and the input", () => {
@@ -124,9 +126,9 @@ describe("ouiCalendar", () => {
             const input = component[0].querySelector(".oui-calendar__control");
             const altInput = component[0].querySelector(".oui-calendar__control_alt");
 
-            expect(ctrl.options.dateFormat).toBe(format);
-            expect(ctrl.options.altInput).toBe(true);
-            expect(ctrl.options.altFormat).toBe(altFormat);
+            expect(ctrl.config.dateFormat).toBe(format);
+            expect(ctrl.config.altInput).toBe(true);
+            expect(ctrl.config.altFormat).toBe(altFormat);
             expect(input.value).toBe(formatDate);
             expect(altInput.value).toBe(altFormatDate);
         });
@@ -136,7 +138,7 @@ describe("ouiCalendar", () => {
             const ctrl = component.controller("ouiCalendar");
 
             ctrl.setEventHooks(["foo"]);
-            expect(typeof ctrl.options.foo).toBe("function");
+            expect(typeof ctrl.config.foo).toBe("function");
         });
 
         it("should call function of events attributes", () => {
@@ -153,7 +155,7 @@ describe("ouiCalendar", () => {
                 onOpenSpy
             });
             const ctrl = component.controller("ouiCalendar");
-            const today = ctrl.flatpickr.parseDate("today", ctrl.options.dateFormat);
+            const today = ctrl.flatpickr.parseDate("today", ctrl.config.dateFormat);
 
             ctrl.setModelValue(today);
             expect(onChangeSpy).toHaveBeenCalledWith([today], ctrl.model);
@@ -162,26 +164,5 @@ describe("ouiCalendar", () => {
             ctrl.flatpickr.close();
             expect(onCloseSpy).toHaveBeenCalledWith([today], ctrl.model);
         });
-
-        // it("should set the value to today's date when 'today' button is clicked", () => {
-        //     const component = testUtils.compileTemplate('<oui-calendar model="$ctrl.model"></oui-calendar>');
-        //     const ctrl = component.controller("ouiCalendar");
-        //     const button = component.find("button").eq(0);
-        //     const today = ctrl.flatpickr.formatDate(new Date(), ctrl.options.dateFormat);
-
-        //     button.triggerHandler("click");
-        //     expect(ctrl.model).toBe(today);
-        // });
-
-        // it("should reset the value when 'reset' button is clicked", () => {
-        //     const component = testUtils.compileTemplate('<oui-calendar model="$ctrl.model"></oui-calendar>', {
-        //         model: "today"
-        //     });
-        //     const ctrl = component.controller("ouiCalendar");
-        //     const button = component.find("button").eq(1);
-
-        //     button.triggerHandler("click");
-        //     expect(ctrl.model).toBe("");
-        // });
     });
 });
diff --git a/packages/oui-timepicker/README.md b/packages/oui-timepicker/README.md
new file mode 100644
index 00000000..d24d0896
--- /dev/null
+++ b/packages/oui-timepicker/README.md
@@ -0,0 +1,115 @@
+# Timepicker
+
+<component-status cx-design="partial" ux="beta"></component-status>
+
+## Usage
+
+### Basic
+
+```html:preview
+<oui-timepicker model="$ctrl.basicModel"></oui-timepicker>
+```
+
+### Placeholder
+
+```html:preview
+<oui-timepicker model="$ctrl.placeholderModel" placeholder="HH:MM"></oui-timepicker>
+```
+
+### Disabled
+
+```html:preview
+<oui-timepicker model="$ctrl.disabledModel" disabled></oui-timepicker>
+```
+
+### Enabling seconds
+
+Use `enable-seconds` to show seconds selector.
+
+```html:preview
+<oui-timepicker model="$ctrl.secondsEnabledModel" format="H:i:S" enable-seconds></oui-timepicker>
+```
+
+### Enabling AM/PM
+
+Use `enable-am-pm` to show AM/PM selector.
+
+```html:preview
+<oui-timepicker model="$ctrl.amPmEnabledModel" format="h:i K" enable-am-pm></oui-timepicker>
+```
+
+### Time formatting
+
+<oui-message type="info" dismissable="false">
+    See <a href="https://flatpickr.js.org/formatting/">Formatting Tokens</a> for more information.
+</oui-message>
+
+```html:preview
+<oui-timepicker model="$ctrl.formatModel" format="H:i" alt-format="h:i K" enable-am-pm>
+</oui-timepicker>
+<div class="oui-doc-preview-only">
+    <p><strong>Model value:</strong> {{$ctrl.formatModel | json}}</p>
+</div>
+```
+
+### Inline
+
+```html:preview
+<div>
+    <oui-timepicker model="$ctrl.inlineModel" inline></oui-timepicker>
+</div>
+<div>
+    <oui-timepicker model="$ctrl.inlineModel" inline enable-seconds></oui-timepicker>
+</div>
+<div>
+    <oui-timepicker model="$ctrl.inlineModel" inline enable-am-pm></oui-timepicker>
+</div>
+<div>
+    <oui-timepicker model="$ctrl.inlineModel" inline enable-seconds enable-am-pm></oui-timepicker>
+</div>
+```
+
+### Events
+
+<oui-message type="info" dismissable="false">
+    If you want to access the model inside callbacks, you need to use the <code class="oui-doc-codespan">modelValue</code> variable as below.
+</oui-message>
+
+```html:preview
+<oui-timepicker
+    model="$ctrl.eventsModel"
+    format="H:i"
+    alt-format="h:i K"
+    enable-am-pm
+    on-change="$ctrl.onChange(modelValue)"
+    on-close="$ctrl.onClose(modelValue)"
+    on-open="$ctrl.onOpen(modelValue)">
+</oui-timepicker>
+<div class="oui-doc-preview-only">
+    <p><strong>Model value:</strong> {{$ctrl.eventsModel | json}}</p>
+    <p><strong>onChange values:</strong> {{$ctrl.onChangeValue | json}}</p>
+    <p><strong>onOpen values:</strong> {{$ctrl.onOpenValue | json}}</p>
+    <p><strong>onClose values:</strong> {{$ctrl.onCloseValue | json}}</p>
+</div>
+```
+
+## API
+
+| Attribute         | Type      | Binding   | One-time Binding  | Values                                                                                    | Default   | Description
+| ----              | ----      | ----      | ----              | ----                                                                                      | ----      | ----
+| `model`           | object    | =         | no                | See [Supplying Dates](https://flatpickr.js.org/examples/#supplying-dates-for-flatpickr)   | n/a       | model bound to component
+| `id`              | string    | @?        | yes               | n/a                                                                                       | n/a       | id attribute of the field
+| `name`            | string    | @?        | yes               | n/a                                                                                       | n/a       | name attribute of the field
+| `placeholder`     | string    | @?        | yes               | n/a                                                                                       | n/a       | placeholder text
+| `format`          | string    | @?        | yes               | See [Formatting Tokens](https://flatpickr.js.org/formatting/)                             | `H:i`     | format the date of the model
+| `alt-format`      | string    | @?        | yes               | See [Formatting Tokens](https://flatpickr.js.org/formatting/)                             | `H:i`     | format the date of the field. `format` is used if undefined
+| `append-to-body`  | boolean   | <?        | yes               | `true`, `false`                                                                           | `false`   | append the timepicker to the body of the page
+| `inline`          | boolean   | <?        | no                | `true`, `false`                                                                           | `false`   | show the timepicker below the input
+| `static`          | boolean   | <?        | no                | `true`, `false`                                                                           | `false`   | position the timepicker relatively to the input
+| `enable-seconds`  | boolean   | <?        | yes               | `true`, `false`                                                                           | `false`   | enables seconds selection
+| `enable-am-pm`    | boolean   | <?        | yes               | `true`, `false`                                                                           | `false`   | enables am/pm selection
+| `disabled`        | boolean   | <?        | no                | `true`, `false`                                                                           | `false`   | disabled flag
+| `required`        | boolean   | <?        | no                | `true`, `false`                                                                           | `false`   | required flag
+| `on-change`       | function  | &         | no                | n/a                                                                                       | n/a       | handler triggered when the user change the selected time
+| `on-close`        | function  | &         | no                | n/a                                                                                       | n/a       | handler triggered when the timepicker is closed
+| `on-open`         | function  | &         | no                | n/a                                                                                       | n/a       | handler triggered when the timepicker is opened
diff --git a/packages/oui-timepicker/package.json b/packages/oui-timepicker/package.json
new file mode 100644
index 00000000..303f6da6
--- /dev/null
+++ b/packages/oui-timepicker/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@ovh-ui/oui-timepicker",
+  "version": "1.0.0",
+  "main": "./src/index.js",
+  "license": "BSD-3-Clause",
+  "author": "OVH SAS",
+  "dependencies": {
+    "@ovh-ui/oui-calendar": "^1.0.0"
+  }
+}
diff --git a/packages/oui-timepicker/src/index.js b/packages/oui-timepicker/src/index.js
new file mode 100644
index 00000000..894914fc
--- /dev/null
+++ b/packages/oui-timepicker/src/index.js
@@ -0,0 +1,7 @@
+import Calendar from "@ovh-ui/oui-calendar";
+import Timepicker from "./timepicker.component";
+
+export default angular
+    .module("oui.timepicker", [Calendar])
+    .component("ouiTimepicker", Timepicker)
+    .name;
diff --git a/packages/oui-timepicker/src/index.spec.js b/packages/oui-timepicker/src/index.spec.js
new file mode 100644
index 00000000..221fed93
--- /dev/null
+++ b/packages/oui-timepicker/src/index.spec.js
@@ -0,0 +1,91 @@
+describe("ouiCalendar", () => {
+    let $timeout;
+    let testUtils;
+
+    beforeEach(angular.mock.module("oui.timepicker"));
+    beforeEach(angular.mock.module("oui.test-utils"));
+
+    beforeEach(inject((_$timeout_, _TestUtils_) => {
+        $timeout = _$timeout_;
+        testUtils = _TestUtils_;
+    }));
+
+    describe("Component", () => {
+        it("should add the classname .oui-timepicker on the root element", () => {
+            const component = testUtils.compileTemplate('<oui-timepicker model="$ctrl.model"></oui-timepicker>');
+
+            $timeout.flush();
+
+            expect(component.hasClass("oui-timepicker")).toBe(true);
+        });
+
+        it("should have an attribute id and name on the input, and removed on the root component", () => {
+            const component = testUtils.compileTemplate('<oui-timepicker id="foo" name="bar" model="$ctrl.model"></oui-timepicker>');
+            const input = component.find("input");
+
+            $timeout.flush();
+
+            expect(component.attr("id")).toBe(undefined);
+            expect(input.attr("id")).toBe("foo");
+
+            expect(component.attr("name")).toBe(undefined);
+            expect(input.attr("name")).toBe("bar");
+        });
+
+        it("should set the picker inline", () => {
+            const component = testUtils.compileTemplate('<oui-timepicker model="$ctrl.model" inline></oui-timepicker>');
+            const controller = component.controller("ouiTimepicker");
+
+            $timeout.flush();
+
+            expect(controller.inline).toBe(true);
+            expect(component.hasClass("oui-timepicker_inline")).toBe(true);
+        });
+
+        it("should append the picker to the body", () => {
+            const component = testUtils.compileTemplate('<oui-timepicker model="$ctrl.model" append-to-body></oui-timepicker>');
+            const picker = component[0].querySelector(".flatpickr-calendar");
+
+            $timeout.flush();
+
+            expect(picker).toBeNull();
+        });
+
+        it("should have disabled the input", () => {
+            const component = testUtils.compileTemplate('<oui-timepicker model="$ctrl.model" disabled></oui-timepicker>');
+            const input = component.find("input");
+
+            expect(input.attr("disabled")).toBe("disabled");
+        });
+
+        it("should have required the input", () => {
+            const component = testUtils.compileTemplate('<oui-timepicker model="$ctrl.model" required></oui-timepicker>');
+            const input = component.find("input");
+
+            expect(input.attr("required")).toBe("required");
+        });
+
+        it("should have a placeholder on the input", () => {
+            const component = testUtils.compileTemplate('<oui-timepicker model="$ctrl.model" placeholder="foo"></oui-timepicker>');
+            const input = component.find("input");
+
+            $timeout.flush();
+
+            expect(input.attr("placeholder")).toBe("foo");
+        });
+
+        it("should set 'enableSeconds' to true", () => {
+            const component = testUtils.compileTemplate('<oui-timepicker model="$ctrl.model" enable-seconds></oui-timepicker>');
+            const controller = component.controller("ouiTimepicker");
+
+            expect(controller.options.enableSeconds).toBe(true);
+        });
+
+        it("should set 'time_24hr' to false", () => {
+            const component = testUtils.compileTemplate('<oui-timepicker model="$ctrl.model" enable-am-pm></oui-timepicker>');
+            const controller = component.controller("ouiTimepicker");
+
+            expect(controller.options.time_24hr).toBe(false);
+        });
+    });
+});
diff --git a/packages/oui-timepicker/src/timepicker.component.js b/packages/oui-timepicker/src/timepicker.component.js
new file mode 100644
index 00000000..20e37b66
--- /dev/null
+++ b/packages/oui-timepicker/src/timepicker.component.js
@@ -0,0 +1,29 @@
+import controller from "./timepicker.controller";
+import template from "./timepicker.html";
+
+export default {
+    bindings: {
+        model: "=",
+
+        id: "@?",
+        name: "@?",
+        placeholder: "@?",
+        format: "@?",
+        altFormat: "@?",
+
+        appendToBody: "<?",
+        inline: "<?",
+        "static": "<?",
+        enableSeconds: "<?",
+        enableAmPm: "<?",
+
+        disabled: "<?",
+        required: "<?",
+
+        onChange: "&",
+        onClose: "&",
+        onOpen: "&"
+    },
+    controller,
+    template
+};
diff --git a/packages/oui-timepicker/src/timepicker.controller.js b/packages/oui-timepicker/src/timepicker.controller.js
new file mode 100644
index 00000000..245383d5
--- /dev/null
+++ b/packages/oui-timepicker/src/timepicker.controller.js
@@ -0,0 +1,61 @@
+import { addBooleanParameter, addDefaultParameter } from "@ovh-ui/common/component-utils";
+
+export default class {
+    constructor ($attrs, $element, $timeout) {
+        "ngInject";
+
+        this.$attrs = $attrs;
+        this.$element = $element;
+        this.$timeout = $timeout;
+
+        this.options = {
+            enableTime: true,
+            enableSeconds: false,
+            noCalendar: true,
+            dateFormat: "H:i",
+            time_24hr: true
+        };
+    }
+
+    setOptionsProperty (property, value) {
+        if (angular.isDefined(value)) {
+            this.options[property] = value;
+        }
+    }
+
+    $onInit () {
+        addDefaultParameter(this, "id", `ouiTimepicker${this.$id}`);
+        addDefaultParameter(this, "name", `ouiTimepicker${this.$id}`);
+        addDefaultParameter(this, "format", this.options.dateFormat);
+        addDefaultParameter(this, "altFormat", this.format || this.options.dateFormat);
+
+        addBooleanParameter(this, "appendToBody");
+        addBooleanParameter(this, "disabled");
+        addBooleanParameter(this, "enableSeconds");
+        addBooleanParameter(this, "enableAmPm");
+        addBooleanParameter(this, "inline");
+        addBooleanParameter(this, "required");
+        addBooleanParameter(this, "static");
+
+        this.setOptionsProperty("enableSeconds", this.enableSeconds);
+        this.setOptionsProperty("time_24hr", !this.enableAmPm);
+
+        // flatpickr's timepicker need a default value to work in inline mode
+        if (this.inline) {
+            this.setOptionsProperty("defaultDate", this.model || "today");
+        }
+    }
+
+    $postLink () {
+        this.$timeout(() => {
+            this.$element
+                .addClass("oui-timepicker")
+                .removeAttr("id")
+                .removeAttr("name");
+
+            if (this.inline) {
+                this.$element.addClass("oui-timepicker_inline");
+            }
+        });
+    }
+}
diff --git a/packages/oui-timepicker/src/timepicker.html b/packages/oui-timepicker/src/timepicker.html
new file mode 100644
index 00000000..391f6161
--- /dev/null
+++ b/packages/oui-timepicker/src/timepicker.html
@@ -0,0 +1,16 @@
+<oui-calendar model="$ctrl.model"
+    id="{{::$ctrl.id}}"
+    name="{{::$ctrl.name}}"
+    options="$ctrl.options"
+    placeholder="{{::$ctrl.placeholder}}"
+    format="{{::$ctrl.format}}"
+    alt-format="{{::$ctrl.altFormat}}"
+    append-to-body="$ctrl.appendToBody"
+    inline="$ctrl.inline"
+    static="$ctrl.static"
+    disabled="$ctrl.disabled"
+    required="$ctrl.required"
+    on-change="$ctrl.onChange({ modelValue: dateStr })"
+    on-close="$ctrl.onClose({ modelValue: dateStr })"
+    on-open="$ctrl.onOpen({ modelValue: dateStr })">
+</oui-calendar>
diff --git a/packages/oui-timepicker/tests/index.js b/packages/oui-timepicker/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-timepicker/tests/index.js
@@ -0,0 +1,7 @@
+import "@ovh-ui/common/test-utils";
+
+loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
+
+function loadTests (context) {
+    context.keys().forEach(context);
+}

From a636551357cff629fa540c901227ea3a6e78d9ee Mon Sep 17 00:00:00 2001
From: Axel Peter <15101925+AxelPeter@users.noreply.github.com>
Date: Mon, 14 Jan 2019 10:33:01 +0100
Subject: [PATCH 14/14]  refactor(oui-criteria): refactor
 oui-criteria-container to oui-criteria (#345)

* refactor(oui-criteria): refactor oui-criteria-container to oui-criteria

* refactor(oui-criteria): create criteria component
---
 packages/common/component-utils.js            |  15 +-
 packages/oui-angular/package.json             |   3 +-
 packages/oui-angular/src/index.js             |   6 +-
 packages/oui-chips/src/chips.component.js     |   3 -
 packages/oui-chips/src/chips.controller.js    |   4 -
 packages/oui-chips/src/index.spec.js          |  24 --
 packages/oui-criteria-adder/src/index.js      |   9 +-
 .../src/criteria-container.component.js       |  10 -
 .../src/criteria-container.controller.js      |  75 ----
 packages/oui-criteria-container/src/index.js  |   7 +-
 .../oui-criteria-container/src/index.spec.js  | 143 --------
 .../oui-criteria-container/tests/index.js     |   7 -
 .../README.md                                 |  88 +++--
 packages/oui-criteria/package.json            |  14 +
 .../src/adder}/criteria-adder.component.js    |   6 +-
 .../src/adder}/criteria-adder.controller.js   |  66 ++--
 .../src/adder}/criteria-adder.html            |   0
 .../src/adder}/criteria-adder.provider.js     |   0
 .../src/adder/criteria-adder.spec.data.json}  |   0
 .../src/adder/criteria-adder.spec.js}         |  15 +-
 .../oui-criteria/src/criteria.component.js    |  14 +
 .../oui-criteria/src/criteria.controller.js   | 117 ++++++
 packages/oui-criteria/src/criteria.html       |  25 ++
 packages/oui-criteria/src/index.js            |  21 ++
 packages/oui-criteria/src/index.spec.js       | 336 ++++++++++++++++++
 .../tests/index.js                            |   0
 packages/oui-datagrid/package.json            |   4 +
 .../oui-datagrid/src/datagrid.controller.js   |   5 +-
 packages/oui-datagrid/src/datagrid.html       | 217 ++++++-----
 packages/oui-datagrid/src/index.js            |  14 +-
 packages/oui-datagrid/src/index.spec.js       |   1 -
 packages/oui-search/README.md                 |   3 +
 packages/oui-search/src/index.spec.js         | 238 +------------
 packages/oui-search/src/search.component.js   |   7 +-
 packages/oui-search/src/search.controller.js  |  84 +----
 packages/oui-search/src/search.html           |   3 +
 36 files changed, 805 insertions(+), 779 deletions(-)
 delete mode 100644 packages/oui-criteria-container/src/criteria-container.component.js
 delete mode 100644 packages/oui-criteria-container/src/criteria-container.controller.js
 delete mode 100644 packages/oui-criteria-container/src/index.spec.js
 delete mode 100644 packages/oui-criteria-container/tests/index.js
 rename packages/{oui-criteria-adder => oui-criteria}/README.md (61%)
 create mode 100644 packages/oui-criteria/package.json
 rename packages/{oui-criteria-adder/src => oui-criteria/src/adder}/criteria-adder.component.js (75%)
 rename packages/{oui-criteria-adder/src => oui-criteria/src/adder}/criteria-adder.controller.js (94%)
 rename packages/{oui-criteria-adder/src => oui-criteria/src/adder}/criteria-adder.html (100%)
 rename packages/{oui-criteria-adder/src => oui-criteria/src/adder}/criteria-adder.provider.js (100%)
 rename packages/{oui-criteria-adder/src/index.spec.data.json => oui-criteria/src/adder/criteria-adder.spec.data.json} (100%)
 rename packages/{oui-criteria-adder/src/index.spec.js => oui-criteria/src/adder/criteria-adder.spec.js} (96%)
 create mode 100644 packages/oui-criteria/src/criteria.component.js
 create mode 100644 packages/oui-criteria/src/criteria.controller.js
 create mode 100644 packages/oui-criteria/src/criteria.html
 create mode 100644 packages/oui-criteria/src/index.js
 create mode 100644 packages/oui-criteria/src/index.spec.js
 rename packages/{oui-criteria-adder => oui-criteria}/tests/index.js (100%)

diff --git a/packages/common/component-utils.js b/packages/common/component-utils.js
index bfa58020..91067e3a 100644
--- a/packages/common/component-utils.js
+++ b/packages/common/component-utils.js
@@ -9,9 +9,10 @@
  */
 export function addBooleanParameter (controller, parameterName) {
     const ctrl = controller;
-    if (angular.isDefined(ctrl.$attrs[parameterName]) &&
-        ctrl.$attrs[parameterName] === "") {
-        ctrl[parameterName] = true;
+    if (ctrl.$attrs) {
+        if (angular.isDefined(ctrl.$attrs[parameterName]) && ctrl.$attrs[parameterName] === "") {
+            ctrl[parameterName] = true;
+        }
     }
 }
 
@@ -27,9 +28,11 @@ export function addBooleanParameter (controller, parameterName) {
  */
 export function addDefaultParameter (controller, parameterName, defaultValue) {
     const ctrl = controller;
-    if (!angular.isDefined(ctrl.$attrs[parameterName]) ||
-        (angular.isDefined(ctrl.$attrs[parameterName]) && ctrl.$attrs[parameterName].trim() === "")) {
-        ctrl[parameterName] = defaultValue;
+    if (ctrl.$attrs) {
+        if (!angular.isDefined(ctrl.$attrs[parameterName]) ||
+            (angular.isDefined(ctrl.$attrs[parameterName]) && ctrl.$attrs[parameterName].trim() === "")) {
+            ctrl[parameterName] = defaultValue;
+        }
     }
 }
 
diff --git a/packages/oui-angular/package.json b/packages/oui-angular/package.json
index fbf5e08b..a227fcd9 100644
--- a/packages/oui-angular/package.json
+++ b/packages/oui-angular/package.json
@@ -19,8 +19,7 @@
     "@ovh-ui/oui-chips": "^1.0.0",
     "@ovh-ui/oui-clipboard": "^1.0.0",
     "@ovh-ui/oui-collapsible": "^1.0.0",
-    "@ovh-ui/oui-criteria-adder": "^1.0.0",
-    "@ovh-ui/oui-criteria-container": "^1.0.0",
+    "@ovh-ui/oui-criteria": "^1.0.0",
     "@ovh-ui/oui-datagrid": "^1.0.0",
     "@ovh-ui/oui-dropdown": "^1.0.0",
     "@ovh-ui/oui-field": "^1.0.0",
diff --git a/packages/oui-angular/src/index.js b/packages/oui-angular/src/index.js
index d90dbe87..675e886c 100644
--- a/packages/oui-angular/src/index.js
+++ b/packages/oui-angular/src/index.js
@@ -7,6 +7,7 @@ import Checkbox from "@ovh-ui/oui-checkbox";
 import Chips from "@ovh-ui/oui-chips";
 import Clipboard from "@ovh-ui/oui-clipboard";
 import Collapsible from "@ovh-ui/oui-collapsible";
+import Criteria from "@ovh-ui/oui-criteria";
 import CriteriaAdder from "@ovh-ui/oui-criteria-adder";
 import CriteriaContainer from "@ovh-ui/oui-criteria-container";
 import Datagrid from "@ovh-ui/oui-datagrid";
@@ -53,8 +54,9 @@ export default angular
         Chips,
         Clipboard,
         Collapsible,
-        CriteriaAdder,
-        CriteriaContainer,
+        Criteria,
+        CriteriaAdder, // Deprecated: Suppport only for old use
+        CriteriaContainer, // Deprecated: Suppport only for old use
         Datagrid,
         Dropdown,
         DualList,
diff --git a/packages/oui-chips/src/chips.component.js b/packages/oui-chips/src/chips.component.js
index 5f5df162..d380142e 100644
--- a/packages/oui-chips/src/chips.component.js
+++ b/packages/oui-chips/src/chips.component.js
@@ -2,9 +2,6 @@ import controller from "./chips.controller";
 import template from "./chips.html";
 
 export default {
-    require: {
-        criteriaContainer: "?^^ouiCriteriaContainer"
-    },
     template,
     controller,
     bindings: {
diff --git a/packages/oui-chips/src/chips.controller.js b/packages/oui-chips/src/chips.controller.js
index 4494d5d8..b7ab5f6d 100644
--- a/packages/oui-chips/src/chips.controller.js
+++ b/packages/oui-chips/src/chips.controller.js
@@ -27,9 +27,5 @@ export default class {
         const removed = angular.copy(this.items.splice(index, 1)[0]);
         const items = angular.copy(this.items);
         this.onRemove({ items, removed });
-
-        if (this.criteriaContainer) {
-            this.criteriaContainer.remove(removed);
-        }
     }
 }
diff --git a/packages/oui-chips/src/index.spec.js b/packages/oui-chips/src/index.spec.js
index 804c167b..40fe4f5f 100644
--- a/packages/oui-chips/src/index.spec.js
+++ b/packages/oui-chips/src/index.spec.js
@@ -1,4 +1,3 @@
-import cloneDeep from "lodash/cloneDeep";
 import mockData from "./index.spec.data.json";
 
 describe("ouiChips", () => {
@@ -6,7 +5,6 @@ describe("ouiChips", () => {
     let testUtils;
 
     beforeEach(angular.mock.module("oui.chips"));
-    beforeEach(angular.mock.module("oui.criteria-container"));
     beforeEach(angular.mock.module("oui.test-utils"));
 
     beforeEach(inject((_$timeout_, _TestUtils_) => {
@@ -65,27 +63,5 @@ describe("ouiChips", () => {
             const controllerItems = angular.copy(controller.items);
             expect(onRemoveSpy).toHaveBeenCalledWith(controllerItems, firstChip);
         });
-
-        describe("With criteria container", () => {
-            it("should remove criterion in criteria container", () => {
-                const onChangeSpy = jasmine.createSpy("onChangeSpy");
-                component = testUtils.compileTemplate(`
-                    <oui-criteria-container on-change="$ctrl.onChangeSpy(modelValue)">
-                        <oui-chips closable
-                            items="$ctrl.items">
-                        </oui-chips>
-                    </oui-criteria-container>
-                `, {
-                    items: mockData.criteria,
-                    onChangeSpy
-                });
-
-                const criteriaContainerController = component.controller("ouiCriteriaContainer");
-                criteriaContainerController.criteria = cloneDeep(mockData.criteria);
-
-                component.find("button").eq(0).triggerHandler("click");
-                expect(onChangeSpy).toHaveBeenCalledWith(mockData.criteria.slice(1));
-            });
-        });
     });
 });
diff --git a/packages/oui-criteria-adder/src/index.js b/packages/oui-criteria-adder/src/index.js
index f51b5754..53d182a1 100644
--- a/packages/oui-criteria-adder/src/index.js
+++ b/packages/oui-criteria-adder/src/index.js
@@ -1,8 +1,7 @@
-import CriteriaAdder from "./criteria-adder.component";
-import CriteriaAdderProvider from "./criteria-adder.provider";
+import Criteria from "@ovh-ui/oui-criteria";
 
+// Deprecated: Support only for old use
+// Has been moved to 'oui.criteria'
 export default angular
-    .module("oui.criteria-adder", [])
-    .component("ouiCriteriaAdder", CriteriaAdder)
-    .provider("ouiCriteriaAdderConfiguration", CriteriaAdderProvider)
+    .module("oui.criteria-adder", [Criteria])
     .name;
diff --git a/packages/oui-criteria-container/src/criteria-container.component.js b/packages/oui-criteria-container/src/criteria-container.component.js
deleted file mode 100644
index 3559b1e1..00000000
--- a/packages/oui-criteria-container/src/criteria-container.component.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import controller from "./criteria-container.controller";
-
-export default {
-    template: "<ng-transclude></ng-transclude>",
-    transclude: true,
-    controller,
-    bindings: {
-        onChange: "&"
-    }
-};
diff --git a/packages/oui-criteria-container/src/criteria-container.controller.js b/packages/oui-criteria-container/src/criteria-container.controller.js
deleted file mode 100644
index 37fa3ce6..00000000
--- a/packages/oui-criteria-container/src/criteria-container.controller.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import findIndex from "lodash/findIndex";
-
-export default class CriteriaController {
-    $onInit () {
-        this.criteria = [];
-    }
-
-    triggerChange () {
-        if (this.onChange) {
-            this.onChange({ modelValue: this.criteria });
-        }
-    }
-
-    indexOfCriterion (criterion) {
-        let criterionIndex = this.criteria.length - 1;
-        while (criterionIndex >= 0 && !angular.equals(this.criteria[criterionIndex], criterion)) {
-            --criterionIndex;
-        }
-        return criterionIndex;
-    }
-
-    setPreviewCriterion (previewCriterion) {
-        const criterionIndex = findIndex(this.criteria, ["preview", true]);
-        previewCriterion.preview = true;
-        if (criterionIndex > -1) {
-            this.criteria[criterionIndex] = previewCriterion;
-        } else {
-            this.criteria.push(previewCriterion);
-        }
-        this.triggerChange();
-    }
-
-    deletePreviewCriterion () {
-        const previewCriterionIndex = findIndex(this.criteria, ["preview", true]);
-        if (previewCriterionIndex > -1) {
-            this.criteria.splice(previewCriterionIndex, 1);
-            this.triggerChange();
-        }
-    }
-
-    add (criterion) {
-        // Delete same preview criterion if it exists.
-        const previewCriterion = angular.copy(criterion);
-        previewCriterion.preview = true;
-
-        const previewCriterionIndex = this.indexOfCriterion(previewCriterion);
-        if (previewCriterionIndex > -1) {
-            this.criteria.splice(previewCriterionIndex, 1);
-        }
-
-        // Add the criterion if it does not exist.
-        if (this.indexOfCriterion(criterion) < 0) {
-            this.criteria.push(criterion);
-            this.triggerChange();
-        }
-    }
-
-    remove (criterion) {
-        const criterionIndex = this.indexOfCriterion(criterion);
-        if (criterionIndex > -1) {
-            this.criteria.splice(criterionIndex, 1);
-            this.triggerChange();
-        }
-    }
-
-    set (criteria) {
-        this.criteria = criteria;
-        this.triggerChange();
-    }
-
-    clear () {
-        this.criteria = [];
-        this.triggerChange();
-    }
-}
diff --git a/packages/oui-criteria-container/src/index.js b/packages/oui-criteria-container/src/index.js
index e6d31978..6cb37a39 100644
--- a/packages/oui-criteria-container/src/index.js
+++ b/packages/oui-criteria-container/src/index.js
@@ -1,6 +1,7 @@
-import CriteriaContainer from "./criteria-container.component";
+import Criteria from "@ovh-ui/oui-criteria";
 
+// Deprecated: Support only for old use
+// Has been moved to 'oui.criteria'
 export default angular
-    .module("oui.criteria-container", [])
-    .component("ouiCriteriaContainer", CriteriaContainer)
+    .module("oui.criteria-container", [Criteria])
     .name;
diff --git a/packages/oui-criteria-container/src/index.spec.js b/packages/oui-criteria-container/src/index.spec.js
deleted file mode 100644
index 887fa7ef..00000000
--- a/packages/oui-criteria-container/src/index.spec.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import CriteriaContainerController from "./criteria-container.controller";
-
-describe("ouiCriteriaContainer", () => {
-    const criterion = {
-        property: "column1",
-        operator: "equal",
-        value: "test"
-    };
-
-    const criterion2 = {
-        property: "column2",
-        operator: "equal",
-        value: "test"
-    };
-
-    const previewCriterion = {
-        property: "column3",
-        operator: "equal",
-        value: "test",
-        preview: true
-    };
-
-    const previewCriterion2 = {
-        property: "column3",
-        operator: "equal",
-        value: "anotherTest",
-        preview: true
-    };
-
-    beforeEach(angular.mock.module("oui.criteria-container"));
-    beforeEach(angular.mock.module("oui.test-utils"));
-
-    describe("Controller", () => {
-        let controller;
-
-        beforeEach(() => {
-            controller = new CriteriaContainerController();
-            controller.onChange = jasmine.createSpy("onChange");
-            controller.$onInit();
-        });
-
-        it("should init the criteria if not defined", () => {
-            expect(controller.criteria).toEqual([]);
-        });
-
-        it("should add a criteria", () => {
-            expect(controller.criteria.length).toEqual(0);
-
-            controller.add(criterion);
-            expect(controller.criteria.length).toEqual(1);
-            expect(controller.criteria[0]).toEqual(criterion);
-
-            expect(controller.onChange).toHaveBeenCalledWith({ modelValue: [criterion] });
-        });
-
-        it("should not add an existing criteria", () => {
-            controller.criteria.push(criterion);
-            expect(controller.criteria.length).toEqual(1);
-
-            controller.add(criterion);
-            expect(controller.criteria.length).toEqual(1);
-
-            expect(controller.onChange).not.toHaveBeenCalled();
-        });
-
-        it("should delete a criteria", () => {
-            controller.criteria.push(criterion);
-            controller.criteria.push(criterion2);
-            const expectedLength = 2;
-            expect(controller.criteria.length).toEqual(expectedLength);
-
-            controller.remove(criterion);
-            expect(controller.criteria.length).toEqual(1);
-            expect(controller.criteria[0]).toEqual(criterion2);
-
-            expect(controller.onChange).toHaveBeenCalledWith({ modelValue: [criterion2] });
-        });
-
-        it("should not delete a nonexistent criteria", () => {
-            controller.criteria.push(criterion);
-
-            expect(() => controller.remove(criterion2)).not.toThrow();
-            expect(controller.onChange).not.toHaveBeenCalled();
-        });
-
-        it("should set all criteria", () => {
-            const criteria = [criterion, criterion2];
-            expect(controller.criteria.length).toEqual(0);
-
-            controller.set(criteria);
-            const expectedLength = 2;
-            expect(controller.criteria.length).toEqual(expectedLength);
-        });
-
-        it("should delete all criteria", () => {
-            controller.criteria.push(criterion);
-            controller.criteria.push(criterion2);
-            const expectedLength = 2;
-            expect(controller.criteria.length).toEqual(expectedLength);
-
-            controller.clear();
-            expect(controller.criteria.length).toEqual(0);
-        });
-
-        describe("Preview criterion", () => {
-            it("should be added if nonexistent", () => {
-                expect(controller.criteria.length).toEqual(0);
-
-                controller.setPreviewCriterion(previewCriterion);
-                expect(controller.criteria.length).toEqual(1);
-            });
-
-            it("should be removed", () => {
-                controller.criteria.push(previewCriterion);
-                expect(controller.criteria.length).toEqual(1);
-
-                controller.deletePreviewCriterion();
-                expect(controller.criteria.length).toEqual(0);
-            });
-
-            it("should replace previous preview criterion", () => {
-                controller.criteria.push(previewCriterion);
-
-                controller.setPreviewCriterion(previewCriterion2);
-                expect(controller.criteria.length).toEqual(1);
-                expect(controller.criteria[0]).toEqual(previewCriterion2);
-            });
-
-            it("should be deleted if an equivalent non-preview criterion is added", () => {
-                const nonPreviewCriterion = Object.assign({}, previewCriterion);
-                nonPreviewCriterion.preview = false;
-
-                // Initial state
-                controller.criteria.push(previewCriterion);
-
-                controller.add(nonPreviewCriterion);
-
-                expect(controller.criteria.length).toEqual(1);
-                expect(controller.criteria[0]).toEqual(nonPreviewCriterion);
-            });
-        });
-    });
-});
diff --git a/packages/oui-criteria-container/tests/index.js b/packages/oui-criteria-container/tests/index.js
deleted file mode 100644
index ebd31bdb..00000000
--- a/packages/oui-criteria-container/tests/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import "@ovh-ui/common/test-utils";
-
-loadTests(require.context("../src/", true, /.*((\.spec)|(index))$/));
-
-function loadTests (context) {
-    context.keys().forEach(context);
-}
diff --git a/packages/oui-criteria-adder/README.md b/packages/oui-criteria/README.md
similarity index 61%
rename from packages/oui-criteria-adder/README.md
rename to packages/oui-criteria/README.md
index a7781ef2..55b0b5b3 100644
--- a/packages/oui-criteria-adder/README.md
+++ b/packages/oui-criteria/README.md
@@ -1,32 +1,63 @@
-# Criteria adder
+# Criteria
 
 <component-status cx-design="complete" ux="complete"></component-status>
 
 ## Usage
 
-### Example
+### Basic
 
 ```html:preview
-<oui-criteria-adder
-    name="criteriaAdder"
-    properties="$ctrl.inputValue"
-    on-submit="$ctrl.onSubmit(modelValue)">
+<oui-criteria
+    model="$ctrl.basicModel"
+    properties="$ctrl.inputValue">
 </oui-criteria-adder>
+```
+
+### With search field
+
+```html:preview
+<oui-criteria 
+    model="$ctrl.searchableModel"
+    properties="$ctrl.inputValue"
+    searchable>
+</oui-criteria>
+```
+
+### Events
+
+```html:preview
+<oui-criteria
+    model="$ctrl.eventsModel"
+    properties="$ctrl.inputValue"
+    on-change="$ctrl.onSubmit(modelValue)"
+    searchable>
+</oui-criteria>
 <div class="oui-doc-preview-only">
-    <p>Input</p>
+    <p><strong>Input</strong></p>
     <pre class="oui-doc-code oui-doc-code_json">{{$ctrl.inputValue | json}}</pre>
-    <p>Output</p>
+    <p><strong>Output</strong></p>
     <pre class="oui-doc-code oui-doc-code_json">{{$ctrl.outputValue | json}}</pre>
 </div>
 ```
 
 ## API
 
+### oui-criteria
+
+| Attribute     | Type      | Binding   | One-time Binding  | Values                    | Default   | Description
+| ----          | ----      | ----      | ----              | ----                      | ----      | ----
+| `model`       | object    | =         | no                | n/a                       | n/a       | model bound to component
+| `properties`  | array     | <?        | no                | n/a                       | n/a       | array of objects with columns informations
+| `disabled`    | boolean   | <?        | no                | `true`, `false`           | `false`   | disabled flag
+| `on-change`   | function  | &         | no                | n/a                       | n/a       | handler triggered when model has changed
+
+### oui-criteria-adder
+
 | Attribute     | Type      | Binding   | One-time Binding  | Values                    | Default   | Description
 | ----          | ----      | ----      | ----              | ----                      | ----      | ----
 | `id`          | string    | @?        | yes               | n/a                       | n/a       | id attribute of the component
 | `name`        | string    | @         | yes               | n/a                       | n/a       | name attribute of the component
-| `align`       | string    | @?        | yes               | `start`, `center`, `end`  | `center`  | modifier for alignment
+| `placement`   | string    | @?        | yes               | `start`, `center`, `end`  | `center`  | modifier for the placement of the dropdown
 | `properties`  | array     | <         | no                | n/a                       | n/a       | array of objects with columns informations
 | `on-submit`   | function  | &         | no                | n/a                       | n/a       | handler triggered when form is submitted
 
@@ -41,41 +72,26 @@
 | `type`        | string    | Data type
 | `typeOptions` | object    | Specific options
 
+## Deprecated
+
+### Attributes
+
+* `align`: Replaced by `placement` attribute
+
 ## Configuration
 
 The pagination can be globally configured with a provider.
 
 ```js
 angular.module("myModule", [
-    "oui.criteria-adder"
+    "oui.criteria"
 ]).config(ouiCriteriaAdderConfigurationProvider => {
     ouiCriteriaAdderConfigurationProvider.setOperatorsByType({ // default operatorsByType
-        "boolean": [
-            "is",
-            "isNot"
-        ],
-        date: [
-            "is",
-            "isAfter",
-            "isBefore"
-        ],
-        number: [
-            "is",
-            "smaller",
-            "bigger"
-        ],
-        options: [
-            "is",
-            "isNot"
-        ],
-        string: [
-            "contains",
-            "containsNot",
-            "startsWith",
-            "endsWith",
-            "is",
-            "isNot"
-        ]
+        "boolean": ["is", "isNot"],
+        date: ["is", "isAfter", "isBefore"],
+        number: ["is", "smaller", "bigger"],
+        options: ["is", "isNot"],
+        string: ["contains", "containsNot", "startsWith", "endsWith", "is", "isNot"]
     });
     ouiCriteriaAdderConfigurationProvider.setTranslations({ // default translations
         column_label: "Column",
diff --git a/packages/oui-criteria/package.json b/packages/oui-criteria/package.json
new file mode 100644
index 00000000..17672957
--- /dev/null
+++ b/packages/oui-criteria/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@ovh-ui/oui-criteria",
+  "version": "1.0.0",
+  "main": "./src/index.js",
+  "license": "BSD-3-Clause",
+  "author": "OVH SAS",
+  "dependencies": {
+    "@ovh-ui/oui-chips": "^1.0.0",
+    "@ovh-ui/oui-dropdown": "^1.0.0",
+    "@ovh-ui/oui-field": "^1.0.0",
+    "@ovh-ui/oui-search": "^1.0.0",
+    "@ovh-ui/oui-select": "^1.0.0"
+  }
+}
diff --git a/packages/oui-criteria-adder/src/criteria-adder.component.js b/packages/oui-criteria/src/adder/criteria-adder.component.js
similarity index 75%
rename from packages/oui-criteria-adder/src/criteria-adder.component.js
rename to packages/oui-criteria/src/adder/criteria-adder.component.js
index 10fa784b..88967f0d 100644
--- a/packages/oui-criteria-adder/src/criteria-adder.component.js
+++ b/packages/oui-criteria/src/adder/criteria-adder.component.js
@@ -3,12 +3,12 @@ import template from "./criteria-adder.html";
 
 export default {
     require: {
-        criteriaContainer: "?^^ouiCriteriaContainer"
+        criteriaContainer: "?^^ouiCriteria"
     },
     bindings: {
         id: "@?",
-        name: "@",
-        align: "@?",
+        name: "@?",
+        placement: "@?",
         properties: "<",
         disabled: "<?",
         onSubmit: "&"
diff --git a/packages/oui-criteria-adder/src/criteria-adder.controller.js b/packages/oui-criteria/src/adder/criteria-adder.controller.js
similarity index 94%
rename from packages/oui-criteria-adder/src/criteria-adder.controller.js
rename to packages/oui-criteria/src/adder/criteria-adder.controller.js
index 434cdb62..84b4ed4f 100644
--- a/packages/oui-criteria-adder/src/criteria-adder.controller.js
+++ b/packages/oui-criteria/src/adder/criteria-adder.controller.js
@@ -14,38 +14,6 @@ export default class {
         this.valueModel = {};
     }
 
-    $onInit () {
-        // Set align to "end" if undefined
-        addDefaultParameter(this, "align", "center");
-
-        addDefaultParameter(this, "id", `ouiCriteriaAdder${this.$scope.$id}`);
-
-        this.$timeout(() => {
-            this.dropdownContent = this.$element[0];
-        });
-
-        // Auto select first column
-        if (this.properties) {
-            this.columnModel = this.properties[0];
-        }
-
-        this.selectableOperators = this.filterSelectableOperators();
-        this.operatorModel = this.selectableOperators[0];
-
-        this.resetValueModel();
-    }
-
-    $postLink () {
-        // Sometimes the digest cycle is done before dom manipulation,
-        // So we use $timeout to force the $apply
-        this.$timeout(() => {
-            this.$element
-                .addClass("oui-criteria-adder")
-                .removeAttr("id")
-                .removeAttr("name");
-        });
-    }
-
     getOperatorsByType (type) {
         const operators = this.operators[type] || [];
         return operators.map((operator) => ({
@@ -157,4 +125,38 @@ export default class {
             title: this.translations[`operator_${type}_${operator}`]
         }));
     }
+
+    $onInit () {
+        // Deprecated: Support for `align` attribute
+        // Will become addDefaultParameter(this, "placement", "center");
+        this.placement = this.placement || this.$attrs.align || "center";
+
+        addDefaultParameter(this, "id", `ouiCriteriaAdder${this.$scope.$id}`);
+        addDefaultParameter(this, "name", `ouiCriteriaAdder${this.$scope.$id}`);
+
+        this.$timeout(() => {
+            this.dropdownContent = this.$element[0];
+        });
+
+        // Auto select first column
+        if (this.properties) {
+            this.columnModel = this.properties[0];
+        }
+
+        this.selectableOperators = this.filterSelectableOperators();
+        this.operatorModel = this.selectableOperators[0];
+
+        this.resetValueModel();
+    }
+
+    $postLink () {
+        // Sometimes the digest cycle is done before dom manipulation,
+        // So we use $timeout to force the $apply
+        this.$timeout(() => {
+            this.$element
+                .addClass("oui-criteria-adder")
+                .removeAttr("id")
+                .removeAttr("name");
+        });
+    }
 }
diff --git a/packages/oui-criteria-adder/src/criteria-adder.html b/packages/oui-criteria/src/adder/criteria-adder.html
similarity index 100%
rename from packages/oui-criteria-adder/src/criteria-adder.html
rename to packages/oui-criteria/src/adder/criteria-adder.html
diff --git a/packages/oui-criteria-adder/src/criteria-adder.provider.js b/packages/oui-criteria/src/adder/criteria-adder.provider.js
similarity index 100%
rename from packages/oui-criteria-adder/src/criteria-adder.provider.js
rename to packages/oui-criteria/src/adder/criteria-adder.provider.js
diff --git a/packages/oui-criteria-adder/src/index.spec.data.json b/packages/oui-criteria/src/adder/criteria-adder.spec.data.json
similarity index 100%
rename from packages/oui-criteria-adder/src/index.spec.data.json
rename to packages/oui-criteria/src/adder/criteria-adder.spec.data.json
diff --git a/packages/oui-criteria-adder/src/index.spec.js b/packages/oui-criteria/src/adder/criteria-adder.spec.js
similarity index 96%
rename from packages/oui-criteria-adder/src/index.spec.js
rename to packages/oui-criteria/src/adder/criteria-adder.spec.js
index ad693d49..b1150100 100644
--- a/packages/oui-criteria-adder/src/index.spec.js
+++ b/packages/oui-criteria/src/adder/criteria-adder.spec.js
@@ -1,5 +1,5 @@
 import find from "lodash/find";
-import mockData from "./index.spec.data.json";
+import mockData from "./criteria-adder.spec.data.json";
 
 const getValueComponent = $element => $element[0].querySelector("[name=barValue]");
 
@@ -7,11 +7,7 @@ describe("ouiCriteriaAdder", () => {
     let $timeout;
     let testUtils;
 
-    beforeEach(angular.mock.module("oui.criteria-adder"));
-    beforeEach(angular.mock.module("oui.dropdown"));
-    beforeEach(angular.mock.module("oui.field"));
-    beforeEach(angular.mock.module("oui.select"));
-    beforeEach(angular.mock.module("oui.criteria-container"));
+    beforeEach(angular.mock.module("oui.criteria"));
     beforeEach(angular.mock.module("oui.test-utils"));
     beforeEach(angular.mock.module("test.configuration"));
 
@@ -24,7 +20,7 @@ describe("ouiCriteriaAdder", () => {
         let configuration;
 
         angular.module("test.configuration", [
-            "oui.criteria-adder"
+            "oui.criteria"
         ]).config(ouiCriteriaAdderConfigurationProvider => {
             const operatorsByType = ouiCriteriaAdderConfigurationProvider.operatorsByType;
             operatorsByType.foo = ["bar"];
@@ -318,14 +314,15 @@ describe("ouiCriteriaAdder", () => {
             it("should add criterion in criteria container", () => {
                 const onChangeSpy = jasmine.createSpy();
                 component = testUtils.compileTemplate(`
-                    <oui-criteria-container on-change="$ctrl.onChangeSpy(modelValue)">
+                    <oui-criteria model="$ctrl.model" on-change="$ctrl.onChangeSpy(modelValue)">
                         <oui-criteria-adder
                             id="foo"
                             name="bar"
                             properties="$ctrl.properties">
                         </oui-criteria-adder>
-                    </oui-criteria-container>
+                    </oui-criteria>
                 `, {
+                    model: [],
                     properties: mockData.properties,
                     onChangeSpy
                 });
diff --git a/packages/oui-criteria/src/criteria.component.js b/packages/oui-criteria/src/criteria.component.js
new file mode 100644
index 00000000..ae567a5e
--- /dev/null
+++ b/packages/oui-criteria/src/criteria.component.js
@@ -0,0 +1,14 @@
+import controller from "./criteria.controller";
+import template from "./criteria.html";
+
+export default {
+    bindings: {
+        model: "=",
+        properties: "<?",
+        searchable: "<?",
+        onChange: "&"
+    },
+    controller,
+    template,
+    transclude: true
+};
diff --git a/packages/oui-criteria/src/criteria.controller.js b/packages/oui-criteria/src/criteria.controller.js
new file mode 100644
index 00000000..b1490e2f
--- /dev/null
+++ b/packages/oui-criteria/src/criteria.controller.js
@@ -0,0 +1,117 @@
+import { addBooleanParameter } from "@ovh-ui/common/component-utils";
+import findIndex from "lodash/findIndex";
+
+export default class {
+    constructor ($attrs) {
+        "ngInject";
+
+        this.$attrs = $attrs; // For 'addBooleanParameter'
+
+        this.minLength = 2;
+        this.debounceDelay = 500;
+    }
+
+    triggerChange () {
+        if (this.onChange) {
+            this.onChange({ modelValue: angular.copy(this.model) });
+            this.criteria = this.model.filter(criterion => !criterion.preview);
+        }
+    }
+
+    indexOfCriterion (criterion) {
+        let criterionIndex = this.model.length - 1;
+        while (criterionIndex >= 0 && !angular.equals(this.model[criterionIndex], criterion)) {
+            --criterionIndex;
+        }
+        return criterionIndex;
+    }
+
+    setPreviewCriterion (previewCriterion) {
+        const criterionIndex = findIndex(this.model, ["preview", true]);
+        previewCriterion.preview = true;
+        if (criterionIndex > -1) {
+            this.model[criterionIndex] = previewCriterion;
+        } else {
+            this.model.push(previewCriterion);
+        }
+        this.triggerChange();
+    }
+
+    deletePreviewCriterion () {
+        const previewCriterionIndex = findIndex(this.model, ["preview", true]);
+        if (previewCriterionIndex > -1) {
+            this.model.splice(previewCriterionIndex, 1);
+            this.triggerChange();
+        }
+    }
+
+
+    static getCriterion (modelValue) {
+        return {
+            title: modelValue,
+            property: null, // any property
+            operator: "contains",
+            value: modelValue
+        };
+    }
+
+    add (criterion) {
+        // Delete same preview criterion if it exists.
+        const previewCriterion = angular.copy(criterion);
+        previewCriterion.preview = true;
+
+        const previewCriterionIndex = this.indexOfCriterion(previewCriterion);
+        if (previewCriterionIndex > -1) {
+            this.model.splice(previewCriterionIndex, 1);
+        }
+
+        // Add the criterion if it does not exist.
+        if (this.indexOfCriterion(criterion) < 0) {
+            this.model.push(criterion);
+            this.triggerChange();
+        }
+    }
+
+    remove (criterion) {
+        const criterionIndex = this.indexOfCriterion(criterion);
+        if (criterionIndex > -1) {
+            this.model.splice(criterionIndex, 1);
+        }
+        this.triggerChange();
+    }
+
+    set (criteria) {
+        this.model = criteria;
+        this.triggerChange();
+    }
+
+    clear () {
+        this.model = [];
+        this.triggerChange();
+    }
+
+    onCriterionChange (modelValue) {
+        if (modelValue && modelValue.length >= this.minLength) {
+            this.setPreviewCriterion(this.constructor.getCriterion(modelValue), true);
+        } else {
+            this.deletePreviewCriterion();
+        }
+    }
+
+    onCriterionReset () {
+        this.deletePreviewCriterion();
+    }
+
+    onCriterionSubmit (modelValue) {
+        if (modelValue && modelValue.length >= this.minLength) {
+            this.add(this.constructor.getCriterion(modelValue));
+            this.deletePreviewCriterion();
+        }
+    }
+
+    $onInit () {
+        addBooleanParameter(this, "searchable");
+
+        this.model = this.model || [];
+    }
+}
diff --git a/packages/oui-criteria/src/criteria.html b/packages/oui-criteria/src/criteria.html
new file mode 100644
index 00000000..ac7257d7
--- /dev/null
+++ b/packages/oui-criteria/src/criteria.html
@@ -0,0 +1,25 @@
+<div class="oui-datagrid-topbar__actions">
+    <div class="oui-datagrid-topbar__slot"
+        ng-transclude>
+    </div>
+    <oui-search
+        ng-if="$ctrl.searchable"
+        model="$ctrl.searchText"
+        debounce="$ctrl.debounceDelay"
+        minlength="$ctrl.minLength"
+        on-change="$ctrl.onCriterionChange(modelValue)"
+        on-reset="$ctrl.onCriterionReset()"
+        on-submit="$ctrl.onCriterionSubmit(modelValue)">
+    </oui-search>
+    <oui-criteria-adder
+        ng-if="$ctrl.properties.length"
+        properties="$ctrl.properties"
+        placement="end">
+    </oui-criteria-adder>
+</div>
+<oui-chips class="oui-datagrid-topbar__criteria"
+    ng-if="$ctrl.criteria.length"
+    items="$ctrl.criteria"
+    on-remove="$ctrl.remove(removed)"
+    closable>
+</oui-chips>
diff --git a/packages/oui-criteria/src/index.js b/packages/oui-criteria/src/index.js
new file mode 100644
index 00000000..ac674cfe
--- /dev/null
+++ b/packages/oui-criteria/src/index.js
@@ -0,0 +1,21 @@
+import Chips from "@ovh-ui/oui-chips";
+import Criteria from "./criteria.component";
+import CriteriaAdder from "./adder/criteria-adder.component";
+import CriteriaAdderProvider from "./adder/criteria-adder.provider";
+import Dropdown from "@ovh-ui/oui-dropdown";
+import Field from "@ovh-ui/oui-field";
+import Search from "@ovh-ui/oui-search";
+import Select from "@ovh-ui/oui-select";
+
+export default angular
+    .module("oui.criteria", [
+        Chips,
+        Dropdown,
+        Field,
+        Search,
+        Select
+    ])
+    .component("ouiCriteria", Criteria)
+    .component("ouiCriteriaAdder", CriteriaAdder)
+    .provider("ouiCriteriaAdderConfiguration", CriteriaAdderProvider)
+    .name;
diff --git a/packages/oui-criteria/src/index.spec.js b/packages/oui-criteria/src/index.spec.js
new file mode 100644
index 00000000..5929ec13
--- /dev/null
+++ b/packages/oui-criteria/src/index.spec.js
@@ -0,0 +1,336 @@
+describe("ouiCriteria", () => {
+    let testUtils;
+    let $timeout;
+
+    const goodSearchText = "aa";
+    const tooShortSearchText = "a";
+
+    const criterion = {
+        property: "column1",
+        operator: "equal",
+        value: "test"
+    };
+
+    const criterion2 = {
+        property: "column2",
+        operator: "equal",
+        value: "test"
+    };
+
+    const previewCriterion = {
+        property: "column3",
+        operator: "equal",
+        value: "test",
+        preview: true
+    };
+
+    const previewCriterion2 = {
+        property: "column3",
+        operator: "equal",
+        value: "anotherTest",
+        preview: true
+    };
+
+    beforeEach(angular.mock.module("oui.criteria"));
+    beforeEach(angular.mock.module("oui.test-utils"));
+
+    beforeEach(inject((_$timeout_, _TestUtils_) => {
+        $timeout = _$timeout_;
+        testUtils = _TestUtils_;
+    }));
+
+    describe("Controller", () => {
+        let component;
+        let controller;
+
+        beforeEach(() => {
+            component = testUtils.compileTemplate('<oui-criteria model="$ctrl.model"></oui-criteria>', {
+                model: []
+            });
+
+            controller = component.controller("ouiCriteria");
+            controller.onChange = jasmine.createSpy("onChange");
+        });
+
+        it("should init the criteria if not defined", () => {
+            expect(controller.model).toEqual([]);
+        });
+
+        it("should add a criteria", () => {
+            expect(controller.model.length).toEqual(0);
+
+            controller.add(criterion);
+            expect(controller.model.length).toEqual(1);
+            expect(controller.model[0]).toEqual(criterion);
+
+            expect(controller.onChange).toHaveBeenCalledWith({ modelValue: [criterion] });
+        });
+
+        it("should not add an existing criteria", () => {
+            controller.model.push(criterion);
+            expect(controller.model.length).toEqual(1);
+
+            controller.add(criterion);
+            expect(controller.model.length).toEqual(1);
+
+            expect(controller.onChange).not.toHaveBeenCalled();
+        });
+
+        it("should delete a criteria", () => {
+            controller.model.push(criterion);
+            controller.model.push(criterion2);
+            const expectedLength = 2;
+            expect(controller.model.length).toEqual(expectedLength);
+
+            controller.remove(criterion);
+            expect(controller.model.length).toEqual(1);
+            expect(controller.model[0]).toEqual(criterion2);
+
+            expect(controller.onChange).toHaveBeenCalledWith({ modelValue: [criterion2] });
+        });
+
+        it("should not delete a nonexistent criteria", () => {
+            controller.model.push(criterion);
+
+            expect(() => controller.remove(criterion2)).not.toThrow();
+            expect(controller.onChange).toHaveBeenCalled();
+        });
+
+        it("should set all criteria", () => {
+            const criteria = [criterion, criterion2];
+            expect(controller.model.length).toEqual(0);
+
+            controller.set(criteria);
+            const expectedLength = 2;
+            expect(controller.model.length).toEqual(expectedLength);
+        });
+
+        it("should delete all criteria", () => {
+            controller.model.push(criterion);
+            controller.model.push(criterion2);
+            const expectedLength = 2;
+            expect(controller.model.length).toEqual(expectedLength);
+
+            controller.clear();
+            expect(controller.model.length).toEqual(0);
+        });
+
+        describe("Preview criterion", () => {
+            it("should be added if nonexistent", () => {
+                expect(controller.model.length).toEqual(0);
+
+                controller.setPreviewCriterion(previewCriterion);
+                expect(controller.model.length).toEqual(1);
+            });
+
+            it("should be removed", () => {
+                controller.model.push(previewCriterion);
+                expect(controller.model.length).toEqual(1);
+
+                controller.deletePreviewCriterion();
+                expect(controller.model.length).toEqual(0);
+            });
+
+            it("should replace previous preview criterion", () => {
+                controller.model.push(previewCriterion);
+
+                controller.setPreviewCriterion(previewCriterion2);
+                expect(controller.model.length).toEqual(1);
+                expect(controller.model[0]).toEqual(previewCriterion2);
+            });
+
+            it("should be deleted if an equivalent non-preview criterion is added", () => {
+                const nonPreviewCriterion = Object.assign({}, previewCriterion);
+                nonPreviewCriterion.preview = false;
+
+                // Initial state
+                controller.model.push(previewCriterion);
+
+                controller.add(nonPreviewCriterion);
+
+                expect(controller.model.length).toEqual(1);
+                expect(controller.model[0]).toEqual(nonPreviewCriterion);
+            });
+        });
+    });
+
+    describe("With criteria container", () => {
+        // Unfortunately, lodash prevent setTimeout to be mocked
+        const debounceDelay = 800;
+
+        describe("on submit", () => {
+            it("should add criterion in criteria container", done => {
+                const searchText = goodSearchText;
+                const onChangeSpy = jasmine.createSpy();
+                const element = testUtils.compileTemplate(`
+                    <oui-criteria model="$ctrl.model" on-change="$ctrl.onChangeSpy(modelValue)" searchable></oui-criteria>
+                `, {
+                    onChangeSpy
+                });
+
+                const input = element.find("input");
+                input.val(searchText).triggerHandler("input");
+
+                // Need to flush for the debounce
+                $timeout.flush();
+
+                element.find("form").triggerHandler("submit");
+
+                setTimeout(() => {
+                    expect(onChangeSpy).toHaveBeenCalledWith([
+                        {
+                            title: searchText,
+                            property: null,
+                            operator: "contains",
+                            value: searchText
+                        }
+                    ]);
+                    done();
+                }, debounceDelay);
+            });
+
+            it("should not add criterion in criteria container if the text is too short", done => {
+                const searchText = tooShortSearchText;
+                const onChangeSpy = jasmine.createSpy();
+                const element = testUtils.compileTemplate(`
+                    <oui-criteria model="$ctrl.model" on-change="$ctrl.onChangeSpy(modelValue)" searchable></oui-criteria>
+                `, {
+                    onChangeSpy
+                });
+
+                const input = element.find("input");
+                input.val(searchText).triggerHandler("input");
+
+                // Need to flush for the debounce
+                $timeout.flush();
+
+                element.find("form").triggerHandler("submit");
+
+                setTimeout(() => {
+                    expect(onChangeSpy).not.toHaveBeenCalled();
+                    done();
+                }, debounceDelay);
+            });
+        });
+
+        describe("on change", () => {
+            it("should add criterion in criteria container", done => {
+                const searchText = goodSearchText;
+                const onChangeSpy = jasmine.createSpy();
+                const element = testUtils.compileTemplate(`
+                    <oui-criteria model="$ctrl.model" on-change="$ctrl.onChangeSpy(modelValue)" searchable></oui-criteria>
+                `, {
+                    onChangeSpy
+                });
+
+                const input = element.find("input");
+                input.val(searchText).triggerHandler("input");
+
+                // Need to flush for the debounce
+                $timeout.flush();
+
+                setTimeout(() => {
+                    expect(onChangeSpy).toHaveBeenCalledWith([{
+                        title: goodSearchText,
+                        property: null,
+                        operator: "contains",
+                        value: goodSearchText,
+                        preview: true
+                    }]);
+                    done();
+                }, debounceDelay);
+            });
+
+            it("should not add criterion in criteria container if text is too short", done => {
+                const onChangeSpy = jasmine.createSpy();
+                const element = testUtils.compileTemplate(`
+                    <oui-criteria model="$ctrl.model" on-change="$ctrl.onChangeSpy(modelValue)" searchable></oui-criteria>
+                `, {
+                    onChangeSpy
+                });
+                const delay = 850;
+
+                setTimeout(() => {
+                    const input = element.find("input");
+                    input.val(tooShortSearchText).triggerHandler("input");
+                    expect(onChangeSpy).not.toHaveBeenCalled();
+                    done();
+                }, delay);
+            });
+
+            it("should delete preview criterion if search becomes too short", done => {
+                const searchText = goodSearchText;
+                const onChangeSpy = jasmine.createSpy();
+                const element = testUtils.compileTemplate(`
+                    <oui-criteria model="$ctrl.model" on-change="$ctrl.onChangeSpy(modelValue)" searchable></oui-criteria>
+                `, {
+                    onChangeSpy
+                });
+
+                const input = element.find("input");
+                input.val(searchText).triggerHandler("input");
+
+                // Need to flush for the debounce
+                $timeout.flush();
+
+                setTimeout(() => {
+                    expect(onChangeSpy).toHaveBeenCalledWith([{
+                        title: goodSearchText,
+                        property: null,
+                        operator: "contains",
+                        value: goodSearchText,
+                        preview: true
+                    }]);
+
+                    input.val(tooShortSearchText);
+                    input.triggerHandler("input");
+
+                    // Need to flush for the debounce
+                    $timeout.flush();
+
+                    setTimeout(() => {
+                        expect(onChangeSpy).toHaveBeenCalledWith([]);
+                        done();
+                    }, debounceDelay);
+                }, debounceDelay);
+            });
+        });
+
+        describe("on reset", () => {
+            it("should delete preview criterion", done => {
+                const onChangeSpy = jasmine.createSpy();
+                const element = testUtils.compileTemplate(`
+                    <oui-criteria model="$ctrl.model" on-change="$ctrl.onChangeSpy(modelValue)" searchable></oui-criteria>
+                `, {
+                    onChangeSpy
+                });
+
+                const input = element.find("input");
+                const resetButton = element.find("button").eq(0);
+
+                // Add preview criterion.
+                input.val(goodSearchText).triggerHandler("input");
+
+                // Need to flush for the debounce
+                $timeout.flush();
+
+                setTimeout(() => {
+                    expect(onChangeSpy).toHaveBeenCalledWith([{
+                        title: goodSearchText,
+                        property: null,
+                        operator: "contains",
+                        value: goodSearchText,
+                        preview: true
+                    }]);
+
+                    resetButton.triggerHandler("click");
+
+                    setTimeout(() => {
+                        expect(onChangeSpy).toHaveBeenCalledWith([]);
+                        done();
+                    }, debounceDelay);
+                }, debounceDelay);
+            });
+        });
+    });
+});
diff --git a/packages/oui-criteria-adder/tests/index.js b/packages/oui-criteria/tests/index.js
similarity index 100%
rename from packages/oui-criteria-adder/tests/index.js
rename to packages/oui-criteria/tests/index.js
diff --git a/packages/oui-datagrid/package.json b/packages/oui-datagrid/package.json
index e560790f..fbdb75e6 100644
--- a/packages/oui-datagrid/package.json
+++ b/packages/oui-datagrid/package.json
@@ -5,6 +5,10 @@
   "license": "BSD-3-Clause",
   "author": "OVH SAS",
   "dependencies": {
+    "@ovh-ui/oui-checkbox": "^1.0.0",
+    "@ovh-ui/oui-criteria": "^1.0.0",
+    "@ovh-ui/oui-pagination": "^1.0.0",
+    "@ovh-ui/oui-spinner": "^1.0.0",
     "escape-string-regexp": "^1.0.5"
   }
 }
diff --git a/packages/oui-datagrid/src/datagrid.controller.js b/packages/oui-datagrid/src/datagrid.controller.js
index 91e90a67..c344bd78 100644
--- a/packages/oui-datagrid/src/datagrid.controller.js
+++ b/packages/oui-datagrid/src/datagrid.controller.js
@@ -241,9 +241,8 @@ export default class DatagridController {
     }
 
     onCriteriaChange (criteria) {
-        this.criteria = criteria; // with preview criteria
-        this.appliedCriteria = this.criteria
-            .filter(criterion => !criterion.preview);
+        // Preview criteria are visually filtered by oui-criteria
+        this.criteria = criteria;
         this.refreshData(() => {
             this.paging.setOffset(1);
             this.paging.setCriteria(criteria);
diff --git a/packages/oui-datagrid/src/datagrid.html b/packages/oui-datagrid/src/datagrid.html
index f66b8acf..8624c676 100644
--- a/packages/oui-datagrid/src/datagrid.html
+++ b/packages/oui-datagrid/src/datagrid.html
@@ -1,119 +1,108 @@
-<div>
-    <oui-criteria-container
-        class="oui-datagrid-topbar"
-        on-change="$ctrl.onCriteriaChange(modelValue)">
-        <div class="oui-datagrid-topbar__actions">
-            <oui-datagrid-extra-top class="oui-datagrid-topbar__slot"
-                ng-if="$ctrl.hasExtraTopContent"></oui-datagrid-extra-top>
-            <oui-search ng-if="$ctrl.isSearchTextVisible" model="$ctrl.searchText"></oui-search>
-            <oui-criteria-adder
-                ng-if="$ctrl.filterableColumns.length"
-                properties="$ctrl.filterableColumns"
-                align="end"></oui-criteria-adder>
-        </div>
-        <oui-chips
-            class="oui-datagrid-topbar__criteria"
-            ng-if="$ctrl.appliedCriteria.length"
-            closable
-            items="$ctrl.appliedCriteria"></oui-chips>
-    </oui-criteria-container>
-    <div class="oui-datagrid-responsive-container"
+<oui-criteria
+    class="oui-datagrid-topbar"
+    model="$ctrl.appliedCriteria"
+    properties="$ctrl.filterableColumns"
+    searchable="$ctrl.isSearchTextVisible"
+    on-change="$ctrl.onCriteriaChange(modelValue)">
+    <oui-datagrid-extra-top class="oui-datagrid-topbar__slot"
+        ng-if="$ctrl.hasExtraTopContent">
+    </oui-datagrid-extra-top>
+</oui-criteria>
+<div class="oui-datagrid-responsive-container"
+    ng-class="{
+        'oui-datagrid-responsive-container_sticky-actions': $ctrl.hasActionMenu || $ctrl.customizable,
+        'oui-datagrid-responsive-container_sticky-checkbox': $ctrl.selectableRows
+    }">
+    <div class="oui-datagrid-responsive-container__sticky-container"
         ng-class="{
-            'oui-datagrid-responsive-container_sticky-actions': $ctrl.hasActionMenu || $ctrl.customizable,
-            'oui-datagrid-responsive-container_sticky-checkbox': $ctrl.selectableRows
+            'oui-datagrid-responsive-container__sticky-container_scroll-begin': $ctrl.scrollBegin && ($ctrl.hasActionMenu || $ctrl.customizable),
+            'oui-datagrid-responsive-container__sticky-container_scroll-end': $ctrl.scrollEnd && $ctrl.selectableRows
         }">
-        <div class="oui-datagrid-responsive-container__sticky-container"
-            ng-class="{
-                'oui-datagrid-responsive-container__sticky-container_scroll-begin': $ctrl.scrollBegin && ($ctrl.hasActionMenu || $ctrl.customizable),
-                'oui-datagrid-responsive-container__sticky-container_scroll-end': $ctrl.scrollEnd && $ctrl.selectableRows
-            }">
-            <div class="oui-datagrid-responsive-container__overflow-container">
-                <table class="oui-datagrid oui-datagrid_responsive">
-                    <thead class="oui-datagrid__headers">
-                        <tr class="oui-datagrid__row">
-                            <th class="oui-datagrid__header oui-datagrid__cell-sticky"
-                                ng-if="$ctrl.selectableRows">
-                                <oui-checkbox model="$ctrl.selectAllRows"
-                                              on-change="$ctrl.toggleAllRowsSelection(modelValue)">
-                                </oui-checkbox>
-                            </th>
-                            <th class="oui-datagrid__header"
-                                ng-class="$ctrl.getSortableClasses(column)"
-                                ng-repeat="column in $ctrl.columns track by $index"
-                                ng-click="::$ctrl.sort(column)">
-                                <span ng-bind="column.title"></span>
-                            </th>
-                            <th ng-if="$ctrl.hasActionMenu || $ctrl.customizable"
-                                class="oui-datagrid__header oui-datagrid__cell-sticky">
-                                <oui-datagrid-parameters ng-if="$ctrl.customizable"
-                                    columns="$ctrl.availableColumns"
-                                    on-change="$ctrl.onColumnsChange(columns)"></oui-datagrid-parameters>
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody class="oui-datagrid__body"
-                        ng-hide="$ctrl.loading">
-                        <tr class="oui-datagrid__row oui-action-menu-container"
-                            ng-repeat="row in $ctrl.displayedRows track by $index"
-                            ng-init="rowIndex = $index">
-                            <td class="oui-datagrid__cell oui-datagrid__cell-sticky"
-                                ng-if="$ctrl.selectableRows">
-                                <oui-checkbox model="$ctrl.selectedRows[$index]"
-                                              on-change="$ctrl.toggleRowSelection($index, modelValue)">
-                                </oui-checkbox>
-                            </td>
-                            <td class="oui-datagrid__cell"
-                                ng-class="::[column.class]"
-                                ng-repeat="column in $ctrl.columns track by $index"
-                                data-title="{{column.title}}">
-                                <span ng-if="!column.name || $ctrl.hasProperty(row, column.name) && !column.template"
-                                    ng-bind="column.getValue(row)">
-                                </span>
-                                <oui-datagrid-cell ng-if="row && (!column.name || $ctrl.hasProperty(row, column.name) && column.template)"
-                                    row="row"
-                                    column="column"
-                                    index="rowIndex">
-                                </oui-datagrid-cell>
-                            </td>
-                            <td ng-if="$ctrl.hasActionMenu || $ctrl.customizable"
-                                class="oui-datagrid__cell oui-datagrid__cell-sticky">
-                                <oui-datagrid-cell ng-if="row && $ctrl.hasActionMenu"
-                                    row="row"
-                                    column="$ctrl.actionColumn"
-                                    index="rowIndex">
-                                </oui-datagrid-cell>
-                            </td>
-                        </tr>
-                    </tbody>
-                    <tbody class="oui-datagrid__body"
-                        ng-show="!$ctrl.displayedRows.length || $ctrl.loading || $ctrl.firstLoading">
-                        <tr class="oui-datagrid__row oui-datagrid__row_loading">
-                            <td ng-if="$ctrl.selectableRows"
-                                class="oui-datagrid__cell oui-datagrid__cell-sticky"></td>
-                            <td class="oui-datagrid__cell"
-                                ng-attr-colspan="{{ $ctrl.columns.length }}"
-                                >
-                                <span ng-if="!$ctrl.loading && !$ctrl.firstLoading"
-                                      ng-bind="::$ctrl.emptyPlaceholder || $ctrl.config.translations.emptyPlaceholder"></span>
-                                <oui-spinner ng-if="$ctrl.loading || $ctrl.firstLoading"
-                                    size="s"></oui-spinner>
-                            </td>
-                            <td ng-if="$ctrl.hasActionMenu || $ctrl.customizable"
-                                class="oui-datagrid__cell oui-datagrid__cell-sticky"></td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <div class="oui-datagrid-responsive-container__overflow-container">
+            <table class="oui-datagrid oui-datagrid_responsive">
+                <thead class="oui-datagrid__headers">
+                    <tr class="oui-datagrid__row">
+                        <th class="oui-datagrid__header oui-datagrid__cell-sticky"
+                            ng-if="$ctrl.selectableRows">
+                            <oui-checkbox model="$ctrl.selectAllRows"
+                                            on-change="$ctrl.toggleAllRowsSelection(modelValue)">
+                            </oui-checkbox>
+                        </th>
+                        <th class="oui-datagrid__header"
+                            ng-class="$ctrl.getSortableClasses(column)"
+                            ng-repeat="column in $ctrl.columns track by $index"
+                            ng-click="::$ctrl.sort(column)">
+                            <span ng-bind="column.title"></span>
+                        </th>
+                        <th ng-if="$ctrl.hasActionMenu || $ctrl.customizable"
+                            class="oui-datagrid__header oui-datagrid__cell-sticky">
+                            <oui-datagrid-parameters ng-if="$ctrl.customizable"
+                                columns="$ctrl.availableColumns"
+                                on-change="$ctrl.onColumnsChange(columns)"></oui-datagrid-parameters>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="oui-datagrid__body"
+                    ng-hide="$ctrl.loading">
+                    <tr class="oui-datagrid__row oui-action-menu-container"
+                        ng-repeat="row in $ctrl.displayedRows track by $index"
+                        ng-init="rowIndex = $index">
+                        <td class="oui-datagrid__cell oui-datagrid__cell-sticky"
+                            ng-if="$ctrl.selectableRows">
+                            <oui-checkbox model="$ctrl.selectedRows[$index]"
+                                            on-change="$ctrl.toggleRowSelection($index, modelValue)">
+                            </oui-checkbox>
+                        </td>
+                        <td class="oui-datagrid__cell"
+                            ng-class="::[column.class]"
+                            ng-repeat="column in $ctrl.columns track by $index"
+                            data-title="{{column.title}}">
+                            <span ng-if="!column.name || $ctrl.hasProperty(row, column.name) && !column.template"
+                                ng-bind="column.getValue(row)">
+                            </span>
+                            <oui-datagrid-cell ng-if="row && (!column.name || $ctrl.hasProperty(row, column.name) && column.template)"
+                                row="row"
+                                column="column"
+                                index="rowIndex">
+                            </oui-datagrid-cell>
+                        </td>
+                        <td ng-if="$ctrl.hasActionMenu || $ctrl.customizable"
+                            class="oui-datagrid__cell oui-datagrid__cell-sticky">
+                            <oui-datagrid-cell ng-if="row && $ctrl.hasActionMenu"
+                                row="row"
+                                column="$ctrl.actionColumn"
+                                index="rowIndex">
+                            </oui-datagrid-cell>
+                        </td>
+                    </tr>
+                </tbody>
+                <tbody class="oui-datagrid__body"
+                    ng-show="!$ctrl.displayedRows.length || $ctrl.loading || $ctrl.firstLoading">
+                    <tr class="oui-datagrid__row oui-datagrid__row_loading">
+                        <td ng-if="$ctrl.selectableRows"
+                            class="oui-datagrid__cell oui-datagrid__cell-sticky"></td>
+                        <td class="oui-datagrid__cell"
+                            ng-attr-colspan="{{ $ctrl.columns.length }}"
+                            >
+                            <span ng-if="!$ctrl.loading && !$ctrl.firstLoading"
+                                    ng-bind="::$ctrl.emptyPlaceholder || $ctrl.config.translations.emptyPlaceholder"></span>
+                            <oui-spinner ng-if="$ctrl.loading || $ctrl.firstLoading"
+                                size="s"></oui-spinner>
+                        </td>
+                        <td ng-if="$ctrl.hasActionMenu || $ctrl.customizable"
+                            class="oui-datagrid__cell oui-datagrid__cell-sticky"></td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
-    <div ng-hide="!$ctrl.displayedRows.length || $ctrl.firstLoading || $ctrl.loading">
-        <oui-pagination
-            class="oui-datagrid-panel__pagination"
-            current-offset="$ctrl.paging.offset"
-            page-size="$ctrl.paging.pageSize"
-            total-items="$ctrl.paging.totalCount"
-            on-change="$ctrl.onPaginationChange($event)">
-        </oui-pagination>
-    </div>
 </div>
-
+<div ng-hide="!$ctrl.displayedRows.length || $ctrl.firstLoading || $ctrl.loading">
+    <oui-pagination
+        class="oui-datagrid-panel__pagination"
+        current-offset="$ctrl.paging.offset"
+        page-size="$ctrl.paging.pageSize"
+        total-items="$ctrl.paging.totalCount"
+        on-change="$ctrl.onPaginationChange($event)">
+    </oui-pagination>
+</div>
diff --git a/packages/oui-datagrid/src/index.js b/packages/oui-datagrid/src/index.js
index e21aaf88..6c543f43 100644
--- a/packages/oui-datagrid/src/index.js
+++ b/packages/oui-datagrid/src/index.js
@@ -1,4 +1,6 @@
 import Cell from "./cell/cell.component";
+import Checkbox from "@ovh-ui/oui-checkbox";
+import Criteria from "@ovh-ui/oui-criteria";
 import Datagrid from "./datagrid.directive";
 import DatagridColumnBuilder from "./datagrid-column-builder.service";
 import DatagridExtraTop from "./extra-top/extra-top.component";
@@ -6,14 +8,16 @@ import DatagridPaging from "./paging/datagrid-paging.service";
 import DatagridParameters from "./parameters/datagrid-parameters.component";
 import DatagridProvider from "./datagrid.provider";
 import DatagridService from "./datagrid.service";
+import Pagination from "@ovh-ui/oui-pagination";
+import Spinner from "@ovh-ui/oui-spinner";
 
 export default angular
     .module("oui.datagrid", [
-        "oui.pagination",
-        "oui.dropdown",
-        "oui.criteria-container",
-        "oui.search",
-        "ngAria"
+        "ngAria",
+        Checkbox,
+        Criteria,
+        Pagination,
+        Spinner
     ])
     .service("ouiDatagridColumnBuilder", DatagridColumnBuilder)
     .directive("ouiDatagrid", Datagrid)
diff --git a/packages/oui-datagrid/src/index.spec.js b/packages/oui-datagrid/src/index.spec.js
index 7eeb6b07..6c2d23c6 100644
--- a/packages/oui-datagrid/src/index.spec.js
+++ b/packages/oui-datagrid/src/index.spec.js
@@ -28,7 +28,6 @@ describe("ouiDatagrid", () => {
     beforeEach(angular.mock.module("oui.datagrid"));
     beforeEach(angular.mock.module("oui.test-utils"));
     beforeEach(angular.mock.module("oui.action-menu"));
-    beforeEach(angular.mock.module("oui.checkbox"));
 
     beforeEach(inject((_TestUtils_, _$rootScope_, _$timeout_, _ouiDatagridService_) => {
         TestUtils = _TestUtils_;
diff --git a/packages/oui-search/README.md b/packages/oui-search/README.md
index bffe1916..5ff3ab4f 100644
--- a/packages/oui-search/README.md
+++ b/packages/oui-search/README.md
@@ -82,6 +82,9 @@ See [Autocomplete](#!/oui-angular/autocomplete) directive for more informations.
 | `name`                    | string    | @?        | yes               | n/a               | n/a       | name attribute of the button
 | `placeholder`             | string    | @?        | yes               | n/a               | n/a       | placeholder text
 | `aria-label`              | string    | @?        | yes               | n/a               | n/a       | accessibility label
+| `debounce`                | number    | <?        | no                | n/a               | n/a       | debounce of the model value
+| `minlength`               | number    | <?        | no                | n/a               | n/a       | min length of the model value
+| `maxlength`               | number    | <?        | no                | n/a               | n/a       | max length of the model value
 | `disabled`                | boolean   | <?        | no                | `true`, `false`   | `false`   | disabled flag
 | `on-change`               | function  | &         | no                | n/a               | n/a       | handler triggered when model has changed
 | `on-reset`                | function  | &         | no                | n/a               | n/a       | handler triggered when form is reseted
diff --git a/packages/oui-search/src/index.spec.js b/packages/oui-search/src/index.spec.js
index 1d54b4ff..26a6a358 100644
--- a/packages/oui-search/src/index.spec.js
+++ b/packages/oui-search/src/index.spec.js
@@ -2,11 +2,7 @@ describe("ouiSearch", () => {
     let $timeout;
     let testUtils;
 
-    const goodSearchText = "aa";
-    const tooShortSearchText = "a";
-
     beforeEach(angular.mock.module("oui.search"));
-    beforeEach(angular.mock.module("oui.criteria-container"));
     beforeEach(angular.mock.module("oui.test-utils"));
 
     beforeEach(inject((_$timeout_, _TestUtils_) => {
@@ -63,6 +59,24 @@ describe("ouiSearch", () => {
             expect(buttons.attr("disabled")).toBe("disabled");
         });
 
+        it("should reset value on escape keypress", () => {
+            const escKeyCode = 27;
+            const fooKeyCode = 25;
+            const component = testUtils.compileTemplate('<oui-search model="$ctrl.model"></oui-search>', {
+                model: "foo"
+            });
+            const controller = component.controller("ouiSearch");
+            controller.onSearchReset = jasmine.createSpy("onSearchReset");
+
+            const $input = component.find("input");
+
+            $input.triggerHandler({ type: "keydown", which: fooKeyCode });
+            expect(controller.onSearchReset).not.toHaveBeenCalled();
+
+            $input.triggerHandler({ type: "keydown", which: escKeyCode });
+            expect(controller.onSearchReset).toHaveBeenCalled();
+        });
+
         it("should call function of onChange attribute, when input value has changed, with the model value", () => {
             const onChangeSpy = jasmine.createSpy("onChangeSpy");
             const component = testUtils.compileTemplate('<oui-search model="$ctrl.modelTest" on-change="$ctrl.onChangeSpy(modelValue)"></oui-search>', {
@@ -98,220 +112,4 @@ describe("ouiSearch", () => {
             expect(onSubmitSpy).toHaveBeenCalledWith("foo");
         });
     });
-
-    describe("With criteria container", () => {
-        // Unfortunately, lodash prevent setTimeout to be mocked
-        const debounceDelay = 800;
-
-        describe("on submit", () => {
-            it("should add criterion in criteria container", done => {
-                const searchText = goodSearchText;
-                const onChangeSpy = jasmine.createSpy();
-                const element = testUtils.compileTemplate(`
-                    <oui-criteria-container on-change="$ctrl.onChangeSpy(modelValue)">
-                        <oui-search model="$ctrl.searchText"></oui-search>
-                    </oui-criteria-container>
-                `, {
-                    searchText,
-                    onChangeSpy
-                });
-
-                element.find("form").triggerHandler("submit");
-
-                setTimeout(() => {
-                    expect(onChangeSpy).toHaveBeenCalledWith([{
-                        title: searchText,
-                        property: null,
-                        operator: "contains",
-                        value: searchText
-                    }]);
-                    done();
-                }, debounceDelay);
-            });
-
-            it("should not add criterion in criteria container if the text is too short", done => {
-                const searchText = tooShortSearchText;
-                const onChangeSpy = jasmine.createSpy();
-                const element = testUtils.compileTemplate(`
-                    <oui-criteria-container on-change="$ctrl.onChangeSpy(modelValue)">
-                        <oui-search model="$ctrl.searchText"></oui-search>
-                    </oui-criteria-container>
-                `, {
-                    searchText,
-                    onChangeSpy
-                });
-
-                element.find("form").triggerHandler("submit");
-
-                setTimeout(() => {
-                    expect(onChangeSpy).not.toHaveBeenCalled();
-                    done();
-                }, debounceDelay);
-            });
-        });
-
-        describe("on change", () => {
-            it("should add criterion in criteria container", done => {
-                const onChangeSpy = jasmine.createSpy();
-                const element = testUtils.compileTemplate(`
-                    <oui-criteria-container on-change="$ctrl.onChangeSpy(modelValue)">
-                        <oui-search model="$ctrl.searchText"></oui-search>
-                    </oui-criteria-container>
-                `, {
-                    onChangeSpy
-                });
-
-                const input = element.find("input");
-                input.val(goodSearchText);
-                input.triggerHandler("input");
-
-                setTimeout(() => {
-                    expect(onChangeSpy).toHaveBeenCalledWith([{
-                        title: goodSearchText,
-                        property: null,
-                        operator: "contains",
-                        value: goodSearchText,
-                        preview: true
-                    }]);
-                    done();
-                }, debounceDelay);
-            });
-
-            it("should not add criterion in criteria container if text is too short", done => {
-                const onChangeSpy = jasmine.createSpy();
-                const element = testUtils.compileTemplate(`
-                    <oui-criteria-container on-change="$ctrl.onChangeSpy(modelValue)">
-                        <oui-search model="$ctrl.searchText"></oui-search>
-                    </oui-criteria-container>
-                `, {
-                    onChangeSpy
-                });
-                const delay = 850;
-
-                setTimeout(() => {
-                    const input = element.find("input");
-                    input.val(tooShortSearchText);
-                    input.triggerHandler("input");
-                    expect(onChangeSpy).not.toHaveBeenCalled();
-                    done();
-                }, delay);
-            });
-
-            it("should delete preview criterion if search becomes too short", done => {
-                const onChangeSpy = jasmine.createSpy();
-                const element = testUtils.compileTemplate(`
-                    <oui-criteria-container on-change="$ctrl.onChangeSpy(modelValue)">
-                        <oui-search model="$ctrl.searchText"></oui-search>
-                    </oui-criteria-container>
-                `, {
-                    onChangeSpy
-                });
-
-                const input = element.find("input");
-
-                // Add preview criterion.
-                input.val(goodSearchText);
-                input.triggerHandler("input");
-
-                setTimeout(() => {
-                    expect(onChangeSpy).toHaveBeenCalledWith([{
-                        title: goodSearchText,
-                        property: null,
-                        operator: "contains",
-                        value: goodSearchText,
-                        preview: true
-                    }]);
-
-                    input.val(tooShortSearchText);
-                    input.triggerHandler("input");
-
-                    setTimeout(() => {
-                        expect(onChangeSpy).toHaveBeenCalledWith([]);
-                        done();
-                    }, debounceDelay);
-                }, debounceDelay);
-            });
-        });
-
-        describe("on reset", () => {
-            it("should delete preview criterion", done => {
-                const onChangeSpy = jasmine.createSpy();
-                const element = testUtils.compileTemplate(`
-                    <oui-criteria-container on-change="$ctrl.onChangeSpy(modelValue)">
-                        <oui-search model="$ctrl.searchText"></oui-search>
-                    </oui-criteria-container>
-                `, {
-                    onChangeSpy
-                });
-
-                const input = element.find("input");
-                const resetButton = element.find("button").eq(0);
-
-                // Add preview criterion.
-                input.val(goodSearchText);
-                input.triggerHandler("input");
-
-                setTimeout(() => {
-                    expect(onChangeSpy).toHaveBeenCalledWith([{
-                        title: goodSearchText,
-                        property: null,
-                        operator: "contains",
-                        value: goodSearchText,
-                        preview: true
-                    }]);
-
-                    resetButton.triggerHandler("click");
-
-                    setTimeout(() => {
-                        expect(onChangeSpy).toHaveBeenCalledWith([]);
-                        done();
-                    }, debounceDelay);
-                }, debounceDelay);
-            });
-        });
-
-        describe("on escape", () => {
-            const escKeyCode = 27;
-
-            it("should reset component on escape", () => {
-                const element = testUtils.compileTemplate(`
-                    <oui-criteria-container on-change="$ctrl.onChangeSpy(modelValue)">
-                        <oui-search model="$ctrl.searchText"></oui-search>
-                    </oui-criteria-container>
-                `);
-
-                const controller = element.find("oui-search").controller("ouiSearch");
-                const $input = element.find("input");
-
-                controller.onSearchReset = jasmine.createSpy("onSearchReset");
-
-                $input.triggerHandler({
-                    type: "keydown",
-                    keyCode: escKeyCode
-                });
-
-                expect(controller.onSearchReset).toHaveBeenCalled();
-            });
-
-            it("should not reset component if pressed is not escape", () => {
-                const element = testUtils.compileTemplate(`
-                    <oui-criteria-container on-change="$ctrl.onChangeSpy(modelValue)">
-                        <oui-search model="$ctrl.searchText"></oui-search>
-                    </oui-criteria-container>
-                `);
-
-                const controller = element.find("oui-search").controller("ouiSearch");
-                const $input = element.find("input");
-
-                controller.onSearchReset = jasmine.createSpy("onSearchReset");
-
-                $input.triggerHandler({
-                    type: "keydown",
-                    keyCode: 42
-                });
-
-                expect(controller.onSearchReset).not.toHaveBeenCalled();
-            });
-        });
-    });
 });
diff --git a/packages/oui-search/src/search.component.js b/packages/oui-search/src/search.component.js
index c1fe7f3e..9e656367 100644
--- a/packages/oui-search/src/search.component.js
+++ b/packages/oui-search/src/search.component.js
@@ -2,15 +2,16 @@ import controller from "./search.controller";
 import template from "./search.html";
 
 export default {
-    require: {
-        criteriaContainer: "?^^ouiCriteriaContainer"
-    },
     bindings: {
         model: "=",
         id: "@?",
         name: "@?",
         placeholder: "@?",
         ariaLabel: "@?",
+
+        debounce: "<?",
+        maxlength: "<?",
+        minlength: "<?",
         disabled: "<?",
 
         onChange: "&",
diff --git a/packages/oui-search/src/search.controller.js b/packages/oui-search/src/search.controller.js
index 12b2b72a..2ad8bfb7 100644
--- a/packages/oui-search/src/search.controller.js
+++ b/packages/oui-search/src/search.controller.js
@@ -1,88 +1,34 @@
 import { addBooleanParameter } from "@ovh-ui/common/component-utils";
-import debounce from "lodash/debounce";
 
 const componentClass = "oui-search";
 
-// Min length needed to create a new criterion.
-const minLengthTrigger = 2;
-
-// Minimum delay before each criterion change.
-const criterionDebounceDelay = 800;
-
 const escKeyCode = 27;
 
-export default class SearchController {
+export default class {
     constructor ($attrs, $element, $timeout) {
         "ngInject";
 
         this.$attrs = $attrs;
         this.$element = $element;
         this.$timeout = $timeout;
-
-        this.onCriterionChange = debounce(this.onCriterionChange.bind(this), criterionDebounceDelay);
-        this.onCriterionSubmit = debounce(this.onCriterionSubmit.bind(this), criterionDebounceDelay);
-        this.onCriterionReset = debounce(this.onCriterionReset.bind(this), criterionDebounceDelay);
-    }
-
-    $onInit () {
-        // Support presence of attribute 'disabled'
-        addBooleanParameter(this, "disabled");
-    }
-
-    $postLink () {
-        // Sometimes the digest cycle is done before dom manipulation,
-        // So we use $timeout to force the $apply
-        this.$timeout(() =>
-            this.$element
-                .removeAttr("aria-label")
-                .removeAttr("id")
-                .removeAttr("name")
-                .addClass(componentClass)
-        );
     }
 
     onKeyDown (event) {
-        if (event.keyCode === escKeyCode) {
+        if (event.which === escKeyCode) {
             this.onSearchReset();
         }
     }
 
-    $destroy () {
-        this.$input.off("keypress");
-    }
-
     onSearchChange () {
         const modelValue = this.model;
 
         this.onChange({ modelValue });
-
-        this.onCriterionChange();
-    }
-
-    onCriterionChange () {
-        const modelValue = this.model;
-
-        if (this.criteriaContainer) {
-            if (modelValue && modelValue.length >= minLengthTrigger) {
-                this.criteriaContainer.setPreviewCriterion(SearchController.getCriterion(modelValue), true);
-            } else {
-                this.criteriaContainer.deletePreviewCriterion();
-            }
-        }
     }
 
     onSearchSubmit (modelValue) {
         this.model = undefined;
 
         this.onSubmit({ modelValue });
-
-        this.onCriterionSubmit(modelValue);
-    }
-
-    onCriterionSubmit (modelValue) {
-        if (this.criteriaContainer && modelValue && modelValue.length >= minLengthTrigger) {
-            this.criteriaContainer.add(SearchController.getCriterion(modelValue));
-        }
     }
 
     onSearchReset () {
@@ -90,22 +36,22 @@ export default class SearchController {
         this.model = undefined;
 
         this.onReset();
-
-        this.onCriterionReset();
     }
 
-    onCriterionReset () {
-        if (this.criteriaContainer) {
-            this.criteriaContainer.deletePreviewCriterion();
-        }
+    $onInit () {
+        // Support presence of attribute 'disabled'
+        addBooleanParameter(this, "disabled");
     }
 
-    static getCriterion (modelValue) {
-        return {
-            title: modelValue,
-            property: null, // any property
-            operator: "contains",
-            value: modelValue
-        };
+    $postLink () {
+        // Sometimes the digest cycle is done before dom manipulation,
+        // So we use $timeout to force the $apply
+        this.$timeout(() =>
+            this.$element
+                .removeAttr("aria-label")
+                .removeAttr("id")
+                .removeAttr("name")
+                .addClass(componentClass)
+        );
     }
 }
diff --git a/packages/oui-search/src/search.html b/packages/oui-search/src/search.html
index 3f522cab..95f8e021 100644
--- a/packages/oui-search/src/search.html
+++ b/packages/oui-search/src/search.html
@@ -10,6 +10,9 @@
         ng-attr-name="{{::$ctrl.name}}"
         ng-attr-placeholder="{{::$ctrl.placeholder}}"
         ng-model="$ctrl.model"
+        ng-model-options="{ debounce: $ctrl.debounce }"
+        ng-maxlength="$ctrl.maxlength"
+        ng-minlength="$ctrl.minlength"
         ng-change="$ctrl.onSearchChange()"
         ng-disabled="$ctrl.disabled"
         ng-keydown="$ctrl.onKeyDown($event)" />