@schukai/monster 4.148.9 → 4.149.1

package/test/cases/components/datatable/accessibility-defaults.mjs

@@ -0,0 +1,112 @@
+import * as chai from "chai";
+import { getGlobal } from "../../../../source/types/global.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
+
+const { expect } = chai;
+const nextTask = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+describe("Datatable accessibility defaults", function () {
+	before(async () => {
+		await initJSDOM();
+		await import("element-internals-polyfill");
+		const global = getGlobal();
+		global.ResizeObserver ??= ResizeObserverMock;
+		await Promise.all([
+			import("../../../../source/components/datatable/filter/date-range.mjs"),
+			import("../../../../source/components/datatable/filter/date-time.mjs"),
+			import("../../../../source/components/datatable/filter/range.mjs"),
+			import(
+				"../../../../source/components/datatable/filter/text-operator.mjs"
+			),
+			import("../../../../source/components/datatable/columnbar.mjs"),
+		]);
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").replaceChildren();
+	});
+
+	for (const [tag, option, selector] of [
+		[
+			"monster-filter-date-range",
+			"Choose reporting period",
+			'[data-monster-role="input"]',
+		],
+		[
+			"monster-filter-range",
+			"Choose score range",
+			'[data-monster-role="input"]',
+		],
+	]) {
+		it(`should name the ${tag} trigger from labels.button`, async function () {
+			const filter = document.createElement(tag);
+			filter.setOption("labels.button", option);
+			document.getElementById("mocks").append(filter);
+			await nextTask();
+
+			expect(
+				filter.shadowRoot.querySelector(selector).getAttribute("aria-label"),
+			).to.equal(option);
+		});
+	}
+
+	it("should name the date-time query input", async function () {
+		const filter = document.createElement("monster-filter-date-time");
+		filter.setOption("labels.query", "Updated after");
+		document.getElementById("mocks").append(filter);
+		await nextTask();
+
+		expect(
+			filter.shadowRoot
+				.querySelector('[data-monster-role="query"]')
+				.getAttribute("aria-label"),
+		).to.equal("Updated after");
+	});
+
+	it("should name both text-operator controls", async function () {
+		const filter = document.createElement("monster-filter-text-operator");
+		filter.setOptions({
+			labels: {
+				operator: "Comparison",
+				query: "Search term",
+			},
+		});
+		document.getElementById("mocks").append(filter);
+		await nextTask();
+
+		expect(
+			filter.shadowRoot
+				.querySelector('[data-monster-role="operator"]')
+				.getAttribute("aria-label"),
+		).to.equal("Comparison");
+		expect(
+			filter.shadowRoot
+				.querySelector('[data-monster-role="query"]')
+				.getAttribute("aria-label"),
+		).to.equal("Search term");
+	});
+
+	it("should render column toggles as named stateful buttons", async function () {
+		const columnBar = document.createElement("monster-column-bar");
+		columnBar.setOption("columns", [
+			{ index: 0, name: "Name", visible: true },
+			{ index: 1, name: "Status", visible: false },
+		]);
+		document.getElementById("mocks").append(columnBar);
+		await nextTask();
+
+		const buttons = [
+			...columnBar.shadowRoot.querySelectorAll(
+				'[data-monster-role="dots"] button[data-monster-role="column"]',
+			),
+		];
+		expect(buttons).to.have.length(2);
+		expect(
+			buttons.map((button) => button.getAttribute("aria-label")),
+		).to.deep.equal(["Name", "Status"]);
+		expect(
+			buttons.map((button) => button.getAttribute("aria-pressed")),
+		).to.deep.equal(["true", "false"]);
+	});
+});

package/test/cases/components/datatable/filter-availability.mjs

@@ -0,0 +1,37 @@
+import { strict as assert } from "node:assert";
+import { getGlobal } from "../../../../source/types/global.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
+
+describe("Datatable filter availability", () => {
+	before(async () => {
+		await initJSDOM();
+		await import("element-internals-polyfill");
+
+		const global = getGlobal();
+		if (!global.ResizeObserver) {
+			global.ResizeObserver = ResizeObserverMock;
+		}
+
+		await import("../../../../source/components/datatable/filter.mjs");
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").replaceChildren();
+	});
+
+	it("disables filter actions when no filter definitions exist", async () => {
+		globalThis.name = "";
+		globalThis.location = window.location;
+		const element = document.createElement("monster-datatable-filter");
+		document.getElementById("mocks").append(element);
+		await new Promise((resolve) => setTimeout(resolve, 100));
+
+		for (const role of ["filter-select", "search-button", "reset-button"]) {
+			const control = element.shadowRoot.querySelector(
+				`[data-monster-role="${role}"]`,
+			);
+			assert.equal(control.getOption("disabled"), true, role);
+		}
+	});
+});

package/test/cases/components/datatable/filter-date-range-layout.mjs

@@ -0,0 +1,40 @@
+import { strict as assert } from "node:assert";
+import { getGlobal } from "../../../../source/types/global.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
+
+describe("Datatable date-range filter layout", () => {
+	before(async () => {
+		await initJSDOM();
+		await import("element-internals-polyfill");
+
+		const global = getGlobal();
+		if (!global.ResizeObserver) {
+			global.ResizeObserver = ResizeObserverMock;
+		}
+
+		await import(
+			"../../../../source/components/datatable/filter/date-range.mjs"
+		);
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").replaceChildren();
+	});
+
+	it("keeps its fields inside the adaptive popper content area", async () => {
+		const element = document.createElement("monster-filter-date-range");
+		document.getElementById("mocks").append(element);
+		await new Promise((resolve) => setTimeout(resolve, 0));
+
+		const popper = element.shadowRoot.querySelector(
+			'[data-monster-role="popper"]',
+		);
+		const content = popper.querySelector("[part=content]");
+		assert.ok(content);
+
+		const filter = content.querySelector("[part=filter]");
+		assert.ok(filter);
+		assert.ok(filter.querySelector('[data-monster-role="form"]'));
+	});
+});

package/test/cases/components/datatable/filter-select-operator.mjs

@@ -0,0 +1,118 @@
+import { strict as assert } from "node:assert";
+import { readFileSync } from "node:fs";
+import { getGlobal } from "../../../../source/types/global.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
+
+const filterSelectSource = readFileSync(
+	new URL(
+		"../../../../source/components/datatable/style/filter-select.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+const filterSelectGenerated = readFileSync(
+	new URL(
+		"../../../../source/components/datatable/stylesheet/filter-select.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+const waitForUpdates = () =>
+	new Promise((resolve) => {
+		setTimeout(resolve, 300);
+	});
+
+describe("Datatable select operator filter", () => {
+	before(async () => {
+		await initJSDOM();
+		await import("element-internals-polyfill");
+
+		const global = getGlobal();
+		if (!global.ResizeObserver) {
+			global.ResizeObserver = ResizeObserverMock;
+		}
+
+		await import(
+			"../../../../source/components/datatable/filter/select-operator.mjs"
+		);
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").replaceChildren();
+	});
+
+	it("keeps option markers compact after shared form defaults", () => {
+		for (const property of ["height", "min-height", "min-width", "width"]) {
+			assert.match(
+				filterSelectSource,
+				new RegExp(
+					`${property}: var\\(--monster-select-option-control-size, 1rem\\)`,
+					"u",
+				),
+			);
+		}
+		assert.match(
+			filterSelectGenerated,
+			/height:var\(--monster-select-option-control-size,1rem\)/u,
+		);
+		assert.match(
+			filterSelectGenerated,
+			/min-height:var\(--monster-select-option-control-size,1rem\)/u,
+		);
+	});
+
+	it("summarizes multiple selected values inside the fixed-height control", async () => {
+		const element = document.createElement(
+			"monster-filter-select-operator",
+		);
+		const options = [
+			{ value: "ready", label: "Ready" },
+			{ value: "review", label: "Review" },
+			{ value: "blocked", label: "Blocked" },
+			{ value: "progress", label: "In progress" },
+		];
+
+		element.setOptions({
+			select: {
+				options,
+			},
+		});
+		document.getElementById("mocks").append(element);
+		await waitForUpdates();
+		element.selection = options.map(({ value }) => value);
+		await waitForUpdates();
+
+		const select = element.shadowRoot.querySelector(
+			"monster-filter-select",
+		);
+		const summary = select.shadowRoot.querySelector('[part="summary"]');
+
+		assert.equal(
+			select.getAttribute("data-monster-selected-template"),
+			"summary",
+		);
+		assert.ok(summary);
+		assert.equal(
+			select.shadowRoot.querySelectorAll('[data-monster-role="badge"]')
+				.length,
+			0,
+		);
+		assert.match(
+			summary.querySelector('[part="summary-messages"]').textContent,
+			/4/u,
+		);
+		assert.deepEqual(element.selection, [
+			"ready",
+			"review",
+			"blocked",
+			"progress",
+		]);
+		assert.equal(
+			element.value,
+			"one-of:ready,review,blocked,progress",
+		);
+	});
+});

package/test/cases/components/datatable/mobile-layout.mjs

@@ -0,0 +1,254 @@
+import { readFileSync } from "node:fs";
+import { expect } from "chai";
+
+const source = readFileSync(
+	new URL(
+		"../../../../source/components/datatable/style/datatable.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+const generated = readFileSync(
+	new URL(
+		"../../../../source/components/datatable/stylesheet/datatable.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+const columnBarSource = readFileSync(
+	new URL(
+		"../../../../source/components/datatable/style/column-bar.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+const columnBarGenerated = readFileSync(
+	new URL(
+		"../../../../source/components/datatable/stylesheet/column-bar.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+const embeddedPaginationSource = readFileSync(
+	new URL(
+		"../../../../source/components/datatable/style/embedded-pagination.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+const embeddedPaginationGenerated = readFileSync(
+	new URL(
+		"../../../../source/components/datatable/stylesheet/embedded-pagination.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+describe("Datatable mobile layout", () => {
+	it("groups responsive cells into readable row cards", () => {
+		expect(source).to.include("[data-monster-datatable-row-start]");
+		expect(source).to.include("[data-monster-datatable-row-end]");
+		expect(source).to.include("grid-template-columns:");
+		expect(source).to.include("content: attr(data-monster-head)");
+	});
+
+	it("gives mobile actions and multiselects the full card width", () => {
+		for (const selector of [
+			"monster-button",
+			"monster-button-bar",
+			"monster-filter-select",
+			"monster-select",
+			"select[multiple]",
+		]) {
+			expect(source).to.include(selector);
+		}
+
+		expect(source).to.include("var(--monster-control-min-block-size, 44px)");
+		expect(source).to.include("var(--monster-bg-color-selection-2)");
+		expect(source).to.include("width: 100%");
+	});
+
+	it("keeps adjoining mobile row actions visually joined", () => {
+		expect(source).to.include("--monster-button-bar-gap: 0");
+		expect(source).not.to.include("--monster-button-bar-gap: 0.5rem");
+		expect(generated).to.include("--monster-button-bar-gap:0");
+		expect(generated).not.to.include("--monster-button-bar-gap:0.5rem");
+	});
+
+	it("stacks labels above values when a responsive card becomes narrow", () => {
+		expect(source).to.include("container-name: monster-datatable-responsive");
+		expect(source).to.include("container-type: inline-size");
+		expect(source).to.include(
+			"@container monster-datatable-responsive (max-width: 26rem)",
+		);
+		expect(source).to.include("max-inline-size: 100%");
+		expect(source).to.include("min-inline-size: 0");
+		expect(source).to.include("grid-template-columns: minmax(0, 1fr)");
+	});
+
+	it("groups narrow toolbar utilities into a compact action cluster", () => {
+		expect(source).to.include('slot[name="bar"]::slotted(*)');
+		expect(source).to.include("flex-flow: row wrap");
+		expect(source).to.include(
+			"--monster-datatable-utility-action-size: 2.25rem",
+		);
+		expect(source).to.include("margin-inline-start: auto");
+		expect(source).to.include("font-size: 0");
+		expect(source).to.include("monster-context-help::part(button)");
+		expect(source).to.include("var(--monster-control-min-block-size, 44px)");
+		expect(columnBarSource).to.include(":host(.small)");
+		expect(columnBarSource).to.include(
+			"--monster-datatable-utility-action-size: 2.25rem",
+		);
+		expect(columnBarSource).to.include("font-size: 0");
+		expect(columnBarSource).to.include("display: none");
+		expect(columnBarSource).to.include("@media (pointer: coarse)");
+		expect(generated).to.include(
+			"--monster-datatable-utility-action-size:2.25rem",
+		);
+		expect(generated).to.include("flex-flow:row wrap");
+		expect(columnBarGenerated).to.include(
+			"--monster-datatable-utility-action-size:2.25rem",
+		);
+		expect(columnBarGenerated).to.include("font-size:0");
+	});
+
+	it("keeps column visibility dots compact and touch friendly", () => {
+		expect(columnBarSource).to.include(
+			"var(--monster-column-toggle-target-size, 16px)",
+		);
+		expect(columnBarSource).to.include(
+			"--monster-column-toggle-target-inline-size",
+		);
+		expect(columnBarSource).to.include(
+			"--monster-column-toggle-target-block-size",
+		);
+		expect(columnBarSource).to.include("& li {");
+		expect(columnBarSource).to.include("margin: 0;");
+		expect(columnBarSource).not.to.include("margin: 0 5px 0 0");
+		expect(columnBarSource).to.include("@media (pointer: coarse)");
+		expect(columnBarSource).to.include("min-width: 24px");
+		expect(columnBarSource).to.include("min-height: 24px");
+		expect(columnBarSource).to.include(
+			"min-height: var(--monster-column-settings-target-size, 24px)",
+		);
+		expect(columnBarGenerated).to.include(
+			"[data-monster-role=dots]) li{list-style:none;padding:0;margin:0;",
+		);
+		expect(columnBarGenerated).not.to.include("margin:0 5px 0 0");
+		expect(columnBarGenerated).to.include(
+			"--monster-column-toggle-target-size,16px",
+		);
+		expect(columnBarGenerated).to.include("@media (pointer:coarse)");
+		expect(columnBarGenerated).to.include("min-width:24px");
+	});
+
+	it("keeps embedded pagination compact and visually aligned with regular pagination", () => {
+		expect(embeddedPaginationSource).to.include("margin: 0");
+		expect(embeddedPaginationSource).to.include("grid-template-columns:");
+		expect(embeddedPaginationSource).to.include("minmax(max-content, 1fr)");
+		expect(embeddedPaginationSource).to.include(
+			"var(--monster-control-min-block-size, 44px)",
+		);
+		expect(embeddedPaginationSource).to.include("min-width:");
+		expect(embeddedPaginationSource).to.include(
+			"gap: var(--monster-space-1, 2px)",
+		);
+		expect(embeddedPaginationSource).to.include("overflow: visible");
+		expect(embeddedPaginationSource).to.include(
+			"border-width: var(",
+		);
+		expect(embeddedPaginationSource).to.include(
+			"--monster-button-border-radius",
+		);
+		expect(embeddedPaginationSource).to.include(
+			"background-color: var(--monster-bg-color-primary-4)",
+		);
+		expect(embeddedPaginationSource).to.include(
+			"padding: 0 var(--monster-space-2, 8px)",
+		);
+		expect(embeddedPaginationSource).to.include(
+			"--monster-embedded-pagination-summary-min-inline-size",
+		);
+		expect(embeddedPaginationSource).to.include("5rem");
+		expect(embeddedPaginationSource).to.include(
+			"font-variant-numeric: tabular-nums",
+		);
+		const compactSummaryStyles = embeddedPaginationSource.slice(
+			embeddedPaginationSource.indexOf(
+				'& ul.pagination-numbers-hidden [data-monster-role="pagination-summary"],',
+			),
+			embeddedPaginationSource.indexOf(
+				'& ul.pagination-numbers-hidden [data-monster-role="pagination-item"]',
+			),
+		);
+		expect(compactSummaryStyles).to.include(
+			"padding: 0 var(--monster-space-2, 8px)",
+		);
+		expect(compactSummaryStyles).to.include(
+			"--monster-embedded-pagination-summary-min-inline-size",
+		);
+		expect(embeddedPaginationSource).to.include(
+			"background-color: var(--monster-bg-color-primary-disabled-1)",
+		);
+		expect(embeddedPaginationSource).to.include(
+			"color: var(--monster-color-primary-disabled-1)",
+		);
+		expect(embeddedPaginationSource).to.include("opacity: 1");
+		expect(embeddedPaginationSource).not.to.include("&::after");
+		expect(embeddedPaginationSource).not.to.include("@mixin viewport-7");
+	});
+
+	it("ships the generated responsive card styles", () => {
+		expect(generated).to.include("data-monster-datatable-row-start");
+		expect(generated).to.include("data-monster-datatable-row-end");
+		expect(generated).to.include("monster-filter-select");
+		expect(generated).to.include("container-name:monster-datatable-responsive");
+		expect(generated).to.include("container-type:inline-size");
+		expect(generated).to.include(
+			"@container monster-datatable-responsive (max-width: 26rem)",
+		);
+		expect(generated).to.include("slot[name=bar]::slotted(*)");
+		expect(generated).to.include("monster-context-help::part(button)");
+		expect(embeddedPaginationGenerated).to.include(
+			"grid-template-columns:var(--monster-control-min-block-size,44px)",
+		);
+		expect(embeddedPaginationGenerated).to.include(
+			"minmax(max-content,1fr)",
+		);
+		expect(embeddedPaginationGenerated).to.include(
+			"min-height:var(--monster-control-min-block-size,44px)",
+		);
+		expect(embeddedPaginationGenerated).to.include(
+			"gap:var(--monster-space-1,2px)",
+		);
+		expect(embeddedPaginationGenerated).to.include("overflow:visible");
+		expect(embeddedPaginationGenerated).to.include(
+			"--monster-button-border-radius",
+		);
+		expect(embeddedPaginationGenerated).to.include(
+			"background-color:var(--monster-bg-color-primary-4)",
+		);
+		expect(embeddedPaginationGenerated).to.include(
+			"padding:0 var(--monster-space-2,8px)",
+		);
+		expect(embeddedPaginationGenerated).to.include(
+			"--monster-embedded-pagination-summary-min-inline-size,5rem",
+		);
+		expect(embeddedPaginationGenerated).to.include(
+			"font-variant-numeric:tabular-nums",
+		);
+		expect(embeddedPaginationGenerated).to.include(
+			"background-color:var(--monster-bg-color-primary-disabled-1)",
+		);
+		expect(embeddedPaginationGenerated).to.include("opacity:1");
+		expect(embeddedPaginationGenerated).not.to.include(
+			"[data-monster-role=pagination] ul.pagination-compact:after",
+		);
+	});
+});

package/test/cases/components/datatable/pagination.mjs

@@ -2,6 +2,7 @@
 import * as chai from 'chai';
 import {chaiDom} from "../../../util/chai-dom.mjs";
 import {initJSDOM} from "../../../util/jsdom.mjs";
+import {currentSupportedLanguages} from "../../../../source/i18n/map/languages.mjs";
 
 let expect = chai.expect;
 chai.use(chaiDom);
@@ -9,6 +10,29 @@ chai.use(chaiDom);
 let Pagination;
 let EmbeddedPagination;
 
+const expectedSummaries = {
+    en: "${current} of ${max}",
+    de: "Seite ${current} von ${max}",
+    es: "Página ${current} de ${max}",
+    zh: "第 ${current} 页，共 ${max} 页",
+    hi: "पृष्ठ ${current} / ${max}",
+    bn: "পৃষ্ঠা ${current} / ${max}",
+    pt: "Página ${current} de ${max}",
+    ru: "Страница ${current} из ${max}",
+    ja: "${max} ページ中 ${current} ページ",
+    pa: "ਪੰਨਾ ${current} / ${max}",
+    mr: "पृष्ठ ${current} / ${max}",
+    fr: "Page ${current} sur ${max}",
+    it: "Pagina ${current} di ${max}",
+    nl: "Pagina ${current} van ${max}",
+    sv: "Sida ${current} av ${max}",
+    pl: "Strona ${current} z ${max}",
+    da: "Side ${current} af ${max}",
+    fi: "Sivu ${current} / ${max}",
+    no: "Side ${current} av ${max}",
+    cs: "Stránka ${current} z ${max}",
+};
+
 describe('Pagination', function () {
     this.timeout(10000);
 
@@ -27,6 +51,61 @@ describe('Pagination', function () {
     afterEach(() => {
         let mocks = document.getElementById('mocks');
         mocks.innerHTML = "";
+        document.documentElement.lang = "en";
+    });
+
+    it('provides pagination labels for every supported language', function () {
+        expect(Object.keys(expectedSummaries)).to.have.members(currentSupportedLanguages);
+
+        for (const language of currentSupportedLanguages) {
+            document.documentElement.lang = language;
+            const control = document.createElement('monster-pagination');
+            const labels = control.getOption('labels');
+
+            expect(labels.summary, language).to.equal(expectedSummaries[language]);
+            for (const name of ['page', 'description', 'previous', 'next', 'of']) {
+                expect(labels[name], `${language}.${name}`).to.be.a('string').and.not.empty;
+            }
+        }
+    });
+
+    it('uses canonical ISO language codes and falls back to English', function () {
+        for (const [locale, expected] of [
+            ['es-MX', expectedSummaries.es],
+            ['da-DK', expectedSummaries.da],
+            ['sv-SE', expectedSummaries.sv],
+            ['sp', expectedSummaries.en],
+            ['dk', expectedSummaries.en],
+            ['sw', expectedSummaries.en],
+            ['eo', expectedSummaries.en],
+        ]) {
+            document.documentElement.lang = locale;
+            const control = document.createElement('monster-pagination');
+            expect(control.getOption('labels.summary'), locale).to.equal(expected);
+        }
+    });
+
+    it('formats a custom pagination summary label', function (done) {
+        const mocks = document.getElementById('mocks');
+        const control = document.createElement('monster-pagination');
+        mocks.appendChild(control);
+
+        setTimeout(() => {
+            try {
+                control.setOption('labels.summary', 'Result ${current} / ${max}');
+                control.setPaginationState({currentPage: 2, totalPages: 7});
+
+                expect(control.getOption('pagination.summary')).to.equal('Result 2 / 7');
+                expect(
+                    control.shadowRoot.querySelector(
+                        '[data-monster-role=pagination-summary] span'
+                    ).textContent
+                ).to.equal('Result 2 / 7');
+                done();
+            } catch (error) {
+                done(error);
+            }
+        }, 0);
     });
 
     it('normalizes NaN and avoids NaN hrefs', function (done) {