@emuanalytics/flow-rdf-ui 4.0.4 → 4.0.6

package/dist/components/alert/alert.component.mjs

@@ -0,0 +1,202 @@
+import { html } from 'lit';
+import { query, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { stopAnimations, animateTo } from '../../internal/animate.mjs';
+import { boolean } from '../../internal/boolean.mjs';
+import { waitForEvent } from '../../internal/event.mjs';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { HasSlotController } from '../../internal/slot.mjs';
+import { watch } from '../../internal/watch.mjs';
+import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.mjs';
+import { LocalizeController } from '../../utilities/localize.mjs';
+import styles from './alert.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;
+};
+let toastStack;
+class FlowUiAlert extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "icon", "suffix");
+    this.localize = new LocalizeController(this);
+    this.open = false;
+    this.closable = false;
+    this.variant = "primary";
+    this.duration = Infinity;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.open = boolean(this.open, true);
+  }
+  firstUpdated() {
+    this.base.hidden = !this.open;
+  }
+  restartAutoHide() {
+    clearTimeout(this.autoHideTimeout);
+    if (this.open && this.duration < Infinity) {
+      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);
+    }
+  }
+  handleCloseClick() {
+    this.hide();
+  }
+  handleMouseMove() {
+    this.restartAutoHide();
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.emit("flow-ui-show");
+      if (this.duration < Infinity) {
+        this.restartAutoHide();
+      }
+      await stopAnimations(this.base);
+      this.base.hidden = false;
+      const { keyframes, options } = getAnimation(this, "alert.show", { dir: this.localize.dir() });
+      await animateTo(this.base, keyframes, options);
+      this.emit("flow-ui-after-show");
+    } else {
+      this.emit("flow-ui-hide");
+      clearTimeout(this.autoHideTimeout);
+      await stopAnimations(this.base);
+      const { keyframes, options } = getAnimation(this, "alert.hide", { dir: this.localize.dir() });
+      await animateTo(this.base, keyframes, options);
+      this.base.hidden = true;
+      this.emit("flow-ui-after-hide");
+    }
+  }
+  handleDurationChange() {
+    this.restartAutoHide();
+  }
+  /** Shows the alert. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "flow-ui-after-show");
+  }
+  /** Hides the alert */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "flow-ui-after-hide");
+  }
+  /**
+   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
+   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+   * calling this method again. The returned promise will resolve after the alert is hidden.
+   */
+  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);
+      }
+      toastStack.appendChild(this);
+      requestAnimationFrame(() => {
+        this.clientWidth;
+        this.show();
+      });
+      this.addEventListener(
+        "flow-ui-after-hide",
+        () => {
+          toastStack.removeChild(this);
+          resolve();
+          if (toastStack.querySelector("flow-ui-alert") === null) {
+            toastStack.remove();
+          }
+        },
+        { once: true }
+      );
+    });
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      alert: true,
+      "alert--open": this.open,
+      "alert--closable": this.closable,
+      "alert--has-icon": this.hasSlotController.test("icon"),
+      "alert--primary": this.variant === "primary",
+      "alert--secondary": this.variant === "secondary",
+      "alert--success": this.variant === "success",
+      "alert--neutral": this.variant === "neutral",
+      "alert--warning": this.variant === "warning",
+      "alert--danger": this.variant === "danger"
+    })}
+        role="alert"
+        aria-hidden=${this.open ? "false" : "true"}
+        @mousemove=${this.handleMouseMove}
+      >
+        <slot name="icon" part="icon" class="alert__icon"></slot>
+
+        <slot part="message" class="alert__message" aria-live="polite"></slot>
+
+        ${this.closable ? html`
+              <flow-ui-icon-button
+                part="close-button"
+                exportparts="base:close-button__base"
+                class="alert__close-button"
+                name="x-lg"
+                library="system"
+                label=${this.localize.term("close")}
+                @click=${this.handleCloseClick}
+              ></flow-ui-icon-button>
+            ` : ""}
+      </div>
+    `;
+  }
+}
+FlowUiAlert.styles = styles;
+__decorateClass([
+  query('[part~="base"]')
+], FlowUiAlert.prototype, "base", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiAlert.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiAlert.prototype, "closable", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiAlert.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Number })
+], FlowUiAlert.prototype, "duration", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], FlowUiAlert.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch("duration")
+], FlowUiAlert.prototype, "handleDurationChange", 1);
+setDefaultAnimation("alert.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("alert.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+
+export { FlowUiAlert as default };

package/dist/components/alert/alert.mjs

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

package/dist/components/alert/alert.styles.mjs

@@ -0,0 +1,107 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: contents;
+
+    /* For better DX, we'll reset the margin here so the base part can inherit it */
+    margin: 0;
+  }
+
+  .alert {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    background-color: var(--flow-ui-panel-background-color);
+    border: solid var(--flow-ui-panel-border-width) var(--flow-ui-panel-border-color);
+    border-top-width: calc(var(--flow-ui-panel-border-width) * 3);
+    border-radius: var(--flow-ui-border-radius-medium);
+    font-family: var(--flow-ui-font-sans);
+    font-size: var(--flow-ui-font-size-small);
+    font-weight: var(--flow-ui-font-weight-normal);
+    line-height: 1.6;
+    color: var(--flow-ui-color-neutral-700);
+    margin: inherit;
+  }
+
+  .alert:not(.alert--has-icon) .alert__icon,
+  .alert:not(.alert--closable) .alert__close-button {
+    display: none;
+  }
+
+  .alert__icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: var(--flow-ui-font-size-large);
+    padding-inline-start: var(--flow-ui-spacing-large);
+  }
+
+  .alert--primary {
+    border-top-color: var(--flow-ui-color-primary-500);
+  }
+
+  .alert--primary .alert__icon {
+    color: var(--flow-ui-color-primary-500);
+  }
+
+  .alert--secondary {
+    border-top-color: var(--flow-ui-color-secondary-500);
+  }
+
+  .alert--secondary .alert__icon {
+    color: var(--flow-ui-color-secondary-500);
+  }
+
+  .alert--success {
+    border-top-color: var(--flow-ui-color-success-600);
+  }
+
+  .alert--success .alert__icon {
+    color: var(--flow-ui-color-success-600);
+  }
+
+  .alert--neutral {
+    border-top-color: var(--flow-ui-color-neutral-600);
+  }
+
+  .alert--neutral .alert__icon {
+    color: var(--flow-ui-color-neutral-600);
+  }
+
+  .alert--warning {
+    border-top-color: var(--flow-ui-color-warning-600);
+  }
+
+  .alert--warning .alert__icon {
+    color: var(--flow-ui-color-warning-600);
+  }
+
+  .alert--danger {
+    border-top-color: var(--flow-ui-color-danger-600);
+  }
+
+  .alert--danger .alert__icon {
+    color: var(--flow-ui-color-danger-600);
+  }
+
+  .alert__message {
+    flex: 1 1 auto;
+    display: block;
+    padding: var(--flow-ui-spacing-large);
+    overflow: hidden;
+  }
+
+  .alert__close-button {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: var(--flow-ui-font-size-medium);
+    padding-inline-end: var(--flow-ui-spacing-medium);
+  }
+`;
+
+export { styles as default };

package/dist/components/animation/animation.component.mjs

@@ -0,0 +1,207 @@
+import { html } from 'lit';
+import { queryAsync, property } from 'lit/decorators.js';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { watch } from '../../internal/watch.mjs';
+import componentStyles from '../../styles/component.styles.mjs';
+import styles from './animation.styles.mjs';
+import * as index from '../../internal/animations/index.mjs';
+import { easings } from '../../internal/animations/easings/easings.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 FlowUiAnimation extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.hasStarted = false;
+    this.name = "none";
+    this.play = false;
+    this.delay = 0;
+    this.direction = "normal";
+    this.duration = 1e3;
+    this.easing = "linear";
+    this.endDelay = 0;
+    this.fill = "auto";
+    this.iterations = Infinity;
+    this.iterationStart = 0;
+    this.playbackRate = 1;
+    this.handleAnimationFinish = () => {
+      this.play = false;
+      this.hasStarted = false;
+      this.emit("flow-ui-finish");
+    };
+    this.handleAnimationCancel = () => {
+      this.play = false;
+      this.hasStarted = false;
+      this.emit("flow-ui-cancel");
+    };
+  }
+  /** Gets and sets the current animation time. */
+  get currentTime() {
+    return this.animation?.currentTime ?? 0;
+  }
+  set currentTime(time) {
+    if (this.animation) {
+      this.animation.currentTime = time;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.createAnimation();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.destroyAnimation();
+  }
+  handleSlotChange() {
+    this.destroyAnimation();
+    this.createAnimation();
+  }
+  async createAnimation() {
+    const easing = easings[this.easing] ?? this.easing;
+    const keyframes = this.keyframes ?? index[this.name];
+    const slot = await this.defaultSlot;
+    const element = slot.assignedElements()[0];
+    if (!element || !keyframes) {
+      return false;
+    }
+    this.destroyAnimation();
+    this.animation = element.animate(keyframes, {
+      delay: +this.delay,
+      direction: this.direction,
+      duration: this.duration,
+      easing,
+      endDelay: this.endDelay,
+      fill: this.fill,
+      iterationStart: this.iterationStart,
+      iterations: this.iterations
+    });
+    this.animation.playbackRate = this.playbackRate;
+    this.animation.addEventListener("cancel", this.handleAnimationCancel);
+    this.animation.addEventListener("finish", this.handleAnimationFinish);
+    if (this.play) {
+      this.hasStarted = true;
+      this.emit("flow-ui-start");
+    } else {
+      this.animation.pause();
+    }
+    return true;
+  }
+  destroyAnimation() {
+    if (this.animation) {
+      this.animation.cancel();
+      this.animation.removeEventListener("cancel", this.handleAnimationCancel);
+      this.animation.removeEventListener("finish", this.handleAnimationFinish);
+      this.hasStarted = false;
+    }
+  }
+  handleAnimationChange() {
+    if (!this.hasUpdated) {
+      return;
+    }
+    this.createAnimation();
+  }
+  handlePlayChange() {
+    if (this.animation) {
+      if (this.play && !this.hasStarted) {
+        this.hasStarted = true;
+        this.emit("flow-ui-start");
+      }
+      if (this.play) {
+        this.animation.play();
+      } else {
+        this.animation.pause();
+      }
+      return true;
+    }
+    return false;
+  }
+  handlePlaybackRateChange() {
+    if (this.animation) {
+      this.animation.playbackRate = this.playbackRate;
+    }
+  }
+  /** Clears all keyframe effects caused by this animation and aborts its playback. */
+  cancel() {
+    this.animation?.cancel();
+  }
+  /** Sets the playback time to the end of the animation corresponding to the current playback direction. */
+  finish() {
+    this.animation?.finish();
+  }
+  render() {
+    return html`
+      <slot @slotchange=${this.handleSlotChange}></slot>
+    `;
+  }
+}
+FlowUiAnimation.styles = [componentStyles, styles];
+__decorateClass([
+  queryAsync("slot")
+], FlowUiAnimation.prototype, "defaultSlot", 2);
+__decorateClass([
+  property()
+], FlowUiAnimation.prototype, "name", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiAnimation.prototype, "play", 2);
+__decorateClass([
+  property({ type: Number })
+], FlowUiAnimation.prototype, "delay", 2);
+__decorateClass([
+  property()
+], FlowUiAnimation.prototype, "direction", 2);
+__decorateClass([
+  property({ type: Number })
+], FlowUiAnimation.prototype, "duration", 2);
+__decorateClass([
+  property()
+], FlowUiAnimation.prototype, "easing", 2);
+__decorateClass([
+  property({ attribute: "end-delay", type: Number })
+], FlowUiAnimation.prototype, "endDelay", 2);
+__decorateClass([
+  property()
+], FlowUiAnimation.prototype, "fill", 2);
+__decorateClass([
+  property({ type: Number })
+], FlowUiAnimation.prototype, "iterations", 2);
+__decorateClass([
+  property({ attribute: "iteration-start", type: Number })
+], FlowUiAnimation.prototype, "iterationStart", 2);
+__decorateClass([
+  property({ attribute: false })
+], FlowUiAnimation.prototype, "keyframes", 2);
+__decorateClass([
+  property({ attribute: "playback-rate", type: Number })
+], FlowUiAnimation.prototype, "playbackRate", 2);
+__decorateClass([
+  watch([
+    "name",
+    "delay",
+    "direction",
+    "duration",
+    "easing",
+    "endDelay",
+    "fill",
+    "iterations",
+    "iterationsStart",
+    "keyframes"
+  ])
+], FlowUiAnimation.prototype, "handleAnimationChange", 1);
+__decorateClass([
+  watch("play")
+], FlowUiAnimation.prototype, "handlePlayChange", 1);
+__decorateClass([
+  watch("playbackRate")
+], FlowUiAnimation.prototype, "handlePlaybackRateChange", 1);
+
+export { FlowUiAnimation as default };

package/dist/components/animation/animation.mjs

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

package/dist/components/animation/animation.styles.mjs

@@ -0,0 +1,12 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: contents;
+  }
+`;
+
+export { styles as default };

package/dist/components/animation/animations.mjs

@@ -0,0 +1,11 @@
+import * as index from '../../internal/animations/index.mjs';
+import { easings } from '../../internal/animations/easings/easings.mjs';
+
+function getAnimationNames() {
+  return Object.entries(index).filter(([name]) => name !== "easings").map(([name]) => name);
+}
+function getEasingNames() {
+  return Object.entries(easings).map(([name]) => name);
+}
+
+export { index as animations, getAnimationNames, getEasingNames };

package/dist/components/avatar/avatar.component.mjs

@@ -0,0 +1,95 @@
+import { html } from 'lit';
+import { state, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { watch } from '../../internal/watch.mjs';
+import styles from './avatar.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 FlowUiAvatar extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.hasError = false;
+    this.image = "";
+    this.label = "";
+    this.initials = "";
+    this.loading = "eager";
+    this.shape = "circle";
+  }
+  handleImageChange() {
+    this.hasError = false;
+  }
+  render() {
+    const avatarWithImage = html`
+      <img
+        part="image"
+        class="avatar__image"
+        src="${this.image}"
+        loading="${this.loading}"
+        alt=""
+        @error="${() => this.hasError = true}"
+      />
+    `;
+    let avatarWithoutImage = html``;
+    if (this.initials) {
+      avatarWithoutImage = html`
+        <div part="initials" class="avatar__initials">${this.initials}</div>
+      `;
+    } else {
+      avatarWithoutImage = html`
+        <slot name="icon" part="icon" class="avatar__icon" aria-hidden="true">
+          <flow-ui-icon name="person-fill" library="system"></flow-ui-icon>
+        </slot>
+      `;
+    }
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      avatar: true,
+      "avatar--circle": this.shape === "circle",
+      "avatar--rounded": this.shape === "rounded",
+      "avatar--square": this.shape === "square"
+    })}
+        role="img"
+        aria-label=${this.label}
+      >
+        ${this.image && !this.hasError ? avatarWithImage : avatarWithoutImage}
+      </div>
+    `;
+  }
+}
+FlowUiAvatar.styles = styles;
+__decorateClass([
+  state()
+], FlowUiAvatar.prototype, "hasError", 2);
+__decorateClass([
+  property()
+], FlowUiAvatar.prototype, "image", 2);
+__decorateClass([
+  property()
+], FlowUiAvatar.prototype, "label", 2);
+__decorateClass([
+  property()
+], FlowUiAvatar.prototype, "initials", 2);
+__decorateClass([
+  property()
+], FlowUiAvatar.prototype, "loading", 2);
+__decorateClass([
+  property({ reflect: true, type: String })
+], FlowUiAvatar.prototype, "shape", 2);
+__decorateClass([
+  watch("image")
+], FlowUiAvatar.prototype, "handleImageChange", 1);
+
+export { FlowUiAvatar as default };

package/dist/components/avatar/avatar.mjs

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