@emuanalytics/flow-rdf-ui 4.0.0-preview.8 → 4.0.0

package/dist/index.cjs

@@ -1,5 +1,9 @@
 'use strict';
 
+const chart_js = require('chart.js');
+const chartjsChartMatrix = require('chartjs-chart-matrix');
+const AnnotationPlugin = require('chartjs-plugin-annotation');
+const d3Scale = require('d3-scale');
 const lit = require('lit');
 const decorators_js = require('lit/decorators.js');
 const classMap_js = require('lit/directives/class-map.js');
@@ -8,11 +12,7 @@ const staticHtml_js = require('lit/static-html.js');
 const luxon = require('luxon');
 const map_js = require('lit/directives/map.js');
 const range_js = require('lit/directives/range.js');
-const chart_js = require('chart.js');
 const ref_js = require('lit/directives/ref.js');
-const chartjsChartMatrix = require('chartjs-chart-matrix');
-const AnnotationPlugin = require('chartjs-plugin-annotation');
-const d3Scale = require('d3-scale');
 const live_js = require('lit/directives/live.js');
 const tinycolor = require('@ctrl/tinycolor');
 const styleMap_js = require('lit/directives/style-map.js');
@@ -901,30 +901,6 @@ function getEasingNames() {
   return Object.entries(easings).map(([name]) => name);
 }
 
-let basePath = "";
-function setBasePath(path) {
-  basePath = path;
-}
-function getBasePath(subpath = "") {
-  if (!basePath) {
-    const scripts = [...document.getElementsByTagName("script")];
-    const configScript = scripts.find((script) => script.hasAttribute("data-flow-ui-rdf-ui"));
-    if (configScript) {
-      setBasePath(configScript.getAttribute("data-flow-ui-rdf-ui"));
-    } else {
-      const fallbackScript = scripts.find((s) => {
-        return /flow-ui-rdf-ui(\.min)?\.js($|\?)/.test(s.src) || /flow-ui-rdf-autoloader(\.min)?\.js($|\?)/.test(s.src);
-      });
-      let path = "";
-      if (fallbackScript) {
-        path = fallbackScript.getAttribute("src");
-      }
-      setBasePath(path.split("/").slice(0, -1).join("/"));
-    }
-  }
-  return basePath.replace(/\/$/, "") + (subpath ? `/${subpath.replace(/^\//, "")}` : ``);
-}
-
 const isUndefined = (val) => typeof val === "undefined";
 const isNull = (val) => val === null;
 const isNil = (val) => isUndefined(val) || isNull(val);
@@ -1475,8 +1451,8 @@ function unregisterIconLibrary(name) {
 function setDefaultLocale(locale) {
   luxon.Settings.defaultLocale = locale;
 }
-function setDefaultTimeZone(timeZone) {
-  luxon.Settings.defaultZone = timeZone;
+function setDefaultTimeZone(timezone) {
+  luxon.Settings.defaultZone = timezone;
 }
 
 function filterRuleSet(ruleset, options) {
@@ -1623,7 +1599,7 @@ const converter$2 = (ruleset, config, options) => {
 };
 const converter$3 = converter$2;
 
-function ensureArray(a, ...rest) {
+function ensureArray(a, ..._rest) {
   if (arguments.length === 0) {
     return [];
   }
@@ -1963,7 +1939,6 @@ function getAnimation(el, animationName, options) {
 
 const connectedElements = /* @__PURE__ */ new Set();
 const translations = /* @__PURE__ */ new Map();
-const isClient = isDefined(MutationObserver) && isDefined(document) && isDefined(document.documentElement);
 let fallback;
 let documentDirection = "ltr";
 let documentLanguage = "en";
@@ -1977,8 +1952,8 @@ function registerTranslation(...translation) {
     }
     if (!fallback) {
       fallback = t;
-      const isClient2 = isDefined(MutationObserver) && isDefined(document) && isDefined(document.documentElement);
-      if (isClient2) {
+      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;
@@ -1992,6 +1967,7 @@ function registerTranslation(...translation) {
   update();
 }
 function update() {
+  const isClient = isDefined(document) && isDefined(document.documentElement);
   if (isClient) {
     documentDirection = document.documentElement.dir || "ltr";
     documentLanguage = document.documentElement.lang || navigator.language;
@@ -2443,6 +2419,7 @@ class FlowUiPopup extends FlowRdfElement {
     super.disconnectedCallback();
     this.stop();
   }
+  /** @internal */
   async updated(changedProps) {
     super.updated(changedProps);
     if (changedProps.has("active")) {
@@ -3448,7 +3425,7 @@ var __decorateClass$U = (decorators, target, key, kind) => {
     __defProp$U(target, key, result);
   return result;
 };
-const toastStack = Object.assign(document.createElement("div"), { className: "flow-ui-toast-stack" });
+let toastStack;
 class FlowUiAlert extends FlowRdfElement {
   constructor() {
     super(...arguments);
@@ -3525,6 +3502,9 @@ class FlowUiAlert extends FlowRdfElement {
    */
   async toast() {
     return new Promise((resolve) => {
+      if (!toastStack) {
+        toastStack = Object.assign(document.createElement("div"), { className: "flow-ui-toast-stack" });
+      }
       if (toastStack.parentElement === null) {
         document.body.append(toastStack);
       }
@@ -3697,7 +3677,7 @@ class FlowUiAnimation extends FlowRdfElement {
     }
     this.destroyAnimation();
     this.animation = element.animate(keyframes, {
-      delay: this.delay,
+      delay: +this.delay,
       direction: this.direction,
       duration: this.duration,
       easing,
@@ -4008,6 +3988,11 @@ const styles$U = lit.css`
     color: var(--flow-ui-color-neutral-0);
   }
 
+  .badge--secondary {
+    background-color: var(--flow-ui-color-secondary-500);
+    color: var(--flow-ui-color-neutral-0);
+  }
+
   .badge--success {
     background-color: var(--flow-ui-color-success-600);
     color: var(--flow-ui-color-neutral-0);
@@ -4042,6 +4027,10 @@ const styles$U = lit.css`
     --pulse-color: var(--flow-ui-color-primary-500);
   }
 
+  .badge--pulse.badge--secondary {
+    --pulse-color: var(--flow-ui-color-secondary-500);
+  }
+
   .badge--pulse.badge--success {
     --pulse-color: var(--flow-ui-color-success-600);
   }
@@ -4101,6 +4090,7 @@ class FlowUiBadge extends FlowRdfElement {
         class=${classMap_js.classMap({
       badge: true,
       "badge--primary": this.variant === "primary",
+      "badge--secondary": this.variant === "secondary",
       "badge--success": this.variant === "success",
       "badge--neutral": this.variant === "neutral",
       "badge--warning": this.variant === "warning",
@@ -6373,6 +6363,7 @@ const styles$N = lit.css`
 `;
 
 class FlowUiCarouselItem extends FlowRdfElement {
+  /** @internal */
   static isCarouselItem(node) {
     return node instanceof Element && node.getAttribute("aria-roledescription") === "slide";
   }
@@ -8042,9 +8033,6 @@ __decorateClass$H([
 __decorateClass$H([
   decorators_js.query(".dialog-info")
 ], FlowUiColorMapper.prototype, "infoDialog", 2);
-__decorateClass$H([
-  decorators_js.property()
-], FlowUiColorMapper.prototype, "field", 2);
 __decorateClass$H([
   decorators_js.property({ type: Object })
 ], FlowUiColorMapper.prototype, "options", 2);
@@ -8285,15 +8273,18 @@ class FlowUiDropdown extends FlowRdfElement {
     this.removeOpenListeners();
     this.hide();
   }
+  /** @internal */
   focusOnTrigger() {
     const trigger = this.trigger.assignedElements({ flatten: true })[0];
     if (typeof trigger?.focus === "function") {
       trigger.focus();
     }
   }
+  /** @internal */
   getMenu() {
     return this.panel.assignedElements({ flatten: true }).find((el) => el.tagName.toLowerCase() === "flow-ui-menu");
   }
+  /** @internal */
   handleTriggerClick() {
     if (this.open) {
       this.hide();
@@ -8302,6 +8293,7 @@ class FlowUiDropdown extends FlowRdfElement {
       this.focusOnTrigger();
     }
   }
+  /** @internal */
   async handleTriggerKeyDown(event) {
     if ([" ", "Enter"].includes(event.key)) {
       event.preventDefault();
@@ -8334,11 +8326,13 @@ class FlowUiDropdown extends FlowRdfElement {
       }
     }
   }
+  /** @internal */
   handleTriggerKeyUp(event) {
     if (event.key === " ") {
       event.preventDefault();
     }
   }
+  /** @internal */
   handleTriggerSlotChange() {
     this.updateAccessibleTrigger();
   }
@@ -8352,6 +8346,7 @@ class FlowUiDropdown extends FlowRdfElement {
   //
   // To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
   //
+  /** @internal */
   updateAccessibleTrigger() {
     const assignedElements = this.trigger.assignedElements({ flatten: true });
     const accessibleTrigger = assignedElements.find((el) => getTabbableBoundary(el).start);
@@ -8392,6 +8387,7 @@ class FlowUiDropdown extends FlowRdfElement {
   reposition() {
     this.popup.reposition();
   }
+  /** @internal */
   addOpenListeners() {
     this.panel.addEventListener("flow-ui-select", this.handlePanelSelect);
     if ("CloseWatcher" in window) {
@@ -8407,6 +8403,7 @@ class FlowUiDropdown extends FlowRdfElement {
     document.addEventListener("keydown", this.handleDocumentKeyDown);
     document.addEventListener("mousedown", this.handleDocumentMouseDown);
   }
+  /** @internal */
   removeOpenListeners() {
     if (this.panel) {
       this.panel.removeEventListener("flow-ui-select", this.handlePanelSelect);
@@ -9814,7 +9811,7 @@ var __decorateClass$E = (decorators, target, key, kind) => {
     __defProp$E(target, key, result);
   return result;
 };
-const hasEyeDropper = "EyeDropper" in window;
+const hasEyeDropper = typeof window !== "undefined" && "EyeDropper" in window;
 class FlowUiColorPicker extends FlowRdfElement {
   constructor() {
     super(...arguments);
@@ -10835,23 +10832,28 @@ class FlowUiColorStop extends FlowRdfElement {
     this.placeholder = boolean(this.placeholder, true);
     this.required = boolean(this.required, true);
   }
-  /* Form Support */
+  /** Gets the validity state object. */
   get validity() {
     return this.validate() ? validValidityState : customErrorValidityState;
   }
+  /** Gets the validation message. */
   get validationMessage() {
     return this.validate() ? "" : "Invalid regular expression";
   }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
   checkValidity() {
     return this.validate();
   }
+  /** Gets the associated form, if one exists. */
   getForm() {
     return this.formControlController.getForm();
   }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
     this.input.setCustomValidity(this.validationMessage);
     return this.input.reportValidity();
   }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
   setCustomValidity(message) {
     this.input.setCustomValidity(message);
     this.formControlController.updateValidity();
@@ -11741,7 +11743,7 @@ class FlowUiDateTimePicker extends FlowRdfElement {
       this.emit("flow-ui-after-hide");
     }
   }
-  /** Shows the listbox. */
+  /** Shows the calendar. */
   async show() {
     if (this.open || this.disabled) {
       this.open = false;
@@ -11750,7 +11752,7 @@ class FlowUiDateTimePicker extends FlowRdfElement {
     this.open = true;
     return waitForEvent(this, "flow-ui-after-show");
   }
-  /** Hides the listbox. */
+  /** Hides the calendar. */
   async hide() {
     if (!this.open || this.disabled) {
       this.open = false;
@@ -11941,9 +11943,6 @@ FlowUiDateTimePicker.styles = styles$D;
 __decorateClass$B([
   decorators_js.query(".datepicker")
 ], FlowUiDateTimePicker.prototype, "popup", 2);
-__decorateClass$B([
-  decorators_js.query(".datepicker__combobox")
-], FlowUiDateTimePicker.prototype, "combobox", 2);
 __decorateClass$B([
   decorators_js.query(".datepicker__display-input")
 ], FlowUiDateTimePicker.prototype, "displayInput", 2);
@@ -13393,13 +13392,13 @@ const styles$y = lit.css`
   }
 
   /* Wrapper needed to support text ellipsis in flex item */
-  .gauge__header-text-wrapper {
+  .gauge__title-wrapper {
     flex: 1;
     min-width: 0;
     display: flex;
   }
 
-  .gauge__header-text {
+  .gauge__title {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
@@ -13431,6 +13430,7 @@ const styles$y = lit.css`
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    line-height: 1.2;
   }
 
   .gauge__value {
@@ -13509,6 +13509,7 @@ class FlowUiGauge extends FlowRdfElement {
   headerIconTemplate() {
     return this.icon ? lit.html`
           <flow-ui-icon
+            part="header-icon"
             class="gauge__header-icon"
             name=${this.icon}
             library=${ifDefined_js.ifDefined(this.iconLibrary)}
@@ -13531,7 +13532,7 @@ class FlowUiGauge extends FlowRdfElement {
       <flow-ui-dialog class="gauge__info-dialog">
         <div slot="label" class="gauge__info-dialog-label">
           ${this.headerIconTemplate()}
-          <slot name="header-text">${this.heading}</slot>
+          <slot name="title-text">${this.title}</slot>
         </div>
         <slot name="info"></slot>
         <div slot="footer">
@@ -13551,9 +13552,9 @@ class FlowUiGauge extends FlowRdfElement {
       >
         <div part="header" class="gauge__header">
           ${this.headerIconTemplate()}
-          <span class="gauge__header-text-wrapper">
-            <span part="header-text" class="gauge__header-text">
-              <slot name="header-text">${this.heading}</slot>
+          <span class="gauge__title-wrapper">
+            <span part="title" class="gauge__title">
+              <slot name="title">${this.title}</slot>
             </span>
           </span>
           ${hasInfo ? this.infoButtonTemplate() : lit.nothing}
@@ -13578,7 +13579,7 @@ __decorateClass$w([
 ], FlowUiGauge.prototype, "_infoDialog", 2);
 __decorateClass$w([
   decorators_js.property()
-], FlowUiGauge.prototype, "heading", 2);
+], FlowUiGauge.prototype, "title", 2);
 __decorateClass$w([
   decorators_js.property()
 ], FlowUiGauge.prototype, "units", 2);
@@ -14040,7 +14041,7 @@ class FlowUiMenuItem extends FlowRdfElement {
       this.removeAttribute("aria-checked");
     }
   }
-  /** Returns a text label based on the contents of the menu item's default slot. */
+  /** @internal Returns a text label based on the contents of the menu item's default slot. */
   getTextLabel() {
     return getTextContent(this.defaultSlot);
   }
@@ -14543,7 +14544,7 @@ class FlowUiOption extends FlowRdfElement {
       this.value = this.value.replace(/ /g, "_");
     }
   }
-  /** Returns a plain text label based on the option's content. */
+  /** @internal Returns a plain text label based on the option's content. */
   getTextLabel() {
     const nodes = this.childNodes;
     let label = "";
@@ -14876,7 +14877,7 @@ class FlowUiPanel extends FlowRdfElement {
   disconnectedCallback() {
     super.disconnectedCallback();
   }
-  /** Shows the details. */
+  /** Open the panel */
   async expand(emitEvent = true) {
     if (this.closed) {
       this.closed = false;
@@ -14885,7 +14886,7 @@ class FlowUiPanel extends FlowRdfElement {
       }
     }
   }
-  /** Hides the details */
+  /** Close the panel */
   async collapse(emitEvent = true) {
     if (!this.closed) {
       this.closed = true;
@@ -19343,6 +19344,7 @@ class FlowUiSplitViewDivider extends FlowRdfElement {
   disconnectedCallback() {
     super.disconnectedCallback();
   }
+  /** @internal */
   cancelDrag() {
     if (this.dragCanceller) {
       this.dragCanceller();
@@ -19480,12 +19482,13 @@ class FlowUiSplitViewPane extends FlowRdfElement {
   disconnectedCallback() {
     super.disconnectedCallback();
   }
+  /** @internal */
   cancelDrag() {
     if (this.dividerComponent) {
       this.dividerComponent.cancelDrag();
     }
   }
-  /** Shows the details. */
+  /** Open the split pane. */
   async expand(emitEvent = true) {
     if (this.closed) {
       this.closed = false;
@@ -19494,7 +19497,7 @@ class FlowUiSplitViewPane extends FlowRdfElement {
       }
     }
   }
-  /** Hides the details */
+  /** Close the split pane. */
   async collapse(emitEvent = true) {
     if (!this.closed) {
       this.closed = true;
@@ -20171,6 +20174,12 @@ FlowUiSplitView.styles = styles$d;
 __decorateClass$c([
   decorators_js.state()
 ], FlowUiSplitView.prototype, "animatingPanelIndex", 2);
+__decorateClass$c([
+  decorators_js.query(".split-view__panel-slot")
+], FlowUiSplitView.prototype, "panelSlot", 2);
+__decorateClass$c([
+  decorators_js.query(".split-view")
+], FlowUiSplitView.prototype, "splitView", 2);
 __decorateClass$c([
   decorators_js.property({ attribute: "no-drag-close", type: Boolean })
 ], FlowUiSplitView.prototype, "noDragClose", 2);
@@ -20180,12 +20189,6 @@ __decorateClass$c([
 __decorateClass$c([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowUiSplitView.prototype, "vertical", 2);
-__decorateClass$c([
-  decorators_js.query(".split-view__panel-slot")
-], FlowUiSplitView.prototype, "panelSlot", 2);
-__decorateClass$c([
-  decorators_js.query(".split-view")
-], FlowUiSplitView.prototype, "splitView", 2);
 __decorateClass$c([
   decorators_js.property({ reflect: true, type: Boolean })
 ], FlowUiSplitView.prototype, "dragging", 2);
@@ -20402,6 +20405,7 @@ class FlowUiStepper extends FlowRdfElement {
       this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });
     });
   }
+  /** Mark the specified panel as `complete` */
   setComplete(panelName, complete = true) {
     const panel = this.panels.find((el) => el.name === panelName);
     if (panel && panel.complete !== complete) {
@@ -23385,6 +23389,7 @@ const styles$3 = lit.css`
     --background-color: var(--flow-ui-color-primary-50);
     --border-color: var(--flow-ui-color-primary-300);
     --color: var(--flow-ui-color-primary-500);
+    --flow-ui-button-text-transform: none;
   }
 
   .button {
@@ -24021,6 +24026,7 @@ const _FlowUiTreeItem = class _FlowUiTreeItem extends FlowRdfElement {
     this.lazy = false;
     this.size = "medium";
   }
+  /** @internal */
   static isTreeItem(node) {
     return node instanceof Element && node.getAttribute("role") === "treeitem";
   }
@@ -24778,7 +24784,7 @@ function registerComponents() {
   FlowUiVisuallyHidden.define("flow-ui-visually-hidden");
 }
 
-const version = "4.0.0-preview.8";
+const version = "4.0.0";
 
 const CONSOLE_HIGHLIGHT_STYLE = `
   padding: 2px 4px;
@@ -24865,6 +24871,7 @@ const translation = {
 const es = translation;
 
 function initialize() {
+  initializeChartJs();
   registerTranslation(en);
   registerTranslation(enGB);
   registerTranslation(es);
@@ -24942,7 +24949,6 @@ exports.addIcons = addIcons;
 exports.filterRuleSet = filterRuleSet;
 exports.flowQueryConverter = converter$3;
 exports.getAnimationNames = getAnimationNames;
-exports.getBasePath = getBasePath;
 exports.getEasingNames = getEasingNames;
 exports.initialize = initialize;
 exports.initializeChartJs = initializeChartJs;
@@ -24955,7 +24961,6 @@ exports.registerComponents = registerComponents;
 exports.registerIconLibrary = registerIconLibrary;
 exports.registerTranslation = registerTranslation;
 exports.renameRuleSetFields = renameRuleSetFields;
-exports.setBasePath = setBasePath;
 exports.setDefaultLocale = setDefaultLocale;
 exports.setDefaultTimeZone = setDefaultTimeZone;
 exports.transformRuleSet = transformRuleSet;