@emuanalytics/flow-rdf-ui 4.0.5 → 4.0.7

package/dist/components/scroll-view/scroll-view.component.mjs

@@ -0,0 +1,128 @@
+import { html, nothing } from 'lit';
+import { query, 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 { OverlayScrollbars } from 'overlayscrollbars';
+import { boolean } from '../../internal/boolean.mjs';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import styles from './scroll-view.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;
+const overlayScrollbarsRegistry = /* @__PURE__ */ new Map();
+let globalScrollViewOptions = {
+  mode: "overlay",
+  autoHide: "scroll",
+  autoHideDelay: 1e3,
+  autoHideSuspend: false
+};
+class FlowUiScrollView extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this._componentId = `flow-ui-scroll-view-${++id}`;
+    this.mode = globalScrollViewOptions.mode;
+    this.overflowX = "scroll";
+    this.overflowY = "scroll";
+    this.autoHide = globalScrollViewOptions.autoHide;
+    this.autoHideDelay = globalScrollViewOptions.autoHideDelay;
+    this.autoHideSuspend = globalScrollViewOptions.autoHideSuspend;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.autoHideSuspend = boolean(this.autoHideSuspend, true);
+  }
+  firstUpdated() {
+    if (this.mode === "overlay") {
+      this._overlayScrollbars = OverlayScrollbars(
+        {
+          target: this._scrollHost,
+          elements: {
+            viewport: this._scrollViewport
+          }
+        },
+        {}
+      );
+      overlayScrollbarsRegistry.set(this._componentId, this._overlayScrollbars);
+    }
+  }
+  updateScrollBars() {
+    this._overlayScrollbars?.update(true);
+  }
+  updated(_changedProperties) {
+    if (this._overlayScrollbars) {
+      this._overlayScrollbars.options({
+        overflow: {
+          x: this.overflowX,
+          y: this.overflowY
+        },
+        scrollbars: {
+          theme: "os-theme-flow",
+          autoHide: this.autoHide,
+          autoHideDelay: this.autoHideDelay,
+          autoHideSuspend: this.autoHideSuspend
+        }
+      });
+    }
+  }
+  disconnectedCallback() {
+    this._overlayScrollbars?.destroy();
+    this._overlayScrollbars = void 0;
+    overlayScrollbarsRegistry.delete(this._componentId);
+    super.disconnectedCallback();
+  }
+  render() {
+    const hostClasses = classMap({
+      "scroll-view__host": true,
+      "scroll-view--native": this.mode === "native"
+    });
+    const nativeStyles = styleMap({
+      "overflow-x": this.overflowX,
+      "overflow-y": this.overflowY
+    });
+    return html`
+      <div class=${hostClasses} style=${ifDefined(this.mode === "native" ? nativeStyles : nothing)}>
+        <div class="scroll-view__viewport">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+FlowUiScrollView.styles = styles;
+__decorateClass([
+  query(".scroll-view__host")
+], FlowUiScrollView.prototype, "_scrollHost", 2);
+__decorateClass([
+  query(".scroll-view__viewport")
+], FlowUiScrollView.prototype, "_scrollViewport", 2);
+__decorateClass([
+  property()
+], FlowUiScrollView.prototype, "mode", 2);
+__decorateClass([
+  property({ attribute: "overflow-x" })
+], FlowUiScrollView.prototype, "overflowX", 2);
+__decorateClass([
+  property({ attribute: "overflow-y" })
+], FlowUiScrollView.prototype, "overflowY", 2);
+__decorateClass([
+  property({ attribute: "auto-hide" })
+], FlowUiScrollView.prototype, "autoHide", 2);
+__decorateClass([
+  property({ attribute: "auto-hide-delay", type: Number })
+], FlowUiScrollView.prototype, "autoHideDelay", 2);
+__decorateClass([
+  property({ attribute: "auto-hide-suspend", type: Boolean })
+], FlowUiScrollView.prototype, "autoHideSuspend", 2);
+
+export { FlowUiScrollView as default };

package/dist/components/scroll-view/scroll-view.mjs

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

package/dist/components/scroll-view/scroll-view.styles.mjs

@@ -0,0 +1,57 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+import overlayScrollbarStyles from './overlay-scrollbar.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+  ${overlayScrollbarStyles}
+
+  :host {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .scroll-view__host {
+    flex: 1;
+  }
+
+  .os-theme-flow {
+    --transition-speed: var(--flow-ui-scrollbar-transition, var(--flow-ui-transition-slow, 0.5s));
+
+    box-sizing: border-box;
+    --os-size: 10px;
+    --os-padding-perpendicular: 2px;
+    --os-padding-axis: 2px;
+    --os-track-border-radius: 10px;
+    --os-handle-interactive-area-offset: 4px;
+    --os-handle-border-radius: 10px;
+
+    /* Colors */
+    --os-handle-bg: var(--flow-ui-scroll-handle-bg, var(--flow-ui-color-neutral-500));
+    --os-handle-bg-hover: var(--flow-ui-scroll-handle-bg-hover, var(--flow-ui-color-neutral-600));
+    --os-handle-bg-active: var(--flow-ui-scroll-handle-bg-active, var(--flow-ui-color-neutral-700));
+  }
+
+  .os-scrollbar.os-theme-flow {
+    transition: opacity var(--transition-speed), visibility var(--transition-speed), top var(--transition-speed),
+      right var(--transition-speed), bottom var(--transition-speed), left var(--transition-speed);
+  }
+
+  .os-scrollbar.os-theme-flow .os-scrollbar-track {
+    transition: opacity var(--transition-speed), background-color var(--transition-speed),
+      border-color var(--transition-speed);
+  }
+
+  .os-scrollbar-horizontal.os-theme-flow .os-scrollbar-handle {
+    transition: opacity var(--transition-speed), background-color var(--transition-speed),
+      border-color var(--transition-speed), height var(--transition-speed);
+  }
+
+  .os-scrollbar-vertical.os-theme-flow .os-scrollbar-handle {
+    transition: opacity var(--transition-speed), background-color var(--transition-speed),
+      border-colorvar(--transition-speed), width var(--transition-speed);
+  }
+`;
+
+export { styles as default };