@emuanalytics/flow-rdf-ui 4.0.5 → 4.0.6

package/dist/components/range/range.styles.mjs

@@ -0,0 +1,233 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+import formControlStyles from '../../styles/form-control.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+  ${formControlStyles}
+
+  :host {
+    --thumb-size: 20px;
+    --tooltip-offset: 10px;
+    --track-color-active: var(--flow-ui-color-neutral-200);
+    --track-color-inactive: var(--flow-ui-color-neutral-200);
+    --track-active-offset: 0%;
+    --track-height: 6px;
+
+    display: block;
+  }
+
+  .range {
+    position: relative;
+  }
+
+  .range__control {
+    --percent: 0%;
+    -webkit-appearance: none;
+    border-radius: 3px;
+    width: 100%;
+    height: var(--track-height);
+    background: transparent;
+    line-height: var(--flow-ui-input-height-medium);
+    vertical-align: middle;
+    margin: 0;
+
+    background-image: linear-gradient(
+      to right,
+      var(--track-color-inactive) 0%,
+      var(--track-color-inactive) min(var(--percent), var(--track-active-offset)),
+      var(--track-color-active) min(var(--percent), var(--track-active-offset)),
+      var(--track-color-active) max(var(--percent), var(--track-active-offset)),
+      var(--track-color-inactive) max(var(--percent), var(--track-active-offset)),
+      var(--track-color-inactive) 100%
+    );
+  }
+
+  .range--rtl .range__control {
+    background-image: linear-gradient(
+      to left,
+      var(--track-color-inactive) 0%,
+      var(--track-color-inactive) min(var(--percent), var(--track-active-offset)),
+      var(--track-color-active) min(var(--percent), var(--track-active-offset)),
+      var(--track-color-active) max(var(--percent), var(--track-active-offset)),
+      var(--track-color-inactive) max(var(--percent), var(--track-active-offset)),
+      var(--track-color-inactive) 100%
+    );
+  }
+
+  /* Webkit */
+  .range__control::-webkit-slider-runnable-track {
+    width: 100%;
+    height: var(--track-height);
+    border-radius: 3px;
+    border: none;
+  }
+
+  .range__control::-webkit-slider-thumb {
+    border: none;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    border-radius: 50%;
+    background-color: var(--flow-ui-color-primary-500);
+    border: solid var(--flow-ui-input-border-width) var(--flow-ui-color-primary-500);
+    -webkit-appearance: none;
+    margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);
+    cursor: pointer;
+  }
+
+  .range__control:enabled::-webkit-slider-thumb:hover {
+    background-color: var(--flow-ui-color-primary-400);
+    border-color: var(--flow-ui-color-primary-400);
+  }
+
+  .range__control:enabled:focus-visible::-webkit-slider-thumb {
+    outline: var(--flow-ui-focus-ring);
+    outline-offset: var(--flow-ui-focus-ring-offset);
+  }
+
+  .range__control:enabled::-webkit-slider-thumb:active {
+    background-color: var(--flow-ui-color-primary-400);
+    border-color: var(--flow-ui-color-primary-400);
+    cursor: grabbing;
+  }
+
+  /* Firefox */
+  .range__control::-moz-focus-outer {
+    border: 0;
+  }
+
+  .range__control::-moz-range-progress {
+    background-color: var(--track-color-active);
+    border-radius: 3px;
+    height: var(--track-height);
+  }
+
+  .range__control::-moz-range-track {
+    width: 100%;
+    height: var(--track-height);
+    background-color: var(--track-color-inactive);
+    border-radius: 3px;
+    border: none;
+  }
+
+  .range__control::-moz-range-thumb {
+    border: none;
+    height: var(--thumb-size);
+    width: var(--thumb-size);
+    border-radius: 50%;
+    background-color: var(--flow-ui-color-primary-500);
+    border-color: var(--flow-ui-color-primary-500);
+    transition: var(--flow-ui-transition-fast) border-color, var(--flow-ui-transition-fast) background-color,
+      var(--flow-ui-transition-fast) color, var(--flow-ui-transition-fast) box-shadow;
+    cursor: pointer;
+  }
+
+  .range__control:enabled::-moz-range-thumb:hover {
+    background-color: var(--flow-ui-color-primary-400);
+    border-color: var(--flow-ui-color-primary-400);
+  }
+
+  .range__control:enabled:focus-visible::-moz-range-thumb {
+    outline: var(--flow-ui-focus-ring);
+    outline-offset: var(--flow-ui-focus-ring-offset);
+  }
+
+  .range__control:enabled::-moz-range-thumb:active {
+    background-color: var(--flow-ui-color-primary-400);
+    border-color: var(--flow-ui-color-primary-400);
+    cursor: grabbing;
+  }
+
+  /* States */
+  .range__control:focus-visible {
+    outline: none;
+  }
+
+  .range__control:disabled {
+    opacity: 0.5;
+  }
+
+  .range__control:disabled::-webkit-slider-thumb {
+    cursor: not-allowed;
+  }
+
+  .range__control:disabled::-moz-range-thumb {
+    cursor: not-allowed;
+  }
+
+  /* Tooltip output */
+  .range__tooltip {
+    position: absolute;
+    z-index: var(--flow-ui-z-index-tooltip);
+    left: 0;
+    border-radius: var(--flow-ui-tooltip-border-radius);
+    background-color: var(--flow-ui-tooltip-background-color);
+    font-family: var(--flow-ui-tooltip-font-family);
+    font-size: var(--flow-ui-tooltip-font-size);
+    font-weight: var(--flow-ui-tooltip-font-weight);
+    line-height: var(--flow-ui-tooltip-line-height);
+    color: var(--flow-ui-tooltip-color);
+    opacity: 0;
+    padding: var(--flow-ui-tooltip-padding);
+    transition: var(--flow-ui-transition-fast) opacity;
+    pointer-events: none;
+  }
+
+  .range__tooltip:after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    left: 50%;
+    translate: calc(-1 * var(--flow-ui-tooltip-arrow-size));
+  }
+
+  .range--tooltip-visible .range__tooltip {
+    opacity: 1;
+  }
+
+  /* Tooltip on top */
+  .range--tooltip-top .range__tooltip {
+    top: calc(-1 * var(--thumb-size) - var(--tooltip-offset));
+  }
+
+  .range--tooltip-top .range__tooltip:after {
+    border-top: var(--flow-ui-tooltip-arrow-size) solid var(--flow-ui-tooltip-background-color);
+    border-left: var(--flow-ui-tooltip-arrow-size) solid transparent;
+    border-right: var(--flow-ui-tooltip-arrow-size) solid transparent;
+    top: 100%;
+  }
+
+  /* Tooltip on bottom */
+  .range--tooltip-bottom .range__tooltip {
+    bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset));
+  }
+
+  .range--tooltip-bottom .range__tooltip:after {
+    border-bottom: var(--flow-ui-tooltip-arrow-size) solid var(--flow-ui-tooltip-background-color);
+    border-left: var(--flow-ui-tooltip-arrow-size) solid transparent;
+    border-right: var(--flow-ui-tooltip-arrow-size) solid transparent;
+    bottom: 100%;
+  }
+
+  @media (forced-colors: active) {
+    .range__control,
+    .range__tooltip {
+      border: solid 1px transparent;
+    }
+
+    .range__control::-webkit-slider-thumb {
+      border: solid 1px transparent;
+    }
+
+    .range__control::-moz-range-thumb {
+      border: solid 1px transparent;
+    }
+
+    .range__tooltip:after {
+      display: none;
+    }
+  }
+`;
+
+export { styles as default };

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

@@ -0,0 +1,80 @@
+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 './resize-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 FlowUiResizeObserver extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.observedElements = [];
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.disabled = boolean(this.disabled, true);
+    this.resizeObserver = new ResizeObserver((entries) => {
+      this.emit("flow-ui-resize", { detail: { entries } });
+    });
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopObserver();
+  }
+  handleSlotChange() {
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  startObserver() {
+    const slot = this.shadowRoot.querySelector("slot");
+    if (slot !== null) {
+      const elements = slot.assignedElements({ flatten: true });
+      this.observedElements.forEach((el) => this.resizeObserver.unobserve(el));
+      this.observedElements = [];
+      elements.forEach((el) => {
+        this.resizeObserver.observe(el);
+        this.observedElements.push(el);
+      });
+    }
+  }
+  stopObserver() {
+    this.resizeObserver.disconnect();
+  }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.stopObserver();
+    } else {
+      this.startObserver();
+    }
+  }
+  render() {
+    return html`
+      <slot @slotchange=${this.handleSlotChange}></slot>
+    `;
+  }
+}
+FlowUiResizeObserver.styles = styles;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiResizeObserver.prototype, "disabled", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], FlowUiResizeObserver.prototype, "handleDisabledChange", 1);
+
+export { FlowUiResizeObserver as default };

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

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

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