@emuanalytics/flow-rdf-ui 4.0.5 → 4.0.7

package/dist/components/progress-ring/progress-ring.component.mjs

@@ -0,0 +1,71 @@
+import { html } from 'lit';
+import { query, state, property } from 'lit/decorators.js';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { LocalizeController } from '../../utilities/localize.mjs';
+import styles from './progress-ring.styles.mjs';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class FlowUiProgressRing extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.label = "";
+  }
+  updated(changedProps) {
+    super.updated(changedProps);
+    if (changedProps.has("value")) {
+      const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue("r"));
+      const circumference = 2 * Math.PI * radius;
+      const offset = circumference - this.value / 100 * circumference;
+      this.indicatorOffset = `${offset}px`;
+    }
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class="progress-ring"
+        role="progressbar"
+        aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
+        aria-describedby="label"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow="${this.value}"
+        style="--percentage: ${this.value / 100}"
+      >
+        <svg class="progress-ring__image">
+          <circle class="progress-ring__track"></circle>
+          <circle class="progress-ring__indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle>
+        </svg>
+
+        <slot id="label" part="label" class="progress-ring__label"></slot>
+      </div>
+    `;
+  }
+}
+FlowUiProgressRing.styles = styles;
+__decorateClass([
+  query(".progress-ring__indicator")
+], FlowUiProgressRing.prototype, "indicator", 2);
+__decorateClass([
+  state()
+], FlowUiProgressRing.prototype, "indicatorOffset", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], FlowUiProgressRing.prototype, "value", 2);
+__decorateClass([
+  property()
+], FlowUiProgressRing.prototype, "label", 2);
+
+export { FlowUiProgressRing as default };

package/dist/components/progress-ring/progress-ring.mjs

@@ -0,0 +1,5 @@
+import FlowUiProgressRing from './progress-ring.component.mjs';
+
+
+
+export { FlowUiProgressRing as default };

package/dist/components/progress-ring/progress-ring.styles.mjs

@@ -0,0 +1,72 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    --size: 128px;
+    --track-width: 4px;
+    --track-color: var(--flow-ui-color-neutral-200);
+    --indicator-width: var(--track-width);
+    --indicator-color: var(--flow-ui-color-primary-500);
+    --indicator-transition-duration: 0.35s;
+
+    display: inline-flex;
+  }
+
+  .progress-ring {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+
+  .progress-ring__image {
+    width: var(--size);
+    height: var(--size);
+    rotate: -90deg;
+    transform-origin: 50% 50%;
+  }
+
+  .progress-ring__track,
+  .progress-ring__indicator {
+    --radius: calc(var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5);
+    --circumference: calc(var(--radius) * 2 * 3.141592654);
+
+    fill: none;
+    r: var(--radius);
+    cx: calc(var(--size) / 2);
+    cy: calc(var(--size) / 2);
+  }
+
+  .progress-ring__track {
+    stroke: var(--track-color);
+    stroke-width: var(--track-width);
+  }
+
+  .progress-ring__indicator {
+    stroke: var(--indicator-color);
+    stroke-width: var(--indicator-width);
+    stroke-linecap: round;
+    transition-property: stroke-dashoffset;
+    transition-duration: var(--indicator-transition-duration);
+    stroke-dasharray: var(--circumference) var(--circumference);
+    stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference));
+  }
+
+  .progress-ring__label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    user-select: none;
+  }
+`;
+
+export { styles as default };

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

@@ -0,0 +1,111 @@
+import { DateTime } from 'luxon';
+import { isNil, isObjectFull, isFunction } from '../../../internal/type-checks.mjs';
+import { filterRuleSet, isRule, isRuleSet } from '../helpers.mjs';
+
+function whereClausesFromRuleSet(rule, config, options) {
+  if (isRule(rule)) {
+    if (!rule.enabled) {
+      return void 0;
+    }
+    if (isNil(rule.field) || isNil(rule.operator)) {
+      console.warn(`flowQueryConverter: Skipping rule with missing field or operator`, rule);
+      return void 0;
+    }
+    const field = config.fields[rule.field];
+    if (!field) {
+      console.warn(`flowQueryConverter: Skipping unknown field '${rule.field}' in rule`, rule);
+      return void 0;
+    }
+    if (isNil(rule.value) && field.nullable !== true) {
+      console.warn(`flowQueryConverter: Skipping nil field '${rule.field}' in rule (non-nullable)`, rule);
+      return void 0;
+    }
+    let fieldName = rule.field;
+    if (options?.renameFields && fieldName in options.renameFields) {
+      fieldName = options.renameFields[fieldName];
+    }
+    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] };
+    }
+    return clause;
+  } else if (isRuleSet(rule)) {
+    const condition = rule.condition === "and" ? "$and" : "$or";
+    const rules = rule.rules.map((r) => whereClausesFromRuleSet(r, config, options)).filter((r) => isObjectFull(r));
+    return rules.length ? { [condition]: rules } : {};
+  } else ;
+}
+function predicateFromRule(rule, config) {
+  const field = config.fields[rule.field];
+  let operator;
+  let value = rule.value;
+  if (isFunction(field.convertValue)) {
+    value = field.convertValue(value);
+  }
+  switch (rule.operator) {
+    case "=":
+      operator = "$eq";
+      break;
+    case "!=":
+      operator = "$ne";
+      break;
+    case "<":
+      operator = "$lt";
+      break;
+    case "<=":
+      operator = "$lte";
+      break;
+    case ">":
+      operator = "$gt";
+      break;
+    case ">=":
+      operator = "$gte";
+      break;
+    case "in":
+      operator = "$in";
+      break;
+    case "!in":
+      operator = "$notIn";
+      break;
+    case "like":
+      operator = "$iLike";
+      break;
+    case "!like":
+      operator = "$notILike";
+      break;
+    case "contains":
+      operator = "$iLike";
+      value = `%${value}%`;
+      break;
+    case "null":
+      operator = "$is";
+      value = null;
+      break;
+    case "!null":
+      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();
+    }
+  }
+  return { [operator]: value };
+}
+const converter = (ruleset, config, options) => {
+  if (options) {
+    ruleset = filterRuleSet(ruleset, options);
+  }
+  return whereClausesFromRuleSet(ruleset, config, options);
+};
+const converter$1 = converter;
+
+export { converter$1 as default };

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

@@ -0,0 +1,99 @@
+import { ensureArray } from '../../../internal/ensure-array.mjs';
+import { isNil, isStringFull, isFunction } from '../../../internal/type-checks.mjs';
+import { filterRuleSet, isRule, isRuleSet } from '../helpers.mjs';
+
+function mapLayerFilterFromRuleSet(rule, config, options) {
+  if (isRule(rule)) {
+    if (!rule.enabled) {
+      return void 0;
+    }
+    if (isNil(rule.field) || isNil(rule.operator)) {
+      console.warn(`mapLayerFilterConverter: Skipping rule with missing field or operator`, rule);
+      return void 0;
+    }
+    const field = config.fields[rule.field];
+    if (!field) {
+      console.warn(`mapLayerFilterConverter: Skipping unknown field '${rule.field}' in rule`, rule);
+      return void 0;
+    }
+    if (isNil(rule.value) && field.nullable !== true) {
+      console.warn(`mapLayerFilterConverter: Skipping nil field '${rule.field}' in rule (non-nullable)`, rule);
+      return void 0;
+    }
+    let fieldName = rule.field;
+    if (options?.renameFields && fieldName in options.renameFields) {
+      fieldName = options.renameFields[fieldName];
+    }
+    return predicateFromRule(rule, config);
+  } else if (isRuleSet(rule)) {
+    const condition = rule.condition === "and" ? " && " : " || ";
+    const rules = rule.rules.map((r) => mapLayerFilterFromRuleSet(r, config, options)).filter((r) => isStringFull(r));
+    return rules.length ? rules.map((r) => `(${r})`).join(condition) : "";
+  } else ;
+}
+function predicateFromRule(rule, config) {
+  const fieldConfig = config.fields[rule.field];
+  let predicate;
+  const field = `get("${rule.field}")`;
+  let operator = "";
+  let value = rule.value;
+  if (isFunction(fieldConfig.convertValue)) {
+    value = fieldConfig.convertValue(value);
+  }
+  switch (rule.operator) {
+    case "=":
+      operator = "==";
+      break;
+    case "!=":
+      operator = "!=";
+      break;
+    case "<":
+      operator = "<";
+      break;
+    case "<=":
+      operator = "<=";
+      break;
+    case ">":
+      operator = ">";
+      break;
+    case ">=":
+      operator = ">=";
+      break;
+    case "in":
+      value = ensureArray(value);
+      predicate = `in(${field}, literal([${value.map(JSON.stringify).join(", ")}]))`;
+      break;
+    case "!in":
+      value = ensureArray(value);
+      predicate = `!in(${field}, literal([${value.map(JSON.stringify).join(", ")}]))`;
+      break;
+    case "like":
+      operator = "~*";
+      break;
+    case "contains":
+      predicate = `in(${JSON.stringify(value)}, ${field})`;
+      break;
+    case "=i":
+      operator = "=*";
+      break;
+    case "regex":
+      operator = "~";
+      break;
+    case "regexi":
+      operator = "~*";
+      break;
+    default:
+      throw new Error(`Unrecognized query operator '${rule.operator}'`);
+  }
+  predicate ?? (predicate = `${field} ${operator} ${JSON.stringify(value)}`);
+  return predicate;
+}
+const converter = (ruleset, config, options) => {
+  if (options) {
+    ruleset = filterRuleSet(ruleset, options);
+  }
+  return mapLayerFilterFromRuleSet(ruleset, config, options);
+};
+const converter$1 = converter;
+
+export { converter$1 as default };

package/dist/components/query-builder/default-value-templates.mjs

@@ -0,0 +1,151 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { ensureArray } from '../../internal/ensure-array.mjs';
+import { isFunction, isDefined } from '../../internal/type-checks.mjs';
+
+function getDefault(defaultVal, fallback) {
+  if (isFunction(defaultVal)) {
+    return defaultVal();
+  }
+  return isDefined(defaultVal) ? defaultVal : fallback;
+}
+const defaultStringTemplate = (rule, field, qb, update) => {
+  const handleChange = (ev) => {
+    const target = ev.target;
+    rule.value = target.value === "" ? void 0 : target.value;
+    target.setCustomValidity?.(field.validator?.(rule) ?? "");
+    update();
+  };
+  return html`
+    <flow-ui-input
+      class="query-builder__rule-value-control"
+      value=${rule.value ?? ""}
+      size=${qb.size}
+      ?disabled=${!rule.enabled}
+      @flow-ui-change=${handleChange}
+    ></flow-ui-input>
+  `;
+};
+const defaultNumberTemplate = (rule, field, qb, update) => {
+  const handleChange = (ev) => {
+    const target = ev.target;
+    rule.value = target.value === "" ? void 0 : +target.value;
+    target.setCustomValidity?.(field.validator?.(rule) ?? "");
+    update();
+  };
+  return html`
+    <flow-ui-input
+      class="query-builder__rule-value-control"
+      type="number"
+      value=${rule.value ?? ""}
+      size=${qb.size}
+      min=${ifDefined(field.min)}
+      max=${ifDefined(field.max)}
+      step=${ifDefined(field.step)}
+      ?disabled=${!rule.enabled}
+      @flow-ui-change=${handleChange}
+    ></flow-ui-input>
+  `;
+};
+const defaultDateTimeTemplate = (rule, field, qb, update) => {
+  const handleChange = (ev) => {
+    const target = ev.target;
+    rule.value = target.value === "" ? void 0 : target.value;
+    target.setCustomValidity(field.validator?.(rule) ?? "");
+    update();
+  };
+  const format = getDefault(field.dateFormat, "F");
+  const timezone = getDefault(field.timezone);
+  const locale = getDefault(field.locale);
+  return html`
+    <flow-ui-date-time-picker
+      class="query-builder__rule-value-control"
+      value=${rule.value ?? ""}
+      size=${qb.size}
+      placeholder="Enter a date/time"
+      format=${ifDefined(format)}
+      timezone=${ifDefined(timezone)}
+      locale=${ifDefined(locale)}
+      ?disabled=${!rule.enabled}
+      @flow-ui-change=${handleChange}
+    ></flow-ui-date-time-picker>
+  `;
+};
+const defaultDateTemplate = (rule, field, qb, update) => {
+  const handleChange = (ev) => {
+    const target = ev.target;
+    rule.value = target.value === "" ? void 0 : target.value;
+    target.setCustomValidity(field.validator?.(rule) ?? "");
+    update();
+  };
+  const format = getDefault(field.dateFormat, "D");
+  const timezone = getDefault(field.timezone);
+  const locale = getDefault(field.locale);
+  return html`
+    <flow-ui-date-time-picker
+      class="query-builder__rule-value-control"
+      value=${rule.value ?? ""}
+      display-mode="date"
+      size=${qb.size}
+      placeholder="Enter a date"
+      format=${ifDefined(format)}
+      timezone=${ifDefined(timezone)}
+      locale=${ifDefined(locale)}
+      ?disabled=${!rule.enabled}
+      @flow-ui-change=${handleChange}
+    ></flow-ui-date-time-picker>
+  `;
+};
+const defaultTimeTemplate = (rule, field, qb, update) => {
+  const handleChange = (ev) => {
+    const target = ev.target;
+    rule.value = target.value === "" ? void 0 : target.value;
+    target.setCustomValidity(field.validator?.(rule) ?? "");
+    update();
+  };
+  const format = getDefault(field.dateFormat, "TTT");
+  const timezone = getDefault(field.timezone);
+  const locale = getDefault(field.locale);
+  return html`
+    <flow-ui-date-time-picker
+      class="query-builder__rule-value-control"
+      value=${rule.value ?? ""}
+      display-mode="time"
+      size=${qb.size}
+      placeholder="Enter a time"
+      format=${ifDefined(format)}
+      timezone=${ifDefined(timezone)}
+      locale=${ifDefined(locale)}
+      ?disabled=${!rule.enabled}
+      @flow-ui-change=${handleChange}
+    ></flow-ui-date-time-picker>
+  `;
+};
+const defaultSelectTemplate = (rule, field, qb, update) => {
+  const isMulti = rule.operator === "in" || rule.operator === "!in";
+  const handleChange = (ev) => {
+    const target = ev.target;
+    rule.value = target.value;
+    target.setCustomValidity(field.validator?.(rule) ?? "");
+    update();
+  };
+  return html`
+    <flow-ui-select
+      class="query-builder__rule-value-control"
+      .value=${ensureArray(rule.value ?? "")}
+      size=${qb.size}
+      ?multiple=${isMulti}
+      hoist
+      ?disabled=${!rule.enabled}
+      @flow-ui-change=${handleChange}
+    >
+      ${field.options?.map((option) => {
+    return html`
+          <flow-ui-option value=${option.value}>${option.name}</flow-ui-option>
+        `;
+  })}
+    </flow-ui-select>
+  `;
+};
+
+export { defaultDateTemplate, defaultDateTimeTemplate, defaultNumberTemplate, defaultSelectTemplate, defaultStringTemplate, defaultTimeTemplate };

package/dist/components/query-builder/helpers.mjs

@@ -0,0 +1,42 @@
+import cloneDeep from 'clone-deep';
+import { isObjectFull, isDefined } from '../../internal/type-checks.mjs';
+
+function filterRuleSet(ruleset, options) {
+  return transformRuleSet(ruleset, (rule) => {
+    if (isDefined(rule.field)) {
+      if (isDefined(options.excludeFields) && options.excludeFields.includes(rule.field)) {
+        return;
+      }
+      if (isDefined(options.includeFields) && !options.includeFields.includes(rule.field)) {
+        return;
+      }
+      return rule;
+    }
+  });
+}
+function renameRuleSetFields(ruleset, replacements) {
+  return transformRuleSet(ruleset, (rule) => {
+    if (isDefined(rule.field)) {
+      rule.field = rule.field in replacements ? replacements[rule.field] : rule.field;
+      return rule;
+    }
+  });
+}
+function transformRuleSet(ruleSet, transformFn, clone = true) {
+  if (clone) {
+    ruleSet = cloneDeep(ruleSet);
+  }
+  ruleSet.rules = ruleSet.rules.map((r) => {
+    if (isRule(r)) {
+      return transformFn(r);
+    } else if (isRuleSet(r)) {
+      return transformRuleSet(r, transformFn, false);
+    }
+  }).filter(isRuleOrRuleset);
+  return ruleSet;
+}
+const isRule = (r) => isObjectFull(r) && "field" in r;
+const isRuleSet = (r) => isObjectFull(r) && "rules" in r;
+const isRuleOrRuleset = (r) => isRule(r) || isRuleSet(r);
+
+export { filterRuleSet, isRule, isRuleOrRuleset, isRuleSet, renameRuleSetFields, transformRuleSet };