@schukai/monster 4.136.30 → 4.137.1

package/source/components/form/choice-cards.mjs

@@ -0,0 +1,525 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact Volker Schukai.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import { CustomControl } from "../../dom/customcontrol.mjs";
+import {
+	assembleMethodSymbol,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { fireCustomEvent, fireEvent } from "../../dom/events.mjs";
+import { isArray, isObject, isString, isNumber } from "../../types/is.mjs";
+import { Observer } from "../../types/observer.mjs";
+import { clone } from "../../util/clone.mjs";
+import { ChoiceCardsStyleSheet } from "./stylesheet/choice-cards.mjs";
+
+export { ChoiceCards };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const controlElementSymbol = Symbol("controlElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const itemsElementSymbol = Symbol("itemsElement");
+
+/**
+ * A card-based single choice control.
+ *
+ * @fragments /fragments/components/form/choice-cards
+ *
+ * @example /examples/components/form/choice-cards-simple Simple card choices
+ *
+ * @since 4.137.0
+ * @copyright Volker Schukai
+ * @summary A visual radio-card picker for choosing one option from a compact set.
+ * @fires monster-selected
+ * @fires monster-change
+ * @fires monster-changed
+ */
+class ChoiceCards extends CustomControl {
+	/**
+	 * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
+	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+	 *
+	 * @property {Array<Object|string|number>} items Choice items.
+	 * @property {string} items[].contentSlot Slot name for custom card content.
+	 * @property {string|null} value Current selected value.
+	 * @property {boolean} disabled Disabled state.
+	 * @property {Object} labels Accessible labels.
+	 * @property {string} labels.group Radio group label.
+	 * @property {Object} templates Template definitions.
+	 * @property {string} templates.main Main template.
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			items: [],
+			value: null,
+			disabled: false,
+			eventProcessing: false,
+			labels: {
+				group: "Choices",
+			},
+			templates: {
+				main: getTemplate(),
+			},
+		});
+	}
+
+	/**
+	 * @return {void}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initControlReferences.call(this);
+		initItems.call(this);
+		initEventHandler.call(this);
+		render.call(this);
+		syncFormValue.call(this);
+
+		this.attachObserver(
+			new Observer(() => {
+				render.call(this);
+				syncFormValue.call(this);
+			}),
+		);
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [ChoiceCardsStyleSheet];
+	}
+
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for(
+			"@schukai/monster/components/form/choice-cards@@instance",
+		);
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-choice-cards";
+	}
+
+	/**
+	 * @return {string}
+	 */
+	get value() {
+		return this.getOption("value");
+	}
+
+	/**
+	 * @param {string|null|undefined} value
+	 */
+	set value(value) {
+		const normalized = normalizeValue(value);
+		if (this.getOption("value") !== normalized) {
+			this.setOption("value", normalized);
+		}
+		syncValueAttribute.call(this, normalized);
+		render.call(this);
+		syncFormValue.call(this);
+	}
+
+	/**
+	 * @return {Array}
+	 */
+	getItems() {
+		return clone(this.getOption("items", []));
+	}
+
+	/**
+	 * @param {Array} items
+	 * @return {ChoiceCards}
+	 */
+	setItems(items) {
+		this.setOption("items", normalizeItems(items));
+		render.call(this);
+		return this;
+	}
+
+	/**
+	 * Select a choice by value.
+	 *
+	 * @param {string|null|undefined} value
+	 * @return {ChoiceCards}
+	 */
+	select(value) {
+		if (this.getOption("disabled") === true || this.hasAttribute("disabled")) {
+			return this;
+		}
+
+		const normalized = normalizeValue(value);
+		const item = findItem.call(this, normalized);
+		if (item?.disabled === true) {
+			return this;
+		}
+
+		if (this.value === normalized) {
+			return this;
+		}
+
+		this.value = normalized;
+		const detail = {
+			value: this.value,
+			item: item || null,
+		};
+
+		fireEvent(this, "change");
+		fireCustomEvent(this, "monster-selected", detail);
+		fireCustomEvent(this, "monster-change", detail);
+		fireCustomEvent(this, "monster-changed", detail);
+
+		return this;
+	}
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function initControlReferences() {
+	this[controlElementSymbol] = this.shadowRoot?.querySelector(
+		"[data-monster-role=control]",
+	);
+	this[itemsElementSymbol] = this.shadowRoot?.querySelector(
+		"[data-monster-role=items]",
+	);
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function initItems() {
+	if (this.hasAttribute("value")) {
+		this.setOption("value", normalizeValue(this.getAttribute("value")));
+	}
+
+	const normalized = normalizeItems(this.getOption("items", []));
+	this.setOption("items", normalized);
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function initEventHandler() {
+	this.addEventListener("click", (event) => {
+		const button = findChoiceButton(event);
+		if (!button) {
+			return;
+		}
+		this.select(button.getAttribute("data-choice-value"));
+	});
+
+	this.addEventListener("keydown", (event) => {
+		if (this.getOption("disabled") === true || this.hasAttribute("disabled")) {
+			return;
+		}
+
+		const buttons = getEnabledButtons.call(this);
+		if (buttons.length === 0) {
+			return;
+		}
+
+		const current = this.shadowRoot?.activeElement;
+		let index = buttons.indexOf(current);
+		if (index < 0) {
+			index = Math.max(
+				0,
+				buttons.findIndex(
+					(button) => button.getAttribute("aria-checked") === "true",
+				),
+			);
+		}
+
+		if (event.key === " " || event.key === "Enter") {
+			event.preventDefault();
+			this.select(buttons[index].getAttribute("data-choice-value"));
+			return;
+		}
+
+		if (event.key === "Home") {
+			event.preventDefault();
+			focusAndSelect.call(this, buttons[0]);
+			return;
+		}
+
+		if (event.key === "End") {
+			event.preventDefault();
+			focusAndSelect.call(this, buttons[buttons.length - 1]);
+			return;
+		}
+
+		if (["ArrowRight", "ArrowDown"].includes(event.key)) {
+			event.preventDefault();
+			focusAndSelect.call(this, buttons[(index + 1) % buttons.length]);
+			return;
+		}
+
+		if (["ArrowLeft", "ArrowUp"].includes(event.key)) {
+			event.preventDefault();
+			focusAndSelect.call(
+				this,
+				buttons[(index - 1 + buttons.length) % buttons.length],
+			);
+		}
+	});
+}
+
+/**
+ * @private
+ * @param {HTMLButtonElement} button
+ * @return {void}
+ */
+function focusAndSelect(button) {
+	button.focus();
+	this.select(button.getAttribute("data-choice-value"));
+}
+
+/**
+ * @private
+ * @param {Event} event
+ * @return {HTMLButtonElement|null}
+ */
+function findChoiceButton(event) {
+	for (const node of event.composedPath()) {
+		if (
+			node instanceof HTMLButtonElement &&
+			node.getAttribute("data-monster-role") === "choice"
+		) {
+			return node;
+		}
+	}
+	return null;
+}
+
+/**
+ * @private
+ * @return {HTMLButtonElement[]}
+ */
+function getEnabledButtons() {
+	return Array.from(
+		this.shadowRoot?.querySelectorAll('[data-monster-role="choice"]') || [],
+	).filter((button) => button.disabled !== true);
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function render() {
+	if (!this[itemsElementSymbol]) {
+		return;
+	}
+
+	const items = normalizeItems(this.getOption("items", []));
+	const value = normalizeValue(this.getOption("value"));
+	const disabled =
+		this.getOption("disabled") === true || this.hasAttribute("disabled");
+	const hasSelectedItem = items.some((item) => item.value === value);
+	const firstEnabledIndex = items.findIndex((item) => item.disabled !== true);
+
+	this[itemsElementSymbol].replaceChildren();
+	this[controlElementSymbol]?.setAttribute(
+		"aria-label",
+		this.getOption("labels.group", "Choices"),
+	);
+
+	for (const [index, item] of items.entries()) {
+		const selected = value !== null && item.value === value;
+		const tabbable =
+			selected || (hasSelectedItem === false && index === firstEnabledIndex);
+		const button = document.createElement("button");
+		button.type = "button";
+		button.setAttribute("data-monster-role", "choice");
+		button.setAttribute("data-choice-value", item.value);
+		button.setAttribute("part", "choice");
+		button.setAttribute("role", "radio");
+		button.setAttribute("aria-label", item.label);
+		button.setAttribute("aria-checked", selected ? "true" : "false");
+		button.tabIndex = tabbable ? 0 : -1;
+		button.disabled = disabled || item.disabled === true;
+		button.classList.toggle("selected", selected);
+		button.classList.toggle("custom-content", !!item.contentSlot);
+
+		if (item.id) {
+			button.setAttribute("data-choice-id", item.id);
+		}
+
+		const indicator = document.createElement("span");
+		indicator.setAttribute("data-monster-role", "indicator");
+		indicator.setAttribute("part", "indicator");
+		button.appendChild(indicator);
+
+		if (item.contentSlot) {
+			const content = document.createElement("span");
+			content.setAttribute("data-monster-role", "content");
+			content.setAttribute("part", "content");
+			const slot = document.createElement("slot");
+			slot.name = item.contentSlot;
+			content.appendChild(slot);
+			button.appendChild(content);
+		} else {
+			const visual = document.createElement("span");
+			visual.setAttribute("data-monster-role", "visual");
+			visual.setAttribute("part", "visual");
+			if (item.iconSlot) {
+				const slot = document.createElement("slot");
+				slot.name = item.iconSlot;
+				visual.appendChild(slot);
+			} else if (item.icon) {
+				visual.setAttribute("data-choice-icon", item.icon);
+			} else {
+				visual.classList.add("empty");
+			}
+			button.appendChild(visual);
+
+			const label = document.createElement("span");
+			label.setAttribute("data-monster-role", "label");
+			label.setAttribute("part", "label");
+			label.textContent = item.label;
+			button.appendChild(label);
+		}
+
+		this[itemsElementSymbol].appendChild(button);
+	}
+}
+
+/**
+ * @private
+ * @param {string|null} value
+ * @return {object|null}
+ */
+function findItem(value) {
+	return normalizeItems(this.getOption("items", [])).find(
+		(item) => item.value === value,
+	);
+}
+
+/**
+ * @private
+ * @param {*} value
+ * @return {string|null}
+ */
+function normalizeValue(value) {
+	if (value === undefined || value === null || value === "") {
+		return null;
+	}
+	return String(value);
+}
+
+/**
+ * @private
+ * @param {*} items
+ * @return {Array}
+ */
+function normalizeItems(items) {
+	if (!isArray(items)) {
+		return [];
+	}
+
+	return items.map((entry, index) => {
+		if (isString(entry) || isNumber(entry)) {
+			return {
+				id: `item-${index}`,
+				value: String(entry),
+				label: String(entry),
+				icon: "",
+				iconSlot: "",
+				contentSlot: "",
+				disabled: false,
+			};
+		}
+
+		if (!isObject(entry)) {
+			return {
+				id: `item-${index}`,
+				value: `item-${index}`,
+				label: "",
+				icon: "",
+				iconSlot: "",
+				contentSlot: "",
+				disabled: false,
+			};
+		}
+
+		const value = normalizeValue(entry.value ?? entry.id ?? `item-${index}`);
+		return {
+			id: String(entry.id ?? value ?? `item-${index}`),
+			value: value ?? `item-${index}`,
+			label: String(entry.label ?? value ?? ""),
+			icon: String(entry.icon ?? ""),
+			iconSlot: String(entry.iconSlot ?? ""),
+			contentSlot: String(entry.contentSlot ?? entry.slot ?? ""),
+			disabled: entry.disabled === true,
+		};
+	});
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function syncFormValue() {
+	if (typeof this.setFormValue === "function") {
+		this.setFormValue(this.value ?? "");
+	}
+}
+
+/**
+ * @private
+ * @param {string|null} value
+ * @return {void}
+ */
+function syncValueAttribute(value) {
+	if (value === null) {
+		if (this.hasAttribute("value")) {
+			this.removeAttribute("value");
+		}
+		return;
+	}
+
+	if (this.getAttribute("value") !== value) {
+		this.setAttribute("value", value);
+	}
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control" role="radiogroup">
+            <div data-monster-role="items" part="items"></div>
+        </div>
+    `;
+}
+
+registerCustomElement(ChoiceCards);

package/source/components/form/form.mjs

@@ -97,7 +97,7 @@ class Form extends DataSet {
 
 			reportValidity: {
 				selector:
-					"input,select,textarea,monster-select,monster-toggle-switch,monster-password",
+					"input,select,textarea,monster-select,monster-toggle-switch,monster-password,monster-choice-cards",
 			},
 
 			eventProcessing: true,

package/source/components/form/select.mjs

@@ -3249,9 +3249,7 @@ function calcAndSetOptionsDimension() {
 	this[popperElementSymbol].style.minWidth = `${Math.ceil(
 		Math.min(widthConstraints.preferredWidth, widthConstraints.maxWidth),
 	)}px`;
-	this[popperElementSymbol].style.maxHeight = `${Math.ceil(
-		popperMaxHeight,
-	)}px`;
+	this[popperElementSymbol].style.maxHeight = `${Math.ceil(popperMaxHeight)}px`;
 	container.style.overflowX = "hidden";
 
 	if (content instanceof HTMLElement) {

package/source/components/form/style/choice-cards.pcss

@@ -0,0 +1,172 @@
+@import "../../style/control.pcss";
+@import "../../style/color.pcss";
+@import "../../style/theme.pcss";
+@import "../../style/border.pcss";
+
+:host {
+  box-sizing: border-box;
+  color: var(--monster-color-primary-1);
+  display: block;
+  font-family: var(--monster-font-family);
+  font-size: 1rem;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+[data-monster-role="control"] {
+  outline: none;
+  width: 100%;
+}
+
+[data-monster-role="items"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--monster-choice-cards-gap, 0.75rem);
+}
+
+[data-monster-role="choice"] {
+  align-items: center;
+  appearance: none;
+  background: var(--monster-bg-color-primary-1);
+  border-color: var(--monster-theme-control-border-color);
+  border-radius: var(--monster-theme-control-border-radius);
+  border-style: var(--monster-theme-control-border-style);
+  border-width: var(--monster-theme-control-border-width);
+  color: var(--monster-color-primary-1);
+  cursor: pointer;
+  display: grid;
+  font: inherit;
+  gap: 0.55rem;
+  grid-template-rows: 1.65rem auto;
+  justify-items: center;
+  min-height: var(--monster-choice-cards-min-height, 6.75rem);
+  min-width: 0;
+  padding: 1.35rem 0.85rem 1.45rem;
+  position: relative;
+  text-align: center;
+  width: min(100%, var(--monster-choice-cards-card-width, 10.5rem));
+}
+
+[data-monster-role="content"] {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+  justify-content: center;
+  min-height: 100%;
+  min-width: 0;
+}
+
+::slotted([slot]) {
+  min-width: 0;
+}
+
+[data-monster-role="choice"]:focus-visible {
+  outline: 1px dashed var(--monster-color-selection-4);
+  outline-offset: 2px;
+}
+
+[data-monster-role="choice"]:hover:not(:disabled) {
+  border-color: var(--monster-bg-color-primary-4);
+}
+
+[data-monster-role="choice"].selected {
+  border-color: var(--monster-color-primary-1);
+}
+
+[data-monster-role="choice"].custom-content {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+[data-monster-role="choice"]:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+[data-monster-role="indicator"] {
+  align-items: center;
+  background: var(--monster-color-primary-1);
+  border-radius: 999px;
+  color: var(--monster-bg-color-primary-1);
+  display: none;
+  height: 1rem;
+  justify-content: center;
+  left: 0.32rem;
+  position: absolute;
+  top: 0.32rem;
+  width: 1rem;
+}
+
+[data-monster-role="choice"].selected [data-monster-role="indicator"] {
+  display: flex;
+}
+
+[data-monster-role="indicator"]::before {
+  background: currentColor;
+  content: "";
+  height: 0.72rem;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M12.78 4.72a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 0 1-1.06 0L3.22 7.78a.75.75 0 1 1 1.06-1.06L7 9.44l4.72-4.72a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E");
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  width: 0.72rem;
+}
+
+[data-monster-role="visual"] {
+  align-items: center;
+  color: var(--monster-color-primary-1);
+  display: inline-flex;
+  height: 1.8rem;
+  justify-content: center;
+  width: 1.8rem;
+}
+
+[data-monster-role="visual"].empty {
+  display: none;
+}
+
+[data-monster-role="visual"][data-choice-icon]::before {
+  background: currentColor;
+  content: "";
+  height: 1.8rem;
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  width: 1.8rem;
+}
+
+[data-monster-role="visual"][data-choice-icon="project-assets"]::before,
+[data-monster-role="visual"][data-choice-icon="stack"]::before {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m12 2 9 4-9 4-9-4 9-4Z'/%3E%3Cpath d='m3 10 9 4 9-4'/%3E%3Cpath d='m3 14 9 4 9-4'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+[data-monster-role="visual"][data-choice-icon="api-collection"]::before,
+[data-monster-role="visual"][data-choice-icon="api"]::before {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect x='5' y='3' width='14' height='16' rx='1.5'/%3E%3Cpath d='M8 7h8M8 15h8M9 11l2-2 2 2M15 9l-2 2 2 2M9 21h6'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+[data-monster-role="label"] {
+  display: block;
+  font-size: 0.86rem;
+  font-weight: 600;
+  line-height: 1.25;
+  max-width: 100%;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+@media (prefers-color-scheme: light) {
+  [data-monster-role="choice"] {
+    border-color: var(--monster-bg-color-primary-3);
+  }
+
+  [data-monster-role="choice"].selected {
+    border-color: var(--monster-color-primary-1);
+  }
+}