@emuanalytics/flow-rdf-ui 4.0.4 → 4.0.6

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

@@ -0,0 +1,96 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    --divider-width: 2px;
+    --divider-hit-area: 12px;
+    --color: var(--flow-ui-divider-color);
+
+    display: block;
+  }
+
+  .divider {
+    height: 100%;
+    display: flex;
+    position: relative;
+    background-color: var(--color);
+    color: var(--flow-ui-color-neutral-900);
+  }
+
+  :host(:not([vertical])) .divider {
+    width: var(--divider-width);
+  }
+
+  :host([vertical]) .divider {
+    height: var(--divider-width);
+  }
+
+  .divider-highlight {
+    width: 100%;
+    height: 100%;
+    background-color: var(--flow-ui-color-primary-500);
+    transition: transform var(--flow-ui-transition-fast) ease-in-out;
+    transition-delay: var(--flow-ui-transition-x-fast);
+    transform: scale(0);
+  }
+
+  :host([dragging]) .divider-highlight,
+  .divider:hover .divider-highlight {
+    transform: scale(1);
+  }
+
+  .divider:focus {
+    outline: none;
+  }
+
+  :host(:not([disabled])) .divider:focus-visible {
+    background-color: var(--flow-ui-color-primary-500);
+    color: var(--flow-ui-color-neutral-0);
+  }
+
+  :host([disabled]) .divider {
+    cursor: not-allowed;
+  }
+
+  :host([hidden]) .divider {
+    pointer-events: none;
+  }
+
+  :host([dragging]) {
+    transition: none;
+  }
+
+  /* Horizontal */
+  :host(:not([vertical], [disabled])) .divider {
+    cursor: col-resize;
+  }
+
+  :host(:not([vertical])) .divider::after {
+    display: flex;
+    content: '';
+    position: absolute;
+    height: 100%;
+    left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
+    width: var(--divider-hit-area);
+    z-index: 1;
+  }
+
+  /* Vertical */
+  :host([vertical]:not([disabled])) .divider {
+    cursor: row-resize;
+  }
+
+  :host([vertical]) .divider::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
+    height: var(--divider-hit-area);
+    z-index: 1;
+  }
+`;
+
+export { styles as default };

package/dist/components/split-view-pane/split-view-pane.component.mjs

@@ -0,0 +1,126 @@
+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 { setDefaultAnimation } from '../../utilities/animation-registry.mjs';
+import styles from './split-view-pane.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 FlowUiSplitViewPane extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.vertical = false;
+    this.closed = false;
+    this.divider = false;
+    this.hidden = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.vertical = boolean(this.vertical, true);
+    this.closed = boolean(this.closed, true);
+    this.divider = boolean(this.divider, true);
+    this.hidden = boolean(this.hidden, true);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  /** @internal */
+  cancelDrag() {
+    if (this.dividerComponent) {
+      this.dividerComponent.cancelDrag();
+    }
+  }
+  /** Open the split pane. */
+  async expand(emitEvent = true) {
+    if (this.closed) {
+      this.closed = false;
+      if (emitEvent) {
+        this.emit("flow-ui-expand");
+      }
+    }
+  }
+  /** Close the split pane. */
+  async collapse(emitEvent = true) {
+    if (!this.closed) {
+      this.closed = true;
+      if (emitEvent) {
+        this.emit("flow-ui-collapse");
+      }
+    }
+  }
+  render() {
+    return html`
+      <div
+        class=${classMap({
+      "split-view-pane": true,
+      "split-view-pane--vertical": this.vertical,
+      "split-view-pane--horizontal": !this.vertical,
+      "split-view-pane--hidden": this.hidden,
+      "split-view-pane--closed": this.closed
+    })}
+        @flow-ui-expand=${this.expand}
+        @flow-ui-collapse=${this.collapse}
+      >
+        <div part="contents" class="split-view-pane__contents">
+          <slot></slot>
+        </div>
+        ${this.divider ? html`
+              <flow-ui-split-view-divider
+                part="divider"
+                ?vertical=${this.vertical}
+                class="split-view-pane__divider"
+              ></flow-ui-split-view-divider>
+            ` : nothing}
+      </div>
+    `;
+  }
+}
+FlowUiSplitViewPane.styles = styles;
+__decorateClass([
+  query(".split-view-pane__divider")
+], FlowUiSplitViewPane.prototype, "dividerComponent", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiSplitViewPane.prototype, "vertical", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiSplitViewPane.prototype, "size", 2);
+__decorateClass([
+  property({ attribute: "min-size", reflect: true })
+], FlowUiSplitViewPane.prototype, "minSize", 2);
+__decorateClass([
+  property({ attribute: "max-size", reflect: true })
+], FlowUiSplitViewPane.prototype, "maxSize", 2);
+__decorateClass([
+  property({ attribute: "closed-size", reflect: true })
+], FlowUiSplitViewPane.prototype, "closedSize", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiSplitViewPane.prototype, "closed", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiSplitViewPane.prototype, "divider", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiSplitViewPane.prototype, "hidden", 2);
+setDefaultAnimation("split-view-pane.expand", {
+  keyframes: [{ height: "0" }, { height: "auto" }],
+  options: { duration: 250, easing: "linear" }
+});
+setDefaultAnimation("split-view-pane.collapse", {
+  keyframes: [{ height: "auto" }, { height: "0" }],
+  options: { duration: 250, easing: "linear" }
+});
+
+export { FlowUiSplitViewPane as default };

package/dist/components/split-view-pane/split-view-pane.mjs

@@ -0,0 +1,5 @@
+import FlowUiSplitViewPane from './split-view-pane.component.mjs';
+
+
+
+export { FlowUiSplitViewPane as default };

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

@@ -0,0 +1,49 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+    min-height: 0;
+  }
+
+  :host([hidden]) {
+    min-height: 0;
+  }
+
+  .split-view-pane {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+  }
+
+  :host([vertical]) .split-view-pane {
+    flex-direction: column;
+  }
+
+  .split-view-pane--hidden {
+    display: none;
+  }
+
+  /* Body */
+
+  .split-view-pane__contents {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .split-view-pane--vertical .split-view-pane__contents {
+    /* Ensure panel ignores minimum content height */
+    min-height: 0;
+  }
+
+  .split-view-pane--horizontal .split-view-pane__contents {
+    /* Ensure panel ignores minimum content height */
+    min-width: 0;
+  }
+`;
+
+export { styles as default };

package/dist/components/split-view-toggle-button/split-view-toggle-button.component.mjs

@@ -0,0 +1,76 @@
+import { property } from 'lit/decorators.js';
+import { boolean } from '../../internal/boolean.mjs';
+import FlowUiIconButton from '../icon-button/icon-button.component.mjs';
+import styles from './split-view-toggle-button.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 FlowUiSplitViewToggleButton extends FlowUiIconButton {
+  constructor() {
+    super(...arguments);
+    this.parentPane = null;
+    this.parentPanelObserver = null;
+    this.name = "chevron-right";
+    this.library = "system";
+    this.closed = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.closed = boolean(this.closed, true);
+    this.parentPane = this.closestElement("flow-ui-split-view-pane");
+    if (this.parentPane) {
+      this.parentPanelObserver = new MutationObserver(() => {
+        this.closed = this.parentPane.closed;
+      });
+      this.parentPanelObserver.observe(this.parentPane, {
+        attributes: true,
+        attributeFilter: ["closed"]
+      });
+      this.closed = this.parentPane.closed;
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.parentPanelObserver) {
+      this.parentPanelObserver.disconnect();
+      this.parentPanelObserver = null;
+    }
+  }
+  handleClick(event) {
+    super.handleClick(event);
+    this.closed = !this.closed;
+    this.emit(this.closed ? "flow-ui-collapse" : "flow-ui-expand");
+  }
+  closestElement(selector, base = this) {
+    function __closestFrom(el) {
+      if (!el || el === document || el === window)
+        return null;
+      if (el.assignedSlot)
+        el = el.assignedSlot;
+      const found = el.closest(selector);
+      return found ? found : __closestFrom(el.getRootNode().host);
+    }
+    return __closestFrom(base);
+  }
+}
+FlowUiSplitViewToggleButton.styles = [FlowUiIconButton.styles, styles];
+__decorateClass([
+  property()
+], FlowUiSplitViewToggleButton.prototype, "name", 2);
+__decorateClass([
+  property()
+], FlowUiSplitViewToggleButton.prototype, "library", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiSplitViewToggleButton.prototype, "closed", 2);
+
+export { FlowUiSplitViewToggleButton as default };

package/dist/components/split-view-toggle-button/split-view-toggle-button.mjs

@@ -0,0 +1,5 @@
+import FlowUiSplitViewToggleButton from './split-view-toggle-button.component.mjs';
+
+
+
+export { FlowUiSplitViewToggleButton as default };

package/dist/components/split-view-toggle-button/split-view-toggle-button.styles.mjs

@@ -0,0 +1,40 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    --closed-rotation: 0deg;
+    --open-rotation: 180deg;
+  }
+
+  :host([position='right'])  {
+    --closed-rotation: 180deg;
+    --open-rotation: 0deg;
+  }
+
+  :host([position='top'])  {
+    --closed-rotation: 0deg;
+    --open-rotation: 90deg;
+  }
+
+  :host([position='bottom'])  {
+    --closed-rotation: 0deg;
+    --open-rotation: 90deg;
+  }
+
+  :host([closed]) .icon-button {
+    transform: rotate(var(--closed-rotation));
+  }
+
+  :host(:not([closed])) .icon-button {
+    transform: rotate(var(--open-rotation));
+  }
+
+  .icon-button {
+    transition: transform var(--flow-ui-transition-medium) ease-in-out;
+  }
+`;
+
+export { styles as default };

package/dist/components/stepper/stepper.component.mjs

@@ -0,0 +1,139 @@
+import { html, nothing } from 'lit';
+import { query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { scrollIntoView } from '../../internal/scroll.mjs';
+import styles from './stepper.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 id = 0;
+class FlowUiStepper extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.attrId = ++id;
+    this.componentId = `flow-ui-stepper-${this.attrId}`;
+    this.panels = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+    this.mutationObserver = new MutationObserver((_mutations) => {
+      this.syncPanels();
+    });
+    this.updateComplete.then(() => {
+      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) {
+      panel.complete = complete;
+    }
+  }
+  show(panelName) {
+    const panel = this.panels.find((el) => el.name === panelName);
+    if (panel) {
+      this.setActivePanel(panel);
+    }
+  }
+  syncPanels() {
+    this.panels = this.getAllPanels();
+    this.activePanel = this.panels.find((el) => el.active);
+    if (!this.activePanel) {
+      this.activePanel = this.panels[0];
+    }
+  }
+  getAllPanels() {
+    return [...this.bodySlot.assignedElements()].filter(
+      (el) => el.tagName.toLowerCase() === "flow-ui-stepper-panel"
+    );
+  }
+  setActivePanel(panel, options) {
+    options = {
+      emitEvents: true,
+      scrollBehavior: "auto",
+      ...options
+    };
+    if (panel !== this.activePanel) {
+      const previousPanel = this.activePanel;
+      this.activePanel = panel;
+      this.panels.forEach((el) => el.active = el === this.activePanel);
+      const panelIndex = this.panels.indexOf(this.activePanel);
+      const panelHeaderItem = this.headerScrollContainer.getElementsByClassName("stepper__header-item").item(panelIndex);
+      scrollIntoView(panelHeaderItem, this.headerScrollContainer, "horizontal", options.scrollBehavior);
+      if (options.emitEvents) {
+        if (previousPanel) {
+          this.emit("flow-ui-tab-hide", { detail: { name: previousPanel.name } });
+        }
+        this.emit("flow-ui-tab-show", { detail: { name: this.activePanel.name } });
+      }
+    }
+  }
+  renderHeaderItem(panel, index) {
+    return html`
+      <div
+        class=${classMap({
+      "stepper__header-item": true,
+      "stepper__header-item--active": panel.active,
+      "stepper__header-item--complete": panel.complete
+    })}
+      >
+        <div class="stepper__header-item-icon">
+          <div class="stepper__header-item-icon-content">${index + 1}</div>
+        </div>
+        <div class="stepper__header-item-label">
+          <div class="stepper__header-item-title">${panel.title}</div>
+          ${panel.subTitle ? html`
+                <div class="stepper__header-item-subtitle">${panel.subTitle}</div>
+              ` : nothing}
+        </div>
+      </div>
+    `;
+  }
+  renderHeader() {
+    return this.panels.map((panel, index) => {
+      const template = [this.renderHeaderItem(panel, index)];
+      if (index > 0) {
+        template.unshift(html`
+          <div class="stepper__header-line"></div>
+        `);
+      }
+      return template;
+    });
+  }
+  render() {
+    return html`
+      <div part="base" class="stepper">
+        <div class="stepper_header-scroll-container">
+          <div part="header" class="stepper__header">${this.renderHeader()}</div>
+        </div>
+        <div part="body" class="stepper__body">
+          <slot class="stepper__body-slot" @slotchange=${this.syncPanels}></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+FlowUiStepper.styles = styles;
+__decorateClass([
+  query(".stepper__body-slot")
+], FlowUiStepper.prototype, "bodySlot", 2);
+__decorateClass([
+  query(".stepper_header-scroll-container")
+], FlowUiStepper.prototype, "headerScrollContainer", 2);
+__decorateClass([
+  state()
+], FlowUiStepper.prototype, "panels", 2);
+
+export { FlowUiStepper as default };

package/dist/components/stepper/stepper.mjs

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

package/dist/components/stepper/stepper.styles.mjs

@@ -0,0 +1,103 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+    --header-height: 56px;
+    --header-icon-size: 24px;
+  }
+
+  .stepper_header-scroll-container {
+    overflow-x: auto;
+
+    /* Hide scrollbar in Firefox */
+    scrollbar-width: none;
+  }
+
+  /* Hide scrollbar in webkit */
+  .stepper_header-scroll-container::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .stepper__header {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+
+  .stepper__header-item {
+    display: flex;
+    align-items: center;
+    padding-inline: var(--flow-ui-spacing-large);
+    height: var(--header-height);
+    box-sizing: content-box;
+  }
+
+  .stepper__header-item--active {
+    background-color: var(--flow-ui-color-neutral-200);
+  }
+
+  .stepper__header-item-icon {
+    position: relative;
+    width: var(--header-icon-size);
+    height: var(--header-icon-size);
+    margin-right: var(--flow-ui-spacing-x-small);
+    flex: none;
+    border-radius: var(--flow-ui-border-radius-circle);
+    color: var(--flow-ui-color-neutral-800);
+    background-color: var(--flow-ui-color-neutral-400);
+  }
+
+  .stepper__header-item--active .stepper__header-item-icon, .stepper__header-item--complete .stepper__header-item-icon {
+    color: var(--flow-ui-color-primary-contrast);
+    background-color: var(--flow-ui-color-primary-500);
+  }
+
+  .stepper__header-item-icon-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .stepper__header-item-label {
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 50px;
+    vertical-align: middle;
+    line-height: var(--flow-ui-line-height-dense);
+    color: var(--flow-ui-color-neutral-700);
+  }
+
+  .stepper__header-item--active .stepper__header-item-label {
+    font-weight: var(--flow-ui-font-weight-semibold);
+    color: var(--flow-ui-color-neutral-1000);
+  }
+
+  .stepper__header-item-title {
+    font-size: var(--flow-ui-font-size-medium);
+  }
+
+  .stepper__header-item-subtitle {
+    font-size: var(--flow-ui-font-size-small);
+    color: var(--flow-ui-color-neutral-700);
+  }
+
+  .stepper__header-line {
+    border-top-width: 1px;
+    border-top-style: solid;
+    flex: auto;
+    height: 0;
+    margin: 0 calc(var(--flow-ui-spacing-large) / -2);
+    min-width: 32px;
+    border-top-color: var(--flow-ui-color-neutral-300);
+  }
+`;
+
+export { styles as default };