@emuanalytics/flow-rdf-ui 4.1.28 → 4.2.0

package/dist/components/calendar/calendar.styles.mjs

@@ -13,6 +13,9 @@ const styles = css`
     --day-color-hover: var(--flow-ui-calendar-day-color-hover);
     --day-color-selected: var(--flow-ui-calendar-day-color-selected);
     --day-color-today: var(--flow-ui-calendar-day-color-today);
+    --day-color-in-range: var(--flow-ui-color-primary-100);
+    --day-gap: var(--flow-ui-spacing-2x-small);
+    --month-gap: var(--flow-ui-spacing-large);
   }
 
   .calendar {
@@ -43,21 +46,52 @@ const styles = css`
     --day-font-size: var(--flow-ui-font-size-medium);
   }
 
+  /* Two-month view: each month is --width wide */
+  .calendar--two-months {
+    width: calc(var(--width) * 2 + var(--month-gap));
+  }
+
+  .calendar__months {
+    flex: 1;
+    display: flex;
+    gap: var(--month-gap);
+  }
+
+  .calendar__month {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--flow-ui-spacing-x-small);
+  }
+
+  /* The months can have different numbers of weeks, so don't stretch the shorter one */
+  .calendar--two-months .calendar__months {
+    align-items: start;
+  }
+
   .calendar__header {
     display: flex;
     align-items: center;
   }
 
+  /* Keeps the space of the previous or next button that the other month has, so the month label stays centered */
+  .calendar__header-button--hidden {
+    visibility: hidden;
+  }
+
   .calendar__header-month {
     flex: 1;
     text-align: center;
+    /* Match the month and year selects in the first month */
+    font-size: var(--flow-ui-control-font-size-medium);
   }
 
   .calendar__grid {
     flex: 1;
     display: grid;
     grid-template-columns: repeat(7, 1fr);
-    gap: var(--flow-ui-spacing-2x-small);
+    gap: var(--day-gap);
   }
 
   .calendar__header-day {
@@ -79,10 +113,22 @@ const styles = css`
     font-size: var(--day-font-size);
   }
 
-  .calendar__day:hover:not(.calendar__day--selected) {
+  .calendar__day:hover:not(
+      .calendar__day--selected,
+      .calendar__day--range-start,
+      .calendar__day--range-last,
+      .calendar__day--disabled
+    ) {
     background-color: var(--day-color-hover);
   }
 
+  /* Outside min or max, or too far from the pending day for max-range */
+  .calendar__day--disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    text-decoration: line-through;
+  }
+
   .calendar__day--filler {
     color: var(--day-color-filler);
   }
@@ -96,6 +142,71 @@ const styles = css`
     background-color: var(--day-color-selected);
   }
 
+  /*
+   * Date range. Each day in the range draws its part of the range band with a pseudo-element behind the day button, so
+   * the day's own background (the hover color, or the selected color at the ends of the range) is drawn on top. The
+   * band extends into the grid gap on both sides so that it is continuous across a week row, and has rounded ends at
+   * the start and end of each row.
+   */
+
+  .calendar__grid {
+    /* Keep the range band (z-index: -1) above the backgrounds of the calendar's ancestors */
+    isolation: isolate;
+  }
+
+  .calendar__day--in-range {
+    position: relative;
+  }
+
+  .calendar__day--in-range::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    inset-block: 0;
+    inset-inline: calc(var(--day-gap) / -2);
+    background-color: var(--day-color-in-range);
+  }
+
+  .calendar__day--in-range.calendar__day--row-start::before {
+    inset-inline-start: 0;
+    border-start-start-radius: var(--flow-ui-border-radius-pill);
+    border-end-start-radius: var(--flow-ui-border-radius-pill);
+  }
+
+  .calendar__day--in-range.calendar__day--row-end::before {
+    inset-inline-end: 0;
+    border-start-end-radius: var(--flow-ui-border-radius-pill);
+    border-end-end-radius: var(--flow-ui-border-radius-pill);
+  }
+
+  /* The band starts and ends at the center of the range's end days, under the selected color */
+  .calendar__day--in-range.calendar__day--range-start::before {
+    inset-inline-start: 50%;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  .calendar__day--in-range.calendar__day--range-last::before {
+    inset-inline-end: 50%;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .calendar__day--range-start.calendar__day--range-last::before {
+    content: none;
+  }
+
+  /* The filler color doesn't contrast enough with the range band, so mix it with the text color */
+  .calendar__day--filler.calendar__day--in-range:not(.calendar__day--range-start, .calendar__day--range-last) {
+    color: color-mix(in oklab, var(--day-color-filler), currentColor);
+  }
+
+  .calendar__day--range-start,
+  .calendar__day--range-last {
+    color: var(--flow-ui-color-background);
+    background-color: var(--day-color-selected);
+  }
+
   .calendar__header {
     justify-content: space-between;
     padding-inline: var(--flow-ui-spacing-small);
@@ -111,6 +222,35 @@ const styles = css`
     align-items: center;
   }
 
+  /* The Start and End rows of a datetime range share one grid, so their labels and inputs line up */
+  .calendar__time-rows {
+    display: grid;
+    grid-template-columns: auto 1fr auto 1fr auto 1fr;
+    align-items: center;
+    gap: var(--flow-ui-spacing-2x-small);
+  }
+
+  .calendar__time-container--range {
+    display: contents;
+  }
+
+  /* Two-month datetime range: the Start row under the first month and the End row under the second */
+  .calendar__time-rows--split {
+    grid-template-columns: 1fr 1fr;
+    column-gap: var(--month-gap);
+  }
+
+  .calendar__time-rows--split .calendar__time-container--range {
+    display: flex;
+    min-width: 0;
+  }
+
+  .calendar__time-label {
+    padding-inline-end: var(--flow-ui-spacing-x-small);
+    font-size: var(--day-font-size);
+    font-weight: var(--flow-ui-font-weight-bold);
+  }
+
   .calendar__time-input {
     flex: 1;
     /* Allow the input to shrink to accommodate narrow calendars in sidebars */

package/dist/components/date-time-picker/date-time-picker.component.mjs

@@ -5,6 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { DateTime } from 'luxon';
 import { stopAnimations, animateTo } from '../../internal/animate.mjs';
 import { boolean } from '../../internal/boolean.mjs';
+import { parseDateRange, lastDayOfRange, endTimeOfRange, formatEndOfDay, parseDateLimits, checkDateLimits } from '../../internal/date-range.mjs';
 import { defaultValue } from '../../internal/default-value.mjs';
 import { waitForEvent } from '../../internal/event.mjs';
 import { FlowRdfFormControl } from '../../internal/flow-ui-rdf-element.mjs';
@@ -27,6 +28,11 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+const defaultFormats = {
+  date: "DD",
+  time: "HH:mm",
+  datetime: "FFF"
+};
 const popupOptions = {
   small: { distance: -1, skidding: -4 },
   medium: { distance: -3, skidding: -9 },
@@ -45,9 +51,10 @@ class FlowUiDateTimePicker extends FlowRdfFormControl {
     this.name = "";
     this.value = "";
     this.displayMode = "datetime";
-    this.format = "FFF";
+    this.range = false;
     this.defaultValue = "";
     this.size = "medium";
+    this.months = 1;
     this.placeholder = "";
     this.disabled = false;
     this.clearable = false;
@@ -62,6 +69,16 @@ class FlowUiDateTimePicker extends FlowRdfFormControl {
     this.required = false;
     this.inline = false;
     this.divider = false;
+    /** The message set with `setCustomValidity()`. It takes precedence over the limits messages. */
+    this.customValidityMessage = "";
+  }
+  get format() {
+    return this._format ?? defaultFormats[this.displayMode] ?? defaultFormats.datetime;
+  }
+  set format(format) {
+    const oldFormat = this._format;
+    this._format = isStringFull(format) ? format : void 0;
+    this.requestUpdate("format", oldFormat);
   }
   /** Gets the validity state object */
   get validity() {
@@ -80,6 +97,7 @@ class FlowUiDateTimePicker extends FlowRdfFormControl {
     this.filled = boolean(this.filled, true);
     this.pill = boolean(this.pill, true);
     this.inline = boolean(this.inline, true);
+    this.range = boolean(this.range, true);
     this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
@@ -95,19 +113,48 @@ class FlowUiDateTimePicker extends FlowRdfFormControl {
     document.removeEventListener("keydown", this.handleDocumentKeyDown);
     document.removeEventListener("mousedown", this.handleDocumentMouseDown);
   }
+  /** Whether the picker selects a range: a date range, a datetime range or a time range. */
+  get isRangeMode() {
+    return this.range;
+  }
   updateDisplayLabel() {
     try {
-      if (isStringFull(this.value)) {
-        const zone = isStringFull(this.timezone) ? this.timezone : void 0;
-        const locale = isStringFull(this.locale) ? this.locale : void 0;
-        this.displayLabel = DateTime.fromISO(this.value, { zone, locale }).toFormat(this.format);
-      } else {
+      const zone = isStringFull(this.timezone) ? this.timezone : void 0;
+      const locale = isStringFull(this.locale) ? this.locale : void 0;
+      if (!isStringFull(this.value)) {
         this.displayLabel = "";
+      } else if (this.isRangeMode) {
+        this.displayLabel = this.rangeLabel(zone, locale);
+      } else {
+        this.displayLabel = DateTime.fromISO(this.value, { zone, locale }).toFormat(this.format);
       }
     } catch (e) {
       console.warn(e.message);
     }
   }
+  /**
+   * The label for a range. For a date range, it shows the range start and the last day, both included, and a range of
+   * one day shows that day once. For a datetime range, it shows the start and end instants. For a time range, it shows
+   * the start and end times, with an end at the end of the day shown as 24:00. An invalid range shows an empty label,
+   * as the calendar shows no selection.
+   */
+  rangeLabel(zone, locale) {
+    const isDateRange = this.displayMode === "date";
+    const range = parseDateRange(this.value, { zone, locale, wholeDays: isDateRange });
+    if (!range) {
+      return "";
+    }
+    const first = range.start.toFormat(this.format);
+    let last;
+    if (isDateRange) {
+      last = lastDayOfRange(range).toFormat(this.format);
+    } else if (this.displayMode === "time" && endTimeOfRange(range).hour === 24) {
+      last = formatEndOfDay(lastDayOfRange(range), this.format);
+    } else {
+      last = range.end.toFormat(this.format);
+    }
+    return first === last ? first : `${first} \u2013 ${last}`;
+  }
   handleFocus() {
     this.hasFocus = true;
     this.displayInput.setSelectionRange(0, 0);
@@ -133,10 +180,17 @@ class FlowUiDateTimePicker extends FlowRdfFormControl {
     if (event.key === "Escape" && this.open) {
       event.preventDefault();
       event.stopPropagation();
+      const calendar = this.shadowRoot?.querySelector("flow-ui-calendar");
+      if (calendar?.cancelPendingRange()) {
+        return;
+      }
       this.hide();
       this.displayInput.focus({ preventScroll: true });
     }
     if (event.key === "Enter") {
+      if (this.open && event.composedPath().includes(this.calendarContainer)) {
+        return;
+      }
       event.preventDefault();
       event.stopImmediatePropagation();
       if (!this.open) {
@@ -185,6 +239,9 @@ class FlowUiDateTimePicker extends FlowRdfFormControl {
     event.stopPropagation();
     event.preventDefault();
   }
+  handleCalendarInput(event) {
+    event.stopPropagation();
+  }
   handleCalendarChange(event) {
     event.stopPropagation();
     const target = event.target;
@@ -196,6 +253,10 @@ class FlowUiDateTimePicker extends FlowRdfFormControl {
         this.emit("flow-ui-change");
       });
     }
+    if (this.isRangeMode && this.displayMode === "date") {
+      this.hide();
+      this.displayInput.focus({ preventScroll: true });
+    }
   }
   handleInvalid(event) {
     this.formControlController.setValidity(false);
@@ -262,9 +323,43 @@ class FlowUiDateTimePicker extends FlowRdfFormControl {
   }
   /** Sets a custom validation message. Pass an empty string to restore validity. */
   setCustomValidity(message) {
-    this.valueInput.setCustomValidity(message);
+    this.customValidityMessage = message;
+    this.updateCustomValidity();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    const limitProperties = ["value", "min", "max", "maxRange", "range", "displayMode", "timezone", "locale"];
+    if (limitProperties.some((name) => changedProperties.has(name))) {
+      this.updateCustomValidity();
+    }
+  }
+  /** Set the value input's custom validity: the message from `setCustomValidity()`, or a limits message. */
+  updateCustomValidity() {
+    this.valueInput.setCustomValidity(this.customValidityMessage || this.limitsValidityMessage());
     this.formControlController.updateValidity();
   }
+  /** The validation message for a value outside `min`, `max` or `max-range`, or an empty string. */
+  limitsValidityMessage() {
+    if (this.displayMode === "time") {
+      return "";
+    }
+    const zone = isStringFull(this.timezone) ? this.timezone : void 0;
+    const locale = isStringFull(this.locale) ? this.locale : void 0;
+    const wholeDays = this.displayMode === "date";
+    const limits = parseDateLimits(this.min, this.max, this.maxRange, { zone, locale });
+    const violation = checkDateLimits(this.value, limits, { zone, locale, range: this.isRangeMode, wholeDays });
+    const formatLimit = (date) => date.toLocaleString(wholeDays ? DateTime.DATE_MED : DateTime.DATETIME_MED);
+    switch (violation) {
+      case "min":
+        return this.localize.term("dateBeforeMin", formatLimit(limits.min));
+      case "max":
+        return this.localize.term("dateAfterMax", formatLimit(limits.max));
+      case "maxRange":
+        return this.localize.term("dateRangeTooLong", limits.maxRange.toHuman());
+      default:
+        return "";
+    }
+  }
   /** Sets focus on the control. */
   focus(options) {
     this.displayInput.focus(options);
@@ -419,9 +514,15 @@ class FlowUiDateTimePicker extends FlowRdfFormControl {
                     <flow-ui-calendar
                       value=${this.value}
                       display-mode=${this.displayMode}
+                      ?range=${this.range}
+                      min=${ifDefined(this.min)}
+                      max=${ifDefined(this.max)}
+                      max-range=${ifDefined(this.maxRange)}
                       size=${this.size}
+                      months=${this.months}
                       timezone=${ifDefined(this.timezone)}
                       locale=${ifDefined(this.locale)}
+                      @flow-ui-input=${this.handleCalendarInput}
                       @flow-ui-change=${this.handleCalendarChange}
                     ></flow-ui-calendar>
                   ` : nothing}
@@ -462,9 +563,12 @@ __decorateClass([
 __decorateClass([
   property({ attribute: "display-mode" })
 ], FlowUiDateTimePicker.prototype, "displayMode", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiDateTimePicker.prototype, "range", 2);
 __decorateClass([
   property()
-], FlowUiDateTimePicker.prototype, "format", 2);
+], FlowUiDateTimePicker.prototype, "format", 1);
 __decorateClass([
   property()
 ], FlowUiDateTimePicker.prototype, "timezone", 2);
@@ -477,6 +581,18 @@ __decorateClass([
 __decorateClass([
   property({ reflect: true })
 ], FlowUiDateTimePicker.prototype, "size", 2);
+__decorateClass([
+  property({ type: Number })
+], FlowUiDateTimePicker.prototype, "months", 2);
+__decorateClass([
+  property()
+], FlowUiDateTimePicker.prototype, "min", 2);
+__decorateClass([
+  property()
+], FlowUiDateTimePicker.prototype, "max", 2);
+__decorateClass([
+  property({ attribute: "max-range" })
+], FlowUiDateTimePicker.prototype, "maxRange", 2);
 __decorateClass([
   property()
 ], FlowUiDateTimePicker.prototype, "placeholder", 2);
@@ -520,7 +636,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], FlowUiDateTimePicker.prototype, "divider", 2);
 __decorateClass([
-  watch(["value", "format", "timezone", "locale"])
+  watch(["value", "format", "timezone", "locale", "range", "displayMode"])
 ], FlowUiDateTimePicker.prototype, "updateDisplayLabel", 1);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })

package/dist/components/query-builder/converters/flow-query-converters.mjs

@@ -1,7 +1,7 @@
 import { DateTime } from 'luxon';
 import { isNil, isObjectFull, isFunction } from '../../../internal/type-checks.mjs';
 import { escape } from '../../../utilities/regex.mjs';
-import { filterRuleSet, isRule, isRuleSet } from '../helpers.mjs';
+import { filterRuleSet, isRule, isRuleSet, betweenRuleValues } from '../helpers.mjs';
 
 function isStringType(field) {
   return field.type === "string";
@@ -24,6 +24,9 @@ function whereClausesFromRuleSet(rule, config, options) {
     if (options?.renameFields && fieldName in options.renameFields) {
       fieldName = options.renameFields[fieldName];
     }
+    if (rule.operator === "between") {
+      return betweenClause(fieldName, rule, field, options);
+    }
     let clause = ["is null", "not null"].includes(rule.operator) || !isNil(rule.value) ? { [fieldName]: predicateFromRule(rule, config) } : {};
     if ((rule.operator === "!=" || rule.operator === "not like") && isObjectFull(clause)) {
       clause = { $or: [{ [fieldName]: { $is: null } }, clause] };
@@ -35,6 +38,22 @@ function whereClausesFromRuleSet(rule, config, options) {
     return rules.length ? { [condition]: rules } : {};
   } else ;
 }
+function betweenClause(fieldName, rule, field, options) {
+  const values = betweenRuleValues(rule, field);
+  if (!values) {
+    const message = `flowQueryConverter: Skipping 'between' rule for field '${rule.field}': value must be [start, end]`;
+    if (options.throwOnError) {
+      throw new Error(message);
+    }
+    console.warn(message, rule);
+    return void 0;
+  }
+  const [start, end] = field.type === "datetime" ? values.map((v) => DateTime.fromISO(v).toISO()) : values;
+  if (end === void 0) {
+    return { [fieldName]: { $gte: start } };
+  }
+  return { $and: [{ [fieldName]: { $gte: start } }, { [fieldName]: { $lt: end } }] };
+}
 function predicateFromRule(rule, config) {
   const fieldConfig = config.fields[rule.field];
   const field = config.fields[rule.field];
@@ -105,18 +124,11 @@ function predicateFromRule(rule, config) {
       operator = "$not";
       value = null;
       break;
-    case "between":
-      operator = "$between";
-      break;
     default:
       throw new Error(`Unrecognized query operator '${rule.operator}'`);
   }
   if (config.fields?.[rule.field]?.type === "datetime") {
-    if (rule.operator === "between") {
-      value = [DateTime.fromISO(value[0] || 0).toISO(), DateTime.fromISO(value[1] || 0).toISO()];
-    } else {
-      value = DateTime.fromISO(value || 0).toISO();
-    }
+    value = DateTime.fromISO(value || 0).toISO();
   }
   return { [operator]: value };
 }

package/dist/components/query-builder/converters/javascript-filter-converter.mjs

@@ -2,7 +2,7 @@ import { DateTime } from 'luxon';
 import { ensureArray } from '../../../internal/ensure-array.mjs';
 import { isNil, isStringFull, isFunction } from '../../../internal/type-checks.mjs';
 import { escape } from '../../../utilities/regex.mjs';
-import { filterRuleSet, isRule, isRuleSet } from '../helpers.mjs';
+import { filterRuleSet, isRule, isRuleSet, betweenRuleValues } from '../helpers.mjs';
 
 class JavaScriptFilterError extends Error {
   constructor(msg) {
@@ -62,6 +62,22 @@ function predicateFromRule(rule, config, options) {
   let field = `get("${fieldName}", data)`;
   let operator = "";
   let value = rule.value;
+  if (rule.operator === "between") {
+    const values = betweenRuleValues(rule, fieldConfig);
+    if (!values) {
+      const message = `JavascriptFilterConverter: Skipping 'between' rule for field '${rule.field}': value must be [start, end]`;
+      if (options.throwOnError) {
+        throw new JavaScriptFilterError(message);
+      }
+      console.warn(message, rule);
+      return void 0;
+    }
+    const [start, end] = isDateType(fieldConfig) ? values.map((v) => v === void 0 ? v : convertDateTime(v, fieldConfig)) : values;
+    if (end === void 0) {
+      return `${field} >= ${JSON.stringify(start)}`;
+    }
+    return `(${field} >= ${JSON.stringify(start)}) && (${field} < ${JSON.stringify(end)})`;
+  }
   if (isFunction(fieldConfig.convertValue)) {
     value = fieldConfig.convertValue(value);
   }

package/dist/components/query-builder/converters/map-layer-filter-converter.mjs

@@ -1,7 +1,7 @@
 import { ensureArray } from '../../../internal/ensure-array.mjs';
 import { isNil, isStringFull, isFunction } from '../../../internal/type-checks.mjs';
 import { escape } from '../../../utilities/regex.mjs';
-import { filterRuleSet, isRule, isRuleSet } from '../helpers.mjs';
+import { filterRuleSet, isRule, isRuleSet, betweenRuleValues } from '../helpers.mjs';
 
 function isStringType(field) {
   return field.type === "string";
@@ -42,6 +42,21 @@ function predicateFromRule(rule, config, options) {
   let operator = "";
   let value = rule.value;
   let negate = false;
+  if (rule.operator === "between") {
+    const values = betweenRuleValues(rule, fieldConfig);
+    if (!values) {
+      const message = `mapLayerFilterConverter: Skipping 'between' rule for field '${rule.field}': value must be [start, end]`;
+      if (options.throwOnError) {
+        throw new Error(message);
+      }
+      console.warn(message, rule);
+      return void 0;
+    }
+    if (values[1] === void 0) {
+      return `${field} >= ${JSON.stringify(values[0])}`;
+    }
+    return `(${field} >= ${JSON.stringify(values[0])}) && (${field} < ${JSON.stringify(values[1])})`;
+  }
   if (isFunction(fieldConfig.convertValue)) {
     value = fieldConfig.convertValue(value);
   }