@nasa-terra/components 0.0.182 → 0.0.183

package/cdn/chunks/chunk.6KDBUM42.js

@@ -0,0 +1,473 @@
+import {
+  TerraTooltip
+} from "./chunk.5H4YUN2X.js";
+import {
+  harmony_history_styles_default
+} from "./chunk.HFRKSSXY.js";
+import {
+  HarmonyRequest,
+  MutationController
+} from "./chunk.RISDH34C.js";
+import {
+  AuthController
+} from "./chunk.7DYV7ZXX.js";
+import {
+  QueryClientMixin
+} from "./chunk.N4WZUEQD.js";
+import {
+  FINAL_STATUSES,
+  QueryController,
+  mutationRemoveHarmonyJobLabels,
+  queryHarmonyJobs
+} from "./chunk.QKKAIJRP.js";
+import {
+  TerraLoader
+} from "./chunk.5DNWXD2R.js";
+import {
+  formatDate
+} from "./chunk.TKSEPVAL.js";
+import {
+  TerraIcon
+} from "./chunk.SMF3DMEV.js";
+import {
+  TerraElement,
+  component_styles_default,
+  e,
+  n,
+  r
+} from "./chunk.766SOYIM.js";
+import {
+  A,
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  __spreadValues,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/harmony-history/harmony-history.component.ts
+init_dirname();
+init_buffer();
+init_process();
+
+// src/events/terra-harmony-job-select.ts
+init_dirname();
+init_buffer();
+init_process();
+
+// src/events/terra-harmony-job-delete.ts
+init_dirname();
+init_buffer();
+init_process();
+
+// src/components/harmony-history/harmony-history.component.ts
+var STRIDE = 108;
+var TerraHarmonyHistory = class extends QueryClientMixin(TerraElement) {
+  constructor() {
+    super(...arguments);
+    this.limit = 10;
+    this.removeLabelsOnDelete = false;
+    this._scrollIndex = 0;
+    this._totalCount = 0;
+    this._loadedPages = /* @__PURE__ */ new Map();
+    this._pendingPages = /* @__PURE__ */ new Set();
+    this._authController = new AuthController(this);
+    this._removeLabelsOnDeleteMutation = new MutationController(
+      this,
+      mutationRemoveHarmonyJobLabels()
+    );
+    /**
+     * Page 1 is always managed by this QueryController (includes polling for non-final jobs).
+     * Other pages are fetched imperatively via _fetchPage().
+     */
+    this.jobsQuery = new QueryController(
+      this,
+      () => queryHarmonyJobs(
+        __spreadValues({
+          page: 1,
+          limit: this.limit
+        }, this.filterByLabels ? { label: this.filterByLabels } : {}),
+        { bearerToken: this.bearerToken }
+      )
+    );
+  }
+  get _visibleCount() {
+    var _a, _b;
+    const viewportWidth = (_b = (_a = this._viewportEl) == null ? void 0 : _a.clientWidth) != null ? _b : 400;
+    return Math.max(1, Math.floor(viewportWidth / STRIDE));
+  }
+  /** Returns all jobs as a sparse array — null slots represent not-yet-loaded pages */
+  get _allJobs() {
+    return Array.from({ length: this._totalCount }, (_, i) => {
+      var _a, _b;
+      const page = Math.floor(i / this.limit) + 1;
+      const indexInPage = i % this.limit;
+      return (_b = (_a = this._loadedPages.get(page)) == null ? void 0 : _a[indexInPage]) != null ? _b : null;
+    });
+  }
+  firstUpdated() {
+    if (this._viewportEl && typeof ResizeObserver !== "undefined") {
+      this._resizeObserver = new ResizeObserver(() => {
+        this._checkPagesInView();
+      });
+      this._resizeObserver.observe(this._viewportEl);
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
+  }
+  updated(changedProperties) {
+    var _a;
+    super.updated(changedProperties);
+    const data = (_a = this.jobsQuery.result) == null ? void 0 : _a.data;
+    if (data && data !== this._lastPage1Data) {
+      this._lastPage1Data = data;
+      if (data.count !== this._totalCount) {
+        this._totalCount = data.count;
+      }
+      const newMap = new Map(this._loadedPages);
+      newMap.set(1, data.jobs);
+      this._loadedPages = newMap;
+      this._checkPagesInView();
+    }
+  }
+  async _fetchPage(page) {
+    if (this._loadedPages.has(page) || this._pendingPages.has(page))
+      return;
+    const newPending = new Set(this._pendingPages);
+    newPending.add(page);
+    this._pendingPages = newPending;
+    try {
+      const data = await this.queryClient.fetchQuery(
+        queryHarmonyJobs(
+          __spreadValues({
+            page,
+            limit: this.limit
+          }, this.filterByLabels ? { label: this.filterByLabels } : {}),
+          { bearerToken: this.bearerToken }
+        )
+      );
+      const newMap = new Map(this._loadedPages);
+      newMap.set(page, data.jobs);
+      this._loadedPages = newMap;
+    } finally {
+      const newPending2 = new Set(this._pendingPages);
+      newPending2.delete(page);
+      this._pendingPages = newPending2;
+    }
+  }
+  _checkPagesInView() {
+    if (!this.bearerToken)
+      return;
+    const endIndex = Math.min(
+      this._scrollIndex + this._visibleCount,
+      this._totalCount
+    );
+    const startPage = Math.floor(this._scrollIndex / this.limit) + 1;
+    const endPage = Math.floor(Math.max(0, endIndex - 1) / this.limit) + 1;
+    for (let page = startPage; page <= endPage; page++) {
+      if (page === 1)
+        continue;
+      this._fetchPage(page);
+    }
+  }
+  _scrollLeft() {
+    this._scrollIndex = Math.max(0, this._scrollIndex - 1);
+    this._checkPagesInView();
+  }
+  _scrollRight() {
+    const max = Math.max(0, this._totalCount - this._visibleCount);
+    this._scrollIndex = Math.min(max, this._scrollIndex + 1);
+    this._checkPagesInView();
+  }
+  _handleWheel(e2) {
+    e2.preventDefault();
+    if (e2.deltaY > 0) {
+      this._scrollRight();
+    } else {
+      this._scrollLeft();
+    }
+  }
+  async refresh() {
+    this._scrollIndex = 0;
+    this._loadedPages = /* @__PURE__ */ new Map();
+    this._pendingPages = /* @__PURE__ */ new Set();
+    this._totalCount = 0;
+    this._lastPage1Data = void 0;
+    await this.queryClient.invalidateQueries({
+      queryKey: ["harmony", "jobs"]
+    });
+  }
+  _showTooltip(e2, job) {
+    var _a, _b, _c;
+    clearTimeout(this._hideTooltipTimer);
+    clearTimeout(this._showTooltipTimer);
+    if (!this._tooltip)
+      return;
+    const isNonFinal = job !== null && !FINAL_STATUSES.has(job.status);
+    const harmonyRequest = (job == null ? void 0 : job.request) ? HarmonyRequest.fromUrl(job.request) : null;
+    const tooltipContent = document.createElement("div");
+    if (harmonyRequest) {
+      const instrumentShortName = harmonyRequest.getLabelByPrefix(
+        "instrument-short-name"
+      );
+      const interval = harmonyRequest.getLabelByPrefix("time-interval");
+      const units = harmonyRequest.getLabelByPrefix("units");
+      const collection = harmonyRequest.getLabelByPrefix("collection");
+      const metadata = [];
+      if (instrumentShortName)
+        metadata.push(instrumentShortName);
+      if (interval)
+        metadata.push(interval);
+      if (units)
+        metadata.push(units);
+      if (collection)
+        metadata.push(collection);
+      tooltipContent.style.lineHeight = "1.3";
+      tooltipContent.style.fontSize = "12px";
+      tooltipContent.style.padding = "5px";
+      tooltipContent.innerHTML = `
+                <div class="font-weight-semibold tooltip-row">${(_a = harmonyRequest.getLabelByPrefix("variable-display-name")) != null ? _a : job == null ? void 0 : job.jobID}</div>
+                <div class="text-gray-300 mb-1 tooltip-row">${metadata.join(" \u2022 ")}</div>
+                ${harmonyRequest.options.startDate && harmonyRequest.options.endDate ? `
+                    <div class="text-gray-300 tooltip-row">
+                        <terra-icon library="heroicons" name="solid-calendar-date-range"></terra-icon> 
+                        ${formatDate(harmonyRequest.options.startDate)} to ${formatDate(harmonyRequest.options.endDate)}
+                    </div>
+                ` : ""}
+                <div class="text-gray-300 mb-1 tooltip-row">
+                    <terra-icon library="heroicons" name="solid-map"></terra-icon>
+                    ${(_b = harmonyRequest.options.location) == null ? void 0 : _b.toString()}
+                </div>
+                ${!isNonFinal ? `<div class="text-gray-300 tooltip-row">
+                        Last updated: ${formatDate((_c = harmonyRequest.getLabelByPrefix("updated-at")) != null ? _c : /* @__PURE__ */ new Date())}
+                        </div>` : `<div class="text-gray-300 tooltip-row">Status: ${job == null ? void 0 : job.status}</div>`}
+                
+            `;
+    }
+    tooltipContent.slot = "content";
+    const anchor = e2.currentTarget;
+    if (this._tooltip.open) {
+      this._tooltip.innerHTML = "";
+      this._tooltip.appendChild(tooltipContent);
+      this._tooltip.popup.anchor = anchor;
+      this._tooltip.popup.reposition();
+    } else {
+      this._showTooltipTimer = window.setTimeout(() => {
+        if (!this._tooltip)
+          return;
+        this._tooltip.innerHTML = "";
+        this._tooltip.appendChild(tooltipContent);
+        this._tooltip.popup.anchor = anchor;
+        this._tooltip.show();
+      }, 100);
+    }
+  }
+  _hideTooltip() {
+    clearTimeout(this._showTooltipTimer);
+    clearTimeout(this._hideTooltipTimer);
+    this._hideTooltipTimer = window.setTimeout(() => {
+      var _a;
+      (_a = this._tooltip) == null ? void 0 : _a.hide();
+    }, 250);
+  }
+  _handleThumbnailClick(job) {
+    if (!job)
+      return;
+    this.emit("terra-harmony-job-select", { detail: { job } });
+  }
+  async _handleDeleteClick(e2, job) {
+    var _a;
+    e2.stopPropagation();
+    const confirmed = window.confirm(
+      `Are you sure you want to delete this history item?`
+    );
+    if (!confirmed)
+      return;
+    const labels = (_a = this.filterByLabels) == null ? void 0 : _a.split(",").map((l) => l.trim()).filter(Boolean);
+    if (this.removeLabelsOnDelete && (labels == null ? void 0 : labels.length)) {
+      await this._removeLabelsOnDeleteMutation.mutate({
+        jobIDs: [job.jobID],
+        labels,
+        options: { bearerToken: this.bearerToken }
+      });
+      await this.queryClient.invalidateQueries({
+        queryKey: ["harmony", "jobs"]
+      });
+      this._loadedPages = /* @__PURE__ */ new Map();
+      this._totalCount = 0;
+      this._scrollIndex = 0;
+    } else {
+      this.emit("terra-harmony-job-delete", {
+        detail: { jobId: job.jobID }
+      });
+    }
+  }
+  _renderThumbnail(job) {
+    var _a, _b;
+    const showLoadingOverlay = job === null || !FINAL_STATUSES.has(job.status);
+    const thumbUrl = (job == null ? void 0 : job.thumbnailBlob) ? URL.createObjectURL(job.thumbnailBlob) : null;
+    const harmonyRequest = HarmonyRequest.fromUrl((_a = job == null ? void 0 : job.request) != null ? _a : "");
+    return b`
+            <div
+                part="thumbnail"
+                class="thumbnail"
+                @click=${() => this._handleThumbnailClick(job)}
+                @mouseenter=${(e2) => this._showTooltip(e2, job)}
+                @mouseleave=${this._hideTooltip}
+            >
+                <div class="thumbnail-inner">
+                    ${thumbUrl ? b`<img
+                              class="thumbnail-img"
+                              src=${thumbUrl}
+                              alt=""
+                              aria-hidden="true"
+                          />` : b`<terra-icon
+                              library="heroicons"
+                              name=${harmonyRequest.getTerraIcon()}
+                              style="font-size: 1.5rem"
+                          ></terra-icon>`}
+                    ${showLoadingOverlay ? b`<div class="loading-overlay">
+                              <terra-loader
+                                  indeterminate
+                                  variant="small"
+                              ></terra-loader>
+                          </div>` : A}
+                </div>
+                ${job ? b`<button
+                          class="delete-button"
+                          aria-label="Delete job"
+                          ?disabled=${(_b = this._removeLabelsOnDeleteMutation.result) == null ? void 0 : _b.isPending}
+                          @click=${(e2) => this._handleDeleteClick(e2, job)}
+                      >
+                          ×
+                      </button>` : A}
+            </div>
+        `;
+  }
+  render() {
+    var _a;
+    const jobs = this._allJobs;
+    const isAtStart = this._scrollIndex <= 0;
+    const isAtEnd = this._totalCount === 0 || this._scrollIndex >= this._totalCount - this._visibleCount;
+    const isInitialLoading = jobs.length === 0 && ((_a = this.jobsQuery.result) == null ? void 0 : _a.status) === "pending";
+    return b`
+            <button
+                part="nav-button"
+                class="nav-button"
+                aria-label="Scroll left"
+                ?disabled=${isAtStart}
+                @click=${this._scrollLeft}
+            >
+                <svg
+                    width="16"
+                    height="16"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M15 19l-7-7 7-7"
+                    />
+                </svg>
+            </button>
+
+            <div part="viewport" class="viewport" @wheel=${this._handleWheel}>
+                <div
+                    part="track"
+                    class="track"
+                    style="transform: translateX(-${this._scrollIndex * STRIDE}px)"
+                >
+                    ${isInitialLoading ? b`<div class="empty-state">
+                              <terra-loader indeterminate></terra-loader>
+                          </div>` : jobs.map((job) => this._renderThumbnail(job))}
+                </div>
+            </div>
+
+            <button
+                part="nav-button"
+                class="nav-button"
+                aria-label="Scroll right"
+                ?disabled=${isAtEnd}
+                @click=${this._scrollRight}
+            >
+                <svg
+                    width="16"
+                    height="16"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M9 5l7 7-7 7"
+                    />
+                </svg>
+            </button>
+
+            <terra-tooltip
+                trigger="manual"
+                placement="top"
+                hoist
+                interactive
+                @mouseenter=${() => {
+      clearTimeout(this._showTooltipTimer);
+      clearTimeout(this._hideTooltipTimer);
+    }}
+                @mouseleave=${this._hideTooltip}
+            ></terra-tooltip>
+        `;
+  }
+};
+TerraHarmonyHistory.styles = [component_styles_default, harmony_history_styles_default];
+TerraHarmonyHistory.dependencies = {
+  "terra-loader": TerraLoader,
+  "terra-tooltip": TerraTooltip,
+  "terra-icon": TerraIcon
+};
+__decorateClass([
+  n({ attribute: "bearer-token" })
+], TerraHarmonyHistory.prototype, "bearerToken", 2);
+__decorateClass([
+  n({ type: Number })
+], TerraHarmonyHistory.prototype, "limit", 2);
+__decorateClass([
+  n({ attribute: "filter-by-labels" })
+], TerraHarmonyHistory.prototype, "filterByLabels", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "remove-labels-on-delete" })
+], TerraHarmonyHistory.prototype, "removeLabelsOnDelete", 2);
+__decorateClass([
+  r()
+], TerraHarmonyHistory.prototype, "_scrollIndex", 2);
+__decorateClass([
+  r()
+], TerraHarmonyHistory.prototype, "_totalCount", 2);
+__decorateClass([
+  r()
+], TerraHarmonyHistory.prototype, "_loadedPages", 2);
+__decorateClass([
+  r()
+], TerraHarmonyHistory.prototype, "_pendingPages", 2);
+__decorateClass([
+  e('[part="viewport"]')
+], TerraHarmonyHistory.prototype, "_viewportEl", 2);
+__decorateClass([
+  e("terra-tooltip")
+], TerraHarmonyHistory.prototype, "_tooltip", 2);
+
+export {
+  TerraHarmonyHistory
+};

package/cdn/chunks/chunk.6NM2KLLT.js

@@ -0,0 +1,19 @@
+import {
+  TerraCombobox
+} from "./chunk.DQJZWPCV.js";
+import {
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/combobox/combobox.ts
+init_dirname();
+init_buffer();
+init_process();
+var combobox_default = TerraCombobox;
+TerraCombobox.define("terra-combobox");
+
+export {
+  combobox_default
+};

package/cdn/chunks/chunk.6R43ODOG.js

@@ -0,0 +1,113 @@
+import {
+  button_group_styles_default
+} from "./chunk.SR4CU2NR.js";
+import {
+  o
+} from "./chunk.VH7AMLEP.js";
+import {
+  TerraElement,
+  component_styles_default,
+  e,
+  n,
+  r
+} from "./chunk.766SOYIM.js";
+import {
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/button-group/button-group.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var TerraButtonGroup = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.disableRole = false;
+    this.label = "";
+  }
+  handleFocus(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-terra-button-group__button--focus", true);
+  }
+  handleBlur(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-terra-button-group__button--focus", false);
+  }
+  handleMouseOver(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-terra-button-group__button--hover", true);
+  }
+  handleMouseOut(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-terra-button-group__button--hover", false);
+  }
+  handleSlotChange() {
+    const slottedElements = [
+      ...this.defaultSlot.assignedElements({ flatten: true })
+    ];
+    slottedElements.forEach((el) => {
+      const index = slottedElements.indexOf(el);
+      const button = findButton(el);
+      if (button) {
+        button.toggleAttribute("data-terra-button-group__button", true);
+        button.toggleAttribute(
+          "data-terra-button-group__button--first",
+          index === 0
+        );
+        button.toggleAttribute(
+          "data-terra-button-group__button--inner",
+          index > 0 && index < slottedElements.length - 1
+        );
+        button.toggleAttribute(
+          "data-terra-button-group__button--last",
+          index === slottedElements.length - 1
+        );
+        button.toggleAttribute(
+          "data-terra-button-group__button--radio",
+          button.tagName.toLowerCase() === "terra-radio-button"
+        );
+      }
+    });
+  }
+  render() {
+    return b`
+            <div
+                part="base"
+                class="button-group"
+                role=${this.disableRole ? "presentation" : "group"}
+                aria-label=${o(this.label || void 0)}
+                @focusout=${this.handleBlur}
+                @focusin=${this.handleFocus}
+                @mouseover=${this.handleMouseOver}
+                @mouseout=${this.handleMouseOut}
+            >
+                <slot @slotchange=${this.handleSlotChange}></slot>
+            </div>
+        `;
+  }
+};
+TerraButtonGroup.styles = [component_styles_default, button_group_styles_default];
+__decorateClass([
+  e("slot")
+], TerraButtonGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  r()
+], TerraButtonGroup.prototype, "disableRole", 2);
+__decorateClass([
+  n()
+], TerraButtonGroup.prototype, "label", 2);
+function findButton(el) {
+  var _a;
+  const selector = "terra-button, terra-radio-button";
+  return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
+}
+
+export {
+  TerraButtonGroup
+};

package/cdn/chunks/chunk.74I3ME47.js

@@ -0,0 +1,71 @@
+import {
+  tab_panel_styles_default
+} from "./chunk.NFI5NVW6.js";
+import {
+  e
+} from "./chunk.KGXAA5I2.js";
+import {
+  watch
+} from "./chunk.MPVZOQYA.js";
+import {
+  TerraElement,
+  component_styles_default,
+  n
+} from "./chunk.766SOYIM.js";
+import {
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/tab-panel/tab-panel.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var id = 0;
+var TerraTabPanel = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.attrId = ++id;
+    this.componentId = `terra-tab-panel-${this.attrId}`;
+    this.name = "";
+    this.active = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+    this.setAttribute("role", "tabpanel");
+  }
+  handleActiveChange() {
+    this.setAttribute("aria-hidden", this.active ? "false" : "true");
+  }
+  render() {
+    return b`
+            <slot
+                part="base"
+                class=${e({
+      "tab-panel": true,
+      "tab-panel--active": this.active
+    })}
+            ></slot>
+        `;
+  }
+};
+TerraTabPanel.styles = [component_styles_default, tab_panel_styles_default];
+__decorateClass([
+  n({ reflect: true })
+], TerraTabPanel.prototype, "name", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraTabPanel.prototype, "active", 2);
+__decorateClass([
+  watch("active")
+], TerraTabPanel.prototype, "handleActiveChange", 1);
+
+export {
+  TerraTabPanel
+};