@arcgis/map-components/dist/components/arcgis-print-template-selector/customElement.js

ArcGIS Map Components

import { c as $ } from "../../chunks/runtime.js";
import { html as i } from "lit-html";
import { keyed as u } from "lit-html/directives/keyed.js";
import { watch as h } from "@arcgis/core/core/reactiveUtils.js";
import { LitElement as v, safeClassMap as s, nothing as f } from "@arcgis/lumina";
import { i as d, r as w, g as _, a as T, b } from "../../chunks/utils.js";
import { css as y } from "@lit/reactive-element/css-tag.js";
import { u as L } from "../../chunks/useHandles.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 S = y`.arcgis-print__template-select-flow-item-container{display:flex;flex-direction:column;justify-content:space-between;overflow-y:hidden;flex-grow:1}.arcgis-print__template-select-flow-item-container .arcgis-print__template-select-flow-item-content{display:flex;flex-direction:column;overflow-y:auto;flex:1 0}.arcgis-print__template-select-flow-item-container .arcgis-print__template-select-flow-item-content .arcgis-print__template-select-flow-item-list-heading{display:flex;gap:var(--calcite-spacing-xs);align-items:center;padding:var(--calcite-spacing-md) var(--calcite-spacing-lg);background-color:var(--calcite-color-foreground-2);border-bottom:1px solid var(--calcite-color-border-3);font-weight:var(--calcite-font-weight-semibold)}.arcgis-print__template-button-container{padding:var(--calcite-spacing-md)}.arcgis-print__template-done-button{width:100%}`, o = "arcgis-print", a = {
  templateSelectError: `${o}__template-select-error`,
  templateButtonContainer: `${o}__template-button-container`,
  templateDoneButton: `${o}__template-done-button`,
  templateSelectFlowItemContainer: `${o}__template-select-flow-item-container`,
  templateSelectFlowItemContent: `${o}__template-select-flow-item-content`,
  templateSelectFlowItemListHeading: `${o}__template-select-flow-item-list-heading`,
  browseTemplateButtonContainer: `${o}__browse-template-button-container`,
  browseTemplateButtonContainerFilter: `${o}__browse-template-button-container-filter`
};
class M extends v {
  constructor() {
    super(...arguments), this._handles = L("disconnect");
  }
  static {
    this.properties = { _selectedTemplate: 16, excludeOrganizationTemplates: 5, browseTemplateButtonOnClick: 0, viewModel: 0, messages: 0, hideTemplateSelector: 0 };
  }
  static {
    this.styles = S;
  }
  loaded() {
    this.manager.onLifecycle(() => [
      h(() => this.viewModel.templateOptions.id, (e) => {
        this._handles.removeHandles("template-handle"), this._selectedTemplate = e ? this.viewModel.getLayoutTemplateById(e) ?? void 0 : void 0, this._handles.addHandles(h(() => this._selectedTemplate?.state, () => this.requestUpdate(), { initial: !0 }), "template-handle");
      }, { initial: !0 })
    ]);
  }
  _getPortalTemplates() {
    const { portalTemplateIds: e } = this.viewModel;
    return this.viewModel.includeDefaultTemplates && !this.excludeOrganizationTemplates ? this.viewModel.defaultTemplates.toArray().filter(({ layout: n, layoutItem: l }) => !d(n) && !!l?.id && e.includes(l.id)) : [];
  }
  _getDefaultTemplates() {
    const { portalTemplateIds: e } = this.viewModel;
    return this.viewModel.includeDefaultTemplates ? this.viewModel.defaultTemplates.toArray().filter(({ layout: n, layoutItem: l }) => !d(n) && (!l?.id || !e.includes(l.id))) : [];
  }
  _getPrintServiceTemplates() {
    return !this.viewModel.includeDefaultTemplates || !this._getDefaultTemplates().length ? this.viewModel.printServiceTemplates.toArray().filter(({ layout: e }) => !d(e)) : [];
  }
  render() {
    const { messages: e } = this, n = w.test(this.viewModel.portal?.url), l = this.viewModel.browseTemplates.toArray(), t = this._getPortalTemplates(), c = this._getDefaultTemplates(), p = this._getPrintServiceTemplates(), r = l.length + t.length + c.length + p.length > 15, m = this.browseTemplateButtonOnClick ? i`<calcite-button appearance=outline class=${s(r ? a.browseTemplateButtonContainerFilter : a.browseTemplateButtonContainer)} icon-start=folder @click=${this.browseTemplateButtonOnClick} .slot=${r ? "filter-actions-end" : "default"}>${r ? null : e.browseTemplates}</calcite-button>` : null;
    return i`<div class=${s(a.templateSelectFlowItemContainer)}><div class=${s(a.templateSelectFlowItemContent)}>${r ? null : m}${u("template-list", i`<calcite-list .filterEnabled=${r} .filterProps=${["label"]} .label=${e.templateList} selection-mode=single-persist @calciteListChange=${({ currentTarget: g }) => this.viewModel.applyTemplate(g.selectedItems[0]?.value)}>${r ? m : null}${l.length ? i`<div><div class=${s(a.templateSelectFlowItemListHeading)}>${e.myTemplates}${n ? i`<calcite-chip appearance=outline kind=neutral .label=${e.beta} scale=s>${e.beta}</calcite-chip>` : null}</div>${this._renderLayoutTemplates(l, !0, !0)}</div>` : null}${t.length ? i`<div><div class=${s(a.templateSelectFlowItemListHeading)}>${e.organizationTemplates}${n ? i`<calcite-chip appearance=outline kind=neutral .label=${e.beta} scale=s>${e.beta}</calcite-chip>` : null}</div>${this._renderLayoutTemplates(t)}</div>` : null}${l.length || t.length ? c.length ? i`<div><div class=${s(a.templateSelectFlowItemListHeading)}>${e.defaultTemplates}</div>${this._renderLayoutTemplates(c, !0)}</div>` : null : this._renderLayoutTemplates(c, !0)}${l.length || t.length ? p.length ? i`<div><div class=${s(a.templateSelectFlowItemListHeading)}>${e.defaultTemplates}</div>${this._renderLayoutTemplates(p)}</div>` : null : this._renderLayoutTemplates(p)}</calcite-list>`)}</div><div class=${s(a.templateButtonContainer)}><calcite-button class=${s(a.templateDoneButton)} @click=${this.hideTemplateSelector}>Done</calcite-button></div></div>`;
  }
  _renderLayoutTemplates(e, n = !1, l = !1) {
    return n && e.sort((t, c) => (t.label ?? "") > (c.label ?? "") ? 1 : -1), e.map((t) => i`<calcite-list-item .description=${_(t)} .label=${T(t, this.messages)} .selected=${t.id === this.viewModel.templateOptions.id} title=${t.description ?? "" ?? f} .value=${t}><calcite-icon .icon=${(t.layout ? b(t.layout) : null) || "custom-print"} slot=content-start></calcite-icon>${t.state === "loading" ? i`<calcite-loader inline label=loading scale=s slot=content-end></calcite-loader>` : null}${t?.state === "error" ? u(`template-error-${t.id}`, i`<calcite-icon class=${s(a.templateSelectError)} icon=exclamation-mark-circle scale=s slot=content-end></calcite-icon>`) : null}${l ? i`<calcite-action icon=trash @click=${() => this.viewModel.removePortalTemplate(t)} slot=actions-end text=delete></calcite-action>` : null}</calcite-list-item>`);
  }
}
$("arcgis-print-template-selector", M);
export {
  M as PrintTemplateSelector
};