cx 26.4.3 → 26.5.1

package/dist/ui.js

@@ -15,12 +15,12 @@ import {
 	ZoomIntoPropertyView,
 	setGetExpressionCacheCallback,
 	setGetStringTemplateCacheCallback,
+	StringTemplate,
 	SubscribableView,
 	Store,
 	NestedDataView,
 	Grouper,
 	getComparer,
-	StringTemplate,
 } from "cx/data";
 export { computable, createAccessorModelProxy, createModel } from "cx/data";
 import {
@@ -53,7 +53,9 @@ import {
 	Format as Format$1,
 	resolveMinMaxFractionDigits,
 	parseDateInvariant,
+	dayBefore,
 	setGetFormatCacheCallback,
+	dateQuarter,
 	TraversalStack,
 	reverseSlice,
 	appDataFlag,
@@ -1902,6 +1904,31 @@ class ZIndexManager {
 }
 
 const Format = Format$1;
+// The `quarter` formatter renders a calendar quarter via a string-template
+// pattern with `{q}` (quarter number), `{yyyy}` and `{yy}` (year) placeholders.
+// Placeholders are case-insensitive (`{Q}`, `{YYYY}`, `{YY}` work too). It lives
+// here rather than in util/Format because it depends on StringTemplate from the
+// data layer, which util/ cannot import. It is registered eagerly since it does
+// not depend on culture settings.
+Format$1.registerFactory("quarter", (fmt, pattern, mode) => {
+	let exclusive = mode === "exclusive" || mode === "ex" || mode === "e";
+	let template = StringTemplate.get(pattern || "Q{q} {yyyy}");
+	return (value) => {
+		let date = parseDateInvariant(value);
+		if (exclusive) date = dayBefore(date);
+		let q = dateQuarter(date);
+		let yyyy = date.getFullYear();
+		let yy = String(yyyy % 100).padStart(2, "0");
+		return template({
+			q,
+			Q: q,
+			yyyy,
+			YYYY: yyyy,
+			yy,
+			YY: yy,
+		});
+	};
+});
 let cultureSensitiveFormatsRegistered = false;
 function resolveNumberFormattingFlags(flags) {
 	if (!flags) return null;
@@ -1966,6 +1993,11 @@ function enableCultureSensitiveFormatting() {
 		let formatter = culture.getFormatter(format);
 		return (value) => formatter.format(parseDateInvariant(value));
 	});
+	Format$1.registerFactory(["dayBefore", "daybefore"], (fmt, format = "yyyyMd hhmm") => {
+		let culture = Culture.getDateTimeCulture();
+		let formatter = culture.getFormatter(format);
+		return (value) => formatter.format(dayBefore(parseDateInvariant(value)));
+	});
 	setGetFormatCacheCallback(() => {
 		let cache = getCurrentCultureCache();
 		if (!cache.formatCache) cache.formatCache = {};

package/dist/util.js

@@ -156,6 +156,22 @@ function overrideParseDateInvariant(newImpl) {
 	impl = newImpl;
 }
 
+/**
+ * Returns a new `Date` representing the calendar day before the given date,
+ * keeping the same time of day. Month and year boundaries are handled
+ * automatically. The input is not mutated.
+ *
+ * Useful for displaying the exclusive end of a date range as an inclusive
+ * value, e.g. a period ending at `2021-01-01` shown as `Dec 2020`.
+ * @param date
+ * @returns {Date}
+ */
+function dayBefore(date) {
+	let result = new Date(date.getTime());
+	result.setDate(result.getDate() - 1);
+	return result;
+}
+
 const defaultFormatter = (v) => v.toString();
 let formatFactory = {
 	string: function () {
@@ -225,6 +241,10 @@ let formatFactory = {
 		let time = formatFactory.time();
 		return (value) => date(value) + " " + time(value);
 	},
+	dayBefore: function () {
+		let datetime = formatFactory.datetime();
+		return (value) => datetime(dayBefore(parseDateInvariant(value)));
+	},
 	ellipsis: function (part0, length, where) {
 		length = Number(length);
 		if (!(length > 3)) length = 10;
@@ -288,6 +308,7 @@ formatFactory.ps = formatFactory.percentageSign;
 formatFactory.d = formatFactory.date;
 formatFactory.t = formatFactory.time;
 formatFactory.dt = formatFactory.datetime;
+formatFactory.daybefore = formatFactory.dayBefore;
 formatFactory.zeropad = formatFactory.zeroPad;
 formatFactory.leftpad = formatFactory.leftPad;
 formatFactory.capitalize = formatFactory.capitalize;
@@ -715,6 +736,15 @@ function dateDiff(d1, d2) {
 	return d1.getTime() - d2.getTime();
 }
 
+/**
+ * Returns the calendar quarter (1-4) the given date falls in.
+ * @param date
+ * @returns {number}
+ */
+function dateQuarter(date) {
+	return Math.floor(date.getMonth() / 3) + 1;
+}
+
 /**
  * Zeros out time for the given Date object. E.g. for date object representing Wed Apr 19 2017 14:31:51 GMT+0200
  * returns Wed Apr 19 2017 00:00:00 GMT+0200.
@@ -1575,6 +1605,8 @@ export {
 	coalesce,
 	createComponentFactory,
 	dateDiff,
+	dateQuarter,
+	dayBefore,
 	debounce,
 	debug,
 	deprecatedFlag,

package/dist/widgets.css

@@ -1429,9 +1429,6 @@ th.cxe-calendar-display {
 }
 
 .cxs-single > .cxe-lookupfield-input {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   flex-basis: 0%;
   flex-grow: 1;
 }
@@ -1440,6 +1437,15 @@ th.cxe-calendar-display {
   padding-left: 26px;
 }
 
+.cxe-lookupfield-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  flex-basis: 0%;
+  flex-grow: 1;
+}
+
 .cxe-lookupfield-tags {
   display: flex;
   margin: -2px -2px -2px -2px;