@emuanalytics/flow-rdf-ui 4.1.0 → 4.1.2

package/dist/components/busy-overlay/busy-overlay.component.mjs

@@ -0,0 +1,56 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import styles from './busy-overlay.styles.mjs';
+import { boolean } from '../../internal/boolean.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 FlowUiBusyOverlay extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.busy = false;
+    this.variant = "neutral";
+    this.size = "medium";
+    this.overlayParent = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.busy = boolean(this.busy, true);
+    this.overlayParent = boolean(this.overlayParent, true);
+  }
+  render() {
+    return html`
+      <slot></slot>
+      <div class="busy-overlay">
+        <slot name="busy-animation">
+          <flow-ui-progress-ring variant=${this.variant} indeterminate></flow-ui-progress-ring>
+        </slot>
+      </div>
+    `;
+  }
+}
+FlowUiBusyOverlay.styles = styles;
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], FlowUiBusyOverlay.prototype, "busy", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiBusyOverlay.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiBusyOverlay.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "overlay-parent" })
+], FlowUiBusyOverlay.prototype, "overlayParent", 2);
+
+export { FlowUiBusyOverlay as default };

package/dist/components/busy-overlay/busy-overlay.mjs

@@ -0,0 +1,5 @@
+import FlowUiBusyOverlay from './busy-overlay.component.mjs';
+
+
+
+export { FlowUiBusyOverlay as default };

package/dist/components/busy-overlay/busy-overlay.styles.mjs

@@ -0,0 +1,105 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    --transition-delay: 1s;
+    --transition-duration: 0.3s;
+
+    --progress-ring-size: 1.5em;
+    --progress-ring-track-width: 0.15em;
+    --progress-ring-track-color: transparent;
+    --progress-ring-indicator-color: var(--flow-ui-busy-overlay-color);
+
+    --overlay-background-color: var(--flow-ui-busy-overlay-background-color);
+
+    display: block;
+    position: relative;
+  }
+
+  .busy-overlay {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background: grey;
+    background-color: var(--overlay-background-color);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity var(--transition-duration) ease-in-out;
+    z-index: 1;
+  }
+
+  :host([overlay-parent]) {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  :host([busy]) .busy-overlay {
+    opacity: 1;
+    transition-delay: var(--transition-delay);
+    pointer-events: all;
+  }
+
+  :host([size='small']) {
+    --progress-ring-size: 1em;
+    --progress-ring-track-width: 0.15em;
+  }
+
+  :host([size='medium']) {
+    --progress-ring-size: 1.5em;
+    --progress-ring-track-width: 0.15em;
+  }
+
+  :host([size='large']) {
+    --progress-ring-size: 2.25em;
+    --progress-ring-track-width: 0.15em;
+  }
+
+  :host([variant='primary']) {
+    --progress-ring-indicator-color: var(--flow-ui-color-primary-500);
+  }
+
+  :host([variant='secondary']) {
+    --progress-ring-indicator-color: var(--flow-ui-color-secondary-500);
+  }
+
+  :host([variant='success']) {
+    --progress-ring-indicator-color: var(--flow-ui-color-success-500);
+  }
+
+  :host([variant='neutral']) {
+    --progress-ring-indicator-color: var(--flow-ui-busy-overlay-color);
+  }
+
+  :host([variant='warning']) {
+    --progress-ring-indicator-color: var(--flow-ui-color-warning-500);
+  }
+
+  :host([variant='danger']) {
+    --progress-ring-indicator-color: var(--flow-ui-color-danger-500);
+  }
+
+  flow-ui-progress-ring::part(base) {
+    --size: var(--progress-ring-size);
+    --track-width: var(--progress-ring-track-width);
+    --indicator-width: var(--track-width);
+    --track-color: var(--progress-ring-track-color);
+    --indicator-color: var(--progress-ring-indicator-color);
+  }
+`;
+
+export { styles as default };

package/dist/components/button/button.component.mjs

@@ -221,7 +221,10 @@ class FlowUiButton extends FlowRdfFormControl {
                 <flow-ui-icon part="caret" class="button__caret" library="system" name="caret"></flow-ui-icon>
               ` : ""}
         ${this.loading ? html`
-                <flow-ui-spinner></flow-ui-spinner>
+                <flow-ui-progress-ring
+                  size=${this.size === "large" ? "medium" : this.size}
+                  indeterminate
+                ></flow-ui-progress-ring>
               ` : ""}
       </${tag}>
     `;

package/dist/components/button/button.styles.mjs

@@ -512,16 +512,25 @@ const buttonStyles = css`
     visibility: hidden;
   }
 
-  .button--loading flow-ui-spinner {
-    --indicator-color: currentColor;
+  .button--loading flow-ui-progress-ring {
     position: absolute;
-    font-size: 1em;
-    height: 1em;
-    width: 1em;
+  }
+
+  .button--medium flow-ui-progress-ring,
+  .button--large flow-ui-progress-ring {
+    top: calc(50% - 0.75em);
+    left: calc(50% - 0.75em);
+  }
+
+  .button--small flow-ui-progress-ring {
     top: calc(50% - 0.5em);
     left: calc(50% - 0.5em);
   }
 
+  .button--loading flow-ui-progress-ring::part(base) {
+    --indicator-color: currentColor;
+  }
+
   /*
    * Badges
    */

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

@@ -1,6 +1,5 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { boolean } from '../../internal/boolean.mjs';
@@ -23,9 +22,10 @@ class FlowUiProgressBar extends FlowRdfElement {
   constructor() {
     super(...arguments);
     this.localize = new LocalizeController(this);
+    this.label = "";
     this.value = 0;
     this.indeterminate = false;
-    this.label = "";
+    this.variant = "primary";
   }
   connectedCallback() {
     super.connectedCallback();
@@ -35,11 +35,7 @@ class FlowUiProgressBar extends FlowRdfElement {
     return html`
       <div
         part="base"
-        class=${classMap({
-      "progress-bar": true,
-      "progress-bar--indeterminate": this.indeterminate,
-      "progress-bar--rtl": this.localize.dir() === "rtl"
-    })}
+        class="progress-bar"
         role="progressbar"
         title=${ifDefined(this.label)}
         aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
@@ -47,16 +43,20 @@ class FlowUiProgressBar extends FlowRdfElement {
         aria-valuemax="100"
         aria-valuenow=${this.indeterminate ? 0 : this.value}
       >
-        <div part="indicator" class="progress-bar__indicator" style=${styleMap({ width: `${this.value}%` })}>
-          ${!this.indeterminate ? html`
-                <slot part="label" class="progress-bar__label"></slot>
-              ` : ""}
-        </div>
+        <div part="indicator" class="progress-bar__indicator" style=${styleMap({ width: `${this.value}%` })}></div>
+      </div>
+      <div class="progress-bar__label-container">
+        ${!this.indeterminate ? html`
+              <slot part="label" class="progress-bar__label"></slot>
+            ` : ""}
       </div>
     `;
   }
 }
 FlowUiProgressBar.styles = styles;
+__decorateClass([
+  property()
+], FlowUiProgressBar.prototype, "label", 2);
 __decorateClass([
   property({ type: Number, reflect: true })
 ], FlowUiProgressBar.prototype, "value", 2);
@@ -64,7 +64,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], FlowUiProgressBar.prototype, "indeterminate", 2);
 __decorateClass([
-  property()
-], FlowUiProgressBar.prototype, "label", 2);
+  property({ reflect: true })
+], FlowUiProgressBar.prototype, "variant", 2);
 
 export { FlowUiProgressBar as default };

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

@@ -5,48 +5,77 @@ const styles = css`
   ${componentStyles}
 
   :host {
-    --height: 1rem;
+    --track-height: 0.15rem;
     --track-color: var(--flow-ui-color-neutral-200);
     --indicator-color: var(--flow-ui-color-primary-500);
-    --label-color: var(--flow-ui-color-neutral-0);
 
-    display: block;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   .progress-bar {
     position: relative;
     background-color: var(--track-color);
-    height: var(--height);
+    height: var(--track-height);
+    width: 100%;
     border-radius: var(--flow-ui-border-radius-pill);
     box-shadow: inset var(--flow-ui-shadow-small);
     overflow: hidden;
   }
 
+  :host([variant='primary']) .progress-bar {
+    --indicator-color: var(--flow-ui-color-primary-500);
+  }
+
+  :host([variant='secondary']) .progress-bar {
+    --indicator-color: var(--flow-ui-color-secondary-500);
+  }
+
+  :host([variant='success']) .progress-bar {
+    --indicator-color: var(--flow-ui-color-success-500);
+  }
+
+  :host([variant='neutral']) .progress-bar {
+    --indicator-color: var(--flow-ui-color-neutral-500);
+  }
+
+  :host([variant='warning']) .progress-bar {
+    --indicator-color: var(--flow-ui-color-warning-500);
+  }
+
+  :host([variant='danger']) .progress-bar {
+    --indicator-color: var(--flow-ui-color-danger-500);
+  }
+
   .progress-bar__indicator {
     height: 100%;
     font-family: var(--flow-ui-font-sans);
     font-size: 12px;
     font-weight: var(--flow-ui-font-weight-normal);
     background-color: var(--indicator-color);
-    color: var(--label-color);
     text-align: center;
-    line-height: var(--height);
+    line-height: var(--track-height);
     white-space: nowrap;
     overflow: hidden;
-    transition: 400ms width, 400ms background-color;
+    transition:
+      400ms width,
+      400ms background-color;
     user-select: none;
   }
 
+  .progress-bar__label-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
   /* Indeterminate */
-  .progress-bar--indeterminate .progress-bar__indicator {
+  :host([indeterminate]) .progress-bar__indicator {
     position: absolute;
     animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
   }
 
-  .progress-bar--indeterminate.progress-bar--rtl .progress-bar__indicator {
-    animation-name: indeterminate-rtl;
-  }
-
   @media (forced-colors: active) {
     .progress-bar {
       outline: solid 1px SelectedItem;

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

@@ -1,8 +1,9 @@
 import { html } from 'lit';
-import { query, state, property } from 'lit/decorators.js';
+import { 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';
+import { boolean } from '../../internal/boolean.mjs';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -19,17 +20,15 @@ class FlowUiProgressRing extends FlowRdfElement {
   constructor() {
     super(...arguments);
     this.localize = new LocalizeController(this);
-    this.value = 0;
     this.label = "";
+    this.value = 0;
+    this.indeterminate = false;
+    this.variant = "primary";
+    this.size = "medium";
   }
-  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`;
-    }
+  connectedCallback() {
+    super.connectedCallback();
+    this.indeterminate = boolean(this.indeterminate, true);
   }
   render() {
     return html`
@@ -41,12 +40,12 @@ class FlowUiProgressRing extends FlowRdfElement {
         aria-describedby="label"
         aria-valuemin="0"
         aria-valuemax="100"
-        aria-valuenow="${this.value}"
-        style="--percentage: ${this.value / 100}"
+        aria-valuenow="${this.indeterminate ? 0 : this.value}"
+        style="--percentage: ${this.value}"
       >
         <svg class="progress-ring__image">
           <circle class="progress-ring__track"></circle>
-          <circle class="progress-ring__indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle>
+          <circle class="progress-ring__indicator"></circle>
         </svg>
 
         <slot id="label" part="label" class="progress-ring__label"></slot>
@@ -56,16 +55,19 @@ class FlowUiProgressRing extends FlowRdfElement {
 }
 FlowUiProgressRing.styles = styles;
 __decorateClass([
-  query(".progress-ring__indicator")
-], FlowUiProgressRing.prototype, "indicator", 2);
-__decorateClass([
-  state()
-], FlowUiProgressRing.prototype, "indicatorOffset", 2);
+  property()
+], FlowUiProgressRing.prototype, "label", 2);
 __decorateClass([
   property({ type: Number, reflect: true })
 ], FlowUiProgressRing.prototype, "value", 2);
 __decorateClass([
-  property()
-], FlowUiProgressRing.prototype, "label", 2);
+  property({ type: Boolean, reflect: true })
+], FlowUiProgressRing.prototype, "indeterminate", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiProgressRing.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiProgressRing.prototype, "size", 2);
 
 export { FlowUiProgressRing as default };

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

@@ -5,8 +5,8 @@ const styles = css`
   ${componentStyles}
 
   :host {
-    --size: 128px;
-    --track-width: 4px;
+    --size: 1em;
+    --track-width: 0.15em;
     --track-color: var(--flow-ui-color-neutral-200);
     --indicator-width: var(--track-width);
     --indicator-color: var(--flow-ui-color-primary-500);
@@ -16,12 +16,53 @@ const styles = css`
   }
 
   .progress-ring {
+    --indicator-width: var(--track-width);
+
     display: inline-flex;
     align-items: center;
     justify-content: center;
     position: relative;
   }
 
+  :host([size='small']) .progress-ring {
+    --size: 1em;
+    --track-width: 0.15em;
+  }
+
+  :host([size='medium']) .progress-ring {
+    --size: 1.5em;
+    --track-width: 0.15em;
+  }
+
+  :host([size='large']) .progress-ring {
+    --size: 2.25em;
+    --track-width: 0.15em;
+  }
+
+  :host([variant='primary']) .progress-ring {
+    --indicator-color: var(--flow-ui-color-primary-500);
+  }
+
+  :host([variant='secondary']) .progress-ring {
+    --indicator-color: var(--flow-ui-color-secondary-500);
+  }
+
+  :host([variant='success']) .progress-ring {
+    --indicator-color: var(--flow-ui-color-success-500);
+  }
+
+  :host([variant='neutral']) .progress-ring {
+    --indicator-color: var(--flow-ui-color-neutral-500);
+  }
+
+  :host([variant='warning']) .progress-ring {
+    --indicator-color: var(--flow-ui-color-warning-500);
+  }
+
+  :host([variant='danger']) .progress-ring {
+    --indicator-color: var(--flow-ui-color-danger-500);
+  }
+
   .progress-ring__image {
     width: var(--size);
     height: var(--size);
@@ -38,6 +79,8 @@ const styles = css`
     r: var(--radius);
     cx: calc(var(--size) / 2);
     cy: calc(var(--size) / 2);
+
+    transform-origin: 50% 50%;
   }
 
   .progress-ring__track {
@@ -49,10 +92,23 @@ const styles = css`
     stroke: var(--indicator-color);
     stroke-width: var(--indicator-width);
     stroke-linecap: round;
+  }
+
+  .progress-ring__indicator {
+    --blank-ratio: calc(1 - var(--percentage) * 0.01);
+
+    stroke-dasharray: calc(var(--circumference)) calc(var(--circumference));
+    stroke-dashoffset: calc(var(--blank-ratio) * var(--circumference));
     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));
+  }
+
+  :host([indeterminate]) .progress-ring {
+    --track-color: transparent;
+  }
+
+  :host([indeterminate]) .progress-ring__indicator {
+    animation: indeterminate 2.5s infinite linear;
   }
 
   .progress-ring__label {
@@ -67,6 +123,23 @@ const styles = css`
     text-align: center;
     user-select: none;
   }
+
+  @keyframes indeterminate {
+    0% {
+      transform: rotate(0deg);
+      stroke-dasharray: calc(var(--circumference) * 0) calc(var(--circumference) * 1);
+    }
+
+    50% {
+      transform: rotate(450deg);
+      stroke-dasharray: calc(var(--circumference) * 0.8) calc(var(--circumference) * 0.2);
+    }
+
+    100% {
+      transform: rotate(1080deg);
+      stroke-dasharray: calc(var(--circumference) * 0) calc(var(--circumference) * 1);
+    }
+  }
 `;
 
 export { styles as default };

package/dist/components/split-view-divider/split-view-divider.styles.mjs

@@ -69,7 +69,7 @@ const styles = css`
     height: 100%;
     left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
     width: var(--divider-hit-area);
-    z-index: 1;
+    z-index: 1000;
   }
 
   /* Vertical */

package/dist/components/tree-item/tree-item.component.mjs

@@ -189,7 +189,10 @@ const _FlowUiTreeItem = class _FlowUiTreeItem extends FlowRdfElement {
             ${when(
       this.loading,
       () => html`
-                <flow-ui-spinner></flow-ui-spinner>
+                <flow-ui-progress-ring
+                  size=${this.size === "large" ? "medium" : this.size}
+                  indeterminate
+                ></flow-ui-progress-ring>
               `
     )}
             <slot class="tree-item__expand-icon-slot" name="expand-icon">