@schukai/monster 3.52.1 → 3.54.0

package/source/components/form/popper-button.mjs

@@ -142,8 +142,7 @@ class PopperButton extends Popper {
 	 * @property {object} popper - The popper options.
 	 * @extends {Button.defaults}
 	 */
-	get defaults() {;
-
+	get defaults() {
 		return Object.assign({}, super.defaults, {
 			templates: {
 				main: getTemplate(),
@@ -169,7 +168,7 @@ class PopperButton extends Popper {
 	 * @return {Monster.Components.Form.PopperButton}
 	 */
 	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();;
+		super[assembleMethodSymbol]();
 		initControlReferences.call(this);
 		initEventhandler.call(this);
 
@@ -198,7 +197,7 @@ class PopperButton extends Popper {
 	connectedCallback() {
 		super.connectedCallback();
 
-		const document = getDocument();;
+		const document = getDocument();
 
 		for (const [, type] of Object.entries(["click", "touch"])) {
 			// close on outside ui-events
@@ -324,8 +323,7 @@ class PopperButton extends Popper {
  * @private
  * @return {initEventhandler}
  */
-function initEventhandler() {;
-
+function initEventhandler() {
 	this[closeEventHandler] = (event) => {
 		const path = event.composedPath();
 
@@ -343,8 +341,7 @@ function initEventhandler() {;
 /**
  * @private
  */
-function attachResizeObserver() {;
-
+function attachResizeObserver() {
 	// against flickering
 	this[resizeObserverSymbol] = new ResizeObserver(() => {
 		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
@@ -364,7 +361,7 @@ function attachResizeObserver() {;
 	this[resizeObserverSymbol].observe(this.parentElement);
 }
 
-function disconnectResizeObserver() {;
+function disconnectResizeObserver() {
 	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
 		this[resizeObserverSymbol].disconnect();
 	}
@@ -373,8 +370,7 @@ function disconnectResizeObserver() {;
 /**
  * @private
  */
-function updatePopper() {;
-
+function updatePopper() {
 	if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
 		return;
 	}

package/source/components/form/popper.mjs

@@ -164,7 +164,7 @@ class Popper extends CustomControl {
 	 * @return {Monster.Components.Form.Popper}
 	 */
 	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();;
+		super[assembleMethodSymbol]();
 		initControlReferences.call(this);
 		initEventhandler.call(this);
 
@@ -191,7 +191,7 @@ class Popper extends CustomControl {
 	connectedCallback() {
 		super.connectedCallback();
 
-		const document = getDocument();;
+		const document = getDocument();
 
 		for (const [, type] of Object.entries(["click", "touch"])) {
 			// close on outside ui-events
@@ -252,8 +252,7 @@ class Popper extends CustomControl {
  * @private
  * @return {Monster.Components.Form.Popper}
  */
-function initEventhandler() {;
-
+function initEventhandler() {
 	this[closeEventHandler] = (event) => {
 		const path = event.composedPath();
 
@@ -287,8 +286,7 @@ function initEventhandler() {;
 	return this;
 }
 
-function initEventHandlerByMode(mode) {;
-
+function initEventHandlerByMode(mode) {
 	switch (mode) {
 		case "manual":
 			break;
@@ -345,8 +343,7 @@ function initEventHandlerByMode(mode) {;
 /**
  * @private
  */
-function attachResizeObserver() {;
-
+function attachResizeObserver() {
 	// against flickering
 	this[resizeObserverSymbol] = new ResizeObserver((entries) => {
 		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
@@ -366,7 +363,7 @@ function attachResizeObserver() {;
 	this[resizeObserverSymbol].observe(this.parentElement);
 }
 
-function disconnectResizeObserver() {;
+function disconnectResizeObserver() {
 	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
 		this[resizeObserverSymbol].disconnect();
 	}
@@ -427,8 +424,7 @@ function show() {
 /**
  * @private
  */
-function updatePopper() {;
-
+function updatePopper() {
 	if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
 		return;
 	}

package/source/components/form/reload.mjs

@@ -166,7 +166,7 @@ class Reload extends CustomElement {
 	/**
 	 *
 	 */
-	[initMethodSymbol]() {;
+	[initMethodSymbol]() {
 		super[initMethodSymbol]();
 
 		// data-monster-options
@@ -191,7 +191,7 @@ class Reload extends CustomElement {
 	 * @fires Monster.Components.Form.event:monster-fetched
 	 * @return {Monster.Components.Form.Form}
 	 */
-	[assembleMethodSymbol]() {;
+	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 		initIntersectionObserver.call(this);
 	}
@@ -232,7 +232,7 @@ class Reload extends CustomElement {
  * @private
  * @return {object}
  */
-function initOptionsFromArguments() {;
+function initOptionsFromArguments() {
 	const options = {};
 
 	const url = this.getAttribute(ATTRIBUTE_FORM_URL);
@@ -259,8 +259,7 @@ function initOptionsFromArguments() {;
  * @throws {Error} undefined status or type
  * @fires Monster.Components.Form.event:monster-fetched
  */
-function initIntersectionObserver() {;
-
+function initIntersectionObserver() {
 	if (this[intersectionObserverWasInitialized] === true) {
 		return;
 	}
@@ -310,8 +309,7 @@ function initIntersectionObserver() {;
  * @fires Monster.Components.Form.event:monster-fetched
  * @return {Promise}
  */
-function loadContent() {;
-
+function loadContent() {
 	const url = this.getOption("url", undefined);
 	if (!isString(url) || url === "") {
 		throw new Error("missing url");

package/source/components/form/select.mjs

@@ -349,8 +349,7 @@ class Select extends CustomControl {
 	 * @since 1.2.0
 	 * @throws {Error} unsupported type
 	 */
-	set value(value) {;
-
+	set value(value) {
 		const result = convertValueToSelection.call(this, value);
 		setSelection
 			.call(this, result.selection)
@@ -392,6 +391,7 @@ class Select extends CustomControl {
 	 * @property {Boolean} features.clearAll=true Display of a delete button to delete the entire selection
 	 * @property {Boolean} features.clear=true Display of a delete key for deleting the specific selection
 	 * @property {Boolean} features.loadOnOpen=false Load options when opening the dropdown
+	 * @property {Boolean} features.closeOnSelect=false Close the dropdown when an option is selected (since 3.54.0)
 	 * @property {Boolean} filter.defaultValue=* Default filter value, if the filter is empty
 	 * @property {Boolean} filter.mode=options Filter mode, values: options, remote, disabled
 	 * @property {Object} templates Template definitions
@@ -425,6 +425,7 @@ class Select extends CustomControl {
 					clearAll: true,
 					clear: true,
 					loadOnOpen: false,
+					closeOnSelect: false,
 				},
 				url: null,
 				labels: {
@@ -558,7 +559,7 @@ class Select extends CustomControl {
 	 * @since 3.27.0
 	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click}
 	 */
-	click() {;
+	click() {
 		if (this.getOption("disabled") === true) {
 			return;
 		}
@@ -572,7 +573,7 @@ class Select extends CustomControl {
 	 * @since 3.27.0
 	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus}
 	 */
-	focus(options) {;
+	focus(options) {
 		if (this.getOption("disabled") === true) {
 			return;
 		}
@@ -591,7 +592,7 @@ class Select extends CustomControl {
 	 * The Button.blur() method removes focus from the internal button element.
 	 * @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur
 	 */
-	blur() {;
+	blur() {
 		new Processing(() => {
 			gatherState.call(this);
 			blurFilter.call(this);
@@ -608,8 +609,7 @@ class Select extends CustomControl {
 	 * @param {string|URL} url URL to fetch the options
 	 * @return {Promise}
 	 */
-	fetch(url) {;
-
+	fetch(url) {
 		if (url instanceof URL) {
 			url = url.toString();
 		}
@@ -634,7 +634,7 @@ class Select extends CustomControl {
 	 */
 	connectedCallback() {
 		super.connectedCallback();
-		const document = getDocument();;
+		const document = getDocument();
 
 		for (const [, type] of Object.entries(["click", "touch"])) {
 			// close on outside ui-events
@@ -656,7 +656,7 @@ class Select extends CustomControl {
 	 */
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		const document = getDocument();;
+		const document = getDocument();
 
 		// close on outside ui-events
 		for (const [, type] of Object.entries(["click", "touch"])) {
@@ -676,8 +676,7 @@ class Select extends CustomControl {
 	 * @throws {Error} map is not iterable
 	 * @throws {Error} missing label configuration
 	 */
-	importOptions(data) {;
-
+	importOptions(data) {
 		const mappingOptions = this.getOption("mapping", {});
 		const selector = mappingOptions?.["selector"];
 		const labelTemplate = mappingOptions?.["labelTemplate"];
@@ -722,7 +721,7 @@ class Select extends CustomControl {
 		fireCustomEvent(this, "monster-options-set", {
 			options,
 		});
-
+		
 		return this;
 	}
 
@@ -762,7 +761,7 @@ class Select extends CustomControl {
  * @private
  * @return {object}
  */
-function initOptionsFromArguments() {;
+function initOptionsFromArguments() {
 	const options = {};
 
 	const template = this.getAttribute("data-monster-selected-template");
@@ -792,8 +791,7 @@ function initOptionsFromArguments() {;
 /**
  * @private
  */
-function attachResizeObserver() {;
-
+function attachResizeObserver() {
 	// against flickering
 	this[resizeObserverSymbol] = new ResizeObserver((entries) => {
 		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
@@ -814,7 +812,7 @@ function attachResizeObserver() {;
 	this[resizeObserverSymbol].observe(this.parentElement);
 }
 
-function disconnectResizeObserver() {;
+function disconnectResizeObserver() {
 	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
 		this[resizeObserverSymbol].disconnect();
 	}
@@ -848,8 +846,7 @@ function getSummaryTemplate() {
  * @return {void}
  * @private
  */
-function parseSlotsToOptions() {;
-
+function parseSlotsToOptions() {
 	let options = this.getOption("options");
 	if (!isIterable(options)) {
 		options = [];
@@ -857,7 +854,7 @@ function parseSlotsToOptions() {;
 
 	let counter = 1;
 	getSlottedElements.call(this, "div").forEach((node) => {
-		let value = String(counter++);
+		let value = (counter++).toString();
 		let visibility = "visible";
 
 		if (node.hasAttribute("data-monster-value")) {
@@ -928,7 +925,7 @@ function runAsOptionLengthChanged(targetLength) {
  * @param {*} value
  * @return {*}
  */
-function buildSelectionLabel(value) {;
+function buildSelectionLabel(value) {
 	const options = this.getOption("options");
 
 	for (let i = 0; i < options.length; i++) {
@@ -949,8 +946,7 @@ function buildSelectionLabel(value) {;
  * @return {string}
  * @throws {Error} no value found
  */
-function getSelectionLabel(value) {;
-
+function getSelectionLabel(value) {
 	const callback = this.getOption("formatter.selection");
 	if (isFunction(callback)) {
 		const label = callback.call(this, value);
@@ -968,8 +964,7 @@ function getSelectionLabel(value) {;
  * @private
  * @param {Event} event
  */
-function handleToggleKeyboardEvents(event) {;
-
+function handleToggleKeyboardEvents(event) {
 	switch (event?.["code"]) {
 		case "Escape":
 			toggle.call(this);
@@ -1007,8 +1002,7 @@ function initOptionObserver() {
 	);
 }
 
-function getDefaultTranslation() {;
-
+function getDefaultTranslation() {
 	const translation = new Translations("en").assignTranslations(
 		this.getOption("labels", {}),
 	);
@@ -1025,8 +1019,7 @@ function getDefaultTranslation() {;
  * @private
  * @returns {string|*}
  */
-function setSummaryAndControlText() {;
-
+function setSummaryAndControlText() {
 	const translations = getDefaultTranslation.call(this);
 	const selections = this.getOption("selection");
 
@@ -1091,8 +1084,7 @@ function getOptionElements() {
 /**
  * @private
  */
-function calcAndSetOptionsDimension() {;
-
+function calcAndSetOptionsDimension() {
 	const options = getOptionElements.call(this);
 	const container = this[optionsElementSymbol];
 	if (!(container instanceof HTMLElement && options instanceof NodeList)) {
@@ -1168,8 +1160,7 @@ function calcAndSetOptionsDimension() {;
  * @param {number} direction
  * @throws {Error} no shadow-root is defined
  */
-function activateCurrentOption(direction) {;
-
+function activateCurrentOption(direction) {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -1237,8 +1228,7 @@ function activateCurrentOption(direction) {;
 /**
  * @private
  */
-function filterOptions() {;
-
+function filterOptions() {
 	new Processing(() => {
 		let filterValue;
 
@@ -1285,8 +1275,7 @@ function filterOptions() {;
  * @private
  * @param {Event} event
  */
-function handleFilterKeyboardEvents(event) {;
-
+function handleFilterKeyboardEvents(event) {
 	const shiftKey = event?.["shiftKey"];
 
 	switch (event?.["code"]) {
@@ -1322,8 +1311,7 @@ function handleFilterKeyboardEvents(event) {;
 /**
  * @private
  */
-function filterFromRemote() {;
-
+function filterFromRemote() {
 	if (!(this[inlineFilterElementSymbol] instanceof HTMLElement)) {
 		return;
 	}
@@ -1347,8 +1335,7 @@ function filterFromRemote() {;
 			url = new Formatter({ filter: filterValue }).format(optionUrl);
 		}
 
-		this
-			.fetch(url)
+		this.fetch(url)
 			.then(() => {
 				checkOptionState.call(this);
 			})
@@ -1363,8 +1350,7 @@ function filterFromRemote() {;
  * @param {Event} event
  * @private
  */
-function handleOptionKeyboardEvents(event) {;
-
+function handleOptionKeyboardEvents(event) {
 	const shiftKey = event?.["shiftKey"];
 
 	switch (event?.["code"]) {
@@ -1410,8 +1396,7 @@ function handleOptionKeyboardEvents(event) {;
  * @private
  * @returns {string}
  */
-function getFilterMode() {;
-
+function getFilterMode() {
 	switch (this.getOption("filter.mode")) {
 		case FILTER_MODE_OPTIONS:
 			return FILTER_MODE_OPTIONS;
@@ -1425,8 +1410,7 @@ function getFilterMode() {;
 /**
  * @private
  */
-function blurFilter() {;
-
+function blurFilter() {
 	if (!(this[inlineFilterElementSymbol] instanceof HTMLElement)) {
 		return;
 	}
@@ -1446,8 +1430,7 @@ function blurFilter() {;
  * @private
  * @param focusOptions
  */
-function focusPopperFilter(focusOptions) {;
-
+function focusPopperFilter(focusOptions) {
 	this[popperFilterContainerElementSymbol].classList.remove("d-none");
 	this[popperFilterElementSymbol].classList.add("active");
 	this[inlineFilterElementSymbol].classList.remove("active");
@@ -1477,8 +1460,7 @@ function focusPopperFilter(focusOptions) {;
  * @private
  * @param focusOptions
  */
-function focusInlineFilter(focusOptions) {;
-
+function focusInlineFilter(focusOptions) {
 	const options = this.getOption("options");
 	if (
 		(!isArray(options) || options.length === 0) &&
@@ -1505,8 +1487,7 @@ function focusInlineFilter(focusOptions) {;
 /**
  * @private
  */
-function focusFilter(focusOptions) {;
-
+function focusFilter(focusOptions) {
 	if (getFilterMode.call(this) === FILTER_MODE_DISABLED) {
 		this[popperFilterContainerElementSymbol].classList.add("d-none");
 		this[inlineFilterElementSymbol].classList.add("d-none");
@@ -1526,8 +1507,7 @@ function focusFilter(focusOptions) {;
  * @throws {Error} no shadow-root is defined
  * @throws {Error} unsupported type
  */
-function gatherState() {;
-
+function gatherState() {
 	const type = this.getOption("type");
 	if (["radio", "checkbox"].indexOf(type) === -1) {
 		throw new Error("unsupported type");
@@ -1554,6 +1534,10 @@ function gatherState() {;
 		.catch((e) => {
 			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `${e}`);
 		});
+	
+	if (this.getOption("features.closeOnSelect") === true) {
+		toggle.call(this);
+	}
 
 	return this;
 }
@@ -1563,8 +1547,7 @@ function gatherState() {;
  * @throws {Error} no shadow-root is defined
  * @throws {Error} unsupported type
  */
-function clearSelection() {;
-
+function clearSelection() {
 	const type = this.getOption("type");
 	if (["radio", "checkbox"].indexOf(type) === -1) {
 		throw new Error("unsupported type");
@@ -1585,8 +1568,7 @@ function clearSelection() {;
 /**
  * @private
  */
-function areOptionsAvailableAndInit() {;
-
+function areOptionsAvailableAndInit() {
 	// prevent multiple calls
 	if (this[areOptionsAvailableAndInitSymbol] === undefined) {
 		this[areOptionsAvailableAndInitSymbol] = 0;
@@ -1676,8 +1658,7 @@ function areOptionsAvailableAndInit() {;
  * @private
  * @throws {Error} no shadow-root is defined
  */
-function checkOptionState() {;
-
+function checkOptionState() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -1709,7 +1690,7 @@ function checkOptionState() {;
  * @param {*} value
  * @return {Object}
  */
-function convertValueToSelection(value) {;
+function convertValueToSelection(value) {
 	const selection = [];
 
 	if (isString(value)) {
@@ -1752,8 +1733,7 @@ function convertValueToSelection(value) {;
  * @param {array} selection
  * @return {string}
  */
-function convertSelectionToValue(selection) {;
-
+function convertSelectionToValue(selection) {
 	const value = [];
 
 	if (isArray(selection)) {
@@ -1778,8 +1758,7 @@ function convertSelectionToValue(selection) {;
  * @return {Promise}
  * @throws {Error} no shadow-root is defined
  */
-function setSelection(selection) {;
-
+function setSelection(selection) {
 	if (isString(selection)) {
 		const result = convertValueToSelection.call(this, selection);
 		selection = result?.selection;
@@ -1837,8 +1816,7 @@ function setSelection(selection) {;
  * @throws {TypeError} the result cannot be parsed
  * @throws {TypeError} unsupported response
  */
-function fetchData(url) {;
-
+function fetchData(url) {
 	if (!url) url = this.getOption("url");
 	if (!url) return Promise.resolve();
 
@@ -1872,8 +1850,7 @@ function fetchData(url) {;
 /**
  * @private
  */
-function hide() {;
-
+function hide() {
 	this[popperElementSymbol].style.display = "none";
 	setStatusOrRemoveBadges.call(this, "status");
 	removeAttributeToken(this[controlElementSymbol], "class", "open");
@@ -1882,8 +1859,7 @@ function hide() {;
 /**
  * @private
  */
-function show() {;
-
+function show() {
 	if (this.getOption("disabled", undefined) === true) {
 		return;
 	}
@@ -2131,7 +2107,7 @@ function initEventhandler() {
  * @private
  * @return {Select}
  */
-function setStatusOrRemoveBadges(suggestion) {;
+function setStatusOrRemoveBadges(suggestion) {
 	setTimeout(() => {
 		const selection = this.getOption("selection");
 		const clearAllFlag =
@@ -2178,8 +2154,7 @@ function setStatusOrRemoveBadges(suggestion) {;
  * @return {Select}
  * @throws {Error} no shadow-root is defined
  */
-function initControlReferences() {;
-
+function initControlReferences() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -2218,8 +2193,7 @@ function initControlReferences() {;
 /**
  * @private
  */
-function updatePopper() {;
-
+function updatePopper() {
 	if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
 		return;
 	}