@schukai/monster 4.139.1 → 4.140.1

package/test/cases/components/form/control-bar.mjs

@@ -27,9 +27,12 @@ describe("ControlBar", function () {
     this.timeout(5000);
     initJSDOM()
       .then(() => {
-        import("../../../../source/components/form/control-bar.mjs")
+        Promise.all([
+          import("../../../../source/components/form/control-bar.mjs"),
+          import("../../../../source/components/form/control-bar-spacer.mjs"),
+        ])
           .then((m) => {
-            ControlBar = m.ControlBar;
+            ControlBar = m[0].ControlBar;
             done();
           })
           .catch((e) => done(e));
@@ -126,6 +129,13 @@ describe("ControlBar", function () {
     expect(cssText).to.contain("appearance: none");
     expect(cssText).to.contain("--monster-select-container-overflow: hidden");
     expect(cssText).to.contain("::slotted(monster-input-group)");
+    expect(cssText).to.contain("::slotted(monster-control-bar-spacer)");
+    expect(cssText).to.contain(
+      "--monster-control-bar-spacer-line-block-size: 60%",
+    );
+    expect(cssText).to.contain(
+      "--monster-control-bar-spacer-line-inline-size: calc(100% - 1rem)",
+    );
   });
 
   it("should join adjacent borders using the smaller computed border width", async function () {
@@ -301,6 +311,175 @@ describe("ControlBar", function () {
     }
   });
 
+  it("should size inline spacer lines from adjacent border widths", async function () {
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="spacer-border-bar-wrapper">
+          <monster-control-bar id="spacer-border-bar">
+            <button id="spacer-border-left">A</button>
+            <monster-control-bar-spacer id="spacer-border-spacer"></monster-control-bar-spacer>
+            <input id="spacer-border-right">
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("spacer-border-bar-wrapper");
+      const left = document.getElementById("spacer-border-left");
+      const spacer = document.getElementById("spacer-border-spacer");
+      const right = document.getElementById("spacer-border-right");
+
+      wrapper.style.boxSizing = "border-box";
+      wrapper.style.width = "300px";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 300,
+      });
+
+      for (const control of [left, spacer, right]) {
+        Object.defineProperty(control, "offsetWidth", {
+          configurable: true,
+          value: 40,
+        });
+        Object.defineProperty(control, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        control.getBoundingClientRect = () => ({
+          width: 40,
+          height: 30,
+          top: 0,
+          right: 40,
+          bottom: 30,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+      }
+
+      left.style.borderRightWidth = "4px";
+      right.style.borderLeftWidth = "2px";
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(
+        spacer.style.getPropertyValue(
+          "--monster-control-bar-spacer-line-inline-size",
+        ),
+      ).to.equal("4px");
+      expect(spacer.style.marginLeft).to.equal("");
+      expect(right.style.marginLeft).to.equal("");
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
+  it("should size popper spacer lines from adjacent border widths", async function () {
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="popper-spacer-border-bar-wrapper">
+          <monster-control-bar id="popper-spacer-border-bar">
+            <button id="popper-spacer-border-top">A</button>
+            <monster-control-bar-spacer id="popper-spacer-border-spacer"></monster-control-bar-spacer>
+            <input id="popper-spacer-border-bottom">
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("popper-spacer-border-bar-wrapper");
+      const top = document.getElementById("popper-spacer-border-top");
+      const spacer = document.getElementById("popper-spacer-border-spacer");
+      const bottom = document.getElementById("popper-spacer-border-bottom");
+
+      wrapper.style.boxSizing = "border-box";
+      wrapper.style.width = "1px";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 1,
+      });
+
+      for (const control of [top, spacer, bottom]) {
+        Object.defineProperty(control, "offsetWidth", {
+          configurable: true,
+          value: 40,
+        });
+        Object.defineProperty(control, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        control.getBoundingClientRect = () => ({
+          width: 40,
+          height: 30,
+          top: 0,
+          right: 40,
+          bottom: 30,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+      }
+
+      top.style.borderBottomWidth = "2px";
+      bottom.style.borderTopWidth = "5px";
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(spacer.getAttribute("slot")).to.equal("popper");
+      expect(
+        spacer.style.getPropertyValue(
+          "--monster-control-bar-spacer-line-block-size",
+        ),
+      ).to.equal("5px");
+      expect(spacer.style.marginTop).to.equal("");
+      expect(bottom.style.marginTop).to.equal("");
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
   it("should move overflowing mixed controls into the popper", async function () {
     const OriginalResizeObserver = window.ResizeObserver;
     const originalGlobalResizeObserver = globalThis.ResizeObserver;

package/test/cases/components/layout/tabs.mjs

@@ -61,6 +61,90 @@ let htmlOverflow = `
     </monster-tabs>
 `;
 
+// language=html
+let htmlAvailability = `
+    <monster-tabs id="availability-tabs">
+        <div id="overview-panel" data-monster-name="overview" data-monster-button-label="Overview">
+            Overview content
+        </div>
+        <div id="vacation-panel" data-monster-name="vacation" data-monster-button-label="Vacation" data-monster-tab-available="false">
+            Vacation content
+        </div>
+        <div id="details-panel" data-monster-name="details" data-monster-button-label="Details">
+            Details content
+        </div>
+    </monster-tabs>
+`;
+
+// language=html
+let htmlActiveUnavailable = `
+    <monster-tabs id="fallback-tabs">
+        <div id="first-panel" data-monster-name="first" data-monster-button-label="First">
+            First content
+        </div>
+        <div id="second-panel" data-monster-name="second" data-monster-button-label="Second" class="active">
+            Second content
+        </div>
+        <div id="third-panel" data-monster-name="third" data-monster-button-label="Third">
+            Third content
+        </div>
+    </monster-tabs>
+`;
+
+// language=html
+let htmlRemoveFallback = `
+    <monster-tabs id="remove-fallback-tabs" data-monster-options='{"features":{"openFirst":false}}'>
+        <div id="remove-first-panel" data-monster-name="first" data-monster-button-label="First">
+            First content
+        </div>
+        <div id="remove-second-panel" data-monster-name="second" data-monster-button-label="Second" class="active">
+            Second content
+        </div>
+        <div id="remove-third-panel" data-monster-name="third" data-monster-button-label="Third">
+            Third content
+        </div>
+    </monster-tabs>
+`;
+
+// language=html
+let htmlDisabled = `
+    <monster-tabs id="disabled-tabs">
+        <div id="enabled-panel" data-monster-name="enabled" data-monster-button-label="Enabled">
+            Enabled content
+        </div>
+        <div id="disabled-panel"
+             data-monster-name="disabled"
+             data-monster-button-label="Disabled"
+             data-monster-tab-disabled="true"
+             data-monster-tab-disabled-reason="Only available for employees">
+            Disabled content
+        </div>
+    </monster-tabs>
+`;
+
+// language=html
+let htmlMetadata = `
+    <monster-tabs id="metadata-tabs">
+        <div id="metadata-panel"
+             data-monster-name="metadata"
+             data-monster-button-label="Metadata"
+             data-monster-tab-kind="profile"
+             data-monster-tab-priority="10"
+             data-monster-tab-group="main">
+            Metadata content
+        </div>
+    </monster-tabs>
+`;
+
+// language=html
+let htmlNoDerivedLabel = `
+    <monster-tabs id="label-tabs" data-monster-options='{"features":{"deriveLabelFromContent":false}}'>
+        <div id="content-panel">
+            Overview about your profile and vacation configuration
+        </div>
+    </monster-tabs>
+`;
+
 let Tabs;
 let restoreBoundingClientRect = null;
 let restoreResizeObserver = null;
@@ -407,6 +491,245 @@ describe('Tabs', function () {
 			});
         });
 
+		it('should ignore unavailable panels when creating tabs and buttons', function (done) {
+			let mocks = document.getElementById('mocks');
+			mocks.innerHTML = htmlAvailability;
+
+			waitForCondition(() => {
+				const tabs = document.getElementById('availability-tabs');
+				return (
+					tabs instanceof Tabs &&
+					tabs.shadowRoot.querySelectorAll('button[part=button]').length === 2 &&
+					tabs.getActiveTab() === 'overview'
+				);
+			}).then(() => {
+				try {
+					const tabs = document.getElementById('availability-tabs');
+					const vacation = document.getElementById('vacation-panel');
+					const buttons = tabs.shadowRoot.querySelectorAll('button[part=button]');
+
+					expect(tabs.getTabs().length).to.equal(2);
+					expect(tabs.getTabs().includes(vacation)).to.equal(false);
+					expect(tabs.shadowRoot.querySelector(
+						`button[part=button][data-monster-tab-reference="${vacation.getAttribute('id')}"]`,
+					)).to.equal(null);
+					expect(buttons[0].textContent.trim()).to.equal('Overview');
+					expect(buttons[1].textContent.trim()).to.equal('Details');
+					expect(tabs.getActiveTab()).to.equal('overview');
+					done();
+				} catch (e) {
+					done(e);
+				}
+			}).catch(done);
+		});
+
+		it('should ignore unavailable tabs in activeTab and rebuild when they become available', function (done) {
+			let mocks = document.getElementById('mocks');
+			mocks.innerHTML = htmlAvailability;
+
+			waitForCondition(() => {
+				const tabs = document.getElementById('availability-tabs');
+				return tabs instanceof Tabs && tabs.getActiveTab() === 'overview';
+			}).then(() => {
+				const tabs = document.getElementById('availability-tabs');
+				const vacation = document.getElementById('vacation-panel');
+				let availabilityEvent = null;
+				tabs.addEventListener('monster-tab-availability-changed', (event) => {
+					availabilityEvent = event;
+				});
+
+				tabs.activeTab('vacation');
+				expect(tabs.getActiveTab()).to.equal('overview');
+
+				vacation.setAttribute('data-monster-tab-available', 'true');
+
+				return waitForCondition(() => {
+					return tabs.shadowRoot.querySelectorAll('button[part=button]').length === 3;
+				}).then(() => {
+					try {
+						expect(availabilityEvent).to.not.equal(null);
+						expect(availabilityEvent.detail.name).to.equal('vacation');
+						expect(availabilityEvent.detail.available).to.equal(true);
+
+						tabs.activeTab('vacation');
+						expect(tabs.getActiveTab()).to.equal('vacation');
+						done();
+					} catch (e) {
+						done(e);
+					}
+				}, 100);
+			}).catch(done);
+		});
+
+		it('should fallback when the active tab becomes unavailable', function (done) {
+			let mocks = document.getElementById('mocks');
+			mocks.innerHTML = htmlActiveUnavailable;
+
+			waitForCondition(() => {
+				const tabs = document.getElementById('fallback-tabs');
+				return tabs instanceof Tabs && tabs.getActiveTab() === 'second';
+			}).then(() => {
+				const tabs = document.getElementById('fallback-tabs');
+				const activePanel = document.getElementById('second-panel');
+				activePanel.setAttribute('data-monster-tab-available', 'false');
+
+				return waitForCondition(() => tabs.getActiveTab() === 'first').then(() => {
+					try {
+						expect(activePanel.classList.contains('active')).to.equal(false);
+						expect(tabs.shadowRoot.querySelectorAll('button[part=button]').length).to.equal(2);
+						done();
+					} catch (e) {
+						done(e);
+					}
+				});
+			}).catch(done);
+		});
+
+		it('should fallback when the active tab is removed directly', function (done) {
+			let mocks = document.getElementById('mocks');
+			mocks.innerHTML = htmlRemoveFallback;
+
+			waitForCondition(() => {
+				const tabs = document.getElementById('remove-fallback-tabs');
+				return (
+					tabs instanceof Tabs &&
+					tabs.getActiveTab() === 'second' &&
+					tabs.shadowRoot.querySelectorAll('button[part=button]').length === 3
+				);
+			}).then(() => {
+				const tabs = document.getElementById('remove-fallback-tabs');
+				setTimeout(() => {
+					document.getElementById('remove-second-panel').remove();
+
+					waitForCondition(() => tabs.getActiveTab() === 'first').then(() => {
+						try {
+							expect(tabs.shadowRoot.querySelectorAll('button[part=button]').length).to.equal(2);
+							done();
+						} catch (e) {
+							done(e);
+						}
+					}).catch(done);
+				});
+			}).catch(done);
+		});
+
+		it('should keep disabled tabs visible but not activatable', function (done) {
+			let mocks = document.getElementById('mocks');
+			mocks.innerHTML = htmlDisabled;
+
+			waitForCondition(() => {
+				const tabs = document.getElementById('disabled-tabs');
+				const disabledPanel = document.getElementById('disabled-panel');
+				const disabledButton = tabs?.shadowRoot?.querySelector(
+					`button[part=button][data-monster-tab-reference="${disabledPanel?.getAttribute('id')}"]`,
+				);
+				return (
+					tabs instanceof Tabs &&
+					disabledButton instanceof HTMLButtonElement &&
+					tabs.getActiveTab() === 'enabled'
+				);
+			}).then(() => {
+				try {
+					const tabs = document.getElementById('disabled-tabs');
+					const disabledPanel = document.getElementById('disabled-panel');
+					const disabledButton = tabs.shadowRoot.querySelector(
+						`button[part=button][data-monster-tab-reference="${disabledPanel.getAttribute('id')}"]`,
+					);
+
+					expect(disabledButton.disabled).to.equal(true);
+					expect(disabledButton.getAttribute('title')).to.equal('Only available for employees');
+					tabs.activeTab('disabled');
+					expect(tabs.getActiveTab()).to.equal('enabled');
+					done();
+				} catch (e) {
+					done(e);
+				}
+			}).catch(done);
+		});
+
+		it('should expose refresh, sync, hide and show APIs', function (done) {
+			let mocks = document.getElementById('mocks');
+			mocks.innerHTML = htmlAvailability;
+
+			waitForCondition(() => {
+				const tabs = document.getElementById('availability-tabs');
+				return tabs instanceof Tabs && tabs.shadowRoot.querySelectorAll('button[part=button]').length === 2;
+			}).then(() => {
+				const tabs = document.getElementById('availability-tabs');
+
+				tabs.showTab('vacation');
+				return tabs.refreshTabs().then((result) => {
+					expect(result).to.equal(tabs);
+					expect(tabs.getTabs().length).to.equal(3);
+
+					tabs.hideTab('vacation');
+					return tabs.syncTabs();
+				}).then((result) => {
+					try {
+						expect(result).to.equal(tabs);
+						expect(tabs.getTabs().length).to.equal(2);
+						expect(document.getElementById('vacation-panel').getAttribute('data-monster-tab-available')).to.equal('false');
+						done();
+					} catch (e) {
+						done(e);
+					}
+				});
+			}).catch(done);
+		});
+
+		it('should not derive labels from content when disabled by option', function (done) {
+			let mocks = document.getElementById('mocks');
+			mocks.innerHTML = htmlNoDerivedLabel;
+
+			waitForCondition(() => {
+				const tabs = document.getElementById('label-tabs');
+				return tabs instanceof Tabs && tabs.shadowRoot.querySelector('button[part=button]') !== null;
+			}).then(() => {
+				try {
+					const tabs = document.getElementById('label-tabs');
+					const button = tabs.shadowRoot.querySelector('button[part=button]');
+					expect(button.textContent.trim()).to.equal('New Tab');
+					expect(document.getElementById('content-panel').hasAttribute('data-monster-button-label')).to.equal(false);
+					done();
+				} catch (e) {
+					done(e);
+				}
+			}).catch(done);
+		});
+
+		it('should include stable names and metadata in tab events and buttons', function (done) {
+			let mocks = document.getElementById('mocks');
+			mocks.innerHTML = htmlMetadata;
+
+			waitForCondition(() => {
+				const tabs = document.getElementById('metadata-tabs');
+				return tabs instanceof Tabs && tabs.shadowRoot.querySelector('button[part=button]') !== null;
+			}).then(() => {
+				try {
+					const tabs = document.getElementById('metadata-tabs');
+					const button = tabs.shadowRoot.querySelector('button[part=button]');
+					let changedEvent = null;
+					tabs.addEventListener('monster-tab-changed', (event) => {
+						changedEvent = event;
+					});
+
+					expect(button.getAttribute('data-monster-tab-name')).to.equal('metadata');
+					expect(button.getAttribute('data-monster-tab-kind')).to.equal('profile');
+					expect(button.getAttribute('data-monster-tab-priority')).to.equal('10');
+					expect(button.getAttribute('data-monster-tab-group')).to.equal('main');
+
+					tabs.activeTab('metadata');
+					expect(changedEvent).to.not.equal(null);
+					expect(changedEvent.detail.name).to.equal('metadata');
+					expect(changedEvent.detail.tab).to.equal('metadata');
+					expect(changedEvent.detail.metadata.kind).to.equal('profile');
+					done();
+				} catch (e) {
+					done(e);
+				}
+			}).catch(done);
+		});
+
     });