@nasa-terra/components 0.0.0

package/dist/chunks/chunk.KRXFJQUH.js

@@ -0,0 +1,179 @@
+import {
+  isValidDate
+} from "./chunk.OIDMX5LU.js";
+import {
+  date_range_slider_styles_default
+} from "./chunk.OU4UPMYR.js";
+import {
+  mergeTooltips
+} from "./chunk.KW4TJM4C.js";
+import {
+  watch
+} from "./chunk.ZK7QVWBI.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.PJXIJK2G.js";
+import {
+  __decorateClass
+} from "./chunk.RYPAZDXE.js";
+
+// src/components/date-range-slider/date-range-slider.component.ts
+import { property, query } from "lit/decorators.js";
+import { html } from "lit";
+import noUiSlider, {
+  PipsMode
+} from "nouislider";
+import { format } from "date-fns";
+var TerraDateRangeSlider = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.timeScale = "daily";
+    this.disabled = false;
+    this.hasPips = true;
+  }
+  updateSlider() {
+    this.renderSlider();
+  }
+  disabledChanged() {
+    var _a, _b, _c, _d;
+    this.disabled ? (_b = (_a = this.slider) == null ? void 0 : _a.noUiSlider) == null ? void 0 : _b.disable() : (_d = (_c = this.slider) == null ? void 0 : _c.noUiSlider) == null ? void 0 : _d.enable();
+  }
+  firstUpdated() {
+    this.renderSlider();
+  }
+  renderSlider() {
+    var _a;
+    if (!this.slider) {
+      return;
+    }
+    (_a = this.slider.noUiSlider) == null ? void 0 : _a.destroy();
+    if (!isValidDate(this.minDate) || !isValidDate(this.maxDate)) {
+      this.renderEmptySlider();
+      this.minDate && !isValidDate(this.minDate) && console.error("Invalid min date provided");
+      this.maxDate && !isValidDate(this.maxDate) && console.error("Invalid max date provided");
+      return;
+    }
+    const minDate = new Date(this.minDate);
+    const maxDate = new Date(this.maxDate);
+    const startDate = new Date(
+      isValidDate(this.startDate) ? this.startDate : this.minDate
+    );
+    const endDate = new Date(
+      isValidDate(this.endDate) ? this.endDate : this.maxDate
+    );
+    minDate.setUTCHours(0, 0, 0, 0);
+    startDate.setUTCHours(0, 0, 0, 0);
+    maxDate.setUTCHours(23, 59, 59, 999);
+    endDate.setUTCHours(23, 59, 59, 999);
+    const sliderOptions = {
+      range: {
+        // convert to milliseconds to define a range
+        min: minDate.getTime(),
+        max: maxDate.getTime()
+      },
+      step: this._getStep(),
+      start: [startDate.getTime(), endDate.getTime()],
+      // defaults to either the given start/end dates or the full date range (min/max date)
+      tooltips: [true, true],
+      // for each handle, choose whether to show a tooltip
+      connect: true,
+      // whether to connect the handles with a colorized bar
+      pips: {
+        mode: PipsMode.Range,
+        density: -1,
+        format: this._getSliderFormatter()
+      },
+      format: this._getSliderFormatter()
+    };
+    noUiSlider.create(this.slider, sliderOptions);
+    mergeTooltips(this.slider);
+    this.slider.noUiSlider.on("change", (values) => {
+      this.emit("terra-date-range-change", {
+        detail: {
+          startDate: this._formatDate(values[0]),
+          endDate: this._formatDate(values[1])
+        }
+      });
+    });
+  }
+  renderEmptySlider() {
+    noUiSlider.create(this.slider, {
+      start: [0, 0],
+      range: {
+        min: 0,
+        max: 0
+      }
+    });
+  }
+  _getStep() {
+    const oneMinuteMillis = 60 * 1e3;
+    const oneHourMillis = 60 * oneMinuteMillis;
+    const oneDayMillis = 24 * oneHourMillis;
+    switch (this.timeScale) {
+      case "half-hourly":
+        return 30 * oneMinuteMillis;
+      case "hourly":
+        return oneHourMillis;
+      default:
+        return oneDayMillis;
+    }
+  }
+  _getSliderFormatter() {
+    return {
+      to: (value) => {
+        return this._formatDate(value);
+      },
+      from: (value) => {
+        return Number(value);
+      }
+    };
+  }
+  _formatDate(date) {
+    const dateFormat = this.timeScale === "daily" ? "yyyy-MM-dd" : "yyyy-MM-dd HH:mm";
+    return format(new Date(date).toUTCString(), dateFormat);
+  }
+  render() {
+    const containerClass = "container" + this.hasPips ? " hasPips" : "";
+    return html`
+            <div class="${containerClass}">
+                <div part="slider"></div>
+            </div>
+        `;
+  }
+};
+TerraDateRangeSlider.styles = [component_styles_default, date_range_slider_styles_default];
+__decorateClass([
+  query('[part~="slider"]')
+], TerraDateRangeSlider.prototype, "slider", 2);
+__decorateClass([
+  property({ attribute: "time-scale" })
+], TerraDateRangeSlider.prototype, "timeScale", 2);
+__decorateClass([
+  property({ attribute: "min-date" })
+], TerraDateRangeSlider.prototype, "minDate", 2);
+__decorateClass([
+  property({ attribute: "max-date" })
+], TerraDateRangeSlider.prototype, "maxDate", 2);
+__decorateClass([
+  property({ attribute: "start-date" })
+], TerraDateRangeSlider.prototype, "startDate", 2);
+__decorateClass([
+  property({ attribute: "end-date" })
+], TerraDateRangeSlider.prototype, "endDate", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TerraDateRangeSlider.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "has-pips" })
+], TerraDateRangeSlider.prototype, "hasPips", 2);
+__decorateClass([
+  watch(["startDate", "endDate", "minDate", "maxDate"])
+], TerraDateRangeSlider.prototype, "updateSlider", 1);
+__decorateClass([
+  watch("disabled")
+], TerraDateRangeSlider.prototype, "disabledChanged", 1);
+
+export {
+  TerraDateRangeSlider
+};

package/dist/chunks/chunk.KW4TJM4C.js

@@ -0,0 +1,65 @@
+// src/components/date-range-slider/noui-slider-utilities.ts
+function mergeTooltips(slider, threshold = 15, separator = " - ") {
+  const textIsRtl = getComputedStyle(slider).direction === "rtl";
+  const isRtl = slider.noUiSlider.options.direction === "rtl";
+  const isVertical = slider.noUiSlider.options.orientation === "vertical";
+  const tooltips = slider.noUiSlider.getTooltips();
+  const origins = slider.noUiSlider.getOrigins();
+  tooltips.forEach(function(tooltip, index) {
+    if (tooltip) {
+      origins[index].appendChild(tooltip);
+    }
+  });
+  slider.noUiSlider.on(
+    "update",
+    function(values, _handle, _unencoded, _tap, positions) {
+      var pools = [[]];
+      var poolPositions = [[]];
+      var poolValues = [[]];
+      var atPool = 0;
+      if (tooltips[0]) {
+        pools[0][0] = 0;
+        poolPositions[0][0] = positions[0];
+        poolValues[0][0] = values[0];
+      }
+      for (var i = 1; i < positions.length; i++) {
+        if (!tooltips[i] || positions[i] - positions[i - 1] > threshold) {
+          atPool++;
+          pools[atPool] = [];
+          poolValues[atPool] = [];
+          poolPositions[atPool] = [];
+        }
+        if (tooltips[i]) {
+          pools[atPool].push(i);
+          poolValues[atPool].push(values[i]);
+          poolPositions[atPool].push(positions[i]);
+        }
+      }
+      pools.forEach(function(pool, poolIndex) {
+        var handlesInPool = pool.length;
+        for (var j = 0; j < handlesInPool; j++) {
+          var handleNumber = pool[j];
+          if (j === handlesInPool - 1) {
+            var offset = 0;
+            poolPositions[poolIndex].forEach(function(value) {
+              offset += 1e3 - value;
+            });
+            var direction = isVertical ? "bottom" : "right";
+            var last = isRtl ? 0 : handlesInPool - 1;
+            var lastOffset = 1e3 - poolPositions[poolIndex][last];
+            offset = (textIsRtl && !isVertical ? 100 : 0) + offset / handlesInPool - lastOffset;
+            tooltips[handleNumber].innerHTML = poolValues[poolIndex].join(separator);
+            tooltips[handleNumber].style.display = "block";
+            tooltips[handleNumber].style[direction] = offset + "%";
+          } else {
+            tooltips[handleNumber].style.display = "none";
+          }
+        }
+      });
+    }
+  );
+}
+
+export {
+  mergeTooltips
+};

package/dist/chunks/chunk.LE36I4N2.js

@@ -0,0 +1,24 @@
+import {
+  TerraVariableCombobox
+} from "./chunk.2RBWEAYS.js";
+
+// src/react/variable-combobox/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-variable-combobox";
+TerraVariableCombobox.define("terra-variable-combobox");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraVariableCombobox,
+  react: React,
+  events: {
+    onTerraComboboxChange: "terra-combobox-change"
+  },
+  displayName: "TerraVariableCombobox"
+});
+var variable_combobox_default = reactWrapper;
+
+export {
+  variable_combobox_default
+};