@internetstiftelsen/styleguide 4.0.13 → 4.0.15

package/dist/molecules/multi-select/multi-select.js

@@ -69,6 +69,7 @@ var MultiSelect = function () {
 
 		this.getData();
 		this.attach();
+		this.sync();
 	}
 
 	_createClass(MultiSelect, [{
@@ -117,15 +118,34 @@ var MultiSelect = function () {
 				});
 			})));
 		}
+	}, {
+		key: 'sync',
+		value: function sync() {
+			var _this3 = this;
+
+			var inputs = this.element.querySelectorAll('input[name="' + this.name + '[]"]');
+
+			this.selectedItems = [];
+
+			inputs.forEach(function (input) {
+				var item = _this3.data.find(function (d) {
+					return d.value === input.value;
+				});
+
+				if (item) {
+					_this3.addItem(item, false);
+				}
+			});
+		}
 	}, {
 		key: 'filterData',
 		value: function filterData(query) {
-			var _this3 = this;
+			var _this4 = this;
 
 			return this.data.filter(function (item) {
 				return item.name.toLowerCase().startsWith(query.toLowerCase());
 			}).filter(function (item) {
-				return !_this3.selectedItems.includes(item.name);
+				return !_this4.selectedItems.includes(item.name);
 			});
 		}
 	}, {
@@ -173,7 +193,9 @@ var MultiSelect = function () {
 	}, {
 		key: 'addItem',
 		value: function addItem(item) {
-			var _this4 = this;
+			var _this5 = this;
+
+			var save = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
 
 			if (!item) {
 				return;
@@ -195,7 +217,7 @@ var MultiSelect = function () {
 
 			// Event listener for removing the selected item
 			removeBtn.addEventListener('click', function () {
-				_this4.removeItem(item);
+				_this5.removeItem(item);
 			});
 
 			newItem.appendChild(removeBtn);
@@ -203,18 +225,20 @@ var MultiSelect = function () {
 			this.selectedItemsList.appendChild(newItem);
 			this.selectedItems.push(item);
 
-			var itemInput = document.createElement('input');
+			if (save) {
+				var itemInput = document.createElement('input');
 
-			itemInput.type = 'hidden';
-			itemInput.name = this.name + '[]';
-			itemInput.value = item.value;
+				itemInput.type = 'hidden';
+				itemInput.name = this.name + '[]';
+				itemInput.value = item.value;
 
-			this.element.appendChild(itemInput);
+				this.element.appendChild(itemInput);
+			}
 		}
 	}, {
 		key: 'removeHighlight',
 		value: function removeHighlight() {
-			var items = this.suggestionsBox.getElementsByClassName(this.baseClassName + '__suggestion-btn');
+			var items = this.suggestionsBox.getElementsByClassName((0, _className2.default)(this.baseClassName + '__suggestion-btn'));
 
 			[].forEach.call(items, function (item) {
 				item.classList.remove('autocomplete-active');
@@ -223,7 +247,7 @@ var MultiSelect = function () {
 	}, {
 		key: 'highlight',
 		value: function highlight(direction) {
-			var items = this.suggestionsBox.getElementsByClassName(this.baseClassName + '__suggestion-btn');
+			var items = this.suggestionsBox.getElementsByClassName((0, _className2.default)(this.baseClassName + '__suggestion-btn'));
 			var focus = this.currentFocus;
 
 			if (direction === 'down') {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "4.0.13",
+	"version": "4.0.15",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/molecules/multi-select/multi-select.js

@@ -14,6 +14,7 @@ class MultiSelect {
 
 		this.getData();
 		this.attach();
+		this.sync();
 	}
 
 	getData() {
@@ -53,6 +54,20 @@ class MultiSelect {
 		];
 	}
 
+	sync() {
+		const inputs = this.element.querySelectorAll(`input[name="${this.name}[]"]`);
+
+		this.selectedItems = [];
+
+		inputs.forEach((input) => {
+			const item = this.data.find((d) => d.value === input.value);
+
+			if (item) {
+				this.addItem(item, false);
+			}
+		});
+	}
+
 	filterData(query) {
 		return this.data
 			.filter((item) => item.name.toLowerCase().startsWith(query.toLowerCase()))
@@ -112,7 +127,7 @@ class MultiSelect {
 		itemInput.remove();
 	}
 
-	addItem(item) {
+	addItem(item, save = true) {
 		if (!item) {
 			return;
 		}
@@ -141,17 +156,19 @@ class MultiSelect {
 		this.selectedItemsList.appendChild(newItem);
 		this.selectedItems.push(item);
 
-		const itemInput = document.createElement('input');
+		if (save) {
+			const itemInput = document.createElement('input');
 
-		itemInput.type = 'hidden';
-		itemInput.name = `${this.name}[]`;
-		itemInput.value = item.value;
+			itemInput.type = 'hidden';
+			itemInput.name = `${this.name}[]`;
+			itemInput.value = item.value;
 
-		this.element.appendChild(itemInput);
+			this.element.appendChild(itemInput);
+		}
 	}
 
 	removeHighlight() {
-		const items = this.suggestionsBox.getElementsByClassName(`${this.baseClassName}__suggestion-btn`);
+		const items = this.suggestionsBox.getElementsByClassName(className(`${this.baseClassName}__suggestion-btn`));
 
 		[].forEach.call(items, (item) => {
 			item.classList.remove('autocomplete-active');
@@ -159,7 +176,7 @@ class MultiSelect {
 	}
 
 	highlight(direction) {
-		const items = this.suggestionsBox.getElementsByClassName(`${this.baseClassName}__suggestion-btn`);
+		const items = this.suggestionsBox.getElementsByClassName(className(`${this.baseClassName}__suggestion-btn`));
 		let focus = this.currentFocus;
 
 		if (direction === 'down') {