@emuanalytics/flow-rdf-ui 4.0.4 → 4.0.6

package/dist/components/menu/menu.component.mjs

@@ -0,0 +1,125 @@
+import { html } from 'lit';
+import { query } from 'lit/decorators.js';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import styles from './menu.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 FlowUiMenu extends FlowRdfElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "menu");
+  }
+  handleClick(event) {
+    const target = event.target;
+    const item = target.closest("flow-ui-menu-item");
+    if (!item || item.disabled || item.inert) {
+      return;
+    }
+    if (item.type === "checkbox") {
+      item.checked = !item.checked;
+    }
+    this.emit("flow-ui-select", { detail: { item } });
+  }
+  handleKeyDown(event) {
+    if (event.key === "Enter") {
+      const item = this.getCurrentItem();
+      event.preventDefault();
+      item?.click();
+    }
+    if (event.key === " ") {
+      event.preventDefault();
+    }
+    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      const items = this.getAllItems();
+      const activeItem = this.getCurrentItem();
+      let index = activeItem ? items.indexOf(activeItem) : 0;
+      if (items.length > 0) {
+        event.preventDefault();
+        if (event.key === "ArrowDown") {
+          index++;
+        } else if (event.key === "ArrowUp") {
+          index--;
+        } else if (event.key === "Home") {
+          index = 0;
+        } else if (event.key === "End") {
+          index = items.length - 1;
+        }
+        if (index < 0) {
+          index = items.length - 1;
+        }
+        if (index > items.length - 1) {
+          index = 0;
+        }
+        this.setCurrentItem(items[index]);
+        items[index].focus();
+      }
+    }
+  }
+  handleMouseDown(event) {
+    const target = event.target;
+    if (this.isMenuItem(target)) {
+      this.setCurrentItem(target);
+    }
+  }
+  handleSlotChange() {
+    const items = this.getAllItems();
+    if (items.length > 0) {
+      this.setCurrentItem(items[0]);
+    }
+  }
+  isMenuItem(item) {
+    return item.tagName.toLowerCase() === "flow-ui-menu-item" || ["menuitem", "menuitemcheckbox", "menuitemradio"].includes(item.getAttribute("role") ?? "");
+  }
+  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
+  getAllItems() {
+    return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el) => {
+      if (el.inert || !this.isMenuItem(el)) {
+        return false;
+      }
+      return true;
+    });
+  }
+  /**
+   * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
+   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
+   */
+  getCurrentItem() {
+    return this.getAllItems().find((i) => i.getAttribute("tabindex") === "0");
+  }
+  /**
+   * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
+   * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
+   */
+  setCurrentItem(item) {
+    const items = this.getAllItems();
+    items.forEach((i) => {
+      i.setAttribute("tabindex", i === item ? "0" : "-1");
+    });
+  }
+  render() {
+    return html`
+      <slot
+        @slotchange=${this.handleSlotChange}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleMouseDown}
+      ></slot>
+    `;
+  }
+}
+FlowUiMenu.styles = styles;
+__decorateClass([
+  query("slot")
+], FlowUiMenu.prototype, "defaultSlot", 2);
+
+export { FlowUiMenu as default };

package/dist/components/menu/menu.mjs

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

package/dist/components/menu/menu.styles.mjs

@@ -0,0 +1,23 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+    position: relative;
+    background: var(--flow-ui-panel-background-color);
+    border: solid var(--flow-ui-panel-border-width) var(--flow-ui-panel-border-color);
+    border-radius: var(--flow-ui-border-radius-medium);
+    padding: var(--flow-ui-spacing-x-small) 0;
+    overflow: auto;
+    overscroll-behavior: none;
+  }
+
+  ::slotted(flow-ui-divider) {
+    --spacing: var(--flow-ui-spacing-x-small);
+  }
+`;
+
+export { styles as default };

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

@@ -0,0 +1,143 @@
+import { html } from 'lit';
+import { query, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { boolean } from '../../internal/boolean.mjs';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { getTextContent } from '../../internal/slot.mjs';
+import { watch } from '../../internal/watch.mjs';
+import styles from './menu-item.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 FlowUiMenuItem extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.type = "normal";
+    this.checked = false;
+    this.value = "";
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.checked = boolean(this.checked, true);
+    this.disabled = boolean(this.disabled, true);
+    this.handleHostClick = this.handleHostClick.bind(this);
+    this.addEventListener("click", this.handleHostClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleHostClick);
+  }
+  handleDefaultSlotChange() {
+    const textLabel = this.getTextLabel();
+    if (typeof this.cachedTextLabel === "undefined") {
+      this.cachedTextLabel = textLabel;
+      return;
+    }
+    if (textLabel !== this.cachedTextLabel) {
+      this.cachedTextLabel = textLabel;
+      this.emit("slotchange", { bubbles: true, composed: false, cancelable: false });
+    }
+  }
+  handleHostClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+  handleCheckedChange() {
+    if (this.checked && this.type !== "checkbox") {
+      this.checked = false;
+      console.error('The checked attribute can only be used on menu items with type="checkbox"', this);
+      return;
+    }
+    if (this.type === "checkbox") {
+      this.setAttribute("aria-checked", this.checked ? "true" : "false");
+    } else {
+      this.removeAttribute("aria-checked");
+    }
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleTypeChange() {
+    if (this.type === "checkbox") {
+      this.setAttribute("role", "menuitemcheckbox");
+      this.setAttribute("aria-checked", this.checked ? "true" : "false");
+    } else {
+      this.setAttribute("role", "menuitem");
+      this.removeAttribute("aria-checked");
+    }
+  }
+  /** @internal Returns a text label based on the contents of the menu item's default slot. */
+  getTextLabel() {
+    return getTextContent(this.defaultSlot);
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "menu-item": true,
+      "menu-item--checked": this.checked,
+      "menu-item--disabled": this.disabled,
+      "menu-item--has-submenu": false
+      // reserved for future use
+    })}
+      >
+        <span part="checked-icon" class="menu-item__check">
+          <flow-ui-icon name="check" library="system" aria-hidden="true"></flow-ui-icon>
+        </span>
+
+        <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
+
+        <slot part="label" class="menu-item__label" @slotchange=${this.handleDefaultSlotChange}></slot>
+
+        <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
+
+        <span part="submenu-icon" class="menu-item__chevron">
+          <flow-ui-icon name="chevron-right" library="system" aria-hidden="true"></flow-ui-icon>
+        </span>
+      </div>
+    `;
+  }
+}
+FlowUiMenuItem.styles = styles;
+__decorateClass([
+  query("slot:not([name])")
+], FlowUiMenuItem.prototype, "defaultSlot", 2);
+__decorateClass([
+  query(".menu-item")
+], FlowUiMenuItem.prototype, "menuItem", 2);
+__decorateClass([
+  property()
+], FlowUiMenuItem.prototype, "type", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiMenuItem.prototype, "checked", 2);
+__decorateClass([
+  property()
+], FlowUiMenuItem.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiMenuItem.prototype, "disabled", 2);
+__decorateClass([
+  watch("checked")
+], FlowUiMenuItem.prototype, "handleCheckedChange", 1);
+__decorateClass([
+  watch("disabled")
+], FlowUiMenuItem.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("type")
+], FlowUiMenuItem.prototype, "handleTypeChange", 1);
+
+export { FlowUiMenuItem as default };

package/dist/components/menu-item/menu-item.mjs

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

package/dist/components/menu-item/menu-item.styles.mjs

@@ -0,0 +1,103 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+  }
+
+  :host([inert]) {
+    display: none;
+  }
+
+  .menu-item {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    font-family: var(--flow-ui-font-sans);
+    font-size: var(--flow-ui-font-size-medium);
+    font-weight: var(--flow-ui-font-weight-normal);
+    line-height: var(--flow-ui-line-height-normal);
+    letter-spacing: var(--flow-ui-letter-spacing-normal);
+    color: var(--flow-ui-color-neutral-700);
+    padding: var(--flow-ui-spacing-2x-small) var(--flow-ui-spacing-2x-small);
+    transition: var(--flow-ui-transition-fast) fill;
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .menu-item.menu-item--disabled {
+    outline: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .menu-item .menu-item__label {
+    flex: 1 1 auto;
+    display: inline-block;
+  }
+
+  .menu-item .menu-item__prefix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item .menu-item__prefix::slotted(*) {
+    margin-inline-end: var(--flow-ui-spacing-x-small);
+  }
+
+  .menu-item .menu-item__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item .menu-item__suffix::slotted(*) {
+    margin-inline-start: var(--flow-ui-spacing-x-small);
+  }
+
+  :host(:focus-visible) {
+    outline: none;
+  }
+
+  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
+    background-color: var(--flow-ui-color-neutral-100);
+    color: var(--flow-ui-color-neutral-1000);
+  }
+
+  :host(:focus-visible) .menu-item {
+    outline: none;
+    background-color: var(--flow-ui-color-primary-500);
+    color: var(--flow-ui-color-neutral-0);
+    opacity: 1;
+  }
+
+  .menu-item .menu-item__check,
+  .menu-item .menu-item__chevron {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5em;
+    visibility: hidden;
+  }
+
+  .menu-item--checked .menu-item__check,
+  .menu-item--has-submenu .menu-item__chevron {
+    visibility: visible;
+  }
+
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) .menu-item,
+    :host(:focus-visible) .menu-item {
+      outline: dashed 1px SelectedItem;
+      outline-offset: -1px;
+    }
+  }
+`;
+
+export { styles as default };

package/dist/components/menu-label/menu-label.component.mjs

@@ -0,0 +1,14 @@
+import { html } from 'lit';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import styles from './menu-label.styles.mjs';
+
+class FlowUiMenuLabel extends FlowRdfElement {
+  render() {
+    return html`
+      <slot part="base" class="menu-label"></slot>
+    `;
+  }
+}
+FlowUiMenuLabel.styles = styles;
+
+export { FlowUiMenuLabel as default };

package/dist/components/menu-label/menu-label.mjs

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

package/dist/components/menu-label/menu-label.styles.mjs

@@ -0,0 +1,24 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+  }
+
+  .menu-label {
+    display: inline-block;
+    font-family: var(--flow-ui-font-sans);
+    font-size: var(--flow-ui-font-size-small);
+    font-weight: var(--flow-ui-font-weight-semibold);
+    line-height: var(--flow-ui-line-height-normal);
+    letter-spacing: var(--flow-ui-letter-spacing-normal);
+    color: var(--flow-ui-color-neutral-500);
+    padding: var(--flow-ui-spacing-2x-small) var(--flow-ui-spacing-x-large);
+    user-select: none;
+  }
+`;
+
+export { styles as default };

package/dist/components/mutation-observer/mutation-observer.component.mjs

@@ -0,0 +1,115 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { boolean } from '../../internal/boolean.mjs';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { watch } from '../../internal/watch.mjs';
+import styles from './mutation-observer.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 FlowUiMutationObserver extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.attrOldValue = false;
+    this.charData = false;
+    this.charDataOldValue = false;
+    this.childList = false;
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.attrOldValue = boolean(this.attrOldValue, true);
+    this.charData = boolean(this.charData, true);
+    this.charDataOldValue = boolean(this.charDataOldValue, true);
+    this.childList = boolean(this.childList, true);
+    this.disabled = boolean(this.disabled, true);
+    this.handleMutation = this.handleMutation.bind(this);
+    this.mutationObserver = new MutationObserver(this.handleMutation);
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  disconnectedCallback() {
+    this.stopObserver();
+  }
+  handleMutation(mutationList) {
+    this.emit("flow-ui-mutation", {
+      detail: { mutationList }
+    });
+  }
+  startObserver() {
+    const observeAttributes = typeof this.attr === "string" && this.attr.length > 0;
+    const attributeFilter = observeAttributes && this.attr !== "*" ? this.attr.split(" ") : void 0;
+    try {
+      this.mutationObserver.observe(this, {
+        subtree: true,
+        childList: this.childList,
+        attributes: observeAttributes,
+        attributeFilter,
+        attributeOldValue: this.attrOldValue,
+        characterData: this.charData,
+        characterDataOldValue: this.charDataOldValue
+      });
+    } catch {
+    }
+  }
+  stopObserver() {
+    this.mutationObserver.disconnect();
+  }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.stopObserver();
+    } else {
+      this.startObserver();
+    }
+  }
+  handleChange() {
+    this.stopObserver();
+    this.startObserver();
+  }
+  render() {
+    return html`
+      <slot></slot>
+    `;
+  }
+}
+FlowUiMutationObserver.styles = styles;
+__decorateClass([
+  property({ reflect: true })
+], FlowUiMutationObserver.prototype, "attr", 2);
+__decorateClass([
+  property({ attribute: "attr-old-value", type: Boolean, reflect: true })
+], FlowUiMutationObserver.prototype, "attrOldValue", 2);
+__decorateClass([
+  property({ attribute: "char-data", type: Boolean, reflect: true })
+], FlowUiMutationObserver.prototype, "charData", 2);
+__decorateClass([
+  property({ attribute: "char-data-old-value", type: Boolean, reflect: true })
+], FlowUiMutationObserver.prototype, "charDataOldValue", 2);
+__decorateClass([
+  property({ attribute: "child-list", type: Boolean, reflect: true })
+], FlowUiMutationObserver.prototype, "childList", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiMutationObserver.prototype, "disabled", 2);
+__decorateClass([
+  watch("disabled")
+], FlowUiMutationObserver.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("attr", { waitUntilFirstUpdate: true }),
+  watch("attr-old-value", { waitUntilFirstUpdate: true }),
+  watch("char-data", { waitUntilFirstUpdate: true }),
+  watch("char-data-old-value", { waitUntilFirstUpdate: true }),
+  watch("childList", { waitUntilFirstUpdate: true })
+], FlowUiMutationObserver.prototype, "handleChange", 1);
+
+export { FlowUiMutationObserver as default };

package/dist/components/mutation-observer/mutation-observer.mjs

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

package/dist/components/mutation-observer/mutation-observer.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 };