add missing classname conversion in templates

public/assets/scripts/choices.js

@@ -3894,7 +3894,7 @@ var templates = {
   containerOuter: function (_a, dir, isSelectElement, isSelectOneElement, searchEnabled, passedElementType, labelId) {
     var containerOuter = _a.classNames.containerOuter;
     var div = Object.assign(document.createElement('div'), {
-      className: containerOuter
+      className: (0, utils_1.getClassNames)(containerOuter).join(' ')
     });
     div.dataset.type = passedElementType;
     if (dir) {
@@ -3919,7 +3919,7 @@ var templates = {
   containerInner: function (_a) {
     var containerInner = _a.classNames.containerInner;
     return Object.assign(document.createElement('div'), {
-      className: containerInner
+      className: (0, utils_1.getClassNames)(containerInner).join(' ')
     });
   },
   itemList: function (_a, isSelectOneElement) {
@@ -3928,7 +3928,7 @@ var templates = {
       listSingle = _b.listSingle,
       listItems = _b.listItems;
     return Object.assign(document.createElement('div'), {
-      className: "".concat(list, " ").concat(isSelectOneElement ? listSingle : listItems)
+      className: "".concat((0, utils_1.getClassNames)(list).join(' '), " ").concat(isSelectOneElement ? (0, utils_1.getClassNames)(listSingle).join(' ') : (0, utils_1.getClassNames)(listItems).join(' '))
     });
   },
   placeholder: function (_a, value) {
@@ -3936,7 +3936,7 @@ var templates = {
     var allowHTML = _a.allowHTML,
       placeholder = _a.classNames.placeholder;
     return Object.assign(document.createElement('div'), (_b = {
-      className: placeholder
+      className: (0, utils_1.getClassNames)(placeholder).join(' ')
     }, _b[allowHTML ? 'innerHTML' : 'innerText'] = value, _b));
   },
   item: function (_a, _b, removeItemButton) {
@@ -3957,7 +3957,7 @@ var templates = {
       highlighted = _b.highlighted,
       isPlaceholder = _b.placeholder;
     var div = Object.assign(document.createElement('div'), (_c = {
-      className: item
+      className: (0, utils_1.getClassNames)(item).join(' ')
     }, _c[allowHTML ? 'innerHTML' : 'innerText'] = label, _c));
     Object.assign(div.dataset, {
       item: '',
@@ -3984,7 +3984,7 @@ var templates = {
       var REMOVE_ITEM_TEXT = 'Remove item';
       var removeButton = Object.assign(document.createElement('button'), (_g = {
         type: 'button',
-        className: button
+        className: (0, utils_1.getClassNames)(button).join(' ')
       }, _g[allowHTML ? 'innerHTML' : 'innerText'] = REMOVE_ITEM_TEXT, _g));
       removeButton.setAttribute('aria-label', "".concat(REMOVE_ITEM_TEXT, ": '").concat(value, "'"));
       removeButton.dataset.button = '';
@@ -3995,7 +3995,7 @@ var templates = {
   choiceList: function (_a, isSelectOneElement) {
     var list = _a.classNames.list;
     var div = Object.assign(document.createElement('div'), {
-      className: list
+      className: (0, utils_1.getClassNames)(list).join(' ')
     });
     if (!isSelectOneElement) {
       div.setAttribute('aria-multiselectable', 'true');
@@ -4014,7 +4014,7 @@ var templates = {
       value = _b.value,
       disabled = _b.disabled;
     var div = Object.assign(document.createElement('div'), {
-      className: "".concat(group, " ").concat(disabled ? itemDisabled : '')
+      className: "".concat((0, utils_1.getClassNames)(group).join(' '), " ").concat(disabled ? (0, utils_1.getClassNames)(itemDisabled).join(' ') : '')
     });
     div.setAttribute('role', 'group');
     Object.assign(div.dataset, {
@@ -4026,7 +4026,7 @@ var templates = {
       div.setAttribute('aria-disabled', 'true');
     }
     div.appendChild(Object.assign(document.createElement('div'), (_c = {
-      className: groupHeading
+      className: (0, utils_1.getClassNames)(groupHeading).join(' ')
     }, _c[allowHTML ? 'innerHTML' : 'innerText'] = value, _c)));
     return div;
   },
@@ -4050,7 +4050,7 @@ var templates = {
       isPlaceholder = _b.placeholder;
     var div = Object.assign(document.createElement('div'), (_c = {
       id: elementId
-    }, _c[allowHTML ? 'innerHTML' : 'innerText'] = label, _c.className = "".concat(item, " ").concat(itemChoice), _c));
+    }, _c[allowHTML ? 'innerHTML' : 'innerText'] = label, _c.className = "".concat((0, utils_1.getClassNames)(item).join(' '), " ").concat((0, utils_1.getClassNames)(itemChoice).join(' ')), _c));
     if (isSelected) {
       (_d = div.classList).add.apply(_d, (0, utils_1.getClassNames)(selectedState));
     }
@@ -4081,7 +4081,7 @@ var templates = {
     var inp = Object.assign(document.createElement('input'), {
       type: 'search',
       name: 'search_terms',
-      className: "".concat(input, " ").concat(inputCloned),
+      className: "".concat((0, utils_1.getClassNames)(input).join(' '), " ").concat((0, utils_1.getClassNames)(inputCloned).join(' ')),
       autocomplete: 'off',
       autocapitalize: 'off',
       spellcheck: false
@@ -4112,7 +4112,7 @@ var templates = {
     if (type === void 0) {
       type = '';
     }
-    var classes = [item, itemChoice];
+    var classes = __spreadArray(__spreadArray([], (0, utils_1.getClassNames)(item), true), (0, utils_1.getClassNames)(itemChoice), true);
     if (type === 'no-choices') {
       classes.push(noChoices);
     } else if (type === 'no-results') {

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

@@ -1 +1 @@
-{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../../../../src/scripts/templates.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAIrE,KAAK,eAAe,GAAG,MAAM,CAAC,YAAY,GAAG,WAAW,EAAE,GAAG,CAAC,CAAC;AAE/D,QAAA,MAAM,SAAS;uDAEyB,eAAe,OAC9C,WAAW,CAAC,KAAK,CAAC,mBACN,OAAO,sBACJ,OAAO,iBACZ,OAAO,qBACH,iBAAiB,WAC3B,MAAM,GACd,cAAc;wDAiCd,eAAe,GAAG,cAAc;8DAOgB,eAAe,sBAC5C,OAAO,GAC1B,cAAc;4DAO6B,eAAe,SACpD,MAAM,GACZ,cAAc;uGAiBZ,eAAe,sGAUf,IAAI,oBACW,OAAO,GACxB,cAAc;yCAuDW,eAAe,sBACrB,OAAO,GAC1B,cAAc;mFAiBZ,eAAe,2BACO,KAAK,GAC7B,cAAc;wHAsCZ,eAAe,qHAUf,MAAM,cACG,MAAM,GACjB,cAAc;kDAqCyB,eAAe,oBACrC,MAAM,GACvB,gBAAgB;sDAmBhB,eAAe,GAAG,cAAc;mFAa9B,eAAe,aACP,MAAM,SACX,YAAY,GAAG,YAAY,GAAG,EAAE,GACrC,cAAc;kEAqBd,IAAI,GAAG,iBAAiB;CAW5B,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../../../../src/scripts/templates.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAIrE,KAAK,eAAe,GAAG,MAAM,CAAC,YAAY,GAAG,WAAW,EAAE,GAAG,CAAC,CAAC;AAE/D,QAAA,MAAM,SAAS;uDAEyB,eAAe,OAC9C,WAAW,CAAC,KAAK,CAAC,mBACN,OAAO,sBACJ,OAAO,iBACZ,OAAO,qBACH,iBAAiB,WAC3B,MAAM,GACd,cAAc;wDAiCd,eAAe,GAAG,cAAc;8DAOgB,eAAe,sBAC5C,OAAO,GAC1B,cAAc;4DAW6B,eAAe,SACpD,MAAM,GACZ,cAAc;uGAiBZ,eAAe,sGAUf,IAAI,oBACW,OAAO,GACxB,cAAc;yCAuDW,eAAe,sBACrB,OAAO,GAC1B,cAAc;mFAiBZ,eAAe,2BACO,KAAK,GAC7B,cAAc;wHAwCZ,eAAe,qHAUf,MAAM,cACG,MAAM,GACjB,cAAc;kDAuCyB,eAAe,oBACrC,MAAM,GACvB,gBAAgB;sDAqBhB,eAAe,GAAG,cAAc;mFAa9B,eAAe,aACP,MAAM,SACX,YAAY,GAAG,YAAY,GAAG,EAAE,GACrC,cAAc;kEAqBd,IAAI,GAAG,iBAAiB;CAW5B,CAAC;AAEF,eAAe,SAAS,CAAC"}

src/scripts/templates.ts

@@ -23,7 +23,7 @@ const templates = {
     labelId: string,
   ): HTMLDivElement {
     const div = Object.assign(document.createElement('div'), {
-      className: containerOuter,
+      className: getClassNames(containerOuter).join(' '),
     });
 
     div.dataset.type = passedElementType;
@@ -56,7 +56,7 @@ const templates = {
     classNames: { containerInner },
   }: TemplateOptions): HTMLDivElement {
     return Object.assign(document.createElement('div'), {
-      className: containerInner,
+      className: getClassNames(containerInner).join(' '),
     });
   },
 
@@ -65,7 +65,11 @@ const templates = {
     isSelectOneElement: boolean,
   ): HTMLDivElement {
     return Object.assign(document.createElement('div'), {
-      className: `${list} ${isSelectOneElement ? listSingle : listItems}`,
+      className: `${getClassNames(list).join(' ')} ${
+        isSelectOneElement
+          ? getClassNames(listSingle).join(' ')
+          : getClassNames(listItems).join(' ')
+      }`,
     });
   },
 
@@ -74,7 +78,7 @@ const templates = {
     value: string,
   ): HTMLDivElement {
     return Object.assign(document.createElement('div'), {
-      className: placeholder,
+      className: getClassNames(placeholder).join(' '),
       [allowHTML ? 'innerHTML' : 'innerText']: value,
     });
   },
@@ -103,7 +107,7 @@ const templates = {
     removeItemButton: boolean,
   ): HTMLDivElement {
     const div = Object.assign(document.createElement('div'), {
-      className: item,
+      className: getClassNames(item).join(' '),
       [allowHTML ? 'innerHTML' : 'innerText']: label,
     });
 
@@ -141,7 +145,7 @@ const templates = {
       const REMOVE_ITEM_TEXT = 'Remove item';
       const removeButton = Object.assign(document.createElement('button'), {
         type: 'button',
-        className: button,
+        className: getClassNames(button).join(' '),
         [allowHTML ? 'innerHTML' : 'innerText']: REMOVE_ITEM_TEXT,
       });
       removeButton.setAttribute(
@@ -160,7 +164,7 @@ const templates = {
     isSelectOneElement: boolean,
   ): HTMLDivElement {
     const div = Object.assign(document.createElement('div'), {
-      className: list,
+      className: getClassNames(list).join(' '),
     });
 
     if (!isSelectOneElement) {
@@ -179,7 +183,9 @@ const templates = {
     { id, value, disabled }: Group,
   ): HTMLDivElement {
     const div = Object.assign(document.createElement('div'), {
-      className: `${group} ${disabled ? itemDisabled : ''}`,
+      className: `${getClassNames(group).join(' ')} ${
+        disabled ? getClassNames(itemDisabled).join(' ') : ''
+      }`,
     });
 
     div.setAttribute('role', 'group');
@@ -196,7 +202,7 @@ const templates = {
 
     div.appendChild(
       Object.assign(document.createElement('div'), {
-        className: groupHeading,
+        className: getClassNames(groupHeading).join(' '),
         [allowHTML ? 'innerHTML' : 'innerText']: value,
       }),
     );
@@ -231,7 +237,9 @@ const templates = {
     const div = Object.assign(document.createElement('div'), {
       id: elementId,
       [allowHTML ? 'innerHTML' : 'innerText']: label,
-      className: `${item} ${itemChoice}`,
+      className: `${getClassNames(item).join(' ')} ${getClassNames(
+        itemChoice,
+      ).join(' ')}`,
     });
 
     if (isSelected) {
@@ -270,7 +278,9 @@ const templates = {
     const inp = Object.assign(document.createElement('input'), {
       type: 'search',
       name: 'search_terms',
-      className: `${input} ${inputCloned}`,
+      className: `${getClassNames(input).join(' ')} ${getClassNames(
+        inputCloned,
+      ).join(' ')}`,
       autocomplete: 'off',
       autocapitalize: 'off',
       spellcheck: false,
@@ -302,7 +312,7 @@ const templates = {
     innerText: string,
     type: 'no-choices' | 'no-results' | '' = '',
   ): HTMLDivElement {
-    const classes = [item, itemChoice];
+    const classes = [...getClassNames(item), ...getClassNames(itemChoice)];
 
     if (type === 'no-choices') {
       classes.push(noChoices);