From 6dfc74f78247c82308d2c76b91f608c0f801cab1 Mon Sep 17 00:00:00 2001
From: Jaime Pastor <jaime.pastor@adidas-group.com>
Date: Thu, 21 May 2020 16:41:24 +0200
Subject: [PATCH 1/3] Fix multiple selector attributes to avoid inconsistencies

---
 src/components/choicesjs-stencil/choicesjs-stencil.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/choicesjs-stencil/choicesjs-stencil.tsx b/src/components/choicesjs-stencil/choicesjs-stencil.tsx
index 603d367..c40cbc8 100644
--- a/src/components/choicesjs-stencil/choicesjs-stencil.tsx
+++ b/src/components/choicesjs-stencil/choicesjs-stencil.tsx
@@ -239,7 +239,7 @@ export class ChoicesJSStencil implements IChoicesProps, IChoicesMethods {
       break;
     case 'multiple':
       this.element =
-        <select multiple { ...attributes }>
+        <select { ...attributes } multiple>
           { this.value ? this.createSelectOptions(this.value) : null }
         </select>;
       break;

From af736a6d569adf8b5d9e703982f8b77be3376d58 Mon Sep 17 00:00:00 2001
From: Jaime Pastor <jaime.pastor@adidas-group.com>
Date: Thu, 21 May 2020 16:42:03 +0200
Subject: [PATCH 2/3] Update public demo

---
 index.html | 125 ++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 115 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 08cbbc8..2a9e494 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
-    <script src="https://rawgit.com/jshjohnson/Choices/v7.0.0/public/assets/scripts/choices.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/scripts/choices.js"></script>
     <script src="dist/choicesjsstencil.js"></script>
     <style>
       html {
@@ -85,10 +85,6 @@ <h2 class="col-sm-12">ChoicesJS Web Component: test page</h2>
             <div class="pull-left values-container">
               <p class="values-container__text"></p>
             </div>
-            <div class="form-group pull-right">
-              <button class="btn btn-primary" type="submit">Apply</button>
-              <button class="btn btn-default" type="reset">Reset</button>
-            </div>
           </div>
         </div>
         <div class="row">
@@ -102,6 +98,8 @@ <h2 class="col-sm-12">ChoicesJS Web Component: test page</h2>
                 <option value="single">Single</option>
                 <option value="multiple">Multiple</option>
               </select>
+              <button class="btn btn-primary" type="submit">Apply</button>
+              <button class="btn btn-default" type="reset">Reset</button>
               <div class="pull-right">
                 <button class="btn btn-info" type="button" data-toggle="modal" data-target="#customSearchModal">Search options</button>
                 <button class="btn btn-success" type="button" data-toggle="modal" data-target="#customStylesModal">Custom Styles</button>
@@ -499,7 +497,7 @@ <h2 class="col-sm-12">ChoicesJS Web Component: test page</h2>
               </textarea>
               <label for="callbackOnCreateTemplates">}</label>
               <br/>
-              <a href="https://github.com/jshjohnson/Choices/blob/v7.0.0/public/assets/scripts/choices.js#L713-L788" target="_blank">
+              <a href="https://github.com/jshjohnson/Choices/blob/v9.0.1/public/assets/scripts/choices.js#L2777-L2926" target="_blank">
                 Templates reference
               </a>
             </div>
@@ -525,7 +523,7 @@ <h2 class="col-sm-12">ChoicesJS Web Component: test page</h2>
           <div class="col-md-12">
             <p class="text-center pad-top">
               See full documentation in
-              <a href="https://www.npmjs.com/package/choices.js/v/7.0.0" target="_blank">choices.js</a>
+              <a href="https://www.npmjs.com/package/choices.js/v/9.0.1" target="_blank">choices.js</a>
               npm package.
             </p>
           </div>
@@ -579,7 +577,7 @@ <h4 class="modal-title">Custom Styles</h4>
     "openState": "is-open",
     "disabledState": "is-disabled",
     "highlightedState": "is-highlighted",
-    "hiddenState": "is-hidden",
+    "selectedState": "is-selected",
     "flippedState": "is-flipped",
     "loadingState": "is-loading",
     "noResults": "has-no-results",
@@ -626,6 +624,24 @@ <h5 class="text-center pad-bottom">
                         <span class="glyphicon glyphicon glyphicon-question-sign"></span>
                       </span>
                     </div>
+                    <div class="form-group">
+                      <label for="includeMatches">
+                        Include matches
+                        <input type="checkbox" name="includeMatches">
+                      </label>
+                      <span class="description" data-toggle="tooltip" title="Whether the matches should be included in the result set. When true, each record in the result set will include the indices of the matched characters. These can consequently be used for highlighting purposes.">
+                        <span class="glyphicon glyphicon glyphicon-question-sign"></span>
+                      </span>
+                    </div>
+                    <div class="form-group">
+                      <label for="includeScore">
+                        Include score
+                        <input type="checkbox" name="includeScore" checked disabled>
+                      </label>
+                      <span class="description" data-toggle="tooltip" title="Whether the score should be included in the result set. This option is mandatory, Choices.JS uses the score property by default.">
+                        <span class="glyphicon glyphicon glyphicon-question-sign"></span>
+                      </span>
+                    </div>
                     <div class="form-group">
                       <label for="shouldSort">
                         Sort
@@ -671,6 +687,80 @@ <h5 class="text-center pad-bottom">
                         <span class="glyphicon glyphicon glyphicon-question-sign"></span>
                       </span>
                     </div>
+                    <div class="form-group">
+                      <label for="sortFn">
+                        sortFn(a, b) {
+                      </label>
+                      <span class="description" data-toggle="tooltip" title="The function that will sort choices and items before they are displayed (unless a user is searching). By default choices and items are sorted by score.<br/><br/>The function takes two parameters: a, b.">
+                        <span class="glyphicon glyphicon glyphicon-question-sign"></span>
+                      </span>
+                      <textarea class="form-control textarea--vertical" name="sortFn" rows="2">
+return a.score - b.score;
+                      </textarea>
+                      <label for="sortFn">}</label>
+                    </div>
+                    <div class="form-group">
+                      <label for="getFn">
+                        getFn(obj, path) {
+                      </label>
+                      <span class="description" data-toggle="tooltip" title="The get function to use when fetching an object properties. The default will search nested paths *ie foo.bar.baz*">
+                        <span class="glyphicon glyphicon glyphicon-question-sign"></span>
+                      </span>
+                      <textarea class="form-control textarea--vertical" name="getFn" rows="8">
+var list = [];
+
+function baseToString(value) {
+  // Exit early for strings to avoid a performance hit in some environments.
+  if (typeof value == 'string') {
+    return value;
+  }
+
+  var result = (value + '');
+  return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
+}
+
+function toString(value) {
+  return value == null ? '' : baseToString(value);
+}
+
+function _get(obj, path) {
+  if (!path) {
+    // If there's no path left, we've gotten to the object we care about.
+    list.push(obj);
+  } else {
+    var dotIndex = path.indexOf('.')
+    var key = path;
+    var remaining = null;
+
+    if (dotIndex !== -1) {
+      key = path.slice(0, dotIndex);
+      remaining = path.slice(dotIndex + 1);
+    }
+
+    var value = obj[key];
+
+    if (value !== null && value !== undefined) {
+      if (!remaining && (typeof value === 'string' || typeof value === 'number')) {
+        list.push(toString(value));
+      } else if (Array.isArray(value)) {
+        // Search each item in the array.
+        for (var i = 0, len = value.length; i < len; i += 1) {
+          _get(value[i], remaining);
+        }
+      } else if (remaining) {
+        // An object. Recurse further.
+        _get(value, remaining);
+      }
+    }
+  }
+}
+
+_get(obj, path);
+
+return list;
+                      </textarea>
+                      <label for="getFn">}</label>
+                    </div>
                   </div>
                   <div class="col-md-6">
                     <div class="form-group">
@@ -713,6 +803,15 @@ <h5 class="text-center pad-bottom">
                       </span>
                       <input type="number" class="form-control" name="minMatchCharLength" value="1">
                     </div>
+                    <div class="form-group">
+                      <label for="findAllMatches">
+                        Find all matches
+                        <input type="checkbox" name="findAllMatches">
+                      </label>
+                      <span class="description" data-toggle="tooltip" title="When true, the matching function will continue to the end of a search pattern even if a perfect match has already been located in the string.">
+                        <span class="glyphicon glyphicon glyphicon-question-sign"></span>
+                      </span>
+                    </div>
                     <div class="form-group">
                       <label for="location">
                         Location
@@ -852,7 +951,13 @@ <h5 class="text-center pad-bottom">
             location: Number,
             threshold: Number,
             minMatchCharLength: Number,
-            maxPatternLength: Number
+            maxPatternLength: Number,
+            sortFn: function(value) {
+              return new Function('a', 'b', value.trim());
+            },
+            getFn: function(value) {
+              return new Function('obj', 'path', value.trim());
+            }
           });
 
           console.info('changeSearch', fields);
@@ -874,7 +979,7 @@ <h5 class="text-center pad-bottom">
           var values = [];
           var i, lng;
 
-          // forEach is not available in all browsers
+          // FormData:forEach() is not available in all browsers
           if (typeof form.forEach === 'function') {
             form.forEach(function(value, name) {
               values.push(name + ': `' + value + '`') ;

From 7f93fafbb27916a0e2e19b03d953cef60e8b23cd Mon Sep 17 00:00:00 2001
From: Jaime Pastor <jaime.pastor@adidas-group.com>
Date: Thu, 21 May 2020 16:42:21 +0200
Subject: [PATCH 3/3] Update documentation and changelog

---
 CHANGELOG.md                                  | 60 +++++++++----------
 README.md                                     |  2 +-
 .../choicesjs-stencil/interfaces.tsx          |  6 +-
 3 files changed, 31 insertions(+), 37 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0f9bf52..9b598f8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,38 +1,32 @@
 # 1.5.0
 
-- Update `choices.js` to version `9.0.1`. Changes:
-  - `hiddenState` className is removed.
-  - `itemOption` className is replaced by `itemChoice` className.
-  - New `selectedState` className is added.
-  - `fusejs.io` updates from `2.7.4` to version `3.4.6`. Changes:
-    - New options added to `FuseOptions`:
-      - `includeMateches`,
-      - `includeScore`,
-      - `findAllMatches`,
-      - `sortFn`,
-      - and `getFn`.
-  - Changes on `IchoicesProps`:
-    - `addItemFilterFn` renamed to `addItemFilter`. It also allows `string` and `RegExp` types.
-    - `sortFn` renamed to `sorter`.
-    - Added `uniqueItemText`.
-    - Added `customAddItemText`.
-    - Added `valueComparer`.
-  - Removed `ajax` on `IChoicesMethods`.
-- Update `@stencil/core` to version `1.12.7`.
-  - See: https://github.com/ionic-team/stencil/blob/master/CHANGELOG.md
-- Update other dev dependencies:
-  - `@babel/plugin-syntax-dynamic-import` to version `7.8.3`.
-  - `@stencil/sass` to version `1.3.1`.
-  - `@types/jest` to version `25.2.1`.
-  - `choices.js` to version `9.0.1`.
-  - `jest` to version `25.5.2`.
-  - `jest-dot-reporter` to version `1.0.14`.
-  - `rimraf` to version `3.0.2`.
-  - `tslint` to version `6.1.2`.
-  - `typedoc` to version `0.17.6`.
-  - `workbox-build` to version `5.1.3`.
-  - `fsevents` to version `2.1.3`. 
-- Rename `utils.tsx` to `utils.ts`
+- Updated `choices.js` to version `9.0.1`.
+  - [Release changes](https://github.com/jshjohnson/Choices/releases).
+- Updated `@stencil/core` to version `1.12.7`.
+  - [CHANGELOG](https://github.com/ionic-team/stencil/blob/master/CHANGELOG.md).
+- Updated demo application.
+- Changed web component interface:
+  - `ClassNames`:
+    - Added `selectedState`.
+    - Removed `hiddenState`.
+    - Replaced `itemOption` with `itemChoice`.
+  - `FuseOptions` (`fusejs.io` updates from `2.7.4` to version `3.4.6`):
+    - Added options:
+      - `includeMatches`.
+      - `includeScore`.
+      - `findAllMatches`.
+      - `sortFn`.
+      - `getFn`.
+  - `IchoicesProps`:
+    - Added properties:
+      - `uniqueItemText`.
+      - `customAddItemText`.
+      - `valueComparer`.
+    - Replaced properties:
+      - `addItemFilterFn` with `addItemFilter` (it allows `string` and `RegExp` types).
+      - `sortFn` with `sorter`.
+  - `IChoicesMethods`:
+    - Removed `ajax` method.
 
 # 1.4.0
 
diff --git a/README.md b/README.md
index 1d39c6d..cf8a914 100644
--- a/README.md
+++ b/README.md
@@ -29,7 +29,7 @@ The library is based on [ChoicesJS][choicesjs], but it is not bundle along with
 This dependency can be added to the bundle as external library, or it can just be added to the page via GitHub script:
 
 ```html
-<script src="https://rawgit.com/jshjohnson/Choices/v7.0.0/public/assets/scripts/choices.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/scripts/choices.js"></script>
 ```
 
 ## Installation and running
diff --git a/src/components/choicesjs-stencil/interfaces.tsx b/src/components/choicesjs-stencil/interfaces.tsx
index 4e1c54e..2af2798 100644
--- a/src/components/choicesjs-stencil/interfaces.tsx
+++ b/src/components/choicesjs-stencil/interfaces.tsx
@@ -31,7 +31,7 @@ export type ClassNames = {
 };
 
 /**
- * @link https://github.com/krisk/Fuse/tree/v2.7.4#weighted-search
+ * @link https://github.com/krisk/Fuse/blob/v3.6.1/src/typings.d.ts#L51
  */
 export type WeightedField = {
   [key: string]: any;
@@ -39,8 +39,8 @@ export type WeightedField = {
 };
 
 /**
- * @version 3.4.6
- * @link https://fusejs.io/api/options.html#basic-options
+ * @version 3.6.1
+ * @link https://github.com/krisk/Fuse/blob/v3.6.1/src/typings.d.ts#L43
  */
 export type FuseOptions = {
   id?: string;