mirror of
https://github.com/Choices-js/Choices.git
synced 2026-03-14 14:45:47 +01:00
Build the assets
This commit is contained in:
Sebastian Zoglowek
parent
c1bfe22a93
commit
2c4e4e8642
23 changed files with 660 additions and 140 deletions
|
|
@ -409,25 +409,26 @@
|
|||
Container.prototype.removeActiveDescendant = function () {
|
||||
this.element.removeAttribute('aria-activedescendant');
|
||||
};
|
||||
Container.prototype.open = function (dropdownPos, dropdownHeight) {
|
||||
Container.prototype.open = function (dropdownPos, dropdownHeight, dropdown) {
|
||||
addClassesToElement(this.element, this.classNames.openState);
|
||||
this.element.setAttribute('aria-expanded', 'true');
|
||||
this.isOpen = true;
|
||||
if (this.shouldFlip(dropdownPos, dropdownHeight)) {
|
||||
addClassesToElement(this.element, this.classNames.flippedState);
|
||||
addClassesToElement(dropdown, this.classNames.flippedState);
|
||||
this.isFlipped = true;
|
||||
}
|
||||
return this.isFlipped;
|
||||
};
|
||||
Container.prototype.close = function () {
|
||||
Container.prototype.close = function (dropdown) {
|
||||
removeClassesFromElement(this.element, 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) {
|
||||
removeClassesFromElement(this.element, this.classNames.flippedState);
|
||||
this.isFlipped = false;
|
||||
}
|
||||
removeClassesFromElement(this.element, this.classNames.flippedState);
|
||||
removeClassesFromElement(dropdown, this.classNames.flippedState);
|
||||
this.isFlipped = false;
|
||||
};
|
||||
Container.prototype.addFocusState = function () {
|
||||
addClassesToElement(this.element, this.classNames.focusState);
|
||||
|
|
@ -937,6 +938,8 @@
|
|||
listItems: ['choices__list--multiple'],
|
||||
listSingle: ['choices__list--single'],
|
||||
listDropdown: ['choices__list--dropdown'],
|
||||
dropdownMultiple: ['choices__dropdown--multiple'],
|
||||
dropdownSingle: ['choices__dropdown--single'],
|
||||
item: ['choices__item'],
|
||||
itemSelectable: ['choices__item--selectable'],
|
||||
itemDisabled: ['choices__item--disabled'],
|
||||
|
|
@ -1020,6 +1023,7 @@
|
|||
callbackOnCreateTemplates: null,
|
||||
classNames: DEFAULT_CLASSNAMES,
|
||||
appendGroupInSearch: false,
|
||||
dropdownParent: null,
|
||||
};
|
||||
|
||||
var removeItem = function (item) {
|
||||
|
|
@ -3285,11 +3289,12 @@
|
|||
}
|
||||
return inp;
|
||||
},
|
||||
dropdown: function (_a) {
|
||||
var _b = _a.classNames, list = _b.list, listDropdown = _b.listDropdown;
|
||||
dropdown: function (_a, isSelectOneElement) {
|
||||
var _b = _a.classNames, list = _b.list, listDropdown = _b.listDropdown, dropdownSingle = _b.dropdownSingle, dropdownMultiple = _b.dropdownMultiple;
|
||||
var div = document.createElement('div');
|
||||
addClassesToElement(div, list);
|
||||
addClassesToElement(div, listDropdown);
|
||||
addClassesToElement(div, isSelectOneElement ? dropdownSingle : dropdownMultiple);
|
||||
div.setAttribute('aria-expanded', 'false');
|
||||
return div;
|
||||
},
|
||||
|
|
@ -3475,6 +3480,7 @@
|
|||
this._onDeleteKey = this._onDeleteKey.bind(this);
|
||||
this._onChange = this._onChange.bind(this);
|
||||
this._onInvalid = this._onInvalid.bind(this);
|
||||
this._onWindowResize = this._onWindowResize.bind(this);
|
||||
// If element has already been initialised with Choices, fail silently
|
||||
if (this.passedElement.isActive) {
|
||||
if (!config.silent) {
|
||||
|
|
@ -3484,6 +3490,15 @@
|
|||
this.initialisedOK = false;
|
||||
return;
|
||||
}
|
||||
// Dropdown is detached from the original wrapper
|
||||
this._dropdownDetached = false;
|
||||
if (config.dropdownParent) {
|
||||
var parent_1 = this._docRoot.querySelector(config.dropdownParent);
|
||||
if (parent_1) {
|
||||
this._dropdownDetached = true;
|
||||
this._dropdownParent = parent_1;
|
||||
}
|
||||
}
|
||||
// Let's go
|
||||
this.init();
|
||||
// preserve the selected item list after setup for form reset
|
||||
|
|
@ -3666,9 +3681,15 @@
|
|||
preventInputFocus = !this._canSearch;
|
||||
}
|
||||
requestAnimationFrame(function () {
|
||||
if (_this._dropdownDetached) {
|
||||
_this.setHorizontalDropdownPosition();
|
||||
}
|
||||
_this.dropdown.show();
|
||||
var rect = _this.dropdown.element.getBoundingClientRect();
|
||||
_this.containerOuter.open(rect.bottom, rect.height);
|
||||
var dropdownAbove = _this.containerOuter.open(rect.bottom, rect.height, _this.dropdown.element);
|
||||
if (_this._dropdownDetached) {
|
||||
_this.setVerticalDropdownPosition(dropdownAbove);
|
||||
}
|
||||
if (!preventInputFocus) {
|
||||
_this.input.focus();
|
||||
}
|
||||
|
|
@ -3689,7 +3710,7 @@
|
|||
this._removeHighlightedChoices();
|
||||
requestAnimationFrame(function () {
|
||||
_this.dropdown.hide();
|
||||
_this.containerOuter.close();
|
||||
_this.containerOuter.close(_this.dropdown.element);
|
||||
if (!preventInputBlur && _this._canSearch) {
|
||||
_this.input.removeActiveDescendant();
|
||||
_this.input.blur();
|
||||
|
|
@ -3698,6 +3719,22 @@
|
|||
});
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.setHorizontalDropdownPosition = function () {
|
||||
var containerRect = this.containerOuter.element.getBoundingClientRect();
|
||||
this.dropdown.element.style.top = "".concat(window.scrollY + containerRect.bottom, "px");
|
||||
this.dropdown.element.style.left = "".concat(containerRect.left, "px");
|
||||
this.dropdown.element.style.width = "".concat(containerRect.width, "px");
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.setVerticalDropdownPosition = function (above) {
|
||||
if (above === void 0) { above = false; }
|
||||
if (!above || !(this._dropdownParent instanceof HTMLElement)) {
|
||||
return this;
|
||||
}
|
||||
var dropdownRect = this.dropdown.element.getBoundingClientRect();
|
||||
this.dropdown.element.style.top = "".concat(this.containerOuter.element.offsetTop + 1 - dropdownRect.height, "px");
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.getValue = function (valueOnly) {
|
||||
var values = this._store.items.map(function (item) {
|
||||
return (valueOnly ? item.value : getChoiceForOutput(item));
|
||||
|
|
@ -4518,18 +4555,21 @@
|
|||
Choices.prototype._addEventListeners = function () {
|
||||
var documentElement = this._docRoot;
|
||||
var outerElement = this.containerOuter.element;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var inputElement = this.input.element;
|
||||
var passedElement = this.passedElement.element;
|
||||
// capture events - can cancel event processing or propagation
|
||||
documentElement.addEventListener('touchend', this._onTouchEnd, true);
|
||||
outerElement.addEventListener('keydown', this._onKeyDown, true);
|
||||
outerElement.addEventListener('mousedown', this._onMouseDown, true);
|
||||
dropdownElement.addEventListener('keydown', this._onKeyDown, true);
|
||||
dropdownElement.addEventListener('mousedown', this._onMouseDown, true);
|
||||
// passive events - doesn't call `preventDefault` or `stopPropagation`
|
||||
documentElement.addEventListener('click', this._onClick, { passive: true });
|
||||
documentElement.addEventListener('touchmove', this._onTouchMove, {
|
||||
passive: true,
|
||||
});
|
||||
this.dropdown.element.addEventListener('mouseover', this._onMouseOver, {
|
||||
dropdownElement.addEventListener('mouseover', this._onMouseOver, {
|
||||
passive: true,
|
||||
});
|
||||
if (this._isSelectOneElement) {
|
||||
|
|
@ -4565,19 +4605,25 @@
|
|||
passive: true,
|
||||
});
|
||||
}
|
||||
if (this._dropdownDetached) {
|
||||
window.addEventListener('resize', this._onWindowResize);
|
||||
}
|
||||
this.input.addEventListeners();
|
||||
};
|
||||
Choices.prototype._removeEventListeners = function () {
|
||||
var documentElement = this._docRoot;
|
||||
var outerElement = this.containerOuter.element;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var inputElement = this.input.element;
|
||||
var passedElement = this.passedElement.element;
|
||||
documentElement.removeEventListener('touchend', this._onTouchEnd, true);
|
||||
outerElement.removeEventListener('keydown', this._onKeyDown, true);
|
||||
outerElement.removeEventListener('mousedown', this._onMouseDown, true);
|
||||
dropdownElement.removeEventListener('keydown', this._onKeyDown);
|
||||
dropdownElement.removeEventListener('mousedown', this._onMouseDown);
|
||||
documentElement.removeEventListener('click', this._onClick);
|
||||
documentElement.removeEventListener('touchmove', this._onTouchMove);
|
||||
this.dropdown.element.removeEventListener('mouseover', this._onMouseOver);
|
||||
dropdownElement.removeEventListener('mouseover', this._onMouseOver);
|
||||
if (this._isSelectOneElement) {
|
||||
outerElement.removeEventListener('focus', this._onFocus);
|
||||
outerElement.removeEventListener('blur', this._onBlur);
|
||||
|
|
@ -4593,6 +4639,9 @@
|
|||
passedElement.removeEventListener('change', this._onChange);
|
||||
passedElement.removeEventListener('invalid', this._onInvalid);
|
||||
}
|
||||
if (this._dropdownDetached) {
|
||||
window.removeEventListener('resize', this._onWindowResize);
|
||||
}
|
||||
this.input.removeEventListeners();
|
||||
};
|
||||
Choices.prototype._onKeyDown = function (event) {
|
||||
|
|
@ -4984,6 +5033,15 @@
|
|||
Choices.prototype._onInvalid = function () {
|
||||
this.containerOuter.addInvalidState();
|
||||
};
|
||||
Choices.prototype._onWindowResize = function () {
|
||||
if (!this.dropdown.isActive) {
|
||||
return;
|
||||
}
|
||||
this.setHorizontalDropdownPosition();
|
||||
var rect = this.dropdown.element.getBoundingClientRect();
|
||||
var dropdownAbove = this.containerOuter.shouldFlip(rect.bottom, rect.height);
|
||||
this.setVerticalDropdownPosition(dropdownAbove);
|
||||
};
|
||||
/**
|
||||
* Removes any highlighted choice options
|
||||
*/
|
||||
|
|
@ -5162,7 +5220,7 @@
|
|||
element: templating.itemList(config, isSelectOneElement),
|
||||
});
|
||||
this.dropdown = new Dropdown({
|
||||
element: templating.dropdown(config),
|
||||
element: templating.dropdown(config, isSelectOneElement),
|
||||
classNames: classNames,
|
||||
type: elementType,
|
||||
});
|
||||
|
|
@ -5170,14 +5228,18 @@
|
|||
Choices.prototype._createStructure = function () {
|
||||
var _a = this, containerInner = _a.containerInner, containerOuter = _a.containerOuter, passedElement = _a.passedElement;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var dropdownParent = containerOuter.element;
|
||||
// Hide original element
|
||||
passedElement.conceal();
|
||||
// Wrap input in container preserving DOM ordering
|
||||
containerInner.wrap(passedElement.element);
|
||||
// Wrapper inner container with outer container
|
||||
containerOuter.wrap(containerInner.element);
|
||||
if (this._dropdownDetached && this._dropdownParent instanceof HTMLElement) {
|
||||
dropdownParent = this._dropdownParent;
|
||||
}
|
||||
containerOuter.element.appendChild(containerInner.element);
|
||||
containerOuter.element.appendChild(dropdownElement);
|
||||
dropdownParent.appendChild(dropdownElement);
|
||||
containerInner.element.appendChild(this.itemList.element);
|
||||
dropdownElement.appendChild(this.choiceList.element);
|
||||
if (this._isSelectOneElement) {
|
||||
|
|
|
|||
4
public/assets/scripts/choices.min.js
vendored
4
public/assets/scripts/choices.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -403,25 +403,26 @@ var Container = /** @class */ (function () {
|
|||
Container.prototype.removeActiveDescendant = function () {
|
||||
this.element.removeAttribute('aria-activedescendant');
|
||||
};
|
||||
Container.prototype.open = function (dropdownPos, dropdownHeight) {
|
||||
Container.prototype.open = function (dropdownPos, dropdownHeight, dropdown) {
|
||||
addClassesToElement(this.element, this.classNames.openState);
|
||||
this.element.setAttribute('aria-expanded', 'true');
|
||||
this.isOpen = true;
|
||||
if (this.shouldFlip(dropdownPos, dropdownHeight)) {
|
||||
addClassesToElement(this.element, this.classNames.flippedState);
|
||||
addClassesToElement(dropdown, this.classNames.flippedState);
|
||||
this.isFlipped = true;
|
||||
}
|
||||
return this.isFlipped;
|
||||
};
|
||||
Container.prototype.close = function () {
|
||||
Container.prototype.close = function (dropdown) {
|
||||
removeClassesFromElement(this.element, 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) {
|
||||
removeClassesFromElement(this.element, this.classNames.flippedState);
|
||||
this.isFlipped = false;
|
||||
}
|
||||
removeClassesFromElement(this.element, this.classNames.flippedState);
|
||||
removeClassesFromElement(dropdown, this.classNames.flippedState);
|
||||
this.isFlipped = false;
|
||||
};
|
||||
Container.prototype.addFocusState = function () {
|
||||
addClassesToElement(this.element, this.classNames.focusState);
|
||||
|
|
@ -931,6 +932,8 @@ var DEFAULT_CLASSNAMES = {
|
|||
listItems: ['choices__list--multiple'],
|
||||
listSingle: ['choices__list--single'],
|
||||
listDropdown: ['choices__list--dropdown'],
|
||||
dropdownMultiple: ['choices__dropdown--multiple'],
|
||||
dropdownSingle: ['choices__dropdown--single'],
|
||||
item: ['choices__item'],
|
||||
itemSelectable: ['choices__item--selectable'],
|
||||
itemDisabled: ['choices__item--disabled'],
|
||||
|
|
@ -1014,6 +1017,7 @@ var DEFAULT_CONFIG = {
|
|||
callbackOnCreateTemplates: null,
|
||||
classNames: DEFAULT_CLASSNAMES,
|
||||
appendGroupInSearch: false,
|
||||
dropdownParent: null,
|
||||
};
|
||||
|
||||
var removeItem = function (item) {
|
||||
|
|
@ -3279,11 +3283,12 @@ var templates = {
|
|||
}
|
||||
return inp;
|
||||
},
|
||||
dropdown: function (_a) {
|
||||
var _b = _a.classNames, list = _b.list, listDropdown = _b.listDropdown;
|
||||
dropdown: function (_a, isSelectOneElement) {
|
||||
var _b = _a.classNames, list = _b.list, listDropdown = _b.listDropdown, dropdownSingle = _b.dropdownSingle, dropdownMultiple = _b.dropdownMultiple;
|
||||
var div = document.createElement('div');
|
||||
addClassesToElement(div, list);
|
||||
addClassesToElement(div, listDropdown);
|
||||
addClassesToElement(div, isSelectOneElement ? dropdownSingle : dropdownMultiple);
|
||||
div.setAttribute('aria-expanded', 'false');
|
||||
return div;
|
||||
},
|
||||
|
|
@ -3469,6 +3474,7 @@ var Choices = /** @class */ (function () {
|
|||
this._onDeleteKey = this._onDeleteKey.bind(this);
|
||||
this._onChange = this._onChange.bind(this);
|
||||
this._onInvalid = this._onInvalid.bind(this);
|
||||
this._onWindowResize = this._onWindowResize.bind(this);
|
||||
// If element has already been initialised with Choices, fail silently
|
||||
if (this.passedElement.isActive) {
|
||||
if (!config.silent) {
|
||||
|
|
@ -3478,6 +3484,15 @@ var Choices = /** @class */ (function () {
|
|||
this.initialisedOK = false;
|
||||
return;
|
||||
}
|
||||
// Dropdown is detached from the original wrapper
|
||||
this._dropdownDetached = false;
|
||||
if (config.dropdownParent) {
|
||||
var parent_1 = this._docRoot.querySelector(config.dropdownParent);
|
||||
if (parent_1) {
|
||||
this._dropdownDetached = true;
|
||||
this._dropdownParent = parent_1;
|
||||
}
|
||||
}
|
||||
// Let's go
|
||||
this.init();
|
||||
// preserve the selected item list after setup for form reset
|
||||
|
|
@ -3660,9 +3675,15 @@ var Choices = /** @class */ (function () {
|
|||
preventInputFocus = !this._canSearch;
|
||||
}
|
||||
requestAnimationFrame(function () {
|
||||
if (_this._dropdownDetached) {
|
||||
_this.setHorizontalDropdownPosition();
|
||||
}
|
||||
_this.dropdown.show();
|
||||
var rect = _this.dropdown.element.getBoundingClientRect();
|
||||
_this.containerOuter.open(rect.bottom, rect.height);
|
||||
var dropdownAbove = _this.containerOuter.open(rect.bottom, rect.height, _this.dropdown.element);
|
||||
if (_this._dropdownDetached) {
|
||||
_this.setVerticalDropdownPosition(dropdownAbove);
|
||||
}
|
||||
if (!preventInputFocus) {
|
||||
_this.input.focus();
|
||||
}
|
||||
|
|
@ -3683,7 +3704,7 @@ var Choices = /** @class */ (function () {
|
|||
this._removeHighlightedChoices();
|
||||
requestAnimationFrame(function () {
|
||||
_this.dropdown.hide();
|
||||
_this.containerOuter.close();
|
||||
_this.containerOuter.close(_this.dropdown.element);
|
||||
if (!preventInputBlur && _this._canSearch) {
|
||||
_this.input.removeActiveDescendant();
|
||||
_this.input.blur();
|
||||
|
|
@ -3692,6 +3713,22 @@ var Choices = /** @class */ (function () {
|
|||
});
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.setHorizontalDropdownPosition = function () {
|
||||
var containerRect = this.containerOuter.element.getBoundingClientRect();
|
||||
this.dropdown.element.style.top = "".concat(window.scrollY + containerRect.bottom, "px");
|
||||
this.dropdown.element.style.left = "".concat(containerRect.left, "px");
|
||||
this.dropdown.element.style.width = "".concat(containerRect.width, "px");
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.setVerticalDropdownPosition = function (above) {
|
||||
if (above === void 0) { above = false; }
|
||||
if (!above || !(this._dropdownParent instanceof HTMLElement)) {
|
||||
return this;
|
||||
}
|
||||
var dropdownRect = this.dropdown.element.getBoundingClientRect();
|
||||
this.dropdown.element.style.top = "".concat(this.containerOuter.element.offsetTop + 1 - dropdownRect.height, "px");
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.getValue = function (valueOnly) {
|
||||
var values = this._store.items.map(function (item) {
|
||||
return (valueOnly ? item.value : getChoiceForOutput(item));
|
||||
|
|
@ -4512,18 +4549,21 @@ var Choices = /** @class */ (function () {
|
|||
Choices.prototype._addEventListeners = function () {
|
||||
var documentElement = this._docRoot;
|
||||
var outerElement = this.containerOuter.element;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var inputElement = this.input.element;
|
||||
var passedElement = this.passedElement.element;
|
||||
// capture events - can cancel event processing or propagation
|
||||
documentElement.addEventListener('touchend', this._onTouchEnd, true);
|
||||
outerElement.addEventListener('keydown', this._onKeyDown, true);
|
||||
outerElement.addEventListener('mousedown', this._onMouseDown, true);
|
||||
dropdownElement.addEventListener('keydown', this._onKeyDown, true);
|
||||
dropdownElement.addEventListener('mousedown', this._onMouseDown, true);
|
||||
// passive events - doesn't call `preventDefault` or `stopPropagation`
|
||||
documentElement.addEventListener('click', this._onClick, { passive: true });
|
||||
documentElement.addEventListener('touchmove', this._onTouchMove, {
|
||||
passive: true,
|
||||
});
|
||||
this.dropdown.element.addEventListener('mouseover', this._onMouseOver, {
|
||||
dropdownElement.addEventListener('mouseover', this._onMouseOver, {
|
||||
passive: true,
|
||||
});
|
||||
if (this._isSelectOneElement) {
|
||||
|
|
@ -4559,19 +4599,25 @@ var Choices = /** @class */ (function () {
|
|||
passive: true,
|
||||
});
|
||||
}
|
||||
if (this._dropdownDetached) {
|
||||
window.addEventListener('resize', this._onWindowResize);
|
||||
}
|
||||
this.input.addEventListeners();
|
||||
};
|
||||
Choices.prototype._removeEventListeners = function () {
|
||||
var documentElement = this._docRoot;
|
||||
var outerElement = this.containerOuter.element;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var inputElement = this.input.element;
|
||||
var passedElement = this.passedElement.element;
|
||||
documentElement.removeEventListener('touchend', this._onTouchEnd, true);
|
||||
outerElement.removeEventListener('keydown', this._onKeyDown, true);
|
||||
outerElement.removeEventListener('mousedown', this._onMouseDown, true);
|
||||
dropdownElement.removeEventListener('keydown', this._onKeyDown);
|
||||
dropdownElement.removeEventListener('mousedown', this._onMouseDown);
|
||||
documentElement.removeEventListener('click', this._onClick);
|
||||
documentElement.removeEventListener('touchmove', this._onTouchMove);
|
||||
this.dropdown.element.removeEventListener('mouseover', this._onMouseOver);
|
||||
dropdownElement.removeEventListener('mouseover', this._onMouseOver);
|
||||
if (this._isSelectOneElement) {
|
||||
outerElement.removeEventListener('focus', this._onFocus);
|
||||
outerElement.removeEventListener('blur', this._onBlur);
|
||||
|
|
@ -4587,6 +4633,9 @@ var Choices = /** @class */ (function () {
|
|||
passedElement.removeEventListener('change', this._onChange);
|
||||
passedElement.removeEventListener('invalid', this._onInvalid);
|
||||
}
|
||||
if (this._dropdownDetached) {
|
||||
window.removeEventListener('resize', this._onWindowResize);
|
||||
}
|
||||
this.input.removeEventListeners();
|
||||
};
|
||||
Choices.prototype._onKeyDown = function (event) {
|
||||
|
|
@ -4978,6 +5027,15 @@ var Choices = /** @class */ (function () {
|
|||
Choices.prototype._onInvalid = function () {
|
||||
this.containerOuter.addInvalidState();
|
||||
};
|
||||
Choices.prototype._onWindowResize = function () {
|
||||
if (!this.dropdown.isActive) {
|
||||
return;
|
||||
}
|
||||
this.setHorizontalDropdownPosition();
|
||||
var rect = this.dropdown.element.getBoundingClientRect();
|
||||
var dropdownAbove = this.containerOuter.shouldFlip(rect.bottom, rect.height);
|
||||
this.setVerticalDropdownPosition(dropdownAbove);
|
||||
};
|
||||
/**
|
||||
* Removes any highlighted choice options
|
||||
*/
|
||||
|
|
@ -5156,7 +5214,7 @@ var Choices = /** @class */ (function () {
|
|||
element: templating.itemList(config, isSelectOneElement),
|
||||
});
|
||||
this.dropdown = new Dropdown({
|
||||
element: templating.dropdown(config),
|
||||
element: templating.dropdown(config, isSelectOneElement),
|
||||
classNames: classNames,
|
||||
type: elementType,
|
||||
});
|
||||
|
|
@ -5164,14 +5222,18 @@ var Choices = /** @class */ (function () {
|
|||
Choices.prototype._createStructure = function () {
|
||||
var _a = this, containerInner = _a.containerInner, containerOuter = _a.containerOuter, passedElement = _a.passedElement;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var dropdownParent = containerOuter.element;
|
||||
// Hide original element
|
||||
passedElement.conceal();
|
||||
// Wrap input in container preserving DOM ordering
|
||||
containerInner.wrap(passedElement.element);
|
||||
// Wrapper inner container with outer container
|
||||
containerOuter.wrap(containerInner.element);
|
||||
if (this._dropdownDetached && this._dropdownParent instanceof HTMLElement) {
|
||||
dropdownParent = this._dropdownParent;
|
||||
}
|
||||
containerOuter.element.appendChild(containerInner.element);
|
||||
containerOuter.element.appendChild(dropdownElement);
|
||||
dropdownParent.appendChild(dropdownElement);
|
||||
containerInner.element.appendChild(this.itemList.element);
|
||||
dropdownElement.appendChild(this.choiceList.element);
|
||||
if (this._isSelectOneElement) {
|
||||
|
|
|
|||
|
|
@ -409,25 +409,26 @@
|
|||
Container.prototype.removeActiveDescendant = function () {
|
||||
this.element.removeAttribute('aria-activedescendant');
|
||||
};
|
||||
Container.prototype.open = function (dropdownPos, dropdownHeight) {
|
||||
Container.prototype.open = function (dropdownPos, dropdownHeight, dropdown) {
|
||||
addClassesToElement(this.element, this.classNames.openState);
|
||||
this.element.setAttribute('aria-expanded', 'true');
|
||||
this.isOpen = true;
|
||||
if (this.shouldFlip(dropdownPos, dropdownHeight)) {
|
||||
addClassesToElement(this.element, this.classNames.flippedState);
|
||||
addClassesToElement(dropdown, this.classNames.flippedState);
|
||||
this.isFlipped = true;
|
||||
}
|
||||
return this.isFlipped;
|
||||
};
|
||||
Container.prototype.close = function () {
|
||||
Container.prototype.close = function (dropdown) {
|
||||
removeClassesFromElement(this.element, 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) {
|
||||
removeClassesFromElement(this.element, this.classNames.flippedState);
|
||||
this.isFlipped = false;
|
||||
}
|
||||
removeClassesFromElement(this.element, this.classNames.flippedState);
|
||||
removeClassesFromElement(dropdown, this.classNames.flippedState);
|
||||
this.isFlipped = false;
|
||||
};
|
||||
Container.prototype.addFocusState = function () {
|
||||
addClassesToElement(this.element, this.classNames.focusState);
|
||||
|
|
@ -937,6 +938,8 @@
|
|||
listItems: ['choices__list--multiple'],
|
||||
listSingle: ['choices__list--single'],
|
||||
listDropdown: ['choices__list--dropdown'],
|
||||
dropdownMultiple: ['choices__dropdown--multiple'],
|
||||
dropdownSingle: ['choices__dropdown--single'],
|
||||
item: ['choices__item'],
|
||||
itemSelectable: ['choices__item--selectable'],
|
||||
itemDisabled: ['choices__item--disabled'],
|
||||
|
|
@ -1020,6 +1023,7 @@
|
|||
callbackOnCreateTemplates: null,
|
||||
classNames: DEFAULT_CLASSNAMES,
|
||||
appendGroupInSearch: false,
|
||||
dropdownParent: null,
|
||||
};
|
||||
|
||||
var removeItem = function (item) {
|
||||
|
|
@ -2806,11 +2810,12 @@
|
|||
}
|
||||
return inp;
|
||||
},
|
||||
dropdown: function (_a) {
|
||||
var _b = _a.classNames, list = _b.list, listDropdown = _b.listDropdown;
|
||||
dropdown: function (_a, isSelectOneElement) {
|
||||
var _b = _a.classNames, list = _b.list, listDropdown = _b.listDropdown, dropdownSingle = _b.dropdownSingle, dropdownMultiple = _b.dropdownMultiple;
|
||||
var div = document.createElement('div');
|
||||
addClassesToElement(div, list);
|
||||
addClassesToElement(div, listDropdown);
|
||||
addClassesToElement(div, isSelectOneElement ? dropdownSingle : dropdownMultiple);
|
||||
div.setAttribute('aria-expanded', 'false');
|
||||
return div;
|
||||
},
|
||||
|
|
@ -2996,6 +3001,7 @@
|
|||
this._onDeleteKey = this._onDeleteKey.bind(this);
|
||||
this._onChange = this._onChange.bind(this);
|
||||
this._onInvalid = this._onInvalid.bind(this);
|
||||
this._onWindowResize = this._onWindowResize.bind(this);
|
||||
// If element has already been initialised with Choices, fail silently
|
||||
if (this.passedElement.isActive) {
|
||||
if (!config.silent) {
|
||||
|
|
@ -3005,6 +3011,15 @@
|
|||
this.initialisedOK = false;
|
||||
return;
|
||||
}
|
||||
// Dropdown is detached from the original wrapper
|
||||
this._dropdownDetached = false;
|
||||
if (config.dropdownParent) {
|
||||
var parent_1 = this._docRoot.querySelector(config.dropdownParent);
|
||||
if (parent_1) {
|
||||
this._dropdownDetached = true;
|
||||
this._dropdownParent = parent_1;
|
||||
}
|
||||
}
|
||||
// Let's go
|
||||
this.init();
|
||||
// preserve the selected item list after setup for form reset
|
||||
|
|
@ -3187,9 +3202,15 @@
|
|||
preventInputFocus = !this._canSearch;
|
||||
}
|
||||
requestAnimationFrame(function () {
|
||||
if (_this._dropdownDetached) {
|
||||
_this.setHorizontalDropdownPosition();
|
||||
}
|
||||
_this.dropdown.show();
|
||||
var rect = _this.dropdown.element.getBoundingClientRect();
|
||||
_this.containerOuter.open(rect.bottom, rect.height);
|
||||
var dropdownAbove = _this.containerOuter.open(rect.bottom, rect.height, _this.dropdown.element);
|
||||
if (_this._dropdownDetached) {
|
||||
_this.setVerticalDropdownPosition(dropdownAbove);
|
||||
}
|
||||
if (!preventInputFocus) {
|
||||
_this.input.focus();
|
||||
}
|
||||
|
|
@ -3210,7 +3231,7 @@
|
|||
this._removeHighlightedChoices();
|
||||
requestAnimationFrame(function () {
|
||||
_this.dropdown.hide();
|
||||
_this.containerOuter.close();
|
||||
_this.containerOuter.close(_this.dropdown.element);
|
||||
if (!preventInputBlur && _this._canSearch) {
|
||||
_this.input.removeActiveDescendant();
|
||||
_this.input.blur();
|
||||
|
|
@ -3219,6 +3240,22 @@
|
|||
});
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.setHorizontalDropdownPosition = function () {
|
||||
var containerRect = this.containerOuter.element.getBoundingClientRect();
|
||||
this.dropdown.element.style.top = "".concat(window.scrollY + containerRect.bottom, "px");
|
||||
this.dropdown.element.style.left = "".concat(containerRect.left, "px");
|
||||
this.dropdown.element.style.width = "".concat(containerRect.width, "px");
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.setVerticalDropdownPosition = function (above) {
|
||||
if (above === void 0) { above = false; }
|
||||
if (!above || !(this._dropdownParent instanceof HTMLElement)) {
|
||||
return this;
|
||||
}
|
||||
var dropdownRect = this.dropdown.element.getBoundingClientRect();
|
||||
this.dropdown.element.style.top = "".concat(this.containerOuter.element.offsetTop + 1 - dropdownRect.height, "px");
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.getValue = function (valueOnly) {
|
||||
var values = this._store.items.map(function (item) {
|
||||
return (valueOnly ? item.value : getChoiceForOutput(item));
|
||||
|
|
@ -4039,18 +4076,21 @@
|
|||
Choices.prototype._addEventListeners = function () {
|
||||
var documentElement = this._docRoot;
|
||||
var outerElement = this.containerOuter.element;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var inputElement = this.input.element;
|
||||
var passedElement = this.passedElement.element;
|
||||
// capture events - can cancel event processing or propagation
|
||||
documentElement.addEventListener('touchend', this._onTouchEnd, true);
|
||||
outerElement.addEventListener('keydown', this._onKeyDown, true);
|
||||
outerElement.addEventListener('mousedown', this._onMouseDown, true);
|
||||
dropdownElement.addEventListener('keydown', this._onKeyDown, true);
|
||||
dropdownElement.addEventListener('mousedown', this._onMouseDown, true);
|
||||
// passive events - doesn't call `preventDefault` or `stopPropagation`
|
||||
documentElement.addEventListener('click', this._onClick, { passive: true });
|
||||
documentElement.addEventListener('touchmove', this._onTouchMove, {
|
||||
passive: true,
|
||||
});
|
||||
this.dropdown.element.addEventListener('mouseover', this._onMouseOver, {
|
||||
dropdownElement.addEventListener('mouseover', this._onMouseOver, {
|
||||
passive: true,
|
||||
});
|
||||
if (this._isSelectOneElement) {
|
||||
|
|
@ -4086,19 +4126,25 @@
|
|||
passive: true,
|
||||
});
|
||||
}
|
||||
if (this._dropdownDetached) {
|
||||
window.addEventListener('resize', this._onWindowResize);
|
||||
}
|
||||
this.input.addEventListeners();
|
||||
};
|
||||
Choices.prototype._removeEventListeners = function () {
|
||||
var documentElement = this._docRoot;
|
||||
var outerElement = this.containerOuter.element;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var inputElement = this.input.element;
|
||||
var passedElement = this.passedElement.element;
|
||||
documentElement.removeEventListener('touchend', this._onTouchEnd, true);
|
||||
outerElement.removeEventListener('keydown', this._onKeyDown, true);
|
||||
outerElement.removeEventListener('mousedown', this._onMouseDown, true);
|
||||
dropdownElement.removeEventListener('keydown', this._onKeyDown);
|
||||
dropdownElement.removeEventListener('mousedown', this._onMouseDown);
|
||||
documentElement.removeEventListener('click', this._onClick);
|
||||
documentElement.removeEventListener('touchmove', this._onTouchMove);
|
||||
this.dropdown.element.removeEventListener('mouseover', this._onMouseOver);
|
||||
dropdownElement.removeEventListener('mouseover', this._onMouseOver);
|
||||
if (this._isSelectOneElement) {
|
||||
outerElement.removeEventListener('focus', this._onFocus);
|
||||
outerElement.removeEventListener('blur', this._onBlur);
|
||||
|
|
@ -4114,6 +4160,9 @@
|
|||
passedElement.removeEventListener('change', this._onChange);
|
||||
passedElement.removeEventListener('invalid', this._onInvalid);
|
||||
}
|
||||
if (this._dropdownDetached) {
|
||||
window.removeEventListener('resize', this._onWindowResize);
|
||||
}
|
||||
this.input.removeEventListeners();
|
||||
};
|
||||
Choices.prototype._onKeyDown = function (event) {
|
||||
|
|
@ -4505,6 +4554,15 @@
|
|||
Choices.prototype._onInvalid = function () {
|
||||
this.containerOuter.addInvalidState();
|
||||
};
|
||||
Choices.prototype._onWindowResize = function () {
|
||||
if (!this.dropdown.isActive) {
|
||||
return;
|
||||
}
|
||||
this.setHorizontalDropdownPosition();
|
||||
var rect = this.dropdown.element.getBoundingClientRect();
|
||||
var dropdownAbove = this.containerOuter.shouldFlip(rect.bottom, rect.height);
|
||||
this.setVerticalDropdownPosition(dropdownAbove);
|
||||
};
|
||||
/**
|
||||
* Removes any highlighted choice options
|
||||
*/
|
||||
|
|
@ -4683,7 +4741,7 @@
|
|||
element: templating.itemList(config, isSelectOneElement),
|
||||
});
|
||||
this.dropdown = new Dropdown({
|
||||
element: templating.dropdown(config),
|
||||
element: templating.dropdown(config, isSelectOneElement),
|
||||
classNames: classNames,
|
||||
type: elementType,
|
||||
});
|
||||
|
|
@ -4691,14 +4749,18 @@
|
|||
Choices.prototype._createStructure = function () {
|
||||
var _a = this, containerInner = _a.containerInner, containerOuter = _a.containerOuter, passedElement = _a.passedElement;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var dropdownParent = containerOuter.element;
|
||||
// Hide original element
|
||||
passedElement.conceal();
|
||||
// Wrap input in container preserving DOM ordering
|
||||
containerInner.wrap(passedElement.element);
|
||||
// Wrapper inner container with outer container
|
||||
containerOuter.wrap(containerInner.element);
|
||||
if (this._dropdownDetached && this._dropdownParent instanceof HTMLElement) {
|
||||
dropdownParent = this._dropdownParent;
|
||||
}
|
||||
containerOuter.element.appendChild(containerInner.element);
|
||||
containerOuter.element.appendChild(dropdownElement);
|
||||
dropdownParent.appendChild(dropdownElement);
|
||||
containerInner.element.appendChild(this.itemList.element);
|
||||
dropdownElement.appendChild(this.choiceList.element);
|
||||
if (this._isSelectOneElement) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -403,25 +403,26 @@ var Container = /** @class */ (function () {
|
|||
Container.prototype.removeActiveDescendant = function () {
|
||||
this.element.removeAttribute('aria-activedescendant');
|
||||
};
|
||||
Container.prototype.open = function (dropdownPos, dropdownHeight) {
|
||||
Container.prototype.open = function (dropdownPos, dropdownHeight, dropdown) {
|
||||
addClassesToElement(this.element, this.classNames.openState);
|
||||
this.element.setAttribute('aria-expanded', 'true');
|
||||
this.isOpen = true;
|
||||
if (this.shouldFlip(dropdownPos, dropdownHeight)) {
|
||||
addClassesToElement(this.element, this.classNames.flippedState);
|
||||
addClassesToElement(dropdown, this.classNames.flippedState);
|
||||
this.isFlipped = true;
|
||||
}
|
||||
return this.isFlipped;
|
||||
};
|
||||
Container.prototype.close = function () {
|
||||
Container.prototype.close = function (dropdown) {
|
||||
removeClassesFromElement(this.element, 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) {
|
||||
removeClassesFromElement(this.element, this.classNames.flippedState);
|
||||
this.isFlipped = false;
|
||||
}
|
||||
removeClassesFromElement(this.element, this.classNames.flippedState);
|
||||
removeClassesFromElement(dropdown, this.classNames.flippedState);
|
||||
this.isFlipped = false;
|
||||
};
|
||||
Container.prototype.addFocusState = function () {
|
||||
addClassesToElement(this.element, this.classNames.focusState);
|
||||
|
|
@ -931,6 +932,8 @@ var DEFAULT_CLASSNAMES = {
|
|||
listItems: ['choices__list--multiple'],
|
||||
listSingle: ['choices__list--single'],
|
||||
listDropdown: ['choices__list--dropdown'],
|
||||
dropdownMultiple: ['choices__dropdown--multiple'],
|
||||
dropdownSingle: ['choices__dropdown--single'],
|
||||
item: ['choices__item'],
|
||||
itemSelectable: ['choices__item--selectable'],
|
||||
itemDisabled: ['choices__item--disabled'],
|
||||
|
|
@ -1014,6 +1017,7 @@ var DEFAULT_CONFIG = {
|
|||
callbackOnCreateTemplates: null,
|
||||
classNames: DEFAULT_CLASSNAMES,
|
||||
appendGroupInSearch: false,
|
||||
dropdownParent: null,
|
||||
};
|
||||
|
||||
var removeItem = function (item) {
|
||||
|
|
@ -2800,11 +2804,12 @@ var templates = {
|
|||
}
|
||||
return inp;
|
||||
},
|
||||
dropdown: function (_a) {
|
||||
var _b = _a.classNames, list = _b.list, listDropdown = _b.listDropdown;
|
||||
dropdown: function (_a, isSelectOneElement) {
|
||||
var _b = _a.classNames, list = _b.list, listDropdown = _b.listDropdown, dropdownSingle = _b.dropdownSingle, dropdownMultiple = _b.dropdownMultiple;
|
||||
var div = document.createElement('div');
|
||||
addClassesToElement(div, list);
|
||||
addClassesToElement(div, listDropdown);
|
||||
addClassesToElement(div, isSelectOneElement ? dropdownSingle : dropdownMultiple);
|
||||
div.setAttribute('aria-expanded', 'false');
|
||||
return div;
|
||||
},
|
||||
|
|
@ -2990,6 +2995,7 @@ var Choices = /** @class */ (function () {
|
|||
this._onDeleteKey = this._onDeleteKey.bind(this);
|
||||
this._onChange = this._onChange.bind(this);
|
||||
this._onInvalid = this._onInvalid.bind(this);
|
||||
this._onWindowResize = this._onWindowResize.bind(this);
|
||||
// If element has already been initialised with Choices, fail silently
|
||||
if (this.passedElement.isActive) {
|
||||
if (!config.silent) {
|
||||
|
|
@ -2999,6 +3005,15 @@ var Choices = /** @class */ (function () {
|
|||
this.initialisedOK = false;
|
||||
return;
|
||||
}
|
||||
// Dropdown is detached from the original wrapper
|
||||
this._dropdownDetached = false;
|
||||
if (config.dropdownParent) {
|
||||
var parent_1 = this._docRoot.querySelector(config.dropdownParent);
|
||||
if (parent_1) {
|
||||
this._dropdownDetached = true;
|
||||
this._dropdownParent = parent_1;
|
||||
}
|
||||
}
|
||||
// Let's go
|
||||
this.init();
|
||||
// preserve the selected item list after setup for form reset
|
||||
|
|
@ -3181,9 +3196,15 @@ var Choices = /** @class */ (function () {
|
|||
preventInputFocus = !this._canSearch;
|
||||
}
|
||||
requestAnimationFrame(function () {
|
||||
if (_this._dropdownDetached) {
|
||||
_this.setHorizontalDropdownPosition();
|
||||
}
|
||||
_this.dropdown.show();
|
||||
var rect = _this.dropdown.element.getBoundingClientRect();
|
||||
_this.containerOuter.open(rect.bottom, rect.height);
|
||||
var dropdownAbove = _this.containerOuter.open(rect.bottom, rect.height, _this.dropdown.element);
|
||||
if (_this._dropdownDetached) {
|
||||
_this.setVerticalDropdownPosition(dropdownAbove);
|
||||
}
|
||||
if (!preventInputFocus) {
|
||||
_this.input.focus();
|
||||
}
|
||||
|
|
@ -3204,7 +3225,7 @@ var Choices = /** @class */ (function () {
|
|||
this._removeHighlightedChoices();
|
||||
requestAnimationFrame(function () {
|
||||
_this.dropdown.hide();
|
||||
_this.containerOuter.close();
|
||||
_this.containerOuter.close(_this.dropdown.element);
|
||||
if (!preventInputBlur && _this._canSearch) {
|
||||
_this.input.removeActiveDescendant();
|
||||
_this.input.blur();
|
||||
|
|
@ -3213,6 +3234,22 @@ var Choices = /** @class */ (function () {
|
|||
});
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.setHorizontalDropdownPosition = function () {
|
||||
var containerRect = this.containerOuter.element.getBoundingClientRect();
|
||||
this.dropdown.element.style.top = "".concat(window.scrollY + containerRect.bottom, "px");
|
||||
this.dropdown.element.style.left = "".concat(containerRect.left, "px");
|
||||
this.dropdown.element.style.width = "".concat(containerRect.width, "px");
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.setVerticalDropdownPosition = function (above) {
|
||||
if (above === void 0) { above = false; }
|
||||
if (!above || !(this._dropdownParent instanceof HTMLElement)) {
|
||||
return this;
|
||||
}
|
||||
var dropdownRect = this.dropdown.element.getBoundingClientRect();
|
||||
this.dropdown.element.style.top = "".concat(this.containerOuter.element.offsetTop + 1 - dropdownRect.height, "px");
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.getValue = function (valueOnly) {
|
||||
var values = this._store.items.map(function (item) {
|
||||
return (valueOnly ? item.value : getChoiceForOutput(item));
|
||||
|
|
@ -4033,18 +4070,21 @@ var Choices = /** @class */ (function () {
|
|||
Choices.prototype._addEventListeners = function () {
|
||||
var documentElement = this._docRoot;
|
||||
var outerElement = this.containerOuter.element;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var inputElement = this.input.element;
|
||||
var passedElement = this.passedElement.element;
|
||||
// capture events - can cancel event processing or propagation
|
||||
documentElement.addEventListener('touchend', this._onTouchEnd, true);
|
||||
outerElement.addEventListener('keydown', this._onKeyDown, true);
|
||||
outerElement.addEventListener('mousedown', this._onMouseDown, true);
|
||||
dropdownElement.addEventListener('keydown', this._onKeyDown, true);
|
||||
dropdownElement.addEventListener('mousedown', this._onMouseDown, true);
|
||||
// passive events - doesn't call `preventDefault` or `stopPropagation`
|
||||
documentElement.addEventListener('click', this._onClick, { passive: true });
|
||||
documentElement.addEventListener('touchmove', this._onTouchMove, {
|
||||
passive: true,
|
||||
});
|
||||
this.dropdown.element.addEventListener('mouseover', this._onMouseOver, {
|
||||
dropdownElement.addEventListener('mouseover', this._onMouseOver, {
|
||||
passive: true,
|
||||
});
|
||||
if (this._isSelectOneElement) {
|
||||
|
|
@ -4080,19 +4120,25 @@ var Choices = /** @class */ (function () {
|
|||
passive: true,
|
||||
});
|
||||
}
|
||||
if (this._dropdownDetached) {
|
||||
window.addEventListener('resize', this._onWindowResize);
|
||||
}
|
||||
this.input.addEventListeners();
|
||||
};
|
||||
Choices.prototype._removeEventListeners = function () {
|
||||
var documentElement = this._docRoot;
|
||||
var outerElement = this.containerOuter.element;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var inputElement = this.input.element;
|
||||
var passedElement = this.passedElement.element;
|
||||
documentElement.removeEventListener('touchend', this._onTouchEnd, true);
|
||||
outerElement.removeEventListener('keydown', this._onKeyDown, true);
|
||||
outerElement.removeEventListener('mousedown', this._onMouseDown, true);
|
||||
dropdownElement.removeEventListener('keydown', this._onKeyDown);
|
||||
dropdownElement.removeEventListener('mousedown', this._onMouseDown);
|
||||
documentElement.removeEventListener('click', this._onClick);
|
||||
documentElement.removeEventListener('touchmove', this._onTouchMove);
|
||||
this.dropdown.element.removeEventListener('mouseover', this._onMouseOver);
|
||||
dropdownElement.removeEventListener('mouseover', this._onMouseOver);
|
||||
if (this._isSelectOneElement) {
|
||||
outerElement.removeEventListener('focus', this._onFocus);
|
||||
outerElement.removeEventListener('blur', this._onBlur);
|
||||
|
|
@ -4108,6 +4154,9 @@ var Choices = /** @class */ (function () {
|
|||
passedElement.removeEventListener('change', this._onChange);
|
||||
passedElement.removeEventListener('invalid', this._onInvalid);
|
||||
}
|
||||
if (this._dropdownDetached) {
|
||||
window.removeEventListener('resize', this._onWindowResize);
|
||||
}
|
||||
this.input.removeEventListeners();
|
||||
};
|
||||
Choices.prototype._onKeyDown = function (event) {
|
||||
|
|
@ -4499,6 +4548,15 @@ var Choices = /** @class */ (function () {
|
|||
Choices.prototype._onInvalid = function () {
|
||||
this.containerOuter.addInvalidState();
|
||||
};
|
||||
Choices.prototype._onWindowResize = function () {
|
||||
if (!this.dropdown.isActive) {
|
||||
return;
|
||||
}
|
||||
this.setHorizontalDropdownPosition();
|
||||
var rect = this.dropdown.element.getBoundingClientRect();
|
||||
var dropdownAbove = this.containerOuter.shouldFlip(rect.bottom, rect.height);
|
||||
this.setVerticalDropdownPosition(dropdownAbove);
|
||||
};
|
||||
/**
|
||||
* Removes any highlighted choice options
|
||||
*/
|
||||
|
|
@ -4677,7 +4735,7 @@ var Choices = /** @class */ (function () {
|
|||
element: templating.itemList(config, isSelectOneElement),
|
||||
});
|
||||
this.dropdown = new Dropdown({
|
||||
element: templating.dropdown(config),
|
||||
element: templating.dropdown(config, isSelectOneElement),
|
||||
classNames: classNames,
|
||||
type: elementType,
|
||||
});
|
||||
|
|
@ -4685,14 +4743,18 @@ var Choices = /** @class */ (function () {
|
|||
Choices.prototype._createStructure = function () {
|
||||
var _a = this, containerInner = _a.containerInner, containerOuter = _a.containerOuter, passedElement = _a.passedElement;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var dropdownParent = containerOuter.element;
|
||||
// Hide original element
|
||||
passedElement.conceal();
|
||||
// Wrap input in container preserving DOM ordering
|
||||
containerInner.wrap(passedElement.element);
|
||||
// Wrapper inner container with outer container
|
||||
containerOuter.wrap(containerInner.element);
|
||||
if (this._dropdownDetached && this._dropdownParent instanceof HTMLElement) {
|
||||
dropdownParent = this._dropdownParent;
|
||||
}
|
||||
containerOuter.element.appendChild(containerInner.element);
|
||||
containerOuter.element.appendChild(dropdownElement);
|
||||
dropdownParent.appendChild(dropdownElement);
|
||||
containerInner.element.appendChild(this.itemList.element);
|
||||
dropdownElement.appendChild(this.choiceList.element);
|
||||
if (this._isSelectOneElement) {
|
||||
|
|
|
|||
|
|
@ -400,25 +400,26 @@
|
|||
Container.prototype.removeActiveDescendant = function () {
|
||||
this.element.removeAttribute('aria-activedescendant');
|
||||
};
|
||||
Container.prototype.open = function (dropdownPos, dropdownHeight) {
|
||||
Container.prototype.open = function (dropdownPos, dropdownHeight, dropdown) {
|
||||
addClassesToElement(this.element, this.classNames.openState);
|
||||
this.element.setAttribute('aria-expanded', 'true');
|
||||
this.isOpen = true;
|
||||
if (this.shouldFlip(dropdownPos, dropdownHeight)) {
|
||||
addClassesToElement(this.element, this.classNames.flippedState);
|
||||
addClassesToElement(dropdown, this.classNames.flippedState);
|
||||
this.isFlipped = true;
|
||||
}
|
||||
return this.isFlipped;
|
||||
};
|
||||
Container.prototype.close = function () {
|
||||
Container.prototype.close = function (dropdown) {
|
||||
removeClassesFromElement(this.element, 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) {
|
||||
removeClassesFromElement(this.element, this.classNames.flippedState);
|
||||
this.isFlipped = false;
|
||||
}
|
||||
removeClassesFromElement(this.element, this.classNames.flippedState);
|
||||
removeClassesFromElement(dropdown, this.classNames.flippedState);
|
||||
this.isFlipped = false;
|
||||
};
|
||||
Container.prototype.addFocusState = function () {
|
||||
addClassesToElement(this.element, this.classNames.focusState);
|
||||
|
|
@ -928,6 +929,8 @@
|
|||
listItems: ['choices__list--multiple'],
|
||||
listSingle: ['choices__list--single'],
|
||||
listDropdown: ['choices__list--dropdown'],
|
||||
dropdownMultiple: ['choices__dropdown--multiple'],
|
||||
dropdownSingle: ['choices__dropdown--single'],
|
||||
item: ['choices__item'],
|
||||
itemSelectable: ['choices__item--selectable'],
|
||||
itemDisabled: ['choices__item--disabled'],
|
||||
|
|
@ -1011,6 +1014,7 @@
|
|||
callbackOnCreateTemplates: null,
|
||||
classNames: DEFAULT_CLASSNAMES,
|
||||
appendGroupInSearch: false,
|
||||
dropdownParent: null,
|
||||
};
|
||||
|
||||
var removeItem = function (item) {
|
||||
|
|
@ -1693,11 +1697,12 @@
|
|||
}
|
||||
return inp;
|
||||
},
|
||||
dropdown: function (_a) {
|
||||
var _b = _a.classNames, list = _b.list, listDropdown = _b.listDropdown;
|
||||
dropdown: function (_a, isSelectOneElement) {
|
||||
var _b = _a.classNames, list = _b.list, listDropdown = _b.listDropdown, dropdownSingle = _b.dropdownSingle, dropdownMultiple = _b.dropdownMultiple;
|
||||
var div = document.createElement('div');
|
||||
addClassesToElement(div, list);
|
||||
addClassesToElement(div, listDropdown);
|
||||
addClassesToElement(div, isSelectOneElement ? dropdownSingle : dropdownMultiple);
|
||||
div.setAttribute('aria-expanded', 'false');
|
||||
return div;
|
||||
},
|
||||
|
|
@ -1883,6 +1888,7 @@
|
|||
this._onDeleteKey = this._onDeleteKey.bind(this);
|
||||
this._onChange = this._onChange.bind(this);
|
||||
this._onInvalid = this._onInvalid.bind(this);
|
||||
this._onWindowResize = this._onWindowResize.bind(this);
|
||||
// If element has already been initialised with Choices, fail silently
|
||||
if (this.passedElement.isActive) {
|
||||
if (!config.silent) {
|
||||
|
|
@ -1892,6 +1898,15 @@
|
|||
this.initialisedOK = false;
|
||||
return;
|
||||
}
|
||||
// Dropdown is detached from the original wrapper
|
||||
this._dropdownDetached = false;
|
||||
if (config.dropdownParent) {
|
||||
var parent_1 = this._docRoot.querySelector(config.dropdownParent);
|
||||
if (parent_1) {
|
||||
this._dropdownDetached = true;
|
||||
this._dropdownParent = parent_1;
|
||||
}
|
||||
}
|
||||
// Let's go
|
||||
this.init();
|
||||
// preserve the selected item list after setup for form reset
|
||||
|
|
@ -2074,9 +2089,15 @@
|
|||
preventInputFocus = !this._canSearch;
|
||||
}
|
||||
requestAnimationFrame(function () {
|
||||
if (_this._dropdownDetached) {
|
||||
_this.setHorizontalDropdownPosition();
|
||||
}
|
||||
_this.dropdown.show();
|
||||
var rect = _this.dropdown.element.getBoundingClientRect();
|
||||
_this.containerOuter.open(rect.bottom, rect.height);
|
||||
var dropdownAbove = _this.containerOuter.open(rect.bottom, rect.height, _this.dropdown.element);
|
||||
if (_this._dropdownDetached) {
|
||||
_this.setVerticalDropdownPosition(dropdownAbove);
|
||||
}
|
||||
if (!preventInputFocus) {
|
||||
_this.input.focus();
|
||||
}
|
||||
|
|
@ -2097,7 +2118,7 @@
|
|||
this._removeHighlightedChoices();
|
||||
requestAnimationFrame(function () {
|
||||
_this.dropdown.hide();
|
||||
_this.containerOuter.close();
|
||||
_this.containerOuter.close(_this.dropdown.element);
|
||||
if (!preventInputBlur && _this._canSearch) {
|
||||
_this.input.removeActiveDescendant();
|
||||
_this.input.blur();
|
||||
|
|
@ -2106,6 +2127,22 @@
|
|||
});
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.setHorizontalDropdownPosition = function () {
|
||||
var containerRect = this.containerOuter.element.getBoundingClientRect();
|
||||
this.dropdown.element.style.top = "".concat(window.scrollY + containerRect.bottom, "px");
|
||||
this.dropdown.element.style.left = "".concat(containerRect.left, "px");
|
||||
this.dropdown.element.style.width = "".concat(containerRect.width, "px");
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.setVerticalDropdownPosition = function (above) {
|
||||
if (above === void 0) { above = false; }
|
||||
if (!above || !(this._dropdownParent instanceof HTMLElement)) {
|
||||
return this;
|
||||
}
|
||||
var dropdownRect = this.dropdown.element.getBoundingClientRect();
|
||||
this.dropdown.element.style.top = "".concat(this.containerOuter.element.offsetTop + 1 - dropdownRect.height, "px");
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.getValue = function (valueOnly) {
|
||||
var values = this._store.items.map(function (item) {
|
||||
return (valueOnly ? item.value : getChoiceForOutput(item));
|
||||
|
|
@ -2926,18 +2963,21 @@
|
|||
Choices.prototype._addEventListeners = function () {
|
||||
var documentElement = this._docRoot;
|
||||
var outerElement = this.containerOuter.element;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var inputElement = this.input.element;
|
||||
var passedElement = this.passedElement.element;
|
||||
// capture events - can cancel event processing or propagation
|
||||
documentElement.addEventListener('touchend', this._onTouchEnd, true);
|
||||
outerElement.addEventListener('keydown', this._onKeyDown, true);
|
||||
outerElement.addEventListener('mousedown', this._onMouseDown, true);
|
||||
dropdownElement.addEventListener('keydown', this._onKeyDown, true);
|
||||
dropdownElement.addEventListener('mousedown', this._onMouseDown, true);
|
||||
// passive events - doesn't call `preventDefault` or `stopPropagation`
|
||||
documentElement.addEventListener('click', this._onClick, { passive: true });
|
||||
documentElement.addEventListener('touchmove', this._onTouchMove, {
|
||||
passive: true,
|
||||
});
|
||||
this.dropdown.element.addEventListener('mouseover', this._onMouseOver, {
|
||||
dropdownElement.addEventListener('mouseover', this._onMouseOver, {
|
||||
passive: true,
|
||||
});
|
||||
if (this._isSelectOneElement) {
|
||||
|
|
@ -2973,19 +3013,25 @@
|
|||
passive: true,
|
||||
});
|
||||
}
|
||||
if (this._dropdownDetached) {
|
||||
window.addEventListener('resize', this._onWindowResize);
|
||||
}
|
||||
this.input.addEventListeners();
|
||||
};
|
||||
Choices.prototype._removeEventListeners = function () {
|
||||
var documentElement = this._docRoot;
|
||||
var outerElement = this.containerOuter.element;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var inputElement = this.input.element;
|
||||
var passedElement = this.passedElement.element;
|
||||
documentElement.removeEventListener('touchend', this._onTouchEnd, true);
|
||||
outerElement.removeEventListener('keydown', this._onKeyDown, true);
|
||||
outerElement.removeEventListener('mousedown', this._onMouseDown, true);
|
||||
dropdownElement.removeEventListener('keydown', this._onKeyDown);
|
||||
dropdownElement.removeEventListener('mousedown', this._onMouseDown);
|
||||
documentElement.removeEventListener('click', this._onClick);
|
||||
documentElement.removeEventListener('touchmove', this._onTouchMove);
|
||||
this.dropdown.element.removeEventListener('mouseover', this._onMouseOver);
|
||||
dropdownElement.removeEventListener('mouseover', this._onMouseOver);
|
||||
if (this._isSelectOneElement) {
|
||||
outerElement.removeEventListener('focus', this._onFocus);
|
||||
outerElement.removeEventListener('blur', this._onBlur);
|
||||
|
|
@ -3001,6 +3047,9 @@
|
|||
passedElement.removeEventListener('change', this._onChange);
|
||||
passedElement.removeEventListener('invalid', this._onInvalid);
|
||||
}
|
||||
if (this._dropdownDetached) {
|
||||
window.removeEventListener('resize', this._onWindowResize);
|
||||
}
|
||||
this.input.removeEventListeners();
|
||||
};
|
||||
Choices.prototype._onKeyDown = function (event) {
|
||||
|
|
@ -3392,6 +3441,15 @@
|
|||
Choices.prototype._onInvalid = function () {
|
||||
this.containerOuter.addInvalidState();
|
||||
};
|
||||
Choices.prototype._onWindowResize = function () {
|
||||
if (!this.dropdown.isActive) {
|
||||
return;
|
||||
}
|
||||
this.setHorizontalDropdownPosition();
|
||||
var rect = this.dropdown.element.getBoundingClientRect();
|
||||
var dropdownAbove = this.containerOuter.shouldFlip(rect.bottom, rect.height);
|
||||
this.setVerticalDropdownPosition(dropdownAbove);
|
||||
};
|
||||
/**
|
||||
* Removes any highlighted choice options
|
||||
*/
|
||||
|
|
@ -3570,7 +3628,7 @@
|
|||
element: templating.itemList(config, isSelectOneElement),
|
||||
});
|
||||
this.dropdown = new Dropdown({
|
||||
element: templating.dropdown(config),
|
||||
element: templating.dropdown(config, isSelectOneElement),
|
||||
classNames: classNames,
|
||||
type: elementType,
|
||||
});
|
||||
|
|
@ -3578,14 +3636,18 @@
|
|||
Choices.prototype._createStructure = function () {
|
||||
var _a = this, containerInner = _a.containerInner, containerOuter = _a.containerOuter, passedElement = _a.passedElement;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var dropdownParent = containerOuter.element;
|
||||
// Hide original element
|
||||
passedElement.conceal();
|
||||
// Wrap input in container preserving DOM ordering
|
||||
containerInner.wrap(passedElement.element);
|
||||
// Wrapper inner container with outer container
|
||||
containerOuter.wrap(containerInner.element);
|
||||
if (this._dropdownDetached && this._dropdownParent instanceof HTMLElement) {
|
||||
dropdownParent = this._dropdownParent;
|
||||
}
|
||||
containerOuter.element.appendChild(containerInner.element);
|
||||
containerOuter.element.appendChild(dropdownElement);
|
||||
dropdownParent.appendChild(dropdownElement);
|
||||
containerInner.element.appendChild(this.itemList.element);
|
||||
dropdownElement.appendChild(this.choiceList.element);
|
||||
if (this._isSelectOneElement) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -394,25 +394,26 @@ var Container = /** @class */ (function () {
|
|||
Container.prototype.removeActiveDescendant = function () {
|
||||
this.element.removeAttribute('aria-activedescendant');
|
||||
};
|
||||
Container.prototype.open = function (dropdownPos, dropdownHeight) {
|
||||
Container.prototype.open = function (dropdownPos, dropdownHeight, dropdown) {
|
||||
addClassesToElement(this.element, this.classNames.openState);
|
||||
this.element.setAttribute('aria-expanded', 'true');
|
||||
this.isOpen = true;
|
||||
if (this.shouldFlip(dropdownPos, dropdownHeight)) {
|
||||
addClassesToElement(this.element, this.classNames.flippedState);
|
||||
addClassesToElement(dropdown, this.classNames.flippedState);
|
||||
this.isFlipped = true;
|
||||
}
|
||||
return this.isFlipped;
|
||||
};
|
||||
Container.prototype.close = function () {
|
||||
Container.prototype.close = function (dropdown) {
|
||||
removeClassesFromElement(this.element, 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) {
|
||||
removeClassesFromElement(this.element, this.classNames.flippedState);
|
||||
this.isFlipped = false;
|
||||
}
|
||||
removeClassesFromElement(this.element, this.classNames.flippedState);
|
||||
removeClassesFromElement(dropdown, this.classNames.flippedState);
|
||||
this.isFlipped = false;
|
||||
};
|
||||
Container.prototype.addFocusState = function () {
|
||||
addClassesToElement(this.element, this.classNames.focusState);
|
||||
|
|
@ -922,6 +923,8 @@ var DEFAULT_CLASSNAMES = {
|
|||
listItems: ['choices__list--multiple'],
|
||||
listSingle: ['choices__list--single'],
|
||||
listDropdown: ['choices__list--dropdown'],
|
||||
dropdownMultiple: ['choices__dropdown--multiple'],
|
||||
dropdownSingle: ['choices__dropdown--single'],
|
||||
item: ['choices__item'],
|
||||
itemSelectable: ['choices__item--selectable'],
|
||||
itemDisabled: ['choices__item--disabled'],
|
||||
|
|
@ -1005,6 +1008,7 @@ var DEFAULT_CONFIG = {
|
|||
callbackOnCreateTemplates: null,
|
||||
classNames: DEFAULT_CLASSNAMES,
|
||||
appendGroupInSearch: false,
|
||||
dropdownParent: null,
|
||||
};
|
||||
|
||||
var removeItem = function (item) {
|
||||
|
|
@ -1687,11 +1691,12 @@ var templates = {
|
|||
}
|
||||
return inp;
|
||||
},
|
||||
dropdown: function (_a) {
|
||||
var _b = _a.classNames, list = _b.list, listDropdown = _b.listDropdown;
|
||||
dropdown: function (_a, isSelectOneElement) {
|
||||
var _b = _a.classNames, list = _b.list, listDropdown = _b.listDropdown, dropdownSingle = _b.dropdownSingle, dropdownMultiple = _b.dropdownMultiple;
|
||||
var div = document.createElement('div');
|
||||
addClassesToElement(div, list);
|
||||
addClassesToElement(div, listDropdown);
|
||||
addClassesToElement(div, isSelectOneElement ? dropdownSingle : dropdownMultiple);
|
||||
div.setAttribute('aria-expanded', 'false');
|
||||
return div;
|
||||
},
|
||||
|
|
@ -1877,6 +1882,7 @@ var Choices = /** @class */ (function () {
|
|||
this._onDeleteKey = this._onDeleteKey.bind(this);
|
||||
this._onChange = this._onChange.bind(this);
|
||||
this._onInvalid = this._onInvalid.bind(this);
|
||||
this._onWindowResize = this._onWindowResize.bind(this);
|
||||
// If element has already been initialised with Choices, fail silently
|
||||
if (this.passedElement.isActive) {
|
||||
if (!config.silent) {
|
||||
|
|
@ -1886,6 +1892,15 @@ var Choices = /** @class */ (function () {
|
|||
this.initialisedOK = false;
|
||||
return;
|
||||
}
|
||||
// Dropdown is detached from the original wrapper
|
||||
this._dropdownDetached = false;
|
||||
if (config.dropdownParent) {
|
||||
var parent_1 = this._docRoot.querySelector(config.dropdownParent);
|
||||
if (parent_1) {
|
||||
this._dropdownDetached = true;
|
||||
this._dropdownParent = parent_1;
|
||||
}
|
||||
}
|
||||
// Let's go
|
||||
this.init();
|
||||
// preserve the selected item list after setup for form reset
|
||||
|
|
@ -2068,9 +2083,15 @@ var Choices = /** @class */ (function () {
|
|||
preventInputFocus = !this._canSearch;
|
||||
}
|
||||
requestAnimationFrame(function () {
|
||||
if (_this._dropdownDetached) {
|
||||
_this.setHorizontalDropdownPosition();
|
||||
}
|
||||
_this.dropdown.show();
|
||||
var rect = _this.dropdown.element.getBoundingClientRect();
|
||||
_this.containerOuter.open(rect.bottom, rect.height);
|
||||
var dropdownAbove = _this.containerOuter.open(rect.bottom, rect.height, _this.dropdown.element);
|
||||
if (_this._dropdownDetached) {
|
||||
_this.setVerticalDropdownPosition(dropdownAbove);
|
||||
}
|
||||
if (!preventInputFocus) {
|
||||
_this.input.focus();
|
||||
}
|
||||
|
|
@ -2091,7 +2112,7 @@ var Choices = /** @class */ (function () {
|
|||
this._removeHighlightedChoices();
|
||||
requestAnimationFrame(function () {
|
||||
_this.dropdown.hide();
|
||||
_this.containerOuter.close();
|
||||
_this.containerOuter.close(_this.dropdown.element);
|
||||
if (!preventInputBlur && _this._canSearch) {
|
||||
_this.input.removeActiveDescendant();
|
||||
_this.input.blur();
|
||||
|
|
@ -2100,6 +2121,22 @@ var Choices = /** @class */ (function () {
|
|||
});
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.setHorizontalDropdownPosition = function () {
|
||||
var containerRect = this.containerOuter.element.getBoundingClientRect();
|
||||
this.dropdown.element.style.top = "".concat(window.scrollY + containerRect.bottom, "px");
|
||||
this.dropdown.element.style.left = "".concat(containerRect.left, "px");
|
||||
this.dropdown.element.style.width = "".concat(containerRect.width, "px");
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.setVerticalDropdownPosition = function (above) {
|
||||
if (above === void 0) { above = false; }
|
||||
if (!above || !(this._dropdownParent instanceof HTMLElement)) {
|
||||
return this;
|
||||
}
|
||||
var dropdownRect = this.dropdown.element.getBoundingClientRect();
|
||||
this.dropdown.element.style.top = "".concat(this.containerOuter.element.offsetTop + 1 - dropdownRect.height, "px");
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.getValue = function (valueOnly) {
|
||||
var values = this._store.items.map(function (item) {
|
||||
return (valueOnly ? item.value : getChoiceForOutput(item));
|
||||
|
|
@ -2920,18 +2957,21 @@ var Choices = /** @class */ (function () {
|
|||
Choices.prototype._addEventListeners = function () {
|
||||
var documentElement = this._docRoot;
|
||||
var outerElement = this.containerOuter.element;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var inputElement = this.input.element;
|
||||
var passedElement = this.passedElement.element;
|
||||
// capture events - can cancel event processing or propagation
|
||||
documentElement.addEventListener('touchend', this._onTouchEnd, true);
|
||||
outerElement.addEventListener('keydown', this._onKeyDown, true);
|
||||
outerElement.addEventListener('mousedown', this._onMouseDown, true);
|
||||
dropdownElement.addEventListener('keydown', this._onKeyDown, true);
|
||||
dropdownElement.addEventListener('mousedown', this._onMouseDown, true);
|
||||
// passive events - doesn't call `preventDefault` or `stopPropagation`
|
||||
documentElement.addEventListener('click', this._onClick, { passive: true });
|
||||
documentElement.addEventListener('touchmove', this._onTouchMove, {
|
||||
passive: true,
|
||||
});
|
||||
this.dropdown.element.addEventListener('mouseover', this._onMouseOver, {
|
||||
dropdownElement.addEventListener('mouseover', this._onMouseOver, {
|
||||
passive: true,
|
||||
});
|
||||
if (this._isSelectOneElement) {
|
||||
|
|
@ -2967,19 +3007,25 @@ var Choices = /** @class */ (function () {
|
|||
passive: true,
|
||||
});
|
||||
}
|
||||
if (this._dropdownDetached) {
|
||||
window.addEventListener('resize', this._onWindowResize);
|
||||
}
|
||||
this.input.addEventListeners();
|
||||
};
|
||||
Choices.prototype._removeEventListeners = function () {
|
||||
var documentElement = this._docRoot;
|
||||
var outerElement = this.containerOuter.element;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var inputElement = this.input.element;
|
||||
var passedElement = this.passedElement.element;
|
||||
documentElement.removeEventListener('touchend', this._onTouchEnd, true);
|
||||
outerElement.removeEventListener('keydown', this._onKeyDown, true);
|
||||
outerElement.removeEventListener('mousedown', this._onMouseDown, true);
|
||||
dropdownElement.removeEventListener('keydown', this._onKeyDown);
|
||||
dropdownElement.removeEventListener('mousedown', this._onMouseDown);
|
||||
documentElement.removeEventListener('click', this._onClick);
|
||||
documentElement.removeEventListener('touchmove', this._onTouchMove);
|
||||
this.dropdown.element.removeEventListener('mouseover', this._onMouseOver);
|
||||
dropdownElement.removeEventListener('mouseover', this._onMouseOver);
|
||||
if (this._isSelectOneElement) {
|
||||
outerElement.removeEventListener('focus', this._onFocus);
|
||||
outerElement.removeEventListener('blur', this._onBlur);
|
||||
|
|
@ -2995,6 +3041,9 @@ var Choices = /** @class */ (function () {
|
|||
passedElement.removeEventListener('change', this._onChange);
|
||||
passedElement.removeEventListener('invalid', this._onInvalid);
|
||||
}
|
||||
if (this._dropdownDetached) {
|
||||
window.removeEventListener('resize', this._onWindowResize);
|
||||
}
|
||||
this.input.removeEventListeners();
|
||||
};
|
||||
Choices.prototype._onKeyDown = function (event) {
|
||||
|
|
@ -3386,6 +3435,15 @@ var Choices = /** @class */ (function () {
|
|||
Choices.prototype._onInvalid = function () {
|
||||
this.containerOuter.addInvalidState();
|
||||
};
|
||||
Choices.prototype._onWindowResize = function () {
|
||||
if (!this.dropdown.isActive) {
|
||||
return;
|
||||
}
|
||||
this.setHorizontalDropdownPosition();
|
||||
var rect = this.dropdown.element.getBoundingClientRect();
|
||||
var dropdownAbove = this.containerOuter.shouldFlip(rect.bottom, rect.height);
|
||||
this.setVerticalDropdownPosition(dropdownAbove);
|
||||
};
|
||||
/**
|
||||
* Removes any highlighted choice options
|
||||
*/
|
||||
|
|
@ -3564,7 +3622,7 @@ var Choices = /** @class */ (function () {
|
|||
element: templating.itemList(config, isSelectOneElement),
|
||||
});
|
||||
this.dropdown = new Dropdown({
|
||||
element: templating.dropdown(config),
|
||||
element: templating.dropdown(config, isSelectOneElement),
|
||||
classNames: classNames,
|
||||
type: elementType,
|
||||
});
|
||||
|
|
@ -3572,14 +3630,18 @@ var Choices = /** @class */ (function () {
|
|||
Choices.prototype._createStructure = function () {
|
||||
var _a = this, containerInner = _a.containerInner, containerOuter = _a.containerOuter, passedElement = _a.passedElement;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var dropdownParent = containerOuter.element;
|
||||
// Hide original element
|
||||
passedElement.conceal();
|
||||
// Wrap input in container preserving DOM ordering
|
||||
containerInner.wrap(passedElement.element);
|
||||
// Wrapper inner container with outer container
|
||||
containerOuter.wrap(containerInner.element);
|
||||
if (this._dropdownDetached && this._dropdownParent instanceof HTMLElement) {
|
||||
dropdownParent = this._dropdownParent;
|
||||
}
|
||||
containerOuter.element.appendChild(containerInner.element);
|
||||
containerOuter.element.appendChild(dropdownElement);
|
||||
dropdownParent.appendChild(dropdownElement);
|
||||
containerInner.element.appendChild(this.itemList.element);
|
||||
dropdownElement.appendChild(this.choiceList.element);
|
||||
if (this._isSelectOneElement) {
|
||||
|
|
|
|||
|
|
@ -400,25 +400,26 @@
|
|||
Container.prototype.removeActiveDescendant = function () {
|
||||
this.element.removeAttribute('aria-activedescendant');
|
||||
};
|
||||
Container.prototype.open = function (dropdownPos, dropdownHeight) {
|
||||
Container.prototype.open = function (dropdownPos, dropdownHeight, dropdown) {
|
||||
addClassesToElement(this.element, this.classNames.openState);
|
||||
this.element.setAttribute('aria-expanded', 'true');
|
||||
this.isOpen = true;
|
||||
if (this.shouldFlip(dropdownPos, dropdownHeight)) {
|
||||
addClassesToElement(this.element, this.classNames.flippedState);
|
||||
addClassesToElement(dropdown, this.classNames.flippedState);
|
||||
this.isFlipped = true;
|
||||
}
|
||||
return this.isFlipped;
|
||||
};
|
||||
Container.prototype.close = function () {
|
||||
Container.prototype.close = function (dropdown) {
|
||||
removeClassesFromElement(this.element, 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) {
|
||||
removeClassesFromElement(this.element, this.classNames.flippedState);
|
||||
this.isFlipped = false;
|
||||
}
|
||||
removeClassesFromElement(this.element, this.classNames.flippedState);
|
||||
removeClassesFromElement(dropdown, this.classNames.flippedState);
|
||||
this.isFlipped = false;
|
||||
};
|
||||
Container.prototype.addFocusState = function () {
|
||||
addClassesToElement(this.element, this.classNames.focusState);
|
||||
|
|
@ -928,6 +929,8 @@
|
|||
listItems: ['choices__list--multiple'],
|
||||
listSingle: ['choices__list--single'],
|
||||
listDropdown: ['choices__list--dropdown'],
|
||||
dropdownMultiple: ['choices__dropdown--multiple'],
|
||||
dropdownSingle: ['choices__dropdown--single'],
|
||||
item: ['choices__item'],
|
||||
itemSelectable: ['choices__item--selectable'],
|
||||
itemDisabled: ['choices__item--disabled'],
|
||||
|
|
@ -1011,6 +1014,7 @@
|
|||
callbackOnCreateTemplates: null,
|
||||
classNames: DEFAULT_CLASSNAMES,
|
||||
appendGroupInSearch: false,
|
||||
dropdownParent: null,
|
||||
};
|
||||
|
||||
var removeItem = function (item) {
|
||||
|
|
@ -1651,11 +1655,12 @@
|
|||
}
|
||||
return inp;
|
||||
},
|
||||
dropdown: function (_a) {
|
||||
var _b = _a.classNames, list = _b.list, listDropdown = _b.listDropdown;
|
||||
dropdown: function (_a, isSelectOneElement) {
|
||||
var _b = _a.classNames, list = _b.list, listDropdown = _b.listDropdown, dropdownSingle = _b.dropdownSingle, dropdownMultiple = _b.dropdownMultiple;
|
||||
var div = document.createElement('div');
|
||||
addClassesToElement(div, list);
|
||||
addClassesToElement(div, listDropdown);
|
||||
addClassesToElement(div, isSelectOneElement ? dropdownSingle : dropdownMultiple);
|
||||
div.setAttribute('aria-expanded', 'false');
|
||||
return div;
|
||||
},
|
||||
|
|
@ -1841,6 +1846,7 @@
|
|||
this._onDeleteKey = this._onDeleteKey.bind(this);
|
||||
this._onChange = this._onChange.bind(this);
|
||||
this._onInvalid = this._onInvalid.bind(this);
|
||||
this._onWindowResize = this._onWindowResize.bind(this);
|
||||
// If element has already been initialised with Choices, fail silently
|
||||
if (this.passedElement.isActive) {
|
||||
if (!config.silent) {
|
||||
|
|
@ -1850,6 +1856,15 @@
|
|||
this.initialisedOK = false;
|
||||
return;
|
||||
}
|
||||
// Dropdown is detached from the original wrapper
|
||||
this._dropdownDetached = false;
|
||||
if (config.dropdownParent) {
|
||||
var parent_1 = this._docRoot.querySelector(config.dropdownParent);
|
||||
if (parent_1) {
|
||||
this._dropdownDetached = true;
|
||||
this._dropdownParent = parent_1;
|
||||
}
|
||||
}
|
||||
// Let's go
|
||||
this.init();
|
||||
// preserve the selected item list after setup for form reset
|
||||
|
|
@ -2032,9 +2047,15 @@
|
|||
preventInputFocus = !this._canSearch;
|
||||
}
|
||||
requestAnimationFrame(function () {
|
||||
if (_this._dropdownDetached) {
|
||||
_this.setHorizontalDropdownPosition();
|
||||
}
|
||||
_this.dropdown.show();
|
||||
var rect = _this.dropdown.element.getBoundingClientRect();
|
||||
_this.containerOuter.open(rect.bottom, rect.height);
|
||||
var dropdownAbove = _this.containerOuter.open(rect.bottom, rect.height, _this.dropdown.element);
|
||||
if (_this._dropdownDetached) {
|
||||
_this.setVerticalDropdownPosition(dropdownAbove);
|
||||
}
|
||||
if (!preventInputFocus) {
|
||||
_this.input.focus();
|
||||
}
|
||||
|
|
@ -2055,7 +2076,7 @@
|
|||
this._removeHighlightedChoices();
|
||||
requestAnimationFrame(function () {
|
||||
_this.dropdown.hide();
|
||||
_this.containerOuter.close();
|
||||
_this.containerOuter.close(_this.dropdown.element);
|
||||
if (!preventInputBlur && _this._canSearch) {
|
||||
_this.input.removeActiveDescendant();
|
||||
_this.input.blur();
|
||||
|
|
@ -2064,6 +2085,22 @@
|
|||
});
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.setHorizontalDropdownPosition = function () {
|
||||
var containerRect = this.containerOuter.element.getBoundingClientRect();
|
||||
this.dropdown.element.style.top = "".concat(window.scrollY + containerRect.bottom, "px");
|
||||
this.dropdown.element.style.left = "".concat(containerRect.left, "px");
|
||||
this.dropdown.element.style.width = "".concat(containerRect.width, "px");
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.setVerticalDropdownPosition = function (above) {
|
||||
if (above === void 0) { above = false; }
|
||||
if (!above || !(this._dropdownParent instanceof HTMLElement)) {
|
||||
return this;
|
||||
}
|
||||
var dropdownRect = this.dropdown.element.getBoundingClientRect();
|
||||
this.dropdown.element.style.top = "".concat(this.containerOuter.element.offsetTop + 1 - dropdownRect.height, "px");
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.getValue = function (valueOnly) {
|
||||
var values = this._store.items.map(function (item) {
|
||||
return (valueOnly ? item.value : getChoiceForOutput(item));
|
||||
|
|
@ -2884,18 +2921,21 @@
|
|||
Choices.prototype._addEventListeners = function () {
|
||||
var documentElement = this._docRoot;
|
||||
var outerElement = this.containerOuter.element;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var inputElement = this.input.element;
|
||||
var passedElement = this.passedElement.element;
|
||||
// capture events - can cancel event processing or propagation
|
||||
documentElement.addEventListener('touchend', this._onTouchEnd, true);
|
||||
outerElement.addEventListener('keydown', this._onKeyDown, true);
|
||||
outerElement.addEventListener('mousedown', this._onMouseDown, true);
|
||||
dropdownElement.addEventListener('keydown', this._onKeyDown, true);
|
||||
dropdownElement.addEventListener('mousedown', this._onMouseDown, true);
|
||||
// passive events - doesn't call `preventDefault` or `stopPropagation`
|
||||
documentElement.addEventListener('click', this._onClick, { passive: true });
|
||||
documentElement.addEventListener('touchmove', this._onTouchMove, {
|
||||
passive: true,
|
||||
});
|
||||
this.dropdown.element.addEventListener('mouseover', this._onMouseOver, {
|
||||
dropdownElement.addEventListener('mouseover', this._onMouseOver, {
|
||||
passive: true,
|
||||
});
|
||||
if (this._isSelectOneElement) {
|
||||
|
|
@ -2931,19 +2971,25 @@
|
|||
passive: true,
|
||||
});
|
||||
}
|
||||
if (this._dropdownDetached) {
|
||||
window.addEventListener('resize', this._onWindowResize);
|
||||
}
|
||||
this.input.addEventListeners();
|
||||
};
|
||||
Choices.prototype._removeEventListeners = function () {
|
||||
var documentElement = this._docRoot;
|
||||
var outerElement = this.containerOuter.element;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var inputElement = this.input.element;
|
||||
var passedElement = this.passedElement.element;
|
||||
documentElement.removeEventListener('touchend', this._onTouchEnd, true);
|
||||
outerElement.removeEventListener('keydown', this._onKeyDown, true);
|
||||
outerElement.removeEventListener('mousedown', this._onMouseDown, true);
|
||||
dropdownElement.removeEventListener('keydown', this._onKeyDown);
|
||||
dropdownElement.removeEventListener('mousedown', this._onMouseDown);
|
||||
documentElement.removeEventListener('click', this._onClick);
|
||||
documentElement.removeEventListener('touchmove', this._onTouchMove);
|
||||
this.dropdown.element.removeEventListener('mouseover', this._onMouseOver);
|
||||
dropdownElement.removeEventListener('mouseover', this._onMouseOver);
|
||||
if (this._isSelectOneElement) {
|
||||
outerElement.removeEventListener('focus', this._onFocus);
|
||||
outerElement.removeEventListener('blur', this._onBlur);
|
||||
|
|
@ -2959,6 +3005,9 @@
|
|||
passedElement.removeEventListener('change', this._onChange);
|
||||
passedElement.removeEventListener('invalid', this._onInvalid);
|
||||
}
|
||||
if (this._dropdownDetached) {
|
||||
window.removeEventListener('resize', this._onWindowResize);
|
||||
}
|
||||
this.input.removeEventListeners();
|
||||
};
|
||||
Choices.prototype._onKeyDown = function (event) {
|
||||
|
|
@ -3350,6 +3399,15 @@
|
|||
Choices.prototype._onInvalid = function () {
|
||||
this.containerOuter.addInvalidState();
|
||||
};
|
||||
Choices.prototype._onWindowResize = function () {
|
||||
if (!this.dropdown.isActive) {
|
||||
return;
|
||||
}
|
||||
this.setHorizontalDropdownPosition();
|
||||
var rect = this.dropdown.element.getBoundingClientRect();
|
||||
var dropdownAbove = this.containerOuter.shouldFlip(rect.bottom, rect.height);
|
||||
this.setVerticalDropdownPosition(dropdownAbove);
|
||||
};
|
||||
/**
|
||||
* Removes any highlighted choice options
|
||||
*/
|
||||
|
|
@ -3528,7 +3586,7 @@
|
|||
element: templating.itemList(config, isSelectOneElement),
|
||||
});
|
||||
this.dropdown = new Dropdown({
|
||||
element: templating.dropdown(config),
|
||||
element: templating.dropdown(config, isSelectOneElement),
|
||||
classNames: classNames,
|
||||
type: elementType,
|
||||
});
|
||||
|
|
@ -3536,14 +3594,18 @@
|
|||
Choices.prototype._createStructure = function () {
|
||||
var _a = this, containerInner = _a.containerInner, containerOuter = _a.containerOuter, passedElement = _a.passedElement;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var dropdownParent = containerOuter.element;
|
||||
// Hide original element
|
||||
passedElement.conceal();
|
||||
// Wrap input in container preserving DOM ordering
|
||||
containerInner.wrap(passedElement.element);
|
||||
// Wrapper inner container with outer container
|
||||
containerOuter.wrap(containerInner.element);
|
||||
if (this._dropdownDetached && this._dropdownParent instanceof HTMLElement) {
|
||||
dropdownParent = this._dropdownParent;
|
||||
}
|
||||
containerOuter.element.appendChild(containerInner.element);
|
||||
containerOuter.element.appendChild(dropdownElement);
|
||||
dropdownParent.appendChild(dropdownElement);
|
||||
containerInner.element.appendChild(this.itemList.element);
|
||||
dropdownElement.appendChild(this.choiceList.element);
|
||||
if (this._isSelectOneElement) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -394,25 +394,26 @@ var Container = /** @class */ (function () {
|
|||
Container.prototype.removeActiveDescendant = function () {
|
||||
this.element.removeAttribute('aria-activedescendant');
|
||||
};
|
||||
Container.prototype.open = function (dropdownPos, dropdownHeight) {
|
||||
Container.prototype.open = function (dropdownPos, dropdownHeight, dropdown) {
|
||||
addClassesToElement(this.element, this.classNames.openState);
|
||||
this.element.setAttribute('aria-expanded', 'true');
|
||||
this.isOpen = true;
|
||||
if (this.shouldFlip(dropdownPos, dropdownHeight)) {
|
||||
addClassesToElement(this.element, this.classNames.flippedState);
|
||||
addClassesToElement(dropdown, this.classNames.flippedState);
|
||||
this.isFlipped = true;
|
||||
}
|
||||
return this.isFlipped;
|
||||
};
|
||||
Container.prototype.close = function () {
|
||||
Container.prototype.close = function (dropdown) {
|
||||
removeClassesFromElement(this.element, 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) {
|
||||
removeClassesFromElement(this.element, this.classNames.flippedState);
|
||||
this.isFlipped = false;
|
||||
}
|
||||
removeClassesFromElement(this.element, this.classNames.flippedState);
|
||||
removeClassesFromElement(dropdown, this.classNames.flippedState);
|
||||
this.isFlipped = false;
|
||||
};
|
||||
Container.prototype.addFocusState = function () {
|
||||
addClassesToElement(this.element, this.classNames.focusState);
|
||||
|
|
@ -922,6 +923,8 @@ var DEFAULT_CLASSNAMES = {
|
|||
listItems: ['choices__list--multiple'],
|
||||
listSingle: ['choices__list--single'],
|
||||
listDropdown: ['choices__list--dropdown'],
|
||||
dropdownMultiple: ['choices__dropdown--multiple'],
|
||||
dropdownSingle: ['choices__dropdown--single'],
|
||||
item: ['choices__item'],
|
||||
itemSelectable: ['choices__item--selectable'],
|
||||
itemDisabled: ['choices__item--disabled'],
|
||||
|
|
@ -1005,6 +1008,7 @@ var DEFAULT_CONFIG = {
|
|||
callbackOnCreateTemplates: null,
|
||||
classNames: DEFAULT_CLASSNAMES,
|
||||
appendGroupInSearch: false,
|
||||
dropdownParent: null,
|
||||
};
|
||||
|
||||
var removeItem = function (item) {
|
||||
|
|
@ -1645,11 +1649,12 @@ var templates = {
|
|||
}
|
||||
return inp;
|
||||
},
|
||||
dropdown: function (_a) {
|
||||
var _b = _a.classNames, list = _b.list, listDropdown = _b.listDropdown;
|
||||
dropdown: function (_a, isSelectOneElement) {
|
||||
var _b = _a.classNames, list = _b.list, listDropdown = _b.listDropdown, dropdownSingle = _b.dropdownSingle, dropdownMultiple = _b.dropdownMultiple;
|
||||
var div = document.createElement('div');
|
||||
addClassesToElement(div, list);
|
||||
addClassesToElement(div, listDropdown);
|
||||
addClassesToElement(div, isSelectOneElement ? dropdownSingle : dropdownMultiple);
|
||||
div.setAttribute('aria-expanded', 'false');
|
||||
return div;
|
||||
},
|
||||
|
|
@ -1835,6 +1840,7 @@ var Choices = /** @class */ (function () {
|
|||
this._onDeleteKey = this._onDeleteKey.bind(this);
|
||||
this._onChange = this._onChange.bind(this);
|
||||
this._onInvalid = this._onInvalid.bind(this);
|
||||
this._onWindowResize = this._onWindowResize.bind(this);
|
||||
// If element has already been initialised with Choices, fail silently
|
||||
if (this.passedElement.isActive) {
|
||||
if (!config.silent) {
|
||||
|
|
@ -1844,6 +1850,15 @@ var Choices = /** @class */ (function () {
|
|||
this.initialisedOK = false;
|
||||
return;
|
||||
}
|
||||
// Dropdown is detached from the original wrapper
|
||||
this._dropdownDetached = false;
|
||||
if (config.dropdownParent) {
|
||||
var parent_1 = this._docRoot.querySelector(config.dropdownParent);
|
||||
if (parent_1) {
|
||||
this._dropdownDetached = true;
|
||||
this._dropdownParent = parent_1;
|
||||
}
|
||||
}
|
||||
// Let's go
|
||||
this.init();
|
||||
// preserve the selected item list after setup for form reset
|
||||
|
|
@ -2026,9 +2041,15 @@ var Choices = /** @class */ (function () {
|
|||
preventInputFocus = !this._canSearch;
|
||||
}
|
||||
requestAnimationFrame(function () {
|
||||
if (_this._dropdownDetached) {
|
||||
_this.setHorizontalDropdownPosition();
|
||||
}
|
||||
_this.dropdown.show();
|
||||
var rect = _this.dropdown.element.getBoundingClientRect();
|
||||
_this.containerOuter.open(rect.bottom, rect.height);
|
||||
var dropdownAbove = _this.containerOuter.open(rect.bottom, rect.height, _this.dropdown.element);
|
||||
if (_this._dropdownDetached) {
|
||||
_this.setVerticalDropdownPosition(dropdownAbove);
|
||||
}
|
||||
if (!preventInputFocus) {
|
||||
_this.input.focus();
|
||||
}
|
||||
|
|
@ -2049,7 +2070,7 @@ var Choices = /** @class */ (function () {
|
|||
this._removeHighlightedChoices();
|
||||
requestAnimationFrame(function () {
|
||||
_this.dropdown.hide();
|
||||
_this.containerOuter.close();
|
||||
_this.containerOuter.close(_this.dropdown.element);
|
||||
if (!preventInputBlur && _this._canSearch) {
|
||||
_this.input.removeActiveDescendant();
|
||||
_this.input.blur();
|
||||
|
|
@ -2058,6 +2079,22 @@ var Choices = /** @class */ (function () {
|
|||
});
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.setHorizontalDropdownPosition = function () {
|
||||
var containerRect = this.containerOuter.element.getBoundingClientRect();
|
||||
this.dropdown.element.style.top = "".concat(window.scrollY + containerRect.bottom, "px");
|
||||
this.dropdown.element.style.left = "".concat(containerRect.left, "px");
|
||||
this.dropdown.element.style.width = "".concat(containerRect.width, "px");
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.setVerticalDropdownPosition = function (above) {
|
||||
if (above === void 0) { above = false; }
|
||||
if (!above || !(this._dropdownParent instanceof HTMLElement)) {
|
||||
return this;
|
||||
}
|
||||
var dropdownRect = this.dropdown.element.getBoundingClientRect();
|
||||
this.dropdown.element.style.top = "".concat(this.containerOuter.element.offsetTop + 1 - dropdownRect.height, "px");
|
||||
return this;
|
||||
};
|
||||
Choices.prototype.getValue = function (valueOnly) {
|
||||
var values = this._store.items.map(function (item) {
|
||||
return (valueOnly ? item.value : getChoiceForOutput(item));
|
||||
|
|
@ -2878,18 +2915,21 @@ var Choices = /** @class */ (function () {
|
|||
Choices.prototype._addEventListeners = function () {
|
||||
var documentElement = this._docRoot;
|
||||
var outerElement = this.containerOuter.element;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var inputElement = this.input.element;
|
||||
var passedElement = this.passedElement.element;
|
||||
// capture events - can cancel event processing or propagation
|
||||
documentElement.addEventListener('touchend', this._onTouchEnd, true);
|
||||
outerElement.addEventListener('keydown', this._onKeyDown, true);
|
||||
outerElement.addEventListener('mousedown', this._onMouseDown, true);
|
||||
dropdownElement.addEventListener('keydown', this._onKeyDown, true);
|
||||
dropdownElement.addEventListener('mousedown', this._onMouseDown, true);
|
||||
// passive events - doesn't call `preventDefault` or `stopPropagation`
|
||||
documentElement.addEventListener('click', this._onClick, { passive: true });
|
||||
documentElement.addEventListener('touchmove', this._onTouchMove, {
|
||||
passive: true,
|
||||
});
|
||||
this.dropdown.element.addEventListener('mouseover', this._onMouseOver, {
|
||||
dropdownElement.addEventListener('mouseover', this._onMouseOver, {
|
||||
passive: true,
|
||||
});
|
||||
if (this._isSelectOneElement) {
|
||||
|
|
@ -2925,19 +2965,25 @@ var Choices = /** @class */ (function () {
|
|||
passive: true,
|
||||
});
|
||||
}
|
||||
if (this._dropdownDetached) {
|
||||
window.addEventListener('resize', this._onWindowResize);
|
||||
}
|
||||
this.input.addEventListeners();
|
||||
};
|
||||
Choices.prototype._removeEventListeners = function () {
|
||||
var documentElement = this._docRoot;
|
||||
var outerElement = this.containerOuter.element;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var inputElement = this.input.element;
|
||||
var passedElement = this.passedElement.element;
|
||||
documentElement.removeEventListener('touchend', this._onTouchEnd, true);
|
||||
outerElement.removeEventListener('keydown', this._onKeyDown, true);
|
||||
outerElement.removeEventListener('mousedown', this._onMouseDown, true);
|
||||
dropdownElement.removeEventListener('keydown', this._onKeyDown);
|
||||
dropdownElement.removeEventListener('mousedown', this._onMouseDown);
|
||||
documentElement.removeEventListener('click', this._onClick);
|
||||
documentElement.removeEventListener('touchmove', this._onTouchMove);
|
||||
this.dropdown.element.removeEventListener('mouseover', this._onMouseOver);
|
||||
dropdownElement.removeEventListener('mouseover', this._onMouseOver);
|
||||
if (this._isSelectOneElement) {
|
||||
outerElement.removeEventListener('focus', this._onFocus);
|
||||
outerElement.removeEventListener('blur', this._onBlur);
|
||||
|
|
@ -2953,6 +2999,9 @@ var Choices = /** @class */ (function () {
|
|||
passedElement.removeEventListener('change', this._onChange);
|
||||
passedElement.removeEventListener('invalid', this._onInvalid);
|
||||
}
|
||||
if (this._dropdownDetached) {
|
||||
window.removeEventListener('resize', this._onWindowResize);
|
||||
}
|
||||
this.input.removeEventListeners();
|
||||
};
|
||||
Choices.prototype._onKeyDown = function (event) {
|
||||
|
|
@ -3344,6 +3393,15 @@ var Choices = /** @class */ (function () {
|
|||
Choices.prototype._onInvalid = function () {
|
||||
this.containerOuter.addInvalidState();
|
||||
};
|
||||
Choices.prototype._onWindowResize = function () {
|
||||
if (!this.dropdown.isActive) {
|
||||
return;
|
||||
}
|
||||
this.setHorizontalDropdownPosition();
|
||||
var rect = this.dropdown.element.getBoundingClientRect();
|
||||
var dropdownAbove = this.containerOuter.shouldFlip(rect.bottom, rect.height);
|
||||
this.setVerticalDropdownPosition(dropdownAbove);
|
||||
};
|
||||
/**
|
||||
* Removes any highlighted choice options
|
||||
*/
|
||||
|
|
@ -3522,7 +3580,7 @@ var Choices = /** @class */ (function () {
|
|||
element: templating.itemList(config, isSelectOneElement),
|
||||
});
|
||||
this.dropdown = new Dropdown({
|
||||
element: templating.dropdown(config),
|
||||
element: templating.dropdown(config, isSelectOneElement),
|
||||
classNames: classNames,
|
||||
type: elementType,
|
||||
});
|
||||
|
|
@ -3530,14 +3588,18 @@ var Choices = /** @class */ (function () {
|
|||
Choices.prototype._createStructure = function () {
|
||||
var _a = this, containerInner = _a.containerInner, containerOuter = _a.containerOuter, passedElement = _a.passedElement;
|
||||
var dropdownElement = this.dropdown.element;
|
||||
var dropdownParent = containerOuter.element;
|
||||
// Hide original element
|
||||
passedElement.conceal();
|
||||
// Wrap input in container preserving DOM ordering
|
||||
containerInner.wrap(passedElement.element);
|
||||
// Wrapper inner container with outer container
|
||||
containerOuter.wrap(containerInner.element);
|
||||
if (this._dropdownDetached && this._dropdownParent instanceof HTMLElement) {
|
||||
dropdownParent = this._dropdownParent;
|
||||
}
|
||||
containerOuter.element.appendChild(containerInner.element);
|
||||
containerOuter.element.appendChild(dropdownElement);
|
||||
dropdownParent.appendChild(dropdownElement);
|
||||
containerInner.element.appendChild(this.itemList.element);
|
||||
dropdownElement.appendChild(this.choiceList.element);
|
||||
if (this._isSelectOneElement) {
|
||||
|
|
|
|||
|
|
@ -47,7 +47,6 @@ body {
|
|||
position: relative;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -169,6 +168,11 @@ label + p {
|
|||
color: var(--link-color-section, var(--color-primary));
|
||||
}
|
||||
|
||||
/** Set the section color on the dropdown list to not inherit the white color */
|
||||
body > .choices__list {
|
||||
color: var(--section-color, #333);
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../../../src/styles/base.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAIA;EACE;;;AAGF;EACE;AACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;;EAGF;IACE;;;AAYJ;EACE;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,eAtFiB;;;AAyFnB;AAAA;EAEE,WA1FoB;;;AA6FtB;AAAA;EAEE,WA9FoB;;;AAiGtB;AAAA;EAEE,WAlGoB;;;AAqGtB;AAAA;EAEE,WAtGoB;;;AAyGtB;AAAA;EAEE,WA1GoB;;;AA6GtB;AAAA;EAEE,WA9GoB;;;AAiHtB;EACE;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;;AAIJ;EACE;EACA,SAxIiB;EAyIjB;;AAEA;AAAA;AAAA;EAGE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE,eArKiB;;;AAwKnB;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,eArLiB;;;AAwLnB","file":"base.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["../../../src/styles/base.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAIA;EACE;;;AAGF;EACE;AACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;;EAGF;IACE;;;AAYJ;EACE;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,eArFiB;;;AAwFnB;AAAA;EAEE,WAzFoB;;;AA4FtB;AAAA;EAEE,WA7FoB;;;AAgGtB;AAAA;EAEE,WAjGoB;;;AAoGtB;AAAA;EAEE,WArGoB;;;AAwGtB;AAAA;EAEE,WAzGoB;;;AA4GtB;AAAA;EAEE,WA7GoB;;;AAgHtB;EACE;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;;AAIJ;EACE;EACA,SAvIiB;EAwIjB;;AAEA;AAAA;AAAA;EAGE;;;AAIJ;AAEA;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE,eA1KiB;;;AA6KnB;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,eA1LiB;;;AA6LnB","file":"base.css"}
|
||||
2
public/assets/styles/base.min.css
vendored
2
public/assets/styles/base.min.css
vendored
|
|
@ -1 +1 @@
|
|||
:root{--color-primary:#005F75}@media (prefers-color-scheme:dark){:root{--body-bg:#272a2b;--text-color:#cacaca;--color-primary:#38daff;--section-bg:#181a1b;--section-color:#cacaca;--hr-border:#373a3d;--choices-primary-color:#38daff;--choices-item-color:black;--choices-bg-color:#101010;--choices-bg-color-dropdown:#101010;--choices-keyline-color:#3b3e40;--choices-bg-color-disabled:#181a1b;--choices-item-disabled-color:#eee;--choices-disabled-color:#2d2d2d;--choices-highlighted-color:#16292d;--choices-icon-cross:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");--choices-icon-cross-inverse:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");color-scheme:dark}input,select{color:#fff}}*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,::after,::before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%;height:100%}body{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:16px;line-height:1.4;color:var(--text-color, #fff);background-color:var(--body-bg, #333);overflow-x:hidden}hr,label{display:block}label,p{margin-bottom:8px}label{font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0}hr{margin:30px 0;border:0;border-bottom:1px solid var(--hr-border, #eaeaea);height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:var(--link-color, #fff);text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:var(--form-bg, #f9f9f9);padding:12px;border:1px solid var(--form-boder, #ddd);border-radius:2.5px;font-size:14px;appearance:none;margin-bottom:24px}.h1,h1{font-size:32px}.h2,h2{font-size:24px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:16px}.h6,h6{font-size:14px}label+p{margin-top:-4px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width:620px){.container{padding:0}}.section{background-color:var(--section-bg, #fff);padding:24px;color:var(--section-color, #333)}.section a,.section a:focus,.section a:visited{color:var(--link-color-section, var(--color-primary))}.logo{display:block;margin-bottom:12px}.logo-img{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}.push-bottom{margin-bottom:24px}.zero-bottom{margin-bottom:0}.zero-top{margin-top:0}.text-center{text-align:center}[data-test-hook]{margin-bottom:24px}
|
||||
:root{--color-primary:#005F75}@media (prefers-color-scheme:dark){:root{--body-bg:#272a2b;--text-color:#cacaca;--color-primary:#38daff;--section-bg:#181a1b;--section-color:#cacaca;--hr-border:#373a3d;--choices-primary-color:#38daff;--choices-item-color:black;--choices-bg-color:#101010;--choices-bg-color-dropdown:#101010;--choices-keyline-color:#3b3e40;--choices-bg-color-disabled:#181a1b;--choices-item-disabled-color:#eee;--choices-disabled-color:#2d2d2d;--choices-highlighted-color:#16292d;--choices-icon-cross:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");--choices-icon-cross-inverse:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");color-scheme:dark}input,select{color:#fff}}*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,::after,::before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%}body{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:16px;line-height:1.4;color:var(--text-color, #fff);background-color:var(--body-bg, #333);overflow-x:hidden}hr,label{display:block}label,p{margin-bottom:8px}label{font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0}hr{margin:30px 0;border:0;border-bottom:1px solid var(--hr-border, #eaeaea);height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:var(--link-color, #fff);text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:var(--form-bg, #f9f9f9);padding:12px;border:1px solid var(--form-boder, #ddd);border-radius:2.5px;font-size:14px;appearance:none;margin-bottom:24px}.h1,h1{font-size:32px}.h2,h2{font-size:24px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:16px}.h6,h6{font-size:14px}label+p{margin-top:-4px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width:620px){.container{padding:0}}.section{background-color:var(--section-bg, #fff);padding:24px;color:var(--section-color, #333)}.section a,.section a:focus,.section a:visited{color:var(--link-color-section, var(--color-primary))}body>.choices__list{color:var(--section-color, #333)}.logo{display:block;margin-bottom:12px}.logo-img{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}.push-bottom{margin-bottom:24px}.zero-bottom{margin-bottom:0}.zero-top{margin-top:0}.text-center{text-align:center}[data-test-hook]{margin-bottom:24px}
|
||||
|
|
@ -16,6 +16,10 @@
|
|||
.choices.is-open {
|
||||
overflow: visible;
|
||||
}
|
||||
.choices.is-flipped .choices__list {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
}
|
||||
.choices.is-disabled :is(.choices__inner, .choices__input) {
|
||||
background-color: var(--choices-bg-color-disabled, #eaeaea);
|
||||
cursor: not-allowed !important;
|
||||
|
|
@ -39,14 +43,6 @@
|
|||
.choices[data-type*=select-one] .choices__inner {
|
||||
padding-bottom: var(--choices-inner-one-padding, 7.5px);
|
||||
}
|
||||
.choices[data-type*=select-one] .choices__input {
|
||||
display: block;
|
||||
width: var(--choices-width, 100%);
|
||||
padding: var(--choices-dropdown-item-padding, 10px);
|
||||
border-bottom: var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd);
|
||||
background-color: var(--choices-bg-color-dropdown, #fff);
|
||||
margin: 0;
|
||||
}
|
||||
.choices[data-type*=select-one] .choices__button {
|
||||
background-image: var(--choices-icon-cross-inverse, url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg=="));
|
||||
padding: 0;
|
||||
|
|
@ -98,6 +94,15 @@
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
.choices__dropdown--single .choices__input {
|
||||
display: block;
|
||||
width: var(--choices-width, 100%);
|
||||
padding: var(--choices-dropdown-item-padding, 10px);
|
||||
border-bottom: var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd);
|
||||
background-color: var(--choices-bg-color-dropdown, #fff);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.choices:is([data-type*=select-multiple], [data-type*=text]) .choices__inner {
|
||||
cursor: text;
|
||||
}
|
||||
|
|
@ -215,12 +220,10 @@
|
|||
.is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] {
|
||||
border-color: color-mix(in srgb, var(--choices-keyline-color, #ddd) 85%, var(--choices-darken, black));
|
||||
}
|
||||
.is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
.is-flipped.choices__list--dropdown, .is-flipped.choices__list[aria-expanded] {
|
||||
margin-top: 0;
|
||||
margin-bottom: -1px;
|
||||
border-radius: 0.25rem 0.25rem 0 0;
|
||||
border-radius: var(--choices-border-radius, 2.5px) var(--choices-border-radius, 2.5px) 0 0;
|
||||
}
|
||||
.choices__list--dropdown .choices__list, .choices__list[aria-expanded] .choices__list {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../../../src/styles/choices.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAiDA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAIA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;;AAMJ;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;;AAOF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;;AAIJ;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEA;EACE;;AAKA;EADF;IAEI;;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAEA;IACE;IACA;;;AAQN;EACE;;AAIJ;EAEE;;;AASN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA,WArXqB;EAsXrB;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAIE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF","file":"choices.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["../../../src/styles/choices.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAiDA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAKA;EACE;EACA;;AAKF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAKF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;;AAOF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;;AAIJ;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEA;EACE;;AAKA;EADF;IAEI;;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAEA;IACE;IACA;;;AAQN;EACE;;AAIJ;EAEE;;;AASN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA,WA9XqB;EA+XrB;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAIE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF","file":"choices.css"}
|
||||
2
public/assets/styles/choices.min.css
vendored
2
public/assets/styles/choices.min.css
vendored
File diff suppressed because one or more lines are too long
5
public/types/src/scripts/choices.d.ts
vendored
5
public/types/src/scripts/choices.d.ts
vendored
|
|
@ -62,6 +62,8 @@ declare class Choices {
|
|||
text: string;
|
||||
};
|
||||
_docRoot: ShadowRoot | HTMLElement;
|
||||
_dropdownParent: HTMLElement | null;
|
||||
_dropdownDetached: boolean;
|
||||
constructor(element?: string | Element | HTMLInputElement | HTMLSelectElement, userConfig?: Partial<Options>);
|
||||
init(): void;
|
||||
destroy(): void;
|
||||
|
|
@ -76,6 +78,8 @@ declare class Choices {
|
|||
removeHighlightedItems(runEvent?: boolean): this;
|
||||
showDropdown(preventInputFocus?: boolean): this;
|
||||
hideDropdown(preventInputBlur?: boolean): this;
|
||||
setHorizontalDropdownPosition(): this;
|
||||
setVerticalDropdownPosition(above?: boolean): this;
|
||||
getValue<B extends boolean = false>(valueOnly?: B): EventChoiceValueType<B> | EventChoiceValueType<B>[];
|
||||
setValue(items: string[] | InputChoice[]): this;
|
||||
setChoiceByValue(value: string | string[]): this;
|
||||
|
|
@ -200,6 +204,7 @@ declare class Choices {
|
|||
target: HTMLInputElement | HTMLSelectElement;
|
||||
}): void;
|
||||
_onInvalid(): void;
|
||||
_onWindowResize(): void;
|
||||
/**
|
||||
* Removes any highlighted choice options
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@ export default class Container {
|
|||
shouldFlip(dropdownPos: number, dropdownHeight: number): boolean;
|
||||
setActiveDescendant(activeDescendantID: string): void;
|
||||
removeActiveDescendant(): void;
|
||||
open(dropdownPos: number, dropdownHeight: number): void;
|
||||
close(): void;
|
||||
open(dropdownPos: number, dropdownHeight: number, dropdown: HTMLElement): boolean;
|
||||
close(dropdown: HTMLElement): void;
|
||||
addFocusState(): void;
|
||||
removeFocusState(): void;
|
||||
addInvalidState(): void;
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@ export interface ClassNames {
|
|||
listSingle: string | Array<string>;
|
||||
/** @default ['choices__list--dropdown'] */
|
||||
listDropdown: string | Array<string>;
|
||||
/** @default ['choices__dropdown--multiple'] */
|
||||
dropdownMultiple: string | Array<string>;
|
||||
/** @default ['choices__dropdown--single'] */
|
||||
dropdownSingle: string | Array<string>;
|
||||
/** @default ['choices__item'] */
|
||||
item: string | Array<string>;
|
||||
/** @default ['choices__item--selectable'] */
|
||||
|
|
|
|||
|
|
@ -579,4 +579,12 @@ export interface Options {
|
|||
*/
|
||||
callbackOnCreateTemplates: CallbackOnCreateTemplatesFn | null;
|
||||
appendGroupInSearch: boolean;
|
||||
/**
|
||||
* CSS selector for the element to append the dropdown to. Similar to select2's appendTo option
|
||||
*
|
||||
* **Input types affected:** `select-one`, `select-multiple`
|
||||
*
|
||||
* @default null
|
||||
*/
|
||||
dropdownParent: string | null;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export interface Templates {
|
|||
choiceGroup(options: TemplateOptions, group: GroupFull): HTMLDivElement;
|
||||
choice(options: TemplateOptions, choice: ChoiceFull, selectText: string, groupText?: string): HTMLDivElement;
|
||||
input(options: TemplateOptions, placeholderValue: string | null): HTMLInputElement;
|
||||
dropdown(options: TemplateOptions): HTMLDivElement;
|
||||
dropdown(options: TemplateOptions, isSelectOneElement: boolean): HTMLDivElement;
|
||||
notice(options: TemplateOptions, innerText: string, type: NoticeType): HTMLDivElement;
|
||||
option(choice: ChoiceFull): HTMLOptionElement;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue