@internetstiftelsen/styleguide 4.0.14 → 4.0.16

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

@@ -140,12 +140,14 @@ var MultiSelect = function () {
 	}, {
 		key: 'filterData',
 		value: function filterData(query) {
-			var _this4 = this;
+			var selectedValues = this.selectedItems.map(function (item) {
+				return item.value;
+			});
 
 			return this.data.filter(function (item) {
 				return item.name.toLowerCase().startsWith(query.toLowerCase());
 			}).filter(function (item) {
-				return !_this4.selectedItems.includes(item.name);
+				return !selectedValues.includes(item.value);
 			});
 		}
 	}, {
@@ -193,7 +195,7 @@ var MultiSelect = function () {
 	}, {
 		key: 'addItem',
 		value: function addItem(item) {
-			var _this5 = this;
+			var _this4 = this;
 
 			var save = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
 
@@ -217,7 +219,7 @@ var MultiSelect = function () {
 
 			// Event listener for removing the selected item
 			removeBtn.addEventListener('click', function () {
-				_this5.removeItem(item);
+				_this4.removeItem(item);
 			});
 
 			newItem.appendChild(removeBtn);
@@ -238,7 +240,7 @@ var MultiSelect = function () {
 	}, {
 		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');
@@ -247,7 +249,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') {
@@ -265,7 +267,7 @@ var MultiSelect = function () {
 	}, {
 		key: 'selectHighlighted',
 		value: function selectHighlighted() {
-			var items = this.suggestionsBox.getElementsByClassName(this.baseClassName + '__suggestion-btn');
+			var items = this.suggestionsBox.getElementsByClassName((0, _className2.default)(this.baseClassName + '__suggestion-btn'));
 
 			if (this.currentFocus > -1 && items[this.currentFocus]) {
 				var item = items[this.currentFocus];

package/package.json

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

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

@@ -0,0 +1,26 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		default_value: null,
+		add: false,
+	},
+
+	variants: [
+		{
+			name: 'default',
+		},
+		{
+			name: 'pre selected',
+			context: {
+				default_value: 'stockholm'
+			}
+		},
+		{
+			name: 'custom items',
+			context: {
+				add: true
+			}
+		}
+	]
+};

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

@@ -69,9 +69,11 @@ class MultiSelect {
 	}
 
 	filterData(query) {
+		const selectedValues = this.selectedItems.map((item) => item.value);
+
 		return this.data
 			.filter((item) => item.name.toLowerCase().startsWith(query.toLowerCase()))
-			.filter((item) => !this.selectedItems.includes(item.name));
+			.filter((item) => !selectedValues.includes(item.value));
 	}
 
 	populateSuggestions(suggestions) {
@@ -168,7 +170,7 @@ class MultiSelect {
 	}
 
 	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');
@@ -176,7 +178,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') {
@@ -193,7 +195,7 @@ class MultiSelect {
 	}
 
 	selectHighlighted() {
-		const items = this.suggestionsBox.getElementsByClassName(`${this.baseClassName}__suggestion-btn`);
+		const items = this.suggestionsBox.getElementsByClassName(className(`${this.baseClassName}__suggestion-btn`));
 
 		if (this.currentFocus > -1 && items[this.currentFocus]) {
 			const item = items[this.currentFocus];