deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-17 21:16:34 +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 { return {
item: ({ classNames }, data) => { item: ({ classNames }, data) => {
return template(` return template(`
<div class="${classNames.item} ${ <div class="${getClassNames(classNames.item).join(' ')} ${
data.highlighted getClassNames(data.highlighted
? classNames.highlightedState ? classNames.highlightedState
: classNames.itemSelectable : classNames.itemSelectable).join(' ')
} ${ } ${
data.placeholder ? classNames.placeholder : '' data.placeholder ? classNames.placeholder : ''
}" data-item data-id="${data.id}" data-value="${data.value}" ${ }" data-item data-id="${data.id}" data-value="${data.value}" ${
@ -715,8 +715,8 @@ const example = new Choices(element, {
}, },
choice: ({ classNames }, data) => { choice: ({ classNames }, data) => {
return template(` return template(`
<div class="${classNames.item} ${classNames.itemChoice} ${ <div class="${getClassNames(classNames.item).join(' ')} ${getClassNames(classNames.itemChoice).join(' ')} ${
data.disabled ? classNames.itemDisabled : classNames.itemSelectable getClassNames(data.disabled ? classNames.itemDisabled : classNames.itemSelectable).join(' ')
}" data-select-text="${this.config.itemSelectText}" data-choice ${ }" data-select-text="${this.config.itemSelectText}" data-choice ${
data.disabled data.disabled
? 'data-choice-disabled aria-disabled="true"' ? '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) { if (setLoading === void 0) {
setLoading = true; 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) { if (setLoading) {
this.disable(); this.disable();
this.containerOuter.addLoadingState(); this.containerOuter.addLoadingState();
@ -1371,7 +1371,7 @@ var Choices = /** @class */function () {
event.preventDefault(); event.preventDefault();
} }
if (hasActiveDropdown) { 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) { if (highlightedChoice) {
// add enter keyCode value // add enter keyCode value
if (activeItems[0]) { if (activeItems[0]) {
@ -1413,7 +1413,7 @@ var Choices = /** @class */function () {
nextEl = this.dropdown.element.querySelector(selectableChoiceIdentifier); nextEl = this.dropdown.element.querySelector(selectableChoiceIdentifier);
} }
} else { } 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) { if (currentEl) {
nextEl = (0, utils_1.getAdjacentEl)(currentEl, selectableChoiceIdentifier, directionInt); nextEl = (0, utils_1.getAdjacentEl)(currentEl, selectableChoiceIdentifier, directionInt);
} else { } else {
@ -1603,6 +1603,7 @@ var Choices = /** @class */function () {
this._store.dispatch((0, misc_1.resetTo)(this._initialState)); this._store.dispatch((0, misc_1.resetTo)(this._initialState));
}; };
Choices.prototype._highlightChoice = function (el) { Choices.prototype._highlightChoice = function (el) {
var _a;
var _this = this; var _this = this;
if (el === void 0) { if (el === void 0) {
el = null; el = null;
@ -1612,10 +1613,11 @@ var Choices = /** @class */function () {
return; return;
} }
var passedEl = el; 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 // Remove any highlighted choices
highlightedChoices.forEach(function (choice) { 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'); choice.setAttribute('aria-selected', 'false');
}); });
if (passedEl) { if (passedEl) {
@ -1633,7 +1635,7 @@ var Choices = /** @class */function () {
passedEl = choices[0]; 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'); passedEl.setAttribute('aria-selected', 'true');
this.passedElement.triggerEvent(constants_1.EVENTS.highlightChoice, { this.passedElement.triggerEvent(constants_1.EVENTS.highlightChoice, {
el: passedEl el: passedEl
@ -2134,22 +2136,24 @@ var Container = /** @class */function () {
this.element.removeAttribute('aria-activedescendant'); this.element.removeAttribute('aria-activedescendant');
}; };
Container.prototype.open = function (dropdownPos) { 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.element.setAttribute('aria-expanded', 'true');
this.isOpen = true; this.isOpen = true;
if (this.shouldFlip(dropdownPos)) { 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; this.isFlipped = true;
} }
}; };
Container.prototype.close = function () { 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.element.setAttribute('aria-expanded', 'false');
this.removeActiveDescendant(); this.removeActiveDescendant();
this.isOpen = false; this.isOpen = false;
// A dropdown flips if it does not have space within the page // A dropdown flips if it does not have space within the page
if (this.isFlipped) { 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; this.isFlipped = false;
} }
}; };
@ -2159,13 +2163,16 @@ var Container = /** @class */function () {
} }
}; };
Container.prototype.addFocusState = 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 () { 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 () { 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'); this.element.removeAttribute('aria-disabled');
if (this.type === constants_1.SELECT_ONE_TYPE) { if (this.type === constants_1.SELECT_ONE_TYPE) {
this.element.setAttribute('tabindex', '0'); this.element.setAttribute('tabindex', '0');
@ -2173,7 +2180,8 @@ var Container = /** @class */function () {
this.isDisabled = false; this.isDisabled = false;
}; };
Container.prototype.disable = function () { 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'); this.element.setAttribute('aria-disabled', 'true');
if (this.type === constants_1.SELECT_ONE_TYPE) { if (this.type === constants_1.SELECT_ONE_TYPE) {
this.element.setAttribute('tabindex', '-1'); this.element.setAttribute('tabindex', '-1');
@ -2192,12 +2200,14 @@ var Container = /** @class */function () {
} }
}; };
Container.prototype.addLoadingState = 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.element.setAttribute('aria-busy', 'true');
this.isLoading = true; this.isLoading = true;
}; };
Container.prototype.removeLoadingState = function () { 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.element.removeAttribute('aria-busy');
this.isLoading = false; this.isLoading = false;
}; };
@ -2214,13 +2224,14 @@ exports["default"] = Container;
/***/ }), /***/ }),
/***/ 217: /***/ 217:
/***/ (function(__unused_webpack_module, exports) { /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
Object.defineProperty(exports, "__esModule", ({ Object.defineProperty(exports, "__esModule", ({
value: true value: true
})); }));
var utils_1 = __webpack_require__(799);
var Dropdown = /** @class */function () { var Dropdown = /** @class */function () {
function Dropdown(_a) { function Dropdown(_a) {
var element = _a.element, var element = _a.element,
@ -2248,7 +2259,8 @@ var Dropdown = /** @class */function () {
* Show dropdown to user by adding active state class * Show dropdown to user by adding active state class
*/ */
Dropdown.prototype.show = function () { 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.element.setAttribute('aria-expanded', 'true');
this.isActive = true; this.isActive = true;
return this; return this;
@ -2257,7 +2269,8 @@ var Dropdown = /** @class */function () {
* Hide dropdown from user * Hide dropdown from user
*/ */
Dropdown.prototype.hide = function () { 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.element.setAttribute('aria-expanded', 'false');
this.isActive = false; this.isActive = false;
return this; return this;
@ -2569,8 +2582,9 @@ var WrappedElement = /** @class */function () {
configurable: true configurable: true
}); });
WrappedElement.prototype.conceal = function () { WrappedElement.prototype.conceal = function () {
var _a;
// Hide passed input // 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; this.element.hidden = true;
// Remove element from tab index // Remove element from tab index
this.element.tabIndex = -1; this.element.tabIndex = -1;
@ -2582,8 +2596,9 @@ var WrappedElement = /** @class */function () {
this.element.setAttribute('data-choice', 'active'); this.element.setAttribute('data-choice', 'active');
}; };
WrappedElement.prototype.reveal = function () { WrappedElement.prototype.reveal = function () {
var _a;
// Reinstate passed element // 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.hidden = false;
this.element.removeAttribute('tabindex'); this.element.removeAttribute('tabindex');
// Recover original styles if any // Recover original styles if any
@ -2853,7 +2868,7 @@ exports.DEFAULT_CLASSNAMES = {
itemSelectable: 'choices__item--selectable', itemSelectable: 'choices__item--selectable',
itemDisabled: 'choices__item--disabled', itemDisabled: 'choices__item--disabled',
itemChoice: 'choices__item--choice', itemChoice: 'choices__item--choice',
placeholder: 'choices__placeholder', placeholder: ['choices__placeholder'],
group: 'choices__group', group: 'choices__group',
groupHeading: 'choices__heading', groupHeading: 'choices__heading',
button: 'choices__button', button: 'choices__button',
@ -3146,7 +3161,7 @@ Object.defineProperty(exports, "__esModule", ({
Object.defineProperty(exports, "__esModule", ({ Object.defineProperty(exports, "__esModule", ({
value: true 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) { var getRandomNumber = function (min, max) {
return Math.floor(Math.random() * (max - min) + min); return Math.floor(Math.random() * (max - min) + min);
}; };
@ -3301,6 +3316,19 @@ var diff = function (a, b) {
}); });
}; };
exports.diff = diff; 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) { var parseCustomProperties = function (customProperties) {
if (typeof customProperties !== 'undefined') { if (typeof customProperties !== 'undefined') {
try { try {
@ -3504,7 +3532,7 @@ Object.defineProperty(exports, "__esModule", ({
value: true value: true
})); }));
exports.defaultState = void 0; exports.defaultState = void 0;
var redux_1 = __webpack_require__(791); var redux_1 = __webpack_require__(857);
var items_1 = __importDefault(__webpack_require__(52)); var items_1 = __importDefault(__webpack_require__(52));
var groups_1 = __importDefault(__webpack_require__(871)); var groups_1 = __importDefault(__webpack_require__(871));
var choices_1 = __importDefault(__webpack_require__(273)); var choices_1 = __importDefault(__webpack_require__(273));
@ -3675,7 +3703,7 @@ Object.defineProperty(exports, "__esModule", ({
value: true value: true
})); }));
/* eslint-disable @typescript-eslint/no-explicit-any */ /* 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 index_1 = __importDefault(__webpack_require__(655));
var Store = /** @class */function () { var Store = /** @class */function () {
function Store() { function Store() {
@ -3853,7 +3881,7 @@ exports["default"] = Store;
/***/ }), /***/ }),
/***/ 686: /***/ 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 * Helpers to create HTML elements used by Choices
* Can be overridden by providing `callbackOnCreateTemplates` option * 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", ({ Object.defineProperty(exports, "__esModule", ({
value: true value: true
})); }));
var utils_1 = __webpack_require__(799);
var templates = { var templates = {
containerOuter: function (_a, dir, isSelectElement, isSelectOneElement, searchEnabled, passedElementType, labelId) { containerOuter: function (_a, dir, isSelectElement, isSelectOneElement, searchEnabled, passedElementType, labelId) {
var containerOuter = _a.classNames.containerOuter; var containerOuter = _a.classNames.containerOuter;
var div = Object.assign(document.createElement('div'), { var div = Object.assign(document.createElement('div'), {
className: containerOuter className: (0, utils_1.getClassNames)(containerOuter).join(' ')
}); });
div.dataset.type = passedElementType; div.dataset.type = passedElementType;
if (dir) { if (dir) {
@ -3893,7 +3931,7 @@ var templates = {
containerInner: function (_a) { containerInner: function (_a) {
var containerInner = _a.classNames.containerInner; var containerInner = _a.classNames.containerInner;
return Object.assign(document.createElement('div'), { return Object.assign(document.createElement('div'), {
className: containerInner className: (0, utils_1.getClassNames)(containerInner).join(' ')
}); });
}, },
itemList: function (_a, isSelectOneElement) { itemList: function (_a, isSelectOneElement) {
@ -3902,7 +3940,7 @@ var templates = {
listSingle = _b.listSingle, listSingle = _b.listSingle,
listItems = _b.listItems; listItems = _b.listItems;
return Object.assign(document.createElement('div'), { 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) { placeholder: function (_a, value) {
@ -3910,18 +3948,18 @@ var templates = {
var allowHTML = _a.allowHTML, var allowHTML = _a.allowHTML,
placeholder = _a.classNames.placeholder; placeholder = _a.classNames.placeholder;
return Object.assign(document.createElement('div'), (_b = { return Object.assign(document.createElement('div'), (_b = {
className: placeholder className: (0, utils_1.getClassNames)(placeholder).join(' ')
}, _b[allowHTML ? 'innerHTML' : 'innerText'] = value, _b)); }, _b[allowHTML ? 'innerHTML' : 'innerText'] = value, _b));
}, },
item: function (_a, _b, removeItemButton) { item: function (_a, _b, removeItemButton) {
var _c, _d; var _c, _d, _e, _f, _g;
var allowHTML = _a.allowHTML, var allowHTML = _a.allowHTML,
_e = _a.classNames, _h = _a.classNames,
item = _e.item, item = _h.item,
button = _e.button, button = _h.button,
highlightedState = _e.highlightedState, highlightedState = _h.highlightedState,
itemSelectable = _e.itemSelectable, itemSelectable = _h.itemSelectable,
placeholder = _e.placeholder; placeholder = _h.placeholder;
var id = _b.id, var id = _b.id,
value = _b.value, value = _b.value,
label = _b.label, label = _b.label,
@ -3931,7 +3969,7 @@ var templates = {
highlighted = _b.highlighted, highlighted = _b.highlighted,
isPlaceholder = _b.placeholder; isPlaceholder = _b.placeholder;
var div = Object.assign(document.createElement('div'), (_c = { var div = Object.assign(document.createElement('div'), (_c = {
className: item className: (0, utils_1.getClassNames)(item).join(' ')
}, _c[allowHTML ? 'innerHTML' : 'innerText'] = label, _c)); }, _c[allowHTML ? 'innerHTML' : 'innerText'] = label, _c));
Object.assign(div.dataset, { Object.assign(div.dataset, {
item: '', item: '',
@ -3946,20 +3984,20 @@ var templates = {
div.setAttribute('aria-disabled', 'true'); div.setAttribute('aria-disabled', 'true');
} }
if (isPlaceholder) { 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 (removeItemButton) {
if (disabled) { if (disabled) {
div.classList.remove(itemSelectable); (_f = div.classList).remove.apply(_f, (0, utils_1.getClassNames)(itemSelectable));
} }
div.dataset.deletable = ''; div.dataset.deletable = '';
/** @todo This MUST be localizable, not hardcoded! */ /** @todo This MUST be localizable, not hardcoded! */
var REMOVE_ITEM_TEXT = 'Remove item'; var REMOVE_ITEM_TEXT = 'Remove item';
var removeButton = Object.assign(document.createElement('button'), (_d = { var removeButton = Object.assign(document.createElement('button'), (_g = {
type: 'button', type: 'button',
className: button className: (0, utils_1.getClassNames)(button).join(' ')
}, _d[allowHTML ? 'innerHTML' : 'innerText'] = REMOVE_ITEM_TEXT, _d)); }, _g[allowHTML ? 'innerHTML' : 'innerText'] = REMOVE_ITEM_TEXT, _g));
removeButton.setAttribute('aria-label', "".concat(REMOVE_ITEM_TEXT, ": '").concat(value, "'")); removeButton.setAttribute('aria-label', "".concat(REMOVE_ITEM_TEXT, ": '").concat(value, "'"));
removeButton.dataset.button = ''; removeButton.dataset.button = '';
div.appendChild(removeButton); div.appendChild(removeButton);
@ -3969,7 +4007,7 @@ var templates = {
choiceList: function (_a, isSelectOneElement) { choiceList: function (_a, isSelectOneElement) {
var list = _a.classNames.list; var list = _a.classNames.list;
var div = Object.assign(document.createElement('div'), { var div = Object.assign(document.createElement('div'), {
className: list className: (0, utils_1.getClassNames)(list).join(' ')
}); });
if (!isSelectOneElement) { if (!isSelectOneElement) {
div.setAttribute('aria-multiselectable', 'true'); div.setAttribute('aria-multiselectable', 'true');
@ -3988,7 +4026,7 @@ var templates = {
value = _b.value, value = _b.value,
disabled = _b.disabled; disabled = _b.disabled;
var div = Object.assign(document.createElement('div'), { 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'); div.setAttribute('role', 'group');
Object.assign(div.dataset, { Object.assign(div.dataset, {
@ -4000,20 +4038,20 @@ var templates = {
div.setAttribute('aria-disabled', 'true'); div.setAttribute('aria-disabled', 'true');
} }
div.appendChild(Object.assign(document.createElement('div'), (_c = { div.appendChild(Object.assign(document.createElement('div'), (_c = {
className: groupHeading className: (0, utils_1.getClassNames)(groupHeading).join(' ')
}, _c[allowHTML ? 'innerHTML' : 'innerText'] = value, _c))); }, _c[allowHTML ? 'innerHTML' : 'innerText'] = value, _c)));
return div; return div;
}, },
choice: function (_a, _b, selectText) { choice: function (_a, _b, selectText) {
var _c; var _c, _d, _e, _f, _g;
var allowHTML = _a.allowHTML, var allowHTML = _a.allowHTML,
_d = _a.classNames, _h = _a.classNames,
item = _d.item, item = _h.item,
itemChoice = _d.itemChoice, itemChoice = _h.itemChoice,
itemSelectable = _d.itemSelectable, itemSelectable = _h.itemSelectable,
selectedState = _d.selectedState, selectedState = _h.selectedState,
itemDisabled = _d.itemDisabled, itemDisabled = _h.itemDisabled,
placeholder = _d.placeholder; placeholder = _h.placeholder;
var id = _b.id, var id = _b.id,
value = _b.value, value = _b.value,
label = _b.label, label = _b.label,
@ -4024,12 +4062,12 @@ var templates = {
isPlaceholder = _b.placeholder; isPlaceholder = _b.placeholder;
var div = Object.assign(document.createElement('div'), (_c = { var div = Object.assign(document.createElement('div'), (_c = {
id: elementId 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) { if (isSelected) {
div.classList.add(selectedState); (_d = div.classList).add.apply(_d, (0, utils_1.getClassNames)(selectedState));
} }
if (isPlaceholder) { 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'); div.setAttribute('role', groupId && groupId > 0 ? 'treeitem' : 'option');
Object.assign(div.dataset, { Object.assign(div.dataset, {
@ -4039,11 +4077,11 @@ var templates = {
selectText: selectText selectText: selectText
}); });
if (isDisabled) { if (isDisabled) {
div.classList.add(itemDisabled); (_f = div.classList).add.apply(_f, (0, utils_1.getClassNames)(itemDisabled));
div.dataset.choiceDisabled = ''; div.dataset.choiceDisabled = '';
div.setAttribute('aria-disabled', 'true'); div.setAttribute('aria-disabled', 'true');
} else { } else {
div.classList.add(itemSelectable); (_g = div.classList).add.apply(_g, (0, utils_1.getClassNames)(itemSelectable));
div.dataset.choiceSelectable = ''; div.dataset.choiceSelectable = '';
} }
return div; return div;
@ -4055,7 +4093,7 @@ var templates = {
var inp = Object.assign(document.createElement('input'), { var inp = Object.assign(document.createElement('input'), {
type: 'search', type: 'search',
name: 'search_terms', 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', autocomplete: 'off',
autocapitalize: 'off', autocapitalize: 'off',
spellcheck: false spellcheck: false
@ -4066,11 +4104,13 @@ var templates = {
return inp; return inp;
}, },
dropdown: function (_a) { dropdown: function (_a) {
var _b = _a.classNames, var _b, _c;
list = _b.list, var _d = _a.classNames,
listDropdown = _b.listDropdown; list = _d.list,
listDropdown = _d.listDropdown;
var div = document.createElement('div'); 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'); div.setAttribute('aria-expanded', 'false');
return div; return div;
}, },
@ -4085,7 +4125,7 @@ var templates = {
if (type === void 0) { if (type === void 0) {
type = ''; 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') { if (type === 'no-choices') {
classes.push(noChoices); classes.push(noChoices);
} else if (type === 'no-results') { } else if (type === 'no-results') {
@ -6040,7 +6080,7 @@ Fuse.config = Config;
/***/ }), /***/ }),
/***/ 791: /***/ 857:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
// ESM COMPAT FLAG // ESM COMPAT FLAG
@ -6057,39 +6097,8 @@ __webpack_require__.d(__webpack_exports__, {
"legacy_createStore": function() { return /* binding */ legacy_createStore; } "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 ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/defineProperty.js
function _defineProperty(obj, key, value) { function _defineProperty(obj, key, value) {
key = _toPropertyKey(key);
if (key in obj) { if (key in obj) {
Object.defineProperty(obj, key, { Object.defineProperty(obj, key, {
value: value, 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_constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(883);
/* harmony import */ var _scripts_defaults__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(789); /* 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__ = __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. */ /** Classes added to HTML generated by By default classnames follow the BEM notation. */
export interface ClassNames { export interface ClassNames {
/** @default 'choices' */ /** @default 'choices' */
containerOuter: string; containerOuter: string | Array<string>;
/** @default 'choices__inner' */ /** @default 'choices__inner' */
containerInner: string; containerInner: string | Array<string>;
/** @default 'choices__input' */ /** @default 'choices__input' */
input: string; input: string | Array<string>;
/** @default 'choices__input--cloned' */ /** @default 'choices__input--cloned' */
inputCloned: string; inputCloned: string | Array<string>;
/** @default 'choices__list' */ /** @default 'choices__list' */
list: string; list: string | Array<string>;
/** @default 'choices__list--multiple' */ /** @default 'choices__list--multiple' */
listItems: string; listItems: string | Array<string>;
/** @default 'choices__list--single' */ /** @default 'choices__list--single' */
listSingle: string; listSingle: string | Array<string>;
/** @default 'choices__list--dropdown' */ /** @default 'choices__list--dropdown' */
listDropdown: string; listDropdown: string | Array<string>;
/** @default 'choices__item' */ /** @default 'choices__item' */
item: string; item: string | Array<string>;
/** @default 'choices__item--selectable' */ /** @default 'choices__item--selectable' */
itemSelectable: string; itemSelectable: string | Array<string>;
/** @default 'choices__item--disabled' */ /** @default 'choices__item--disabled' */
itemDisabled: string; itemDisabled: string | Array<string>;
/** @default 'choices__item--choice' */ /** @default 'choices__item--choice' */
itemChoice: string; itemChoice: string | Array<string>;
/** @default 'choices__placeholder' */ /** @default 'choices__placeholder' */
placeholder: string; placeholder: string | Array<string>;
/** @default 'choices__group' */ /** @default 'choices__group' */
group: string; group: string | Array<string>;
/** @default 'choices__heading' */ /** @default 'choices__heading' */
groupHeading: string; groupHeading: string | Array<string>;
/** @default 'choices__button' */ /** @default 'choices__button' */
button: string; button: string | Array<string>;
/** @default 'is-active' */ /** @default 'is-active' */
activeState: string; activeState: string | Array<string>;
/** @default 'is-focused' */ /** @default 'is-focused' */
focusState: string; focusState: string | Array<string>;
/** @default 'is-open' */ /** @default 'is-open' */
openState: string; openState: string | Array<string>;
/** @default 'is-disabled' */ /** @default 'is-disabled' */
disabledState: string; disabledState: string | Array<string>;
/** @default 'is-highlighted' */ /** @default 'is-highlighted' */
highlightedState: string; highlightedState: string | Array<string>;
/** @default 'is-selected' */ /** @default 'is-selected' */
selectedState: string; selectedState: string | Array<string>;
/** @default 'is-flipped' */ /** @default 'is-flipped' */
flippedState: string; flippedState: string | Array<string>;
/** @default 'is-loading' */ /** @default 'is-loading' */
loadingState: string; loadingState: string | Array<string>;
/** @default 'has-no-results' */ /** @default 'has-no-results' */
noResults: string; noResults: string | Array<string>;
/** @default 'has-no-choices' */ /** @default 'has-no-choices' */
noChoices: string; noChoices: string | Array<string>;
} }
//# sourceMappingURL=class-names.d.ts.map //# 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 { * return {
* item: (data) => { * item: (data) => {
* return template(` * 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} * <span>&bigstar;</span> ${data.label}
* </div> * </div>
* `); * `);
* }, * },
* choice: (data) => { * choice: (data) => {
* return template(` * 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} * <span>&bigstar;</span> ${data.label}
* </div> * </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 * 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 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 declare const parseCustomProperties: (customProperties: any) => any;
export {}; export {};
//# sourceMappingURL=utils.d.ts.map //# 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, existsInArray,
generateId, generateId,
getAdjacentEl, getAdjacentEl,
getClassNames,
getClassNamesSelector,
getType, getType,
isScrolledIntoView, isScrolledIntoView,
isType, isType,
@ -1195,7 +1197,7 @@ class Choices implements Choices {
_handleLoadingState(setLoading = true): void { _handleLoadingState(setLoading = true): void {
let placeholderItem = this.itemList.getChild( let placeholderItem = this.itemList.getChild(
`.${this.config.classNames.placeholder}`, getClassNamesSelector(this.config.classNames.placeholder),
); );
if (setLoading) { if (setLoading) {
@ -1575,7 +1577,7 @@ class Choices implements Choices {
if (hasActiveDropdown) { if (hasActiveDropdown) {
const highlightedChoice = this.dropdown.getChild( const highlightedChoice = this.dropdown.getChild(
`.${this.config.classNames.highlightedState}`, getClassNamesSelector(this.config.classNames.highlightedState),
); );
if (highlightedChoice) { if (highlightedChoice) {
@ -1632,7 +1634,7 @@ class Choices implements Choices {
} }
} else { } else {
const currentEl = this.dropdown.element.querySelector( const currentEl = this.dropdown.element.querySelector(
`.${this.config.classNames.highlightedState}`, getClassNamesSelector(this.config.classNames.highlightedState),
); );
if (currentEl) { if (currentEl) {
nextEl = getAdjacentEl( nextEl = getAdjacentEl(
@ -1896,13 +1898,15 @@ class Choices implements Choices {
let passedEl = el; let passedEl = el;
const highlightedChoices = Array.from( const highlightedChoices = Array.from(
this.dropdown.element.querySelectorAll( this.dropdown.element.querySelectorAll(
`.${this.config.classNames.highlightedState}`, getClassNamesSelector(this.config.classNames.highlightedState),
), ),
); );
// Remove any highlighted choices // Remove any highlighted choices
highlightedChoices.forEach((choice) => { highlightedChoices.forEach((choice) => {
choice.classList.remove(this.config.classNames.highlightedState); choice.classList.remove(
...getClassNames(this.config.classNames.highlightedState),
);
choice.setAttribute('aria-selected', 'false'); 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'); passedEl.setAttribute('aria-selected', 'true');
this.passedElement.triggerEvent(EVENTS.highlightChoice, { el: passedEl }); 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 { SELECT_ONE_TYPE } from '../constants';
import { ClassNames } from '../interfaces/class-names'; import { ClassNames } from '../interfaces/class-names';
import { PositionOptionsType } from '../interfaces/position-options-type'; import { PositionOptionsType } from '../interfaces/position-options-type';
@ -88,25 +88,29 @@ export default class Container {
} }
open(dropdownPos: number): void { 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.element.setAttribute('aria-expanded', 'true');
this.isOpen = true; this.isOpen = true;
if (this.shouldFlip(dropdownPos)) { if (this.shouldFlip(dropdownPos)) {
this.element.classList.add(this.classNames.flippedState); this.element.classList.add(
...getClassNames(this.classNames.flippedState),
);
this.isFlipped = true; this.isFlipped = true;
} }
} }
close(): void { close(): void {
this.element.classList.remove(this.classNames.openState); this.element.classList.remove(...getClassNames(this.classNames.openState));
this.element.setAttribute('aria-expanded', 'false'); this.element.setAttribute('aria-expanded', 'false');
this.removeActiveDescendant(); this.removeActiveDescendant();
this.isOpen = false; this.isOpen = false;
// A dropdown flips if it does not have space within the page // A dropdown flips if it does not have space within the page
if (this.isFlipped) { if (this.isFlipped) {
this.element.classList.remove(this.classNames.flippedState); this.element.classList.remove(
...getClassNames(this.classNames.flippedState),
);
this.isFlipped = false; this.isFlipped = false;
} }
} }
@ -118,15 +122,17 @@ export default class Container {
} }
addFocusState(): void { addFocusState(): void {
this.element.classList.add(this.classNames.focusState); this.element.classList.add(...getClassNames(this.classNames.focusState));
} }
removeFocusState(): void { removeFocusState(): void {
this.element.classList.remove(this.classNames.focusState); this.element.classList.remove(...getClassNames(this.classNames.focusState));
} }
enable(): void { enable(): void {
this.element.classList.remove(this.classNames.disabledState); this.element.classList.remove(
...getClassNames(this.classNames.disabledState),
);
this.element.removeAttribute('aria-disabled'); this.element.removeAttribute('aria-disabled');
if (this.type === SELECT_ONE_TYPE) { if (this.type === SELECT_ONE_TYPE) {
this.element.setAttribute('tabindex', '0'); this.element.setAttribute('tabindex', '0');
@ -135,7 +141,7 @@ export default class Container {
} }
disable(): void { disable(): void {
this.element.classList.add(this.classNames.disabledState); this.element.classList.add(...getClassNames(this.classNames.disabledState));
this.element.setAttribute('aria-disabled', 'true'); this.element.setAttribute('aria-disabled', 'true');
if (this.type === SELECT_ONE_TYPE) { if (this.type === SELECT_ONE_TYPE) {
this.element.setAttribute('tabindex', '-1'); this.element.setAttribute('tabindex', '-1');
@ -157,13 +163,15 @@ export default class Container {
} }
addLoadingState(): void { addLoadingState(): void {
this.element.classList.add(this.classNames.loadingState); this.element.classList.add(...getClassNames(this.classNames.loadingState));
this.element.setAttribute('aria-busy', 'true'); this.element.setAttribute('aria-busy', 'true');
this.isLoading = true; this.isLoading = true;
} }
removeLoadingState(): void { removeLoadingState(): void {
this.element.classList.remove(this.classNames.loadingState); this.element.classList.remove(
...getClassNames(this.classNames.loadingState),
);
this.element.removeAttribute('aria-busy'); this.element.removeAttribute('aria-busy');
this.isLoading = false; this.isLoading = false;
} }

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

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

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

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

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

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

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

@ -1,4 +1,5 @@
import { expect } from 'chai'; import { expect } from 'chai';
import { getClassNames } from '../lib/utils';
import { DEFAULT_CLASSNAMES } from '../defaults'; import { DEFAULT_CLASSNAMES } from '../defaults';
import WrappedElement from './wrapped-element'; import WrappedElement from './wrapped-element';
@ -79,8 +80,12 @@ describe('components/wrappedElement', () => {
it('hides element', () => { it('hides element', () => {
instance.conceal(); instance.conceal();
expect(instance.element.tabIndex).to.equal(-1); expect(instance.element.tabIndex).to.equal(-1);
const classesToCheck = getClassNames(instance.classNames.input);
expect( expect(
instance.element.classList.contains(instance.classNames.input), [...instance.element.classList].some(
(className) => classesToCheck.indexOf(className) !== -1,
),
).to.equal(true); ).to.equal(true);
expect(instance.element.hidden).to.be.true; expect(instance.element.hidden).to.be.true;
expect(instance.element.getAttribute('data-choice')).to.equal('active'); expect(instance.element.getAttribute('data-choice')).to.equal('active');
@ -101,8 +106,12 @@ describe('components/wrappedElement', () => {
it('shows element', () => { it('shows element', () => {
instance.reveal(); instance.reveal();
expect(instance.element.tabIndex).to.equal(0); expect(instance.element.tabIndex).to.equal(0);
const classesToCheck = getClassNames(instance.classNames.input);
expect( expect(
instance.element.classList.contains(instance.classNames.input), [...instance.element.classList].some(
(className) => classesToCheck.indexOf(className) !== -1,
),
).to.equal(false); ).to.equal(false);
expect(instance.element.hidden).to.be.false; expect(instance.element.hidden).to.be.false;
expect(instance.element.getAttribute('style')).to.equal(originalStyling); 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 { ClassNames } from '../interfaces/class-names';
import { EventType } from '../interfaces/event-type'; import { EventType } from '../interfaces/event-type';
import { dispatchEvent } from '../lib/utils'; import { dispatchEvent, getClassNames } from '../lib/utils';
export default class WrappedElement { export default class WrappedElement {
element: HTMLInputElement | HTMLSelectElement; element: HTMLInputElement | HTMLSelectElement;
@ -42,7 +42,7 @@ export default class WrappedElement {
conceal(): void { conceal(): void {
// Hide passed input // Hide passed input
this.element.classList.add(this.classNames.input); this.element.classList.add(...getClassNames(this.classNames.input));
this.element.hidden = true; this.element.hidden = true;
// Remove element from tab index // Remove element from tab index
@ -60,7 +60,7 @@ export default class WrappedElement {
reveal(): void { reveal(): void {
// Reinstate passed element // Reinstate passed element
this.element.classList.remove(this.classNames.input); this.element.classList.remove(...getClassNames(this.classNames.input));
this.element.hidden = false; this.element.hidden = false;
this.element.removeAttribute('tabindex'); this.element.removeAttribute('tabindex');

2
src/scripts/defaults.ts
View file

@ -15,7 +15,7 @@ export const DEFAULT_CLASSNAMES: ClassNames = {
itemSelectable: 'choices__item--selectable', itemSelectable: 'choices__item--selectable',
itemDisabled: 'choices__item--disabled', itemDisabled: 'choices__item--disabled',
itemChoice: 'choices__item--choice', itemChoice: 'choices__item--choice',
placeholder: 'choices__placeholder', placeholder: ['choices__placeholder'],
group: 'choices__group', group: 'choices__group',
groupHeading: 'choices__heading', groupHeading: 'choices__heading',
button: 'choices__button', 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. */ /** Classes added to HTML generated by By default classnames follow the BEM notation. */
export interface ClassNames { export interface ClassNames {
/** @default 'choices' */ /** @default 'choices' */
containerOuter: string; containerOuter: string | Array<string>;
/** @default 'choices__inner' */ /** @default 'choices__inner' */
containerInner: string; containerInner: string | Array<string>;
/** @default 'choices__input' */ /** @default 'choices__input' */
input: string; input: string | Array<string>;
/** @default 'choices__input--cloned' */ /** @default 'choices__input--cloned' */
inputCloned: string; inputCloned: string | Array<string>;
/** @default 'choices__list' */ /** @default 'choices__list' */
list: string; list: string | Array<string>;
/** @default 'choices__list--multiple' */ /** @default 'choices__list--multiple' */
listItems: string; listItems: string | Array<string>;
/** @default 'choices__list--single' */ /** @default 'choices__list--single' */
listSingle: string; listSingle: string | Array<string>;
/** @default 'choices__list--dropdown' */ /** @default 'choices__list--dropdown' */
listDropdown: string; listDropdown: string | Array<string>;
/** @default 'choices__item' */ /** @default 'choices__item' */
item: string; item: string | Array<string>;
/** @default 'choices__item--selectable' */ /** @default 'choices__item--selectable' */
itemSelectable: string; itemSelectable: string | Array<string>;
/** @default 'choices__item--disabled' */ /** @default 'choices__item--disabled' */
itemDisabled: string; itemDisabled: string | Array<string>;
/** @default 'choices__item--choice' */ /** @default 'choices__item--choice' */
itemChoice: string; itemChoice: string | Array<string>;
/** @default 'choices__placeholder' */ /** @default 'choices__placeholder' */
placeholder: string; placeholder: string | Array<string>;
/** @default 'choices__group' */ /** @default 'choices__group' */
group: string; group: string | Array<string>;
/** @default 'choices__heading' */ /** @default 'choices__heading' */
groupHeading: string; groupHeading: string | Array<string>;
/** @default 'choices__button' */ /** @default 'choices__button' */
button: string; button: string | Array<string>;
/** @default 'is-active' */ /** @default 'is-active' */
activeState: string; activeState: string | Array<string>;
/** @default 'is-focused' */ /** @default 'is-focused' */
focusState: string; focusState: string | Array<string>;
/** @default 'is-open' */ /** @default 'is-open' */
openState: string; openState: string | Array<string>;
/** @default 'is-disabled' */ /** @default 'is-disabled' */
disabledState: string; disabledState: string | Array<string>;
/** @default 'is-highlighted' */ /** @default 'is-highlighted' */
highlightedState: string; highlightedState: string | Array<string>;
/** @default 'is-selected' */ /** @default 'is-selected' */
selectedState: string; selectedState: string | Array<string>;
/** @default 'is-flipped' */ /** @default 'is-flipped' */
flippedState: string; flippedState: string | Array<string>;
/** @default 'is-loading' */ /** @default 'is-loading' */
loadingState: string; loadingState: string | Array<string>;
/** @default 'has-no-results' */ /** @default 'has-no-results' */
noResults: string; noResults: string | Array<string>;
/** @default 'has-no-choices' */ /** @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 { * return {
* item: (data) => { * item: (data) => {
* return template(` * 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} * <span>&bigstar;</span> ${data.label}
* </div> * </div>
* `); * `);
* }, * },
* choice: (data) => { * choice: (data) => {
* return template(` * 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} * <span>&bigstar;</span> ${data.label}
* </div> * </div>
* `); * `);

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

@ -181,6 +181,26 @@ export const diff = (
return aKeys.filter((i) => bKeys.indexOf(i) < 0); 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 => { export const parseCustomProperties = (customProperties): any => {
if (typeof customProperties !== 'undefined') { if (typeof customProperties !== 'undefined') {
try { try {

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

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

56
src/scripts/templates.ts
View file

@ -7,6 +7,7 @@ import { Choice } from './interfaces/choice';
import { Group } from './interfaces/group'; import { Group } from './interfaces/group';
import { Item } from './interfaces/item'; import { Item } from './interfaces/item';
import { PassedElementType } from './interfaces/passed-element-type'; import { PassedElementType } from './interfaces/passed-element-type';
import { getClassNames } from './lib/utils';
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
type TemplateOptions = Record<'classNames' | 'allowHTML', any>; type TemplateOptions = Record<'classNames' | 'allowHTML', any>;
@ -22,7 +23,7 @@ const templates = {
labelId: string, labelId: string,
): HTMLDivElement { ): HTMLDivElement {
const div = Object.assign(document.createElement('div'), { const div = Object.assign(document.createElement('div'), {
className: containerOuter, className: getClassNames(containerOuter).join(' '),
}); });
div.dataset.type = passedElementType; div.dataset.type = passedElementType;
@ -55,7 +56,7 @@ const templates = {
classNames: { containerInner }, classNames: { containerInner },
}: TemplateOptions): HTMLDivElement { }: TemplateOptions): HTMLDivElement {
return Object.assign(document.createElement('div'), { return Object.assign(document.createElement('div'), {
className: containerInner, className: getClassNames(containerInner).join(' '),
}); });
}, },
@ -64,7 +65,11 @@ const templates = {
isSelectOneElement: boolean, isSelectOneElement: boolean,
): HTMLDivElement { ): HTMLDivElement {
return Object.assign(document.createElement('div'), { 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, value: string,
): HTMLDivElement { ): HTMLDivElement {
return Object.assign(document.createElement('div'), { return Object.assign(document.createElement('div'), {
className: placeholder, className: getClassNames(placeholder).join(' '),
[allowHTML ? 'innerHTML' : 'innerText']: value, [allowHTML ? 'innerHTML' : 'innerText']: value,
}); });
}, },
@ -102,7 +107,7 @@ const templates = {
removeItemButton: boolean, removeItemButton: boolean,
): HTMLDivElement { ): HTMLDivElement {
const div = Object.assign(document.createElement('div'), { const div = Object.assign(document.createElement('div'), {
className: item, className: getClassNames(item).join(' '),
[allowHTML ? 'innerHTML' : 'innerText']: label, [allowHTML ? 'innerHTML' : 'innerText']: label,
}); });
@ -122,21 +127,25 @@ const templates = {
} }
if (isPlaceholder) { 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 (removeItemButton) {
if (disabled) { if (disabled) {
div.classList.remove(itemSelectable); div.classList.remove(...getClassNames(itemSelectable));
} }
div.dataset.deletable = ''; div.dataset.deletable = '';
/** @todo This MUST be localizable, not hardcoded! */ /** @todo This MUST be localizable, not hardcoded! */
const REMOVE_ITEM_TEXT = 'Remove item'; const REMOVE_ITEM_TEXT = 'Remove item';
const removeButton = Object.assign(document.createElement('button'), { const removeButton = Object.assign(document.createElement('button'), {
type: 'button', type: 'button',
className: button, className: getClassNames(button).join(' '),
[allowHTML ? 'innerHTML' : 'innerText']: REMOVE_ITEM_TEXT, [allowHTML ? 'innerHTML' : 'innerText']: REMOVE_ITEM_TEXT,
}); });
removeButton.setAttribute( removeButton.setAttribute(
@ -155,7 +164,7 @@ const templates = {
isSelectOneElement: boolean, isSelectOneElement: boolean,
): HTMLDivElement { ): HTMLDivElement {
const div = Object.assign(document.createElement('div'), { const div = Object.assign(document.createElement('div'), {
className: list, className: getClassNames(list).join(' '),
}); });
if (!isSelectOneElement) { if (!isSelectOneElement) {
@ -174,7 +183,9 @@ const templates = {
{ id, value, disabled }: Group, { id, value, disabled }: Group,
): HTMLDivElement { ): HTMLDivElement {
const div = Object.assign(document.createElement('div'), { const div = Object.assign(document.createElement('div'), {
className: `${group} ${disabled ? itemDisabled : ''}`, className: `${getClassNames(group).join(' ')} ${
disabled ? getClassNames(itemDisabled).join(' ') : ''
}`,
}); });
div.setAttribute('role', 'group'); div.setAttribute('role', 'group');
@ -191,7 +202,7 @@ const templates = {
div.appendChild( div.appendChild(
Object.assign(document.createElement('div'), { Object.assign(document.createElement('div'), {
className: groupHeading, className: getClassNames(groupHeading).join(' '),
[allowHTML ? 'innerHTML' : 'innerText']: value, [allowHTML ? 'innerHTML' : 'innerText']: value,
}), }),
); );
@ -226,15 +237,17 @@ const templates = {
const div = Object.assign(document.createElement('div'), { const div = Object.assign(document.createElement('div'), {
id: elementId, id: elementId,
[allowHTML ? 'innerHTML' : 'innerText']: label, [allowHTML ? 'innerHTML' : 'innerText']: label,
className: `${item} ${itemChoice}`, className: `${getClassNames(item).join(' ')} ${getClassNames(
itemChoice,
).join(' ')}`,
}); });
if (isSelected) { if (isSelected) {
div.classList.add(selectedState); div.classList.add(...getClassNames(selectedState));
} }
if (isPlaceholder) { if (isPlaceholder) {
div.classList.add(placeholder); div.classList.add(...getClassNames(placeholder));
} }
div.setAttribute('role', groupId && groupId > 0 ? 'treeitem' : 'option'); div.setAttribute('role', groupId && groupId > 0 ? 'treeitem' : 'option');
@ -247,11 +260,11 @@ const templates = {
}); });
if (isDisabled) { if (isDisabled) {
div.classList.add(itemDisabled); div.classList.add(...getClassNames(itemDisabled));
div.dataset.choiceDisabled = ''; div.dataset.choiceDisabled = '';
div.setAttribute('aria-disabled', 'true'); div.setAttribute('aria-disabled', 'true');
} else { } else {
div.classList.add(itemSelectable); div.classList.add(...getClassNames(itemSelectable));
div.dataset.choiceSelectable = ''; div.dataset.choiceSelectable = '';
} }
@ -265,7 +278,9 @@ const templates = {
const inp = Object.assign(document.createElement('input'), { const inp = Object.assign(document.createElement('input'), {
type: 'search', type: 'search',
name: 'search_terms', name: 'search_terms',
className: `${input} ${inputCloned}`, className: `${getClassNames(input).join(' ')} ${getClassNames(
inputCloned,
).join(' ')}`,
autocomplete: 'off', autocomplete: 'off',
autocapitalize: 'off', autocapitalize: 'off',
spellcheck: false, spellcheck: false,
@ -283,7 +298,8 @@ const templates = {
}: TemplateOptions): HTMLDivElement { }: TemplateOptions): HTMLDivElement {
const div = document.createElement('div'); 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'); div.setAttribute('aria-expanded', 'false');
return div; return div;
@ -297,7 +313,7 @@ const templates = {
innerText: string, innerText: string,
type: 'no-choices' | 'no-results' | '' = '', type: 'no-choices' | 'no-results' | '' = '',
): HTMLDivElement { ): HTMLDivElement {
const classes = [item, itemChoice]; const classes = [...getClassNames(item), ...getClassNames(itemChoice)];
if (type === 'no-choices') { if (type === 'no-choices') {
classes.push(noChoices); classes.push(noChoices);

7350
yarn.lock Normal file
View file

File diff suppressed because it is too large Load diff