@schukai/monster 4.137.9 → 4.139.0

package/source/monster.mjs

@@ -92,6 +92,7 @@ export * from "./components/form/context-success.mjs";
 export * from "./components/form/types/state.mjs";
 export * from "./components/form/template.mjs";
 export * from "./components/form/constants.mjs";
+export * from "./components/form/control-bar.mjs";
 export * from "./components/notify/monitor-attribute-errors.mjs";
 export * from "./components/notify/message.mjs";
 export * from "./components/notify/notify.mjs";

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

@@ -17,6 +17,7 @@ const html = `
 `;
 
 let ButtonBar;
+let ControlBar;
 
 describe("ButtonBar", function () {
   before(function (done) {
@@ -26,6 +27,10 @@ describe("ButtonBar", function () {
         import("../../../../source/components/form/button-bar.mjs")
           .then((m) => {
             ButtonBar = m.ButtonBar;
+            return import("../../../../source/components/form/control-bar.mjs");
+          })
+          .then((m) => {
+            ControlBar = m.ControlBar;
             done();
           })
           .catch((e) => done(e));
@@ -48,6 +53,15 @@ describe("ButtonBar", function () {
     expect(bar).to.be.instanceof(ButtonBar);
   });
 
+  it("should inherit the generic control bar behavior", function () {
+    const bar = document.getElementById("bar");
+
+    expect(bar).to.be.instanceof(ControlBar);
+    expect(bar.hideDialog).to.be.a("function");
+    expect(bar.showDialog).to.be.a("function");
+    expect(bar.toggleDialog).to.be.a("function");
+  });
+
   it("should keep the popper switch hidden when no buttons are slotted", function (done) {
     const bar = document.getElementById("bar");
 

package/test/cases/components/form/button.mjs

@@ -117,7 +117,17 @@ describe('Button', function () {
 
 
         });
+
+        it('should allow the internal button to stretch to the host height', function () {
+            const cssText = Button.getCSSStyleSheet()
+                .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+                .map((rule) => rule.cssText)
+                .join("\n");
+
+            expect(cssText).to.contain("height: 100%");
+            expect(cssText).to.contain("box-sizing: border-box");
+        });
     });
 
 
-});
+});

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

@@ -0,0 +1,410 @@
+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 html = `
+  <div id="test1">
+    <monster-control-bar id="bar">
+      <input id="query" type="search">
+      <select id="mode"><option>All</option></select>
+      <button id="apply">Apply</button>
+    </monster-control-bar>
+    <monster-control-bar
+      id="bar-right"
+      data-monster-option-layout-alignment="right"
+    ></monster-control-bar>
+  </div>
+`;
+
+let ControlBar;
+
+describe("ControlBar", function () {
+  before(function (done) {
+    this.timeout(5000);
+    initJSDOM()
+      .then(() => {
+        import("../../../../source/components/form/control-bar.mjs")
+          .then((m) => {
+            ControlBar = m.ControlBar;
+            done();
+          })
+          .catch((e) => done(e));
+      })
+      .catch((e) => done(e));
+  });
+
+  beforeEach(() => {
+    const mocks = document.getElementById("mocks");
+    mocks.innerHTML = html;
+  });
+
+  afterEach(() => {
+    const mocks = document.getElementById("mocks");
+    mocks.innerHTML = "";
+  });
+
+  it("should create a control bar element", function () {
+    const bar = document.getElementById("bar");
+    expect(bar).to.be.instanceof(ControlBar);
+  });
+
+  it("should keep the popper switch hidden when no controls are slotted", function (done) {
+    const bar = document.getElementById("bar-right");
+
+    setTimeout(() => {
+      try {
+        const switchButton = bar.shadowRoot.querySelector(
+          '[data-monster-role="switch"]',
+        );
+        expect(switchButton).to.be.instanceof(HTMLButtonElement);
+        expect(switchButton.hasAttribute("hidden")).to.be.true;
+        expect(switchButton.classList.contains("hidden")).to.be.true;
+        done();
+      } catch (e) {
+        done(e);
+      }
+    }, 50);
+  });
+
+  it("should default the control bar layout alignment to left", function () {
+    const bar = document.getElementById("bar");
+    const controlBar = bar.shadowRoot.querySelector(
+      '[data-monster-role="control-bar"]',
+    );
+
+    expect(controlBar.getAttribute("data-monster-layout-alignment")).to.equal(
+      "left",
+    );
+  });
+
+  it("should allow configuring the control bar layout alignment to right", function (done) {
+    const bar = document.getElementById("bar-right");
+
+    setTimeout(() => {
+      try {
+        const controlBar = bar.shadowRoot.querySelector(
+          '[data-monster-role="control-bar"]',
+        );
+
+        expect(
+          controlBar.getAttribute("data-monster-layout-alignment"),
+        ).to.equal("right");
+        done();
+      } catch (e) {
+        done(e);
+      }
+    }, 50);
+  });
+
+  it("should map popper position attributes to the popper placement option", function () {
+    const bar = document.getElementById("bar");
+
+    bar.setAttribute("data-monster-popper-position", "bottom");
+
+    expect(bar.getOption("popper.placement")).to.equal("bottom");
+  });
+
+  it("should render mixed controls with joined heights and popper layout styles", function () {
+    const cssText = ControlBar.getCSSStyleSheet()
+      .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+      .map((rule) => rule.cssText)
+      .join("\n");
+
+    expect(cssText).to.contain("--monster-control-bar-height");
+    expect(cssText).to.contain("slot[name=popper]");
+    expect(cssText).to.contain("align-items: stretch");
+    expect(cssText).to.contain("::slotted(*) { display: flex");
+    expect(cssText).to.contain("::slotted(form)");
+    expect(cssText).to.contain("height: var(--monster-control-bar-height)");
+    expect(cssText).to.contain(
+      "border-width: var(--monster-theme-control-border-width",
+    );
+    expect(cssText).to.contain("appearance: none");
+    expect(cssText).to.contain("--monster-select-container-overflow: hidden");
+    expect(cssText).to.contain("::slotted(monster-input-group)");
+  });
+
+  it("should join adjacent borders using the smaller computed border width", 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="border-bar-wrapper">
+          <monster-control-bar id="border-bar">
+            <button id="wide-small-a">A</button>
+            <input id="wide-small-b">
+            <select id="small-small-c"><option>C</option></select>
+            <button id="wide-wide-d">D</button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("border-bar-wrapper");
+      const controls = [
+        document.getElementById("wide-small-a"),
+        document.getElementById("wide-small-b"),
+        document.getElementById("small-small-c"),
+        document.getElementById("wide-wide-d"),
+      ];
+
+      wrapper.style.boxSizing = "border-box";
+      wrapper.style.width = "300px";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 300,
+      });
+
+      for (const control of controls) {
+        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: () => {},
+        });
+      }
+
+      controls[0].style.borderRightWidth = "3px";
+      controls[1].style.borderLeftWidth = "2px";
+      controls[1].style.borderRightWidth = "2px";
+      controls[2].style.borderLeftWidth = "2px";
+      controls[2].style.borderRightWidth = "3px";
+      controls[3].style.borderLeftWidth = "3px";
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(controls[1].style.marginLeft).to.equal("-2px");
+      expect(controls[2].style.marginLeft).to.equal("-2px");
+      expect(controls[3].style.marginLeft).to.equal("-3px");
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
+  it("should join borders against visible controls inside wrapper elements", 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="wrapped-border-bar-wrapper">
+          <monster-control-bar id="wrapped-border-bar">
+            <button id="wrapped-border-a">A</button>
+            <form id="wrapped-border-form">
+              <div id="wrapped-border-b" data-monster-role="control"></div>
+              <monster-input-group id="wrapped-input-group"></monster-input-group>
+            </form>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("wrapped-border-bar-wrapper");
+      const button = document.getElementById("wrapped-border-a");
+      const form = document.getElementById("wrapped-border-form");
+      const innerControl = document.getElementById("wrapped-border-b");
+      const inputGroup = document.getElementById("wrapped-input-group");
+
+      wrapper.style.boxSizing = "border-box";
+      wrapper.style.width = "300px";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 300,
+      });
+
+      for (const control of [button, form]) {
+        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: () => {},
+        });
+      }
+
+      button.style.borderRightWidth = "3px";
+      innerControl.style.borderLeftWidth = "2px";
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(form.style.marginLeft).to.equal("-2px");
+      expect(form.style.display).to.equal("flex");
+      expect(inputGroup.style.height).to.equal("100%");
+      expect(inputGroup.style.boxSizing).to.equal("border-box");
+      expect(inputGroup.style.flex).to.equal("1 1 auto");
+    } 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;
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    class TrackingResizeObserver extends ResizeObserverMock {
+      static instances = [];
+
+      constructor(callback) {
+        super(callback);
+        TrackingResizeObserver.instances.push(this);
+      }
+    }
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.ResizeObserver = TrackingResizeObserver;
+      globalThis.ResizeObserver = TrackingResizeObserver;
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="control-bar-wrapper">
+          <monster-control-bar id="overflow-bar">
+            <input id="overflow-input" type="search">
+            <select id="overflow-select"><option>One</option></select>
+            <button id="overflow-button">Run</button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("control-bar-wrapper");
+      const bar = document.getElementById("overflow-bar");
+      const controls = [
+        document.getElementById("overflow-input"),
+        document.getElementById("overflow-select"),
+        document.getElementById("overflow-button"),
+      ];
+
+      wrapper.style.boxSizing = "border-box";
+      wrapper.style.width = "90px";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 90,
+      });
+
+      for (const control of controls) {
+        Object.defineProperty(control, "offsetWidth", {
+          configurable: true,
+          value: 50,
+        });
+        Object.defineProperty(control, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        control.getBoundingClientRect = () => ({
+          width: 50,
+          height: 30,
+          top: 0,
+          right: 50,
+          bottom: 30,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+      }
+
+      const switchButton = bar.shadowRoot.querySelector(
+        '[data-monster-role="switch"]',
+      );
+      Object.defineProperty(switchButton, "offsetWidth", {
+        configurable: true,
+        value: 20,
+      });
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(switchButton.hasAttribute("hidden")).to.be.false;
+      expect(document.getElementById("overflow-input").hasAttribute("slot")).to
+        .be.false;
+      expect(document.getElementById("overflow-select").getAttribute("slot")).to
+        .equal("popper");
+      expect(document.getElementById("overflow-button").getAttribute("slot")).to
+        .equal("popper");
+    } finally {
+      window.ResizeObserver = OriginalResizeObserver;
+      globalThis.ResizeObserver = originalGlobalResizeObserver;
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+});

package/test/cases/components/form/input-group.mjs

@@ -0,0 +1,37 @@
+import * as chai from "chai";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+let InputGroup;
+
+describe("InputGroup", function () {
+  before(function (done) {
+    initJSDOM()
+      .then(() => import("../../../../source/components/form/input-group.mjs"))
+      .then((m) => {
+        InputGroup = m.InputGroup;
+        done();
+      })
+      .catch((e) => done(e));
+  });
+
+  it("should create an input group element", function () {
+    const inputGroup = document.createElement("monster-input-group");
+
+    expect(inputGroup).to.be.instanceof(InputGroup);
+  });
+
+  it("should allow the input group to stretch within constrained controls", function () {
+    const cssText = InputGroup.getCSSStyleSheet()
+      .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+      .map((rule) => rule.cssText)
+      .join("\n");
+
+    expect(cssText).to.contain("display: flex");
+    expect(cssText).to.contain("box-sizing: border-box");
+    expect(cssText).to.contain("height: 100%");
+  });
+});

package/test/cases/components/form/select.mjs

@@ -129,6 +129,18 @@ describe('Select', function () {
         });
     })
 
+    it('should expose compact layout variables for constrained control contexts', function () {
+        const cssText = SelectStyleSheet
+            .cssRules
+            ? Array.from(SelectStyleSheet.cssRules).map((rule) => rule.cssText).join("\n")
+            : "";
+
+        expect(cssText).to.contain("--monster-select-container-overflow");
+        expect(cssText).to.contain("--monster-select-control-padding");
+        expect(cssText).to.contain("--monster-select-selection-margin");
+        expect(cssText).to.contain("--monster-select-selection-flex-wrap");
+    });
+
     describe('With fetch', function () {
 
         beforeEach((done) => {