@esri/solutions-components 0.8.2 → 0.8.3

package/dist/solutions-components/solution-item-sharing.entry.js

@@ -0,0 +1,135 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, h, a as Host, g as getElement } from './index-bdfaac50.js';
+import { s as state } from './solution-store-31cccb90.js';
+import { g as getLocaleComponentStrings } from './locale-d9463a95.js';
+import './index-91eeaf01.js';
+import './interfaces-586e863c.js';
+import './index-7fc1cba9.js';
+import './_commonjsHelpers-3cd6d4ee.js';
+import './index-a1e91462.js';
+import './loadModules-827c5581.js';
+import './esri-loader-af2bbfd5.js';
+
+const solutionItemSharingCss = ":host{display:block}.container-border{padding:1rem}.icon-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
+
+const SolutionItemSharing = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.groupId = "";
+        this._translations = undefined;
+        this.sharing = [];
+    }
+    itemIdWatchHandler() {
+        const itemEdit = state.getItemInfo(this.groupId);
+        this.sharing = itemEdit.groupDetails;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     */
+    async componentWillLoad() {
+        return this._getTranslations();
+    }
+    /**
+     * Renders the component.
+     */
+    render() {
+        return (h(Host, null, h("div", { class: "container-border" }, h("calcite-label", null, this._translations.groupInfo), this._renderItems(this.sharing))));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Events
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods (async)
+    //
+    //--------------------------------------------------------------------------
+    async getShareInfo() {
+        return this.sharing;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Render share options based on the list of share details
+     *
+     * @param objs list of IItemShare objects that are used to expose and store share info for the solutions items
+     */
+    _renderItems(objs) {
+        return objs && objs.length > 0
+            ? objs.map(item => {
+                return (h("calcite-label", { layout: "inline" }, h("calcite-switch", { checked: item.shareItem, id: item.id, name: "setting", onCalciteSwitchChange: (event) => this._updateItem(event), scale: "m", value: "enabled" }), h("solution-item-icon", { type: item.type, typeKeywords: item.typeKeywords }), h("span", { class: "icon-text", title: item.title }, item.title)));
+            })
+            : null;
+    }
+    /**
+     * Update the items share prop based on the switch state
+     *
+     * @param event onCalciteSwitchChange event
+     */
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    _updateItem(event) {
+        const id = event.target.id;
+        this.sharing = this.sharing.map((itemShare) => {
+            if (itemShare.id === id) {
+                // update the item
+                itemShare.shareItem = event.target.checked;
+                // update the item in the store
+                const itemEdit = state.getItemInfo(id);
+                if (itemShare.shareItem) {
+                    // Add the group to the item if it's not already there
+                    if (!itemEdit.groups) {
+                        itemEdit.groups = [this.groupId];
+                    }
+                    else if (itemEdit.groups.indexOf(this.groupId) < 0) {
+                        itemEdit.groups.push(this.groupId);
+                    }
+                }
+                else {
+                    // Remove the group from the item if it's there
+                    if (itemEdit.groups) {
+                        const i = itemEdit.groups.indexOf(this.groupId);
+                        if (i > -1) {
+                            itemEdit.groups.splice(i, 1);
+                        }
+                    }
+                }
+                state.setItemInfo(itemEdit);
+            }
+            return itemShare;
+        });
+    }
+    /**
+     * Fetches the component's translations
+     *
+     * @protected
+     */
+    async _getTranslations() {
+        const translations = await getLocaleComponentStrings(this.el);
+        this._translations = translations[0];
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "groupId": ["itemIdWatchHandler"]
+    }; }
+};
+SolutionItemSharing.style = solutionItemSharingCss;
+
+export { SolutionItemSharing as solution_item_sharing };

package/dist/solutions-components/solution-item.entry.js

@@ -0,0 +1,102 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, h, a as Host, g as getElement } from './index-bdfaac50.js';
+import { s as state } from './solution-store-31cccb90.js';
+import { g as getLocaleComponentStrings } from './locale-d9463a95.js';
+import './index-91eeaf01.js';
+import './interfaces-586e863c.js';
+import './index-7fc1cba9.js';
+import './_commonjsHelpers-3cd6d4ee.js';
+import './index-a1e91462.js';
+import './loadModules-827c5581.js';
+import './esri-loader-af2bbfd5.js';
+
+const solutionItemCss = ".configuration-container{position:relative;height:100%;width:100%}.configuration{position:absolute;top:0px;right:0px;bottom:0px;left:0px;display:flex;padding:0.5rem;border:1px #808080 solid}.config-tabs{width:100%}.config-tab{width:100%;overflow-y:auto;height:inherit}";
+
+const SolutionItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.authentication = undefined;
+        this.itemId = "";
+        this.solutionVariables = "";
+        this.organizationVariables = "";
+        this.itemType = undefined;
+        this._translations = undefined;
+    }
+    itemIdWatchHandler() {
+        const itemEdit = state.getItemInfo(this.itemId);
+        this.itemType = itemEdit.type;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     */
+    async componentWillLoad() {
+        return this._getTranslations();
+    }
+    /**
+     * Renders the component.
+     */
+    render() {
+        return (h(Host, null, h("div", { class: "configuration-container" }, h("div", { class: "configuration" }, this._showGroupTabs(this.itemType === "Group"), this._showItemTabs(this.itemType !== "Group")))));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Events
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods (async)
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Render tabs based on group item types
+     *
+     * @param visible Should the current tab be visible
+     */
+    _showGroupTabs(visible) {
+        return h("calcite-tabs", { class: "config-tabs", style: { display: visible ? "inherit" : "none" } }, h("calcite-tab-nav", { slot: "tab-nav" }, h("calcite-tab-title", null, this._translations.groupDetailsTab), h("calcite-tab-title", null, this._translations.sharingTab)), h("calcite-tab", { class: "config-tab", id: "group-tab", selected: true }, h("solution-item-details", { "item-id": this.itemId })), h("calcite-tab", { class: "config-tab", id: "share-tab" }, h("solution-item-sharing", { "group-id": this.itemId })));
+    }
+    /**
+     * Render tabs based for an items details, data, and props section from a template
+     *
+     * @param visible Should the current tab be visible
+     */
+    _showItemTabs(visible) {
+        return h("calcite-tabs", { class: "config-tabs", style: { display: visible ? "inherit" : "none" } }, h("calcite-tab-nav", { slot: "tab-nav" }, h("calcite-tab-title", null, this._translations.itemDetailsTab), h("calcite-tab-title", null, this._translations.dataTab), h("calcite-tab-title", null, this._translations.propertiesTab), h("calcite-tab-title", null, this._translations.resourcesTab)), h("calcite-tab", { class: "config-tab", selected: true }, h("solution-item-details", { "item-id": this.itemId })), h("calcite-tab", { class: "config-tab", id: "data-tab" }, h("solution-template-data", { instanceid: "data", "item-id": this.itemId, "organization-variables": this.organizationVariables, "solution-variables": this.solutionVariables })), h("calcite-tab", { class: "config-tab", id: "props-tab" }, h("solution-template-data", { instanceid: "properties", "item-id": this.itemId, "organization-variables": this.organizationVariables, "solution-variables": this.solutionVariables })), h("calcite-tab", { class: "config-tab", id: "resources-tab" }, h("solution-resource-item", { authentication: this.authentication, class: "solutions-resource-container", "item-id": this.itemId })));
+    }
+    /**
+     * Fetches the component's translations
+     *
+     * @protected
+     */
+    async _getTranslations() {
+        const translations = await getLocaleComponentStrings(this.el);
+        this._translations = translations[0];
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "itemId": ["itemIdWatchHandler"]
+    }; }
+};
+SolutionItem.style = solutionItemCss;
+
+export { SolutionItem as solution_item };

package/dist/solutions-components/solution-organization-variables.entry.js

@@ -0,0 +1,91 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, e as createEvent, h, a as Host, g as getElement } from './index-bdfaac50.js';
+import { g as getLocaleComponentStrings } from './locale-d9463a95.js';
+import './loadModules-827c5581.js';
+import './esri-loader-af2bbfd5.js';
+import './_commonjsHelpers-3cd6d4ee.js';
+
+const solutionOrganizationVariablesCss = ":host{display:block}.container-border{overflow-y:auto}.org-var-header{margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:1rem}";
+
+const SolutionOrganizationVariables = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.organizationVariableSelected = createEvent(this, "organizationVariableSelected", 7);
+        this.value = "";
+        this._organizationVariables = [];
+        this._translations = undefined;
+    }
+    valueWatchHandler() {
+        this._organizationVariables = JSON.parse(this.value);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     */
+    async componentWillLoad() {
+        return this._getTranslations();
+    }
+    /**
+     * Renders the component.
+     */
+    render() {
+        return (h(Host, null, h("div", null, h("h4", { class: "org-var-header" }, this._translations.orgVariables)), h("div", { class: "container-border" }, h("calcite-tree", { id: "variable-label" }, this._renderHierarchy(this._organizationVariables)))));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods (async)
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Renders the organization based variable items the user can insert at runtime
+     *
+     * @param objs a list of organization variables to render
+     */
+    _renderHierarchy(objs) {
+        const hierarchy = objs.map(obj => {
+            return (h("calcite-tree-item", { onClick: () => this._treeItemSelected(obj.id, obj.value) }, obj.title));
+        });
+        return hierarchy;
+    }
+    /**
+     * Publishes the `organizationVariableSelected` event containing `itemId`, the id of the selected variable and the value of the variable.
+     *
+     * @param itemId Item id as reported by click event
+     * @param value Variable id as reported by click event
+     */
+    _treeItemSelected(itemId, value) {
+        this.organizationVariableSelected.emit({
+            itemId,
+            value
+        });
+    }
+    /**
+     * Fetches the component's translations
+     *
+     * @protected
+     */
+    async _getTranslations() {
+        const translations = await getLocaleComponentStrings(this.el);
+        this._translations = translations[0];
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["valueWatchHandler"]
+    }; }
+};
+SolutionOrganizationVariables.style = solutionOrganizationVariablesCss;
+
+export { SolutionOrganizationVariables as solution_organization_variables };

package/dist/solutions-components/solution-resource-item.entry.js

@@ -0,0 +1,280 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, h, a as Host, g as getElement } from './index-bdfaac50.js';
+import { d as EUpdateType } from './interfaces-586e863c.js';
+import { E as EFileType } from './index-7fc1cba9.js';
+import { s as state } from './solution-store-31cccb90.js';
+import { g as getLocaleComponentStrings } from './locale-d9463a95.js';
+import './_commonjsHelpers-3cd6d4ee.js';
+import './index-a1e91462.js';
+import './index-91eeaf01.js';
+import './loadModules-827c5581.js';
+import './esri-loader-af2bbfd5.js';
+
+const solutionResourceItemCss = ":host{display:block}.resource-item{padding:1rem}.resource-button{margin-inline-end:1rem}.resource-progress{padding-top:1rem}.resources-container{border:1px #808080 solid}.margin-bottom-1{margin-bottom:1rem}";
+
+const SolutionResourceItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this._removedResources = {};
+        this.authentication = undefined;
+        this.itemId = "";
+        this.resourceFilePaths = [];
+        this.resources = [];
+        this._translations = undefined;
+    }
+    itemIdWatchHandler() {
+        const item = state.getItemInfo(this.itemId);
+        this.resourceFilePaths = item.resourceFilePaths;
+        this.resources = item.resources.map(
+        // False linting error
+        // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+        (path) => path.substring(path.lastIndexOf("/") + 1));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     */
+    componentWillLoad() {
+        return this._getTranslations();
+    }
+    /**
+     * Renders the component.
+     */
+    render() {
+        const hasValidResources = this._hasValidResources();
+        return (h(Host, null, h("div", { class: "resource-item" }, h("div", { class: "margin-bottom-1" }, h("calcite-button", { appearance: "solid", class: "resource-button", color: "blue", onClick: () => this._addNewResource() }, this._translations.addResource), h("calcite-button", { appearance: "solid", color: "blue", disabled: !hasValidResources, onClick: () => this._downloadAll() }, this._translations.downloadAll)), h("div", { class: "resources-container", style: { display: hasValidResources ? "inherit" : "none" } }, this._renderResourceList()))));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Events
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods (async)
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Render resources while avoiding thumbnail resoures that are managed by solution-item
+     *
+     */
+    _renderResourceList() {
+        return (h("calcite-value-list", { multiple: true }, this.resourceFilePaths.reduce((prev, cur) => {
+            if (cur.type !== EFileType.Thumbnail) {
+                prev.push(this._renderResource(cur));
+            }
+            return prev;
+        }, [])));
+    }
+    /**
+     * Render the resource and supporting actions for download/update/delete/(reset..if deleted)
+     *
+     * @param resource the filename and url used to interact with the resource
+     */
+    _renderResource(resource) {
+        const resettable = resource.updateType === EUpdateType.Remove;
+        const fullname = resource.folder ? resource.folder + "/" + resource.filename : resource.filename;
+        return (h("calcite-value-list-item", { class: resettable ? "disabled" : "", label: fullname, nonInteractive: true, value: resource.url }, h("calcite-action-group", { "expand-disabled": "true", layout: "horizontal", slot: "actions-end" }, h("calcite-action", { disabled: resettable, icon: "download", label: this._translations.download, onClick: () => this._download(resource.url, resource.filename), scale: "m", text: this._translations.download, title: this._translations.download }), h("calcite-action", { disabled: resettable, icon: "upload-to", label: this._translations.update, onClick: () => this._upload(resource), scale: "m", text: this._translations.update, title: this._translations.update }), h("calcite-action", { disabled: resettable, icon: "trash", label: this._translations.delete, onClick: () => this._delete(resource), scale: "m", text: this._translations.delete, title: this._translations.delete }), resettable ? h("calcite-action", { icon: "reset", label: this._translations.reset, onClick: () => this._reset(resource.filename), scale: "m", text: this._translations.reset, title: this._translations.reset }) : h("div", { class: "display-none" }))));
+    }
+    /**
+     * Adds the name to the deleted array so it will be skipped while rendering
+     *  but still exist if the user chooses to reset
+     *
+     * @param resource the resource to be updated
+     */
+    _delete(resource) {
+        resource.updateType = EUpdateType.Remove;
+        this.resourceFilePaths = [...this.resourceFilePaths]; // to trigger refresh
+        this._updateStore();
+    }
+    /**
+     * Remove the name from the deleted array so it will again be rendered
+     *
+     * @param name the name to be added to the deleted array
+     */
+    _reset(name) {
+        // need to make sure I know if this reset is from the source or a new one
+        // Because the item's `resources` array is not updated until (and if) the solution is saved,
+        // we can use it for the reset info
+        this.resources.some(resourceName => resourceName === name) ?
+            // Undo removing an existing resource
+            this.resourceFilePaths = this.resourceFilePaths.map(p => {
+                if (p.filename === name) {
+                    p.updateType = EUpdateType.None;
+                }
+                return p;
+            }) :
+            // Undo cancelling the adding of a resource
+            this.resourceFilePaths = this.resourceFilePaths.map(p => {
+                if (p.filename === name) {
+                    p.updateType = EUpdateType.Add;
+                }
+                return p;
+            });
+        this._updateStore();
+    }
+    /**
+     * Download all of the templates resources
+     *
+     */
+    _downloadAll() {
+        this.resourceFilePaths.forEach((resource) => {
+            this._download(resource.url, resource.filename);
+        });
+    }
+    /**
+     * Download the current resource
+     *
+     * @param url the resource url
+     * @param name the resource name
+     */
+    _download(url, name) {
+        // files that have been added manually do not need to be requested from the item
+        if (url.startsWith("blob")) {
+            this.downloadFile(url, name);
+        }
+        else {
+            const _url = `${url}?token=${this.authentication.token}`;
+            void this.fetchAndDownload(_url, name);
+        }
+    }
+    /**
+     * Dynamically creates an anchor and downloads the file
+     *
+     * @param url the url of the resource
+     * @param name the name of the resource
+     */
+    downloadFile(url, name) {
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = name;
+        link.target = "_blank";
+        link.click();
+    }
+    /**
+     * Check if the template resources have any non-thumbnail resources
+     *
+     * @returns true if we have data resources and false if only thumbnail
+     */
+    _hasValidResources() {
+        return this.resourceFilePaths.some(r => r.url.indexOf("_info_thumbnail") < 0);
+    }
+    /**
+     * Fetches and downloads the resource from the solution
+     *
+     * @param url the url of the resource
+     * @param name the name of the resource
+     */
+    async fetchAndDownload(url, name) {
+        const image = await fetch(url);
+        const b = await image.blob();
+        const bURL = URL.createObjectURL(b);
+        this.downloadFile(bURL, name);
+    }
+    /**
+     * Create an input element to support the uploading of the resource and upload the resource
+     *
+     * @param resource the resource to be updated
+     */
+    _upload(resource) {
+        const _input = document.createElement("input");
+        _input.classList.add("display-none");
+        _input.onchange = this._updateResource.bind(this, resource);
+        _input.type = "file";
+        _input.click();
+    }
+    /**
+     * Create an input element to support the uploading of a resource and add the new resource
+     *
+     */
+    _addNewResource() {
+        const _input = document.createElement("input");
+        _input.classList.add("display-none");
+        _input.onchange = this._add.bind(this);
+        _input.type = "file";
+        _input.click();
+    }
+    /**
+     * Replace the resource file path when update action is used
+     *
+     * @param resourcePath the resource to be updated
+     * @param event the input event that contains the file
+     */
+    _updateResource(resourcePath, event) {
+        const files = event.target.files;
+        if (files && files[0]) {
+            resourcePath.blob = files[0];
+            resourcePath.updateType = EUpdateType.Update;
+            this._updateStore();
+        }
+    }
+    /**
+     * Add the new resource to the resource file paths
+     *
+     * @param event the inputs event that contains the new file
+     */
+    _add(event) {
+        const files = event.target.files;
+        if (files && files[0]) {
+            const url = URL.createObjectURL(files[0]);
+            const filename = files[0].name;
+            // Add the item if it's not already in the resource file paths list
+            if (!this.resourceFilePaths.some(r => r.filename === filename && r.url === url)) {
+                this.resourceFilePaths = [
+                    ...this.resourceFilePaths,
+                    {
+                        url,
+                        type: EFileType.Data,
+                        folder: undefined,
+                        filename,
+                        blob: files[0],
+                        updateType: EUpdateType.Add
+                    }
+                ];
+                this._updateStore();
+            }
+        }
+    }
+    /**
+     * Add or remove the value from the store
+     */
+    _updateStore() {
+        const item = state.getItemInfo(this.itemId);
+        item.resourceFilePaths = this.resourceFilePaths;
+        state.setItemInfo(item);
+    }
+    /**
+     * Fetches the component's translations
+     *
+     * @protected
+     */
+    async _getTranslations() {
+        const translations = await getLocaleComponentStrings(this.el);
+        this._translations = translations[0];
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "itemId": ["itemIdWatchHandler"]
+    }; }
+};
+SolutionResourceItem.style = solutionResourceItemCss;
+
+export { SolutionResourceItem as solution_resource_item };