@esri/solutions-components 0.11.19 → 0.11.21

package/dist/solutions-components/p-34338938.entry.js

@@ -1,6 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-import{r as n,c as t,h as i,H as e,g as o}from"./p-e996c38f.js";import{l as a}from"./p-438fdc33.js";import{g as s}from"./p-8f973b3d.js";import{g as r}from"./p-a9a72626.js";import"./p-3b3f77bc.js";import"./p-d4056c1c.js";import"./p-3423b5ef.js";const p="instant-apps-export calcite-mode-light",c="instant-apps-export-print",l="instant-apps-export-print__legend-container",d="instant-apps-export-print__compass-container",h="instant-apps-export-print__scale-bar-container",u="instant-apps-export-print__popup-container",v="instant-apps-export-print__popup-content",_="instant-apps-export-print__popup-title",x="instant-apps-export-print__view",b="instant-apps-export-print__view-container",g="instant-apps-export-print__views-container",f="instant-apps-export-print__view-wrapper",m="instant-apps-export-print__view-content",w="instant-apps-export-print__view-header",k=class{constructor(i){n(this,i),this.exportOutputUpdated=t(this,"exportOutputUpdated",7),this.legends={},this.compasses={},this.output=void 0,this.beforeExport=()=>Promise.resolve(),this.popoverIcon="export",this.includeLegend=!0,this.includeMap=!0,this.includePopup=!1,this.includeHeader=!1,this.mode="popover",this.popoverPositioning="absolute",this.popoverPlacement="auto",this.scale="m",this.showIncludeLegend=!0,this.showIncludeMap=!1,this.showIncludePopup=!0,this.showIncludeHeader=!0,this.showScaleBar=!1,this.exportViews=void 0,this.baseClass=p,this.exportIsLoading=void 0,this.messages=void 0}watchIncludeMap(n){var t;n&&(null===(t=this.exportViews)||void 0===t||t.forEach((({view:n},t)=>{const i=this.printEl.querySelector(`#legend-${t}`);null!=i&&this.updateLegend(n,t,i)})))}watchView(){var n;null===(n=this.exportViews)||void 0===n||n.forEach((({view:n},t)=>{this.handleIncludePopup(n,t)}))}async componentWillLoad(){this.baseClass="dark"===r(this.el)?"instant-apps-export calcite-mode-dark":p,s(this),await this.initializeModules()}componentDidLoad(){var n;this.printContainerEl.prepend(this.printEl),null===(n=this.exportViews)||void 0===n||n.forEach((({view:n},t)=>{this.handleIncludePopup(n,t)}))}componentDidUpdate(){var n;null===(n=this.exportViews)||void 0===n||n.forEach((({view:n},t)=>{const i=this.printEl.querySelector(`#legend-${t}`);this.updateLegend(n,t,i)}))}async initializeModules(){const[n,t]=await a(["esri/core/Handles","esri/core/reactiveUtils"]);return this.handles=new n,this.reactiveUtils=t,Promise.resolve()}render(){const n="popover"===this.mode?this.renderPopover():this.renderPanel();return i(e,{key:"52f53735afba2085f45bdd8ba64e8e37b48318bb"},i("div",{key:"ac8fc3e66ccc5f9c27e25642bbe640c3fc8c7d33",class:this.baseClass,onMouseEnter:this.handleWidgetCreation.bind(this),onFocusin:this.handleWidgetCreation.bind(this)},n))}renderPopover(){var n,t,e;const o=this.renderPanel();return[i("calcite-popover",{referenceElement:"export-popover-btn",label:null===(n=this.messages)||void 0===n?void 0:n.exportPopover,overlayPositioning:this.popoverPositioning,placement:this.popoverPlacement,autoClose:!0,ref:n=>this.popoverEl=n},o),i("calcite-action",{id:"export-popover-btn",alignment:"center",icon:this.popoverIcon,scale:this.scale,title:null===(t=this.messages)||void 0===t?void 0:t.exportBtn,text:null===(e=this.messages)||void 0===e?void 0:e.exportBtn})]}renderPanel(){var n;const t=this.showIncludeMap?this.renderSwitch("includeMap"):null,e=this.includeMap?this.renderMapOptions():null,o=this.renderPrint();return i("div",{class:"inline"===this.mode?"instant-apps-export__inline-container":"instant-apps-export__popover-container"},t,e,i("calcite-button",{width:"full",onClick:this.exportOnClick.bind(this),disabled:this.exportIsLoading},null===(n=this.messages)||void 0===n?void 0:n.export),o)}renderSwitch(n,t){var e;const o=null!=t?t:null===(e=this.messages)||void 0===e?void 0:e[n];return i("calcite-label",{layout:"inline-space-between"},o,i("calcite-switch",{checked:this[n],value:n,onCalciteSwitchChange:this.optionOnChange.bind(this)}))}renderMapOptions(){const n=this.showIncludeHeader?this.renderSwitch("includeHeader","Include header"):null,t=this.showIncludeLegend?this.renderSwitch("includeLegend"):null,e=this.showIncludePopup?this.renderSwitch("includePopup"):null;return i("div",null,n,t,e)}renderPrint(){var n;return i("div",{ref:n=>this.printContainerEl=n},i("div",{class:c,ref:n=>this.printEl=n},i("div",{class:g},null===(n=this.exportViews)||void 0===n?void 0:n.map((({title:n,view:t},e)=>{var o,a;const s=null===(a=null===(o=t.map)||void 0===o?void 0:o.portalItem)||void 0===a?void 0:a.id,r=this.includeMap?this.renderPrintMap(n,e):null,p=this.includeMap&&this.showIncludeLegend?this.renderLegend(e):null,c=this.includeMap&&this.showIncludePopup?this.renderPopup(e):null;return i("div",{key:s,id:`print-${e}`,class:m},r,p,c)})))))}renderPrintMap(n,t){return i("div",{id:`view-container-${t}`,class:b},i("div",{id:`view-wrapper-${t}`,class:f},this.includeHeader&&n?i("div",{class:w},i("h1",null,n)):null,i("img",{id:`view-${t}`,class:x}),i("div",{id:`scalebar-container-${t}`,class:h})))}renderLegend(n){return i("div",{id:`legend-${n}`,class:l})}renderCompass(n){return i("div",{id:`compass-${n}`,class:d})}renderPopup(n){return i("div",{id:`popup-${n}`,class:u},i("div",{id:`popup-title-${n}`,class:_}),i("div",{id:`popup-content-${n}`,class:v}))}optionOnChange(n){const{checked:t,value:i}=n.target;this[i]=t,this.updateExportOutput()}async exportOnClick(){var n;await this.beforeExport(),(null===(n=this.exportViews)||void 0===n?void 0:n.length)?(this.addPrintStyling(),document.body.prepend(this.printEl),this.exportViews.forEach((({view:n},t)=>{this.handleViewExportOnClick(n,t)})),this.handleImgLoaded()):null!=this.popoverEl&&(this.popoverEl.open=!1)}async handleViewExportOnClick(n,t){this.includeMap&&(this.updateScaleBar(n,t),this.updatePopupToPrint(n,t),this.viewScreenshot(n,t),this.handleLegendSetup(t))}addPrintStyling(){null==this.printStyleEl&&(this.printStyleEl=document.createElement("style"),this.printStyleEl.innerHTML='\n  @media print {\n    @page {\n      size:  Portrait;\n      margin: .25in;\n    }\n\n    html, body {\n      padding: 0;\n      margin: 0;\n      height: 100%;\n      width: 100%;\n    }\n\n    body > *:not(.instant-apps-export-print) { display: none; }\n  }\n\n  * {\n    -webkit-print-color-adjust: exact;\n    color-adjust: exact;\n  }\n\n  instant-apps-header {\n    height: 50px;\n    display: block;\n  }\n\n\n  .instant-apps-export-print {\n    z-index: -999;\n    color: #323232 !important;\n    display: grid;\n    grid-auto-flow: row;\n    --esri-calcite-mode-name: "light";\n    position: absolute;\n  }\n\n  .instant-apps-export-print__view-header {\n    background: #fff;\n  }\n\n  .instant-apps-export-print__view-header h1 {\n    font-size: 16px;\n    font-weight: 500;\n    color: #323232;\n    margin: 6px;\n  }\n\n  .instant-apps-export-print__views-container {\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .instant-apps-export-print__view-content:first-child {\n    page-break-before: unset;\n  } \n\n  .instant-apps-export-print__view-content {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: 32px;\n    page-break-before: always;\n  }\n\n  .instant-apps-export-print, .instant-apps-export-print * {\n    box-sizing: border-box;\n  }\n\n  .instant-apps-export-print__view-section {\n    height: 100%;\n  }\n\n  .instant-apps-export-print__view-container {\n    height: 100%;\n    width: 100%;\n    break-inside: avoid;\n  }\n\n  .instant-apps-export-print__view-wrapper {\n    height: fit-content;\n    width: min-content;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    border: 2pt solid #323232;\n    overflow: hidden;\n  }\n\n  .instant-apps-export-print__view {\n    max-height: 60vh;\n    max-width: calc(100vw - .25in);\n    object-fit: contain;\n  }\n\n  .instant-apps-export-print__popup-container {\n    height: min-content;\n    max-width: 350px;\n    display: none;\n    color: #323232;\n    background: #fff;\n    border: 1pt solid #323232;\n    break-inside: avoid;\n  }\n\n  .instant-apps-export-print__popup-title {\n    border-bottom: 1pt solid #323232;\n  }\n\n  .instant-apps-export-print__popup-content {\n    background: #fff;\n    padding-top: 8pt;\n  }\n\n  .instant-apps-export-print__popup-content .esri-feature-media__chart {\n    background: #fff;\n  }\n\n  .instant-apps-export-print__legend-container {\n    height: min-content;\n    background: #fff;\n    overflow: unset;\n  }\n\n  .esri-legend--card, .esri-legend--card__service-content {\n    flex-flow: row wrap;\n  }\n\n  .instant-apps-export-print .esri-widget > *:not(.esri-scale-bar.esri-widget > *) {\n    background: #fff;\n    color: #323232;\n  }\n\n  .instant-apps-export-print__popup-content * {\n    color: #323232;\n  }\n\n  .instant-apps-export-print .esri-widget__heading {\n    margin: 2pt 7pt;\n    padding: 0;\n    color: #323232;\n  }\n\n  .instant-apps-export-print .esri-legend__ramp-label:before {\n    border-color: rgba(0,0,0,0) rgba(50,50,50,.8) rgba(0,0,0,0) rgba(0,0,0,0);\n  }\n\n  .instant-apps-export-print .esri-legend--card__section {\n    padding: 4pt 0 4pt;\n    min-width: unset;\n    border-left: none;\n  }\n\n  .instant-apps-export-print .esri-legend--card__section:first-child {\n    border-left: none;\n  }\n\n  .instant-apps-export-print .esri-legend--card__service {\n    border: none;\n    flex: 0 1 auto;\n    break-inside: avoid;\n  }\n\n  .instant-apps-export-print .esri-legend--card {\n    border: none;\n    gap: 6pt 12pt;\n  }\n\n  .instant-apps-export-print .esri-legend--card:not(:first-child),\n  .instant-apps-export-print .esri-compass.esri-widget:not(:first-child) {\n    display: none;\n  }\n\n  .instant-apps-export-print .esri-legend--card__service-caption-container {\n    height: unset;\n    padding: 0;\n    border-bottom: none;\n  }\n\n  .instant-apps-export-print .esri-legend--card__service-caption-text {\n    padding-bottom: 4px;\n  }\n\n  .instant-apps-export-print__compass-container {\n    position: absolute;\n    top: 65px;\n    left: 15px;\n    background: #fff;\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n    --calcite-ui-icon-color: #000;\n    border-radius: 50%;\n    height: fit-content;\n  }\n\n  .instant-apps-export-print__compass-container .esri-compass {\n    background: #fff;\n  }\n\n  .instant-apps-export-print__compass-container .esri-compass__icon.esri-icon-compass {\n    color: #000;\n  }\n\n  .instant-apps-export-print__compass-container.esri-compass.esri-widget--button {\n    background: #fff;\n  }\n\n  .instant-apps-export-print__scale-bar-container {\n    width: 100%;\n    position: absolute;\n    bottom: 15px;\n    margin: 0 15px;\n  }\n\n  .instant-apps-export-print__scale-bar-container .esri-scale-bar__label {\n    color: #323232;\n    font-size: 10px;\n    padding: 0 4px;\n  }\n\n  .instant-apps-export-print__scale-bar-container .esri-scale-bar__label-container--line {\n    height: 16px;\n    overflow: hidden;\n  }\n\n  .instant-apps-export-print__scale-bar-container .esri-scale-bar__label-container--top {\n    bottom: 1px;\n  }\n  \n  .instant-apps-export-print__scale-bar-container--position .esri-scale-bar__label {\n    height: 10px;\n    padding: 0 2px;\n    line-height: 11px;\n  }\n\n  .instant-apps-export-print__scale-bar-container .esri-scale-bar__bar-container:nth-child(1n+3) {\n    display: none;\n  }\n\n  .instant-apps-export-print__scale-bar-container--position .esri-scale-bar__bar-container.esri-scale-bar__bar-container--line {\n    align-items: center;\n  }\n\n  .instant-apps-export-print__scale-bar-container .esri-scale-bar__line {\n    background-color: rgba(255, 255, 255, 0.66);\n  }\n\n  .instant-apps-export-print__scale-bar-container .esri-scale-bar__line--top {\n    width: var(--instant-apps-scale-bar-top) !important;\n    border-bottom: 2px solid #323232;\n  }\n\n  .instant-apps-export-print__scale-bar-container .esri-scale-bar__line--bottom {\n    width: var(--instant-apps-scale-bar-bottom) !important;\n    border-top: 2px solid #323232;\n  }\n\n  .instant-apps-export-print__scale-bar-container--position .esri-scale-bar__label-container--line {\n    position: unset;\n    margin: 0 2px;\n    background-color: rgba(255, 255, 255, 0.66);\n    height: 10px;\n    display: flex;\n    align-items: center;\n  }\n\n  .instant-apps-export-print__scale-bar-container .esri-scale-bar__line--top:before,\n  .instant-apps-export-print__scale-bar-container .esri-scale-bar__line--top:after,\n  .instant-apps-export-print__scale-bar-container .esri-scale-bar__line--bottom:before,\n  .instant-apps-export-print__scale-bar-container .esri-scale-bar__line--bottom:after {\n    background-color: #323232;\n    border-right: 2px solid #323232;\n  }\n\n  .instant-apps-export-print__popup-container .esri-feature-media__item-navigation {\n    display: none;\n  }\n\n  .instant-apps-export-print__popup-container .esri-feature-media__chart.esri-feature-media__chart--rendered * {\n    width: 100%!important;\n  }\n\n  .instant-apps-export-print__popup-content .esri-popup__content {\n    margin: 0;\n  }',document.body.prepend(this.printStyleEl))}handleImgLoaded(){this.exportIsLoading=!0,setTimeout((()=>{this.exportIsLoading=void 0,this.setupViewPrintElements()}),1500)}resetPrintContent(){}async updatePopupToPrint(n,t){var i,e;const o=this.printEl.querySelector(`#popup-${t}`);if(null!=o&&(o.style.display=this.includePopup&&n.popup.visible?"block":"none",this.checkPopupOpen(n,t)),n.popup.visible&&null!=n.popup.selectedFeature){const o=document.createElement(`h${null!==(i=n.popup.headingLevel)&&void 0!==i?i:2}`);o.innerHTML=null!==(e=n.popup.title)&&void 0!==e?e:"",o.className="esri-widget__heading esri-popup__header-title";const a=this.printEl.querySelector(`#popup-title-${t}`);null!=a&&(a.style.display=n.popup.title?"block":"none",a.innerHTML="",a.prepend(o))}}updateExportOutput(){this.output={},this.showIncludeLegend&&(this.output.includeLegend=this.includeLegend),this.showIncludeMap&&(this.output.includeMap=this.includeMap),this.showIncludePopup&&(this.output.includePopup=this.includePopup),this.showIncludeHeader&&(this.output.includeHeader=this.includeHeader),this.exportOutputUpdated.emit()}setupViewPrintElements(){const n=document.title;window.print(),document.title=n,setTimeout((()=>{this.resetPrintContent()}),1e3)}handleLegendSetup(n){var t;const i=this.printEl.querySelector(`#legend-${n}`);if(this.showIncludeLegend&&this.includeMap&&i){const e=this.legends[n],o=null!=e&&(null===(t=e.activeLayerInfos)||void 0===t?void 0:t.length)>0;i.style.display=this.includeLegend&&o?"block":"none"}}handleWidgetCreation(){var n;this.includeMap&&(null===(n=this.exportViews)||void 0===n||n.forEach((({view:n},t)=>{this.handleLegendCreation(n,t)})))}handleIncludePopup(n,t){var i,e;if(this.showIncludePopup){const o=`includePopup-${t}`;null===(i=this.handles)||void 0===i||i.remove(o),null===(e=this.reactiveUtils)||void 0===e||e.whenOnce((()=>null==n?void 0:n.ready)).then((()=>{var t;null===(t=this.handles)||void 0===t||t.add(this.reactiveUtils.watch((()=>{var t;return null===(t=null==n?void 0:n.popup)||void 0===t?void 0:t.visible}),(n=>{this.includePopup=n})),o)}))}}handleLegendCreation(n,t){var i,e,o,a;const s=this.printEl.querySelector(`#legend-${t}`);if(this.showIncludeLegend&&null!=s){const r=n.map,p=this.legends[t],c=null===(i=null==p?void 0:p.view)||void 0===i?void 0:i.map;null!=(null===(e=null==r?void 0:r.portalItem)||void 0===e?void 0:e.id)&&(null===(o=null==r?void 0:r.portalItem)||void 0===o?void 0:o.id)===(null===(a=null==c?void 0:c.portalItem)||void 0===a?void 0:a.id)||this.updateLegend(n,t,s)}}async updateLegend(n,t,i){null==n||n.when((async n=>{if(null==this.legends[t]&&null!=i){i.innerHTML="";const e=document.createElement("div");i.append(e);const[o]=await a(["esri/widgets/Legend"]);this.legends[t]=new o({id:`legend-widget-${t}`,container:e,view:n,style:{type:"card",layout:"side-by-side"}})}}))}handleCompassCreation(n,t){var i,e,o;const a=this.compassContainerEl.querySelector(`#compass-${t}`);if(null!=a){const s=n.map,r=this.compasses[t],p=null===(i=null==r?void 0:r.view)||void 0===i?void 0:i.map;(null===(e=null==s?void 0:s.portalItem)||void 0===e?void 0:e.id)===(null===(o=null==p?void 0:p.portalItem)||void 0===o?void 0:o.id)||this.updateCompass(n,t,a)}}updateCompass(n,t,i){null==n||n.when((async n=>{const e=document.createElement("div");if(null==i)return;i.append(e);const[o]=await a(["esri/widgets/Compass"]);this.compasses[t]=new o({id:`compass-widget-${t}`,container:e,view:n})}))}updateScaleBar(n,t){const i=this.printEl.querySelector(`#scalebar-container-${t}`);if(i&&null!=n&&(i.innerHTML="",this.showScaleBar)){const t=n.ui.getComponents(),e=null==t?void 0:t.find((({container:n})=>{var t;return null===(t=null==n?void 0:n.className)||void 0===t?void 0:t.includes("esri-scale-bar")}));null!=(null==e?void 0:e.container)&&"string"!=typeof e.container&&i.append(e.container.cloneNode(!0))}}async viewScreenshot(n,t){if(this.includeMap){const i=this.printEl.querySelector(`#scalebar-container-${t}`);null==i||i.classList.toggle("instant-apps-export-print__scale-bar-container--position",n.width>1e3);const e=await n.takeScreenshot({width:2*n.width,height:2*n.height});this.handleScaleBarSize(n,e,i);const o=this.printEl.querySelector(`#view-${t}`);null!=e&&null!=o&&(o.src=e.dataUrl)}}checkPopupOpen(n,t){const i=n.popup.container,e=null==i?void 0:i.querySelector(".esri-popup .esri-feature__main-container");if(null!=e){const n=e.querySelectorAll("canvas"),i=this.printEl.querySelector(`#popup-content-${t}`);if(null==i)return;i.innerHTML="",i.append(e.cloneNode(!0));const o=i.querySelectorAll("canvas");n.forEach(((n,t)=>{var i;const e=n.toDataURL(),a=document.createElement("img");a.src=e;const s=n.getAttribute("style");s&&a.setAttribute("style",s);const r=o[t];null!=r&&(r.replaceWith(a),document.querySelector("link[href*='esri/themes/dark/main.css']")&&null!=(null===(i=a.parentElement)||void 0===i?void 0:i.parentElement)&&(a.parentElement.style.background="#242424",a.parentElement.parentElement.style.background="#242424"))}))}}handleScaleBarSize(n,t,i){if(this.showScaleBar&&"2d"===(null==n?void 0:n.type)&&null!=i){const n=i.querySelector(".esri-scale-bar__line--top"),e=i.querySelector(".esri-scale-bar__line--bottom");this.setScalebarWidth(t,i,n,"top"),this.setScalebarWidth(t,i,e,"bottom")}}setScalebarWidth(n,t,i,e){if(null!=i&&null!=n){const o=n.data.width/2,a=Number(i.style.width.replace("px",""));null==t||t.style.setProperty(`--instant-apps-scale-bar-${e}`,a/o*100+"%")}}get el(){return o(this)}static get watchers(){return{includeMap:["watchIncludeMap"],exportViews:["watchView"]}}};k.style=":host{display:block;--instant-apps-export-action-background:var(--calcite-color-foreground-1);--instant-apps-export-action-background-hover:var(--calcite-color-foreground-2);--instant-apps-export-action-background-press:var(--calcite-color-foreground-3);--instant-apps-export-action-height:100%;--instant-apps-export-action-width:fit-content;--instant-apps-export-action-icon-color:var(--calcite-color-text-3);--instant-apps-export-action-icon-hover-color:var(--calcite-color-text-1);--instant-apps-export-background:var(--calcite-color-foreground-1);--instant-apps-export-text-color:var(--calcite-color-text-1);--instant-apps-export-popover-width:250px}.instant-apps-export{height:100%}.instant-apps-export *{box-sizing:border-box}.instant-apps-export__popover-container,.instant-apps-export__inline-container{padding:12px;background:var(--instant-apps-export-background);--calcite-color-text-1:var(--instant-apps-export-text-color)}.instant-apps-export__popover-container{width:var(--instant-apps-export-popover-width)}.instant-apps-export calcite-action{height:var(--instant-apps-export-action-height);width:var(--instant-apps-export-action-width);--calcite-color-foreground-1:var(--instant-apps-export-action-background);--calcite-color-foreground-2:var(--instant-apps-export-action-background-hover);--calcite-color-foreground-3:var(--instant-apps-export-action-background-press);--calcite-color-text-3:var(--instant-apps-export-action-icon-color);--calcite-color-text-1:var(--instant-apps-export-action-icon-hover-color)}.instant-apps-export .instant-apps-export-print{display:none}.instant-apps-export__visually-hidden{position:absolute;top:0;z-index:-1;visibility:hidden}.instant-apps-export calcite-input{--calcite-color-foreground-1:var(--instant-apps-export-background);--calcite-color-text-1:var(--instant-apps-export-text-color)}.instant-apps-export calcite-popover{--calcite-color-foreground-1:var(--instant-apps-export-background)}.instant-apps-export calcite-switch{--calcite-color-foreground-1:#fff;--calcite-color-foreground-2:#f3f3f3}.instant-apps-export calcite-button:last-of-type{margin-top:0.5rem}.instant-apps-export .calcite-mode-dark calcite-switch{--calcite-color-foreground-1:#2b2b2b;--calcite-color-foreground-2:#202020}.instant-apps-export__compass-container.esri-widget{background:#fff;box-shadow:0 1px 2px rgba(0, 0, 0, 0.3)}.instant-apps-export__compass-container.esri-widget .esri-compass__icon.esri-icon-compass{color:#6e6e6e}.hide{display:none}.screenshotCursor{cursor:crosshair}";export{k as instant_apps_export_views}