@nasa-terra/components 0.0.189 → 0.0.192

package/cdn/chunks/chunk.4MXAJRHY.js

@@ -0,0 +1,663 @@
+import {
+  i as i2
+} from "./chunk.RRCYT4LP.js";
+import {
+  f,
+  i,
+  u
+} from "./chunk.JS5TDQ5C.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet,
+  __spreadProps,
+  __spreadValues,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// node_modules/@lit/reactive-element/decorators/property.js
+init_dirname();
+init_buffer();
+init_process();
+var o = { attribute: true, type: String, converter: u, reflect: false, hasChanged: f };
+var r = (t2 = o, e3, r3) => {
+  const { kind: n2, metadata: i3 } = r3;
+  let s = globalThis.litPropertyMetadata.get(i3);
+  if (void 0 === s && globalThis.litPropertyMetadata.set(i3, s = /* @__PURE__ */ new Map()), "setter" === n2 && ((t2 = Object.create(t2)).wrapped = true), s.set(r3.name, t2), "accessor" === n2) {
+    const { name: o2 } = r3;
+    return { set(r4) {
+      const n3 = e3.get.call(this);
+      e3.set.call(this, r4), this.requestUpdate(o2, n3, t2, true, r4);
+    }, init(e4) {
+      return void 0 !== e4 && this.C(o2, void 0, t2, e4), e4;
+    } };
+  }
+  if ("setter" === n2) {
+    const { name: o2 } = r3;
+    return function(r4) {
+      const n3 = this[o2];
+      e3.call(this, r4), this.requestUpdate(o2, n3, t2, true, r4);
+    };
+  }
+  throw Error("Unsupported decorator location: " + n2);
+};
+function n(t2) {
+  return (e3, o2) => "object" == typeof o2 ? r(t2, e3, o2) : ((t3, e4, o3) => {
+    const r3 = e4.hasOwnProperty(o3);
+    return e4.constructor.createProperty(o3, t3), r3 ? Object.getOwnPropertyDescriptor(e4, o3) : void 0;
+  })(t2, e3, o2);
+}
+
+// node_modules/@lit/reactive-element/decorators/state.js
+init_dirname();
+init_buffer();
+init_process();
+function r2(r3) {
+  return n(__spreadProps(__spreadValues({}, r3), { state: true, attribute: false }));
+}
+
+// node_modules/@lit/reactive-element/decorators/event-options.js
+init_dirname();
+init_buffer();
+init_process();
+function t(t2) {
+  return (n2, o2) => {
+    const c = "function" == typeof n2 ? n2 : n2[o2];
+    Object.assign(c, t2);
+  };
+}
+
+// node_modules/@lit/reactive-element/decorators/query.js
+init_dirname();
+init_buffer();
+init_process();
+
+// node_modules/@lit/reactive-element/decorators/base.js
+init_dirname();
+init_buffer();
+init_process();
+var e = (e3, t2, c) => (c.configurable = true, c.enumerable = true, Reflect.decorate && "object" != typeof t2 && Object.defineProperty(e3, t2, c), c);
+
+// node_modules/@lit/reactive-element/decorators/query.js
+function e2(e3, r3) {
+  return (n2, s, i3) => {
+    const o2 = (t2) => {
+      var _a, _b;
+      return (_b = (_a = t2.renderRoot) == null ? void 0 : _a.querySelector(e3)) != null ? _b : null;
+    };
+    if (r3) {
+      const { get: e4, set: r4 } = "object" == typeof s ? n2 : i3 != null ? i3 : (() => {
+        const t2 = Symbol();
+        return { get() {
+          return this[t2];
+        }, set(e5) {
+          this[t2] = e5;
+        } };
+      })();
+      return e(n2, s, { get() {
+        let t2 = e4.call(this);
+        return void 0 === t2 && (t2 = o2(this), (null !== t2 || this.hasUpdated) && r4.call(this, t2)), t2;
+      } });
+    }
+    return e(n2, s, { get() {
+      return o2(this);
+    } });
+  };
+}
+
+// node_modules/lit/decorators.js
+init_dirname();
+init_buffer();
+init_process();
+
+// node_modules/@lit/reactive-element/decorators/custom-element.js
+init_dirname();
+init_buffer();
+init_process();
+
+// node_modules/@lit/reactive-element/decorators/query-all.js
+init_dirname();
+init_buffer();
+init_process();
+
+// node_modules/@lit/reactive-element/decorators/query-async.js
+init_dirname();
+init_buffer();
+init_process();
+
+// node_modules/@lit/reactive-element/decorators/query-assigned-elements.js
+init_dirname();
+init_buffer();
+init_process();
+
+// node_modules/@lit/reactive-element/decorators/query-assigned-nodes.js
+init_dirname();
+init_buffer();
+init_process();
+
+// src/styles/component.styles.ts
+init_dirname();
+init_buffer();
+init_process();
+var component_styles_default = i`
+    :host {
+        box-sizing: border-box;
+        display: none;
+    }
+
+    :host *,
+    :host *::before,
+    :host *::after {
+        box-sizing: inherit;
+    }
+
+    :host {
+        background-color: var(--background-color);
+        color: var(--color);
+    }
+
+    [hidden] {
+        display: none !important;
+    }
+
+    /* Horizon Design System Font Classes */
+
+    /* Display Fonts */
+
+    .display-120 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 7.5rem; /* 120px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-100 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 6.25rem; /* 100px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-80 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 5rem; /* 80px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-72 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 4.5rem; /* 72px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-60 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 3.75rem; /* 60px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-48 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 3rem; /* 48px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-41 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 2.563rem; /* 41px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    /* Heading Fonts */
+
+    .heading-36-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 2.25rem; /* 36px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-36-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 2.25rem; /* 36px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-29-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.813rem; /* 29px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-29-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.813rem; /* 29px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-22-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.375rem; /* 22px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-22-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.375rem; /*22px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-18-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.125rem; /* 18px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-18-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.125rem; /* 18px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-16-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1rem; /* 16px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-16-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1rem; /* 16px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-14-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 0.875rem; /* 14px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-14-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 0.875rem; /* 14px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-12-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 0.75rem; /* 12px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-12-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 0.75rem; /* 12px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-11-semi-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 0.688rem; /* 11px */
+        font-weight: var(--terra-font-weight-semi-bold);
+    }
+
+    /* Body Fonts */
+
+    .body-18 {
+        font-family: var(--terra-font-family--public-sans);
+        font-size: 1.125rem; /* 18px */
+        font-weight: var(--terra-font-weight-normal);
+    }
+
+    .body-16 {
+        font-family: var(--terra-font-family--public-sans);
+        font-size: 1rem; /* 16px */
+        font-weight: var(--terra-font-weight-normal);
+    }
+
+    .body-14 {
+        font-family: var(--terra-font-family--public-sans);
+        font-size: 0.875rem; /* 14px */
+        font-weight: var(--terra-font-weight-normal);
+    }
+
+    .body-12 {
+        font-family: var(--terra-font-family--public-sans);
+        font-size: 0.75rem; /* 12px */
+        font-weight: var(--terra-font-weight-normal);
+    }
+
+    .body-11 {
+        font-family: var(--terra-font-family--public-sans);
+        font-size: 0.688rem; /* 11px */
+        font-weight: var(--terra-font-weight-normal);
+    }
+
+    /* Number & Label Fonts */
+
+    .number-240 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 15rem; /* 240px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .number-120 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 7.5rem; /* 120px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .number-48 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 3rem; /* 48px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .number-36 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 2.25rem; /* 36px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .number-14 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 0.875rem; /* 14px */
+        font-weight: 500;
+    }
+
+    .number-11 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 0.688rem; /* 11px */
+        font-weight: 500;
+    }
+
+    .label-14 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 0.875rem; /* 14px */
+        font-weight: var(--terra-font-weight-light);
+        text-transform: uppercase;
+    }
+
+    .label-12 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 0.75rem; /* 12px */
+        font-weight: var(--terra-font-weight-light);
+        text-transform: uppercase;
+    }
+
+    .label-11 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 0.688rem; /* 11px */
+        font-weight: var(--terra-font-weight-light);
+        text-transform: uppercase;
+    }
+
+    /* Forms */
+
+    /* Input Field */
+
+    select,
+    .input {
+        font-family: var(--terra-input-font-family);
+        font-size: var(--terra-input-font-size);
+        color: var(--terra-input-text-default);
+        font-weight: var(--terra-input-font-weight);
+        line-height: var(--terra-input-line-height);
+        background-color: var(--terra-input-background-default);
+        border: var(--terra-input-border-width) solid
+            var(--terra-input-border-default);
+        border-radius: var(--terra-input-border-radius);
+    }
+
+    label,
+    .input-label {
+        font-family: var(--terra-input-label-font-family);
+        font-size: var(--terra-input-label-font-size);
+        color: var(--terra-input-label-color);
+        font-weight: var(--terra-font-weight-semibold);
+        line-height: var(--terra-input-label-line-height);
+    }
+
+    /* Elements */
+
+    a {
+        text-decoration: underline;
+        text-decoration-color: var(--terra-text-link-default);
+        text-decoration-style: dashed;
+        text-decoration-thickness: 0.05em;
+        text-underline-offset: 0.25rem;
+        color: var(--terra-text-link-default);
+    }
+
+    /* UTILITY CSS */
+    .sr-only {
+        block-size: 1px;
+        border-width: 0;
+        clip: rect(0, 0, 0, 0);
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+`;
+
+// src/internal/terra-element.ts
+init_dirname();
+init_buffer();
+init_process();
+var _io, _observeVisibility, observeVisibility_fn, _isComponentVisible, isComponentVisible_fn;
+var TerraElement = class extends i2 {
+  constructor() {
+    super();
+    __privateAdd(this, _observeVisibility);
+    /**
+     * Check if the component is visible on the page
+     * @returns true if the component is visible, false otherwise
+     */
+    __privateAdd(this, _isComponentVisible);
+    this.environment = "prod" /* PROD */;
+    this.isVisible = false;
+    __privateAdd(this, _io, void 0);
+    Object.entries(
+      this.constructor.dependencies
+    ).forEach(([name, component]) => {
+      ;
+      this.constructor.define(name, component);
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    __privateMethod(this, _observeVisibility, observeVisibility_fn).call(this);
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = __privateGet(this, _io)) == null ? void 0 : _a.disconnect();
+    __privateSet(this, _io, void 0);
+  }
+  /**
+   * Called when the component is visible on the page
+   * Example: if the component is in a dialog, this will be triggered the first time the dialog opens
+   */
+  firstVisible() {
+  }
+  emit(name, options) {
+    const event = new CustomEvent(name, __spreadValues({
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail: {}
+    }, options));
+    this.dispatchEvent(event);
+    return event;
+  }
+  /* eslint-enable */
+  static define(name, elementConstructor = this, options = {}) {
+    const currentlyRegisteredConstructor = customElements.get(name);
+    if (!currentlyRegisteredConstructor) {
+      customElements.define(
+        name,
+        class extends elementConstructor {
+        },
+        options
+      );
+      return;
+    }
+    let newVersion = " (unknown version)";
+    let existingVersion = newVersion;
+    if ("version" in elementConstructor && elementConstructor.version) {
+      newVersion = " v" + elementConstructor.version;
+    }
+    if ("version" in currentlyRegisteredConstructor && currentlyRegisteredConstructor.version) {
+      existingVersion = " v" + currentlyRegisteredConstructor.version;
+    }
+    if (newVersion && existingVersion && newVersion === existingVersion) {
+      return;
+    }
+    console.warn(
+      `Attempted to register <${name}>${newVersion}, but <${name}>${existingVersion} has already been registered.`
+    );
+  }
+};
+_io = new WeakMap();
+_observeVisibility = new WeakSet();
+observeVisibility_fn = function() {
+  if (__privateGet(this, _io)) {
+    return;
+  }
+  this.isVisible = __privateMethod(this, _isComponentVisible, isComponentVisible_fn).call(this);
+  if (this.isVisible) {
+    this.firstVisible();
+    return;
+  }
+  if (!("IntersectionObserver" in window)) {
+    this.isVisible = true;
+    this.firstVisible();
+    return;
+  }
+  __privateSet(this, _io, new IntersectionObserver(
+    (entries) => {
+      var _a;
+      if (entries.some((e3) => e3.isIntersecting)) {
+        (_a = __privateGet(this, _io)) == null ? void 0 : _a.disconnect();
+        __privateSet(this, _io, void 0);
+        this.isVisible = true;
+        setTimeout(() => this.firstVisible(), 500);
+      }
+    },
+    { root: null, threshold: 0 }
+  ));
+  __privateGet(this, _io).observe(this);
+};
+_isComponentVisible = new WeakSet();
+isComponentVisible_fn = function() {
+  if (!this.isConnected) {
+    return false;
+  }
+  const rect = this.getBoundingClientRect();
+  const style = getComputedStyle(this);
+  return rect.width > 0 && rect.height > 0 && style.display !== "none" && style.visibility !== "hidden";
+};
+/* eslint-disable */
+// @ts-expect-error This is auto-injected at build time.
+TerraElement.version = "0.0.192";
+TerraElement.dependencies = {};
+__decorateClass([
+  n()
+], TerraElement.prototype, "dir", 2);
+__decorateClass([
+  n()
+], TerraElement.prototype, "lang", 2);
+__decorateClass([
+  n()
+], TerraElement.prototype, "environment", 2);
+__decorateClass([
+  n()
+], TerraElement.prototype, "bearerToken", 2);
+__decorateClass([
+  r2()
+], TerraElement.prototype, "isVisible", 2);
+
+export {
+  n,
+  r2 as r,
+  t,
+  e2 as e,
+  component_styles_default,
+  TerraElement
+};
+/*! Bundled license information:
+
+@lit/reactive-element/decorators/property.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/state.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/event-options.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/base.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/query.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/custom-element.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/query-all.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/query-async.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/query-assigned-elements.js:
+  (**
+   * @license
+   * Copyright 2021 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/query-assigned-nodes.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/