@arcgis/map-components
Version:
ArcGIS Map Components
56 lines (55 loc) • 4.28 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as s } from "../../chunks/runtime.js";
import { css as n, html as i } from "lit";
import { LitElement as l } from "@arcgis/lumina";
const r = n`:host{display:flex;flex-direction:column;height:100%}.advanced-options-section{border:1px solid var(--calcite-color-border-1);margin-bottom:var(--calcite-spacing-sm)}.map-only-section{padding:var(--calcite-spacing-sm) var(--calcite-spacing-sm);display:flex;flex-direction:column;flex:1 0;gap:var(--calcite-spacing-md)}.panel-container{display:flex;flex:1 0;flex-direction:column;gap:var(--calcite-spacing-sm)}.size-container{--button-width: 32px;display:inline-grid;grid-template-columns:1fr 1fr var(--button-width);column-gap:var(--calcite-spacing-xs);width:100%}.swap-button{flex:1 0 auto;border:none;color:var(--calcite-color-border-input);align-self:flex-end;margin-bottom:var(--calcite-spacing-md)}.swap-button calcite-button{width:var(--button-width);height:var(--button-width)}`;
class c extends l {
constructor() {
super(...arguments), this.hideAdvancedOptions = !1;
}
static {
this.properties = { hideAdvancedOptions: 5, viewModel: 0, messages: 0, selectExportsTab: 0 };
}
static {
this.styles = r;
}
loaded() {
this.manager.onLifecycle(() => []);
}
render() {
return i`<section class="map-only-section" tabindex=-1><div class="panel-container">${this._renderFileNameInput()}${this._renderFileFormatSection()}${this._renderSizeSection()}${this._renderAdvancedSection()}</div>${this._renderExportButton()}</section>`;
}
_renderFileNameInput() {
const { fileName: t, fileNamePlaceHolder: e } = this.messages;
return i`<calcite-label>${t}<calcite-input .placeholder=${e} .value=${this.viewModel.templateOptions.fileName ?? ""} =${(a) => {
this.viewModel.templateOptions.fileName = a.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="size-container"><calcite-label>${this.messages.width}<calcite-input-number .value=${`${this.viewModel.templateOptions.width}`} .max=${Number.MAX_SAFE_INTEGER} =${(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} =${(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="swap-button"><calcite-button icon-start=arrow-right-left .label=${this.messages.swap} appearance=transparent kind=neutral =${() => {
[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 this.hideAdvancedOptions ? null : i`<calcite-block .ariaLabel=${this.messages.advancedOptions} class="advanced-options-section" 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>`;
}
}
s("arcgis-print-map-only-panel", c);
export {
c as PrintMapOnlyPanel
};