@emuanalytics/flow-rdf-ui 4.0.5 → 4.0.7

package/dist/internal/datetime.mjs

@@ -0,0 +1,65 @@
+function _roundDateTime(direction, dateTime, unit, precision) {
+  const units = {
+    hour: {
+      maxValue: 24
+    },
+    minute: {
+      maxValue: 60
+    },
+    second: {
+      maxValue: 60
+    },
+    millisecond: {
+      maxValue: 1e3
+    }
+  };
+  let maxValue = Number.MAX_SAFE_INTEGER;
+  let value = 0;
+  let rounded = false;
+  let subRatio = 1;
+  Object.keys(units).forEach((k) => {
+    if (k === unit) {
+      value = dateTime.get(k);
+      maxValue = units[k].maxValue;
+      rounded = true;
+    } else if (rounded) {
+      subRatio *= units[k].maxValue;
+      value += dateTime.get(k) / subRatio;
+      dateTime = dateTime.set({ [k]: 0 });
+    }
+  });
+  value = Math[direction](value / precision) * precision;
+  value = Math.min(value, maxValue);
+  dateTime = dateTime.set({ [unit]: value });
+  return dateTime;
+}
+const ceilDateTime = (dateTime, unit, precision) => _roundDateTime("ceil", dateTime, unit, precision);
+const floorDateTime = (dateTime, unit, precision) => _roundDateTime("floor", dateTime, unit, precision);
+const durationRegex = /(-?\d*\.?\d+(?:e[-+]?\d+)?)\s*([a-zμ]*)/i;
+const UNIT_MULTIPLIERS = {
+  milliseconds: 1,
+  millisecond: 1,
+  second: 1e3,
+  seconds: 1e3,
+  minute: 60 * 1e3,
+  minutes: 60 * 1e3,
+  hour: 60 * 60 * 1e3,
+  hours: 60 * 60 * 1e3,
+  day: 24 * 60 * 60 * 1e3,
+  days: 24 * 60 * 60 * 1e3
+};
+function parseDuration(str) {
+  const match = durationRegex.exec(str);
+  if (!match) {
+    return;
+  }
+  const value = parseFloat(match[1]);
+  const unit = match[2].toLowerCase().replace(/s$/, "");
+  if (unit in UNIT_MULTIPLIERS) {
+    return {
+      [unit]: value
+    };
+  }
+}
+
+export { ceilDateTime, floorDateTime, parseDuration };

package/dist/internal/debounce.mjs

@@ -0,0 +1,14 @@
+const TIMER_ID_KEY = Symbol();
+const debounce = (delay) => {
+  return (_target, _propertyKey, descriptor) => {
+    const fn = descriptor.value;
+    descriptor.value = function(...args) {
+      clearTimeout(this[TIMER_ID_KEY]);
+      this[TIMER_ID_KEY] = window.setTimeout(() => {
+        fn.apply(this, args);
+      }, delay);
+    };
+  };
+};
+
+export { debounce };

package/dist/internal/default-value.mjs

@@ -0,0 +1,21 @@
+import { defaultConverter } from 'lit';
+
+const defaultValue = (propertyName = "value") => (proto, key) => {
+  const ctor = proto.constructor;
+  const attributeChangedCallback = ctor.prototype.attributeChangedCallback;
+  ctor.prototype.attributeChangedCallback = function(name, old, value) {
+    const options = ctor.getPropertyOptions(propertyName);
+    const attributeName = typeof options.attribute === "string" ? options.attribute : propertyName;
+    if (name === attributeName) {
+      const converter = options.converter || defaultConverter;
+      const fromAttribute = typeof converter === "function" ? converter : converter?.fromAttribute ?? defaultConverter.fromAttribute;
+      const newValue = fromAttribute(value, options.type);
+      if (this[propertyName] !== newValue) {
+        this[key] = newValue;
+      }
+    }
+    attributeChangedCallback.call(this, name, old, value);
+  };
+};
+
+export { defaultValue };

package/dist/internal/drag.mjs

@@ -0,0 +1,30 @@
+function drag(container, options) {
+  function move(pointerEvent) {
+    const dims = container.getBoundingClientRect();
+    const defaultView = container.ownerDocument.defaultView;
+    const offsetX = dims.left + defaultView.pageXOffset;
+    const offsetY = dims.top + defaultView.pageYOffset;
+    const x = pointerEvent.pageX - offsetX;
+    const y = pointerEvent.pageY - offsetY;
+    if (options?.onMove) {
+      options.onMove(x, y);
+    }
+  }
+  function stop() {
+    document.removeEventListener("pointermove", move);
+    document.removeEventListener("pointerup", stop);
+    if (options?.onStop) {
+      options.onStop();
+    }
+  }
+  document.addEventListener("pointermove", move, { passive: true });
+  document.addEventListener("pointerup", stop);
+  if (options?.initialEvent instanceof PointerEvent) {
+    move(options.initialEvent);
+  }
+  return () => {
+    stop();
+  };
+}
+
+export { drag };

package/dist/internal/ensure-array.mjs

@@ -0,0 +1,16 @@
+function ensureArray(a, ..._rest) {
+  if (arguments.length === 0) {
+    return [];
+  }
+  if (arguments.length === 1) {
+    if (a === void 0 || a === null) {
+      return [];
+    }
+    if (Array.isArray(a)) {
+      return a;
+    }
+  }
+  return Array.prototype.slice.call(arguments);
+}
+
+export { ensureArray };

package/dist/internal/event.mjs

@@ -0,0 +1,13 @@
+function waitForEvent(el, eventName) {
+  return new Promise((resolve) => {
+    function done(event) {
+      if (event.target === el) {
+        el.removeEventListener(eventName, done);
+        resolve();
+      }
+    }
+    el.addEventListener(eventName, done);
+  });
+}
+
+export { waitForEvent };

package/dist/internal/flow-ui-rdf-element.mjs

@@ -0,0 +1,61 @@
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { watch } from './watch.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 FlowRdfElement extends LitElement {
+  emit(name, options) {
+    const event = new CustomEvent(name, {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail: {},
+      ...options
+    });
+    this.dispatchEvent(event);
+    return event;
+  }
+  static define(name, elementConstructor = this, options = {}) {
+    const currentlyRegisteredConstructor = customElements.get(name);
+    if (!currentlyRegisteredConstructor) {
+      customElements.define(name, class extends elementConstructor {
+      }, options);
+      return;
+    }
+  }
+}
+__decorateClass([
+  property()
+], FlowRdfElement.prototype, "dir", 2);
+__decorateClass([
+  property()
+], FlowRdfElement.prototype, "lang", 2);
+const _FlowRdfFormControl = class _FlowRdfFormControl extends FlowRdfElement {
+  handleClassChange() {
+    this.classList.add(_FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.classList.add(_FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
+  }
+};
+_FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS = "flow-ui-form-control";
+__decorateClass([
+  property({ reflect: true })
+], _FlowRdfFormControl.prototype, "class", 2);
+__decorateClass([
+  watch("class")
+], _FlowRdfFormControl.prototype, "handleClassChange", 1);
+let FlowRdfFormControl = _FlowRdfFormControl;
+
+export { FlowRdfFormControl, FlowRdfElement as default };

package/dist/internal/form.mjs

@@ -0,0 +1,264 @@
+const formCollections = /* @__PURE__ */ new WeakMap();
+const reportValidityOverloads = /* @__PURE__ */ new WeakMap();
+const userInteractedControls = /* @__PURE__ */ new WeakSet();
+const interactions = /* @__PURE__ */ new WeakMap();
+class FormControlController {
+  constructor(host, options) {
+    (this.host = host).addController(this);
+    this.options = {
+      form: (input) => {
+        if (input.hasAttribute("form") && input.getAttribute("form") !== "") {
+          const root = input.getRootNode();
+          const formId = input.getAttribute("form");
+          if (formId) {
+            return root.getElementById(formId);
+          }
+        }
+        return input.closest("form");
+      },
+      name: (input) => input.name,
+      value: (input) => input.value,
+      defaultValue: (input) => input.defaultValue,
+      disabled: (input) => input.disabled ?? false,
+      reportValidity: (input) => typeof input.reportValidity === "function" ? input.reportValidity() : true,
+      setValue: (input, value) => input.value = value,
+      assumeInteractionOn: ["flow-ui-input"],
+      ...options
+    };
+    this.handleFormData = this.handleFormData.bind(this);
+    this.handleFormSubmit = this.handleFormSubmit.bind(this);
+    this.handleFormReset = this.handleFormReset.bind(this);
+    this.reportFormValidity = this.reportFormValidity.bind(this);
+    this.handleInteraction = this.handleInteraction.bind(this);
+  }
+  hostConnected() {
+    const form = this.options.form(this.host);
+    if (form) {
+      this.attachForm(form);
+    }
+    interactions.set(this.host, []);
+    this.options.assumeInteractionOn.forEach((event) => {
+      this.host.addEventListener(event, this.handleInteraction);
+    });
+  }
+  hostDisconnected() {
+    this.detachForm();
+    interactions.delete(this.host);
+    this.options.assumeInteractionOn.forEach((event) => {
+      this.host.removeEventListener(event, this.handleInteraction);
+    });
+  }
+  hostUpdated() {
+    const form = this.options.form(this.host);
+    if (!form) {
+      this.detachForm();
+    }
+    if (form && this.form !== form) {
+      this.detachForm();
+      this.attachForm(form);
+    }
+    if (this.host.hasUpdated) {
+      this.setValidity(this.host.validity.valid);
+    }
+  }
+  attachForm(form) {
+    if (form) {
+      this.form = form;
+      if (formCollections.has(this.form)) {
+        formCollections.get(this.form).add(this.host);
+      } else {
+        formCollections.set(this.form, /* @__PURE__ */ new Set([this.host]));
+      }
+      this.form.addEventListener("formdata", this.handleFormData);
+      this.form.addEventListener("submit", this.handleFormSubmit);
+      this.form.addEventListener("reset", this.handleFormReset);
+      if (!reportValidityOverloads.has(this.form)) {
+        reportValidityOverloads.set(this.form, this.form.reportValidity);
+        this.form.reportValidity = () => this.reportFormValidity();
+      }
+    } else {
+      this.form = void 0;
+    }
+  }
+  detachForm() {
+    if (this.form) {
+      formCollections.get(this.form)?.delete(this.host);
+      this.form.removeEventListener("formdata", this.handleFormData);
+      this.form.removeEventListener("submit", this.handleFormSubmit);
+      this.form.removeEventListener("reset", this.handleFormReset);
+      if (reportValidityOverloads.has(this.form)) {
+        this.form.reportValidity = reportValidityOverloads.get(this.form);
+        reportValidityOverloads.delete(this.form);
+      }
+    }
+    this.form = void 0;
+  }
+  handleFormData(event) {
+    const disabled = this.options.disabled(this.host);
+    const name = this.options.name(this.host);
+    const value = this.options.value(this.host);
+    const isButton = this.host.tagName.toLowerCase() === "flow-ui-button";
+    if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          event.formData.append(name, val.toString());
+        });
+      } else {
+        event.formData.append(name, value.toString());
+      }
+    }
+  }
+  handleFormSubmit(event) {
+    const disabled = this.options.disabled(this.host);
+    const reportValidity = this.options.reportValidity;
+    if (this.form && !this.form.noValidate) {
+      formCollections.get(this.form)?.forEach((control) => {
+        this.setUserInteracted(control, true);
+      });
+    }
+    if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+  handleFormReset() {
+    this.options.setValue(this.host, this.options.defaultValue(this.host));
+    this.setUserInteracted(this.host, false);
+    interactions.set(this.host, []);
+  }
+  handleInteraction(event) {
+    const emittedEvents = interactions.get(this.host);
+    if (!emittedEvents.includes(event.type)) {
+      emittedEvents.push(event.type);
+    }
+    if (emittedEvents.length === this.options.assumeInteractionOn.length) {
+      this.setUserInteracted(this.host, true);
+    }
+  }
+  reportFormValidity() {
+    if (this.form && !this.form.noValidate) {
+      const elements = this.form.querySelectorAll("*");
+      for (const element of elements) {
+        if (typeof element.reportValidity === "function") {
+          if (!element.reportValidity()) {
+            return false;
+          }
+        }
+      }
+    }
+    return true;
+  }
+  setUserInteracted(el, hasInteracted) {
+    if (hasInteracted) {
+      userInteractedControls.add(el);
+    } else {
+      userInteractedControls.delete(el);
+    }
+    el.requestUpdate();
+  }
+  doAction(type, submitter) {
+    if (this.form) {
+      const button = document.createElement("button");
+      button.type = type;
+      button.style.position = "absolute";
+      button.style.width = "0";
+      button.style.height = "0";
+      button.style.clipPath = "inset(50%)";
+      button.style.overflow = "hidden";
+      button.style.whiteSpace = "nowrap";
+      if (submitter) {
+        button.name = submitter.name;
+        button.value = submitter.value;
+        ["formaction", "formenctype", "formmethod", "formnovalidate", "formtarget"].forEach((attr) => {
+          if (submitter.hasAttribute(attr)) {
+            button.setAttribute(attr, submitter.getAttribute(attr));
+          }
+        });
+      }
+      this.form.append(button);
+      button.click();
+      button.remove();
+    }
+  }
+  /** Returns the associated `<form>` element, if one exists. */
+  getForm() {
+    return this.form ?? null;
+  }
+  /** Resets the form, restoring all the control to their default value */
+  reset(submitter) {
+    this.doAction("reset", submitter);
+  }
+  /** Submits the form, triggering validation and form data injection. */
+  submit(submitter) {
+    this.doAction("submit", submitter);
+  }
+  /**
+   * Synchronously sets the form control's validity. Call this when you know the future validity but need to update
+   * the host element immediately, i.e. before Lit updates the component in the next update.
+   */
+  setValidity(isValid) {
+    const host = this.host;
+    const hasInteracted = Boolean(userInteractedControls.has(host));
+    const required = Boolean(host.required);
+    host.toggleAttribute("data-required", required);
+    host.toggleAttribute("data-optional", !required);
+    host.toggleAttribute("data-invalid", !isValid);
+    host.toggleAttribute("data-valid", isValid);
+    host.toggleAttribute("data-user-invalid", !isValid && hasInteracted);
+    host.toggleAttribute("data-user-valid", isValid && hasInteracted);
+  }
+  /**
+   * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
+   * that affects constraint validation changes so the component receives the correct validity states.
+   */
+  updateValidity() {
+    const host = this.host;
+    this.setValidity(host.validity.valid);
+  }
+  /**
+   * Dispatches a non-bubbling, cancelable custom event of type `flow-ui-invalid`.
+   * If the `flow-ui-invalid` event will be cancelled then the original `invalid`
+   * event (which may have been passed as argument) will also be cancelled.
+   * If no original `invalid` event has been passed then the `flow-ui-invalid`
+   * event will be cancelled before being dispatched.
+   */
+  emitInvalidEvent(originalInvalidEvent) {
+    const slInvalidEvent = new CustomEvent("flow-ui-invalid", {
+      bubbles: false,
+      composed: false,
+      cancelable: true,
+      detail: {}
+    });
+    if (!originalInvalidEvent) {
+      slInvalidEvent.preventDefault();
+    }
+    if (!this.host.dispatchEvent(slInvalidEvent)) {
+      originalInvalidEvent?.preventDefault();
+    }
+  }
+}
+const validValidityState = Object.freeze({
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valid: true,
+  valueMissing: false
+});
+const valueMissingValidityState = Object.freeze({
+  ...validValidityState,
+  valid: false,
+  valueMissing: true
+});
+const customErrorValidityState = Object.freeze({
+  ...validValidityState,
+  valid: false,
+  customError: true
+});
+
+export { FormControlController, customErrorValidityState, formCollections, validValidityState, valueMissingValidityState };

package/dist/internal/localize.mjs

@@ -0,0 +1,124 @@
+import { isDefined } from './type-checks.mjs';
+
+const connectedElements = /* @__PURE__ */ new Set();
+const translations = /* @__PURE__ */ new Map();
+let fallback;
+let documentDirection = "ltr";
+let documentLanguage = "en";
+function registerTranslation(...translation) {
+  translation.map((t) => {
+    const code = t.$code.toLowerCase();
+    if (translations.has(code)) {
+      translations.set(code, { ...translations.get(code), ...t });
+    } else {
+      translations.set(code, t);
+    }
+    if (!fallback) {
+      fallback = t;
+      const isClient = isDefined(MutationObserver) && isDefined(document) && isDefined(document.documentElement);
+      if (isClient) {
+        const documentElementObserver = new MutationObserver(update);
+        documentDirection = document.documentElement.dir || "ltr";
+        documentLanguage = document.documentElement.lang || navigator.language;
+        documentElementObserver.observe(document.documentElement, {
+          attributes: true,
+          attributeFilter: ["dir", "lang"]
+        });
+      }
+    }
+  });
+  update();
+}
+function update() {
+  const isClient = isDefined(document) && isDefined(document.documentElement);
+  if (isClient) {
+    documentDirection = document.documentElement.dir || "ltr";
+    documentLanguage = document.documentElement.lang || navigator.language;
+  }
+  [...connectedElements.keys()].map((el) => {
+    if (typeof el.requestUpdate === "function") {
+      el.requestUpdate();
+    }
+  });
+}
+let LocalizeController$1 = class LocalizeController {
+  constructor(host) {
+    this.host = host;
+    this.host.addController(this);
+  }
+  hostConnected() {
+    connectedElements.add(this.host);
+  }
+  hostDisconnected() {
+    connectedElements.delete(this.host);
+  }
+  /**
+   * Gets the host element's directionality as determined by the `dir` attribute. The return value is transformed to
+   * lowercase.
+   */
+  dir() {
+    return `${this.host.dir || documentDirection}`.toLowerCase();
+  }
+  /**
+   * Gets the host element's language as determined by the `lang` attribute. The return value is transformed to
+   * lowercase.
+   */
+  lang() {
+    return `${this.host.lang || documentLanguage}`.toLowerCase();
+  }
+  getTranslationData(lang) {
+    const locale = new Intl.Locale(lang.replace(/_/g, "-"));
+    const language = locale?.language.toLowerCase();
+    const region = locale?.region?.toLowerCase() ?? "";
+    const primary = translations.get(`${language}-${region}`);
+    const secondary = translations.get(language);
+    return { locale, language, region, primary, secondary };
+  }
+  /** Determines if the specified term exists, optionally checking the fallback translation. */
+  exists(key, options) {
+    const { primary, secondary } = this.getTranslationData(options.lang ?? this.lang());
+    options = {
+      includeFallback: false,
+      ...options
+    };
+    if (primary && primary[key] || secondary && secondary[key] || options.includeFallback && fallback && fallback[key]) {
+      return true;
+    }
+    return false;
+  }
+  /** Outputs a translated term. */
+  term(key, ...args) {
+    const { primary, secondary } = this.getTranslationData(this.lang());
+    let term;
+    if (primary && primary[key]) {
+      term = primary[key];
+    } else if (secondary && secondary[key]) {
+      term = secondary[key];
+    } else if (fallback && fallback[key]) {
+      term = fallback[key];
+    } else {
+      console.error(`No translation found for: ${String(key)}`);
+      return String(key);
+    }
+    if (typeof term === "function") {
+      return term(...args);
+    }
+    return term;
+  }
+  /** Outputs a localized date in the specified format. */
+  date(dateToFormat, options) {
+    dateToFormat = new Date(dateToFormat);
+    return new Intl.DateTimeFormat(this.lang(), options).format(dateToFormat);
+  }
+  /** Outputs a localized number in the specified format. */
+  number(numberToFormat, options) {
+    numberToFormat = Number(numberToFormat);
+    return isNaN(numberToFormat) ? "" : new Intl.NumberFormat(this.lang(), options).format(numberToFormat);
+  }
+  /** Outputs a localized time in relative format. */
+  relativeTime(value, unit, options) {
+    return new Intl.RelativeTimeFormat(this.lang(), options).format(value, unit);
+  }
+};
+
+export { LocalizeController$1 as LocalizeController, registerTranslation, update };

package/dist/internal/math.mjs

@@ -0,0 +1,12 @@
+function clamp(value, min, max) {
+  const noNegativeZero = (n) => Object.is(n, -0) ? 0 : n;
+  if (value < min) {
+    return noNegativeZero(min);
+  }
+  if (value > max) {
+    return noNegativeZero(max);
+  }
+  return noNegativeZero(value);
+}
+
+export { clamp };

package/dist/internal/modal.mjs

@@ -0,0 +1,52 @@
+import { getTabbableBoundary } from './tabbable.mjs';
+
+let activeModals = [];
+class Modal {
+  constructor(element) {
+    this.tabDirection = "forward";
+    this.element = element;
+    this.handleFocusIn = this.handleFocusIn.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
+  }
+  activate() {
+    activeModals.push(this.element);
+    document.addEventListener("focusin", this.handleFocusIn);
+    document.addEventListener("keydown", this.handleKeyDown);
+    document.addEventListener("keyup", this.handleKeyUp);
+  }
+  deactivate() {
+    activeModals = activeModals.filter((modal) => modal !== this.element);
+    document.removeEventListener("focusin", this.handleFocusIn);
+    document.removeEventListener("keydown", this.handleKeyDown);
+    document.removeEventListener("keyup", this.handleKeyUp);
+  }
+  isActive() {
+    return activeModals[activeModals.length - 1] === this.element;
+  }
+  checkFocus() {
+    if (this.isActive()) {
+      if (!this.element.matches(":focus-within")) {
+        const { start, end } = getTabbableBoundary(this.element);
+        const target = this.tabDirection === "forward" ? start : end;
+        if (typeof target?.focus === "function") {
+          target.focus({ preventScroll: true });
+        }
+      }
+    }
+  }
+  handleFocusIn() {
+    this.checkFocus();
+  }
+  handleKeyDown(event) {
+    if (event.key === "Tab" && event.shiftKey) {
+      this.tabDirection = "backward";
+      requestAnimationFrame(() => this.checkFocus());
+    }
+  }
+  handleKeyUp() {
+    this.tabDirection = "forward";
+  }
+}
+
+export { Modal as default };

package/dist/internal/offset.mjs

@@ -0,0 +1,8 @@
+function getOffset(element, parent) {
+  return {
+    top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),
+    left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left)
+  };
+}
+
+export { getOffset };