@arcgis/map-components/dist/components/arcgis-video-player-metadata/customElement.js

ArcGIS Map Components

import { c as l } from "../../chunks/runtime.js";
import { html as s } from "lit-html";
import { watch as d } from "@arcgis/core/core/reactiveUtils.js";
import { LitElement as n, safeClassMap as a } from "@arcgis/lumina";
import { css as m } from "@lit/reactive-element/css-tag.js";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.33/esri/copyright.txt for details.
v4.33.13 */
const f = m`.arcgis-metadata-table{display:flex;flex-direction:column;border-top:1px solid var(--calcite-color-border-1)}.arcgis-metadata-table__row{display:flex;flex-direction:row;border-bottom:1px solid var(--calcite-color-border-1);border-right:1px solid var(--calcite-color-border-1)}.arcgis-metadata-table__data{flex:1;border-left:1px solid var(--calcite-color-border-1);padding:5px}.arcgis-metadata-table__empty-state{width:100%;max-inline-size:unset;transition-duration:0ms}`, o = "arcgis-metadata-table", t = {
  table: o,
  row: `${o}__row`,
  data: `${o}__data`,
  emptyState: `${o}__empty-state`
};
class h extends n {
  constructor() {
    super(...arguments), this._disabled = !1, this._hasMetadata = !1, this._missionInfo = {}, this._platformInfo = {}, this._frameInfo = {};
  }
  static {
    this.properties = { _disabled: 16, _hasMetadata: 16, _missionInfo: 16, _platformInfo: 16, _frameInfo: 16, viewModel: 0, messages: 0 };
  }
  static {
    this.styles = f;
  }
  loaded() {
    this.manager.onLifecycle(() => [
      d(() => this.viewModel.state, (i) => {
        this._disabled = i === "not-ready" || i === "waiting";
      }, { initial: !0 }),
      d(() => [
        this.viewModel.metadata?.missionInfo,
        this.viewModel.metadata?.platformInfo,
        this.viewModel.metadata?.frameInfo
      ], () => {
        const { metadata: i } = this.viewModel;
        if (this._hasMetadata = !!i, !this._hasMetadata)
          return;
        const { missionInfo: e, platformInfo: c, frameInfo: r } = i;
        this._missionInfo = e, this._platformInfo = c, this._frameInfo = r;
      }, { initial: !0 })
    ]);
  }
  render() {
    const { messages: i } = this;
    return this._disabled || !this._hasMetadata ? s`<calcite-tile class=${a(t.emptyState)} .description=${i.metadataDescription} .heading=${i.metadataNotLoaded}></calcite-tile>` : s`<calcite-block .heading=${i.metadata} expanded><calcite-accordion appearance=solid selection-mode=single><calcite-accordion-item .heading=${i.missionInfo}><div class=${a(t.table)}>${Object.keys(this._missionInfo).map((e) => s`<div class=${a(t.row)}><div class=${a(t.data)}>${e}</div><div class=${a(t.data)}>${this._missionInfo[e]}</div></div>`)}</div></calcite-accordion-item><calcite-accordion-item .heading=${i.platformInfo}><div class=${a(t.table)}>${Object.keys(this._platformInfo).map((e) => s`<div class=${a(t.row)}><div class=${a(t.data)}>${e}</div><div class=${a(t.data)}>${this._platformInfo[e]}</div></div>`)}</div></calcite-accordion-item><calcite-accordion-item .heading=${i.frameInfo}><div class=${a(t.table)}>${Object.keys(this._frameInfo).map((e) => s`<div class=${a(t.row)}><div class=${a(t.data)}>${e}</div><div class=${a(t.data)}>${this._frameInfo[e]}</div></div>`)}</div></calcite-accordion-item></calcite-accordion></calcite-block>`;
  }
}
l("arcgis-video-player-metadata", h);
export {
  h as VideoPlayerMetadata
};