+
-
-
-
-
-
-
-
-
-
- |
-
-
-
- |
- |
-
-
-
-
+
+
+
+
+
+
+
+
+ |
+
+
+
+ |
+ |
+
+
+
-
-
-
-
+
+
+
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-datagrid/tests/index.js b/packages/oui-datagrid/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-datagrid/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);
+}
diff --git a/packages/oui-dropdown/tests/index.js b/packages/oui-dropdown/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-dropdown/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);
+}
diff --git a/packages/oui-dual-list/tests/index.js b/packages/oui-dual-list/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-dual-list/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);
+}
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 @@
+
+
+
+
+
-
+ required
+ multiple>
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-field/tests/index.js b/packages/oui-field/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-field/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);
+}
diff --git a/packages/oui-file/tests/index.js b/packages/oui-file/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-file/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);
+}
diff --git a/packages/oui-form-actions/tests/index.js b/packages/oui-form-actions/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-form-actions/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);
+}
diff --git a/packages/oui-guide-menu/tests/index.js b/packages/oui-guide-menu/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-guide-menu/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);
+}
diff --git a/packages/oui-header-tabs/tests/index.js b/packages/oui-header-tabs/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-header-tabs/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);
+}
diff --git a/packages/oui-inline-adder/tests/index.js b/packages/oui-inline-adder/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-inline-adder/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);
+}
diff --git a/packages/oui-message/tests/index.js b/packages/oui-message/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-message/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);
+}
diff --git a/packages/oui-modal/tests/index.js b/packages/oui-modal/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-modal/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);
+}
diff --git a/packages/oui-navbar/tests/index.js b/packages/oui-navbar/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-navbar/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);
+}
diff --git a/packages/oui-numeric/tests/index.js b/packages/oui-numeric/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-numeric/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);
+}
diff --git a/packages/oui-page-header/tests/index.js b/packages/oui-page-header/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-page-header/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);
+}
diff --git a/packages/oui-pagination/tests/index.js b/packages/oui-pagination/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-pagination/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);
+}
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
+
+
+
+## Usage
+
+### Basic
+
+```html:preview
+
+```
+
+### Placeholder
+
+```html:preview
+
+```
+
+### Disabled
+
+```html:preview
+
+```
+
+### Form validation
+
+```html:preview
+
+```
+
+### Password rules & strength
+
+
+ The component doesn't include any password strength estimator. You can use one like zxcvbn to provide a score, like in this example.
+
+
+```html:preview
+
+```
+
+#### 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
+
+
+ Score 4: Etiam volutpat congue odio imperdiet tincidunt.
+ Score 3: Suspendisse vehicula ut nisl non laoreet.
+ Score 2: Curabitur malesuada mi lectus, eget pharetra erat malesuada sed.
+ Score 1: Vestibulum pulvinar congue lacus sed ultricies.
+ Score 0: Lorem ipsum dolor sit amet.
+
+
+```
+
+#### Score scale
+
+`oui-password-strength`'s score scale is based on
zxcvbn 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 | {
+ 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('
');
+
+ $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(`
+
`);
+
+ $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(`
+
+
+ `, {
+ 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(`
+
`, {
+ 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: "
+ 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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
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: "
+ 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..bd489a5f
--- /dev/null
+++ b/packages/oui-password/src/strength/password-strength.html
@@ -0,0 +1,10 @@
+
+
+
+
diff --git a/packages/oui-password/tests/index.js b/packages/oui-password/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-password/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);
+}
diff --git a/packages/oui-popover/tests/index.js b/packages/oui-popover/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-popover/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);
+}
diff --git a/packages/oui-progress/tests/index.js b/packages/oui-progress/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-progress/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);
+}
diff --git a/packages/oui-radio/tests/index.js b/packages/oui-radio/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-radio/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);
+}
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 | {
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('
', {
+ 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('
', {
@@ -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(`
-
-
-
- `, {
- 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(`
-
-
-
- `, {
- 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(`
-
-
-
- `, {
- 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(`
-
-
-
- `, {
- 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(`
-
-
-
- `, {
- 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(`
-
-
-
- `, {
- 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(`
-
-
-
- `);
-
- 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(`
-
-
-
- `);
-
- 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: "
- 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)" />
diff --git a/packages/oui-search/tests/index.js b/packages/oui-search/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-search/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);
+}
diff --git a/packages/oui-select-picker/tests/index.js b/packages/oui-select-picker/tests/index.js
new file mode 100644
index 00000000..ebd31bdb
--- /dev/null
+++ b/packages/oui-select-picker/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);
+}
diff --git a/packages/oui-select/README.md b/packages/oui-select/README.md
index 766721fa..1a835996 100644
--- a/packages/oui-select/README.md
+++ b/packages/oui-select/README.md
@@ -19,7 +19,7 @@
+ match="country.name">
```
@@ -40,7 +40,20 @@
model="$ctrl.modelSearchable"
placeholder="Select a country..."
items="$ctrl.countries"
- match="name"
+ match="country.name"
+ searchable>
+
+```
+
+### Multiple
+
+```html:preview
+
```
@@ -52,9 +65,7 @@
model="$ctrl.modelDisabled"
placeholder="Select a country..."
items="$ctrl.countries"
- required
- match="name"
- data-align="start"
+ match="country.name"
disabled>
```
@@ -72,7 +83,7 @@
placeholder="Select a country..."
items="$ctrl.countries"
disable-items="$ctrl.disableItems($item)"
- match="name">
+ match="country.name">
```
@@ -84,7 +95,7 @@
placeholder="Select a country..."
items="$ctrl.countries"
group-by="$ctrl.groupByFirstLetter"
- match="name">
+ match="country.name">
```
@@ -101,10 +112,10 @@
placeholder="Select a country..."
items="$ctrl.countries"
group-by="$ctrl.groupByFirstLetter"
- match="name">
-
+ match="country.name">
+
- Code:
+ Code:
```
@@ -117,47 +128,46 @@
```html:preview
+
+
Last onChange value: {{ $ctrl.onChangeModelValue | json}}
+
onBlur counter: {{ $ctrl.onBlurCounter }}
+
onFocus counter: {{ $ctrl.onFocusCounter }}
+
+
Code:
-
-
Last onChange value: {{ $ctrl.onChangeModelValue | json}}
-
onBlur counter: {{ $ctrl.onBlurCounter }}
-
onFocus counter: {{ $ctrl.onFocusCounter }}
-
-
```
## 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 | {
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");
@@ -38,8 +40,7 @@ describe("ouiSelect", () => {
title="${title}"
placeholder="${placeholder}"
items="$ctrl.countries"
- match="name">
-
+ match="country.name">
`, {
countries: data
});
@@ -57,8 +58,7 @@ describe("ouiSelect", () => {
title="Select a country"
placeholder="Select a country..."
items="$ctrl.countries"
- match="name">
-
+ match="country.name">
`, {
countries: data
});
@@ -84,8 +84,8 @@ describe("ouiSelect", () => {
title="Select a country"
placeholder="Select a country..."
items="$ctrl.countries"
- match="name">
-
+ match="country.name">
+
`, {
@@ -111,8 +111,8 @@ describe("ouiSelect", () => {
title="Select a country"
placeholder="Select a country..."
items="$ctrl.countries"
- match="name">
-
`, {
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(`
+
`, {
+ 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(`
+
`, {
+ 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]).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(`
@@ -148,8 +215,7 @@ describe("ouiSelect", () => {
title="Select a country"
placeholder="Select a country..."
items="$ctrl.countries"
- match="name">
-
+ match="country.name">
`, {
countries: data
});
@@ -159,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);
});
@@ -171,7 +237,6 @@ describe("ouiSelect", () => {
title="Select a country"
model="$ctrl.country"
items="$ctrl.array">
-
`, {
array: stringArray
});
@@ -189,16 +254,15 @@ 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(`
`, {
countries: data,
groupByFirstLetter
@@ -228,9 +292,8 @@ describe("ouiSelect", () => {
title="Select a country"
placeholder="Select a country..."
items="$ctrl.countries"
- match="name"
+ match="country.name"
on-blur="$ctrl.onBlur()">
-
`, {
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();
});
});
@@ -251,9 +318,8 @@ describe("ouiSelect", () => {
title="Select a country"
placeholder="Select a country..."
items="$ctrl.countries"
- match="name"
+ match="country.name"
on-focus="$ctrl.onFocus()">
-
`, {
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();
});
});
@@ -274,9 +344,8 @@ describe("ouiSelect", () => {
title="Select a country"
placeholder="Select a country..."
items="$ctrl.countries"
- match="name"
+ match="country.name"
on-change="$ctrl.onChange(modelValue)">
-
`, {
countries: data,
onChange
@@ -302,16 +371,15 @@ 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(`
`, {
countries: data,
disableCountry
@@ -329,13 +397,12 @@ describe("ouiSelect", () => {
const disableCountry = (item) => item.code === "";
const element = TestUtils.compileTemplate(`
`, {
countries,
disableCountry
diff --git a/packages/oui-select/src/select.controller.js b/packages/oui-select/src/select.controller.js
index fbe33041..84f980f8 100644
--- a/packages/oui-select/src/select.controller.js
+++ b/packages/oui-select/src/select.controller.js
@@ -15,11 +15,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);
});
@@ -29,11 +35,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());
}
@@ -43,25 +52,75 @@ 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;
+ }
+ });
}
getPropertyValue (item) {
- return get(item, this.match, null);
+ return get(item, this.match, item);
}
}
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: "
-
+ 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">
+
diff --git a/packages/oui-select/src/templates/match-multiple.html b/packages/oui-select/src/templates/match-multiple.html
index 04def96c..fcea1609 100644
--- a/packages/oui-select/src/templates/match-multiple.html
+++ b/packages/oui-select/src/templates/match-multiple.html
@@ -1,16 +1,21 @@
diff --git a/packages/oui-select/src/templates/match.html b/packages/oui-select/src/templates/match.html
index f0e561af..7f43eabc 100644
--- a/packages/oui-select/src/templates/match.html
+++ b/packages/oui-select/src/templates/match.html
@@ -1,10 +1,11 @@