@schukai/monster 4.63.0 → 4.65.0

package/source/components/host/call-button.mjs

@@ -43,6 +43,10 @@ const ATTRIBUTE_CALL = `${ATTRIBUTE_PREFIX}call`;
 /**
  * The call button component is used to call a method of another element.
  *
+ * @fragments /fragments/components/host/call-button/
+ *
+ * @example /examples/components/host/call-button-simple Call button
+ *
  * @copyright Volker Schukai
  * @summary A call button component that can call a method of another element.
  */

package/source/components/host/config-manager.mjs

@@ -50,6 +50,10 @@ const MODE_READ_WRITE = "readwrite";
 /**
  * The Config Manager component is used to encapsulate the configuration of the application.
  *
+ * @fragments /fragments/components/host/config-manager/
+ *
+ * @example /examples/components/host/config-manager-simple Config manager
+ *
  * @copyright Volker Schukai
  * @summary A config manager component
  */

package/source/components/host/host.mjs

@@ -71,6 +71,10 @@ const resourceManagerSymbol = Symbol("resourceManager");
 /**
  * The Host component is used to encapsulate the content of a web app.
  *
+ * @fragments /fragments/components/host/host/
+ *
+ * @example /examples/components/host/host-simple Host container
+ *
  * @copyright Volker Schukai
  * @summary A simple host component
  * @fires monster-host-connected

package/source/components/host/toggle-button.mjs

@@ -21,6 +21,10 @@ export { ToggleButton };
 /**
  * The Toggle Button component is used toggle a other element wich has a method called toggle.
  *
+ * @fragments /fragments/components/host/toggle-button/
+ *
+ * @example /examples/components/host/toggle-button-simple Toggle button
+ *
  * @copyright Volker Schukai
  * @summary A toggle button
  */

package/source/components/navigation/table-of-content.mjs

@@ -71,9 +71,9 @@ const scrollableEventHandlerSymbol = Symbol("scrollableEventHandler");
 /**
  * A TableOfContent
  *
- * @fragments /fragments/components/form/table-of-content
+ * @fragments /fragments/components/navigation/table-of-content/
  *
- * @example /examples/components/form/table-of-content-simple Table of content
+ * @example /examples/components/navigation/table-of-content-simple Table of content
  *
  * @since 3.65.0
  * @copyright Volker Schukai

package/source/components/tree-menu/html-tree-menu.mjs

@@ -49,6 +49,11 @@ const openEntryEventHandlerSymbol = Symbol("openEntryEventHandler");
 /**
  * HtmlTreeMenu
  *
+ * @fragments /fragments/components/tree-menu/html-tree-menu/
+ *
+ * @example /examples/components/tree-menu/html-tree-menu-simple Basic HTML tree menu
+ * @example /examples/components/tree-menu/html-tree-menu-lazy Lazy loading
+ *
  * @since 4.62.0
  * @summary A TreeMenu control that builds its entries from nested HTML lists.
  * @fires entries-imported
@@ -63,29 +68,29 @@ class HtmlTreeMenu extends CustomElement {
 	}
 
 	/**
- * @property {Object} templates Template definitions
- * @property {string} templates.main Main template
- * @property {Object} classes
- * @property {String} classes.control the class for the control element
- * @property {String} classes.label the class for the label element
- * @property {Object} lazy
- * @property {boolean} lazy.enabled enables lazy loading by endpoint
- * @property {string} lazy.attribute="data-monster-endpoint" attribute for the endpoint
- * @property {Object} lazy.fetchOptions fetch options for lazy requests
- * @property {Object} features
- * @property {boolean} features.selectParents=false allow selecting entries with children
- * @property {Object} actions
- * @property {Function} actions.open the action to open an entry (entry, index, event)
- * @property {Function} actions.close the action to close an entry (entry, index, event)
- * @property {Function} actions.select the action to select an entry (entry, index, event)
- * @property {Function} actions.onexpand the action to expand an entry (entry, index, event)
- * @property {Function} actions.oncollapse the action to collapse an entry (entry, index, event)
- * @property {Function} actions.onselect the action to select an entry (entry, index, event)
- * @property {Function} actions.onnavigate the action to navigate (entry, index, event)
- * @property {Function} actions.onlazyload the action before lazy load (entry, index, event)
- * @property {Function} actions.onlazyloaded the action after lazy load (entry, index, event)
- * @property {Function} actions.onlazyerror the action on lazy error (entry, index, event)
- */
+	 * @property {Object} templates Template definitions
+	 * @property {string} templates.main Main template
+	 * @property {Object} classes
+	 * @property {String} classes.control the class for the control element
+	 * @property {String} classes.label the class for the label element
+	 * @property {Object} lazy
+	 * @property {boolean} lazy.enabled enables lazy loading by endpoint
+	 * @property {string} lazy.attribute="data-monster-endpoint" attribute for the endpoint
+	 * @property {Object} lazy.fetchOptions fetch options for lazy requests
+	 * @property {Object} features
+	 * @property {boolean} features.selectParents=false allow selecting entries with children
+	 * @property {Object} actions
+	 * @property {Function} actions.open the action to open an entry (entry, index, event)
+	 * @property {Function} actions.close the action to close an entry (entry, index, event)
+	 * @property {Function} actions.select the action to select an entry (entry, index, event)
+	 * @property {Function} actions.onexpand the action to expand an entry (entry, index, event)
+	 * @property {Function} actions.oncollapse the action to collapse an entry (entry, index, event)
+	 * @property {Function} actions.onselect the action to select an entry (entry, index, event)
+	 * @property {Function} actions.onnavigate the action to navigate (entry, index, event)
+	 * @property {Function} actions.onlazyload the action before lazy load (entry, index, event)
+	 * @property {Function} actions.onlazyloaded the action after lazy load (entry, index, event)
+	 * @property {Function} actions.onlazyerror the action on lazy error (entry, index, event)
+	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
 			classes: {
@@ -431,9 +436,7 @@ function buildEntriesFromList(list, level, ancestorHidden, entries) {
 	const lazyConfig = this.getOption("lazy", {});
 	const lazyEnabled = lazyConfig?.enabled !== false;
 	const lazyAttribute = lazyConfig?.attribute || "";
-	const items = Array.from(list.children).filter((node) =>
-		node.matches("li"),
-	);
+	const items = Array.from(list.children).filter((node) => node.matches("li"));
 
 	for (const li of items) {
 		const childList = li.querySelector(":scope > ul,:scope > ol");
@@ -861,8 +864,7 @@ function removeEntry(value) {
 		if (parentEntryIndex !== -1) {
 			const parentIntend = newEntries[parentEntryIndex].intend;
 			const hasChildren = newEntries.some(
-				(entry, idx) =>
-					idx > parentEntryIndex && entry.intend > parentIntend,
+				(entry, idx) => idx > parentEntryIndex && entry.intend > parentIntend,
 			);
 			if (!hasChildren) {
 				newEntries[parentEntryIndex] = Object.assign(

package/source/components/tree-menu/tree-menu.mjs

@@ -78,6 +78,10 @@ const firstRunDoneSymbol = Symbol("firstRunDone");
 /**
  * TreeMenu
  *
+ * @fragments /fragments/components/tree-menu/tree-menu/
+ *
+ * @example /examples/components/tree-menu/tree-menu-simple Basic tree menu
+ *
  * @since 1.0.0
  * @summary A TreeMenu control
  * @fires entries-imported

package/source/monster.mjs

@@ -76,6 +76,7 @@ export * from "./components/notify/monitor-attribute-errors.mjs";
 export * from "./components/notify/message.mjs";
 export * from "./components/notify/notify.mjs";
 export * from "./components/notify/constants.mjs";
+export * from "./components/tree-menu/html-tree-menu.mjs";
 export * from "./components/tree-menu/tree-menu.mjs";
 export * from "./components/host/collapse.mjs";
 export * from "./components/host/config-manager.mjs";

package/test/cases/components/form/buy-box.mjs

@@ -0,0 +1,181 @@
+import {getGlobal} from "../../../../source/types/global.mjs";
+import * as chai from 'chai';
+import {chaiDom} from "../../../util/chai-dom.mjs";
+import {initJSDOM} from "../../../util/jsdom.mjs";
+import {ResizeObserverMock} from "../../../util/resize-observer.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+const global = getGlobal();
+
+let BuyBox;
+
+const html = `
+    <monster-buy-box id="buy-box"></monster-buy-box>
+`;
+
+describe('BuyBox', function () {
+
+    before(function (done) {
+        initJSDOM().then(() => {
+            import("element-internals-polyfill").catch(e => done(e));
+
+            if (!global.ResizeObserver) {
+                global.ResizeObserver = ResizeObserverMock;
+            }
+
+            import("../../../../source/components/form/buy-box.mjs").then((m) => {
+                BuyBox = m['BuyBox'];
+                done();
+            }).catch(e => done(e));
+        });
+    });
+
+    afterEach(() => {
+        let mocks = document.getElementById('mocks');
+        mocks.innerHTML = "";
+    });
+
+    it('requires variant price when any variant has pricing', function (done) {
+        const mocks = document.getElementById('mocks');
+        mocks.innerHTML = html;
+
+        setTimeout(() => {
+            try {
+                const box = document.getElementById('buy-box');
+                expect(box).is.instanceof(BuyBox);
+
+                box.setOption("product", { sku: "BASE", currency: "EUR" });
+                box.setOption("pricing", { price: 10 });
+                box.setOption("quantity", { min: 1, max: 10, value: 1 });
+                box.setOption("variants", {
+                    dimensions: [
+                        { key: "color", label: "Color" },
+                        { key: "size", label: "Size" }
+                    ],
+                    data: [
+                        { id: "SKU-RED-S", color: "Red", size: "S", price: 12 },
+                        { id: "SKU-BLU-M", color: "Blue", size: "M" }
+                    ]
+                });
+                box.refresh();
+
+                const onChange = (event) => {
+                    const msg = box.shadowRoot
+                        .querySelector("[data-monster-role=message]")
+                        .textContent
+                        .trim();
+                    expect(msg).to.equal("Price unavailable.");
+                    expect(event.detail.priceAvailable).to.equal(false);
+                    box.removeEventListener("monster-buy-box-change", onChange);
+                    done();
+                };
+                box.addEventListener("monster-buy-box-change", onChange);
+
+                setTimeout(() => {
+                    const variants = box.shadowRoot.querySelector("monster-variant-select");
+                    variants.setOption("selection", { color: "Blue", size: "M" });
+                    variants.refresh();
+                    variants.dispatchEvent(new CustomEvent("monster-variant-select-change"));
+                }, 0);
+
+            } catch (e) {
+                return done(e);
+            }
+        }, 0);
+    });
+
+    it('uses base pricing when no variant pricing is provided', function (done) {
+        const mocks = document.getElementById('mocks');
+        mocks.innerHTML = html;
+
+        setTimeout(() => {
+            try {
+                const box = document.getElementById('buy-box');
+                expect(box).is.instanceof(BuyBox);
+
+                box.setOption("product", { sku: "BASE", currency: "EUR" });
+                box.setOption("pricing", { price: 10 });
+                box.setOption("quantity", { min: 1, max: 10, value: 1 });
+                box.setOption("variants", {
+                    dimensions: [
+                        { key: "color", label: "Color" },
+                        { key: "size", label: "Size" }
+                    ],
+                    data: [
+                        { id: "SKU-RED-S", color: "Red", size: "S" },
+                        { id: "SKU-BLU-M", color: "Blue", size: "M" }
+                    ]
+                });
+                box.refresh();
+
+                const onChange = (event) => {
+                    const msg = box.shadowRoot
+                        .querySelector("[data-monster-role=message]")
+                        .textContent
+                        .trim();
+                    expect(msg).to.equal("");
+                    expect(event.detail.priceAvailable).to.equal(true);
+                    expect(event.detail.pricing.price).to.equal(10);
+                    box.removeEventListener("monster-buy-box-change", onChange);
+                    done();
+                };
+                box.addEventListener("monster-buy-box-change", onChange);
+
+                setTimeout(() => {
+                    const variants = box.shadowRoot.querySelector("monster-variant-select");
+                    variants.setOption("selection", { color: "Blue", size: "M" });
+                    variants.refresh();
+                    variants.dispatchEvent(new CustomEvent("monster-variant-select-change"));
+                }, 0);
+
+            } catch (e) {
+                return done(e);
+            }
+        }, 0);
+    });
+
+    it('applies tier pricing based on quantity', function (done) {
+        const mocks = document.getElementById('mocks');
+        mocks.innerHTML = html;
+
+        setTimeout(() => {
+            try {
+                const box = document.getElementById('buy-box');
+                expect(box).is.instanceof(BuyBox);
+
+                box.setOption("product", { sku: "BASE", currency: "EUR" });
+                box.setOption("pricing", {
+                    price: 6,
+                    tiers: [
+                        { min: 1, price: 6 },
+                        { min: 5, price: 5.5 },
+                        { min: 10, price: 5 }
+                    ]
+                });
+                box.setOption("quantity", { min: 1, max: 20, value: 4 });
+                box.refresh();
+
+                let lastDetail = null;
+                box.addEventListener("monster-buy-box-change", (event) => {
+                    lastDetail = event.detail;
+                });
+
+                setTimeout(() => {
+                    const quantity = box.shadowRoot.querySelector("monster-quantity");
+                    quantity.value = 10;
+                    quantity.dispatchEvent(new CustomEvent("monster-quantity-change"));
+
+                    setTimeout(() => {
+                        expect(lastDetail.pricing.price).to.equal(5);
+                        done();
+                    }, 0);
+                }, 0);
+
+            } catch (e) {
+                return done(e);
+            }
+        }, 0);
+    });
+});