@esri/solutions-components 0.8.2 → 0.8.3

package/dist/solutions-components/index.esm.js

@@ -3,3 +3,18 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
+/** @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.
+ */

package/dist/solutions-components/info-card.entry.js

@@ -0,0 +1,316 @@
+/*!
+ * 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 { l as loadModules } from './loadModules-827c5581.js';
+import { P as PopupUtils } from './popupUtils-b61d7ffd.js';
+import './esri-loader-af2bbfd5.js';
+import './_commonjsHelpers-3cd6d4ee.js';
+
+const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}.padding-1-2{padding:0.5rem}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.esri-features__footer{display:none !important}.button-container{justify-content:space-between;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.min-width-100{min-width:100px}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-color-foreground-1) !important;height:100% !important}.overflow-hidden{overflow:hidden}.height-40{height:40px}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:bold}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}";
+
+const InfoCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.popupClosed = createEvent(this, "popupClosed", 7);
+        this.selectionChanged = createEvent(this, "selectionChanged", 7);
+        this.graphics = undefined;
+        this.isLoading = false;
+        this.isMobile = undefined;
+        this.mapView = undefined;
+        this.zoomAndScrollToSelected = undefined;
+        this.allowEditing = true;
+        this.highlightEnabled = true;
+        this._alertOpen = false;
+        this._count = "";
+        this._editRecordOpen = false;
+        this._mobileTitle = "";
+        this._showListView = false;
+        this._translations = undefined;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Watch for changes to the graphic and update the feature widget
+     */
+    async graphicsWatchHandler() {
+        await this.setGraphics();
+    }
+    /**
+     * Watch for changes to the isMobile prop then init the Features widget
+     * We need to know if the title should be displayed by the widget (non mobile)
+     * or by us (mobile)
+     */
+    async isMobileWatchHandler() {
+        await this._initFeaturesWidget();
+    }
+    /**
+     * Watch for changes to the mapView and re-init the Feature widget
+     */
+    async mapViewWatchHandler() {
+        return await this._initFeaturesWidget();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Methods (public)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Get the current selected feature from the Features widget
+     *
+     * @returns Promise resolving with the current feature
+     */
+    async getSelectedFeature() {
+        return this._features.selectedFeature;
+    }
+    /**
+     * Respond to and close the edit record display
+     *
+     * @returns a promise when the operation has completed
+     */
+    async closeEdit() {
+        this._editRecordOpen = false;
+    }
+    /**
+     * Reset key properties when the layer selection changes
+     */
+    async layerSelectionChange() {
+        var _a;
+        this._showListView = false;
+        if ((_a = this._features) === null || _a === void 0 ? void 0 : _a.viewModel) {
+            this._features.viewModel.featureMenuOpen = false;
+            this._features.close();
+        }
+    }
+    /**
+     * Refresh the info-card graphics
+     */
+    async refreshGraphics(evt) {
+        this.graphics = [...evt.detail];
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (lifecycle)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     *
+     * @returns Promise when complete
+     */
+    async componentWillLoad() {
+        await this._initModules();
+        await this._getTranslations();
+        this._popupUtils = new PopupUtils();
+    }
+    /**
+     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+     * @returns Promise when complete
+     */
+    async componentDidLoad() {
+        var _a;
+        if (((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            await this.setGraphics();
+        }
+    }
+    /**
+     * Renders the component.
+     */
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const loadingClass = this.isLoading ? "" : "display-none";
+        const featureNodeClass = this.isLoading || this._editRecordOpen ? "visibility-hidden" : "position-absolute";
+        const editClass = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none";
+        const editButtonClass = (!this.isLoading && this._editRecordOpen) || this._showListView ? "display-none" : "";
+        const nextBackDisabled = ((_b = (_a = this._features) === null || _a === void 0 ? void 0 : _a.features) === null || _b === void 0 ? void 0 : _b.length) < 2;
+        const nextBackClass = this.isMobile ? "display-none" : "";
+        const id = (_d = (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeature) === null || _d === void 0 ? void 0 : _d.getObjectId();
+        const ids = parseInt(id === null || id === void 0 ? void 0 : id.toString(), 10) > -1 ? [id] : [];
+        const deleteEnabled = ((_e = this._layer) === null || _e === void 0 ? void 0 : _e.editingEnabled) && ((_h = (_g = (_f = this._layer) === null || _f === void 0 ? void 0 : _f.capabilities) === null || _g === void 0 ? void 0 : _g.operations) === null || _h === void 0 ? void 0 : _h.supportsDelete);
+        return (h(Host, null, h("calcite-shell", null, this._getHeader(), h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), !nextBackDisabled && h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, h("calcite-action", { icon: "list", onClick: () => this._toggleListView(), scale: "s", text: this._count, textEnabled: true })), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Load esri javascript api modules
+     *
+     * @returns Promise resolving when function is done
+     *
+     * @protected
+     */
+    async _initModules() {
+        const [Features, reactiveUtils] = await loadModules([
+            "esri/widgets/Features",
+            "esri/core/reactiveUtils"
+        ]);
+        this.Features = Features;
+        this.reactiveUtils = reactiveUtils;
+    }
+    /**
+     * Initializes the features widget if not created and updates the feature widget and other required states
+     *
+     * @protected
+     */
+    async setGraphics() {
+        var _a;
+        if (!this._features) {
+            await this._initFeaturesWidget();
+        }
+        if (this.graphics.length > 0) {
+            this._layer = (_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer;
+            this._editEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsUpdate;
+            this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0], this.mapView.map);
+            this._features.open({
+                features: this.graphics
+            });
+        }
+        else {
+            this._features.clear();
+            this._features.close();
+        }
+        this._count = this._getCount();
+    }
+    /**
+     * Init the Feature widget so we can display the popup content
+     *
+     * @returns a promise when the operation has completed
+     *
+     * @protected
+     */
+    async _initFeaturesWidget() {
+        var _a;
+        return this.isMobile !== undefined ? await ((_a = this.mapView) === null || _a === void 0 ? void 0 : _a.when(() => {
+            if (!this._features) {
+                this._features = new this.Features({
+                    view: this.mapView,
+                    container: "features-node",
+                    visibleElements: {
+                        actionBar: false,
+                        closeButton: false,
+                        heading: !this.isMobile
+                    }
+                });
+                this._features.viewModel.highlightEnabled = this.highlightEnabled;
+                this.reactiveUtils.watch(() => this._features.viewModel.featureMenuOpen, (isOpen) => {
+                    if (!isOpen) {
+                        this._showListView = isOpen;
+                    }
+                });
+                if (this.zoomAndScrollToSelected) {
+                    this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
+                        if (i > -1) {
+                            this.selectionChanged.emit([this._features.selectedFeature]);
+                        }
+                    });
+                }
+            }
+            else {
+                this._features.view = this.mapView;
+                this._features.visibleElements.actionBar = false;
+                this._features.visibleElements.closeButton = false;
+                this._features.visibleElements.heading = !this.isMobile;
+            }
+        })) : Promise.resolve();
+    }
+    /**
+     * Get the mobile header
+     *
+     * @returns the header node to display when in mobile mode
+     *
+     * @protected
+     */
+    _getHeader() {
+        return this.isMobile && !this._editRecordOpen ? (h("calcite-panel", { class: "border-width-0", slot: "header" }, h("calcite-action", { class: "end-border", icon: "chevron-left", iconFlipRtl: true, onClick: () => this._closePopup(), scale: "s", slot: "header-actions-start", text: "" }), h("span", { class: "font-bold", slot: "header-content" }, this._mobileTitle))) : undefined;
+    }
+    /**
+     * Close the popup and emit the selected features
+     */
+    _closePopup() {
+        this.popupClosed.emit();
+    }
+    /**
+     * Set the alertOpen member to false when the alert is closed
+     */
+    _alertClosed() {
+        this._alertOpen = false;
+    }
+    /**
+     * Open the edit record
+     */
+    _openEditRecord() {
+        if (this._editEnabled) {
+            this._editRecordOpen = true;
+        }
+        else {
+            this._alertOpen = true;
+        }
+    }
+    /**
+     * Go to the previous feature in the features widget
+     */
+    _back() {
+        this._features.previous();
+        this._count = this._getCount();
+    }
+    /**
+     * Go to the next feature in the features widget
+     */
+    _next() {
+        this._features.next();
+        this._count = this._getCount();
+    }
+    /**
+     * Get the current index of total string
+     *
+     * @returns the index of total string
+     */
+    _getCount() {
+        var _a, _b, _c;
+        const index = (((_a = this._features) === null || _a === void 0 ? void 0 : _a.viewModel.selectedFeatureIndex) + 1).toString();
+        const total = (_c = (_b = this._features) === null || _b === void 0 ? void 0 : _b.features) === null || _c === void 0 ? void 0 : _c.length.toString();
+        return this._translations.indexOfTotal
+            .replace("{{index}}", index)
+            .replace("{{total}}", total);
+    }
+    /**
+     * Toggle the visibility of the features list view
+     */
+    _toggleListView() {
+        this._showListView = !this._showListView;
+        const i = this._features.selectedFeatureIndex;
+        this._features.open({
+            features: this.graphics,
+            featureMenuOpen: this._showListView
+        });
+        this._features.selectedFeatureIndex = i;
+    }
+    /**
+     * Fetches the component's translations
+     *
+     * @returns Promise when complete
+     * @protected
+     */
+    async _getTranslations() {
+        const messages = await getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "graphics": ["graphicsWatchHandler"],
+        "isMobile": ["isMobileWatchHandler"],
+        "mapView": ["mapViewWatchHandler"]
+    }; }
+};
+InfoCard.style = infoCardCss;
+
+export { InfoCard as info_card };

package/dist/solutions-components/instant-apps-ckeditor-wrapper.entry.js

@@ -0,0 +1,121 @@
+/*!
+ * 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';
+
+const styles = `
+  .ck.ck-reset.ck-editor.ck-rounded-corners {
+    margin-top: 10px !important;
+    margin-left: 55px !important;
+  }
+  .ck-editor__editable {
+    height: 70px !important;
+    font-size: 0.875rem !important;
+    line-height: 	1.375 !important;
+    color: var(--calcite-color-text-1) !important;
+  }
+
+  .ck.ck-editor__editable_inline>:first-child,
+  .ck.ck-editor__editable_inline>:last-child {
+    --ck-spacing-large: 0.5rem !important;
+  }
+
+  .ck.ck-balloon-panel.ck-powered-by-balloon {
+    --ck-z-modal: 700;
+    z-index: 700;
+  }
+
+  .calcite-mode-dark .ck-editor__editable {
+    color: var(--calcite-color-text-inverse) !important;
+  }
+`;
+
+const instantAppsCkeditorWrapperCss = ":host{display:block}";
+
+const CKEDITOR_STYLES_ID = 'instant-apps-components__ckeditor-wrapper';
+const InstantAppsCkeditorWrapper = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isFocused = createEvent(this, "isFocused", 7);
+        this.dataChanged = createEvent(this, "dataChanged", 7);
+        this.value = undefined;
+        this.editorInstance = undefined;
+        this.config = undefined;
+    }
+    updateValue() {
+        if (this.value)
+            this.editorInstance.setData(this.value);
+    }
+    async componentDidLoad() {
+        this.init();
+    }
+    componentDidUpdate() {
+        this.editorInstance.setData(this.value);
+    }
+    render() {
+        return (h(Host, null, h("div", null)));
+    }
+    init() {
+        this.applyStyles();
+        this.initEditor();
+    }
+    applyStyles() {
+        const exists = !!document.getElementById(CKEDITOR_STYLES_ID);
+        if (exists)
+            return;
+        const style = document.createElement('style');
+        style.id = CKEDITOR_STYLES_ID;
+        style.innerHTML = styles;
+        document.head.prepend(style);
+    }
+    async initEditor() {
+        const editor = await this.createEditor();
+        if (editor) {
+            this.editorInstance = editor;
+            if (this.value || this.value === '') {
+                editor.setData(this.value);
+            }
+            editor.editing.view.document.on('change:isFocused', this.getEditorFocusedCallback(editor));
+        }
+    }
+    async createEditor() {
+        try {
+            let editor;
+            if (this.config) {
+                editor = await ClassicEditor.create(this.el, this.config);
+            }
+            else {
+                editor = await ClassicEditor.create(this.el);
+            }
+            this.editorInstance = editor;
+            return Promise.resolve(editor);
+        }
+        catch (err) {
+            console.error(err);
+            return Promise.reject(null);
+        }
+    }
+    getEditorFocusedCallback(editor) {
+        return (_event, _name, _isFocused) => {
+            if (!_isFocused) {
+                const editorData = editor.getData();
+                if (this.value !== editorData) {
+                    this.value = editorData;
+                    this.dataChanged.emit(editorData);
+                }
+            }
+            else {
+                this.isFocused.emit();
+            }
+        };
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["updateValue"]
+    }; }
+};
+InstantAppsCkeditorWrapper.style = instantAppsCkeditorWrapperCss;
+
+export { InstantAppsCkeditorWrapper as instant_apps_ckeditor_wrapper };

package/dist/solutions-components/instant-apps-control-panel.entry.js

@@ -0,0 +1,94 @@
+/*!
+ * 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 { l as loadModules } from './loadModules-acccbc1c.js';
+import './esri-loader-af2bbfd5.js';
+import './_commonjsHelpers-3cd6d4ee.js';
+
+const instantAppsControlPanelCss = ":host{display:block}";
+
+const MODE = 'floating';
+const GROUP = 'instant-apps-control-panel';
+const BORDER = 'border-bottom: 1px solid var(--calcite-color-border-3)';
+const SLOT_NAME = 'components';
+const SLOT_SELECTOR = `[slot="${SLOT_NAME}"]`;
+const InstantAppsControlPanel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.components = [];
+        this.view = undefined;
+    }
+    async componentWillLoad() {
+        const [Expand] = await loadModules(['esri/widgets/Expand']);
+        this.Expand = Expand;
+        this._handleComponents();
+    }
+    componentWillUpdate() {
+        this._handleComponents();
+    }
+    render() {
+        return (h(Host, null, h("slot", { name: SLOT_NAME })));
+    }
+    _handleComponents() {
+        const componentsNode = this._getComponentsNode();
+        if (componentsNode) {
+            this._resetUI(componentsNode);
+            this._attachComponents(componentsNode);
+        }
+    }
+    _attachComponents(componentsNode) {
+        this.components.forEach(this._attachmentComponent(componentsNode));
+    }
+    _attachmentComponent(componentsNode) {
+        return (component, index) => {
+            let content = component.content;
+            // Check if component isExpand widget, if so, create expande widget
+            if (component.isExpand) {
+                content = this._getExpand(component);
+                if (component.expandIconClass)
+                    content.expandIconClass = component.expandIconClass;
+                if (component.expandIcon)
+                    content.expandIcon = component.expandIcon;
+                if (component.collapseTooltip)
+                    content.collapseTooltip = component.collapseTooltip;
+                if (component.expandTooltip)
+                    content.expandTooltip = component.expandTooltip;
+            }
+            // Check if dom node exists, if not create dom node
+            if (!content.container)
+                content.container = document.createElement('div');
+            // Append dom node to slot element
+            componentsNode === null || componentsNode === void 0 ? void 0 : componentsNode.appendChild(content.container);
+            // Create border for all components but last
+            const isNotLast = index !== this.components.length - 1;
+            if (isNotLast)
+                content.container.style = BORDER;
+        };
+    }
+    _getExpand(component) {
+        const { view } = this;
+        const { content } = component;
+        const expanded = false;
+        return new this.Expand({ content, view, expanded, mode: MODE, group: GROUP });
+    }
+    _getComponentsNode() {
+        const selector = SLOT_SELECTOR;
+        return this.el.querySelector(selector);
+    }
+    _resetUI(componentsNode) {
+        const hasChildren = componentsNode.children.length > 0;
+        if (hasChildren) {
+            const { firstChild } = componentsNode;
+            while (firstChild) {
+                componentsNode.removeChild(firstChild);
+            }
+        }
+    }
+    get el() { return getElement(this); }
+};
+InstantAppsControlPanel.style = instantAppsControlPanelCss;
+
+export { InstantAppsControlPanel as instant_apps_control_panel };