@paraboly/pwc-multi-filter - npm Package Compare versions

Comparing version 1.0.0-0 to 1.0.0

dist/cjs/loader.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const core = require('./core-2d6df7b9.js');
+const core = require('./core-5aa94191.js');
 
@@ -11,3 +11,3 @@ const defineCustomElements = (win, options) => {
     core.globals();
-    core.bootstrapLazy([["pwc-dynamic-form-buttons.cjs",[[0,"pwc-dynamic-form-buttons",{"items":[1]}]]],["pwc-tabview.cjs",[[4,"pwc-tabview",{"activeHandle":[32],"forceRenderSentinel":[32],"getActiveState":[64],"switchToTab":[64]},[[0,"tabModified","tabModifiedEventHandler"],[0,"handleClicked","handleClickedHandler"]]]]],["pwc-tabview-tab.cjs",[[4,"pwc-tabview-tab",{"handle":[513],"active":[4]}]]],["pwc-dynamic-form.cjs",[[4,"pwc-dynamic-form",{"getFieldValues":[64]},[[0,"fieldChanged","handleFieldChanged"],[0,"reset","handleFormReset"]]]]],["pwc-tabview-handle.cjs",[[0,"pwc-tabview-handle",{"handle":[1],"active":[516]},[[0,"click","clickEventHandler"]]]]],["pwc-choices.cjs",[[0,"pwc-choices",{"name":[1],"type":[1],"options":[1],"placeholder":[1],"dropdownIsOpen":[4,"dropdown-is-open"],"autoHidePlaceholder":[4,"auto-hide-placeholder"],"showCloseButtons":[4,"show-close-buttons"],"uniqueSelections":[4,"unique-selections"],"noOptionsString":[1,"no-options-string"],"distinctMode":[1,"distinct-mode"],"selectedOptions":[32],"getSelectedOptions":[64]},[[0,"optionDiscarded","optionDiscardedHandler"],[0,"inputBarClicked","inputBarClickedHandler"],[0,"dropdownOptionClicked","dropdownOptionClickedHandler"],[8,"click","windowClickHandler"],[0,"click","selfClickHandler"]]]]],["color-picker.cjs",[[0,"color-picker",{"colors":[8],"inputValue":[1,"input-value"],"activeColor":[1537,"active-color"],"selectedOne":[32],"hovered":[32]}]]],["pwc-choices-input-bar.cjs",[[0,"pwc-choices-input-bar",{"type":[1],"options":[16],"showCloseButtons":[4,"show-close-buttons"],"placeholder":[1],"autoHidePlaceholder":[4,"auto-hide-placeholder"]},[[0,"closeClicked","optionBubbleCloseClickedHandler"]]]]],["pwc-choices-dropdown.cjs",[[0,"pwc-choices-dropdown",{"options":[16],"noOptionsString":[1,"no-options-string"],"filteredOptions":[32]}]]],["pwc-choices-option-bubble.cjs",[[0,"pwc-choices-option-bubble",{"showCloseButton":[4,"show-close-button"],"option":[16],"indexInSelectedList":[2,"index-in-selected-list"]}]]],["pwc-dynamic-form-content.cjs",[[0,"pwc-dynamic-form-content",{"items":[1]}]]],["pwc-filter.cjs",[[0,"pwc-filter",{"data":[1],"items":[1],"resolvedData":[32],"resolvedItems":[32],"filter":[64]},[[0,"formChanged","formChangedHandler"]]]]],["pwc-multi-filter.cjs",[[0,"pwc-multi-filter",{"filterConfigs":[32],"getActiveState":[64],"switchToFilter":[64],"addFilter":[64],"removeFilter":[64],"getFilter":[64],"subscribeToFilterChange":[64],"getFilterResult":[64]},[[0,"tabChanged","tabChangedEventHandler"]]]]]], options);
+    core.bootstrapLazy([["pwc-dynamic-form-buttons.cjs",[[0,"pwc-dynamic-form-buttons",{"items":[1]}]]],["pwc-tabview.cjs",[[4,"pwc-tabview",{"activeTitle":[32],"forceRenderSentinel":[32],"getActiveState":[64],"switchToTab":[64]},[[0,"tabModified","tabModifiedEventHandler"],[0,"handleClicked","handleClickedHandler"]]]]],["pwc-tabview-tab.cjs",[[4,"pwc-tabview-tab",{"title":[513],"active":[516]}]]],["pwc-dynamic-form.cjs",[[4,"pwc-dynamic-form",{"getFieldValues":[64]},[[0,"fieldChanged","handleFieldChanged"],[0,"reset","handleFormReset"]]]]],["pwc-tabview-handle.cjs",[[0,"pwc-tabview-handle",{"title":[1],"active":[516]},[[0,"click","clickEventHandler"]]]]],["pwc-color-picker.cjs",[[0,"pwc-color-picker",{"colors":[8],"inputValue":[1,"input-value"],"activeColor":[1537,"active-color"],"selectedOne":[32],"hovered":[32]}]]],["pwc-choices-dropdown.cjs",[[0,"pwc-choices-dropdown",{"options":[16],"noOptionsString":[1,"no-options-string"],"searchBarPlaceholder":[1,"search-bar-placeholder"],"filteredOptions":[32]}]]],["pwc-choices-option-bubble.cjs",[[0,"pwc-choices-option-bubble",{"showCloseButton":[4,"show-close-button"],"option":[16],"indexInSelectedList":[2,"index-in-selected-list"]}]]],["pwc-choices-input-bar.cjs",[[0,"pwc-choices-input-bar",{"type":[1],"options":[16],"showCloseButtons":[4,"show-close-buttons"],"placeholder":[1],"autoHidePlaceholder":[4,"auto-hide-placeholder"]},[[0,"closeClicked","optionBubbleCloseClickedHandler"],[0,"click","onInputBarClick"]]]]],["pwc-choices.cjs",[[0,"pwc-choices",{"name":[1],"type":[1],"options":[1],"searchBarPlaceholder":[1,"search-bar-placeholder"],"placeholder":[1],"autoHidePlaceholder":[4,"auto-hide-placeholder"],"dropdownIsOpen":[1540,"dropdown-is-open"],"showCloseButtons":[4,"show-close-buttons"],"uniqueSelections":[4,"unique-selections"],"noOptionsString":[1,"no-options-string"],"distinctMode":[1,"distinct-mode"],"selectedOptions":[32],"getSelectedOptionsAsValues":[64],"getSelectedOptionsAsLabels":[64],"getSelectedOptionsAsObjects":[64]},[[0,"optionDiscarded","optionDiscardedHandler"],[0,"inputBarClicked","inputBarClickedHandler"],[0,"dropdownOptionClicked","dropdownOptionClickedHandler"],[8,"click","windowClickHandler"],[0,"click","selfClickHandler"]]]]],["pwc-dynamic-form-content.cjs",[[0,"pwc-dynamic-form-content",{"items":[1],"getColorPickerRefs":[64],"getChoicesRefs":[64],"getNativeInputRefs":[64]},[[0,"change","changeEventHandler"],[0,"selectedOptionsChanged","selectedOptionsChangedHandler"],[0,"colorPickedEvent","colorPickedeventHandler"]]]]],["pwc-filter.cjs",[[0,"pwc-filter",{"data":[1],"items":[1],"resolvedData":[32],"resolvedItems":[32],"filter":[64]},[[0,"formChanged","formChangedHandler"]]]]],["pwc-multi-filter.cjs",[[0,"pwc-multi-filter",{"filterConfigs":[32],"getActiveState":[64],"switchToFilter":[64],"addFilter":[64],"removeFilter":[64],"getFilter":[64],"subscribeToFilterChange":[64],"getFilterResult":[64]},[[0,"tabChanged","tabChangedEventHandler"]]]]]], options);
   });
@@ -14,0 +14,0 @@ };

dist/cjs/pwc-choices-dropdown.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const core = require('./core-2d6df7b9.js');
+const core = require('./core-5aa94191.js');
 const _commonjsHelpers = require('./_commonjsHelpers-ab75601c.js');
@@ -161,3 +161,3 @@
     optionsWatchHandler(newValue) {
-        this.filteredOptions = this.doFilter(this.getWholeSearchInput(), newValue);
+        this.filteredOptions = this.doFilter(this.searchRef.value, newValue);
     }
@@ -167,5 +167,2 @@ componentWillLoad() {
     }
-    constructDropdown() {
-        return (core.h("div", { class: "dropdown" }, core.h("input", { type: "text", class: "search", placeholder: "Search by typing...", onInput: e => this.onSearchInput(e) }), core.h("ul", null, this.filteredOptions && this.filteredOptions.length === 0 ? (core.h("li", { id: "noOptionsListItem" }, " ", this.noOptionsString)) : (this.filteredOptions.map(option => this.constructDropdownOption(option))))));
-    }
     doFilter(phrase, rawOptions) {
@@ -181,17 +178,7 @@ if (phrase.length === 0) {
     }
-    onSearchInput(e) {
-        e.stopPropagation();
-        this.filteredOptions = this.doFilter(this.getWholeSearchInput(), this.options);
+    onSearchInput() {
+        this.filteredOptions = this.doFilter(this.searchRef.value, this.options);
     }
-    getWholeSearchInput() {
-        const searchBar = this.root.querySelector(".search");
-        return searchBar.value;
-    }
-    constructDropdownOption(option) {
-        return (core.h("li", { onClick: e => this.onDropdownOptionClick(option, e) }, core.h("span", { innerHTML: option.string })));
-    }
     onDropdownOptionClick(optionFilterResult, clickEvent) {
         const originalOption = optionFilterResult.original;
-        clickEvent.preventDefault();
-        clickEvent.stopPropagation();
         this.dropdownOptionClicked.emit({
@@ -209,7 +196,7 @@ originalEvent: clickEvent,
     convertOptionsToFilterResultsAsIs(rawOptions) {
-        return rawOptions.map(o => {
+        return rawOptions.map((o, i) => {
             return {
                 string: o.label,
                 score: 0,
-                index: 0,
+                index: i,
                 original: o
@@ -219,4 +206,11 @@ };
     }
+    constructDropdownOption(option) {
+        return (core.h("li", { onClick: this.onDropdownOptionClick.bind(this, option) }, core.h("span", { innerHTML: option.string })));
+    }
     render() {
-        return this.constructDropdown();
+        return [
+            core.h("input", { type: "text", class: "pwc-choices___search", placeholder: this.searchBarPlaceholder || "Search by typing...", ref: elm => (this.searchRef = elm), onInput: this.onSearchInput.bind(this) }),
+            core.h("ul", null, this.filteredOptions &&
+                (this.filteredOptions.length === 0 ? (core.h("li", { id: "pwc-choices___no-options-list-item" }, " ", this.noOptionsString)) : (this.filteredOptions.map(option => this.constructDropdownOption(option)))))
+        ];
     }
@@ -227,5 +221,5 @@ get root() { return core.getElement(this); }
     }; }
-    static get style() { return "* {\n  margin: 0;\n  padding: 0;\n  -webkit-transition: background-color ease 0.2s;\n  transition: background-color ease 0.2s;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n}\n\n.container {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: relative;\n  width: 100%;\n}\n\n.input-bar {\n  border: 1px solid black;\n  min-height: 44px;\n  padding: 5px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  border-radius: 5px;\n  overflow: hidden;\n  background-color: white;\n}\n\n.input-bar-main {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.input-bar-dropdown-icon {\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-line-pack: center;\n  align-content: center;\n  margin: 0 10px 0 10px;\n}\n\n.dropdown {\n  border: 1px solid black;\n  position: absolute;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  width: 100%;\n  border-radius: 5px;\n  background-color: white;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  overflow: hidden;\n  z-index: 1000000;\n}\n\n.search {\n  padding: 10px;\n  border: 0;\n  border-bottom: 1px solid black;\n}\n\n.dropdown > ul {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  max-height: 250px;\n  overflow-y: scroll;\n  overflow-x: hidden;\n}\n\n.dropdown > ul > li {\n  cursor: pointer;\n  padding: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n}\n\n.dropdown > ul > li:hover {\n  background-color: #eee;\n}\n\n.dropdown > ul > li + li {\n  border-top: 1px solid black;\n}\n\n.bubble {\n  border: 1px solid black;\n  border-radius: 5px;\n  padding: 5px 10px 5px 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  margin: 5px;\n  min-height: 22px;\n}\n\n.bubble-closeButton {\n  margin-left: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n#placeholderBubble {\n  color: grey;\n}\n\n#noOptionsListItem {\n  cursor: default;\n  color: grey;\n}\n\n.singleSelectInputBarItem {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  margin: 10px;\n}\n\n.singleSelectInputBarPlaceholder {\n  color: grey;\n}"; }
+    static get style() { return "pwc-choices-dropdown {\n  margin: 0;\n  padding: 0;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n  border: 1px solid black;\n  position: absolute;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  width: 100%;\n  border-radius: 5px;\n  background-color: white;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  overflow: hidden;\n  z-index: 1000000;\n}\n\n.pwc-choices___search {\n  font-size: medium;\n  padding: 10px;\n  border: 0;\n  border-bottom: 1px solid black;\n}\n\npwc-choices-dropdown > ul {\n  padding: 0;\n  margin: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  max-height: 250px;\n  overflow-y: scroll;\n  overflow-x: hidden;\n}\n\npwc-choices-dropdown > ul > li {\n  -webkit-transition: background-color ease 0.2s;\n  transition: background-color ease 0.2s;\n  margin: 0;\n  cursor: pointer;\n  padding: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n}\n\npwc-choices-dropdown > ul > li:hover {\n  background-color: #eee;\n}\n\npwc-choices-dropdown > ul > li + li {\n  border-top: 1px solid black;\n}\n\n#pwc-choices___no-options-list-item {\n  cursor: default;\n  color: grey;\n}"; }
 };
 
 exports.pwc_choices_dropdown = PwcChoicesDropdown;

dist/cjs/pwc-choices-input-bar.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const core = require('./core-2d6df7b9.js');
+const core = require('./core-5aa94191.js');
 
@@ -22,20 +22,7 @@ const PwcChoicesInputBar = class {
     }
-    constructInputBar() {
-        let inputBarMainRender;
-        switch (this.type) {
-            case "single":
-                inputBarMainRender =
-                    this.options && this.options.length > 0 ? (core.h("div", { class: "singleSelectInputBarItem" }, this.options[0].label)) : (core.h("div", { class: "singleSelectInputBarItem singleSelectInputBarPlaceholder" }, this.placeholder));
-                break;
-            case "multi":
-                inputBarMainRender = [
-                    this.constructSelectedOptions(),
-                    this.constructPlaceholder()
-                ];
-                break;
-        }
-        return (core.h("div", { class: "input-bar", onClick: e => this.onInputBarClick(e) }, core.h("div", { class: "input-bar-main" }, inputBarMainRender), core.h("div", { class: "input-bar-dropdown-icon" }, core.h("svg", { width: "28", height: "28", viewBox: "0 0 18 18" }, core.h("path", { d: "M5 8l4 4 4-4z" })))));
+    onInputBarClick(e) {
+        this.inputBarClicked.emit({ originalEvent: e });
     }
     constructSelectedOptions() {
-        return this.options.map((selectedOption, index) => (core.h("pwc-choices-option-bubble", { option: selectedOption, showCloseButton: this.showCloseButtons, indexInSelectedList: index })));
+        return this.options.map((option, index) => (core.h("pwc-choices-option-bubble", { option: option, showCloseButton: this.showCloseButtons, indexInSelectedList: index })));
     }
@@ -45,15 +32,21 @@ constructPlaceholder() {
         const shouldDisplay = this.placeholder && !(this.autoHidePlaceholder && selectedItemCount > 0);
-        return (shouldDisplay && (core.h("pwc-choices-option-bubble", { id: "placeholderBubble", option: { value: "placeholder", label: this.placeholder }, showCloseButton: false, indexInSelectedList: -1 })));
+        return (shouldDisplay && (core.h("pwc-choices-option-bubble", { id: "pwc-choices___placeholder-bubble", option: { value: "placeholder", label: this.placeholder }, showCloseButton: false, indexInSelectedList: -1 })));
     }
-    onInputBarClick(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.inputBarClicked.emit({ originalEvent: e });
+    constructMainRender() {
+        switch (this.type) {
+            case "single":
+                return this.options && this.options.length > 0 ? (core.h("div", { class: "pwc-choices___single-select-input-bar-item" }, this.options[0].label)) : (core.h("div", { class: "pwc-choices___single-select-input-bar-item pwc-choices___single-select-input-bar-placeholder" }, this.placeholder));
+            case "multi":
+                return [this.constructSelectedOptions(), this.constructPlaceholder()];
+        }
     }
     render() {
-        return this.constructInputBar();
+        return [
+            core.h("div", { class: "pwc-choices___input-bar-main" }, this.constructMainRender()),
+            core.h("div", { class: "pwc-choices___input-bar-dropdown-icon" }, core.h("svg", { width: "28", height: "28", viewBox: "0 0 18 18" }, core.h("path", { d: "M5 8l4 4 4-4z" })))
+        ];
     }
-    static get style() { return "* {\n  margin: 0;\n  padding: 0;\n  -webkit-transition: background-color ease 0.2s;\n  transition: background-color ease 0.2s;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n}\n\n.container {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: relative;\n  width: 100%;\n}\n\n.input-bar {\n  border: 1px solid black;\n  min-height: 44px;\n  padding: 5px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  border-radius: 5px;\n  overflow: hidden;\n  background-color: white;\n}\n\n.input-bar-main {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.input-bar-dropdown-icon {\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-line-pack: center;\n  align-content: center;\n  margin: 0 10px 0 10px;\n}\n\n.dropdown {\n  border: 1px solid black;\n  position: absolute;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  width: 100%;\n  border-radius: 5px;\n  background-color: white;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  overflow: hidden;\n  z-index: 1000000;\n}\n\n.search {\n  padding: 10px;\n  border: 0;\n  border-bottom: 1px solid black;\n}\n\n.dropdown > ul {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  max-height: 250px;\n  overflow-y: scroll;\n  overflow-x: hidden;\n}\n\n.dropdown > ul > li {\n  cursor: pointer;\n  padding: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n}\n\n.dropdown > ul > li:hover {\n  background-color: #eee;\n}\n\n.dropdown > ul > li + li {\n  border-top: 1px solid black;\n}\n\n.bubble {\n  border: 1px solid black;\n  border-radius: 5px;\n  padding: 5px 10px 5px 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  margin: 5px;\n  min-height: 22px;\n}\n\n.bubble-closeButton {\n  margin-left: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n#placeholderBubble {\n  color: grey;\n}\n\n#noOptionsListItem {\n  cursor: default;\n  color: grey;\n}\n\n.singleSelectInputBarItem {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  margin: 10px;\n}\n\n.singleSelectInputBarPlaceholder {\n  color: grey;\n}"; }
+    static get style() { return "pwc-choices-input-bar {\n  margin: 0;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n  border: 1px solid black;\n  min-height: 44px;\n  padding: 5px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  border-radius: 5px;\n  overflow: hidden;\n  background-color: white;\n}\n\n.pwc-choices___input-bar-main {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.pwc-choices___input-bar-dropdown-icon {\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-line-pack: center;\n  align-content: center;\n  margin: 0 10px 0 10px;\n}\n\n.pwc-choices___single-select-input-bar-item {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  margin: 10px;\n}\n\n.pwc-choices___single-select-input-bar-placeholder {\n  color: grey;\n}"; }
 };
 
 exports.pwc_choices_input_bar = PwcChoicesInputBar;

dist/cjs/pwc-choices-option-bubble.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const core = require('./core-2d6df7b9.js');
+const core = require('./core-5aa94191.js');
 
@@ -14,3 +14,3 @@ const PwcChoicesOptionBubble = class {
     onCloseClicked(event) {
-        event.preventDefault();
+        // stop propagation so the input bar doesn't pick it up as a click on itself and close the dropdown.
         event.stopPropagation();
@@ -25,8 +25,11 @@ this.closeClicked.emit({
     render() {
-        return (core.h("div", { class: "bubble" }, core.h("span", { class: "bubble-label" }, this.option.label), this.showCloseButton && (core.h("span", { class: "bubble-closeButton", onClick: e => this.onCloseClicked(e) }, core.h("svg", { width: "16", height: "16", viewBox: "0 0 18 18" }, core.h("path", { d: "M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z" }))))));
+        return [
+            core.h("span", { class: "pwc-choices___bubble-label" }, this.option.label),
+            this.showCloseButton && (core.h("span", { class: "pwc-choices___bubble-close-button", onClick: e => this.onCloseClicked(e) }, core.h("svg", { width: "16", height: "16", viewBox: "0 0 18 18" }, core.h("path", { d: "M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z" }))))
+        ];
     }
     get rootElement() { return core.getElement(this); }
-    static get style() { return "* {\n  margin: 0;\n  padding: 0;\n  -webkit-transition: background-color ease 0.2s;\n  transition: background-color ease 0.2s;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n}\n\n.container {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: relative;\n  width: 100%;\n}\n\n.input-bar {\n  border: 1px solid black;\n  min-height: 44px;\n  padding: 5px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  border-radius: 5px;\n  overflow: hidden;\n  background-color: white;\n}\n\n.input-bar-main {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.input-bar-dropdown-icon {\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-line-pack: center;\n  align-content: center;\n  margin: 0 10px 0 10px;\n}\n\n.dropdown {\n  border: 1px solid black;\n  position: absolute;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  width: 100%;\n  border-radius: 5px;\n  background-color: white;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  overflow: hidden;\n  z-index: 1000000;\n}\n\n.search {\n  padding: 10px;\n  border: 0;\n  border-bottom: 1px solid black;\n}\n\n.dropdown > ul {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  max-height: 250px;\n  overflow-y: scroll;\n  overflow-x: hidden;\n}\n\n.dropdown > ul > li {\n  cursor: pointer;\n  padding: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n}\n\n.dropdown > ul > li:hover {\n  background-color: #eee;\n}\n\n.dropdown > ul > li + li {\n  border-top: 1px solid black;\n}\n\n.bubble {\n  border: 1px solid black;\n  border-radius: 5px;\n  padding: 5px 10px 5px 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  margin: 5px;\n  min-height: 22px;\n}\n\n.bubble-closeButton {\n  margin-left: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n#placeholderBubble {\n  color: grey;\n}\n\n#noOptionsListItem {\n  cursor: default;\n  color: grey;\n}\n\n.singleSelectInputBarItem {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  margin: 10px;\n}\n\n.singleSelectInputBarPlaceholder {\n  color: grey;\n}"; }
+    static get style() { return "pwc-choices-option-bubble {\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n  border: 1px solid black;\n  border-radius: 5px;\n  padding: 5px 10px 5px 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  margin: 5px;\n  min-height: 22px;\n}\n\n.pwc-choices___bubble-close-button {\n  margin-left: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n#pwc-choices___placeholder-bubble {\n  color: grey;\n}"; }
 };
 
 exports.pwc_choices_option_bubble = PwcChoicesOptionBubble;

dist/cjs/pwc-choices.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const core = require('./core-2d6df7b9.js');
+const core = require('./core-5aa94191.js');
 require('./_commonjsHelpers-ab75601c.js');
@@ -56,9 +56,11 @@ const lodash = require('./lodash-23b825de.js');
 
-const AllRetreiveModeLiterals = ["option", "value", "label"];
-
 const PwcChoices = class {
     constructor(hostRef) {
         core.registerInstance(this, hostRef);
+        /**
+         * The selection behaviour.
+         * "multi" allows selection of multiple options.
+         * "single" allows selection of only a single option (just like the native HTML select element).
+         */
         this.type = "multi";
-        this.dropdownIsOpen = false;
         /**
@@ -69,2 +71,6 @@ * If true, the placeholder will be hidden if there are selected options.
         /**
+         * This determines wheter the dropdown is open or not.
+         */
+        this.dropdownIsOpen = false;
+        /**
          * If true, selected option bubbles will have close buttons.
@@ -83,4 +89,6 @@ */
          * This is the mode of filtering we use to make given option objects distinct.
+         * "none" disables the distinct filtering behaviour.
          */
         this.distinctMode = "none";
+        this.doNotEmitChangeEvent = false;
         this.selectedOptions = [];
@@ -103,17 +111,25 @@ this.selectedOptionsChanged = core.createEvent(this, "selectedOptionsChanged", 7);
     selectedOptionsWatchHandler(newValue) {
-        this.selectedOptionsChanged.emit(newValue);
-        this.selectedOptions = newValue;
-    }
-    async getSelectedOptions(mode = "option") {
-        switch (mode) {
-            case "option":
-                return this.selectedOptions;
-            case "value":
-                return this.selectedOptions.map(o => o.value);
-            case "label":
-                return this.selectedOptions.map(o => o.label);
-            default:
-                throwTypeLiteralNotSupported("mode", mode, AllRetreiveModeLiterals);
+        if (!this.doNotEmitChangeEvent) {
+            this.selectedOptionsChanged.emit(newValue);
         }
+        this.doNotEmitChangeEvent = false;
     }
+    /**
+     * Returns the values of currently selected options.
+     */
+    async getSelectedOptionsAsValues() {
+        return this.selectedOptions.map(o => o.value);
+    }
+    /**
+     * Returns the labels of currently selected options.
+     */
+    async getSelectedOptionsAsLabels() {
+        return this.selectedOptions.map(o => o.label);
+    }
+    /**
+     * Returns the selected options as objects (as passed in to this component).
+     */
+    async getSelectedOptionsAsObjects() {
+        return this.selectedOptions;
+    }
     optionDiscardedHandler(event) {
@@ -150,3 +166,12 @@ const payload = event.detail;
         this.distinctModeWatchHandler(this.distinctMode);
+        this.doNotEmitChangeEvent = true;
+        this.selectInitialSelectedOptions();
     }
+    selectInitialSelectedOptions() {
+        const initialSelections = lodash._.filter(this.resolvedOptions, o => o.initialSelected && o.initialSelected === true);
+        if (this.type === "single" && initialSelections.length > 1) {
+            throw new Error("You have multiple initial selected options, but the type is `single`!");
+        }
+        this.selectedOptions = [...initialSelections];
+    }
     componentDidLoad() {
@@ -164,3 +189,4 @@ this.form = this.root.closest("form");
     handleFormReset() {
-        this.selectedOptions = [];
+        this.doNotEmitChangeEvent = true;
+        this.selectInitialSelectedOptions();
     }
@@ -174,6 +200,9 @@ constructInputBar() {
             : this.resolvedOptions;
-        return (core.h("pwc-choices-dropdown", { noOptionsString: this.noOptionsString, options: dropdownOptions }));
+        return (core.h("pwc-choices-dropdown", { noOptionsString: this.noOptionsString, options: dropdownOptions, searchBarPlaceholder: this.searchBarPlaceholder }));
     }
     render() {
-        return (core.h("div", { class: "container" }, this.constructInputBar(), this.dropdownIsOpen && this.constructDropdown()));
+        return [
+            this.constructInputBar(),
+            this.dropdownIsOpen && this.constructDropdown()
+        ];
     }
@@ -187,5 +216,5 @@ get root() { return core.getElement(this); }
     }; }
-    static get style() { return "* {\n  margin: 0;\n  padding: 0;\n  -webkit-transition: background-color ease 0.2s;\n  transition: background-color ease 0.2s;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n}\n\n.container {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: relative;\n  width: 100%;\n}\n\n.input-bar {\n  border: 1px solid black;\n  min-height: 44px;\n  padding: 5px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  border-radius: 5px;\n  overflow: hidden;\n  background-color: white;\n}\n\n.input-bar-main {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.input-bar-dropdown-icon {\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-line-pack: center;\n  align-content: center;\n  margin: 0 10px 0 10px;\n}\n\n.dropdown {\n  border: 1px solid black;\n  position: absolute;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  width: 100%;\n  border-radius: 5px;\n  background-color: white;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  overflow: hidden;\n  z-index: 1000000;\n}\n\n.search {\n  padding: 10px;\n  border: 0;\n  border-bottom: 1px solid black;\n}\n\n.dropdown > ul {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  max-height: 250px;\n  overflow-y: scroll;\n  overflow-x: hidden;\n}\n\n.dropdown > ul > li {\n  cursor: pointer;\n  padding: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n}\n\n.dropdown > ul > li:hover {\n  background-color: #eee;\n}\n\n.dropdown > ul > li + li {\n  border-top: 1px solid black;\n}\n\n.bubble {\n  border: 1px solid black;\n  border-radius: 5px;\n  padding: 5px 10px 5px 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  margin: 5px;\n  min-height: 22px;\n}\n\n.bubble-closeButton {\n  margin-left: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n#placeholderBubble {\n  color: grey;\n}\n\n#noOptionsListItem {\n  cursor: default;\n  color: grey;\n}\n\n.singleSelectInputBarItem {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  margin: 10px;\n}\n\n.singleSelectInputBarPlaceholder {\n  color: grey;\n}"; }
+    static get style() { return "pwc-choices {\n  display: block;\n  margin: 0;\n  padding: 0;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: relative;\n  width: 100%;\n}"; }
 };
 
 exports.pwc_choices = PwcChoices;

dist/cjs/pwc-dynamic-form-buttons.cjs.entry.js

@@ -5,6 +5,6 @@ 'use strict';
 
-const core = require('./core-2d6df7b9.js');
+const core = require('./core-5aa94191.js');
 require('./_commonjsHelpers-ab75601c.js');
 require('./linq-23ba6bed.js');
-const utils = require('./utils-c57928c4.js');
+const utils = require('./utils-2dd1023d.js');
 
@@ -25,5 +25,5 @@ const PwcDynamicFormButtons = class {
     render() {
-        return (core.h("div", null, this.resolvedItems
+        return this.resolvedItems
             ? this.resolvedItems.map(button => this.constructButton(button))
-            : ""));
+            : "";
     }
@@ -30,0 +30,0 @@ static get watchers() { return {

dist/cjs/pwc-dynamic-form-content.cjs.entry.js

@@ -5,6 +5,7 @@ 'use strict';
 
-const core = require('./core-2d6df7b9.js');
+const core = require('./core-5aa94191.js');
 require('./_commonjsHelpers-ab75601c.js');
 require('./linq-23ba6bed.js');
-const utils = require('./utils-c57928c4.js');
+const utils = require('./utils-2dd1023d.js');
+const lodash = require('./lodash-23b825de.js');
 
@@ -16,11 +17,66 @@ const PwcDynamicFormContent = class {
     }
-    onItemsChanged(items) {
+    itemsWatchHandler(items) {
         this.resolvedItems = utils.resolveJson(items);
     }
-    componentWillLoad() {
-        this.onItemsChanged(this.items);
+    changeEventHandler(event) {
+        const element = event.target;
+        this.fieldChanged.emit({
+            element,
+            newValue: element.value,
+            originalEvent: event
+        });
     }
-    handleFieldChange(eventPayload) {
-        this.fieldChanged.emit(eventPayload);
+    selectedOptionsChangedHandler(event) {
+        const element = event.target;
+        const value = event.detail;
+        this.fieldChanged.emit({
+            element,
+            newValue: value,
+            originalEvent: event
+        });
     }
+    colorPickedeventHandler(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        const element = event.target;
+        const value = event.detail;
+        this.fieldChanged.emit({
+            element,
+            newValue: value,
+            originalEvent: event
+        });
+    }
+    async getColorPickerRefs() {
+        return this.colorPickerRefs;
+    }
+    async getChoicesRefs() {
+        return this.choicesRefs;
+    }
+    async getNativeInputRefs() {
+        return this.nativeInputRefs;
+    }
+    handleColorPickerRef(elementConfig, ref) {
+        if (ref) {
+            this.colorPickerRefs = lodash._.unionBy(this.colorPickerRefs, [ref], i => i.getAttribute("name"));
+        }
+        else {
+            lodash._.remove(this.colorPickerRefs, i => i.getAttribute("name") === elementConfig.name);
+        }
+    }
+    handleChoicesRef(elementConfig, ref) {
+        if (ref) {
+            this.choicesRefs = lodash._.unionBy(this.choicesRefs, [ref], i => i.name);
+        }
+        else {
+            lodash._.remove(this.choicesRefs, i => i.name === elementConfig.name);
+        }
+    }
+    handleNativeInputRef(elementConfig, ref) {
+        if (ref) {
+            this.nativeInputRefs = lodash._.unionBy(this.nativeInputRefs, [ref], i => i.name);
+        }
+        else {
+            lodash._.remove(this.nativeInputRefs, i => i.name === elementConfig.name);
+        }
+    }
     constructField(field) {
@@ -33,3 +89,3 @@ let castedField;
                 castedField = field;
-                return (core.h("div", { class: "form-group" }, core.h("label", null, label, core.h("color-picker", Object.assign({}, castedField)))));
+                return (core.h("label", null, label, core.h("pwc-color-picker", Object.assign({}, castedField, { ref: this.handleColorPickerRef.bind(this, castedField) }))));
             // Special handle reason: using pwc-choices.
@@ -48,65 +104,31 @@ case "select-single":
                 castedField = field;
-                return (core.h("div", { class: "form-group" }, core.h("label", null, core.h("input", Object.assign({}, castedField)), label)));
+                return (core.h("label", null, core.h("input", Object.assign({}, castedField, { ref: this.handleNativeInputRef.bind(this, castedField) })), label));
             default:
                 castedField = field;
-                return (core.h("div", { class: "form-group" }, core.h("label", null, label, core.h("input", Object.assign({}, castedField)))));
+                return (core.h("label", null, label, core.h("input", Object.assign({}, castedField))));
         }
     }
     constructPwcChoices(label, castedField) {
-        return (core.h("div", { class: "form-group" }, core.h("label", null, label, core.h("pwc-choices", Object.assign({}, castedField)))));
+        return (core.h("label", null, label, core.h("pwc-choices", Object.assign({}, castedField, { ref: this.handleChoicesRef.bind(this, castedField) }))));
     }
-    init() {
-        const colorPickers = this.rootElement.querySelectorAll("color-picker");
-        colorPickers.forEach(cp => {
-            cp.addEventListener("colorPickedEvent", originalEvent => {
-                const fieldChangedEventPayload = {
-                    element: cp,
-                    newValue: cp.activeColor,
-                    originalEvent
-                };
-                this.handleFieldChange(fieldChangedEventPayload);
-            });
-        });
-        const pwcChoicesElements = this.rootElement.querySelectorAll("pwc-choices");
-        pwcChoicesElements.forEach(pce => {
-            pce.addEventListener("selectedOptionsChanged", (event) => {
-                const fieldChangedEventPayload = {
-                    element: pce,
-                    newValue: event.detail,
-                    originalEvent: event
-                };
-                this.handleFieldChange(fieldChangedEventPayload);
-            });
-        });
-        // vanilla html inputs
-        const vanillaInputs = utils.getVanillaHtmlInputs(this.rootElement, true);
-        vanillaInputs.forEach(vf => {
-            vf.addEventListener("change", e => {
-                const fieldChangedEventPayload = {
-                    element: vf,
-                    newValue: vf.value,
-                    originalEvent: e
-                };
-                this.handleFieldChange(fieldChangedEventPayload);
-            });
-        });
+    componentWillLoad() {
+        this.itemsWatchHandler(this.items);
     }
-    componentDidLoad() {
-        this.init();
-    }
-    componentDidUpdate() {
-        this.init();
-    }
     render() {
-        return (core.h("div", null, this.resolvedItems
-            ? this.resolvedItems.map(field => this.constructField(field))
-            : ""));
+        if (this.resolvedItems) {
+            // we are mutating the config, therefore we have to clone it to leave the user input intact.
+            const resolvedItemsClone = lodash._.cloneDeep(this.resolvedItems);
+            return resolvedItemsClone.map(field => this.constructField(field));
+        }
+        else {
+            return "";
+        }
     }
     get rootElement() { return core.getElement(this); }
     static get watchers() { return {
-        "items": ["onItemsChanged"]
+        "items": ["itemsWatchHandler"]
     }; }
-    static get style() { return ""; }
+    static get style() { return "label {\n  display: block;\n}"; }
 };
 
 exports.pwc_dynamic_form_content = PwcDynamicFormContent;

dist/cjs/pwc-dynamic-form.cjs.entry.js

@@ -5,6 +5,3 @@ 'use strict';
 
-const core = require('./core-2d6df7b9.js');
-require('./_commonjsHelpers-ab75601c.js');
-require('./linq-23ba6bed.js');
-const utils = require('./utils-c57928c4.js');
+const core = require('./core-5aa94191.js');
 
@@ -18,3 +15,3 @@ const PwcDynamicForm = class {
         const rootElement = this.rootElement;
-        this.getFieldValues("value").then(v => {
+        this.getFieldValues().then(v => {
             const formChangedEventPayload = {
@@ -32,3 +29,3 @@ type: "change",
         const rootElement = this.rootElement;
-        this.getFieldValues("value").then(v => {
+        this.getFieldValues().then(v => {
             const formChangedEventPayload = {
@@ -44,7 +41,5 @@ type: "reset",
     }
-    async getFieldValues(pwcChoicesRetreiveMode) {
-        const form = this.rootElement.querySelector("form");
+    async getFieldValues() {
         const resultObj = {};
-        // vanilla html inputs
-        const vanillaInputs = utils.getVanillaHtmlInputs(this.rootElement.querySelector("pwc-dynamic-form-content"), true);
+        const vanillaInputs = (await this.contentRef.getNativeInputRefs()) || [];
         vanillaInputs.forEach(vf => {
@@ -58,23 +53,11 @@ if (vf.type === "checkbox") {
         });
-        // pwc-choices
-        const pwcChoicesInputs = form.querySelectorAll("pwc-choices");
-        for (const key in pwcChoicesInputs) {
-            if (pwcChoicesInputs.hasOwnProperty(key)) {
-                const ci = pwcChoicesInputs[key];
-                const value = await ci.getSelectedOptions(pwcChoicesRetreiveMode);
-                resultObj[ci.name] = value;
-            }
-        }
-        // color-picker
-        const colorPickers = this.rootElement.querySelectorAll("color-picker");
-        for (const key in colorPickers) {
-            if (colorPickers.hasOwnProperty(key)) {
-                const cp = colorPickers[key];
-                const value = cp.activeColor;
-                const name = cp.getAttribute("name");
-                resultObj[name] = value;
-            }
-        }
+        const pwcChoicesInputs = (await this.contentRef.getChoicesRefs()) || [];
+        pwcChoicesInputs.forEach(async (elm) => (resultObj[elm.name] = await elm.getSelectedOptionsAsValues()));
+        const pwcColorPickers = (await this.contentRef.getColorPickerRefs()) || [];
+        pwcColorPickers.forEach(async (elm) => (resultObj[elm.getAttribute("name")] = elm.activeColor));
         return resultObj;
     }
+    componentDidRender() {
+        this.contentRef = this.rootElement.querySelector("pwc-dynamic-form-content");
+    }
     render() {
@@ -81,0 +64,0 @@ return (core.h("form", null, core.h("slot", null)));

dist/cjs/pwc-filter.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const core = require('./core-2d6df7b9.js');
+const core = require('./core-5aa94191.js');
 require('./_commonjsHelpers-ab75601c.js');
@@ -92,3 +92,3 @@ const linq = require('./linq-23ba6bed.js');
         let filteredData = this.resolvedData;
-        const formValues = (await dynamicForm.getFieldValues("value"));
+        const formValues = await dynamicForm.getFieldValues();
         for (const formElementName in formValues) {
@@ -136,3 +136,3 @@ if (formValues.hasOwnProperty(formElementName)) {
                 case "color":
-                    config = this.generateColorPickerConfig(item);
+                    config = this.generatePwcColorPickerConfig(item);
                     break;
@@ -156,3 +156,3 @@ default:
     }
-    generateColorPickerConfig(item) {
+    generatePwcColorPickerConfig(item) {
         const itemClone = Object.assign({}, item);
@@ -159,0 +159,0 @@ delete itemClone.dataField;

dist/cjs/pwc-multi-filter.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const core = require('./core-2d6df7b9.js');
+const core = require('./core-5aa94191.js');
 require('./_commonjsHelpers-ab75601c.js');
@@ -19,3 +19,3 @@ const lodash = require('./lodash-23b825de.js');
     async tabChangedEventHandler(e) {
-        this.setActiveState(e.detail.handle);
+        this.setActiveState(e.detail.title);
     }
@@ -81,3 +81,3 @@ async getActiveState() {
     constructFilterTab(filter) {
-        return (core.h("pwc-tabview-tab", { handle: filter.name }, core.h("pwc-filter", { data: filter.data, items: filter.items, ref: el => this.registerFilterRef(filter.name, el) })));
+        return (core.h("pwc-tabview-tab", { title: filter.name }, core.h("pwc-filter", { data: filter.data, items: filter.items, ref: el => this.registerFilterRef(filter.name, el) })));
     }
@@ -84,0 +84,0 @@ render() {

dist/cjs/pwc-multi-filter.cjs.js

 'use strict';
 
-const core = require('./core-2d6df7b9.js');
+const core = require('./core-5aa94191.js');
 
 core.patchBrowser().then(options => {
   core.globals();
-  return core.bootstrapLazy([["pwc-dynamic-form-buttons.cjs",[[0,"pwc-dynamic-form-buttons",{"items":[1]}]]],["pwc-tabview.cjs",[[4,"pwc-tabview",{"activeHandle":[32],"forceRenderSentinel":[32],"getActiveState":[64],"switchToTab":[64]},[[0,"tabModified","tabModifiedEventHandler"],[0,"handleClicked","handleClickedHandler"]]]]],["pwc-tabview-tab.cjs",[[4,"pwc-tabview-tab",{"handle":[513],"active":[4]}]]],["pwc-dynamic-form.cjs",[[4,"pwc-dynamic-form",{"getFieldValues":[64]},[[0,"fieldChanged","handleFieldChanged"],[0,"reset","handleFormReset"]]]]],["pwc-tabview-handle.cjs",[[0,"pwc-tabview-handle",{"handle":[1],"active":[516]},[[0,"click","clickEventHandler"]]]]],["pwc-choices.cjs",[[0,"pwc-choices",{"name":[1],"type":[1],"options":[1],"placeholder":[1],"dropdownIsOpen":[4,"dropdown-is-open"],"autoHidePlaceholder":[4,"auto-hide-placeholder"],"showCloseButtons":[4,"show-close-buttons"],"uniqueSelections":[4,"unique-selections"],"noOptionsString":[1,"no-options-string"],"distinctMode":[1,"distinct-mode"],"selectedOptions":[32],"getSelectedOptions":[64]},[[0,"optionDiscarded","optionDiscardedHandler"],[0,"inputBarClicked","inputBarClickedHandler"],[0,"dropdownOptionClicked","dropdownOptionClickedHandler"],[8,"click","windowClickHandler"],[0,"click","selfClickHandler"]]]]],["color-picker.cjs",[[0,"color-picker",{"colors":[8],"inputValue":[1,"input-value"],"activeColor":[1537,"active-color"],"selectedOne":[32],"hovered":[32]}]]],["pwc-choices-input-bar.cjs",[[0,"pwc-choices-input-bar",{"type":[1],"options":[16],"showCloseButtons":[4,"show-close-buttons"],"placeholder":[1],"autoHidePlaceholder":[4,"auto-hide-placeholder"]},[[0,"closeClicked","optionBubbleCloseClickedHandler"]]]]],["pwc-choices-dropdown.cjs",[[0,"pwc-choices-dropdown",{"options":[16],"noOptionsString":[1,"no-options-string"],"filteredOptions":[32]}]]],["pwc-choices-option-bubble.cjs",[[0,"pwc-choices-option-bubble",{"showCloseButton":[4,"show-close-button"],"option":[16],"indexInSelectedList":[2,"index-in-selected-list"]}]]],["pwc-dynamic-form-content.cjs",[[0,"pwc-dynamic-form-content",{"items":[1]}]]],["pwc-filter.cjs",[[0,"pwc-filter",{"data":[1],"items":[1],"resolvedData":[32],"resolvedItems":[32],"filter":[64]},[[0,"formChanged","formChangedHandler"]]]]],["pwc-multi-filter.cjs",[[0,"pwc-multi-filter",{"filterConfigs":[32],"getActiveState":[64],"switchToFilter":[64],"addFilter":[64],"removeFilter":[64],"getFilter":[64],"subscribeToFilterChange":[64],"getFilterResult":[64]},[[0,"tabChanged","tabChangedEventHandler"]]]]]], options);
+  return core.bootstrapLazy([["pwc-dynamic-form-buttons.cjs",[[0,"pwc-dynamic-form-buttons",{"items":[1]}]]],["pwc-tabview.cjs",[[4,"pwc-tabview",{"activeTitle":[32],"forceRenderSentinel":[32],"getActiveState":[64],"switchToTab":[64]},[[0,"tabModified","tabModifiedEventHandler"],[0,"handleClicked","handleClickedHandler"]]]]],["pwc-tabview-tab.cjs",[[4,"pwc-tabview-tab",{"title":[513],"active":[516]}]]],["pwc-dynamic-form.cjs",[[4,"pwc-dynamic-form",{"getFieldValues":[64]},[[0,"fieldChanged","handleFieldChanged"],[0,"reset","handleFormReset"]]]]],["pwc-tabview-handle.cjs",[[0,"pwc-tabview-handle",{"title":[1],"active":[516]},[[0,"click","clickEventHandler"]]]]],["pwc-color-picker.cjs",[[0,"pwc-color-picker",{"colors":[8],"inputValue":[1,"input-value"],"activeColor":[1537,"active-color"],"selectedOne":[32],"hovered":[32]}]]],["pwc-choices-dropdown.cjs",[[0,"pwc-choices-dropdown",{"options":[16],"noOptionsString":[1,"no-options-string"],"searchBarPlaceholder":[1,"search-bar-placeholder"],"filteredOptions":[32]}]]],["pwc-choices-option-bubble.cjs",[[0,"pwc-choices-option-bubble",{"showCloseButton":[4,"show-close-button"],"option":[16],"indexInSelectedList":[2,"index-in-selected-list"]}]]],["pwc-choices-input-bar.cjs",[[0,"pwc-choices-input-bar",{"type":[1],"options":[16],"showCloseButtons":[4,"show-close-buttons"],"placeholder":[1],"autoHidePlaceholder":[4,"auto-hide-placeholder"]},[[0,"closeClicked","optionBubbleCloseClickedHandler"],[0,"click","onInputBarClick"]]]]],["pwc-choices.cjs",[[0,"pwc-choices",{"name":[1],"type":[1],"options":[1],"searchBarPlaceholder":[1,"search-bar-placeholder"],"placeholder":[1],"autoHidePlaceholder":[4,"auto-hide-placeholder"],"dropdownIsOpen":[1540,"dropdown-is-open"],"showCloseButtons":[4,"show-close-buttons"],"uniqueSelections":[4,"unique-selections"],"noOptionsString":[1,"no-options-string"],"distinctMode":[1,"distinct-mode"],"selectedOptions":[32],"getSelectedOptionsAsValues":[64],"getSelectedOptionsAsLabels":[64],"getSelectedOptionsAsObjects":[64]},[[0,"optionDiscarded","optionDiscardedHandler"],[0,"inputBarClicked","inputBarClickedHandler"],[0,"dropdownOptionClicked","dropdownOptionClickedHandler"],[8,"click","windowClickHandler"],[0,"click","selfClickHandler"]]]]],["pwc-dynamic-form-content.cjs",[[0,"pwc-dynamic-form-content",{"items":[1],"getColorPickerRefs":[64],"getChoicesRefs":[64],"getNativeInputRefs":[64]},[[0,"change","changeEventHandler"],[0,"selectedOptionsChanged","selectedOptionsChangedHandler"],[0,"colorPickedEvent","colorPickedeventHandler"]]]]],["pwc-filter.cjs",[[0,"pwc-filter",{"data":[1],"items":[1],"resolvedData":[32],"resolvedItems":[32],"filter":[64]},[[0,"formChanged","formChangedHandler"]]]]],["pwc-multi-filter.cjs",[[0,"pwc-multi-filter",{"filterConfigs":[32],"getActiveState":[64],"switchToFilter":[64],"addFilter":[64],"removeFilter":[64],"getFilter":[64],"subscribeToFilterChange":[64],"getFilterResult":[64]},[[0,"tabChanged","tabChangedEventHandler"]]]]]], options);
 });

dist/cjs/pwc-tabview-handle.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const core = require('./core-2d6df7b9.js');
+const core = require('./core-5aa94191.js');
 
@@ -22,8 +22,6 @@ const PwcTabviewHandle = class {
     clickEventHandler(event) {
-        event.preventDefault();
-        event.stopPropagation();
         this.handleClicked.emit({
             originalEvent: event,
-            handleRef: this.root,
-            handle: this.handle
+            handle: this.root,
+            title: this.title
         });
@@ -35,3 +33,3 @@ }
     render() {
-        return this.handle;
+        return this.title;
     }
@@ -42,5 +40,5 @@ get root() { return core.getElement(this); }
     }; }
-    static get style() { return "pwc-tabview {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.pwc-tabview___handle-container {\n  display: -ms-flexbox;\n  display: flex;\n  padding-left: 1px;\n}\n\npwc-tabview-handle {\n  display: block;\n  margin-bottom: -1px;\n  margin-left: -1px;\n  border: 1px solid black;\n  padding: 10px;\n  z-index: 2;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  background-color: #ddd;\n}\n\n.pwc-tabview___active-handle {\n  border-bottom-style: none;\n  background-color: #fff;\n}\n\npwc-tabview-tab {\n  display: none;\n  border: 1px solid black;\n  padding: 10px;\n  z-index: 1;\n  background-color: white;\n}\n\n.pwc-tabview___active-tab {\n  display: block;\n}"; }
+    static get style() { return "pwc-tabview-handle {\n  display: block;\n  border: 1px solid black;\n  padding: 10px;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  background-color: #ddd;\n}\n\n.pwc-tabview___active-handle {\n  background-color: #fff;\n}"; }
 };
 
 exports.pwc_tabview_handle = PwcTabviewHandle;

dist/cjs/pwc-tabview-tab.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const core = require('./core-2d6df7b9.js');
+const core = require('./core-5aa94191.js');
 
@@ -13,3 +13,3 @@ const PwcTabviewTab = class {
     }
-    watchHandler() {
+    titleWatchHandler() {
         this.tabModified.emit();
@@ -33,8 +33,8 @@ }
     static get watchers() { return {
-        "handle": ["watchHandler"],
+        "title": ["titleWatchHandler"],
         "active": ["activeWatchHandler"]
     }; }
-    static get style() { return "pwc-tabview {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.pwc-tabview___handle-container {\n  display: -ms-flexbox;\n  display: flex;\n  padding-left: 1px;\n}\n\npwc-tabview-handle {\n  display: block;\n  margin-bottom: -1px;\n  margin-left: -1px;\n  border: 1px solid black;\n  padding: 10px;\n  z-index: 2;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  background-color: #ddd;\n}\n\n.pwc-tabview___active-handle {\n  border-bottom-style: none;\n  background-color: #fff;\n}\n\npwc-tabview-tab {\n  display: none;\n  border: 1px solid black;\n  padding: 10px;\n  z-index: 1;\n  background-color: white;\n}\n\n.pwc-tabview___active-tab {\n  display: block;\n}"; }
+    static get style() { return "pwc-tabview-tab {\n  display: none;\n  border: 1px solid black;\n  padding: 10px;\n  background-color: white;\n}\n\n.pwc-tabview___active-tab {\n  display: block;\n}"; }
 };
 
 exports.pwc_tabview_tab = PwcTabviewTab;

dist/cjs/pwc-tabview.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const core = require('./core-2d6df7b9.js');
+const core = require('./core-5aa94191.js');
 
@@ -11,40 +11,40 @@ const PwcTabview = class {
         core.registerInstance(this, hostRef);
-        this.handles = [];
-        this.tabRefs = {};
-        this.handleRefs = {};
+        this.titles = [];
+        this.tabs = {};
+        this.handles = {};
         this.tabChanged = core.createEvent(this, "tabChanged", 7);
     }
-    activeHandleWatchHandler(newValue) {
-        this.activeTabRef = this.tabRefs[newValue];
-        this.activeHandleRef = this.handleRefs[newValue];
+    activeTitleWatchHandler(newValue) {
+        this.activeTab = this.tabs[newValue];
+        this.activeHandle = this.handles[newValue];
     }
-    tabModifiedEventHandler(event) {
-        event.stopPropagation();
-        event.preventDefault();
+    tabModifiedEventHandler() {
         this.forceRender();
     }
     handleClickedHandler(event) {
-        event.stopPropagation();
-        event.preventDefault();
-        const handle = event.detail.handle;
-        this.switchToTab(handle);
+        const title = event.detail.title;
+        this.switchToTab(title);
     }
+    /**
+     * Returns the currently active tab, handle, and title.
+     */
     async getActiveState() {
         return {
-            handle: this.activeHandle,
-            tabRef: this.activeTabRef,
-            handleRef: this.activeHandleRef
+            title: this.activeTitle,
+            tab: this.activeTab,
+            handle: this.activeHandle
         };
     }
-    async switchToTab(handle) {
-        this.activeHandle = handle;
+    /**
+     * Switches to a tab.
+     * @param title Title of the target tab.
+     */
+    async switchToTab(title) {
+        this.activeTitle = title;
         this.tabChanged.emit({
-            handle,
-            tabRef: this.activeTabRef,
-            handleRef: this.activeHandleRef
+            title,
+            tab: this.activeTab,
+            handle: this.activeHandle
         });
     }
-    onChildrenChange() {
-        this.forceRender();
-    }
     forceRender() {
@@ -54,3 +54,3 @@ this.forceRenderSentinel = (this.forceRenderSentinel + 1) % 100;
     componentDidLoad() {
-        const observer = new MutationObserver(() => this.onChildrenChange());
+        const observer = new MutationObserver(() => this.forceRender());
         const options = {
@@ -60,3 +60,3 @@ childList: true
         observer.observe(this.root, options);
-        const firstHandle = this.handles[0];
+        const firstHandle = this.titles[0];
         this.switchToTab(firstHandle);
@@ -66,12 +66,12 @@ }
         const tabs = Array.from(document.querySelectorAll("pwc-tabview-tab"));
-        this.handles = tabs.map(t => t.handle);
-        if (tabs.length > 0 && this.activeTabRef) {
+        this.titles = tabs.map(t => t.title);
+        if (tabs.length > 0 && this.activeTab) {
             tabs.forEach(t => (t.active = false));
-            this.activeTabRef.active = true;
+            this.activeTab.active = true;
         }
         return [
-            core.h("div", { class: "pwc-tabview___handle-container" }, tabs.map(tabRef => {
-                const handle = tabRef.handle;
-                this.tabRefs[handle] = tabRef;
-                return (core.h("pwc-tabview-handle", { handle: handle, active: this.activeTabRef === tabRef, ref: elem => (this.handleRefs[tabRef.handle] = elem) }));
+            core.h("div", { class: "pwc-tabview___handle-container" }, tabs.map(tab => {
+                const title = tab.title;
+                this.tabs[title] = tab;
+                return (core.h("pwc-tabview-handle", { title: title, active: this.activeTab === tab, ref: elem => (this.handles[tab.title] = elem) }));
             })),
@@ -83,7 +83,7 @@ core.h("slot", null)
     static get watchers() { return {
-        "activeHandle": ["activeHandleWatchHandler"]
+        "activeTitle": ["activeTitleWatchHandler"]
     }; }
-    static get style() { return "pwc-tabview {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.pwc-tabview___handle-container {\n  display: -ms-flexbox;\n  display: flex;\n  padding-left: 1px;\n}\n\npwc-tabview-handle {\n  display: block;\n  margin-bottom: -1px;\n  margin-left: -1px;\n  border: 1px solid black;\n  padding: 10px;\n  z-index: 2;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  background-color: #ddd;\n}\n\n.pwc-tabview___active-handle {\n  border-bottom-style: none;\n  background-color: #fff;\n}\n\npwc-tabview-tab {\n  display: none;\n  border: 1px solid black;\n  padding: 10px;\n  z-index: 1;\n  background-color: white;\n}\n\n.pwc-tabview___active-tab {\n  display: block;\n}"; }
+    static get style() { return "pwc-tabview {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.pwc-tabview___handle-container {\n  display: -ms-flexbox;\n  display: flex;\n}"; }
 };
 
 exports.pwc_tabview = PwcTabview;

dist/collection/collection-manifest.json

 {
   "entries": [
-    "components\\pwc-multi-filter\\pwc-multi-filter.js"
+    "components/pwc-multi-filter/pwc-multi-filter.js"
   ],
@@ -23,3 +23,3 @@ "compiler": {
       "tags": [
-        "color-picker"
+        "pwc-color-picker"
       ]
@@ -26,0 +26,0 @@ },

dist/collection/components/pwc-multi-filter/pwc-multi-filter.js

@@ -10,3 +10,3 @@ import { h } from "@stencil/core";
     async tabChangedEventHandler(e) {
-        this.setActiveState(e.detail.handle);
+        this.setActiveState(e.detail.title);
     }
@@ -72,3 +72,3 @@ async getActiveState() {
     constructFilterTab(filter) {
-        return (h("pwc-tabview-tab", { handle: filter.name },
+        return (h("pwc-tabview-tab", { title: filter.name },
             h("pwc-filter", { data: filter.data, items: filter.items, ref: el => this.registerFilterRef(filter.name, el) })));
@@ -75,0 +75,0 @@ }

dist/esm-es5/css-shim-6aaf713d-9b13816a.js

@@ -0,0 +0,0 @@ /*

dist/esm-es5/dom-76cc7c7d-0a082895.js

@@ -0,0 +0,0 @@ (function () {

dist/esm-es5/pwc-dynamic-form-buttons.entry.js

@@ -1,3 +0,3 @@
-import { r as registerInstance, h } from './core-14687cd2.js';
-import { r as resolveJson } from './utils-29c62cc1.js';
+import { r as registerInstance, h } from './core-69359913.js';
+import { r as resolveJson } from './utils-fa1b1bdd.js';
 var PwcDynamicFormButtons = /** @class */ (function () {
@@ -18,5 +18,5 @@ function PwcDynamicFormButtons(hostRef) {
         var _this = this;
-        return (h("div", null, this.resolvedItems
+        return this.resolvedItems
             ? this.resolvedItems.map(function (button) { return _this.constructButton(button); })
-            : ""));
+            : "";
     };
@@ -23,0 +23,0 @@ Object.defineProperty(PwcDynamicFormButtons, "watchers", {

dist/esm/pwc-choices-dropdown.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, d as getElement } from './core-bdea271a.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './core-46079b98.js';
 import { c as createCommonjsModule } from './_commonjsHelpers-4ab098b6.js';
@@ -156,3 +156,3 @@
     optionsWatchHandler(newValue) {
-        this.filteredOptions = this.doFilter(this.getWholeSearchInput(), newValue);
+        this.filteredOptions = this.doFilter(this.searchRef.value, newValue);
     }
@@ -162,5 +162,2 @@ componentWillLoad() {
     }
-    constructDropdown() {
-        return (h("div", { class: "dropdown" }, h("input", { type: "text", class: "search", placeholder: "Search by typing...", onInput: e => this.onSearchInput(e) }), h("ul", null, this.filteredOptions && this.filteredOptions.length === 0 ? (h("li", { id: "noOptionsListItem" }, " ", this.noOptionsString)) : (this.filteredOptions.map(option => this.constructDropdownOption(option))))));
-    }
     doFilter(phrase, rawOptions) {
@@ -176,17 +173,7 @@ if (phrase.length === 0) {
     }
-    onSearchInput(e) {
-        e.stopPropagation();
-        this.filteredOptions = this.doFilter(this.getWholeSearchInput(), this.options);
+    onSearchInput() {
+        this.filteredOptions = this.doFilter(this.searchRef.value, this.options);
     }
-    getWholeSearchInput() {
-        const searchBar = this.root.querySelector(".search");
-        return searchBar.value;
-    }
-    constructDropdownOption(option) {
-        return (h("li", { onClick: e => this.onDropdownOptionClick(option, e) }, h("span", { innerHTML: option.string })));
-    }
     onDropdownOptionClick(optionFilterResult, clickEvent) {
         const originalOption = optionFilterResult.original;
-        clickEvent.preventDefault();
-        clickEvent.stopPropagation();
         this.dropdownOptionClicked.emit({
@@ -204,7 +191,7 @@ originalEvent: clickEvent,
     convertOptionsToFilterResultsAsIs(rawOptions) {
-        return rawOptions.map(o => {
+        return rawOptions.map((o, i) => {
             return {
                 string: o.label,
                 score: 0,
-                index: 0,
+                index: i,
                 original: o
@@ -214,4 +201,11 @@ };
     }
+    constructDropdownOption(option) {
+        return (h("li", { onClick: this.onDropdownOptionClick.bind(this, option) }, h("span", { innerHTML: option.string })));
+    }
     render() {
-        return this.constructDropdown();
+        return [
+            h("input", { type: "text", class: "pwc-choices___search", placeholder: this.searchBarPlaceholder || "Search by typing...", ref: elm => (this.searchRef = elm), onInput: this.onSearchInput.bind(this) }),
+            h("ul", null, this.filteredOptions &&
+                (this.filteredOptions.length === 0 ? (h("li", { id: "pwc-choices___no-options-list-item" }, " ", this.noOptionsString)) : (this.filteredOptions.map(option => this.constructDropdownOption(option)))))
+        ];
     }
@@ -222,5 +216,5 @@ get root() { return getElement(this); }
     }; }
-    static get style() { return "* {\n  margin: 0;\n  padding: 0;\n  -webkit-transition: background-color ease 0.2s;\n  transition: background-color ease 0.2s;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n}\n\n.container {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: relative;\n  width: 100%;\n}\n\n.input-bar {\n  border: 1px solid black;\n  min-height: 44px;\n  padding: 5px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  border-radius: 5px;\n  overflow: hidden;\n  background-color: white;\n}\n\n.input-bar-main {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.input-bar-dropdown-icon {\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-line-pack: center;\n  align-content: center;\n  margin: 0 10px 0 10px;\n}\n\n.dropdown {\n  border: 1px solid black;\n  position: absolute;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  width: 100%;\n  border-radius: 5px;\n  background-color: white;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  overflow: hidden;\n  z-index: 1000000;\n}\n\n.search {\n  padding: 10px;\n  border: 0;\n  border-bottom: 1px solid black;\n}\n\n.dropdown > ul {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  max-height: 250px;\n  overflow-y: scroll;\n  overflow-x: hidden;\n}\n\n.dropdown > ul > li {\n  cursor: pointer;\n  padding: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n}\n\n.dropdown > ul > li:hover {\n  background-color: #eee;\n}\n\n.dropdown > ul > li + li {\n  border-top: 1px solid black;\n}\n\n.bubble {\n  border: 1px solid black;\n  border-radius: 5px;\n  padding: 5px 10px 5px 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  margin: 5px;\n  min-height: 22px;\n}\n\n.bubble-closeButton {\n  margin-left: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n#placeholderBubble {\n  color: grey;\n}\n\n#noOptionsListItem {\n  cursor: default;\n  color: grey;\n}\n\n.singleSelectInputBarItem {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  margin: 10px;\n}\n\n.singleSelectInputBarPlaceholder {\n  color: grey;\n}"; }
+    static get style() { return "pwc-choices-dropdown {\n  margin: 0;\n  padding: 0;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n  border: 1px solid black;\n  position: absolute;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  width: 100%;\n  border-radius: 5px;\n  background-color: white;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  overflow: hidden;\n  z-index: 1000000;\n}\n\n.pwc-choices___search {\n  font-size: medium;\n  padding: 10px;\n  border: 0;\n  border-bottom: 1px solid black;\n}\n\npwc-choices-dropdown > ul {\n  padding: 0;\n  margin: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  max-height: 250px;\n  overflow-y: scroll;\n  overflow-x: hidden;\n}\n\npwc-choices-dropdown > ul > li {\n  -webkit-transition: background-color ease 0.2s;\n  transition: background-color ease 0.2s;\n  margin: 0;\n  cursor: pointer;\n  padding: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n}\n\npwc-choices-dropdown > ul > li:hover {\n  background-color: #eee;\n}\n\npwc-choices-dropdown > ul > li + li {\n  border-top: 1px solid black;\n}\n\n#pwc-choices___no-options-list-item {\n  cursor: default;\n  color: grey;\n}"; }
 };
 
 export { PwcChoicesDropdown as pwc_choices_dropdown };

dist/esm/pwc-choices-input-bar.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h } from './core-bdea271a.js';
+import { r as registerInstance, c as createEvent, h } from './core-46079b98.js';
 
@@ -17,20 +17,7 @@ const PwcChoicesInputBar = class {
     }
-    constructInputBar() {
-        let inputBarMainRender;
-        switch (this.type) {
-            case "single":
-                inputBarMainRender =
-                    this.options && this.options.length > 0 ? (h("div", { class: "singleSelectInputBarItem" }, this.options[0].label)) : (h("div", { class: "singleSelectInputBarItem singleSelectInputBarPlaceholder" }, this.placeholder));
-                break;
-            case "multi":
-                inputBarMainRender = [
-                    this.constructSelectedOptions(),
-                    this.constructPlaceholder()
-                ];
-                break;
-        }
-        return (h("div", { class: "input-bar", onClick: e => this.onInputBarClick(e) }, h("div", { class: "input-bar-main" }, inputBarMainRender), h("div", { class: "input-bar-dropdown-icon" }, h("svg", { width: "28", height: "28", viewBox: "0 0 18 18" }, h("path", { d: "M5 8l4 4 4-4z" })))));
+    onInputBarClick(e) {
+        this.inputBarClicked.emit({ originalEvent: e });
     }
     constructSelectedOptions() {
-        return this.options.map((selectedOption, index) => (h("pwc-choices-option-bubble", { option: selectedOption, showCloseButton: this.showCloseButtons, indexInSelectedList: index })));
+        return this.options.map((option, index) => (h("pwc-choices-option-bubble", { option: option, showCloseButton: this.showCloseButtons, indexInSelectedList: index })));
     }
@@ -40,15 +27,21 @@ constructPlaceholder() {
         const shouldDisplay = this.placeholder && !(this.autoHidePlaceholder && selectedItemCount > 0);
-        return (shouldDisplay && (h("pwc-choices-option-bubble", { id: "placeholderBubble", option: { value: "placeholder", label: this.placeholder }, showCloseButton: false, indexInSelectedList: -1 })));
+        return (shouldDisplay && (h("pwc-choices-option-bubble", { id: "pwc-choices___placeholder-bubble", option: { value: "placeholder", label: this.placeholder }, showCloseButton: false, indexInSelectedList: -1 })));
     }
-    onInputBarClick(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.inputBarClicked.emit({ originalEvent: e });
+    constructMainRender() {
+        switch (this.type) {
+            case "single":
+                return this.options && this.options.length > 0 ? (h("div", { class: "pwc-choices___single-select-input-bar-item" }, this.options[0].label)) : (h("div", { class: "pwc-choices___single-select-input-bar-item pwc-choices___single-select-input-bar-placeholder" }, this.placeholder));
+            case "multi":
+                return [this.constructSelectedOptions(), this.constructPlaceholder()];
+        }
     }
     render() {
-        return this.constructInputBar();
+        return [
+            h("div", { class: "pwc-choices___input-bar-main" }, this.constructMainRender()),
+            h("div", { class: "pwc-choices___input-bar-dropdown-icon" }, h("svg", { width: "28", height: "28", viewBox: "0 0 18 18" }, h("path", { d: "M5 8l4 4 4-4z" })))
+        ];
     }
-    static get style() { return "* {\n  margin: 0;\n  padding: 0;\n  -webkit-transition: background-color ease 0.2s;\n  transition: background-color ease 0.2s;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n}\n\n.container {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: relative;\n  width: 100%;\n}\n\n.input-bar {\n  border: 1px solid black;\n  min-height: 44px;\n  padding: 5px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  border-radius: 5px;\n  overflow: hidden;\n  background-color: white;\n}\n\n.input-bar-main {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.input-bar-dropdown-icon {\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-line-pack: center;\n  align-content: center;\n  margin: 0 10px 0 10px;\n}\n\n.dropdown {\n  border: 1px solid black;\n  position: absolute;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  width: 100%;\n  border-radius: 5px;\n  background-color: white;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  overflow: hidden;\n  z-index: 1000000;\n}\n\n.search {\n  padding: 10px;\n  border: 0;\n  border-bottom: 1px solid black;\n}\n\n.dropdown > ul {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  max-height: 250px;\n  overflow-y: scroll;\n  overflow-x: hidden;\n}\n\n.dropdown > ul > li {\n  cursor: pointer;\n  padding: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n}\n\n.dropdown > ul > li:hover {\n  background-color: #eee;\n}\n\n.dropdown > ul > li + li {\n  border-top: 1px solid black;\n}\n\n.bubble {\n  border: 1px solid black;\n  border-radius: 5px;\n  padding: 5px 10px 5px 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  margin: 5px;\n  min-height: 22px;\n}\n\n.bubble-closeButton {\n  margin-left: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n#placeholderBubble {\n  color: grey;\n}\n\n#noOptionsListItem {\n  cursor: default;\n  color: grey;\n}\n\n.singleSelectInputBarItem {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  margin: 10px;\n}\n\n.singleSelectInputBarPlaceholder {\n  color: grey;\n}"; }
+    static get style() { return "pwc-choices-input-bar {\n  margin: 0;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n  border: 1px solid black;\n  min-height: 44px;\n  padding: 5px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  border-radius: 5px;\n  overflow: hidden;\n  background-color: white;\n}\n\n.pwc-choices___input-bar-main {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.pwc-choices___input-bar-dropdown-icon {\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-line-pack: center;\n  align-content: center;\n  margin: 0 10px 0 10px;\n}\n\n.pwc-choices___single-select-input-bar-item {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  margin: 10px;\n}\n\n.pwc-choices___single-select-input-bar-placeholder {\n  color: grey;\n}"; }
 };
 
 export { PwcChoicesInputBar as pwc_choices_input_bar };

dist/esm/pwc-choices-option-bubble.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, d as getElement } from './core-bdea271a.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './core-46079b98.js';
 
@@ -9,3 +9,3 @@ const PwcChoicesOptionBubble = class {
     onCloseClicked(event) {
-        event.preventDefault();
+        // stop propagation so the input bar doesn't pick it up as a click on itself and close the dropdown.
         event.stopPropagation();
@@ -20,8 +20,11 @@ this.closeClicked.emit({
     render() {
-        return (h("div", { class: "bubble" }, h("span", { class: "bubble-label" }, this.option.label), this.showCloseButton && (h("span", { class: "bubble-closeButton", onClick: e => this.onCloseClicked(e) }, h("svg", { width: "16", height: "16", viewBox: "0 0 18 18" }, h("path", { d: "M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z" }))))));
+        return [
+            h("span", { class: "pwc-choices___bubble-label" }, this.option.label),
+            this.showCloseButton && (h("span", { class: "pwc-choices___bubble-close-button", onClick: e => this.onCloseClicked(e) }, h("svg", { width: "16", height: "16", viewBox: "0 0 18 18" }, h("path", { d: "M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z" }))))
+        ];
     }
     get rootElement() { return getElement(this); }
-    static get style() { return "* {\n  margin: 0;\n  padding: 0;\n  -webkit-transition: background-color ease 0.2s;\n  transition: background-color ease 0.2s;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n}\n\n.container {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: relative;\n  width: 100%;\n}\n\n.input-bar {\n  border: 1px solid black;\n  min-height: 44px;\n  padding: 5px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  border-radius: 5px;\n  overflow: hidden;\n  background-color: white;\n}\n\n.input-bar-main {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.input-bar-dropdown-icon {\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-line-pack: center;\n  align-content: center;\n  margin: 0 10px 0 10px;\n}\n\n.dropdown {\n  border: 1px solid black;\n  position: absolute;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  width: 100%;\n  border-radius: 5px;\n  background-color: white;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  overflow: hidden;\n  z-index: 1000000;\n}\n\n.search {\n  padding: 10px;\n  border: 0;\n  border-bottom: 1px solid black;\n}\n\n.dropdown > ul {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  max-height: 250px;\n  overflow-y: scroll;\n  overflow-x: hidden;\n}\n\n.dropdown > ul > li {\n  cursor: pointer;\n  padding: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n}\n\n.dropdown > ul > li:hover {\n  background-color: #eee;\n}\n\n.dropdown > ul > li + li {\n  border-top: 1px solid black;\n}\n\n.bubble {\n  border: 1px solid black;\n  border-radius: 5px;\n  padding: 5px 10px 5px 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  margin: 5px;\n  min-height: 22px;\n}\n\n.bubble-closeButton {\n  margin-left: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n#placeholderBubble {\n  color: grey;\n}\n\n#noOptionsListItem {\n  cursor: default;\n  color: grey;\n}\n\n.singleSelectInputBarItem {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  margin: 10px;\n}\n\n.singleSelectInputBarPlaceholder {\n  color: grey;\n}"; }
+    static get style() { return "pwc-choices-option-bubble {\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n  border: 1px solid black;\n  border-radius: 5px;\n  padding: 5px 10px 5px 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  margin: 5px;\n  min-height: 22px;\n}\n\n.pwc-choices___bubble-close-button {\n  margin-left: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n#pwc-choices___placeholder-bubble {\n  color: grey;\n}"; }
 };
 
 export { PwcChoicesOptionBubble as pwc_choices_option_bubble };

dist/esm/pwc-choices.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, d as getElement } from './core-bdea271a.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './core-46079b98.js';
 import './_commonjsHelpers-4ab098b6.js';
@@ -51,9 +51,11 @@ import { _ } from './lodash-62c1633d.js';
 
-const AllRetreiveModeLiterals = ["option", "value", "label"];
-
 const PwcChoices = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * The selection behaviour.
+         * "multi" allows selection of multiple options.
+         * "single" allows selection of only a single option (just like the native HTML select element).
+         */
         this.type = "multi";
-        this.dropdownIsOpen = false;
         /**
@@ -64,2 +66,6 @@ * If true, the placeholder will be hidden if there are selected options.
         /**
+         * This determines wheter the dropdown is open or not.
+         */
+        this.dropdownIsOpen = false;
+        /**
          * If true, selected option bubbles will have close buttons.
@@ -78,4 +84,6 @@ */
          * This is the mode of filtering we use to make given option objects distinct.
+         * "none" disables the distinct filtering behaviour.
          */
         this.distinctMode = "none";
+        this.doNotEmitChangeEvent = false;
         this.selectedOptions = [];
@@ -98,17 +106,25 @@ this.selectedOptionsChanged = createEvent(this, "selectedOptionsChanged", 7);
     selectedOptionsWatchHandler(newValue) {
-        this.selectedOptionsChanged.emit(newValue);
-        this.selectedOptions = newValue;
-    }
-    async getSelectedOptions(mode = "option") {
-        switch (mode) {
-            case "option":
-                return this.selectedOptions;
-            case "value":
-                return this.selectedOptions.map(o => o.value);
-            case "label":
-                return this.selectedOptions.map(o => o.label);
-            default:
-                throwTypeLiteralNotSupported("mode", mode, AllRetreiveModeLiterals);
+        if (!this.doNotEmitChangeEvent) {
+            this.selectedOptionsChanged.emit(newValue);
         }
+        this.doNotEmitChangeEvent = false;
     }
+    /**
+     * Returns the values of currently selected options.
+     */
+    async getSelectedOptionsAsValues() {
+        return this.selectedOptions.map(o => o.value);
+    }
+    /**
+     * Returns the labels of currently selected options.
+     */
+    async getSelectedOptionsAsLabels() {
+        return this.selectedOptions.map(o => o.label);
+    }
+    /**
+     * Returns the selected options as objects (as passed in to this component).
+     */
+    async getSelectedOptionsAsObjects() {
+        return this.selectedOptions;
+    }
     optionDiscardedHandler(event) {
@@ -145,3 +161,12 @@ const payload = event.detail;
         this.distinctModeWatchHandler(this.distinctMode);
+        this.doNotEmitChangeEvent = true;
+        this.selectInitialSelectedOptions();
     }
+    selectInitialSelectedOptions() {
+        const initialSelections = _.filter(this.resolvedOptions, o => o.initialSelected && o.initialSelected === true);
+        if (this.type === "single" && initialSelections.length > 1) {
+            throw new Error("You have multiple initial selected options, but the type is `single`!");
+        }
+        this.selectedOptions = [...initialSelections];
+    }
     componentDidLoad() {
@@ -159,3 +184,4 @@ this.form = this.root.closest("form");
     handleFormReset() {
-        this.selectedOptions = [];
+        this.doNotEmitChangeEvent = true;
+        this.selectInitialSelectedOptions();
     }
@@ -169,6 +195,9 @@ constructInputBar() {
             : this.resolvedOptions;
-        return (h("pwc-choices-dropdown", { noOptionsString: this.noOptionsString, options: dropdownOptions }));
+        return (h("pwc-choices-dropdown", { noOptionsString: this.noOptionsString, options: dropdownOptions, searchBarPlaceholder: this.searchBarPlaceholder }));
     }
     render() {
-        return (h("div", { class: "container" }, this.constructInputBar(), this.dropdownIsOpen && this.constructDropdown()));
+        return [
+            this.constructInputBar(),
+            this.dropdownIsOpen && this.constructDropdown()
+        ];
     }
@@ -182,5 +211,5 @@ get root() { return getElement(this); }
     }; }
-    static get style() { return "* {\n  margin: 0;\n  padding: 0;\n  -webkit-transition: background-color ease 0.2s;\n  transition: background-color ease 0.2s;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n}\n\n.container {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: relative;\n  width: 100%;\n}\n\n.input-bar {\n  border: 1px solid black;\n  min-height: 44px;\n  padding: 5px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  border-radius: 5px;\n  overflow: hidden;\n  background-color: white;\n}\n\n.input-bar-main {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.input-bar-dropdown-icon {\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-line-pack: center;\n  align-content: center;\n  margin: 0 10px 0 10px;\n}\n\n.dropdown {\n  border: 1px solid black;\n  position: absolute;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  width: 100%;\n  border-radius: 5px;\n  background-color: white;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  overflow: hidden;\n  z-index: 1000000;\n}\n\n.search {\n  padding: 10px;\n  border: 0;\n  border-bottom: 1px solid black;\n}\n\n.dropdown > ul {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  max-height: 250px;\n  overflow-y: scroll;\n  overflow-x: hidden;\n}\n\n.dropdown > ul > li {\n  cursor: pointer;\n  padding: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n}\n\n.dropdown > ul > li:hover {\n  background-color: #eee;\n}\n\n.dropdown > ul > li + li {\n  border-top: 1px solid black;\n}\n\n.bubble {\n  border: 1px solid black;\n  border-radius: 5px;\n  padding: 5px 10px 5px 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  margin: 5px;\n  min-height: 22px;\n}\n\n.bubble-closeButton {\n  margin-left: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n#placeholderBubble {\n  color: grey;\n}\n\n#noOptionsListItem {\n  cursor: default;\n  color: grey;\n}\n\n.singleSelectInputBarItem {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  margin: 10px;\n}\n\n.singleSelectInputBarPlaceholder {\n  color: grey;\n}"; }
+    static get style() { return "pwc-choices {\n  display: block;\n  margin: 0;\n  padding: 0;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: relative;\n  width: 100%;\n}"; }
 };
 
 export { PwcChoices as pwc_choices };

dist/esm/pwc-dynamic-form-buttons.entry.js

@@ -1,5 +0,5 @@
-import { r as registerInstance, h } from './core-bdea271a.js';
+import { r as registerInstance, h } from './core-46079b98.js';
 import './_commonjsHelpers-4ab098b6.js';
 import './linq-c2ddb1d7.js';
-import { r as resolveJson } from './utils-df9d21df.js';
+import { r as resolveJson } from './utils-8b45aa52.js';
 
@@ -20,5 +20,5 @@ const PwcDynamicFormButtons = class {
     render() {
-        return (h("div", null, this.resolvedItems
+        return this.resolvedItems
             ? this.resolvedItems.map(button => this.constructButton(button))
-            : ""));
+            : "";
     }
@@ -25,0 +25,0 @@ static get watchers() { return {

dist/esm/pwc-dynamic-form-content.entry.js

@@ -1,5 +0,6 @@
-import { r as registerInstance, c as createEvent, h, d as getElement } from './core-bdea271a.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './core-46079b98.js';
 import './_commonjsHelpers-4ab098b6.js';
 import './linq-c2ddb1d7.js';
-import { r as resolveJson, g as getVanillaHtmlInputs } from './utils-df9d21df.js';
+import { r as resolveJson } from './utils-8b45aa52.js';
+import { _ } from './lodash-62c1633d.js';
 
@@ -11,11 +12,66 @@ const PwcDynamicFormContent = class {
     }
-    onItemsChanged(items) {
+    itemsWatchHandler(items) {
         this.resolvedItems = resolveJson(items);
     }
-    componentWillLoad() {
-        this.onItemsChanged(this.items);
+    changeEventHandler(event) {
+        const element = event.target;
+        this.fieldChanged.emit({
+            element,
+            newValue: element.value,
+            originalEvent: event
+        });
     }
-    handleFieldChange(eventPayload) {
-        this.fieldChanged.emit(eventPayload);
+    selectedOptionsChangedHandler(event) {
+        const element = event.target;
+        const value = event.detail;
+        this.fieldChanged.emit({
+            element,
+            newValue: value,
+            originalEvent: event
+        });
     }
+    colorPickedeventHandler(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        const element = event.target;
+        const value = event.detail;
+        this.fieldChanged.emit({
+            element,
+            newValue: value,
+            originalEvent: event
+        });
+    }
+    async getColorPickerRefs() {
+        return this.colorPickerRefs;
+    }
+    async getChoicesRefs() {
+        return this.choicesRefs;
+    }
+    async getNativeInputRefs() {
+        return this.nativeInputRefs;
+    }
+    handleColorPickerRef(elementConfig, ref) {
+        if (ref) {
+            this.colorPickerRefs = _.unionBy(this.colorPickerRefs, [ref], i => i.getAttribute("name"));
+        }
+        else {
+            _.remove(this.colorPickerRefs, i => i.getAttribute("name") === elementConfig.name);
+        }
+    }
+    handleChoicesRef(elementConfig, ref) {
+        if (ref) {
+            this.choicesRefs = _.unionBy(this.choicesRefs, [ref], i => i.name);
+        }
+        else {
+            _.remove(this.choicesRefs, i => i.name === elementConfig.name);
+        }
+    }
+    handleNativeInputRef(elementConfig, ref) {
+        if (ref) {
+            this.nativeInputRefs = _.unionBy(this.nativeInputRefs, [ref], i => i.name);
+        }
+        else {
+            _.remove(this.nativeInputRefs, i => i.name === elementConfig.name);
+        }
+    }
     constructField(field) {
@@ -28,3 +84,3 @@ let castedField;
                 castedField = field;
-                return (h("div", { class: "form-group" }, h("label", null, label, h("color-picker", Object.assign({}, castedField)))));
+                return (h("label", null, label, h("pwc-color-picker", Object.assign({}, castedField, { ref: this.handleColorPickerRef.bind(this, castedField) }))));
             // Special handle reason: using pwc-choices.
@@ -43,65 +99,31 @@ case "select-single":
                 castedField = field;
-                return (h("div", { class: "form-group" }, h("label", null, h("input", Object.assign({}, castedField)), label)));
+                return (h("label", null, h("input", Object.assign({}, castedField, { ref: this.handleNativeInputRef.bind(this, castedField) })), label));
             default:
                 castedField = field;
-                return (h("div", { class: "form-group" }, h("label", null, label, h("input", Object.assign({}, castedField)))));
+                return (h("label", null, label, h("input", Object.assign({}, castedField))));
         }
     }
     constructPwcChoices(label, castedField) {
-        return (h("div", { class: "form-group" }, h("label", null, label, h("pwc-choices", Object.assign({}, castedField)))));
+        return (h("label", null, label, h("pwc-choices", Object.assign({}, castedField, { ref: this.handleChoicesRef.bind(this, castedField) }))));
     }
-    init() {
-        const colorPickers = this.rootElement.querySelectorAll("color-picker");
-        colorPickers.forEach(cp => {
-            cp.addEventListener("colorPickedEvent", originalEvent => {
-                const fieldChangedEventPayload = {
-                    element: cp,
-                    newValue: cp.activeColor,
-                    originalEvent
-                };
-                this.handleFieldChange(fieldChangedEventPayload);
-            });
-        });
-        const pwcChoicesElements = this.rootElement.querySelectorAll("pwc-choices");
-        pwcChoicesElements.forEach(pce => {
-            pce.addEventListener("selectedOptionsChanged", (event) => {
-                const fieldChangedEventPayload = {
-                    element: pce,
-                    newValue: event.detail,
-                    originalEvent: event
-                };
-                this.handleFieldChange(fieldChangedEventPayload);
-            });
-        });
-        // vanilla html inputs
-        const vanillaInputs = getVanillaHtmlInputs(this.rootElement, true);
-        vanillaInputs.forEach(vf => {
-            vf.addEventListener("change", e => {
-                const fieldChangedEventPayload = {
-                    element: vf,
-                    newValue: vf.value,
-                    originalEvent: e
-                };
-                this.handleFieldChange(fieldChangedEventPayload);
-            });
-        });
+    componentWillLoad() {
+        this.itemsWatchHandler(this.items);
     }
-    componentDidLoad() {
-        this.init();
-    }
-    componentDidUpdate() {
-        this.init();
-    }
     render() {
-        return (h("div", null, this.resolvedItems
-            ? this.resolvedItems.map(field => this.constructField(field))
-            : ""));
+        if (this.resolvedItems) {
+            // we are mutating the config, therefore we have to clone it to leave the user input intact.
+            const resolvedItemsClone = _.cloneDeep(this.resolvedItems);
+            return resolvedItemsClone.map(field => this.constructField(field));
+        }
+        else {
+            return "";
+        }
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {
-        "items": ["onItemsChanged"]
+        "items": ["itemsWatchHandler"]
     }; }
-    static get style() { return ""; }
+    static get style() { return "label {\n  display: block;\n}"; }
 };
 
 export { PwcDynamicFormContent as pwc_dynamic_form_content };

dist/esm/pwc-dynamic-form.entry.js

@@ -1,5 +0,2 @@
-import { r as registerInstance, c as createEvent, h, d as getElement } from './core-bdea271a.js';
-import './_commonjsHelpers-4ab098b6.js';
-import './linq-c2ddb1d7.js';
-import { g as getVanillaHtmlInputs } from './utils-df9d21df.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './core-46079b98.js';
 
@@ -13,3 +10,3 @@ const PwcDynamicForm = class {
         const rootElement = this.rootElement;
-        this.getFieldValues("value").then(v => {
+        this.getFieldValues().then(v => {
             const formChangedEventPayload = {
@@ -27,3 +24,3 @@ type: "change",
         const rootElement = this.rootElement;
-        this.getFieldValues("value").then(v => {
+        this.getFieldValues().then(v => {
             const formChangedEventPayload = {
@@ -39,7 +36,5 @@ type: "reset",
     }
-    async getFieldValues(pwcChoicesRetreiveMode) {
-        const form = this.rootElement.querySelector("form");
+    async getFieldValues() {
         const resultObj = {};
-        // vanilla html inputs
-        const vanillaInputs = getVanillaHtmlInputs(this.rootElement.querySelector("pwc-dynamic-form-content"), true);
+        const vanillaInputs = (await this.contentRef.getNativeInputRefs()) || [];
         vanillaInputs.forEach(vf => {
@@ -53,23 +48,11 @@ if (vf.type === "checkbox") {
         });
-        // pwc-choices
-        const pwcChoicesInputs = form.querySelectorAll("pwc-choices");
-        for (const key in pwcChoicesInputs) {
-            if (pwcChoicesInputs.hasOwnProperty(key)) {
-                const ci = pwcChoicesInputs[key];
-                const value = await ci.getSelectedOptions(pwcChoicesRetreiveMode);
-                resultObj[ci.name] = value;
-            }
-        }
-        // color-picker
-        const colorPickers = this.rootElement.querySelectorAll("color-picker");
-        for (const key in colorPickers) {
-            if (colorPickers.hasOwnProperty(key)) {
-                const cp = colorPickers[key];
-                const value = cp.activeColor;
-                const name = cp.getAttribute("name");
-                resultObj[name] = value;
-            }
-        }
+        const pwcChoicesInputs = (await this.contentRef.getChoicesRefs()) || [];
+        pwcChoicesInputs.forEach(async (elm) => (resultObj[elm.name] = await elm.getSelectedOptionsAsValues()));
+        const pwcColorPickers = (await this.contentRef.getColorPickerRefs()) || [];
+        pwcColorPickers.forEach(async (elm) => (resultObj[elm.getAttribute("name")] = elm.activeColor));
         return resultObj;
     }
+    componentDidRender() {
+        this.contentRef = this.rootElement.querySelector("pwc-dynamic-form-content");
+    }
     render() {
@@ -76,0 +59,0 @@ return (h("form", null, h("slot", null)));

dist/esm/pwc-filter.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, d as getElement } from './core-bdea271a.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './core-46079b98.js';
 import './_commonjsHelpers-4ab098b6.js';
@@ -87,3 +87,3 @@ import { E as Enumerable } from './linq-c2ddb1d7.js';
         let filteredData = this.resolvedData;
-        const formValues = (await dynamicForm.getFieldValues("value"));
+        const formValues = await dynamicForm.getFieldValues();
         for (const formElementName in formValues) {
@@ -131,3 +131,3 @@ if (formValues.hasOwnProperty(formElementName)) {
                 case "color":
-                    config = this.generateColorPickerConfig(item);
+                    config = this.generatePwcColorPickerConfig(item);
                     break;
@@ -151,3 +151,3 @@ default:
     }
-    generateColorPickerConfig(item) {
+    generatePwcColorPickerConfig(item) {
         const itemClone = Object.assign({}, item);
@@ -154,0 +154,0 @@ delete itemClone.dataField;

dist/esm/pwc-multi-filter.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, d as getElement } from './core-bdea271a.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './core-46079b98.js';
 import './_commonjsHelpers-4ab098b6.js';
@@ -14,3 +14,3 @@ import { _ } from './lodash-62c1633d.js';
     async tabChangedEventHandler(e) {
-        this.setActiveState(e.detail.handle);
+        this.setActiveState(e.detail.title);
     }
@@ -76,3 +76,3 @@ async getActiveState() {
     constructFilterTab(filter) {
-        return (h("pwc-tabview-tab", { handle: filter.name }, h("pwc-filter", { data: filter.data, items: filter.items, ref: el => this.registerFilterRef(filter.name, el) })));
+        return (h("pwc-tabview-tab", { title: filter.name }, h("pwc-filter", { data: filter.data, items: filter.items, ref: el => this.registerFilterRef(filter.name, el) })));
     }
@@ -79,0 +79,0 @@ render() {

dist/esm/pwc-tabview-handle.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, d as getElement } from './core-bdea271a.js';
+import { r as registerInstance, c as createEvent, d as getElement } from './core-46079b98.js';
 
@@ -17,8 +17,6 @@ const PwcTabviewHandle = class {
     clickEventHandler(event) {
-        event.preventDefault();
-        event.stopPropagation();
         this.handleClicked.emit({
             originalEvent: event,
-            handleRef: this.root,
-            handle: this.handle
+            handle: this.root,
+            title: this.title
         });
@@ -30,3 +28,3 @@ }
     render() {
-        return this.handle;
+        return this.title;
     }
@@ -37,5 +35,5 @@ get root() { return getElement(this); }
     }; }
-    static get style() { return "pwc-tabview {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.pwc-tabview___handle-container {\n  display: -ms-flexbox;\n  display: flex;\n  padding-left: 1px;\n}\n\npwc-tabview-handle {\n  display: block;\n  margin-bottom: -1px;\n  margin-left: -1px;\n  border: 1px solid black;\n  padding: 10px;\n  z-index: 2;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  background-color: #ddd;\n}\n\n.pwc-tabview___active-handle {\n  border-bottom-style: none;\n  background-color: #fff;\n}\n\npwc-tabview-tab {\n  display: none;\n  border: 1px solid black;\n  padding: 10px;\n  z-index: 1;\n  background-color: white;\n}\n\n.pwc-tabview___active-tab {\n  display: block;\n}"; }
+    static get style() { return "pwc-tabview-handle {\n  display: block;\n  border: 1px solid black;\n  padding: 10px;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  background-color: #ddd;\n}\n\n.pwc-tabview___active-handle {\n  background-color: #fff;\n}"; }
 };
 
 export { PwcTabviewHandle as pwc_tabview_handle };

dist/esm/pwc-tabview-tab.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, d as getElement } from './core-bdea271a.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './core-46079b98.js';
 
@@ -8,3 +8,3 @@ const PwcTabviewTab = class {
     }
-    watchHandler() {
+    titleWatchHandler() {
         this.tabModified.emit();
@@ -28,8 +28,8 @@ }
     static get watchers() { return {
-        "handle": ["watchHandler"],
+        "title": ["titleWatchHandler"],
         "active": ["activeWatchHandler"]
     }; }
-    static get style() { return "pwc-tabview {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.pwc-tabview___handle-container {\n  display: -ms-flexbox;\n  display: flex;\n  padding-left: 1px;\n}\n\npwc-tabview-handle {\n  display: block;\n  margin-bottom: -1px;\n  margin-left: -1px;\n  border: 1px solid black;\n  padding: 10px;\n  z-index: 2;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  background-color: #ddd;\n}\n\n.pwc-tabview___active-handle {\n  border-bottom-style: none;\n  background-color: #fff;\n}\n\npwc-tabview-tab {\n  display: none;\n  border: 1px solid black;\n  padding: 10px;\n  z-index: 1;\n  background-color: white;\n}\n\n.pwc-tabview___active-tab {\n  display: block;\n}"; }
+    static get style() { return "pwc-tabview-tab {\n  display: none;\n  border: 1px solid black;\n  padding: 10px;\n  background-color: white;\n}\n\n.pwc-tabview___active-tab {\n  display: block;\n}"; }
 };
 
 export { PwcTabviewTab as pwc_tabview_tab };

dist/esm/pwc-tabview.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, d as getElement } from './core-bdea271a.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './core-46079b98.js';
 
@@ -6,40 +6,40 @@ const PwcTabview = class {
         registerInstance(this, hostRef);
-        this.handles = [];
-        this.tabRefs = {};
-        this.handleRefs = {};
+        this.titles = [];
+        this.tabs = {};
+        this.handles = {};
         this.tabChanged = createEvent(this, "tabChanged", 7);
     }
-    activeHandleWatchHandler(newValue) {
-        this.activeTabRef = this.tabRefs[newValue];
-        this.activeHandleRef = this.handleRefs[newValue];
+    activeTitleWatchHandler(newValue) {
+        this.activeTab = this.tabs[newValue];
+        this.activeHandle = this.handles[newValue];
     }
-    tabModifiedEventHandler(event) {
-        event.stopPropagation();
-        event.preventDefault();
+    tabModifiedEventHandler() {
         this.forceRender();
     }
     handleClickedHandler(event) {
-        event.stopPropagation();
-        event.preventDefault();
-        const handle = event.detail.handle;
-        this.switchToTab(handle);
+        const title = event.detail.title;
+        this.switchToTab(title);
     }
+    /**
+     * Returns the currently active tab, handle, and title.
+     */
     async getActiveState() {
         return {
-            handle: this.activeHandle,
-            tabRef: this.activeTabRef,
-            handleRef: this.activeHandleRef
+            title: this.activeTitle,
+            tab: this.activeTab,
+            handle: this.activeHandle
         };
     }
-    async switchToTab(handle) {
-        this.activeHandle = handle;
+    /**
+     * Switches to a tab.
+     * @param title Title of the target tab.
+     */
+    async switchToTab(title) {
+        this.activeTitle = title;
         this.tabChanged.emit({
-            handle,
-            tabRef: this.activeTabRef,
-            handleRef: this.activeHandleRef
+            title,
+            tab: this.activeTab,
+            handle: this.activeHandle
         });
     }
-    onChildrenChange() {
-        this.forceRender();
-    }
     forceRender() {
@@ -49,3 +49,3 @@ this.forceRenderSentinel = (this.forceRenderSentinel + 1) % 100;
     componentDidLoad() {
-        const observer = new MutationObserver(() => this.onChildrenChange());
+        const observer = new MutationObserver(() => this.forceRender());
         const options = {
@@ -55,3 +55,3 @@ childList: true
         observer.observe(this.root, options);
-        const firstHandle = this.handles[0];
+        const firstHandle = this.titles[0];
         this.switchToTab(firstHandle);
@@ -61,12 +61,12 @@ }
         const tabs = Array.from(document.querySelectorAll("pwc-tabview-tab"));
-        this.handles = tabs.map(t => t.handle);
-        if (tabs.length > 0 && this.activeTabRef) {
+        this.titles = tabs.map(t => t.title);
+        if (tabs.length > 0 && this.activeTab) {
             tabs.forEach(t => (t.active = false));
-            this.activeTabRef.active = true;
+            this.activeTab.active = true;
         }
         return [
-            h("div", { class: "pwc-tabview___handle-container" }, tabs.map(tabRef => {
-                const handle = tabRef.handle;
-                this.tabRefs[handle] = tabRef;
-                return (h("pwc-tabview-handle", { handle: handle, active: this.activeTabRef === tabRef, ref: elem => (this.handleRefs[tabRef.handle] = elem) }));
+            h("div", { class: "pwc-tabview___handle-container" }, tabs.map(tab => {
+                const title = tab.title;
+                this.tabs[title] = tab;
+                return (h("pwc-tabview-handle", { title: title, active: this.activeTab === tab, ref: elem => (this.handles[tab.title] = elem) }));
             })),
@@ -78,7 +78,7 @@ h("slot", null)
     static get watchers() { return {
-        "activeHandle": ["activeHandleWatchHandler"]
+        "activeTitle": ["activeTitleWatchHandler"]
     }; }
-    static get style() { return "pwc-tabview {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.pwc-tabview___handle-container {\n  display: -ms-flexbox;\n  display: flex;\n  padding-left: 1px;\n}\n\npwc-tabview-handle {\n  display: block;\n  margin-bottom: -1px;\n  margin-left: -1px;\n  border: 1px solid black;\n  padding: 10px;\n  z-index: 2;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  background-color: #ddd;\n}\n\n.pwc-tabview___active-handle {\n  border-bottom-style: none;\n  background-color: #fff;\n}\n\npwc-tabview-tab {\n  display: none;\n  border: 1px solid black;\n  padding: 10px;\n  z-index: 1;\n  background-color: white;\n}\n\n.pwc-tabview___active-tab {\n  display: block;\n}"; }
+    static get style() { return "pwc-tabview {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.pwc-tabview___handle-container {\n  display: -ms-flexbox;\n  display: flex;\n}"; }
 };
 
 export { PwcTabview as pwc_tabview };

dist/pwc-multi-filter/pwc-choices-dropdown.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, d as getElement } from './core-77375621.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './core-512552ee.js';
 import { c as createCommonjsModule } from './_commonjsHelpers-4ab098b6.js';
@@ -156,3 +156,3 @@
     optionsWatchHandler(newValue) {
-        this.filteredOptions = this.doFilter(this.getWholeSearchInput(), newValue);
+        this.filteredOptions = this.doFilter(this.searchRef.value, newValue);
     }
@@ -162,5 +162,2 @@ componentWillLoad() {
     }
-    constructDropdown() {
-        return (h("div", { class: "dropdown" }, h("input", { type: "text", class: "search", placeholder: "Search by typing...", onInput: e => this.onSearchInput(e) }), h("ul", null, this.filteredOptions && this.filteredOptions.length === 0 ? (h("li", { id: "noOptionsListItem" }, " ", this.noOptionsString)) : (this.filteredOptions.map(option => this.constructDropdownOption(option))))));
-    }
     doFilter(phrase, rawOptions) {
@@ -176,17 +173,7 @@ if (phrase.length === 0) {
     }
-    onSearchInput(e) {
-        e.stopPropagation();
-        this.filteredOptions = this.doFilter(this.getWholeSearchInput(), this.options);
+    onSearchInput() {
+        this.filteredOptions = this.doFilter(this.searchRef.value, this.options);
     }
-    getWholeSearchInput() {
-        const searchBar = this.root.querySelector(".search");
-        return searchBar.value;
-    }
-    constructDropdownOption(option) {
-        return (h("li", { onClick: e => this.onDropdownOptionClick(option, e) }, h("span", { innerHTML: option.string })));
-    }
     onDropdownOptionClick(optionFilterResult, clickEvent) {
         const originalOption = optionFilterResult.original;
-        clickEvent.preventDefault();
-        clickEvent.stopPropagation();
         this.dropdownOptionClicked.emit({
@@ -204,7 +191,7 @@ originalEvent: clickEvent,
     convertOptionsToFilterResultsAsIs(rawOptions) {
-        return rawOptions.map(o => {
+        return rawOptions.map((o, i) => {
             return {
                 string: o.label,
                 score: 0,
-                index: 0,
+                index: i,
                 original: o
@@ -214,4 +201,11 @@ };
     }
+    constructDropdownOption(option) {
+        return (h("li", { onClick: this.onDropdownOptionClick.bind(this, option) }, h("span", { innerHTML: option.string })));
+    }
     render() {
-        return this.constructDropdown();
+        return [
+            h("input", { type: "text", class: "pwc-choices___search", placeholder: this.searchBarPlaceholder || "Search by typing...", ref: elm => (this.searchRef = elm), onInput: this.onSearchInput.bind(this) }),
+            h("ul", null, this.filteredOptions &&
+                (this.filteredOptions.length === 0 ? (h("li", { id: "pwc-choices___no-options-list-item" }, " ", this.noOptionsString)) : (this.filteredOptions.map(option => this.constructDropdownOption(option)))))
+        ];
     }
@@ -222,5 +216,5 @@ get root() { return getElement(this); }
     }; }
-    static get style() { return "* {\n  margin: 0;\n  padding: 0;\n  -webkit-transition: background-color ease 0.2s;\n  transition: background-color ease 0.2s;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n}\n\n.container {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: relative;\n  width: 100%;\n}\n\n.input-bar {\n  border: 1px solid black;\n  min-height: 44px;\n  padding: 5px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  border-radius: 5px;\n  overflow: hidden;\n  background-color: white;\n}\n\n.input-bar-main {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.input-bar-dropdown-icon {\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-line-pack: center;\n  align-content: center;\n  margin: 0 10px 0 10px;\n}\n\n.dropdown {\n  border: 1px solid black;\n  position: absolute;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  width: 100%;\n  border-radius: 5px;\n  background-color: white;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  overflow: hidden;\n  z-index: 1000000;\n}\n\n.search {\n  padding: 10px;\n  border: 0;\n  border-bottom: 1px solid black;\n}\n\n.dropdown > ul {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  max-height: 250px;\n  overflow-y: scroll;\n  overflow-x: hidden;\n}\n\n.dropdown > ul > li {\n  cursor: pointer;\n  padding: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n}\n\n.dropdown > ul > li:hover {\n  background-color: #eee;\n}\n\n.dropdown > ul > li + li {\n  border-top: 1px solid black;\n}\n\n.bubble {\n  border: 1px solid black;\n  border-radius: 5px;\n  padding: 5px 10px 5px 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  margin: 5px;\n  min-height: 22px;\n}\n\n.bubble-closeButton {\n  margin-left: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n#placeholderBubble {\n  color: grey;\n}\n\n#noOptionsListItem {\n  cursor: default;\n  color: grey;\n}\n\n.singleSelectInputBarItem {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  margin: 10px;\n}\n\n.singleSelectInputBarPlaceholder {\n  color: grey;\n}"; }
+    static get style() { return "pwc-choices-dropdown {\n  margin: 0;\n  padding: 0;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n  border: 1px solid black;\n  position: absolute;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  width: 100%;\n  border-radius: 5px;\n  background-color: white;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  overflow: hidden;\n  z-index: 1000000;\n}\n\n.pwc-choices___search {\n  font-size: medium;\n  padding: 10px;\n  border: 0;\n  border-bottom: 1px solid black;\n}\n\npwc-choices-dropdown > ul {\n  padding: 0;\n  margin: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  max-height: 250px;\n  overflow-y: scroll;\n  overflow-x: hidden;\n}\n\npwc-choices-dropdown > ul > li {\n  -webkit-transition: background-color ease 0.2s;\n  transition: background-color ease 0.2s;\n  margin: 0;\n  cursor: pointer;\n  padding: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n}\n\npwc-choices-dropdown > ul > li:hover {\n  background-color: #eee;\n}\n\npwc-choices-dropdown > ul > li + li {\n  border-top: 1px solid black;\n}\n\n#pwc-choices___no-options-list-item {\n  cursor: default;\n  color: grey;\n}"; }
 };
 
 export { PwcChoicesDropdown as pwc_choices_dropdown };

dist/pwc-multi-filter/pwc-choices-input-bar.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h } from './core-77375621.js';
+import { r as registerInstance, c as createEvent, h } from './core-512552ee.js';
 
@@ -17,20 +17,7 @@ const PwcChoicesInputBar = class {
     }
-    constructInputBar() {
-        let inputBarMainRender;
-        switch (this.type) {
-            case "single":
-                inputBarMainRender =
-                    this.options && this.options.length > 0 ? (h("div", { class: "singleSelectInputBarItem" }, this.options[0].label)) : (h("div", { class: "singleSelectInputBarItem singleSelectInputBarPlaceholder" }, this.placeholder));
-                break;
-            case "multi":
-                inputBarMainRender = [
-                    this.constructSelectedOptions(),
-                    this.constructPlaceholder()
-                ];
-                break;
-        }
-        return (h("div", { class: "input-bar", onClick: e => this.onInputBarClick(e) }, h("div", { class: "input-bar-main" }, inputBarMainRender), h("div", { class: "input-bar-dropdown-icon" }, h("svg", { width: "28", height: "28", viewBox: "0 0 18 18" }, h("path", { d: "M5 8l4 4 4-4z" })))));
+    onInputBarClick(e) {
+        this.inputBarClicked.emit({ originalEvent: e });
     }
     constructSelectedOptions() {
-        return this.options.map((selectedOption, index) => (h("pwc-choices-option-bubble", { option: selectedOption, showCloseButton: this.showCloseButtons, indexInSelectedList: index })));
+        return this.options.map((option, index) => (h("pwc-choices-option-bubble", { option: option, showCloseButton: this.showCloseButtons, indexInSelectedList: index })));
     }
@@ -40,15 +27,21 @@ constructPlaceholder() {
         const shouldDisplay = this.placeholder && !(this.autoHidePlaceholder && selectedItemCount > 0);
-        return (shouldDisplay && (h("pwc-choices-option-bubble", { id: "placeholderBubble", option: { value: "placeholder", label: this.placeholder }, showCloseButton: false, indexInSelectedList: -1 })));
+        return (shouldDisplay && (h("pwc-choices-option-bubble", { id: "pwc-choices___placeholder-bubble", option: { value: "placeholder", label: this.placeholder }, showCloseButton: false, indexInSelectedList: -1 })));
     }
-    onInputBarClick(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.inputBarClicked.emit({ originalEvent: e });
+    constructMainRender() {
+        switch (this.type) {
+            case "single":
+                return this.options && this.options.length > 0 ? (h("div", { class: "pwc-choices___single-select-input-bar-item" }, this.options[0].label)) : (h("div", { class: "pwc-choices___single-select-input-bar-item pwc-choices___single-select-input-bar-placeholder" }, this.placeholder));
+            case "multi":
+                return [this.constructSelectedOptions(), this.constructPlaceholder()];
+        }
     }
     render() {
-        return this.constructInputBar();
+        return [
+            h("div", { class: "pwc-choices___input-bar-main" }, this.constructMainRender()),
+            h("div", { class: "pwc-choices___input-bar-dropdown-icon" }, h("svg", { width: "28", height: "28", viewBox: "0 0 18 18" }, h("path", { d: "M5 8l4 4 4-4z" })))
+        ];
     }
-    static get style() { return "* {\n  margin: 0;\n  padding: 0;\n  -webkit-transition: background-color ease 0.2s;\n  transition: background-color ease 0.2s;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n}\n\n.container {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: relative;\n  width: 100%;\n}\n\n.input-bar {\n  border: 1px solid black;\n  min-height: 44px;\n  padding: 5px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  border-radius: 5px;\n  overflow: hidden;\n  background-color: white;\n}\n\n.input-bar-main {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.input-bar-dropdown-icon {\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-line-pack: center;\n  align-content: center;\n  margin: 0 10px 0 10px;\n}\n\n.dropdown {\n  border: 1px solid black;\n  position: absolute;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  width: 100%;\n  border-radius: 5px;\n  background-color: white;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  overflow: hidden;\n  z-index: 1000000;\n}\n\n.search {\n  padding: 10px;\n  border: 0;\n  border-bottom: 1px solid black;\n}\n\n.dropdown > ul {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  max-height: 250px;\n  overflow-y: scroll;\n  overflow-x: hidden;\n}\n\n.dropdown > ul > li {\n  cursor: pointer;\n  padding: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n}\n\n.dropdown > ul > li:hover {\n  background-color: #eee;\n}\n\n.dropdown > ul > li + li {\n  border-top: 1px solid black;\n}\n\n.bubble {\n  border: 1px solid black;\n  border-radius: 5px;\n  padding: 5px 10px 5px 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  margin: 5px;\n  min-height: 22px;\n}\n\n.bubble-closeButton {\n  margin-left: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n#placeholderBubble {\n  color: grey;\n}\n\n#noOptionsListItem {\n  cursor: default;\n  color: grey;\n}\n\n.singleSelectInputBarItem {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  margin: 10px;\n}\n\n.singleSelectInputBarPlaceholder {\n  color: grey;\n}"; }
+    static get style() { return "pwc-choices-input-bar {\n  margin: 0;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n  border: 1px solid black;\n  min-height: 44px;\n  padding: 5px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  border-radius: 5px;\n  overflow: hidden;\n  background-color: white;\n}\n\n.pwc-choices___input-bar-main {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.pwc-choices___input-bar-dropdown-icon {\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-line-pack: center;\n  align-content: center;\n  margin: 0 10px 0 10px;\n}\n\n.pwc-choices___single-select-input-bar-item {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  margin: 10px;\n}\n\n.pwc-choices___single-select-input-bar-placeholder {\n  color: grey;\n}"; }
 };
 
 export { PwcChoicesInputBar as pwc_choices_input_bar };

dist/pwc-multi-filter/pwc-choices-option-bubble.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, d as getElement } from './core-77375621.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './core-512552ee.js';
 
@@ -9,3 +9,3 @@ const PwcChoicesOptionBubble = class {
     onCloseClicked(event) {
-        event.preventDefault();
+        // stop propagation so the input bar doesn't pick it up as a click on itself and close the dropdown.
         event.stopPropagation();
@@ -20,8 +20,11 @@ this.closeClicked.emit({
     render() {
-        return (h("div", { class: "bubble" }, h("span", { class: "bubble-label" }, this.option.label), this.showCloseButton && (h("span", { class: "bubble-closeButton", onClick: e => this.onCloseClicked(e) }, h("svg", { width: "16", height: "16", viewBox: "0 0 18 18" }, h("path", { d: "M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z" }))))));
+        return [
+            h("span", { class: "pwc-choices___bubble-label" }, this.option.label),
+            this.showCloseButton && (h("span", { class: "pwc-choices___bubble-close-button", onClick: e => this.onCloseClicked(e) }, h("svg", { width: "16", height: "16", viewBox: "0 0 18 18" }, h("path", { d: "M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z" }))))
+        ];
     }
     get rootElement() { return getElement(this); }
-    static get style() { return "* {\n  margin: 0;\n  padding: 0;\n  -webkit-transition: background-color ease 0.2s;\n  transition: background-color ease 0.2s;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n}\n\n.container {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: relative;\n  width: 100%;\n}\n\n.input-bar {\n  border: 1px solid black;\n  min-height: 44px;\n  padding: 5px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  border-radius: 5px;\n  overflow: hidden;\n  background-color: white;\n}\n\n.input-bar-main {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.input-bar-dropdown-icon {\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-line-pack: center;\n  align-content: center;\n  margin: 0 10px 0 10px;\n}\n\n.dropdown {\n  border: 1px solid black;\n  position: absolute;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  width: 100%;\n  border-radius: 5px;\n  background-color: white;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  overflow: hidden;\n  z-index: 1000000;\n}\n\n.search {\n  padding: 10px;\n  border: 0;\n  border-bottom: 1px solid black;\n}\n\n.dropdown > ul {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  max-height: 250px;\n  overflow-y: scroll;\n  overflow-x: hidden;\n}\n\n.dropdown > ul > li {\n  cursor: pointer;\n  padding: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n}\n\n.dropdown > ul > li:hover {\n  background-color: #eee;\n}\n\n.dropdown > ul > li + li {\n  border-top: 1px solid black;\n}\n\n.bubble {\n  border: 1px solid black;\n  border-radius: 5px;\n  padding: 5px 10px 5px 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  margin: 5px;\n  min-height: 22px;\n}\n\n.bubble-closeButton {\n  margin-left: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n#placeholderBubble {\n  color: grey;\n}\n\n#noOptionsListItem {\n  cursor: default;\n  color: grey;\n}\n\n.singleSelectInputBarItem {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  margin: 10px;\n}\n\n.singleSelectInputBarPlaceholder {\n  color: grey;\n}"; }
+    static get style() { return "pwc-choices-option-bubble {\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n  border: 1px solid black;\n  border-radius: 5px;\n  padding: 5px 10px 5px 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  margin: 5px;\n  min-height: 22px;\n}\n\n.pwc-choices___bubble-close-button {\n  margin-left: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n#pwc-choices___placeholder-bubble {\n  color: grey;\n}"; }
 };
 
 export { PwcChoicesOptionBubble as pwc_choices_option_bubble };

dist/pwc-multi-filter/pwc-choices.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, d as getElement } from './core-77375621.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './core-512552ee.js';
 import './_commonjsHelpers-4ab098b6.js';
@@ -51,9 +51,11 @@ import { _ } from './lodash-62c1633d.js';
 
-const AllRetreiveModeLiterals = ["option", "value", "label"];
-
 const PwcChoices = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * The selection behaviour.
+         * "multi" allows selection of multiple options.
+         * "single" allows selection of only a single option (just like the native HTML select element).
+         */
         this.type = "multi";
-        this.dropdownIsOpen = false;
         /**
@@ -64,2 +66,6 @@ * If true, the placeholder will be hidden if there are selected options.
         /**
+         * This determines wheter the dropdown is open or not.
+         */
+        this.dropdownIsOpen = false;
+        /**
          * If true, selected option bubbles will have close buttons.
@@ -78,4 +84,6 @@ */
          * This is the mode of filtering we use to make given option objects distinct.
+         * "none" disables the distinct filtering behaviour.
          */
         this.distinctMode = "none";
+        this.doNotEmitChangeEvent = false;
         this.selectedOptions = [];
@@ -98,17 +106,25 @@ this.selectedOptionsChanged = createEvent(this, "selectedOptionsChanged", 7);
     selectedOptionsWatchHandler(newValue) {
-        this.selectedOptionsChanged.emit(newValue);
-        this.selectedOptions = newValue;
-    }
-    async getSelectedOptions(mode = "option") {
-        switch (mode) {
-            case "option":
-                return this.selectedOptions;
-            case "value":
-                return this.selectedOptions.map(o => o.value);
-            case "label":
-                return this.selectedOptions.map(o => o.label);
-            default:
-                throwTypeLiteralNotSupported("mode", mode, AllRetreiveModeLiterals);
+        if (!this.doNotEmitChangeEvent) {
+            this.selectedOptionsChanged.emit(newValue);
         }
+        this.doNotEmitChangeEvent = false;
     }
+    /**
+     * Returns the values of currently selected options.
+     */
+    async getSelectedOptionsAsValues() {
+        return this.selectedOptions.map(o => o.value);
+    }
+    /**
+     * Returns the labels of currently selected options.
+     */
+    async getSelectedOptionsAsLabels() {
+        return this.selectedOptions.map(o => o.label);
+    }
+    /**
+     * Returns the selected options as objects (as passed in to this component).
+     */
+    async getSelectedOptionsAsObjects() {
+        return this.selectedOptions;
+    }
     optionDiscardedHandler(event) {
@@ -145,3 +161,12 @@ const payload = event.detail;
         this.distinctModeWatchHandler(this.distinctMode);
+        this.doNotEmitChangeEvent = true;
+        this.selectInitialSelectedOptions();
     }
+    selectInitialSelectedOptions() {
+        const initialSelections = _.filter(this.resolvedOptions, o => o.initialSelected && o.initialSelected === true);
+        if (this.type === "single" && initialSelections.length > 1) {
+            throw new Error("You have multiple initial selected options, but the type is `single`!");
+        }
+        this.selectedOptions = [...initialSelections];
+    }
     componentDidLoad() {
@@ -159,3 +184,4 @@ this.form = this.root.closest("form");
     handleFormReset() {
-        this.selectedOptions = [];
+        this.doNotEmitChangeEvent = true;
+        this.selectInitialSelectedOptions();
     }
@@ -169,6 +195,9 @@ constructInputBar() {
             : this.resolvedOptions;
-        return (h("pwc-choices-dropdown", { noOptionsString: this.noOptionsString, options: dropdownOptions }));
+        return (h("pwc-choices-dropdown", { noOptionsString: this.noOptionsString, options: dropdownOptions, searchBarPlaceholder: this.searchBarPlaceholder }));
     }
     render() {
-        return (h("div", { class: "container" }, this.constructInputBar(), this.dropdownIsOpen && this.constructDropdown()));
+        return [
+            this.constructInputBar(),
+            this.dropdownIsOpen && this.constructDropdown()
+        ];
     }
@@ -182,5 +211,5 @@ get root() { return getElement(this); }
     }; }
-    static get style() { return "* {\n  margin: 0;\n  padding: 0;\n  -webkit-transition: background-color ease 0.2s;\n  transition: background-color ease 0.2s;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n}\n\n.container {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: relative;\n  width: 100%;\n}\n\n.input-bar {\n  border: 1px solid black;\n  min-height: 44px;\n  padding: 5px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  border-radius: 5px;\n  overflow: hidden;\n  background-color: white;\n}\n\n.input-bar-main {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.input-bar-dropdown-icon {\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-line-pack: center;\n  align-content: center;\n  margin: 0 10px 0 10px;\n}\n\n.dropdown {\n  border: 1px solid black;\n  position: absolute;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  width: 100%;\n  border-radius: 5px;\n  background-color: white;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  overflow: hidden;\n  z-index: 1000000;\n}\n\n.search {\n  padding: 10px;\n  border: 0;\n  border-bottom: 1px solid black;\n}\n\n.dropdown > ul {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  max-height: 250px;\n  overflow-y: scroll;\n  overflow-x: hidden;\n}\n\n.dropdown > ul > li {\n  cursor: pointer;\n  padding: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n}\n\n.dropdown > ul > li:hover {\n  background-color: #eee;\n}\n\n.dropdown > ul > li + li {\n  border-top: 1px solid black;\n}\n\n.bubble {\n  border: 1px solid black;\n  border-radius: 5px;\n  padding: 5px 10px 5px 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  margin: 5px;\n  min-height: 22px;\n}\n\n.bubble-closeButton {\n  margin-left: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n#placeholderBubble {\n  color: grey;\n}\n\n#noOptionsListItem {\n  cursor: default;\n  color: grey;\n}\n\n.singleSelectInputBarItem {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  margin: 10px;\n}\n\n.singleSelectInputBarPlaceholder {\n  color: grey;\n}"; }
+    static get style() { return "pwc-choices {\n  display: block;\n  margin: 0;\n  padding: 0;\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  position: relative;\n  width: 100%;\n}"; }
 };
 
 export { PwcChoices as pwc_choices };

dist/pwc-multi-filter/pwc-dynamic-form-buttons.entry.js

@@ -1,5 +0,5 @@
-import { r as registerInstance, h } from './core-77375621.js';
+import { r as registerInstance, h } from './core-512552ee.js';
 import './_commonjsHelpers-4ab098b6.js';
 import './linq-c2ddb1d7.js';
-import { r as resolveJson } from './utils-df9d21df.js';
+import { r as resolveJson } from './utils-8b45aa52.js';
 
@@ -20,5 +20,5 @@ const PwcDynamicFormButtons = class {
     render() {
-        return (h("div", null, this.resolvedItems
+        return this.resolvedItems
             ? this.resolvedItems.map(button => this.constructButton(button))
-            : ""));
+            : "";
     }
@@ -25,0 +25,0 @@ static get watchers() { return {

dist/pwc-multi-filter/pwc-dynamic-form-content.entry.js

@@ -1,5 +0,6 @@
-import { r as registerInstance, c as createEvent, h, d as getElement } from './core-77375621.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './core-512552ee.js';
 import './_commonjsHelpers-4ab098b6.js';
 import './linq-c2ddb1d7.js';
-import { r as resolveJson, g as getVanillaHtmlInputs } from './utils-df9d21df.js';
+import { r as resolveJson } from './utils-8b45aa52.js';
+import { _ } from './lodash-62c1633d.js';
 
@@ -11,11 +12,66 @@ const PwcDynamicFormContent = class {
     }
-    onItemsChanged(items) {
+    itemsWatchHandler(items) {
         this.resolvedItems = resolveJson(items);
     }
-    componentWillLoad() {
-        this.onItemsChanged(this.items);
+    changeEventHandler(event) {
+        const element = event.target;
+        this.fieldChanged.emit({
+            element,
+            newValue: element.value,
+            originalEvent: event
+        });
     }
-    handleFieldChange(eventPayload) {
-        this.fieldChanged.emit(eventPayload);
+    selectedOptionsChangedHandler(event) {
+        const element = event.target;
+        const value = event.detail;
+        this.fieldChanged.emit({
+            element,
+            newValue: value,
+            originalEvent: event
+        });
     }
+    colorPickedeventHandler(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        const element = event.target;
+        const value = event.detail;
+        this.fieldChanged.emit({
+            element,
+            newValue: value,
+            originalEvent: event
+        });
+    }
+    async getColorPickerRefs() {
+        return this.colorPickerRefs;
+    }
+    async getChoicesRefs() {
+        return this.choicesRefs;
+    }
+    async getNativeInputRefs() {
+        return this.nativeInputRefs;
+    }
+    handleColorPickerRef(elementConfig, ref) {
+        if (ref) {
+            this.colorPickerRefs = _.unionBy(this.colorPickerRefs, [ref], i => i.getAttribute("name"));
+        }
+        else {
+            _.remove(this.colorPickerRefs, i => i.getAttribute("name") === elementConfig.name);
+        }
+    }
+    handleChoicesRef(elementConfig, ref) {
+        if (ref) {
+            this.choicesRefs = _.unionBy(this.choicesRefs, [ref], i => i.name);
+        }
+        else {
+            _.remove(this.choicesRefs, i => i.name === elementConfig.name);
+        }
+    }
+    handleNativeInputRef(elementConfig, ref) {
+        if (ref) {
+            this.nativeInputRefs = _.unionBy(this.nativeInputRefs, [ref], i => i.name);
+        }
+        else {
+            _.remove(this.nativeInputRefs, i => i.name === elementConfig.name);
+        }
+    }
     constructField(field) {
@@ -28,3 +84,3 @@ let castedField;
                 castedField = field;
-                return (h("div", { class: "form-group" }, h("label", null, label, h("color-picker", Object.assign({}, castedField)))));
+                return (h("label", null, label, h("pwc-color-picker", Object.assign({}, castedField, { ref: this.handleColorPickerRef.bind(this, castedField) }))));
             // Special handle reason: using pwc-choices.
@@ -43,65 +99,31 @@ case "select-single":
                 castedField = field;
-                return (h("div", { class: "form-group" }, h("label", null, h("input", Object.assign({}, castedField)), label)));
+                return (h("label", null, h("input", Object.assign({}, castedField, { ref: this.handleNativeInputRef.bind(this, castedField) })), label));
             default:
                 castedField = field;
-                return (h("div", { class: "form-group" }, h("label", null, label, h("input", Object.assign({}, castedField)))));
+                return (h("label", null, label, h("input", Object.assign({}, castedField))));
         }
     }
     constructPwcChoices(label, castedField) {
-        return (h("div", { class: "form-group" }, h("label", null, label, h("pwc-choices", Object.assign({}, castedField)))));
+        return (h("label", null, label, h("pwc-choices", Object.assign({}, castedField, { ref: this.handleChoicesRef.bind(this, castedField) }))));
     }
-    init() {
-        const colorPickers = this.rootElement.querySelectorAll("color-picker");
-        colorPickers.forEach(cp => {
-            cp.addEventListener("colorPickedEvent", originalEvent => {
-                const fieldChangedEventPayload = {
-                    element: cp,
-                    newValue: cp.activeColor,
-                    originalEvent
-                };
-                this.handleFieldChange(fieldChangedEventPayload);
-            });
-        });
-        const pwcChoicesElements = this.rootElement.querySelectorAll("pwc-choices");
-        pwcChoicesElements.forEach(pce => {
-            pce.addEventListener("selectedOptionsChanged", (event) => {
-                const fieldChangedEventPayload = {
-                    element: pce,
-                    newValue: event.detail,
-                    originalEvent: event
-                };
-                this.handleFieldChange(fieldChangedEventPayload);
-            });
-        });
-        // vanilla html inputs
-        const vanillaInputs = getVanillaHtmlInputs(this.rootElement, true);
-        vanillaInputs.forEach(vf => {
-            vf.addEventListener("change", e => {
-                const fieldChangedEventPayload = {
-                    element: vf,
-                    newValue: vf.value,
-                    originalEvent: e
-                };
-                this.handleFieldChange(fieldChangedEventPayload);
-            });
-        });
+    componentWillLoad() {
+        this.itemsWatchHandler(this.items);
     }
-    componentDidLoad() {
-        this.init();
-    }
-    componentDidUpdate() {
-        this.init();
-    }
     render() {
-        return (h("div", null, this.resolvedItems
-            ? this.resolvedItems.map(field => this.constructField(field))
-            : ""));
+        if (this.resolvedItems) {
+            // we are mutating the config, therefore we have to clone it to leave the user input intact.
+            const resolvedItemsClone = _.cloneDeep(this.resolvedItems);
+            return resolvedItemsClone.map(field => this.constructField(field));
+        }
+        else {
+            return "";
+        }
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {
-        "items": ["onItemsChanged"]
+        "items": ["itemsWatchHandler"]
     }; }
-    static get style() { return ""; }
+    static get style() { return "label {\n  display: block;\n}"; }
 };
 
 export { PwcDynamicFormContent as pwc_dynamic_form_content };

dist/pwc-multi-filter/pwc-dynamic-form.entry.js

@@ -1,5 +0,2 @@
-import { r as registerInstance, c as createEvent, h, d as getElement } from './core-77375621.js';
-import './_commonjsHelpers-4ab098b6.js';
-import './linq-c2ddb1d7.js';
-import { g as getVanillaHtmlInputs } from './utils-df9d21df.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './core-512552ee.js';
 
@@ -13,3 +10,3 @@ const PwcDynamicForm = class {
         const rootElement = this.rootElement;
-        this.getFieldValues("value").then(v => {
+        this.getFieldValues().then(v => {
             const formChangedEventPayload = {
@@ -27,3 +24,3 @@ type: "change",
         const rootElement = this.rootElement;
-        this.getFieldValues("value").then(v => {
+        this.getFieldValues().then(v => {
             const formChangedEventPayload = {
@@ -39,7 +36,5 @@ type: "reset",
     }
-    async getFieldValues(pwcChoicesRetreiveMode) {
-        const form = this.rootElement.querySelector("form");
+    async getFieldValues() {
         const resultObj = {};
-        // vanilla html inputs
-        const vanillaInputs = getVanillaHtmlInputs(this.rootElement.querySelector("pwc-dynamic-form-content"), true);
+        const vanillaInputs = (await this.contentRef.getNativeInputRefs()) || [];
         vanillaInputs.forEach(vf => {
@@ -53,23 +48,11 @@ if (vf.type === "checkbox") {
         });
-        // pwc-choices
-        const pwcChoicesInputs = form.querySelectorAll("pwc-choices");
-        for (const key in pwcChoicesInputs) {
-            if (pwcChoicesInputs.hasOwnProperty(key)) {
-                const ci = pwcChoicesInputs[key];
-                const value = await ci.getSelectedOptions(pwcChoicesRetreiveMode);
-                resultObj[ci.name] = value;
-            }
-        }
-        // color-picker
-        const colorPickers = this.rootElement.querySelectorAll("color-picker");
-        for (const key in colorPickers) {
-            if (colorPickers.hasOwnProperty(key)) {
-                const cp = colorPickers[key];
-                const value = cp.activeColor;
-                const name = cp.getAttribute("name");
-                resultObj[name] = value;
-            }
-        }
+        const pwcChoicesInputs = (await this.contentRef.getChoicesRefs()) || [];
+        pwcChoicesInputs.forEach(async (elm) => (resultObj[elm.name] = await elm.getSelectedOptionsAsValues()));
+        const pwcColorPickers = (await this.contentRef.getColorPickerRefs()) || [];
+        pwcColorPickers.forEach(async (elm) => (resultObj[elm.getAttribute("name")] = elm.activeColor));
         return resultObj;
     }
+    componentDidRender() {
+        this.contentRef = this.rootElement.querySelector("pwc-dynamic-form-content");
+    }
     render() {
@@ -76,0 +59,0 @@ return (h("form", null, h("slot", null)));

dist/pwc-multi-filter/pwc-filter.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, d as getElement } from './core-77375621.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './core-512552ee.js';
 import './_commonjsHelpers-4ab098b6.js';
@@ -87,3 +87,3 @@ import { E as Enumerable } from './linq-c2ddb1d7.js';
         let filteredData = this.resolvedData;
-        const formValues = (await dynamicForm.getFieldValues("value"));
+        const formValues = await dynamicForm.getFieldValues();
         for (const formElementName in formValues) {
@@ -131,3 +131,3 @@ if (formValues.hasOwnProperty(formElementName)) {
                 case "color":
-                    config = this.generateColorPickerConfig(item);
+                    config = this.generatePwcColorPickerConfig(item);
                     break;
@@ -151,3 +151,3 @@ default:
     }
-    generateColorPickerConfig(item) {
+    generatePwcColorPickerConfig(item) {
         const itemClone = Object.assign({}, item);
@@ -154,0 +154,0 @@ delete itemClone.dataField;

dist/pwc-multi-filter/pwc-multi-filter.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, d as getElement } from './core-77375621.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './core-512552ee.js';
 import './_commonjsHelpers-4ab098b6.js';
@@ -14,3 +14,3 @@ import { _ } from './lodash-62c1633d.js';
     async tabChangedEventHandler(e) {
-        this.setActiveState(e.detail.handle);
+        this.setActiveState(e.detail.title);
     }
@@ -76,3 +76,3 @@ async getActiveState() {
     constructFilterTab(filter) {
-        return (h("pwc-tabview-tab", { handle: filter.name }, h("pwc-filter", { data: filter.data, items: filter.items, ref: el => this.registerFilterRef(filter.name, el) })));
+        return (h("pwc-tabview-tab", { title: filter.name }, h("pwc-filter", { data: filter.data, items: filter.items, ref: el => this.registerFilterRef(filter.name, el) })));
     }
@@ -79,0 +79,0 @@ render() {

dist/pwc-multi-filter/pwc-multi-filter.esm.js

@@ -1,6 +0,6 @@
-import { p as patchBrowser, g as globals, b as bootstrapLazy } from './core-77375621.js';
+import { p as patchBrowser, g as globals, b as bootstrapLazy } from './core-512552ee.js';
 
 patchBrowser().then(options => {
   globals();
-  return bootstrapLazy([["pwc-dynamic-form-buttons",[[0,"pwc-dynamic-form-buttons",{"items":[1]}]]],["pwc-tabview",[[4,"pwc-tabview",{"activeHandle":[32],"forceRenderSentinel":[32],"getActiveState":[64],"switchToTab":[64]},[[0,"tabModified","tabModifiedEventHandler"],[0,"handleClicked","handleClickedHandler"]]]]],["pwc-tabview-tab",[[4,"pwc-tabview-tab",{"handle":[513],"active":[4]}]]],["pwc-dynamic-form",[[4,"pwc-dynamic-form",{"getFieldValues":[64]},[[0,"fieldChanged","handleFieldChanged"],[0,"reset","handleFormReset"]]]]],["pwc-tabview-handle",[[0,"pwc-tabview-handle",{"handle":[1],"active":[516]},[[0,"click","clickEventHandler"]]]]],["pwc-choices",[[0,"pwc-choices",{"name":[1],"type":[1],"options":[1],"placeholder":[1],"dropdownIsOpen":[4,"dropdown-is-open"],"autoHidePlaceholder":[4,"auto-hide-placeholder"],"showCloseButtons":[4,"show-close-buttons"],"uniqueSelections":[4,"unique-selections"],"noOptionsString":[1,"no-options-string"],"distinctMode":[1,"distinct-mode"],"selectedOptions":[32],"getSelectedOptions":[64]},[[0,"optionDiscarded","optionDiscardedHandler"],[0,"inputBarClicked","inputBarClickedHandler"],[0,"dropdownOptionClicked","dropdownOptionClickedHandler"],[8,"click","windowClickHandler"],[0,"click","selfClickHandler"]]]]],["color-picker",[[0,"color-picker",{"colors":[8],"inputValue":[1,"input-value"],"activeColor":[1537,"active-color"],"selectedOne":[32],"hovered":[32]}]]],["pwc-choices-input-bar",[[0,"pwc-choices-input-bar",{"type":[1],"options":[16],"showCloseButtons":[4,"show-close-buttons"],"placeholder":[1],"autoHidePlaceholder":[4,"auto-hide-placeholder"]},[[0,"closeClicked","optionBubbleCloseClickedHandler"]]]]],["pwc-choices-dropdown",[[0,"pwc-choices-dropdown",{"options":[16],"noOptionsString":[1,"no-options-string"],"filteredOptions":[32]}]]],["pwc-choices-option-bubble",[[0,"pwc-choices-option-bubble",{"showCloseButton":[4,"show-close-button"],"option":[16],"indexInSelectedList":[2,"index-in-selected-list"]}]]],["pwc-dynamic-form-content",[[0,"pwc-dynamic-form-content",{"items":[1]}]]],["pwc-filter",[[0,"pwc-filter",{"data":[1],"items":[1],"resolvedData":[32],"resolvedItems":[32],"filter":[64]},[[0,"formChanged","formChangedHandler"]]]]],["pwc-multi-filter",[[0,"pwc-multi-filter",{"filterConfigs":[32],"getActiveState":[64],"switchToFilter":[64],"addFilter":[64],"removeFilter":[64],"getFilter":[64],"subscribeToFilterChange":[64],"getFilterResult":[64]},[[0,"tabChanged","tabChangedEventHandler"]]]]]], options);
+  return bootstrapLazy([["pwc-dynamic-form-buttons",[[0,"pwc-dynamic-form-buttons",{"items":[1]}]]],["pwc-tabview",[[4,"pwc-tabview",{"activeTitle":[32],"forceRenderSentinel":[32],"getActiveState":[64],"switchToTab":[64]},[[0,"tabModified","tabModifiedEventHandler"],[0,"handleClicked","handleClickedHandler"]]]]],["pwc-tabview-tab",[[4,"pwc-tabview-tab",{"title":[513],"active":[516]}]]],["pwc-dynamic-form",[[4,"pwc-dynamic-form",{"getFieldValues":[64]},[[0,"fieldChanged","handleFieldChanged"],[0,"reset","handleFormReset"]]]]],["pwc-tabview-handle",[[0,"pwc-tabview-handle",{"title":[1],"active":[516]},[[0,"click","clickEventHandler"]]]]],["pwc-color-picker",[[0,"pwc-color-picker",{"colors":[8],"inputValue":[1,"input-value"],"activeColor":[1537,"active-color"],"selectedOne":[32],"hovered":[32]}]]],["pwc-choices-dropdown",[[0,"pwc-choices-dropdown",{"options":[16],"noOptionsString":[1,"no-options-string"],"searchBarPlaceholder":[1,"search-bar-placeholder"],"filteredOptions":[32]}]]],["pwc-choices-option-bubble",[[0,"pwc-choices-option-bubble",{"showCloseButton":[4,"show-close-button"],"option":[16],"indexInSelectedList":[2,"index-in-selected-list"]}]]],["pwc-choices-input-bar",[[0,"pwc-choices-input-bar",{"type":[1],"options":[16],"showCloseButtons":[4,"show-close-buttons"],"placeholder":[1],"autoHidePlaceholder":[4,"auto-hide-placeholder"]},[[0,"closeClicked","optionBubbleCloseClickedHandler"],[0,"click","onInputBarClick"]]]]],["pwc-choices",[[0,"pwc-choices",{"name":[1],"type":[1],"options":[1],"searchBarPlaceholder":[1,"search-bar-placeholder"],"placeholder":[1],"autoHidePlaceholder":[4,"auto-hide-placeholder"],"dropdownIsOpen":[1540,"dropdown-is-open"],"showCloseButtons":[4,"show-close-buttons"],"uniqueSelections":[4,"unique-selections"],"noOptionsString":[1,"no-options-string"],"distinctMode":[1,"distinct-mode"],"selectedOptions":[32],"getSelectedOptionsAsValues":[64],"getSelectedOptionsAsLabels":[64],"getSelectedOptionsAsObjects":[64]},[[0,"optionDiscarded","optionDiscardedHandler"],[0,"inputBarClicked","inputBarClickedHandler"],[0,"dropdownOptionClicked","dropdownOptionClickedHandler"],[8,"click","windowClickHandler"],[0,"click","selfClickHandler"]]]]],["pwc-dynamic-form-content",[[0,"pwc-dynamic-form-content",{"items":[1],"getColorPickerRefs":[64],"getChoicesRefs":[64],"getNativeInputRefs":[64]},[[0,"change","changeEventHandler"],[0,"selectedOptionsChanged","selectedOptionsChangedHandler"],[0,"colorPickedEvent","colorPickedeventHandler"]]]]],["pwc-filter",[[0,"pwc-filter",{"data":[1],"items":[1],"resolvedData":[32],"resolvedItems":[32],"filter":[64]},[[0,"formChanged","formChangedHandler"]]]]],["pwc-multi-filter",[[0,"pwc-multi-filter",{"filterConfigs":[32],"getActiveState":[64],"switchToFilter":[64],"addFilter":[64],"removeFilter":[64],"getFilter":[64],"subscribeToFilterChange":[64],"getFilterResult":[64]},[[0,"tabChanged","tabChangedEventHandler"]]]]]], options);
 });

dist/pwc-multi-filter/pwc-tabview-handle.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, d as getElement } from './core-77375621.js';
+import { r as registerInstance, c as createEvent, d as getElement } from './core-512552ee.js';
 
@@ -17,8 +17,6 @@ const PwcTabviewHandle = class {
     clickEventHandler(event) {
-        event.preventDefault();
-        event.stopPropagation();
         this.handleClicked.emit({
             originalEvent: event,
-            handleRef: this.root,
-            handle: this.handle
+            handle: this.root,
+            title: this.title
         });
@@ -30,3 +28,3 @@ }
     render() {
-        return this.handle;
+        return this.title;
     }
@@ -37,5 +35,5 @@ get root() { return getElement(this); }
     }; }
-    static get style() { return "pwc-tabview {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.pwc-tabview___handle-container {\n  display: -ms-flexbox;\n  display: flex;\n  padding-left: 1px;\n}\n\npwc-tabview-handle {\n  display: block;\n  margin-bottom: -1px;\n  margin-left: -1px;\n  border: 1px solid black;\n  padding: 10px;\n  z-index: 2;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  background-color: #ddd;\n}\n\n.pwc-tabview___active-handle {\n  border-bottom-style: none;\n  background-color: #fff;\n}\n\npwc-tabview-tab {\n  display: none;\n  border: 1px solid black;\n  padding: 10px;\n  z-index: 1;\n  background-color: white;\n}\n\n.pwc-tabview___active-tab {\n  display: block;\n}"; }
+    static get style() { return "pwc-tabview-handle {\n  display: block;\n  border: 1px solid black;\n  padding: 10px;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  background-color: #ddd;\n}\n\n.pwc-tabview___active-handle {\n  background-color: #fff;\n}"; }
 };
 
 export { PwcTabviewHandle as pwc_tabview_handle };

dist/pwc-multi-filter/pwc-tabview-tab.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, d as getElement } from './core-77375621.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './core-512552ee.js';
 
@@ -8,3 +8,3 @@ const PwcTabviewTab = class {
     }
-    watchHandler() {
+    titleWatchHandler() {
         this.tabModified.emit();
@@ -28,8 +28,8 @@ }
     static get watchers() { return {
-        "handle": ["watchHandler"],
+        "title": ["titleWatchHandler"],
         "active": ["activeWatchHandler"]
     }; }
-    static get style() { return "pwc-tabview {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.pwc-tabview___handle-container {\n  display: -ms-flexbox;\n  display: flex;\n  padding-left: 1px;\n}\n\npwc-tabview-handle {\n  display: block;\n  margin-bottom: -1px;\n  margin-left: -1px;\n  border: 1px solid black;\n  padding: 10px;\n  z-index: 2;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  background-color: #ddd;\n}\n\n.pwc-tabview___active-handle {\n  border-bottom-style: none;\n  background-color: #fff;\n}\n\npwc-tabview-tab {\n  display: none;\n  border: 1px solid black;\n  padding: 10px;\n  z-index: 1;\n  background-color: white;\n}\n\n.pwc-tabview___active-tab {\n  display: block;\n}"; }
+    static get style() { return "pwc-tabview-tab {\n  display: none;\n  border: 1px solid black;\n  padding: 10px;\n  background-color: white;\n}\n\n.pwc-tabview___active-tab {\n  display: block;\n}"; }
 };
 
 export { PwcTabviewTab as pwc_tabview_tab };

dist/pwc-multi-filter/pwc-tabview.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, d as getElement } from './core-77375621.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './core-512552ee.js';
 
@@ -6,40 +6,40 @@ const PwcTabview = class {
         registerInstance(this, hostRef);
-        this.handles = [];
-        this.tabRefs = {};
-        this.handleRefs = {};
+        this.titles = [];
+        this.tabs = {};
+        this.handles = {};
         this.tabChanged = createEvent(this, "tabChanged", 7);
     }
-    activeHandleWatchHandler(newValue) {
-        this.activeTabRef = this.tabRefs[newValue];
-        this.activeHandleRef = this.handleRefs[newValue];
+    activeTitleWatchHandler(newValue) {
+        this.activeTab = this.tabs[newValue];
+        this.activeHandle = this.handles[newValue];
     }
-    tabModifiedEventHandler(event) {
-        event.stopPropagation();
-        event.preventDefault();
+    tabModifiedEventHandler() {
         this.forceRender();
     }
     handleClickedHandler(event) {
-        event.stopPropagation();
-        event.preventDefault();
-        const handle = event.detail.handle;
-        this.switchToTab(handle);
+        const title = event.detail.title;
+        this.switchToTab(title);
     }
+    /**
+     * Returns the currently active tab, handle, and title.
+     */
     async getActiveState() {
         return {
-            handle: this.activeHandle,
-            tabRef: this.activeTabRef,
-            handleRef: this.activeHandleRef
+            title: this.activeTitle,
+            tab: this.activeTab,
+            handle: this.activeHandle
         };
     }
-    async switchToTab(handle) {
-        this.activeHandle = handle;
+    /**
+     * Switches to a tab.
+     * @param title Title of the target tab.
+     */
+    async switchToTab(title) {
+        this.activeTitle = title;
         this.tabChanged.emit({
-            handle,
-            tabRef: this.activeTabRef,
-            handleRef: this.activeHandleRef
+            title,
+            tab: this.activeTab,
+            handle: this.activeHandle
         });
     }
-    onChildrenChange() {
-        this.forceRender();
-    }
     forceRender() {
@@ -49,3 +49,3 @@ this.forceRenderSentinel = (this.forceRenderSentinel + 1) % 100;
     componentDidLoad() {
-        const observer = new MutationObserver(() => this.onChildrenChange());
+        const observer = new MutationObserver(() => this.forceRender());
         const options = {
@@ -55,3 +55,3 @@ childList: true
         observer.observe(this.root, options);
-        const firstHandle = this.handles[0];
+        const firstHandle = this.titles[0];
         this.switchToTab(firstHandle);
@@ -61,12 +61,12 @@ }
         const tabs = Array.from(document.querySelectorAll("pwc-tabview-tab"));
-        this.handles = tabs.map(t => t.handle);
-        if (tabs.length > 0 && this.activeTabRef) {
+        this.titles = tabs.map(t => t.title);
+        if (tabs.length > 0 && this.activeTab) {
             tabs.forEach(t => (t.active = false));
-            this.activeTabRef.active = true;
+            this.activeTab.active = true;
         }
         return [
-            h("div", { class: "pwc-tabview___handle-container" }, tabs.map(tabRef => {
-                const handle = tabRef.handle;
-                this.tabRefs[handle] = tabRef;
-                return (h("pwc-tabview-handle", { handle: handle, active: this.activeTabRef === tabRef, ref: elem => (this.handleRefs[tabRef.handle] = elem) }));
+            h("div", { class: "pwc-tabview___handle-container" }, tabs.map(tab => {
+                const title = tab.title;
+                this.tabs[title] = tab;
+                return (h("pwc-tabview-handle", { title: title, active: this.activeTab === tab, ref: elem => (this.handles[tab.title] = elem) }));
             })),
@@ -78,7 +78,7 @@ h("slot", null)
     static get watchers() { return {
-        "activeHandle": ["activeHandleWatchHandler"]
+        "activeTitle": ["activeTitleWatchHandler"]
     }; }
-    static get style() { return "pwc-tabview {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.pwc-tabview___handle-container {\n  display: -ms-flexbox;\n  display: flex;\n  padding-left: 1px;\n}\n\npwc-tabview-handle {\n  display: block;\n  margin-bottom: -1px;\n  margin-left: -1px;\n  border: 1px solid black;\n  padding: 10px;\n  z-index: 2;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  background-color: #ddd;\n}\n\n.pwc-tabview___active-handle {\n  border-bottom-style: none;\n  background-color: #fff;\n}\n\npwc-tabview-tab {\n  display: none;\n  border: 1px solid black;\n  padding: 10px;\n  z-index: 1;\n  background-color: white;\n}\n\n.pwc-tabview___active-tab {\n  display: block;\n}"; }
+    static get style() { return "pwc-tabview {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.pwc-tabview___handle-container {\n  display: -ms-flexbox;\n  display: flex;\n}"; }
 };
 
 export { PwcTabview as pwc_tabview };

dist/types/components/pwc-multi-filter/pwc-multi-filter.d.ts

@@ -6,3 +6,3 @@ import { EventEmitter } from "../../stencil.core";
 import { FilterChangedEventPayload } from "@paraboly/pwc-filter/dist/types/components/pwc-filter/FilterChangedEventPayload";
-import { ITabChangedEventPayload } from "@paraboly/pwc-tabview/dist/types/components/pwc-tabview/ITabChangedEventPayload";
+import { IState } from "@paraboly/pwc-tabview/dist/types/components/pwc-tabview/IState";
 export declare type _filterChangedEventType = CustomEvent<FilterChangedEventPayload>;
@@ -18,3 +18,3 @@ export declare class PwcMultiFilter {
     activeFilterChanged: EventEmitter<PwcMultiFilterInterfaces.IActiveFilterChangedEventPayload>;
-    tabChangedEventHandler(e: CustomEvent<ITabChangedEventPayload>): Promise<void>;
+    tabChangedEventHandler(e: CustomEvent<IState>): Promise<void>;
     getActiveState(): Promise<{
@@ -21,0 +21,0 @@ filterRef: HTMLPwcFilterElement;

dist/types/components/pwc-multi-filter/PwcMultiFilterInterfaces.d.ts

@@ -0,0 +0,0 @@ import "@paraboly/pwc-filter";

dist/types/index.d.ts

 export * from "./components";

package.json

 {
   "name": "@paraboly/pwc-multi-filter",
-  "version": "1.0.0-0",
+  "version": "1.0.0",
   "description": "A wrapper over pwc-tabview and pwc-filter. Provides means of dynamically managing multiple filters via a single component.",
@@ -62,6 +62,6 @@ "keywords": [
   "dependencies": {
-    "@paraboly/pwc-filter": "^1.0.0-0",
-    "@paraboly/pwc-tabview": "^3.0.0-1"
+    "@paraboly/pwc-filter": "^1.0.2",
+    "@paraboly/pwc-tabview": "^3.1.0"
   },
   "peerDependencies": {}
 }

readme.md

@@ -0,0 +0,0 @@ ![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=for-the-badge)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

0

decreased by-100%

Number of low supply chain risk alerts

13

decreased by-61.76%

Worsened metrics

Total package byte prevSize

5843023

decreased by-1.4%

Lines of code

141572

decreased by-0.02%

Dependency changes

• Updated@paraboly/pwc-filter@^1.0.2

• Updated@paraboly/pwc-tabview@^3.1.0