@arcgis/map-components/dist/components/arcgis-print-map-only-panel/customElement.js

ArcGIS Map Components

import { c as o } from "../../chunks/runtime.js";
import { html as i } from "lit-html";
import { classes as l } from "@arcgis/components-utils";
import { LitElement as c, safeClassMap as s } from "@arcgis/lumina";
import { css as p } 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.16 */
const d = p`.arcgis-print__advanced-options-section{border:1px solid var(--calcite-color-border-1);margin-bottom:var(--calcite-spacing-sm)}.arcgis-print__map-only-section{padding:var(--calcite-spacing-sm) var(--calcite-spacing-sm)}.arcgis-print__panel-container{display:flex;flex:1 0;flex-direction:column;gap:var(--calcite-spacing-sm)}.arcgis-print__size-container{--button-width: 32px;display:inline-grid;grid-template-columns:1fr 1fr var(--button-width);column-gap:var(--calcite-spacing-xs);width:100%}.arcgis-print__swap-button{flex:1 0 auto;border:none;color:var(--calcite-color-border-input);align-self:flex-end;margin-bottom:var(--calcite-spacing-md)}.arcgis-print__swap-button calcite-button{width:var(--button-width);height:var(--button-width)}`, n = "arcgis-print", a = {
  advancedOptionsSection: `${n}__advanced-options-section`,
  mapOnlySection: `${n}__map-only-section`,
  panelContainer: `${n}__panel-container`,
  sizeContainer: `${n}__size-container`,
  swapButton: `${n}__swap-button`
};
class m extends c {
  static {
    this.properties = { viewModel: 0, messages: 0, selectExportsTab: 0 };
  }
  static {
    this.styles = d;
  }
  loaded() {
    this.manager.onLifecycle(() => []);
  }
  render() {
    return i`<section class=${s(a.mapOnlySection)} role=tabpanel><div class=${s(a.panelContainer)}>${this._renderFileNameInput()}${this._renderFileFormatSection()}${this._renderSizeSection()}${this._renderAdvancedSection()}${this._renderExportButton()}</div></section>`;
  }
  _renderFileNameInput() {
    const { fileName: t, fileNamePlaceHolder: e } = this.messages;
    return i`<calcite-label>${t}<calcite-input .placeholder=${e} .value=${this.viewModel.templateOptions.fileName ?? ""} @calciteInputInput=${(r) => {
      this.viewModel.templateOptions.fileName = r.currentTarget.value;
    }}></calcite-input></calcite-label>`;
  }
  _renderFileFormatSection() {
    return i`<arcgis-print-format-select .viewModel=${this.viewModel} .messages=${this.messages}></arcgis-print-format-select>`;
  }
  _renderSizeSection() {
    return i`<div><div class=${s(l(a.sizeContainer))}><calcite-label>${this.messages.width}<calcite-input-number .value=${`${this.viewModel.templateOptions.width}`} .max=${Number.MAX_SAFE_INTEGER} @calciteInputNumberInput=${(t) => {
      const e = Number(t.target.value);
      !Number.isNaN(e) && e > 0 && Number.isFinite(e) ? this.viewModel.templateOptions.width = e : t.target.value = `${this.viewModel.templateOptions.width}`;
    }}></calcite-input-number></calcite-label><calcite-label>${this.messages.height}<calcite-input-number .value=${`${this.viewModel.templateOptions.height}`} .max=${Number.MAX_SAFE_INTEGER} @calciteInputNumberInput=${(t) => {
      const e = Number(t.target.value);
      !Number.isNaN(e) && e > 0 && Number.isFinite(e) ? this.viewModel.templateOptions.height = e : t.target.value = `${this.viewModel.templateOptions.height}`;
    }}></calcite-input-number></calcite-label><div class=${s(a.swapButton)}><calcite-button icon-start=arrow-right-left .label=${this.messages.swap} appearance=transparent kind=neutral @click=${() => {
      [this.viewModel.templateOptions.width, this.viewModel.templateOptions.height] = [
        this.viewModel.templateOptions.height,
        this.viewModel.templateOptions.width
      ], this.requestUpdate();
    }}></calcite-button></div></div><arcgis-print-preview-input .viewModel=${this.viewModel} .messages=${this.messages}></arcgis-print-preview-input></div>`;
  }
  _renderAdvancedSection() {
    return i`<calcite-block .ariaLabel=${this.messages.advancedOptions} class=${s(l(a.panelContainer, a.advancedOptionsSection))} collapsible .heading=${this.messages.advancedOptions}><arcgis-print-map-only-advanced-options .messages=${this.messages} .viewModel=${this.viewModel}></arcgis-print-map-only-advanced-options></calcite-block>`;
  }
  _renderExportButton() {
    return i`<arcgis-print-export-button .fileName=${this.viewModel.templateOptions.fileName ?? void 0} .messages=${this.messages} .viewModel=${this.viewModel} .selectExportsTab=${this.selectExportsTab}></arcgis-print-export-button>`;
  }
}
o("arcgis-print-map-only-panel", m);
export {
  m as PrintMapOnlyPanel
};