deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-03 14:23:12 +02:00
Code Issues Projects Releases Wiki Activity

Merge 5173a8fa75 into 5dbea2825a

Browse source
This commit is contained in:
Gaetan 2022-11-30 09:59:48 +00:00 committed by GitHub
parent 5dbea2825a 5173a8fa75
commit 6b454cc9a4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 7737 additions and 239 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
README.md
View file

@ -700,10 +700,10 @@ const example = new Choices(element, {
return {
item: ({ classNames }, data) => {
return template(`
<div class="${classNames.item} ${
data.highlighted
<div class="${getClassNames(classNames.item).join(' ')} ${
getClassNames(data.highlighted
? classNames.highlightedState
: classNames.itemSelectable
: classNames.itemSelectable).join(' ')
} ${
data.placeholder ? classNames.placeholder : ''
}" data-item data-id="${data.id}" data-value="${data.value}" ${
@ -715,8 +715,8 @@ const example = new Choices(element, {
},
choice: ({ classNames }, data) => {
return template(`
<div class="${classNames.item} ${classNames.itemChoice} ${
data.disabled ? classNames.itemDisabled : classNames.itemSelectable
<div class="${getClassNames(classNames.item).join(' ')} ${getClassNames(classNames.itemChoice).join(' ')} ${
getClassNames(data.disabled ? classNames.itemDisabled : classNames.itemSelectable).join(' ')
}" data-select-text="${this.config.itemSelectText}" data-choice ${
data.disabled
? 'data-choice-disabled aria-disabled="true"'

206
public/assets/scripts/choices.js
View file

@ -1098,7 +1098,7 @@ var Choices = /** @class */function () {
if (setLoading === void 0) {
setLoading = true;
}
var placeholderItem = this.itemList.getChild(".".concat(this.config.classNames.placeholder));
var placeholderItem = this.itemList.getChild((0, utils_1.getClassNamesSelector)(this.config.classNames.placeholder));
if (setLoading) {
this.disable();
this.containerOuter.addLoadingState();
@ -1371,7 +1371,7 @@ var Choices = /** @class */function () {
event.preventDefault();
}
if (hasActiveDropdown) {
var highlightedChoice = this.dropdown.getChild(".".concat(this.config.classNames.highlightedState));
var highlightedChoice = this.dropdown.getChild((0, utils_1.getClassNamesSelector)(this.config.classNames.highlightedState));
if (highlightedChoice) {
// add enter keyCode value
if (activeItems[0]) {
@ -1413,7 +1413,7 @@ var Choices = /** @class */function () {
nextEl = this.dropdown.element.querySelector(selectableChoiceIdentifier);
}
} else {
var currentEl = this.dropdown.element.querySelector(".".concat(this.config.classNames.highlightedState));
var currentEl = this.dropdown.element.querySelector((0, utils_1.getClassNamesSelector)(this.config.classNames.highlightedState));
if (currentEl) {
nextEl = (0, utils_1.getAdjacentEl)(currentEl, selectableChoiceIdentifier, directionInt);
} else {
@ -1603,6 +1603,7 @@ var Choices = /** @class */function () {
this._store.dispatch((0, misc_1.resetTo)(this._initialState));
};
Choices.prototype._highlightChoice = function (el) {
var _a;
var _this = this;
if (el === void 0) {
el = null;
@ -1612,10 +1613,11 @@ var Choices = /** @class */function () {
return;
}
var passedEl = el;
var highlightedChoices = Array.from(this.dropdown.element.querySelectorAll(".".concat(this.config.classNames.highlightedState)));
var highlightedChoices = Array.from(this.dropdown.element.querySelectorAll((0, utils_1.getClassNamesSelector)(this.config.classNames.highlightedState)));
// Remove any highlighted choices
highlightedChoices.forEach(function (choice) {
choice.classList.remove(_this.config.classNames.highlightedState);
var _a;
(_a = choice.classList).remove.apply(_a, (0, utils_1.getClassNames)(_this.config.classNames.highlightedState));
choice.setAttribute('aria-selected', 'false');
});
if (passedEl) {
@ -1633,7 +1635,7 @@ var Choices = /** @class */function () {
passedEl = choices[0];
}
}
passedEl.classList.add(this.config.classNames.highlightedState);
(_a = passedEl.classList).add.apply(_a, (0, utils_1.getClassNames)(this.config.classNames.highlightedState));
passedEl.setAttribute('aria-selected', 'true');
this.passedElement.triggerEvent(constants_1.EVENTS.highlightChoice, {
el: passedEl
@ -2134,22 +2136,24 @@ var Container = /** @class */function () {
this.element.removeAttribute('aria-activedescendant');
};
Container.prototype.open = function (dropdownPos) {
this.element.classList.add(this.classNames.openState);
var _a, _b;
(_a = this.element.classList).add.apply(_a, (0, utils_1.getClassNames)(this.classNames.openState));
this.element.setAttribute('aria-expanded', 'true');
this.isOpen = true;
if (this.shouldFlip(dropdownPos)) {
this.element.classList.add(this.classNames.flippedState);
(_b = this.element.classList).add.apply(_b, (0, utils_1.getClassNames)(this.classNames.flippedState));
this.isFlipped = true;
}
};
Container.prototype.close = function () {
this.element.classList.remove(this.classNames.openState);
var _a, _b;
(_a = this.element.classList).remove.apply(_a, (0, utils_1.getClassNames)(this.classNames.openState));
this.element.setAttribute('aria-expanded', 'false');
this.removeActiveDescendant();
this.isOpen = false;
// A dropdown flips if it does not have space within the page
if (this.isFlipped) {
this.element.classList.remove(this.classNames.flippedState);
(_b = this.element.classList).remove.apply(_b, (0, utils_1.getClassNames)(this.classNames.flippedState));
this.isFlipped = false;
}
};
@ -2159,13 +2163,16 @@ var Container = /** @class */function () {
}
};
Container.prototype.addFocusState = function () {
this.element.classList.add(this.classNames.focusState);
var _a;
(_a = this.element.classList).add.apply(_a, (0, utils_1.getClassNames)(this.classNames.focusState));
};
Container.prototype.removeFocusState = function () {
this.element.classList.remove(this.classNames.focusState);
var _a;
(_a = this.element.classList).remove.apply(_a, (0, utils_1.getClassNames)(this.classNames.focusState));
};
Container.prototype.enable = function () {
this.element.classList.remove(this.classNames.disabledState);
var _a;
(_a = this.element.classList).remove.apply(_a, (0, utils_1.getClassNames)(this.classNames.disabledState));
this.element.removeAttribute('aria-disabled');
if (this.type === constants_1.SELECT_ONE_TYPE) {
this.element.setAttribute('tabindex', '0');
@ -2173,7 +2180,8 @@ var Container = /** @class */function () {
this.isDisabled = false;
};
Container.prototype.disable = function () {
this.element.classList.add(this.classNames.disabledState);
var _a;
(_a = this.element.classList).add.apply(_a, (0, utils_1.getClassNames)(this.classNames.disabledState));
this.element.setAttribute('aria-disabled', 'true');
if (this.type === constants_1.SELECT_ONE_TYPE) {
this.element.setAttribute('tabindex', '-1');
@ -2192,12 +2200,14 @@ var Container = /** @class */function () {
}
};
Container.prototype.addLoadingState = function () {
this.element.classList.add(this.classNames.loadingState);
var _a;
(_a = this.element.classList).add.apply(_a, (0, utils_1.getClassNames)(this.classNames.loadingState));
this.element.setAttribute('aria-busy', 'true');
this.isLoading = true;
};
Container.prototype.removeLoadingState = function () {
this.element.classList.remove(this.classNames.loadingState);
var _a;
(_a = this.element.classList).remove.apply(_a, (0, utils_1.getClassNames)(this.classNames.loadingState));
this.element.removeAttribute('aria-busy');
this.isLoading = false;
};
@ -2214,13 +2224,14 @@ exports["default"] = Container;
/***/ }),
/***/ 217:
/***/ (function(__unused_webpack_module, exports) {
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
Object.defineProperty(exports, "__esModule", ({
value: true
}));
var utils_1 = __webpack_require__(799);
var Dropdown = /** @class */function () {
function Dropdown(_a) {
var element = _a.element,
@ -2248,7 +2259,8 @@ var Dropdown = /** @class */function () {
* Show dropdown to user by adding active state class
*/
Dropdown.prototype.show = function () {
this.element.classList.add(this.classNames.activeState);
var _a;
(_a = this.element.classList).add.apply(_a, (0, utils_1.getClassNames)(this.classNames.activeState));
this.element.setAttribute('aria-expanded', 'true');
this.isActive = true;
return this;
@ -2257,7 +2269,8 @@ var Dropdown = /** @class */function () {
* Hide dropdown from user
*/
Dropdown.prototype.hide = function () {
this.element.classList.remove(this.classNames.activeState);
var _a;
(_a = this.element.classList).remove.apply(_a, (0, utils_1.getClassNames)(this.classNames.activeState));
this.element.setAttribute('aria-expanded', 'false');
this.isActive = false;
return this;
@ -2569,8 +2582,9 @@ var WrappedElement = /** @class */function () {
configurable: true
});
WrappedElement.prototype.conceal = function () {
var _a;
// Hide passed input
this.element.classList.add(this.classNames.input);
(_a = this.element.classList).add.apply(_a, (0, utils_1.getClassNames)(this.classNames.input));
this.element.hidden = true;
// Remove element from tab index
this.element.tabIndex = -1;
@ -2582,8 +2596,9 @@ var WrappedElement = /** @class */function () {
this.element.setAttribute('data-choice', 'active');
};
WrappedElement.prototype.reveal = function () {
var _a;
// Reinstate passed element
this.element.classList.remove(this.classNames.input);
(_a = this.element.classList).remove.apply(_a, (0, utils_1.getClassNames)(this.classNames.input));
this.element.hidden = false;
this.element.removeAttribute('tabindex');
// Recover original styles if any
@ -2853,7 +2868,7 @@ exports.DEFAULT_CLASSNAMES = {
itemSelectable: 'choices__item--selectable',
itemDisabled: 'choices__item--disabled',
itemChoice: 'choices__item--choice',
placeholder: 'choices__placeholder',
placeholder: ['choices__placeholder'],
group: 'choices__group',
groupHeading: 'choices__heading',
button: 'choices__button',
@ -3146,7 +3161,7 @@ Object.defineProperty(exports, "__esModule", ({
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.parseCustomProperties = exports.diff = exports.cloneObject = exports.existsInArray = exports.dispatchEvent = exports.sortByScore = exports.sortByAlpha = exports.strToEl = exports.sanitise = exports.isScrolledIntoView = exports.getAdjacentEl = exports.wrap = exports.isType = exports.getType = exports.generateId = exports.generateChars = exports.getRandomNumber = void 0;
exports.parseCustomProperties = exports.getClassNamesSelector = exports.getClassNames = exports.diff = exports.cloneObject = exports.existsInArray = exports.dispatchEvent = exports.sortByScore = exports.sortByAlpha = exports.strToEl = exports.sanitise = exports.isScrolledIntoView = exports.getAdjacentEl = exports.wrap = exports.isType = exports.getType = exports.generateId = exports.generateChars = exports.getRandomNumber = void 0;
var getRandomNumber = function (min, max) {
return Math.floor(Math.random() * (max - min) + min);
};
@ -3301,6 +3316,19 @@ var diff = function (a, b) {
});
};
exports.diff = diff;
var getClassNames = function (ClassNames) {
return Array.isArray(ClassNames) ? ClassNames : [ClassNames];
};
exports.getClassNames = getClassNames;
var getClassNamesSelector = function (option) {
if (option && Array.isArray(option)) {
return option.map(function (item) {
return ".".concat(item);
}).join(' ');
}
return ".".concat(option);
};
exports.getClassNamesSelector = getClassNamesSelector;
var parseCustomProperties = function (customProperties) {
if (typeof customProperties !== 'undefined') {
try {
@ -3504,7 +3532,7 @@ Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.defaultState = void 0;
var redux_1 = __webpack_require__(791);
var redux_1 = __webpack_require__(857);
var items_1 = __importDefault(__webpack_require__(52));
var groups_1 = __importDefault(__webpack_require__(871));
var choices_1 = __importDefault(__webpack_require__(273));
@ -3675,7 +3703,7 @@ Object.defineProperty(exports, "__esModule", ({
value: true
}));
/* eslint-disable @typescript-eslint/no-explicit-any */
var redux_1 = __webpack_require__(791);
var redux_1 = __webpack_require__(857);
var index_1 = __importDefault(__webpack_require__(655));
var Store = /** @class */function () {
function Store() {
@ -3853,7 +3881,7 @@ exports["default"] = Store;
/***/ }),
/***/ 686:
/***/ (function(__unused_webpack_module, exports) {
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
@ -3861,14 +3889,24 @@ exports["default"] = Store;
* Helpers to create HTML elements used by Choices
* Can be overridden by providing `callbackOnCreateTemplates` option
*/
var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
Object.defineProperty(exports, "__esModule", ({
value: true
}));
var utils_1 = __webpack_require__(799);
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) {
@ -3893,7 +3931,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) {
@ -3902,7 +3940,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) {
@ -3910,18 +3948,18 @@ 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) {
var _c, _d;
var _c, _d, _e, _f, _g;
var allowHTML = _a.allowHTML,
_e = _a.classNames,
item = _e.item,
button = _e.button,
highlightedState = _e.highlightedState,
itemSelectable = _e.itemSelectable,
placeholder = _e.placeholder;
_h = _a.classNames,
item = _h.item,
button = _h.button,
highlightedState = _h.highlightedState,
itemSelectable = _h.itemSelectable,
placeholder = _h.placeholder;
var id = _b.id,
value = _b.value,
label = _b.label,
@ -3931,7 +3969,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: '',
@ -3946,20 +3984,20 @@ var templates = {
div.setAttribute('aria-disabled', 'true');
}
if (isPlaceholder) {
div.classList.add(placeholder);
(_d = div.classList).add.apply(_d, (0, utils_1.getClassNames)(placeholder));
}
div.classList.add(highlighted ? highlightedState : itemSelectable);
(_e = div.classList).add.apply(_e, highlighted ? (0, utils_1.getClassNames)(highlightedState) : (0, utils_1.getClassNames)(itemSelectable));
if (removeItemButton) {
if (disabled) {
div.classList.remove(itemSelectable);
(_f = div.classList).remove.apply(_f, (0, utils_1.getClassNames)(itemSelectable));
}
div.dataset.deletable = '';
/** @todo This MUST be localizable, not hardcoded! */
var REMOVE_ITEM_TEXT = 'Remove item';
var removeButton = Object.assign(document.createElement('button'), (_d = {
var removeButton = Object.assign(document.createElement('button'), (_g = {
type: 'button',
className: button
}, _d[allowHTML ? 'innerHTML' : 'innerText'] = REMOVE_ITEM_TEXT, _d));
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 = '';
div.appendChild(removeButton);
@ -3969,7 +4007,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');
@ -3988,7 +4026,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, {
@ -4000,20 +4038,20 @@ 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;
},
choice: function (_a, _b, selectText) {
var _c;
var _c, _d, _e, _f, _g;
var allowHTML = _a.allowHTML,
_d = _a.classNames,
item = _d.item,
itemChoice = _d.itemChoice,
itemSelectable = _d.itemSelectable,
selectedState = _d.selectedState,
itemDisabled = _d.itemDisabled,
placeholder = _d.placeholder;
_h = _a.classNames,
item = _h.item,
itemChoice = _h.itemChoice,
itemSelectable = _h.itemSelectable,
selectedState = _h.selectedState,
itemDisabled = _h.itemDisabled,
placeholder = _h.placeholder;
var id = _b.id,
value = _b.value,
label = _b.label,
@ -4024,12 +4062,12 @@ 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) {
div.classList.add(selectedState);
(_d = div.classList).add.apply(_d, (0, utils_1.getClassNames)(selectedState));
}
if (isPlaceholder) {
div.classList.add(placeholder);
(_e = div.classList).add.apply(_e, (0, utils_1.getClassNames)(placeholder));
}
div.setAttribute('role', groupId && groupId > 0 ? 'treeitem' : 'option');
Object.assign(div.dataset, {
@ -4039,11 +4077,11 @@ var templates = {
selectText: selectText
});
if (isDisabled) {
div.classList.add(itemDisabled);
(_f = div.classList).add.apply(_f, (0, utils_1.getClassNames)(itemDisabled));
div.dataset.choiceDisabled = '';
div.setAttribute('aria-disabled', 'true');
} else {
div.classList.add(itemSelectable);
(_g = div.classList).add.apply(_g, (0, utils_1.getClassNames)(itemSelectable));
div.dataset.choiceSelectable = '';
}
return div;
@ -4055,7 +4093,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
@ -4066,11 +4104,13 @@ var templates = {
return inp;
},
dropdown: function (_a) {
var _b = _a.classNames,
list = _b.list,
listDropdown = _b.listDropdown;
var _b, _c;
var _d = _a.classNames,
list = _d.list,
listDropdown = _d.listDropdown;
var div = document.createElement('div');
div.classList.add(list, listDropdown);
(_b = div.classList).add.apply(_b, (0, utils_1.getClassNames)(list));
(_c = div.classList).add.apply(_c, (0, utils_1.getClassNames)(listDropdown));
div.setAttribute('aria-expanded', 'false');
return div;
},
@ -4085,7 +4125,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') {
@ -6040,7 +6080,7 @@ Fuse.config = Config;
/***/ }),
/***/ 791:
/***/ 857:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
// ESM COMPAT FLAG
@ -6057,39 +6097,8 @@ __webpack_require__.d(__webpack_exports__, {
"legacy_createStore": function() { return /* binding */ legacy_createStore; }
});
;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/typeof.js
function _typeof(obj) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
}, _typeof(obj);
}
;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/toPrimitive.js
function _toPrimitive(input, hint) {
if (_typeof(input) !== "object" || input === null) return input;
var prim = input[Symbol.toPrimitive];
if (prim !== undefined) {
var res = prim.call(input, hint || "default");
if (_typeof(res) !== "object") return res;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (hint === "string" ? String : Number)(input);
}
;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/toPropertyKey.js
function _toPropertyKey(arg) {
var key = _toPrimitive(arg, "string");
return _typeof(key) === "symbol" ? key : String(key);
}
;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/defineProperty.js
function _defineProperty(obj, key, value) {
key = _toPropertyKey(key);
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
@ -6908,6 +6917,7 @@ var __webpack_exports__ = {};
/* harmony import */ var _scripts_constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(883);
/* harmony import */ var _scripts_defaults__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(789);
/* harmony import */ var _scripts_templates__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(686);
/* harmony import */ var _scripts_templates__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_scripts_templates__WEBPACK_IMPORTED_MODULE_4__);

2
public/assets/scripts/choices.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
public/types/src/scripts/choices.d.ts.map
View file

File diff suppressed because one or more lines are too long

2
public/types/src/scripts/components/container.d.ts.map
View file

@ -1 +1 @@
{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/container.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,MAAM,CAAC,OAAO,OAAO,SAAS;IAC5B,OAAO,EAAE,WAAW,CAAC;IAErB,IAAI,EAAE,iBAAiB,CAAC;IAExB,UAAU,EAAE,UAAU,CAAC;IAEvB,QAAQ,EAAE,mBAAmB,CAAC;IAE9B,MAAM,EAAE,OAAO,CAAC;IAEhB,SAAS,EAAE,OAAO,CAAC;IAEnB,UAAU,EAAE,OAAO,CAAC;IAEpB,UAAU,EAAE,OAAO,CAAC;IAEpB,SAAS,EAAE,OAAO,CAAC;gBAEP,EACV,OAAO,EACP,IAAI,EACJ,UAAU,EACV,QAAQ,GACT,EAAE;QACD,OAAO,EAAE,WAAW,CAAC;QACrB,IAAI,EAAE,iBAAiB,CAAC;QACxB,UAAU,EAAE,UAAU,CAAC;QACvB,QAAQ,EAAE,mBAAmB,CAAC;KAC/B;IAcD,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B;;;OAGG;IACH,UAAU,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO;IAkBxC,mBAAmB,CAAC,kBAAkB,EAAE,MAAM,GAAG,IAAI;IAIrD,sBAAsB,IAAI,IAAI;IAI9B,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI;IAW/B,KAAK,IAAI,IAAI;IAab,KAAK,IAAI,IAAI;IAMb,aAAa,IAAI,IAAI;IAIrB,gBAAgB,IAAI,IAAI;IAIxB,MAAM,IAAI,IAAI;IASd,OAAO,IAAI,IAAI;IASf,IAAI,CAAC,OAAO,EAAE,iBAAiB,GAAG,gBAAgB,GAAG,WAAW,GAAG,IAAI;IAIvE,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IASlC,eAAe,IAAI,IAAI;IAMvB,kBAAkB,IAAI,IAAI;IAM1B,QAAQ,IAAI,IAAI;IAIhB,OAAO,IAAI,IAAI;CAGhB"}
{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/container.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,MAAM,CAAC,OAAO,OAAO,SAAS;IAC5B,OAAO,EAAE,WAAW,CAAC;IAErB,IAAI,EAAE,iBAAiB,CAAC;IAExB,UAAU,EAAE,UAAU,CAAC;IAEvB,QAAQ,EAAE,mBAAmB,CAAC;IAE9B,MAAM,EAAE,OAAO,CAAC;IAEhB,SAAS,EAAE,OAAO,CAAC;IAEnB,UAAU,EAAE,OAAO,CAAC;IAEpB,UAAU,EAAE,OAAO,CAAC;IAEpB,SAAS,EAAE,OAAO,CAAC;gBAEP,EACV,OAAO,EACP,IAAI,EACJ,UAAU,EACV,QAAQ,GACT,EAAE;QACD,OAAO,EAAE,WAAW,CAAC;QACrB,IAAI,EAAE,iBAAiB,CAAC;QACxB,UAAU,EAAE,UAAU,CAAC;QACvB,QAAQ,EAAE,mBAAmB,CAAC;KAC/B;IAcD,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B;;;OAGG;IACH,UAAU,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO;IAkBxC,mBAAmB,CAAC,kBAAkB,EAAE,MAAM,GAAG,IAAI;IAIrD,sBAAsB,IAAI,IAAI;IAI9B,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI;IAa/B,KAAK,IAAI,IAAI;IAeb,KAAK,IAAI,IAAI;IAMb,aAAa,IAAI,IAAI;IAIrB,gBAAgB,IAAI,IAAI;IAIxB,MAAM,IAAI,IAAI;IAWd,OAAO,IAAI,IAAI;IASf,IAAI,CAAC,OAAO,EAAE,iBAAiB,GAAG,gBAAgB,GAAG,WAAW,GAAG,IAAI;IAIvE,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IASlC,eAAe,IAAI,IAAI;IAMvB,kBAAkB,IAAI,IAAI;IAQ1B,QAAQ,IAAI,IAAI;IAIhB,OAAO,IAAI,IAAI;CAGhB"}

2
public/types/src/scripts/components/dropdown.d.ts.map
View file

@ -1 +1 @@
{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,MAAM,CAAC,OAAO,OAAO,QAAQ;IAC3B,OAAO,EAAE,WAAW,CAAC;IAErB,IAAI,EAAE,iBAAiB,CAAC;IAExB,UAAU,EAAE,UAAU,CAAC;IAEvB,QAAQ,EAAE,OAAO,CAAC;gBAEN,EACV,OAAO,EACP,IAAI,EACJ,UAAU,GACX,EAAE;QACD,OAAO,EAAE,WAAW,CAAC;QACrB,IAAI,EAAE,iBAAiB,CAAC;QACxB,UAAU,EAAE,UAAU,CAAC;KACxB;IAOD;;OAEG;IACH,IAAI,qBAAqB,IAAI,MAAM,CAElC;IAED,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI;IAI9C;;OAEG;IACH,IAAI,IAAI,IAAI;IAQZ;;OAEG;IACH,IAAI,IAAI,IAAI;CAOb"}
{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAGtE,MAAM,CAAC,OAAO,OAAO,QAAQ;IAC3B,OAAO,EAAE,WAAW,CAAC;IAErB,IAAI,EAAE,iBAAiB,CAAC;IAExB,UAAU,EAAE,UAAU,CAAC;IAEvB,QAAQ,EAAE,OAAO,CAAC;gBAEN,EACV,OAAO,EACP,IAAI,EACJ,UAAU,GACX,EAAE;QACD,OAAO,EAAE,WAAW,CAAC;QACrB,IAAI,EAAE,iBAAiB,CAAC;QACxB,UAAU,EAAE,UAAU,CAAC;KACxB;IAOD;;OAEG;IACH,IAAI,qBAAqB,IAAI,MAAM,CAElC;IAED,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI;IAI9C;;OAEG;IACH,IAAI,IAAI,IAAI;IAQZ;;OAEG;IACH,IAAI,IAAI,IAAI;CASb"}

52
public/types/src/scripts/interfaces/class-names.d.ts vendored
View file

@ -1,56 +1,56 @@
/** Classes added to HTML generated by By default classnames follow the BEM notation. */
export interface ClassNames {
/** @default 'choices' */
containerOuter: string;
containerOuter: string | Array<string>;
/** @default 'choices__inner' */
containerInner: string;
containerInner: string | Array<string>;
/** @default 'choices__input' */
input: string;
input: string | Array<string>;
/** @default 'choices__input--cloned' */
inputCloned: string;
inputCloned: string | Array<string>;
/** @default 'choices__list' */
list: string;
list: string | Array<string>;
/** @default 'choices__list--multiple' */
listItems: string;
listItems: string | Array<string>;
/** @default 'choices__list--single' */
listSingle: string;
listSingle: string | Array<string>;
/** @default 'choices__list--dropdown' */
listDropdown: string;
listDropdown: string | Array<string>;
/** @default 'choices__item' */
item: string;
item: string | Array<string>;
/** @default 'choices__item--selectable' */
itemSelectable: string;
itemSelectable: string | Array<string>;
/** @default 'choices__item--disabled' */
itemDisabled: string;
itemDisabled: string | Array<string>;
/** @default 'choices__item--choice' */
itemChoice: string;
itemChoice: string | Array<string>;
/** @default 'choices__placeholder' */
placeholder: string;
placeholder: string | Array<string>;
/** @default 'choices__group' */
group: string;
group: string | Array<string>;
/** @default 'choices__heading' */
groupHeading: string;
groupHeading: string | Array<string>;
/** @default 'choices__button' */
button: string;
button: string | Array<string>;
/** @default 'is-active' */
activeState: string;
activeState: string | Array<string>;
/** @default 'is-focused' */
focusState: string;
focusState: string | Array<string>;
/** @default 'is-open' */
openState: string;
openState: string | Array<string>;
/** @default 'is-disabled' */
disabledState: string;
disabledState: string | Array<string>;
/** @default 'is-highlighted' */
highlightedState: string;
highlightedState: string | Array<string>;
/** @default 'is-selected' */
selectedState: string;
selectedState: string | Array<string>;
/** @default 'is-flipped' */
flippedState: string;
flippedState: string | Array<string>;
/** @default 'is-loading' */
loadingState: string;
loadingState: string | Array<string>;
/** @default 'has-no-results' */
noResults: string;
noResults: string | Array<string>;
/** @default 'has-no-choices' */
noChoices: string;
noChoices: string | Array<string>;
}
//# sourceMappingURL=class-names.d.ts.map

2
public/types/src/scripts/interfaces/class-names.d.ts.map
View file

@ -1 +1 @@
{"version":3,"file":"class-names.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/interfaces/class-names.ts"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,MAAM,WAAW,UAAU;IACzB,yBAAyB;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,gCAAgC;IAChC,cAAc,EAAE,MAAM,CAAC;IACvB,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,WAAW,EAAE,MAAM,CAAC;IACpB,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,YAAY,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,cAAc,EAAE,MAAM,CAAC;IACvB,yCAAyC;IACzC,YAAY,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,YAAY,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,gBAAgB,EAAE,MAAM,CAAC;IACzB,6BAA6B;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,gCAAgC;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,gCAAgC;IAChC,SAAS,EAAE,MAAM,CAAC;CACnB"}
{"version":3,"file":"class-names.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/interfaces/class-names.ts"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,MAAM,WAAW,UAAU;IACzB,yBAAyB;IACzB,cAAc,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACvC,gCAAgC;IAChC,cAAc,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACvC,gCAAgC;IAChC,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9B,wCAAwC;IACxC,WAAW,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACpC,+BAA+B;IAC/B,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,yCAAyC;IACzC,SAAS,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAClC,uCAAuC;IACvC,UAAU,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,yCAAyC;IACzC,YAAY,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACrC,+BAA+B;IAC/B,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,2CAA2C;IAC3C,cAAc,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACvC,yCAAyC;IACzC,YAAY,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACrC,uCAAuC;IACvC,UAAU,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,sCAAsC;IACtC,WAAW,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACpC,gCAAgC;IAChC,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9B,kCAAkC;IAClC,YAAY,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACrC,iCAAiC;IACjC,MAAM,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,2BAA2B;IAC3B,WAAW,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACpC,4BAA4B;IAC5B,UAAU,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,yBAAyB;IACzB,SAAS,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAClC,6BAA6B;IAC7B,aAAa,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACtC,gCAAgC;IAChC,gBAAgB,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzC,6BAA6B;IAC7B,aAAa,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACtC,4BAA4B;IAC5B,YAAY,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACrC,4BAA4B;IAC5B,YAAY,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACrC,gCAAgC;IAChC,SAAS,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAClC,gCAAgC;IAChC,SAAS,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;CACnC"}

4
public/types/src/scripts/interfaces/options.d.ts vendored
View file

@ -440,14 +440,14 @@ export interface Options {
* return {
* item: (data) => {
* return template(`
* <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
* <div class="${getClassNames(classNames.item).join(' ')} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
* <span>&bigstar;</span> ${data.label}
* </div>
* `);
* },
* choice: (data) => {
* return template(`
* <div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
* <div class="${getClassNames(classNames.item).join(' ')} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
* <span>&bigstar;</span> ${data.label}
* </div>
* `);

2
public/types/src/scripts/lib/utils.d.ts vendored
View file

@ -23,6 +23,8 @@ export declare const cloneObject: (obj: object) => object;
* Returns an array of keys present on the first but missing on the second object
*/
export declare const diff: (a: Record<string, any>, b: Record<string, any>) => string[];
export declare const getClassNames: (ClassNames: Array<string> | string) => Array<string>;
export declare const getClassNamesSelector: (option: string | Array<string> | null) => string;
export declare const parseCustomProperties: (customProperties: any) => any;
export {};
//# sourceMappingURL=utils.d.ts.map

2
public/types/src/scripts/lib/utils.d.ts.map
View file

@ -1 +1 @@
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/lib/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,eAAO,MAAM,eAAe,QAAS,MAAM,OAAO,MAAM,KAAG,MACZ,CAAC;AAEhD,eAAO,MAAM,aAAa,WAAY,MAAM,KAAG,MAC6B,CAAC;AAE7E,eAAO,MAAM,UAAU,YACZ,gBAAgB,GAAG,iBAAiB,UACrC,MAAM,KACb,MASF,CAAC;AAEF,eAAO,MAAM,OAAO,QAAS,GAAG,KAAG,MACe,CAAC;AAEnD,eAAO,MAAM,MAAM,SAAU,MAAM,OAAO,GAAG,KAAG,OACY,CAAC;AAE7D,eAAO,MAAM,IAAI,YACN,WAAW,YACX,WAAW,KACnB,WAUF,CAAC;AAEF,eAAO,MAAM,aAAa,YACf,OAAO,YACN,MAAM,yBAEf,OAYF,CAAC;AAEF,eAAO,MAAM,kBAAkB,YACpB,WAAW,UACZ,WAAW,yBAElB,OAkBF,CAAC;AAEF,eAAO,MAAM,QAAQ,sCAUpB,CAAC;AAEF,eAAO,MAAM,OAAO,QAAe,MAAM,KAAK,OAc1C,CAAC;AAEL,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AACD,eAAO,MAAM,WAAW,qBACI,eAAe,oCACE,eAAe,KACzD,MAKC,CAAC;AAEL,eAAO,MAAM,WAAW,MACnB,KAAK,MAAM,EAAE,OAAO,CAAC,KACrB,KAAK,MAAM,EAAE,OAAO,CAAC,KACvB,MAKF,CAAC;AAEF,eAAO,MAAM,aAAa,YACf,WAAW,QACd,SAAS,eACH,MAAM,GAAG,IAAI,KACxB,OAQF,CAAC;AAEF,eAAO,MAAM,aAAa,UACjB,GAAG,EAAE,SACL,MAAM,mBAEZ,OAOC,CAAC;AAEL,eAAO,MAAM,WAAW,QAAS,MAAM,KAAG,MACT,CAAC;AAElC;;GAEG;AACH,eAAO,MAAM,IAAI,MACZ,OAAO,MAAM,EAAE,GAAG,CAAC,KACnB,OAAO,MAAM,EAAE,GAAG,CAAC,KACrB,MAAM,EAKR,CAAC;AAEF,eAAO,MAAM,qBAAqB,6BAAuB,GAUxD,CAAC"}
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/lib/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,eAAO,MAAM,eAAe,QAAS,MAAM,OAAO,MAAM,KAAG,MACZ,CAAC;AAEhD,eAAO,MAAM,aAAa,WAAY,MAAM,KAAG,MAC6B,CAAC;AAE7E,eAAO,MAAM,UAAU,YACZ,gBAAgB,GAAG,iBAAiB,UACrC,MAAM,KACb,MASF,CAAC;AAEF,eAAO,MAAM,OAAO,QAAS,GAAG,KAAG,MACe,CAAC;AAEnD,eAAO,MAAM,MAAM,SAAU,MAAM,OAAO,GAAG,KAAG,OACY,CAAC;AAE7D,eAAO,MAAM,IAAI,YACN,WAAW,YACX,WAAW,KACnB,WAUF,CAAC;AAEF,eAAO,MAAM,aAAa,YACf,OAAO,YACN,MAAM,yBAEf,OAYF,CAAC;AAEF,eAAO,MAAM,kBAAkB,YACpB,WAAW,UACZ,WAAW,yBAElB,OAkBF,CAAC;AAEF,eAAO,MAAM,QAAQ,sCAUpB,CAAC;AAEF,eAAO,MAAM,OAAO,QAAe,MAAM,KAAK,OAc1C,CAAC;AAEL,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AACD,eAAO,MAAM,WAAW,qBACI,eAAe,oCACE,eAAe,KACzD,MAKC,CAAC;AAEL,eAAO,MAAM,WAAW,MACnB,KAAK,MAAM,EAAE,OAAO,CAAC,KACrB,KAAK,MAAM,EAAE,OAAO,CAAC,KACvB,MAKF,CAAC;AAEF,eAAO,MAAM,aAAa,YACf,WAAW,QACd,SAAS,eACH,MAAM,GAAG,IAAI,KACxB,OAQF,CAAC;AAEF,eAAO,MAAM,aAAa,UACjB,GAAG,EAAE,SACL,MAAM,mBAEZ,OAOC,CAAC;AAEL,eAAO,MAAM,WAAW,QAAS,MAAM,KAAG,MACT,CAAC;AAElC;;GAEG;AACH,eAAO,MAAM,IAAI,MACZ,OAAO,MAAM,EAAE,GAAG,CAAC,KACnB,OAAO,MAAM,EAAE,GAAG,CAAC,KACrB,MAAM,EAKR,CAAC;AAEF,eAAO,MAAM,aAAa,eACZ,MAAM,MAAM,CAAC,GAAG,MAAM,KACjC,MAAM,MAAM,CAEd,CAAC;AAEF,eAAO,MAAM,qBAAqB,WACxB,MAAM,GAAG,MAAM,MAAM,CAAC,GAAG,IAAI,WAWtC,CAAC;AAEF,eAAO,MAAM,qBAAqB,6BAAuB,GAUxD,CAAC"}

2
public/types/src/scripts/templates.d.ts.map
View file

@ -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;AAGrE,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;yCAmDW,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;mFAc9B,eAAe,aACP,MAAM,SACX,YAAY,GAAG,YAAY,GAAG,EAAE,GACrC,cAAc;kEAqBd,IAAI,GAAG,iBAAiB;CAW5B,CAAC;AAEF,eAAe,SAAS,CAAC"}

18
src/scripts/choices.ts
View file

@ -41,6 +41,8 @@ import {
existsInArray,
generateId,
getAdjacentEl,
getClassNames,
getClassNamesSelector,
getType,
isScrolledIntoView,
isType,
@ -1195,7 +1197,7 @@ class Choices implements Choices {
_handleLoadingState(setLoading = true): void {
let placeholderItem = this.itemList.getChild(
`.${this.config.classNames.placeholder}`,
getClassNamesSelector(this.config.classNames.placeholder),
);
if (setLoading) {
@ -1575,7 +1577,7 @@ class Choices implements Choices {
if (hasActiveDropdown) {
const highlightedChoice = this.dropdown.getChild(
`.${this.config.classNames.highlightedState}`,
getClassNamesSelector(this.config.classNames.highlightedState),
);
if (highlightedChoice) {
@ -1632,7 +1634,7 @@ class Choices implements Choices {
}
} else {
const currentEl = this.dropdown.element.querySelector(
`.${this.config.classNames.highlightedState}`,
getClassNamesSelector(this.config.classNames.highlightedState),
);
if (currentEl) {
nextEl = getAdjacentEl(
@ -1896,13 +1898,15 @@ class Choices implements Choices {
let passedEl = el;
const highlightedChoices = Array.from(
this.dropdown.element.querySelectorAll(
`.${this.config.classNames.highlightedState}`,
getClassNamesSelector(this.config.classNames.highlightedState),
),
);
// Remove any highlighted choices
highlightedChoices.forEach((choice) => {
choice.classList.remove(this.config.classNames.highlightedState);
choice.classList.remove(
...getClassNames(this.config.classNames.highlightedState),
);
choice.setAttribute('aria-selected', 'false');
});
@ -1923,7 +1927,9 @@ class Choices implements Choices {
}
}
passedEl.classList.add(this.config.classNames.highlightedState);
passedEl.classList.add(
...getClassNames(this.config.classNames.highlightedState),
);
passedEl.setAttribute('aria-selected', 'true');
this.passedElement.triggerEvent(EVENTS.highlightChoice, { el: passedEl });

30
src/scripts/components/container.ts
View file

@ -1,4 +1,4 @@
import { wrap } from '../lib/utils';
import { getClassNames, wrap } from '../lib/utils';
import { SELECT_ONE_TYPE } from '../constants';
import { ClassNames } from '../interfaces/class-names';
import { PositionOptionsType } from '../interfaces/position-options-type';
@ -88,25 +88,29 @@ export default class Container {
}
open(dropdownPos: number): void {
this.element.classList.add(this.classNames.openState);
this.element.classList.add(...getClassNames(this.classNames.openState));
this.element.setAttribute('aria-expanded', 'true');
this.isOpen = true;
if (this.shouldFlip(dropdownPos)) {
this.element.classList.add(this.classNames.flippedState);
this.element.classList.add(
...getClassNames(this.classNames.flippedState),
);
this.isFlipped = true;
}
}
close(): void {
this.element.classList.remove(this.classNames.openState);
this.element.classList.remove(...getClassNames(this.classNames.openState));
this.element.setAttribute('aria-expanded', 'false');
this.removeActiveDescendant();
this.isOpen = false;
// A dropdown flips if it does not have space within the page
if (this.isFlipped) {
this.element.classList.remove(this.classNames.flippedState);
this.element.classList.remove(
...getClassNames(this.classNames.flippedState),
);
this.isFlipped = false;
}
}
@ -118,15 +122,17 @@ export default class Container {
}
addFocusState(): void {
this.element.classList.add(this.classNames.focusState);
this.element.classList.add(...getClassNames(this.classNames.focusState));
}
removeFocusState(): void {
this.element.classList.remove(this.classNames.focusState);
this.element.classList.remove(...getClassNames(this.classNames.focusState));
}
enable(): void {
this.element.classList.remove(this.classNames.disabledState);
this.element.classList.remove(
...getClassNames(this.classNames.disabledState),
);
this.element.removeAttribute('aria-disabled');
if (this.type === SELECT_ONE_TYPE) {
this.element.setAttribute('tabindex', '0');
@ -135,7 +141,7 @@ export default class Container {
}
disable(): void {
this.element.classList.add(this.classNames.disabledState);
this.element.classList.add(...getClassNames(this.classNames.disabledState));
this.element.setAttribute('aria-disabled', 'true');
if (this.type === SELECT_ONE_TYPE) {
this.element.setAttribute('tabindex', '-1');
@ -157,13 +163,15 @@ export default class Container {
}
addLoadingState(): void {
this.element.classList.add(this.classNames.loadingState);
this.element.classList.add(...getClassNames(this.classNames.loadingState));
this.element.setAttribute('aria-busy', 'true');
this.isLoading = true;
}
removeLoadingState(): void {
this.element.classList.remove(this.classNames.loadingState);
this.element.classList.remove(
...getClassNames(this.classNames.loadingState),
);
this.element.removeAttribute('aria-busy');
this.isLoading = false;
}

5
src/scripts/components/dropdown.test.ts
View file

@ -1,6 +1,7 @@
import { expect } from 'chai';
import sinon from 'sinon';
import { DEFAULT_CLASSNAMES } from '../defaults';
import { getClassNamesSelector } from '../lib/utils';
import Dropdown from './dropdown';
describe('components/dropdown', () => {
@ -76,7 +77,9 @@ describe('components/dropdown', () => {
it('returns child element', () => {
const expectedResponse = childElement;
const actualResponse = instance.getChild(`.${childClass}`);
const actualResponse = instance.getChild(
getClassNamesSelector(childClass),
);
expect(expectedResponse).to.eql(actualResponse);
});
});

7
src/scripts/components/dropdown.ts
View file

@ -1,5 +1,6 @@
import { ClassNames } from '../interfaces/class-names';
import { PassedElementType } from '../interfaces/passed-element-type';
import { getClassNames } from '../lib/utils';
export default class Dropdown {
element: HTMLElement;
@ -40,7 +41,7 @@ export default class Dropdown {
* Show dropdown to user by adding active state class
*/
show(): this {
this.element.classList.add(this.classNames.activeState);
this.element.classList.add(...getClassNames(this.classNames.activeState));
this.element.setAttribute('aria-expanded', 'true');
this.isActive = true;
@ -51,7 +52,9 @@ export default class Dropdown {
* Hide dropdown from user
*/
hide(): this {
this.element.classList.remove(this.classNames.activeState);
this.element.classList.remove(
...getClassNames(this.classNames.activeState),
);
this.element.setAttribute('aria-expanded', 'false');
this.isActive = false;

5
src/scripts/components/list.test.ts
View file

@ -1,4 +1,5 @@
import { expect } from 'chai';
import { getClassNames } from '../lib/utils';
import List from './list';
describe('components/list', () => {
@ -41,7 +42,7 @@ describe('components/list', () => {
it('appends passed node to element', () => {
const elementToAppend = document.createElement('span');
const childClass = 'test-element';
elementToAppend.classList.add(childClass);
elementToAppend.classList.add(...getClassNames(childClass));
expect(instance.element.querySelector(`.${childClass}`)).to.equal(null);
instance.append(elementToAppend);
expect(instance.element.querySelector(`.${childClass}`)).to.equal(
@ -56,7 +57,7 @@ describe('components/list', () => {
beforeEach(() => {
childElement = document.createElement('span');
childElement.classList.add(childClass);
childElement.classList.add(...getClassNames(childClass));
instance.element.appendChild(childElement);
});

13
src/scripts/components/wrapped-element.test.ts
View file

@ -1,4 +1,5 @@
import { expect } from 'chai';
import { getClassNames } from '../lib/utils';
import { DEFAULT_CLASSNAMES } from '../defaults';
import WrappedElement from './wrapped-element';
@ -79,8 +80,12 @@ describe('components/wrappedElement', () => {
it('hides element', () => {
instance.conceal();
expect(instance.element.tabIndex).to.equal(-1);
const classesToCheck = getClassNames(instance.classNames.input);
expect(
instance.element.classList.contains(instance.classNames.input),
[...instance.element.classList].some(
(className) => classesToCheck.indexOf(className) !== -1,
),
).to.equal(true);
expect(instance.element.hidden).to.be.true;
expect(instance.element.getAttribute('data-choice')).to.equal('active');
@ -101,8 +106,12 @@ describe('components/wrappedElement', () => {
it('shows element', () => {
instance.reveal();
expect(instance.element.tabIndex).to.equal(0);
const classesToCheck = getClassNames(instance.classNames.input);
expect(
instance.element.classList.contains(instance.classNames.input),
[...instance.element.classList].some(
(className) => classesToCheck.indexOf(className) !== -1,
),
).to.equal(false);
expect(instance.element.hidden).to.be.false;
expect(instance.element.getAttribute('style')).to.equal(originalStyling);

6
src/scripts/components/wrapped-element.ts
View file

@ -1,6 +1,6 @@
import { ClassNames } from '../interfaces/class-names';
import { EventType } from '../interfaces/event-type';
import { dispatchEvent } from '../lib/utils';
import { dispatchEvent, getClassNames } from '../lib/utils';
export default class WrappedElement {
element: HTMLInputElement | HTMLSelectElement;
@ -42,7 +42,7 @@ export default class WrappedElement {
conceal(): void {
// Hide passed input
this.element.classList.add(this.classNames.input);
this.element.classList.add(...getClassNames(this.classNames.input));
this.element.hidden = true;
// Remove element from tab index
@ -60,7 +60,7 @@ export default class WrappedElement {
reveal(): void {
// Reinstate passed element
this.element.classList.remove(this.classNames.input);
this.element.classList.remove(...getClassNames(this.classNames.input));
this.element.hidden = false;
this.element.removeAttribute('tabindex');

2
src/scripts/defaults.ts
View file

@ -15,7 +15,7 @@ export const DEFAULT_CLASSNAMES: ClassNames = {
itemSelectable: 'choices__item--selectable',
itemDisabled: 'choices__item--disabled',
itemChoice: 'choices__item--choice',
placeholder: 'choices__placeholder',
placeholder: ['choices__placeholder'],
group: 'choices__group',
groupHeading: 'choices__heading',
button: 'choices__button',

52
src/scripts/interfaces/class-names.ts
View file

@ -1,55 +1,55 @@
/** Classes added to HTML generated by By default classnames follow the BEM notation. */
export interface ClassNames {
/** @default 'choices' */
containerOuter: string;
containerOuter: string | Array<string>;
/** @default 'choices__inner' */
containerInner: string;
containerInner: string | Array<string>;
/** @default 'choices__input' */
input: string;
input: string | Array<string>;
/** @default 'choices__input--cloned' */
inputCloned: string;
inputCloned: string | Array<string>;
/** @default 'choices__list' */
list: string;
list: string | Array<string>;
/** @default 'choices__list--multiple' */
listItems: string;
listItems: string | Array<string>;
/** @default 'choices__list--single' */
listSingle: string;
listSingle: string | Array<string>;
/** @default 'choices__list--dropdown' */
listDropdown: string;
listDropdown: string | Array<string>;
/** @default 'choices__item' */
item: string;
item: string | Array<string>;
/** @default 'choices__item--selectable' */
itemSelectable: string;
itemSelectable: string | Array<string>;
/** @default 'choices__item--disabled' */
itemDisabled: string;
itemDisabled: string | Array<string>;
/** @default 'choices__item--choice' */
itemChoice: string;
itemChoice: string | Array<string>;
/** @default 'choices__placeholder' */
placeholder: string;
placeholder: string | Array<string>;
/** @default 'choices__group' */
group: string;
group: string | Array<string>;
/** @default 'choices__heading' */
groupHeading: string;
groupHeading: string | Array<string>;
/** @default 'choices__button' */
button: string;
button: string | Array<string>;
/** @default 'is-active' */
activeState: string;
activeState: string | Array<string>;
/** @default 'is-focused' */
focusState: string;
focusState: string | Array<string>;
/** @default 'is-open' */
openState: string;
openState: string | Array<string>;
/** @default 'is-disabled' */
disabledState: string;
disabledState: string | Array<string>;
/** @default 'is-highlighted' */
highlightedState: string;
highlightedState: string | Array<string>;
/** @default 'is-selected' */
selectedState: string;
selectedState: string | Array<string>;
/** @default 'is-flipped' */
flippedState: string;
flippedState: string | Array<string>;
/** @default 'is-loading' */
loadingState: string;
loadingState: string | Array<string>;
/** @default 'has-no-results' */
noResults: string;
noResults: string | Array<string>;
/** @default 'has-no-choices' */
noChoices: string;
noChoices: string | Array<string>;
}

4
src/scripts/interfaces/options.ts
View file

@ -484,14 +484,14 @@ export interface Options {
* return {
* item: (data) => {
* return template(`
* <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
* <div class="${getClassNames(classNames.item).join(' ')} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
* <span>&bigstar;</span> ${data.label}
* </div>
* `);
* },
* choice: (data) => {
* return template(`
* <div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
* <div class="${getClassNames(classNames.item).join(' ')} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
* <span>&bigstar;</span> ${data.label}
* </div>
* `);

20
src/scripts/lib/utils.ts
View file

@ -181,6 +181,26 @@ export const diff = (
return aKeys.filter((i) => bKeys.indexOf(i) < 0);
};
export const getClassNames = (
ClassNames: Array<string> | string,
): Array<string> => {
return Array.isArray(ClassNames) ? ClassNames : [ClassNames];
};
export const getClassNamesSelector = (
option: string | Array<string> | null,
) => {
if (option && Array.isArray(option)) {
return option
.map((item) => {
return `.${item}`;
})
.join(' ');
}
return `.${option}`;
};
export const parseCustomProperties = (customProperties): any => {
if (typeof customProperties !== 'undefined') {
try {

120
src/scripts/templates.test.ts
View file

@ -1,6 +1,6 @@
import { expect } from 'chai';
import templates from './templates';
import { strToEl } from './lib/utils';
import { strToEl, getClassNames } from './lib/utils';
import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG } from './defaults';
import { Options } from './interfaces/options';
import { ClassNames } from './interfaces/class-names';
@ -56,7 +56,9 @@ describe('templates', () => {
const expectedOutput = strToEl(`
<div
class="${options.classNames.containerOuter}"
class="${getClassNames(options.classNames.containerOuter).join(
' ',
)}"
data-type="${passedElementType}"
role="combobox"
aria-autocomplete="list"
@ -123,7 +125,9 @@ describe('templates', () => {
const expectedOutput = strToEl(`
<div
class="${options.classNames.containerOuter}"
class="${getClassNames(options.classNames.containerOuter).join(
' ',
)}"
data-type="${passedElementType}"
role="listbox"
aria-haspopup="true"
@ -156,7 +160,9 @@ describe('templates', () => {
const expectedOutput = strToEl(`
<div
class="${options.classNames.containerOuter}"
class="${getClassNames(options.classNames.containerOuter).join(
' ',
)}"
data-type="${passedElementType}"
role="listbox"
tabindex="0"
@ -191,7 +197,9 @@ describe('templates', () => {
const expectedOutput = strToEl(`
<div
class="${options.classNames.containerOuter}"
class="${getClassNames(options.classNames.containerOuter).join(
' ',
)}"
data-type="${passedElementType}"
aria-haspopup="true"
aria-expanded="false"
@ -220,7 +228,9 @@ describe('templates', () => {
containerInner: 'class-1',
});
const expectedOutput = strToEl(
`<div class="${innerOptions.classNames.containerInner}"></div>`,
`<div class="${getClassNames(
innerOptions.classNames.containerInner,
).join(' ')}"></div>`,
);
const actualOutput = templates.containerInner(innerOptions);
@ -238,7 +248,11 @@ describe('templates', () => {
describe('select one element', () => {
it('returns expected html', () => {
const expectedOutput = strToEl(
`<div class="${itemOptions.classNames.list} ${itemOptions.classNames.listSingle}"></div>`,
`<div class="${getClassNames(itemOptions.classNames.list).join(
' ',
)} ${getClassNames(itemOptions.classNames.listSingle).join(
' ',
)}"></div>`,
);
const actualOutput = templates.itemList(itemOptions, true);
@ -249,7 +263,11 @@ describe('templates', () => {
describe('non select one element', () => {
it('returns expected html', () => {
const expectedOutput = strToEl(
`<div class="${itemOptions.classNames.list} ${itemOptions.classNames.listItems}"></div>`,
`<div class="${getClassNames(itemOptions.classNames.list).join(
' ',
)} ${getClassNames(itemOptions.classNames.listItems).join(
' ',
)}"></div>`,
);
const actualOutput = templates.itemList(itemOptions, false);
@ -265,7 +283,9 @@ describe('templates', () => {
});
const value = 'test';
const expectedOutput = strToEl(`
<div class="${placeholderOptions.classNames.placeholder}">${value}</div>`);
<div class="${getClassNames(
placeholderOptions.classNames.placeholder,
).join(' ')}">${value}</div>`);
const actualOutput = templates.placeholder(placeholderOptions, value);
expectEqualElements(actualOutput, expectedOutput);
@ -281,7 +301,9 @@ describe('templates', () => {
it('returns expected html', () => {
const expectedOutput = strToEl(`
<div
class="${choiceListOptions.classNames.list}"
class="${getClassNames(choiceListOptions.classNames.list).join(
' ',
)}"
role="listbox"
>
</div>
@ -296,7 +318,9 @@ describe('templates', () => {
it('returns expected html', () => {
const expectedOutput = strToEl(`
<div
class="${choiceListOptions.classNames.list}"
class="${getClassNames(choiceListOptions.classNames.list).join(
' ',
)}"
role="listbox"
aria-multiselectable="true"
>
@ -330,13 +354,15 @@ describe('templates', () => {
it('returns expected html', () => {
const expectedOutput = strToEl(`
<div
class="${groupOptions.classNames.group}"
class="${getClassNames(groupOptions.classNames.group).join(' ')}"
data-group
data-id="${data.id}"
data-value="${data.value}"
role="group"
>
<div class="${groupOptions.classNames.groupHeading}">${data.value}</div>
<div class="${getClassNames(
groupOptions.classNames.groupHeading,
).join(' ')}">${data.value}</div>
</div>
`);
const actualOutput = templates.choiceGroup(groupOptions, data);
@ -356,14 +382,18 @@ describe('templates', () => {
it('returns expected html', () => {
const expectedOutput = strToEl(`
<div
class="${groupOptions.classNames.group} ${groupOptions.classNames.itemDisabled}"
class="${getClassNames(groupOptions.classNames.group).join(
' ',
)} ${getClassNames(groupOptions.classNames.itemDisabled).join(' ')}"
data-group
data-id="${data.id}"
data-value="${data.value}"
role="group"
aria-disabled="true"
>
<div class="${groupOptions.classNames.groupHeading}">${data.value}</div>
<div class="${getClassNames(
groupOptions.classNames.groupHeading,
).join(' ')}">${data.value}</div>
</div>
`);
const actualOutput = templates.choiceGroup(groupOptions, data);
@ -403,7 +433,11 @@ describe('templates', () => {
it('returns expected html', () => {
const expectedOutput = strToEl(`
<div
class="${choiceOptions.classNames.item} ${choiceOptions.classNames.itemChoice} ${choiceOptions.classNames.itemSelectable}"
class="${getClassNames(choiceOptions.classNames.item).join(
' ',
)} ${getClassNames(choiceOptions.classNames.itemChoice).join(
' ',
)} ${getClassNames(choiceOptions.classNames.itemSelectable).join(' ')}"
data-select-text="${itemSelectText}"
data-choice
data-id="${data.id}"
@ -436,7 +470,11 @@ describe('templates', () => {
it('returns expected html', () => {
const expectedOutput = strToEl(`
<div
class="${choiceOptions.classNames.item} ${choiceOptions.classNames.itemChoice} ${choiceOptions.classNames.itemDisabled}"
class="${getClassNames(choiceOptions.classNames.item).join(
' ',
)} ${getClassNames(choiceOptions.classNames.itemChoice).join(
' ',
)} ${getClassNames(choiceOptions.classNames.itemDisabled).join(' ')}"
data-select-text="${itemSelectText}"
data-choice
data-id="${data.id}"
@ -470,7 +508,13 @@ describe('templates', () => {
it('returns expected html', () => {
const expectedOutput = strToEl(`
<div
class="${choiceOptions.classNames.item} ${choiceOptions.classNames.itemChoice} ${choiceOptions.classNames.selectedState} ${choiceOptions.classNames.itemSelectable}"
class="${getClassNames(choiceOptions.classNames.item).join(
' ',
)} ${getClassNames(choiceOptions.classNames.itemChoice).join(
' ',
)} ${choiceOptions.classNames.selectedState} ${getClassNames(
choiceOptions.classNames.itemSelectable,
).join(' ')}"
data-select-text="${itemSelectText}"
data-choice
data-id="${data.id}"
@ -503,7 +547,13 @@ describe('templates', () => {
it('returns expected html', () => {
const expectedOutput = strToEl(`
<div
class="${choiceOptions.classNames.item} ${choiceOptions.classNames.itemChoice} ${choiceOptions.classNames.placeholder} ${choiceOptions.classNames.itemSelectable}"
class="${getClassNames(choiceOptions.classNames.item).join(
' ',
)} ${getClassNames(choiceOptions.classNames.itemChoice).join(
' ',
)} ${choiceOptions.classNames.placeholder} ${getClassNames(
choiceOptions.classNames.itemSelectable,
).join(' ')}"
data-select-text="${itemSelectText}"
data-choice
data-id="${data.id}"
@ -536,7 +586,11 @@ describe('templates', () => {
it('returns expected html', () => {
const expectedOutput = strToEl(`
<div
class="${choiceOptions.classNames.item} ${choiceOptions.classNames.itemChoice} ${choiceOptions.classNames.itemSelectable}"
class="${getClassNames(choiceOptions.classNames.item).join(
' ',
)} ${getClassNames(choiceOptions.classNames.itemChoice).join(
' ',
)} ${getClassNames(choiceOptions.classNames.itemSelectable).join(' ')}"
data-select-text="${itemSelectText}"
data-choice
data-id="${data.id}"
@ -575,7 +629,9 @@ describe('templates', () => {
<input
type="search"
name="search_terms"
class="${inputOptions.classNames.input} ${inputOptions.classNames.inputCloned}"
class="${getClassNames(inputOptions.classNames.input).join(
' ',
)} ${getClassNames(inputOptions.classNames.inputCloned).join(' ')}"
autocomplete="off"
role="textbox"
aria-autocomplete="list"
@ -596,7 +652,11 @@ describe('templates', () => {
it('returns expected html', () => {
const expectedOutput = strToEl(
`<div class="${dropdownOptions.classNames.list} ${dropdownOptions.classNames.listDropdown}" aria-expanded="false"></div>`,
`<div class="${getClassNames(dropdownOptions.classNames.list).join(
' ',
)} ${getClassNames(dropdownOptions.classNames.listDropdown).join(
' ',
)}" aria-expanded="false"></div>`,
);
const actualOutput = templates.dropdown(dropdownOptions);
@ -616,7 +676,9 @@ describe('templates', () => {
it('returns expected html', () => {
const expectedOutput = strToEl(`
<div class="${noticeOptions.classNames.item} ${noticeOptions.classNames.itemChoice}">
<div class="${getClassNames(noticeOptions.classNames.item).join(
' ',
)} ${getClassNames(noticeOptions.classNames.itemChoice).join(' ')}">
${label}
</div>
`);
@ -629,7 +691,11 @@ describe('templates', () => {
describe('no results', () => {
it('adds no results classname', () => {
const expectedOutput = strToEl(`
<div class="${noticeOptions.classNames.item} ${noticeOptions.classNames.itemChoice} ${noticeOptions.classNames.noResults}">
<div class="${getClassNames(noticeOptions.classNames.item).join(
' ',
)} ${getClassNames(noticeOptions.classNames.itemChoice).join(
' ',
)} ${getClassNames(noticeOptions.classNames.noResults).join(' ')}">
${label}
</div>
`);
@ -646,7 +712,11 @@ describe('templates', () => {
describe('no choices', () => {
it('adds no choices classname', () => {
const expectedOutput = strToEl(`
<div class="${noticeOptions.classNames.item} ${noticeOptions.classNames.itemChoice} ${noticeOptions.classNames.noChoices}">
<div class="${getClassNames(noticeOptions.classNames.item).join(
' ',
)} ${getClassNames(noticeOptions.classNames.itemChoice).join(
' ',
)} ${getClassNames(noticeOptions.classNames.noChoices).join(' ')}">
${label}
</div>
`);

56
src/scripts/templates.ts
View file

@ -7,6 +7,7 @@ import { Choice } from './interfaces/choice';
import { Group } from './interfaces/group';
import { Item } from './interfaces/item';
import { PassedElementType } from './interfaces/passed-element-type';
import { getClassNames } from './lib/utils';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type TemplateOptions = Record<'classNames' | 'allowHTML', any>;
@ -22,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;
@ -55,7 +56,7 @@ const templates = {
classNames: { containerInner },
}: TemplateOptions): HTMLDivElement {
return Object.assign(document.createElement('div'), {
className: containerInner,
className: getClassNames(containerInner).join(' '),
});
},
@ -64,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(' ')
}`,
});
},
@ -73,7 +78,7 @@ const templates = {
value: string,
): HTMLDivElement {
return Object.assign(document.createElement('div'), {
className: placeholder,
className: getClassNames(placeholder).join(' '),
[allowHTML ? 'innerHTML' : 'innerText']: value,
});
},
@ -102,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,
});
@ -122,21 +127,25 @@ const templates = {
}
if (isPlaceholder) {
div.classList.add(placeholder);
div.classList.add(...getClassNames(placeholder));
}
div.classList.add(highlighted ? highlightedState : itemSelectable);
div.classList.add(
...(highlighted
? getClassNames(highlightedState)
: getClassNames(itemSelectable)),
);
if (removeItemButton) {
if (disabled) {
div.classList.remove(itemSelectable);
div.classList.remove(...getClassNames(itemSelectable));
}
div.dataset.deletable = '';
/** @todo This MUST be localizable, not hardcoded! */
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(
@ -155,7 +164,7 @@ const templates = {
isSelectOneElement: boolean,
): HTMLDivElement {
const div = Object.assign(document.createElement('div'), {
className: list,
className: getClassNames(list).join(' '),
});
if (!isSelectOneElement) {
@ -174,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');
@ -191,7 +202,7 @@ const templates = {
div.appendChild(
Object.assign(document.createElement('div'), {
className: groupHeading,
className: getClassNames(groupHeading).join(' '),
[allowHTML ? 'innerHTML' : 'innerText']: value,
}),
);
@ -226,15 +237,17 @@ 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) {
div.classList.add(selectedState);
div.classList.add(...getClassNames(selectedState));
}
if (isPlaceholder) {
div.classList.add(placeholder);
div.classList.add(...getClassNames(placeholder));
}
div.setAttribute('role', groupId && groupId > 0 ? 'treeitem' : 'option');
@ -247,11 +260,11 @@ const templates = {
});
if (isDisabled) {
div.classList.add(itemDisabled);
div.classList.add(...getClassNames(itemDisabled));
div.dataset.choiceDisabled = '';
div.setAttribute('aria-disabled', 'true');
} else {
div.classList.add(itemSelectable);
div.classList.add(...getClassNames(itemSelectable));
div.dataset.choiceSelectable = '';
}
@ -265,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,
@ -283,7 +298,8 @@ const templates = {
}: TemplateOptions): HTMLDivElement {
const div = document.createElement('div');
div.classList.add(list, listDropdown);
div.classList.add(...getClassNames(list));
div.classList.add(...getClassNames(listDropdown));
div.setAttribute('aria-expanded', 'false');
return div;
@ -297,7 +313,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);

7350
yarn.lock Normal file
View file

File diff suppressed because it is too large Load diff