@emuanalytics/flow-rdf-ui 4.0.5 → 4.0.6

package/dist/components/option/option.component.mjs

@@ -0,0 +1,152 @@
+import { html } from 'lit';
+import { query, state, 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 { watch } from '../../internal/watch.mjs';
+import { LocalizeController } from '../../utilities/localize.mjs';
+import FlowUiIcon from '../icon/icon.component.mjs';
+import styles from './option.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 FlowUiOption extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    // @ts-expect-error - Controller is currently unused
+    this.localize = new LocalizeController(this);
+    this.current = false;
+    this.selected = false;
+    this.hasHover = false;
+    this.value = "";
+    this.disabled = false;
+    this.size = "medium";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.disabled = boolean(this.disabled, true);
+    this.setAttribute("role", "option");
+    this.setAttribute("aria-selected", "false");
+  }
+  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 });
+    }
+  }
+  handleMouseEnter() {
+    this.hasHover = true;
+  }
+  handleMouseLeave() {
+    this.hasHover = false;
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleSelectedChange() {
+    this.setAttribute("aria-selected", this.selected ? "true" : "false");
+  }
+  handleValueChange() {
+    if (typeof this.value !== "string") {
+      this.value = String(this.value);
+    }
+    if (this.value.includes(" ")) {
+      console.error(`Option values cannot include a space. All spaces have been replaced with underscores.`, this);
+      this.value = this.value.replace(/ /g, "_");
+    }
+  }
+  /** @internal Returns a plain text label based on the option's content. */
+  getTextLabel() {
+    const nodes = this.childNodes;
+    let label = "";
+    [...nodes].forEach((node) => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        if (!node.hasAttribute("slot")) {
+          label += node.textContent;
+        }
+      }
+      if (node.nodeType === Node.TEXT_NODE) {
+        label += node.textContent;
+      }
+    });
+    return label.trim();
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      option: true,
+      "option--current": this.current,
+      "option--disabled": this.disabled,
+      "option--selected": this.selected,
+      "option--hover": this.hasHover,
+      "option--small": this.size === "small",
+      "option--medium": this.size === "medium",
+      "option--large": this.size === "large"
+    })}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+      >
+        <flow-ui-icon
+          part="checked-icon"
+          class="option__check"
+          name="check"
+          library="system"
+          aria-hidden="true"
+        ></flow-ui-icon>
+        <slot part="prefix" name="prefix" class="option__prefix"></slot>
+        <slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot>
+        <slot part="suffix" name="suffix" class="option__suffix"></slot>
+      </div>
+    `;
+  }
+}
+FlowUiOption.styles = styles;
+FlowUiOption.dependencies = { "flow-ui-icon": FlowUiIcon };
+__decorateClass([
+  query(".option__label")
+], FlowUiOption.prototype, "defaultSlot", 2);
+__decorateClass([
+  state()
+], FlowUiOption.prototype, "current", 2);
+__decorateClass([
+  state()
+], FlowUiOption.prototype, "selected", 2);
+__decorateClass([
+  state()
+], FlowUiOption.prototype, "hasHover", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiOption.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiOption.prototype, "disabled", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiOption.prototype, "size", 2);
+__decorateClass([
+  watch("disabled")
+], FlowUiOption.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("selected")
+], FlowUiOption.prototype, "handleSelectedChange", 1);
+__decorateClass([
+  watch("value")
+], FlowUiOption.prototype, "handleValueChange", 1);
+
+export { FlowUiOption as default };

package/dist/components/option/option.mjs

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

package/dist/components/option/option.styles.mjs

@@ -0,0 +1,102 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+    user-select: none;
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  .option {
+    position: relative;
+    display: flex;
+    align-items: center;
+    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-x-small) var(--flow-ui-spacing-medium) var(--flow-ui-spacing-x-small)
+      var(--flow-ui-spacing-x-small);
+    transition: var(--flow-ui-transition-fast) fill;
+    cursor: pointer;
+  }
+
+  .option--small {
+    font-size: var(--flow-ui-font-size-small);
+    padding: var(--flow-ui-spacing-2x-small) var(--flow-ui-spacing-small) var(--flow-ui-spacing-2x-small)
+      var(--flow-ui-spacing-2x-small);
+  }
+
+  .option--large {
+    font-size: var(--flow-ui-font-size-large);
+  }
+
+  .option--hover:not(.option--current):not(.option--disabled) {
+    background-color: var(--flow-ui-color-neutral-100);
+    color: var(--flow-ui-color-neutral-1000);
+  }
+
+  .option--current,
+  .option--current.option--disabled {
+    background-color: var(--flow-ui-color-primary-500);
+    color: var(--flow-ui-color-primary-contrast);
+    opacity: 1;
+  }
+
+  .option--disabled {
+    outline: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .option__label {
+    flex: 1 1 auto;
+    display: inline-block;
+    line-height: var(--flow-ui-line-height-dense);
+  }
+
+  .option .option__check {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden;
+    padding-inline-end: var(--flow-ui-spacing-2x-small);
+  }
+
+  .option--selected .option__check {
+    visibility: visible;
+  }
+
+  .option__prefix,
+  .option__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .option__prefix::slotted(*) {
+    margin-inline-end: var(--flow-ui-spacing-x-small);
+  }
+
+  .option__suffix::slotted(*) {
+    margin-inline-start: var(--flow-ui-spacing-x-small);
+  }
+
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) .option {
+      outline: dashed 1px SelectedItem;
+      outline-offset: -1px;
+    }
+  }
+`;
+
+export { styles as default };

package/dist/components/panel/panel.component.mjs

@@ -0,0 +1,90 @@
+import { html } from 'lit';
+import { 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 styles from './panel.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 FlowUiPanel extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.closed = false;
+    this.scrollable = false;
+    this.padding = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.closed = boolean(this.closed, true);
+    this.scrollable = boolean(this.scrollable, true);
+    this.padding = boolean(this.padding, true);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  /** Open the panel */
+  async expand(emitEvent = true) {
+    if (this.closed) {
+      this.closed = false;
+      if (emitEvent) {
+        this.emit("flow-ui-expand");
+      }
+    }
+  }
+  /** Close the panel */
+  async collapse(emitEvent = true) {
+    if (!this.closed) {
+      this.closed = true;
+      if (emitEvent) {
+        this.emit("flow-ui-collapse");
+      }
+    }
+  }
+  render() {
+    return html`
+      <div
+        class=${classMap({
+      panel: true,
+      "panel--closed": this.closed,
+      "panel--scrollable": this.scrollable,
+      "panel--with-padding": this.padding
+    })}
+      >
+        <slot
+          name="header"
+          class="panel__header"
+          @flow-ui-expand=${this.expand}
+          @flow-ui-collapse=${this.collapse}
+        ></slot>
+
+        <div class="panel__body-wrapper">
+          <div part="body" class="panel__body">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+FlowUiPanel.styles = styles;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiPanel.prototype, "closed", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiPanel.prototype, "scrollable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiPanel.prototype, "padding", 2);
+
+export { FlowUiPanel as default };

package/dist/components/panel/panel.mjs

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

package/dist/components/panel/panel.styles.mjs

@@ -0,0 +1,51 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+    min-height: 0;
+
+    --padding: var(--flow-ui-spacing-small);
+    --background-color: var(--flow-ui-panel-background-color);
+    --color: var(--flow-ui-panel-color);
+  }
+
+  .panel {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--background-color);
+    color: var(--color);
+  }
+
+  /* Body */
+  .panel__body-wrapper {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  /* For scrollable panel - enable scroll and (optionally) add padding to scrollable content */
+  .panel--scrollable .panel__body-wrapper {
+    overflow-y: auto;
+  }
+
+  .panel--scrollable.panel--with-padding .panel__body {
+    padding: var(--padding);
+  }
+
+  /* For non-scrollable panel - fix body at 100% and disable scroll. Padding is added to wrapper */
+  .panel.panel--with-padding:not(.panel--scrollable) .panel__body-wrapper {
+    padding: var(--padding);
+  }
+
+  .panel:not(.panel--scrollable) .panel__body {
+    height: 100%;
+    overflow-y: hidden;
+  }
+`;
+
+export { styles as default };

package/dist/components/panel-header/panel-header.component.mjs

@@ -0,0 +1,131 @@
+import { html, nothing } 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 { HasSlotController } from '../../internal/slot.mjs';
+import styles from './panel-header.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 FlowUiPanelHeader extends FlowRdfElement {
+  constructor() {
+    super();
+    this.hasSlotController = new HasSlotController(this, "prefix", "suffix");
+    this.closed = false;
+    this.fixed = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.closed = boolean(this.closed, true);
+    this.fixed = boolean(this.fixed, true);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  // Private methods
+  handleHeaderClick() {
+    if (this.fixed) {
+      return;
+    }
+    this.closed = !this.closed;
+    this.emit(this.closed ? "flow-ui-collapse" : "flow-ui-expand");
+    this.header.focus();
+  }
+  handleAccessoryClick(event) {
+    event.stopPropagation();
+  }
+  handleHeaderKeyDown(event) {
+    if (this.fixed) {
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.closed = !this.closed;
+    }
+    if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.closed = true;
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+      event.preventDefault();
+      this.closed = false;
+    }
+    this.emit(this.closed ? "flow-ui-collapse" : "flow-ui-expand");
+  }
+  handleToggleButtonExpandCollapse(event) {
+    event.stopPropagation();
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "panel-header": true,
+      "panel-header--closed": this.closed,
+      "panel-header--open": !this.closed,
+      "panel-header-prefix": this.hasSlotController.test("prefix"),
+      "panel-header-suffix": this.hasSlotController.test("suffix")
+    })}
+        role="button"
+        aria-expanded=${this.closed ? "false" : "true"}
+        aria-controls="content"
+        tabindex="0"
+        @click=${this.handleHeaderClick}
+        @keydown=${this.handleHeaderKeyDown}
+      >
+        <slot
+          name="prefix"
+          part="prefix"
+          class="panel-header__prefix"
+          @click=${this.handleAccessoryClick}
+          @keydown=${this.handleHeaderKeyDown}
+        ></slot>
+
+        <slot name="title" part="title" class="panel-header__title-slot">
+          <span class="panel-header__title">${this.title}</span>
+        </slot>
+
+        <slot
+          name="suffix"
+          part="suffix"
+          class="panel-header__suffix"
+          @click=${this.handleAccessoryClick}
+          @keydown=${this.handleHeaderKeyDown}
+        ></slot>
+        ${this.fixed ? nothing : html`
+              <flow-ui-split-view-toggle-button
+                position="top"
+                ?closed=${this.closed}
+                @flow-ui-expand=${this.handleToggleButtonExpandCollapse}
+                @flow-ui-collapse=${this.handleToggleButtonExpandCollapse}
+              ></flow-ui-split-view-toggle-button>
+            `}
+      </div>
+    `;
+  }
+}
+FlowUiPanelHeader.styles = styles;
+__decorateClass([
+  query(".panel-header")
+], FlowUiPanelHeader.prototype, "header", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiPanelHeader.prototype, "closed", 2);
+__decorateClass([
+  property()
+], FlowUiPanelHeader.prototype, "title", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiPanelHeader.prototype, "fixed", 2);
+
+export { FlowUiPanelHeader as default };

package/dist/components/panel-header/panel-header.mjs

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

package/dist/components/panel-header/panel-header.styles.mjs

@@ -0,0 +1,67 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+
+    --padding: var(--flow-ui-panel-header-padding);
+    --header-height: var(--flow-ui-panel-header-height);
+    --background-color: var(--flow-ui-panel-header-background-color);
+    --color: var(--flow-ui-panel-header-color);
+    --accessory-color: var(--flow-ui-panel-header-accessory-color);
+  }
+
+  .panel-header {
+    display: flex;
+    align-items: center;
+    gap: var(--flow-ui-spacing-small);
+
+    height: var(--header-height);
+    padding: var(--padding);
+
+    color: var(--color);
+    background-color: var(--background-color);
+    user-select: none;
+  }
+
+  .panel-header__prefix,
+  .panel-header__suffix,
+  .panel-header__icon {
+    color: var(--accessory-color);
+  }
+
+  .panel-header__title-slot {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .panel-header__title {
+    font-weight: var(--flow-ui-panel-header-font-weight);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .panel-header__icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    transition: var(--flow-ui-transition-medium) rotate ease;
+  }
+
+  .panel-header--open .panel-header__icon {
+    rotate: 90deg;
+  }
+
+  .panel-header--open slot[name='expand-icon'],
+  .panel-header:not(.panel-header--open) slot[name='collapse-icon'] {
+    display: none;
+  }
+`;
+
+export { styles as default };