Merge 80a95b21f1 into 5dbea2825a

.gitignore

@@ -10,3 +10,6 @@ tests/results
 coverage
 cypress/videos
 cypress/screenshots
+
+# for testing in smaller files
+public/_**.html

.nvmrc

@@ -1 +1 @@
-v12.13.1
+v20.11.1

.vscode/settings.json

@@ -61,7 +61,7 @@
     }
   ],
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "stylelint.validate": [
     "css",

README.md

@@ -221,6 +221,13 @@ Choices works with the following input types, referenced in the documentation as
 
 ## Configuration Options
 
+If you want to set global defaults for all instances of Choices, you can use the `Choices.defaults.options` object.
+This works with every option.
+
+```js
+Choices.defaults.options.noResultsText = 'No results found';
+```
+
 ### silent
 
 **Type:** `Boolean` **Default:** `false`
@@ -288,6 +295,13 @@ Pass an array of objects:
 }]
 ```
 
+### choicesContainer
+
+You can't place HTML directly inside option or select tags.
+This is a security feature, as it prevents XSS (cross-site scripting) attacks.
+If you want to do it regardless, you can set `allowHTML` to `true`, and set the choicesContainer to a valid query selector string or html element.
+The children of the `choicesContainer` will be used instead of the option tags inside the select.
+
 ### renderChoiceLimit
 
 **Type:** `Number` **Default:** `-1`

package.json

@@ -63,20 +63,21 @@
     "@types/mocha": "^10.0.1",
     "@types/sinon": "^10.0.13",
     "@types/sinon-chai": "^3.2.9",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^5.45.0",
+    "@typescript-eslint/parser": "^7.0.1",
     "autoprefixer": "^10.4.13",
     "babel-loader": "^9.1.0",
-    "bundlesize": "^0.18.1",
+    "bundlesize": "^0.2.1",
     "chai": "^4.3.7",
     "cross-env": "^7.0.3",
     "csso-cli": "^4.0.1",
-    "cypress": "11.2.0",
+    "cypress": "^13.6.4",
-    "eslint": "^8.28.0",
+    "eslint": "^8.56.0",
+    "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-compat": "4.0.2",
+    "eslint-plugin-compat": "^4.2.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.2.1",
@@ -87,12 +88,12 @@
     "jsdom": "^20.0.3",
     "lint-staged": "^13.0.4",
     "mocha": "^10.1.0",
-    "nodemon": "^2.0.20",
+    "nodemon": "^3.0.3",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
     "postcss": "^8.4.19",
     "postcss-cli": "^10.0.0",
-    "prettier": "^2.8.0",
+    "prettier": "^2.8.8",
     "sass": "^1.56.1",
     "sinon": "^15.0.0",
     "sinon-chai": "^3.7.0",

public/assets/scripts/choices.js

@@ -1,4 +1,4 @@
-/*! choices.js v10.2.0 | © 2022 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
+/*! choices.js v10.2.0 | © 2024 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory();
@@ -8,13 +8,13 @@
 		exports["Choices"] = factory();
 	else
 		root["Choices"] = factory();
-})(window, function() {
+})(window, () => {
-return /******/ (function() { // webpackBootstrap
+return /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 282:
+/***/ 792:
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
 
@@ -22,7 +22,7 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.clearChoices = exports.activateChoices = exports.filterChoices = exports.addChoice = void 0;
-var constants_1 = __webpack_require__(883);
+var constants_1 = __webpack_require__(655);
 var addChoice = function (_a) {
   var value = _a.value,
     label = _a.label,
@@ -73,8 +73,8 @@ exports.clearChoices = clearChoices;
 
 /***/ }),
 
-/***/ 783:
+/***/ 860:
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
 
@@ -82,7 +82,7 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.addGroup = void 0;
-var constants_1 = __webpack_require__(883);
+var constants_1 = __webpack_require__(655);
 var addGroup = function (_a) {
   var value = _a.value,
     id = _a.id,
@@ -100,8 +100,8 @@ exports.addGroup = addGroup;
 
 /***/ }),
 
-/***/ 464:
+/***/ 172:
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
 
@@ -109,7 +109,7 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.highlightItem = exports.removeItem = exports.addItem = void 0;
-var constants_1 = __webpack_require__(883);
+var constants_1 = __webpack_require__(655);
 var addItem = function (_a) {
   var value = _a.value,
     label = _a.label,
@@ -151,8 +151,8 @@ exports.highlightItem = highlightItem;
 
 /***/ }),
 
-/***/ 137:
+/***/ 900:
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
 
@@ -160,7 +160,7 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.setIsLoading = exports.resetTo = exports.clearAll = void 0;
-var constants_1 = __webpack_require__(883);
+var constants_1 = __webpack_require__(655);
 var clearAll = function () {
   return {
     type: constants_1.ACTION_TYPES.CLEAR_ALL
@@ -184,7 +184,7 @@ exports.setIsLoading = setIsLoading;
 
 /***/ }),
 
-/***/ 373:
+/***/ 884:
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -206,20 +206,20 @@ var __importDefault = this && this.__importDefault || function (mod) {
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-var deepmerge_1 = __importDefault(__webpack_require__(996));
+var deepmerge_1 = __importDefault(__webpack_require__(84));
 /* eslint-disable @typescript-eslint/no-explicit-any */
-var fuse_js_1 = __importDefault(__webpack_require__(221));
+var fuse_js_1 = __importDefault(__webpack_require__(488));
-var choices_1 = __webpack_require__(282);
+var choices_1 = __webpack_require__(792);
-var groups_1 = __webpack_require__(783);
+var groups_1 = __webpack_require__(860);
-var items_1 = __webpack_require__(464);
+var items_1 = __webpack_require__(172);
-var misc_1 = __webpack_require__(137);
+var misc_1 = __webpack_require__(900);
-var components_1 = __webpack_require__(520);
+var components_1 = __webpack_require__(296);
-var constants_1 = __webpack_require__(883);
+var constants_1 = __webpack_require__(655);
-var defaults_1 = __webpack_require__(789);
+var defaults_1 = __webpack_require__(615);
-var utils_1 = __webpack_require__(799);
+var utils_1 = __webpack_require__(920);
-var reducers_1 = __webpack_require__(655);
+var reducers_1 = __webpack_require__(576);
-var store_1 = __importDefault(__webpack_require__(744));
+var store_1 = __importDefault(__webpack_require__(432));
-var templates_1 = __importDefault(__webpack_require__(686));
+var templates_1 = __importDefault(__webpack_require__(516));
 /** @see {@link http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c} */
 var IS_IE11 = '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style;
 var USER_DEFAULTS = {};
@@ -236,6 +236,14 @@ var Choices = /** @class */function () {
       userConfig = {};
     }
     var _this = this;
+    var passedElement = typeof element === 'string' ? document.querySelector(element) : element;
+    if (!(passedElement instanceof HTMLInputElement || passedElement instanceof HTMLSelectElement)) {
+      throw TypeError('Expected one of the following types text|select-one|select-multiple');
+    }
+    // read from data attributes if necessary
+    if (userConfig.allowHTML === undefined && "allowHtml" in passedElement.dataset) {
+      userConfig.allowHTML = passedElement.dataset.allowHtml === 'true';
+    }
     if (userConfig.allowHTML === undefined) {
       console.warn('Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message.');
     }
@@ -251,10 +259,6 @@ var Choices = /** @class */function () {
     if (invalidConfigOptions.length) {
       console.warn('Unknown config option(s) passed', invalidConfigOptions.join(', '));
     }
-    var passedElement = typeof element === 'string' ? document.querySelector(element) : element;
-    if (!(passedElement instanceof HTMLInputElement || passedElement instanceof HTMLSelectElement)) {
-      throw TypeError('Expected one of the following types text|select-one|select-multiple');
-    }
     this._isTextElement = passedElement.type === constants_1.TEXT_TYPE;
     this._isSelectOneElement = passedElement.type === constants_1.SELECT_ONE_TYPE;
     this._isSelectMultipleElement = passedElement.type === constants_1.SELECT_MULTIPLE_TYPE;
@@ -329,7 +333,7 @@ var Choices = /** @class */function () {
       this.passedElement.options.forEach(function (option) {
         _this._presetChoices.push({
           value: option.value,
-          label: option.innerHTML,
+          label: option.innerHTML.trim(),
           selected: !!option.selected,
           disabled: option.disabled || option.parentNode.disabled,
           placeholder: option.value === '' || option.hasAttribute('placeholder'),
@@ -337,6 +341,35 @@ var Choices = /** @class */function () {
         });
       });
     }
+    /*
+    * If an additional option element is defined, then add its children as choices
+    *   data-choices-container
+    * is the attribute that defines the id of the additional option container
+    */
+    var choicesContainer = null;
+    var choiceContainerQuery = this.passedElement.element.dataset.choicesContainer || userConfig.choicesContainer;
+    if (choiceContainerQuery) {
+      if (choiceContainerQuery instanceof HTMLElement) {
+        choicesContainer = choiceContainerQuery;
+      } else {
+        choicesContainer = this.passedElement.element.closest(choiceContainerQuery) || document.getElementById(choiceContainerQuery) || document.querySelector(choiceContainerQuery);
+      }
+    }
+    if (choicesContainer) {
+      var disableAll_1 = choicesContainer.hasAttribute("disabled");
+      Array.from(choicesContainer.children).forEach(function (option) {
+        var value = option.getAttribute("value") || "";
+        _this._presetChoices.push({
+          value: value,
+          label: option.innerHTML.trim(),
+          selected: option.hasAttribute("selected"),
+          disabled: option.hasAttribute("disabled") || disableAll_1,
+          placeholder: value === '' || option.hasAttribute('placeholder'),
+          customProperties: (0, utils_1.parseCustomProperties)(option.dataset.customProperties)
+        });
+      });
+      choicesContainer.remove();
+    }
     this._render = this._render.bind(this);
     this._onFocus = this._onFocus.bind(this);
     this._onBlur = this._onBlur.bind(this);
@@ -356,7 +389,7 @@ var Choices = /** @class */function () {
     // If element has already been initialised with Choices, fail silently
     if (this.passedElement.isActive) {
       if (!this.config.silent) {
-        console.warn('Trying to initialise Choices on element already initialised', {
+        console.warn('Trying to initialize Choices on element already initialized', {
           element: element
         });
       }
@@ -2073,16 +2106,16 @@ exports["default"] = Choices;
 
 /***/ }),
 
-/***/ 613:
+/***/ 680:
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
 
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-var utils_1 = __webpack_require__(799);
+var utils_1 = __webpack_require__(920);
-var constants_1 = __webpack_require__(883);
+var constants_1 = __webpack_require__(655);
 var Container = /** @class */function () {
   function Container(_a) {
     var element = _a.element,
@@ -2213,8 +2246,8 @@ exports["default"] = Container;
 
 /***/ }),
 
-/***/ 217:
+/***/ 464:
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
 
@@ -2268,7 +2301,7 @@ exports["default"] = Dropdown;
 
 /***/ }),
 
-/***/ 520:
+/***/ 296:
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -2282,31 +2315,31 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.WrappedSelect = exports.WrappedInput = exports.List = exports.Input = exports.Container = exports.Dropdown = void 0;
-var dropdown_1 = __importDefault(__webpack_require__(217));
+var dropdown_1 = __importDefault(__webpack_require__(464));
 exports.Dropdown = dropdown_1.default;
-var container_1 = __importDefault(__webpack_require__(613));
+var container_1 = __importDefault(__webpack_require__(680));
 exports.Container = container_1.default;
-var input_1 = __importDefault(__webpack_require__(11));
+var input_1 = __importDefault(__webpack_require__(32));
 exports.Input = input_1.default;
-var list_1 = __importDefault(__webpack_require__(624));
+var list_1 = __importDefault(__webpack_require__(572));
 exports.List = list_1.default;
-var wrapped_input_1 = __importDefault(__webpack_require__(541));
+var wrapped_input_1 = __importDefault(__webpack_require__(528));
 exports.WrappedInput = wrapped_input_1.default;
-var wrapped_select_1 = __importDefault(__webpack_require__(982));
+var wrapped_select_1 = __importDefault(__webpack_require__(460));
 exports.WrappedSelect = wrapped_select_1.default;
 
 /***/ }),
 
-/***/ 11:
+/***/ 32:
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
 
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-var utils_1 = __webpack_require__(799);
+var utils_1 = __webpack_require__(920);
-var constants_1 = __webpack_require__(883);
+var constants_1 = __webpack_require__(655);
 var Input = /** @class */function () {
   function Input(_a) {
     var element = _a.element,
@@ -2437,15 +2470,15 @@ exports["default"] = Input;
 
 /***/ }),
 
-/***/ 624:
+/***/ 572:
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
 
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-var constants_1 = __webpack_require__(883);
+var constants_1 = __webpack_require__(655);
 var List = /** @class */function () {
   function List(_a) {
     var element = _a.element;
@@ -2523,15 +2556,15 @@ exports["default"] = List;
 
 /***/ }),
 
-/***/ 730:
+/***/ 292:
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
 
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-var utils_1 = __webpack_require__(799);
+var utils_1 = __webpack_require__(920);
 var WrappedElement = /** @class */function () {
   function WrappedElement(_a) {
     var element = _a.element,
@@ -2619,7 +2652,7 @@ exports["default"] = WrappedElement;
 
 /***/ }),
 
-/***/ 541:
+/***/ 528:
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -2652,7 +2685,7 @@ var __importDefault = this && this.__importDefault || function (mod) {
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-var wrapped_element_1 = __importDefault(__webpack_require__(730));
+var wrapped_element_1 = __importDefault(__webpack_require__(292));
 var WrappedInput = /** @class */function (_super) {
   __extends(WrappedInput, _super);
   function WrappedInput(_a) {
@@ -2683,7 +2716,7 @@ exports["default"] = WrappedInput;
 
 /***/ }),
 
-/***/ 982:
+/***/ 460:
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -2716,7 +2749,7 @@ var __importDefault = this && this.__importDefault || function (mod) {
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-var wrapped_element_1 = __importDefault(__webpack_require__(730));
+var wrapped_element_1 = __importDefault(__webpack_require__(292));
 var WrappedSelect = /** @class */function (_super) {
   __extends(WrappedSelect, _super);
   function WrappedSelect(_a) {
@@ -2778,8 +2811,8 @@ exports["default"] = WrappedSelect;
 
 /***/ }),
 
-/***/ 883:
+/***/ 655:
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
 
@@ -2830,8 +2863,8 @@ exports.SCROLLING_SPEED = 4;
 
 /***/ }),
 
-/***/ 789:
+/***/ 615:
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
 
@@ -2839,7 +2872,7 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.DEFAULT_CONFIG = exports.DEFAULT_CLASSNAMES = void 0;
-var utils_1 = __webpack_require__(799);
+var utils_1 = __webpack_require__(920);
 exports.DEFAULT_CLASSNAMES = {
   containerOuter: 'choices',
   containerInner: 'choices__inner',
@@ -2871,6 +2904,7 @@ exports.DEFAULT_CLASSNAMES = {
 exports.DEFAULT_CONFIG = {
   items: [],
   choices: [],
+  choicesContainer: null,
   silent: false,
   renderChoiceLimit: -1,
   maxItemCount: -1,
@@ -2925,8 +2959,8 @@ exports.DEFAULT_CONFIG = {
 
 /***/ }),
 
-/***/ 18:
+/***/ 28:
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
 
@@ -2936,8 +2970,8 @@ Object.defineProperty(exports, "__esModule", ({
 
 /***/ }),
 
-/***/ 978:
+/***/ 872:
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
 
@@ -2948,8 +2982,8 @@ Object.defineProperty(exports, "__esModule", ({
 
 /***/ }),
 
-/***/ 948:
+/***/ 8:
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
 
@@ -2959,8 +2993,8 @@ Object.defineProperty(exports, "__esModule", ({
 
 /***/ }),
 
-/***/ 359:
+/***/ 500:
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
 
@@ -2970,8 +3004,8 @@ Object.defineProperty(exports, "__esModule", ({
 
 /***/ }),
 
-/***/ 285:
+/***/ 408:
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
 
@@ -2981,8 +3015,8 @@ Object.defineProperty(exports, "__esModule", ({
 
 /***/ }),
 
-/***/ 533:
+/***/ 583:
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
 
@@ -2993,7 +3027,7 @@ Object.defineProperty(exports, "__esModule", ({
 
 /***/ }),
 
-/***/ 187:
+/***/ 252:
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -3020,26 +3054,26 @@ var __exportStar = this && this.__exportStar || function (m, exports) {
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-__exportStar(__webpack_require__(18), exports);
+__exportStar(__webpack_require__(28), exports);
-__exportStar(__webpack_require__(978), exports);
+__exportStar(__webpack_require__(872), exports);
-__exportStar(__webpack_require__(948), exports);
+__exportStar(__webpack_require__(8), exports);
-__exportStar(__webpack_require__(359), exports);
+__exportStar(__webpack_require__(500), exports);
-__exportStar(__webpack_require__(285), exports);
+__exportStar(__webpack_require__(408), exports);
-__exportStar(__webpack_require__(533), exports);
+__exportStar(__webpack_require__(583), exports);
-__exportStar(__webpack_require__(287), exports);
+__exportStar(__webpack_require__(688), exports);
-__exportStar(__webpack_require__(132), exports);
+__exportStar(__webpack_require__(317), exports);
-__exportStar(__webpack_require__(837), exports);
+__exportStar(__webpack_require__(608), exports);
-__exportStar(__webpack_require__(598), exports);
+__exportStar(__webpack_require__(520), exports);
-__exportStar(__webpack_require__(369), exports);
+__exportStar(__webpack_require__(980), exports);
-__exportStar(__webpack_require__(37), exports);
+__exportStar(__webpack_require__(104), exports);
-__exportStar(__webpack_require__(47), exports);
+__exportStar(__webpack_require__(832), exports);
-__exportStar(__webpack_require__(923), exports);
+__exportStar(__webpack_require__(708), exports);
-__exportStar(__webpack_require__(876), exports);
+__exportStar(__webpack_require__(224), exports);
 
 /***/ }),
 
-/***/ 287:
+/***/ 688:
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
 
@@ -3049,8 +3083,8 @@ Object.defineProperty(exports, "__esModule", ({
 
 /***/ }),
 
-/***/ 132:
+/***/ 317:
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
 
@@ -3060,8 +3094,8 @@ Object.defineProperty(exports, "__esModule", ({
 
 /***/ }),
 
-/***/ 837:
+/***/ 608:
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
 
@@ -3071,8 +3105,8 @@ Object.defineProperty(exports, "__esModule", ({
 
 /***/ }),
 
-/***/ 598:
+/***/ 520:
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
 
@@ -3082,8 +3116,8 @@ Object.defineProperty(exports, "__esModule", ({
 
 /***/ }),
 
-/***/ 37:
+/***/ 104:
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
 
@@ -3093,8 +3127,8 @@ Object.defineProperty(exports, "__esModule", ({
 
 /***/ }),
 
-/***/ 369:
+/***/ 980:
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
 
@@ -3104,8 +3138,8 @@ Object.defineProperty(exports, "__esModule", ({
 
 /***/ }),
 
-/***/ 47:
+/***/ 832:
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
 
@@ -3115,8 +3149,8 @@ Object.defineProperty(exports, "__esModule", ({
 
 /***/ }),
 
-/***/ 923:
+/***/ 708:
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
 
@@ -3126,8 +3160,8 @@ Object.defineProperty(exports, "__esModule", ({
 
 /***/ }),
 
-/***/ 876:
+/***/ 224:
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
 
@@ -3137,8 +3171,8 @@ Object.defineProperty(exports, "__esModule", ({
 
 /***/ }),
 
-/***/ 799:
+/***/ 920:
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
 
@@ -3315,7 +3349,7 @@ exports.parseCustomProperties = parseCustomProperties;
 
 /***/ }),
 
-/***/ 273:
+/***/ 512:
 /***/ (function(__unused_webpack_module, exports) {
 
 
@@ -3439,7 +3473,7 @@ exports["default"] = choices;
 
 /***/ }),
 
-/***/ 871:
+/***/ 548:
 /***/ (function(__unused_webpack_module, exports) {
 
 
@@ -3490,7 +3524,7 @@ exports["default"] = groups;
 
 /***/ }),
 
-/***/ 655:
+/***/ 576:
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -3504,12 +3538,12 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.defaultState = void 0;
-var redux_1 = __webpack_require__(791);
+var redux_1 = __webpack_require__(176);
-var items_1 = __importDefault(__webpack_require__(52));
+var items_1 = __importDefault(__webpack_require__(592));
-var groups_1 = __importDefault(__webpack_require__(871));
+var groups_1 = __importDefault(__webpack_require__(548));
-var choices_1 = __importDefault(__webpack_require__(273));
+var choices_1 = __importDefault(__webpack_require__(512));
-var loading_1 = __importDefault(__webpack_require__(502));
+var loading_1 = __importDefault(__webpack_require__(264));
-var utils_1 = __webpack_require__(799);
+var utils_1 = __webpack_require__(920);
 exports.defaultState = {
   groups: [],
   items: [],
@@ -3539,7 +3573,7 @@ exports["default"] = rootReducer;
 
 /***/ }),
 
-/***/ 52:
+/***/ 592:
 /***/ (function(__unused_webpack_module, exports) {
 
 
@@ -3620,8 +3654,8 @@ exports["default"] = items;
 
 /***/ }),
 
-/***/ 502:
+/***/ 264:
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
 
@@ -3652,7 +3686,7 @@ exports["default"] = general;
 
 /***/ }),
 
-/***/ 744:
+/***/ 432:
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -3675,8 +3709,8 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 /* eslint-disable @typescript-eslint/no-explicit-any */
-var redux_1 = __webpack_require__(791);
+var redux_1 = __webpack_require__(176);
-var index_1 = __importDefault(__webpack_require__(655));
+var index_1 = __importDefault(__webpack_require__(576));
 var Store = /** @class */function () {
   function Store() {
     this._store = (0, redux_1.createStore)(index_1.default, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
@@ -3852,8 +3886,8 @@ exports["default"] = Store;
 
 /***/ }),
 
-/***/ 686:
+/***/ 516:
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
 
@@ -4111,8 +4145,8 @@ exports["default"] = templates;
 
 /***/ }),
 
-/***/ 996:
+/***/ 84:
-/***/ (function(module) {
+/***/ ((module) => {
 
 
 
@@ -4251,12 +4285,12 @@ module.exports = deepmerge_1;
 
 /***/ }),
 
-/***/ 221:
+/***/ 488:
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": function() { return /* binding */ Fuse; }
+/* harmony export */   "default": () => (/* binding */ Fuse)
 /* harmony export */ });
 /**
  * Fuse.js v6.6.2 - Lightweight fuzzy-search (http://fusejs.io)
@@ -6040,56 +6074,56 @@ Fuse.config = Config;
 
 /***/ }),
 
-/***/ 791:
+/***/ 176:
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "__DO_NOT_USE__ActionTypes": function() { return /* binding */ ActionTypes; },
+  __DO_NOT_USE__ActionTypes: () => (/* binding */ ActionTypes),
-  "applyMiddleware": function() { return /* binding */ applyMiddleware; },
+  applyMiddleware: () => (/* binding */ applyMiddleware),
-  "bindActionCreators": function() { return /* binding */ bindActionCreators; },
+  bindActionCreators: () => (/* binding */ bindActionCreators),
-  "combineReducers": function() { return /* binding */ combineReducers; },
+  combineReducers: () => (/* binding */ combineReducers),
-  "compose": function() { return /* binding */ compose; },
+  compose: () => (/* binding */ compose),
-  "createStore": function() { return /* binding */ createStore; },
+  createStore: () => (/* binding */ createStore),
-  "legacy_createStore": function() { return /* binding */ legacy_createStore; }
+  legacy_createStore: () => (/* binding */ legacy_createStore)
 });
 
 ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/typeof.js
-function _typeof(obj) {
+function _typeof(o) {
   "@babel/helpers - typeof";
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof obj;
+    return typeof o;
-  } : function (obj) {
+  } : function (o) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(obj);
+  }, _typeof(o);
 }
 ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/toPrimitive.js
 
-function _toPrimitive(input, hint) {
+function toPrimitive(t, r) {
-  if (_typeof(input) !== "object" || input === null) return input;
+  if ("object" != _typeof(t) || !t) return t;
-  var prim = input[Symbol.toPrimitive];
+  var e = t[Symbol.toPrimitive];
-  if (prim !== undefined) {
+  if (void 0 !== e) {
-    var res = prim.call(input, hint || "default");
+    var i = e.call(t, r || "default");
-    if (_typeof(res) !== "object") return res;
+    if ("object" != _typeof(i)) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (hint === "string" ? String : Number)(input);
+  return ("string" === r ? String : Number)(t);
 }
 ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/toPropertyKey.js
 
 
-function _toPropertyKey(arg) {
+function toPropertyKey(t) {
-  var key = _toPrimitive(arg, "string");
+  var i = toPrimitive(t, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
+  return "symbol" == _typeof(i) ? i : String(i);
 }
 ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/defineProperty.js
 
 function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
+  key = toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -6104,26 +6138,26 @@ function _defineProperty(obj, key, value) {
 }
 ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js
 
-function ownKeys(object, enumerableOnly) {
+function ownKeys(e, r) {
-  var keys = Object.keys(object);
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
+    var o = Object.getOwnPropertySymbols(e);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
+    r && (o = o.filter(function (r) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
-    })), keys.push.apply(keys, symbols);
+    })), t.push.apply(t, o);
   }
-  return keys;
+  return t;
 }
-function _objectSpread2(target) {
+function _objectSpread2(e) {
-  for (var i = 1; i < arguments.length; i++) {
+  for (var r = 1; r < arguments.length; r++) {
-    var source = null != arguments[i] ? arguments[i] : {};
+    var t = null != arguments[r] ? arguments[r] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
-      _defineProperty(target, key, source[key]);
+      _defineProperty(e, r, t[r]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
   }
-  return target;
+  return e;
 }
 ;// CONCATENATED MODULE: ./node_modules/redux/es/redux.js
 
@@ -6858,56 +6892,59 @@ if (false) {}
 /******/ 	
 /************************************************************************/
 /******/ 	/* webpack/runtime/compat get default export */
-/******/ 	!function() {
+/******/ 	(() => {
 /******/ 		// getDefaultExport function for compatibility with non-harmony modules
-/******/ 		__webpack_require__.n = function(module) {
+/******/ 		__webpack_require__.n = (module) => {
 /******/ 			var getter = module && module.__esModule ?
-/******/ 				function() { return module['default']; } :
+/******/ 				() => (module['default']) :
-/******/ 				function() { return module; };
+/******/ 				() => (module);
 /******/ 			__webpack_require__.d(getter, { a: getter });
 /******/ 			return getter;
 /******/ 		};
-/******/ 	}();
+/******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/define property getters */
-/******/ 	!function() {
+/******/ 	(() => {
 /******/ 		// define getter functions for harmony exports
-/******/ 		__webpack_require__.d = function(exports, definition) {
+/******/ 		__webpack_require__.d = (exports, definition) => {
 /******/ 			for(var key in definition) {
 /******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
 /******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
 /******/ 				}
 /******/ 			}
 /******/ 		};
-/******/ 	}();
+/******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
-/******/ 	!function() {
+/******/ 	(() => {
-/******/ 		__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
-/******/ 	}();
+/******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/make namespace object */
-/******/ 	!function() {
+/******/ 	(() => {
 /******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = function(exports) {
+/******/ 		__webpack_require__.r = (exports) => {
 /******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 /******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 /******/ 			}
 /******/ 			Object.defineProperty(exports, '__esModule', { value: true });
 /******/ 		};
-/******/ 	}();
+/******/ 	})();
 /******/ 	
 /************************************************************************/
 var __webpack_exports__ = {};
 // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
-!function() {
+(() => {
-/* harmony import */ var _scripts_choices__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(373);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _scripts_choices__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(884);
 /* harmony import */ var _scripts_choices__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_scripts_choices__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _scripts_interfaces__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(187);
+/* harmony import */ var _scripts_interfaces__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(252);
 /* harmony import */ var _scripts_interfaces__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_scripts_interfaces__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _scripts_constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(883);
+/* harmony import */ var _scripts_constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(655);
-/* harmony import */ var _scripts_defaults__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(789);
+/* harmony import */ var _scripts_defaults__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(615);
-/* harmony import */ var _scripts_templates__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(686);
+/* harmony import */ var _scripts_templates__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(516);
 
 
 
@@ -6915,9 +6952,10 @@ var __webpack_exports__ = {};
 
 
 
-/* harmony default export */ __webpack_exports__["default"] = ((_scripts_choices__WEBPACK_IMPORTED_MODULE_0___default()));
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((_scripts_choices__WEBPACK_IMPORTED_MODULE_0___default()));
+
+})();
 
-}();
 __webpack_exports__ = __webpack_exports__["default"];
 /******/ 	return __webpack_exports__;
 /******/ })()

public/assets/scripts/choices.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! choices.js v10.2.0 | © 2022 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
+/*! choices.js v10.2.0 | © 2024 Josh Johnson | https://github.com/jshjohnson/Choices#readme */

public/assets/styles/base.css

@@ -178,4 +178,21 @@ label + p {
   margin-bottom: 24px;
 }
 
+.d-none {
+  display: none;
+}
+
+.pill-badge {
+  float: right;
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 2.5px;
+  border: 1px solid #00bcd4;
+  background-color: lightblue;
+  color: #333;
+  font-size: 12px;
+  font-weight: 600;
+  margin-right: 8px;
+}
+
 /* =====  End of Section comment block  ====== */

public/assets/styles/base.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/styles/base.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAYA;EACE;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,eAtFiB;;;AAyFnB;AAAA;EAEE,WA1FoB;;;AA6FtB;AAAA;EAEE,WA9FoB;;;AAiGtB;AAAA;EAEE,WAlGoB;;;AAqGtB;AAAA;EAEE,WAtGoB;;;AAyGtB;AAAA;EAEE,WA1GoB;;;AA6GtB;AAAA;EAEE,WA9GoB;;;AAiHtB;EACE;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;;AAIJ;EACE;EACA,SAxIiB;EAyIjB;;AAEA;AAAA;AAAA;EAGE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE,eArKiB;;;AAwKnB;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,eArLiB;;;AAwLnB","file":"base.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/styles/base.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAYA;EACE;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,eAtFiB;;;AAyFnB;AAAA;EAEE,WA1FoB;;;AA6FtB;AAAA;EAEE,WA9FoB;;;AAiGtB;AAAA;EAEE,WAlGoB;;;AAqGtB;AAAA;EAEE,WAtGoB;;;AAyGtB;AAAA;EAEE,WA1GoB;;;AA6GtB;AAAA;EAEE,WA9GoB;;;AAiHtB;EACE;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;;AAIJ;EACE;EACA,SAxIiB;EAyIjB;;AAEA;AAAA;AAAA;EAGE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE,eArKiB;;;AAwKnB;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,eArLiB;;;AAwLnB;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF","file":"base.css"}

public/assets/styles/base.min.css

@@ -1 +1 @@
-*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,::after,::before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%;height:100%}body{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}hr,label{display:block}label,p{margin-bottom:8px}label{font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0}hr{margin:30px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:#f9f9f9;padding:12px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;-webkit-appearance:none;appearance:none;margin-bottom:24px}.h1,h1{font-size:32px}.h2,h2{font-size:24px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:16px}.h6,h6{font-size:14px}label+p{margin-top:-4px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width:620px){.container{padding:0}}.section{background-color:#fff;padding:24px;color:#333}.section a,.section a:focus,.section a:visited{color:#00bcd4}.logo{display:block;margin-bottom:12px}.logo-img{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}.push-bottom{margin-bottom:24px}.zero-bottom{margin-bottom:0}.zero-top{margin-top:0}.text-center{text-align:center}[data-test-hook]{margin-bottom:24px}
+*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,::after,::before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%;height:100%}body{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}hr,label{display:block}label,p{margin-bottom:8px}label{font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0}hr{margin:30px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:#f9f9f9;padding:12px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;-webkit-appearance:none;appearance:none;margin-bottom:24px}.h1,h1{font-size:32px}.h2,h2{font-size:24px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:16px}.h6,h6{font-size:14px}label+p{margin-top:-4px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width:620px){.container{padding:0}}.section{background-color:#fff;padding:24px;color:#333}.section a,.section a:focus,.section a:visited{color:#00bcd4}.logo{display:block;margin-bottom:12px}.logo-img{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}.push-bottom{margin-bottom:24px}.zero-bottom{margin-bottom:0}.zero-top{margin-top:0}.text-center{text-align:center}[data-test-hook]{margin-bottom:24px}.d-none{display:none}.pill-badge{float:right;display:inline-block;padding:4px 8px;border-radius:2.5px;border:1px solid #00bcd4;background-color:#add8e6;color:#333;font-size:12px;font-weight:600;margin-right:8px}

public/assets/styles/choices.css

@@ -337,4 +337,8 @@
   opacity: 0.5;
 }
 
+.d-none {
+  display: none;
+}
+
 /* =====  End of Choices  ====== */

public/assets/styles/choices.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/styles/choices.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AA2BA;EACE;EACA;EACA,eApBkB;EAqBlB,WAxBqB;;AA0BrB;EACE;;AAGF;EACE;;AAGF;EACE;;AAIA;AAAA;EAEE,kBAlCsB;EAmCtB;EACA;;AAEF;EACE;;AAIJ;EACE;;;AAIJ;EACE;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE,kBApDyB;EAqDzB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAGJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;;AAOJ;AAAA;EACE;;AAEF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA,aA5HoB;EA6HpB;EACA;EACA,kBA9HiB;EA+HjB,iBAjIuB;EAkIvB,OAlIuB;EAmIvB;EACA;EACA;;AAEA;AAAA;AAAA;EAEE;;;AAKN;EACE;EACA;EACA;EACA,kBA1JiB;EA2JjB;EACA;EACA,eA/JsB;EAgKtB,WAnKqB;EAoKrB;EACA;;AAEA;EAEE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;;AAOF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;;AAIJ;EACE;;AACA;EACE;EACA;EACA,eA9MyB;EA+MzB;EACA,WAnNmB;EAoNnB;EACA;EACA;EACA,kBA9MoB;EA+MpB;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA,SApOgB;EAqOhB;EACA;EACA,kBAjP0B;EAkP1B;EACA;EACA;EACA,2BAzPsB;EA0PtB,4BA1PsB;EA2PtB;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA,WA3RmB;;AA6RnB;EACE;;AAIF;EADF;IAEI;;EAEA;IACE;IACA,WAtSe;IAuSf;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAEA;IACE;IACA;;;AAKN;EACE;;AAEA;EACE;;;AAUR;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA,WAxVqB;EAyVrB;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA,kBA3WiB;EA4WjB,WAjXqB;EAkXrB;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAIE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF","file":"choices.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/styles/choices.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AA2BA;EACE;EACA;EACA,eApBkB;EAqBlB,WAxBqB;;AA0BrB;EACE;;AAGF;EACE;;AAGF;EACE;;AAIA;AAAA;EAEE,kBAlCsB;EAmCtB;EACA;;AAEF;EACE;;AAIJ;EACE;;;AAIJ;EACE;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE,kBApDyB;EAqDzB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAGJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;;AAOJ;AAAA;EACE;;AAEF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA,aA5HoB;EA6HpB;EACA;EACA,kBA9HiB;EA+HjB,iBAjIuB;EAkIvB,OAlIuB;EAmIvB;EACA;EACA;;AAEA;AAAA;AAAA;EAEE;;;AAKN;EACE;EACA;EACA;EACA,kBA1JiB;EA2JjB;EACA;EACA,eA/JsB;EAgKtB,WAnKqB;EAoKrB;EACA;;AAEA;EAEE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;;AAOF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;;AAIJ;EACE;;AACA;EACE;EACA;EACA,eA9MyB;EA+MzB;EACA,WAnNmB;EAoNnB;EACA;EACA;EACA,kBA9MoB;EA+MpB;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA,SApOgB;EAqOhB;EACA;EACA,kBAjP0B;EAkP1B;EACA;EACA;EACA,2BAzPsB;EA0PtB,4BA1PsB;EA2PtB;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA,WA3RmB;;AA6RnB;EACE;;AAIF;EADF;IAEI;;EAEA;IACE;IACA,WAtSe;IAuSf;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAEA;IACE;IACA;;;AAKN;EACE;;AAEA;EACE;;;AAUR;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA,WAxVqB;EAyVrB;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA,kBA3WiB;EA4WjB,WAjXqB;EAkXrB;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAIE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF","file":"choices.css"}

public/index.html

@@ -311,6 +311,22 @@
           <option value="Choice 3">Choice 3</option>
         </select>
 
+        <select
+          class="form-control"
+          name="choices-single-allow-html"
+          id="choices-single-allow-html"
+          placeholder="This is a search placeholder"
+          data-choices-container="choices-choices"
+        >
+        </select>
+
+        <div id="choices-choices">
+          <div value="">This is a placeholder<a>hi</a></div>
+          <div value="Choice 1">Choice 1</div>
+          <div value="Choice 2">Choice 2</div>
+          <div value="Choice 3">Choice 3</div>
+        </div>
+
         <p>
           <small
             >If the following two examples do not load, the Discogs rate limit
@@ -558,6 +574,10 @@
           });
         }
 
+        var textAllowHtml = new Choices('#choices-single-allow-html', {
+          allowHTML: true,
+        });
+
         var textRemove = new Choices(
           document.getElementById('choices-text-remove-button'),
           {

public/types/src/scripts/defaults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../src/scripts/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,eAAO,MAAM,kBAAkB,EAAE,UA2BhC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OA+C5B,CAAC"}
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../src/scripts/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,eAAO,MAAM,kBAAkB,EAAE,UA2BhC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OAgD5B,CAAC"}

public/types/src/scripts/interfaces/options.d.ts

@@ -80,6 +80,13 @@ export interface Options {
      * @default []
      */
     choices: Choice[];
+    /**
+     * You can't place HTML directly inside option or select tags.
+     * This is a security feature, as it prevents XSS (cross-site scripting) attacks.
+     * If you want to do it regardless, you can set `allowHTML` to `true`, and set the choicesContainer to a valid query selector string or html element.
+     * The children of the `choicesContainer` will be used instead of the option tags inside the select.
+     */
+    choicesContainer: HTMLElement | string | null;
     /**
      * The amount of choices to be rendered within the dropdown list `("-1" indicates no limit)`. This is useful if you have a lot of choices where it is easier for a user to use the search area to find a choice.
      *

public/types/src/scripts/interfaces/options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/interfaces/options.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/interfaces/options.ts"],"names":[],"mappings":"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"}

src/scripts/choices.ts

@@ -152,6 +152,27 @@ class Choices implements Choices {
       | HTMLSelectElement = '[data-choice]',
     userConfig: Partial<Options> = {},
   ) {
+
+
+    const passedElement =
+      typeof element === 'string' ? document.querySelector(element) : element;
+
+    if (
+      !(
+        passedElement instanceof HTMLInputElement ||
+        passedElement instanceof HTMLSelectElement
+      )
+    ) {
+      throw TypeError(
+        'Expected one of the following types text|select-one|select-multiple',
+      );
+    }
+
+    // read from data attributes if necessary
+    if (userConfig.allowHTML === undefined && "allowHtml" in passedElement.dataset) {
+      userConfig.allowHTML = passedElement.dataset.allowHtml === 'true';
+    }
+
     if (userConfig.allowHTML === undefined) {
       console.warn(
         'Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message.',
@@ -173,20 +194,6 @@ class Choices implements Choices {
       );
     }
 
-    const passedElement =
-      typeof element === 'string' ? document.querySelector(element) : element;
-
-    if (
-      !(
-        passedElement instanceof HTMLInputElement ||
-        passedElement instanceof HTMLSelectElement
-      )
-    ) {
-      throw TypeError(
-        'Expected one of the following types text|select-one|select-multiple',
-      );
-    }
-
     this._isTextElement = passedElement.type === TEXT_TYPE;
     this._isSelectOneElement = passedElement.type === SELECT_ONE_TYPE;
     this._isSelectMultipleElement = passedElement.type === SELECT_MULTIPLE_TYPE;
@@ -281,12 +288,13 @@ class Choices implements Choices {
       );
       this._presetItems = (this._presetItems as string[]).concat(splitValues);
     }
+
     // Create array of choices from option elements
     if ((this.passedElement as WrappedSelect).options) {
       (this.passedElement as WrappedSelect).options.forEach((option) => {
         this._presetChoices.push({
           value: option.value,
-          label: option.innerHTML,
+          label: option.innerHTML.trim(),
           selected: !!option.selected,
           disabled: option.disabled || option.parentNode.disabled,
           placeholder:
@@ -298,6 +306,42 @@ class Choices implements Choices {
       });
     }
 
+    /*
+    * If an additional option element is defined, then add its children as choices
+    *   data-choices-container
+    * is the attribute that defines the id of the additional option container
+    */
+
+    let choicesContainer: null | HTMLElement = null;
+
+    let choiceContainerQuery = this.passedElement.element.dataset.choicesContainer || userConfig.choicesContainer;
+    if (choiceContainerQuery) {
+      if (choiceContainerQuery instanceof HTMLElement) {
+        choicesContainer = choiceContainerQuery;
+      } else {
+        choicesContainer = this.passedElement.element.closest(choiceContainerQuery) || document.getElementById(choiceContainerQuery) || document.querySelector(choiceContainerQuery);
+      }
+    }
+
+    if (choicesContainer ) {
+      const disableAll = choicesContainer.hasAttribute("disabled");
+
+      Array.from(choicesContainer.children).forEach((option: HTMLElement) => {
+        let value = option.getAttribute("value") || "";
+
+        this._presetChoices.push({
+          value: value,
+          label: option.innerHTML.trim(),
+          selected: option.hasAttribute("selected"),
+          disabled: option.hasAttribute("disabled") || disableAll,
+          placeholder: value === '' || option.hasAttribute('placeholder'),
+          customProperties: parseCustomProperties(option.dataset.customProperties),
+        });
+      });
+
+      choicesContainer.remove();
+    }
+
     this._render = this._render.bind(this);
     this._onFocus = this._onFocus.bind(this);
     this._onBlur = this._onBlur.bind(this);
@@ -319,7 +363,7 @@ class Choices implements Choices {
     if (this.passedElement.isActive) {
       if (!this.config.silent) {
         console.warn(
-          'Trying to initialise Choices on element already initialised',
+          'Trying to initialize Choices on element already initialized',
           { element },
         );
       }

src/scripts/defaults.ts

@@ -34,6 +34,7 @@ export const DEFAULT_CLASSNAMES: ClassNames = {
 export const DEFAULT_CONFIG: Options = {
   items: [],
   choices: [],
+  choicesContainer: null,
   silent: false,
   renderChoiceLimit: -1,
   maxItemCount: -1,

src/scripts/interfaces/options.ts

@@ -84,6 +84,14 @@ export interface Options {
    */
   choices: Choice[];
 
+  /**
+   * You can't place HTML directly inside option or select tags.
+   * This is a security feature, as it prevents XSS (cross-site scripting) attacks.
+   * If you want to do it regardless, you can set `allowHTML` to `true`, and set the choicesContainer to a valid query selector string or html element.
+   * The children of the `choicesContainer` will be used instead of the option tags inside the select.
+   */
+  choicesContainer: HTMLElement | string | null;
+
   /**
    * The amount of choices to be rendered within the dropdown list `("-1" indicates no limit)`. This is useful if you have a lot of choices where it is easier for a user to use the search area to find a choice.
    *

src/styles/base.scss

@@ -186,4 +186,21 @@ label + p {
   margin-bottom: $global-guttering;
 }
 
+.d-none {
+  display: none;
+}
+
+.pill-badge {
+  float: right;
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 2.5px;
+  border: 1px solid #00bcd4;
+  background-color: lightblue;
+  color: #333;
+  font-size: 12px;
+  font-weight: 600;
+  margin-right: 8px;
+}
+
 /* =====  End of Section comment block  ====== */

src/styles/choices.scss

@@ -410,4 +410,8 @@ $choices-z-index: 1 !default;
   opacity: 0.5;
 }
 
+.d-none {
+  display: none;
+}
+
 /* =====  End of Choices  ====== */