@esri/solutions-components 0.11.11 → 0.11.13

package/dist/esm/json-editor_7.entry.js

@@ -3,14 +3,14 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, g as getElement, h, H as Host, c as createEvent } from './index-df5db8e9.js';
-import { g as getLocaleComponentStrings } from './locale-7874c756.js';
-import { s as state } from './solution-store-4c39c654.js';
+import { r as registerInstance, g as getElement, h, H as Host, c as createEvent } from './index-b49a8ff6.js';
+import { g as getLocaleComponentStrings } from './locale-2b4fcfe1.js';
+import { s as state } from './solution-store-8f4fe1d9.js';
 import { d as EUpdateType } from './interfaces-659e3836.js';
 import { E as EFileType } from './solution-resource-30a29505.js';
 import './esri-loader-c6842c6b.js';
 import './_commonjsHelpers-089957fe.js';
-import './index-c247b62b.js';
+import './index-29ce74dd.js';
 import './restHelpersGet-a7fda344.js';
 import './update-ad0b88fa.js';
 
@@ -20,15 +20,38 @@ const JsonEditorStyle0 = jsonEditorCss;
 const JsonEditor = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.hasChanges = false;
-        this.hasErrors = false;
-        this.instanceid = "";
-        this.locale = undefined;
-        this.value = "";
     }
     get el() { return getElement(this); }
     //--------------------------------------------------------------------------
     //
+    //  Properties (public)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Contains a public value to indicate if the model has any changes.
+     */
+    hasChanges = false;
+    /**
+     * Contains a public value to indicate if the model has any errors
+     * that would prevent saving it.
+     */
+    hasErrors = false;
+    /**
+     * Contains a unique identifier for when we have multiple instances of the editor.
+     * For example when we want to show an item's data as well as an item's properties.
+     */
+    instanceid = "";
+    /**
+     * string: Locale to use for translation of stings in the UI
+     */
+    locale;
+    /**
+     * Contains the public value for this component; it is not changed by the editor.
+     * When changed, the change overwrites the contents of the editor.
+     */
+    value = "";
+    //--------------------------------------------------------------------------
+    //
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
@@ -434,24 +457,23 @@ const SolutionItemDetailsStyle0 = solutionItemDetailsCss;
 const SolutionItemDetails = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.itemId = "";
-        this.locale = undefined;
-        this.itemDetails = {
-            accessInformation: "",
-            description: "",
-            licenseInfo: "",
-            snippet: "",
-            tags: [],
-            title: ""
-        };
-        this.itemEdit = undefined;
-        this._translations = undefined;
-        this.thumbnail = undefined;
-        this.thumbnailContainer = undefined;
     }
     get el() { return getElement(this); }
     //--------------------------------------------------------------------------
     //
+    //  Properties (public)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * A template's itemId.
+     */
+    itemId = "";
+    /**
+     * string: Locale to use for translation of stings in the UI
+     */
+    locale;
+    //--------------------------------------------------------------------------
+    //
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
@@ -500,11 +522,33 @@ const SolutionItemDetails = class {
      * Handle to the element for browsing for a file.
      */
     browseForThumbnail;
+    itemDetails = {
+        accessInformation: "",
+        description: "",
+        licenseInfo: "",
+        snippet: "",
+        tags: [],
+        title: ""
+    };
+    itemEdit;
     itemType;
+    /**
+     * Contains the translations for this component.
+     * All UI strings should be defined here.
+     */
+    _translations;
     /**
      * Handle to the snippet character-count feedback.
      */
     itemSnippetCount;
+    /**
+     * Handle to the thumbnail image display.
+     */
+    thumbnail;
+    /**
+     * Handle to the thumbnail image container.
+     */
+    thumbnailContainer;
     //--------------------------------------------------------------------------
     //
     //  Event Listeners
@@ -643,14 +687,23 @@ const SolutionItemSharingStyle0 = solutionItemSharingCss;
 const SolutionItemSharing = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.groupId = "";
-        this.locale = undefined;
-        this._translations = undefined;
-        this.sharing = [];
     }
     get el() { return getElement(this); }
     //--------------------------------------------------------------------------
     //
+    //  Properties (public)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * A template's groupId.
+     */
+    groupId = "";
+    /**
+     * string: Locale to use for translation of stings in the UI
+     */
+    locale;
+    //--------------------------------------------------------------------------
+    //
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
@@ -685,6 +738,20 @@ const SolutionItemSharing = class {
     }
     //--------------------------------------------------------------------------
     //
+    //  Properties (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Contains the translations for this component.
+     * All UI strings should be defined here.
+     */
+    _translations;
+    /**
+     * Contains the public sharing for this component.
+     */
+    sharing = [];
+    //--------------------------------------------------------------------------
+    //
     //  Event Listeners
     //
     //--------------------------------------------------------------------------
@@ -778,14 +845,23 @@ const SolutionOrganizationVariables = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.organizationVariableSelected = createEvent(this, "organizationVariableSelected", 7);
-        this.locale = undefined;
-        this.value = "";
-        this._organizationVariables = [];
-        this._translations = undefined;
     }
     get el() { return getElement(this); }
     //--------------------------------------------------------------------------
     //
+    //  Properties (public)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * string: Locale to use for translation of stings in the UI
+     */
+    locale;
+    /**
+     * Contains the public value for this component.
+     */
+    value = "";
+    //--------------------------------------------------------------------------
+    //
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
@@ -819,6 +895,17 @@ const SolutionOrganizationVariables = class {
     }
     //--------------------------------------------------------------------------
     //
+    //  Properties (protected)
+    //
+    //--------------------------------------------------------------------------
+    _organizationVariables = [];
+    /**
+     * Contains the translations for this component.
+     * All UI strings should be defined here.
+     */
+    _translations;
+    //--------------------------------------------------------------------------
+    //
     //  Event Listeners
     //
     //--------------------------------------------------------------------------
@@ -883,16 +970,28 @@ const SolutionResourceItemStyle0 = solutionResourceItemCss;
 const SolutionResourceItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.authentication = undefined;
-        this.itemId = "";
-        this.locale = undefined;
-        this.resourceFilePaths = [];
-        this.resources = [];
-        this._translations = undefined;
     }
     get el() { return getElement(this); }
     //--------------------------------------------------------------------------
     //
+    //  Properties (public)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Credentials for requests
+     */
+    authentication;
+    /**
+     * A template's itemId.
+     * This is used to get the correct model from a store in the json-editor
+     */
+    itemId = "";
+    /**
+     * string: Locale to use for translation of stings in the UI
+     */
+    locale;
+    //--------------------------------------------------------------------------
+    //
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
@@ -930,6 +1029,24 @@ const SolutionResourceItem = class {
         const hasValidResources = this._hasValidResources();
         return (h(Host, { key: '36017a54e5f8fafda593af2b727f1fbda80c7455' }, h("div", { key: 'eb9f53c9b4161c09e0b00d9a4d90a814d944819c', class: "resource-item" }, h("div", { key: '504dfa5fb623ed27a0829f60ebbf5de17b6d467f', class: "margin-bottom-1" }, h("calcite-button", { key: 'e578443e1ef409917c5946c77e660c04d273cb6c', appearance: "solid", class: "resource-button", color: "blue", onClick: () => this._addNewResource() }, this._translations.addResource), h("calcite-button", { key: 'e4c11326d7c5d96de1d0983eb0beb3cf726177c8', appearance: "solid", color: "blue", disabled: !hasValidResources, onClick: () => this._downloadAll() }, this._translations.downloadAll)), h("div", { key: '3617bf40ac8b01d70b523642757a624c977ea491', class: "resources-container", style: { display: hasValidResources ? "inherit" : "none" } }, this._renderResourceList()))));
     }
+    //--------------------------------------------------------------------------
+    //
+    //  Properties (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * The templates resourceFilePaths.
+     */
+    resourceFilePaths = [];
+    /**
+     * The templates resources.
+     */
+    resources = [];
+    /**
+     * Contains the translations for this component.
+     * All UI strings should be defined here.
+     */
+    _translations;
     _removedResources = {};
     //--------------------------------------------------------------------------
     //
@@ -1161,12 +1278,50 @@ const SolutionTemplateDataStyle0 = solutionTemplateDataCss;
 
 const SolutionTemplateData = class {
     get el() { return getElement(this); }
+    //--------------------------------------------------------------------------
+    //
+    //  Properties (public)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Contains the public value for this component.
+     *
+     * When working with a resource item this should contain an IResourceItem
+     *
+     * When working with a json type item this should contain the data and vars
+     */
+    //@Prop({ mutable: true, reflect: true }) value: ITemplateData = {};
+    /**
+     * This needs to be unique for props vs data of an item
+     */
+    instanceid = "";
+    /**
+     * A template's itemId.
+     * This is used to get the correct model from a store in the json-editor
+     */
+    itemId = "";
     itemIdWatchHandler() {
         this._initializing = true;
         this.value = JSON.stringify(this.instanceid === "data"
             ? state.getItemInfo(this.itemId).data
             : state.getItemInfo(this.itemId).properties, null, 2);
     }
+    /**
+     * string: Locale to use for translation of stings in the UI
+     */
+    locale;
+    /*
+     * Contains the organization based variables
+     */
+    organizationVariables = "";
+    /**
+     * Contains the solution based variables
+     */
+    solutionVariables = "";
+    /**
+     * Used to show/hide the variable containers
+     */
+    varsOpen = true;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -1187,14 +1342,6 @@ const SolutionTemplateData = class {
     //--------------------------------------------------------------------------
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.instanceid = "";
-        this.itemId = "";
-        this.locale = undefined;
-        this.organizationVariables = "";
-        this.solutionVariables = "";
-        this.varsOpen = true;
-        this._translations = undefined;
-        this.value = "";
         window.addEventListener("solutionEditorContentChanged", (evt) => {
             if (this.itemId) {
                 const { id, contents } = evt.detail;
@@ -1227,6 +1374,17 @@ const SolutionTemplateData = class {
     render() {
         return (h(Host, { key: 'db99cf57229d7d8b9fe6315e180d95de0b20fc8d' }, h("div", { key: '83473f420d1417c85ebb4119be9f359cab878c54', class: "solution-data-container" }, h("calcite-shell", { key: '013754ef962c2e5c112f6a8cc6c5d1b8e768078e', class: "light var-container", dir: "ltr" }, h("calcite-panel", { key: '11ab2a07fe4af542d8cefc1c131246deef43dd9a', class: "json-editor" }, h("div", { key: 'ba0460977eb0375acaf5b11ce951986a08ece39b', class: "solution-data-child-container calcite-match-height" }, h("json-editor", { key: '53251c1583aa7e8cf2a4e9a1f22e4c72430d3928', class: "solution-data-editor-container", instanceid: this.itemId + "|" + this.instanceid, locale: this.locale, value: this.value }))), h("calcite-shell-panel", { key: '30c47797a35ff7228c4318a5633aec57de05b8cf', "height-scale": "l", position: "end", slot: "contextual-panel", "width-scale": "xs" }, h("div", { key: '028b16654835744f0735b880ca85a3d174963414', class: this.varsOpen ? "solution-data-child-container" : "solution-data-child-container-collapsed" }, h("calcite-button", { key: 'bb5049611e778b970454544851a625ccef47d23a', appearance: "transparent", class: "collapse-btn", "icon-start": this.varsOpen ? "chevrons-right" : "chevrons-left", id: "collapse-vars", onClick: () => this._toggleVars(), scale: "s", title: this.varsOpen ? this._translations.collapse : this._translations.expand }), h("div", { key: 'c2a30a7c27db181e0dfe0e201d9d3b2742247080', class: this.varsOpen ? "org-vars" : "org-vars display-none", id: "orgVars" }, h("solution-organization-variables", { key: '178c4301c8558c4fe7114c8f6cf5bc0df10883a0', locale: this.locale, value: this.organizationVariables })), h("div", { key: 'f85375bac946cff856b6915f340bf926498265ea', class: this.varsOpen ? "sol-vars" : "sol-vars display-none", id: "solVars" }, h("solution-variables", { key: '166d0752746994bc4aebd4e41660f8a2d2c678ea', locale: this.locale, value: this.solutionVariables }))))))));
     }
+    //--------------------------------------------------------------------------
+    //
+    //  Properties (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Contains the translations for this component.
+     * All UI strings should be defined here.
+     */
+    _translations;
+    value = "";
     _initializing = false;
     //--------------------------------------------------------------------------
     //
@@ -1277,14 +1435,23 @@ const SolutionVariables = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.solutionVariableSelected = createEvent(this, "solutionVariableSelected", 7);
-        this.value = "";
-        this.locale = undefined;
-        this._solutionVariables = [];
-        this._translations = undefined;
     }
     get el() { return getElement(this); }
     //--------------------------------------------------------------------------
     //
+    //  Properties (public)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Contains the public value for this component.
+     */
+    value = "";
+    /**
+     * string: Locale to use for translation of stings in the UI
+     */
+    locale;
+    //--------------------------------------------------------------------------
+    //
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
@@ -1318,6 +1485,17 @@ const SolutionVariables = class {
     }
     //--------------------------------------------------------------------------
     //
+    //  Properties (protected)
+    //
+    //--------------------------------------------------------------------------
+    _solutionVariables = [];
+    /**
+     * Contains the translations for this component.
+     * All UI strings should be defined here.
+     */
+    _translations;
+    //--------------------------------------------------------------------------
+    //
     //  Event Listeners
     //
     //--------------------------------------------------------------------------

package/dist/esm/loader.js

@@ -3,8 +3,8 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { b as bootstrapLazy } from './index-df5db8e9.js';
-export { s as setNonce } from './index-df5db8e9.js';
+import { b as bootstrapLazy } from './index-b49a8ff6.js';
+export { s as setNonce } from './index-b49a8ff6.js';
 import { g as globalScripts } from './app-globals-7cccfb46.js';
 
 const defineCustomElements = async (win, options) => {

package/dist/esm/locale-2b4fcfe1.js

@@ -0,0 +1,155 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { e as esriLoader } from './esri-loader-c6842c6b.js';
+import { a as getAssetPath } from './index-b49a8ff6.js';
+
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const loadModules = async (moduleNames, options) => {
+    const mods = await esriLoader.exports.loadModules(moduleNames, options);
+    return mods.map((mod) => (mod.__esModule && mod.default ? mod.default : mod));
+};
+
+/*
+ *   Copyright (c) 2022 Esri
+ *   All rights reserved.
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+const languageMap = new Map([
+    ["ar", "ar"],
+    ["bg", "bg"],
+    ["bs", "bs"],
+    ["ca", "ca"],
+    ["cs", "cs"],
+    ["da", "da"],
+    ["de", "de"],
+    ["el", "el"],
+    ["en", "en"],
+    ["es", "es"],
+    ["et", "et"],
+    ["fi", "fi"],
+    ["fr", "fr"],
+    ["he", "he"],
+    ["hr", "hr"],
+    ["hu", "hu"],
+    ["id", "id"],
+    ["it", "it"],
+    ["ja", "ja"],
+    ["ko", "ko"],
+    ["lt", "lt"],
+    ["lv", "lv"],
+    ["nb", "nb"],
+    ["nl", "nl"],
+    ["pl", "pl"],
+    ["pt-br", "pt-BR"],
+    ["pt-pt", "pt-PT"],
+    ["ro", "ro"],
+    ["ru", "ru"],
+    ["sk", "sk"],
+    ["sl", "sl"],
+    ["sr", "sr"],
+    ["sv", "sv"],
+    ["th", "th"],
+    ["tr", "tr"],
+    ["uk", "uk"],
+    ["vi", "vi"],
+    ["zh-cn", "zh-CN"],
+    ["zh-hk", "zh-HK"],
+    ["zh-tw", "zh-TW"],
+]);
+async function formatNumber(number, options) {
+    const { api = 4, type = "decimal", places = 2 } = options || {};
+    if (api === 4) {
+        const [intl] = await loadModules(["esri/intl"]);
+        const numberFormatIntlOptions = intl.convertNumberFormatToIntlOptions({
+            places,
+            type,
+            digitSeparator: true,
+        });
+        return intl.formatNumber(number, numberFormatIntlOptions);
+    }
+    const [dojoNumber] = await loadModules(["dojo/number"]);
+    return dojoNumber.format(number, {
+        type,
+        places,
+    });
+}
+
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+function getComponentClosestLanguage(element) {
+    const closestElement = (element.closest("[lang]")) ?? element.shadowRoot?.ownerDocument?.documentElement;
+    // language set by the calling application or browser. defaults to english.
+    const lang = (closestElement?.lang || navigator?.language || "en").toLowerCase();
+    if (languageMap.has(lang)) {
+        return languageMap.get(lang);
+    }
+    else {
+        // "ru-RU" maps to "ru" use case
+        return languageMap.has(lang.slice(0, 2)) ? languageMap.get(lang.slice(0, 2)) : "en";
+    }
+}
+function fetchLocaleStringsForComponent(componentName, locale) {
+    return new Promise((resolve, reject) => {
+        fetch(getAssetPath(`assets/t9n/${componentName}/resources_${locale}.json`)).then(result => {
+            if (result.ok) {
+                resolve(result.json());
+            }
+            else {
+                reject();
+            }
+        }, () => reject());
+    });
+}
+async function getLocaleComponentStrings(element) {
+    const componentName = element.tagName.toLowerCase();
+    const componentLanguage = getComponentClosestLanguage(element);
+    let strings;
+    try {
+        strings = await fetchLocaleStringsForComponent(componentName, componentLanguage);
+    }
+    catch (e) {
+        console.warn(`no locale for ${componentName} (${componentLanguage}) loading default locale en.`);
+        strings = await fetchLocaleStringsForComponent(componentName, "en");
+    }
+    return [strings, componentLanguage];
+}
+
+export { getComponentClosestLanguage as a, formatNumber as f, getLocaleComponentStrings as g, loadModules as l };