@esri/solutions-components 0.8.2 → 0.8.3

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

@@ -0,0 +1,402 @@
+/*!
+ * 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 { g as getLocaleComponentStrings } from './locale-d9463a95.js';
+import './loadModules-827c5581.js';
+import './esri-loader-af2bbfd5.js';
+import './_commonjsHelpers-3cd6d4ee.js';
+
+const jsonEditorCss = ":host{display:block}.editor-container{position:relative;height:100%}.editor-controls{height:2.75rem;padding-right:0.5rem;background-color:#F4F4F4}.editor-buttons{float:right}html[dir=rtl] .editor-buttons{float:left}.edit-error-flag{padding-top:0.5rem;color:red;visibility:hidden}.edit-button{padding-inline-start:0.5rem}.editor-text{width:100%;overflow-y:auto;background-color:#FFFFFF}.edit-width{width:100%}.edit-parent{box-sizing:border-box;width:100%;height:calc(100% - 46px)}.json-edit-container{height:100%;width:100%;border:1px #808080 solid}.padding-right{padding-inline-end:0.125rem}.btn{margin-bottom:1rem;display:flex;align-content:center;height:25px;width:120px}.select-ctrl{margin-bottom:1rem}.all-edits{margin-top:4rem}.floating-title{font-size:2rem;z-index:100;position:absolute;left:0.5rem;pointer-events:none}.floating-title-button{pointer-events:auto}.json-editor-position1{position:absolute;left:0px;top:0px;margin:0px;height:100%;width:100%;overflow:hidden;padding:0px;max-height:100% !important}.json-editor-position2a{position:absolute;left:0px;top:0px;margin:0px;height:100%;width:50%;overflow:hidden;padding:0px;max-height:100% !important}.json-editor-position2b{position:absolute;right:0px;top:0px;margin:0px;height:100%;width:50%;overflow:hidden;padding:0px;max-height:100% !important}";
+
+const JsonEditor = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this._loaded = false;
+        this._useDiffEditor = false;
+        this.hasChanges = false;
+        this.hasErrors = false;
+        this.instanceid = "";
+        this.value = "";
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+     */
+    componentDidLoad() {
+        const editorContainer = document.getElementById(`${this.instanceid}-container`);
+        if (editorContainer) {
+            this._editor = monaco.editor.create(editorContainer, {
+                value: this.value,
+                language: "json",
+                theme: "vs",
+                minimap: {
+                    enabled: false
+                },
+                automaticLayout: true,
+                scrollBeyondLastLine: false
+            });
+            this._currentModel = this._editor.getModel();
+            this._contentChanged = this._currentModel.onDidChangeContent(this._onEditorChange.bind(this));
+            // Intercept the monaco function call that shows error markers to see if our content has errors
+            const setModelMarkers = monaco.editor.setModelMarkers;
+            const self = this;
+            monaco.editor.setModelMarkers = function (model, owner, markers) {
+                var _a, _b;
+                // If this call was for our model, it acts like an onEditorChange event
+                // but gives us access to the error state as well
+                if (model.id === self._currentModel.id) {
+                    // Set the error state & dispatch event if state has changed
+                    self._flagEditorHasErrors(markers.length > 0);
+                    // Set the changed state & dispatch event if state has changed, but only if there are no errors
+                    if (!self.hasErrors) {
+                        self._flagEditorHasChanges((_a = self._currentModel) === null || _a === void 0 ? void 0 : _a.canUndo());
+                        if ((_b = self._currentModel) === null || _b === void 0 ? void 0 : _b.canUndo()) {
+                            self._flagEditorContentChanged();
+                        }
+                    }
+                    // Show the error flag if there are errors
+                    const errorFlag = document.getElementById(`${self.instanceid}-errorFlag`);
+                    errorFlag.style.visibility = self.hasErrors ? "visible" : "hidden";
+                }
+                // Pass on the call to the next editor in a chain of intercepts or, finally, to monaco
+                setModelMarkers.call(monaco.editor, model, owner, markers);
+            };
+            this._diffEditor = monaco.editor.createDiffEditor(document.getElementById(`${this.instanceid}-diff-container`), {
+                automaticLayout: true
+            });
+            this._setDiffModel();
+            this._loaded = true;
+            this._toggleUndoRedo();
+        }
+    }
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     *
+     * @returns Promise when complete
+     */
+    async componentWillLoad() {
+        this._initValueObserver();
+        await this._getTranslations();
+        return;
+    }
+    /**
+     * Renders the component.
+     */
+    render() {
+        return (h(Host, null, h("div", { id: `${this.instanceid}-editor-container`, class: "editor-container padding-right" }, h("div", { class: "editor-controls" }, h("div", { class: "editor-buttons" }, h("calcite-icon", { id: `${this.instanceid}-errorFlag`, icon: "exclamation-mark-triangle", title: this._translations.errorFlag, scale: "s", class: "edit-error-flag" }), h("calcite-button", { id: `${this.instanceid}-undo`, color: "blue", appearance: "solid", title: this._translations.undo, onClick: () => this._undo(), scale: "s", class: "edit-button" }, h("calcite-icon", { icon: "undo", scale: "s" })), h("calcite-button", { id: `${this.instanceid}-redo`, color: "blue", appearance: "solid", title: this._translations.redo, onClick: () => this._redo(), scale: "s", class: "edit-button" }, h("calcite-icon", { icon: "redo", scale: "s" })), h("calcite-button", { id: `${this.instanceid}-diff`, color: "blue", appearance: "solid", title: this._translations.diff, onClick: () => this._toggleEditor(), scale: "s", class: "edit-button" }, h("calcite-icon", { icon: "compare", scale: "s" })), h("calcite-button", { id: `${this.instanceid}-search`, appearance: "outline", color: "blue", title: this._translations.search, onClick: () => this._search(), scale: "s", class: "edit-button" }, h("calcite-icon", { icon: "search", scale: "s" })), h("calcite-button", { id: `${this.instanceid}-reset`, color: "blue", appearance: "solid", disabled: true, title: this._translations.cancelEdits, onClick: () => this._reset(), scale: "s", class: "edit-button" }, h("calcite-icon", { icon: "reset", scale: "s" })))), h("div", { class: "edit-parent" }, h("div", { id: `${this.instanceid}-container`, class: "json-edit-container" }), h("div", { id: `${this.instanceid}-diff-container`, class: "json-edit-container display-none" })))));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Events
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods (async)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Gets the contents of the editor.
+     *
+     * @returns Promise resolving with the current contents of the editor
+     */
+    async getEditorContents() {
+        return new Promise((resolve, reject) => {
+            try {
+                const currentValue = this._currentModel.getValue();
+                resolve(currentValue);
+            }
+            catch (e) {
+                reject(e);
+            }
+        });
+    }
+    /**
+     * Frees the editor events and memory; to be called when the web component is no longer needed.
+     *
+     * Because the component lifecycle doesn't include an "onDestroy" event
+     * (@see https://stenciljs.com/docs/component-lifecycle#disconnectedcallback)
+     * and TypeScript/JavaScript does automatic garbage collection without a callback
+     * hook until ES2021
+     * (@see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry),
+     * this cleanup call needs to be called manually.
+     */
+    async prepareForDeletion() {
+        var _a, _b, _c, _d, _e;
+        (_a = this._searchBtnHandler) === null || _a === void 0 ? void 0 : _a.removeEventListener("click", this._search);
+        (_b = this._cancelEditsBtnHandler) === null || _b === void 0 ? void 0 : _b.removeEventListener("click", this._reset);
+        (_c = this._valueObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
+        (_d = this._contentChanged) === null || _d === void 0 ? void 0 : _d.dispose();
+        (_e = this._editor) === null || _e === void 0 ? void 0 : _e.dispose();
+    }
+    /**
+     * Replaces the current selection with the supplied text, inserting if nothing is selected.
+     *
+     * @param replacement Text to use for replacement or insertion
+     * @returns Promise resolving when function is done
+     */
+    async replaceCurrentSelection(replacement) {
+        const currentSelection = this._editor.getSelection();
+        this._editor.executeEdits("", [
+            { range: currentSelection, text: replacement }
+        ]);
+    }
+    /**
+     * Resets the contents of the editor with the current `value`.
+     *
+     * @returns Promise resolving when function is done
+     */
+    async reset() {
+        return new Promise((resolve, reject) => {
+            try {
+                this._reset();
+                resolve({ success: true });
+            }
+            catch (e) {
+                reject(e);
+            }
+        });
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Disables a button.
+     *
+     * @param buttonId Id of button to disable
+     *
+      * @protected
+     */
+    _disableButton(buttonId) {
+        var _a;
+        (_a = document.getElementById(buttonId)) === null || _a === void 0 ? void 0 : _a.setAttribute("disabled", "");
+    }
+    /**
+     * Enables a button.
+     *
+     * @param buttonId Id of button to enable
+     *
+     * @protected
+     */
+    _enableButton(buttonId) {
+        var _a;
+        (_a = document.getElementById(buttonId)) === null || _a === void 0 ? void 0 : _a.removeAttribute("disabled");
+    }
+    /**
+     * Dispatches an event that the editor's content has changed.
+     *
+     * @protected
+     */
+    _flagEditorContentChanged() {
+        // Event for notifying that the editor contents have changed
+        window.dispatchEvent(new CustomEvent("solutionEditorContentChanged", {
+            detail: {
+                id: this.instanceid,
+                contents: this._currentModel.getValue()
+            },
+            bubbles: true,
+            cancelable: false,
+            composed: true
+        }));
+    }
+    /**
+     * Sets the editor's flag indicating if it has changes and dispatches an event when
+     * the flag value changes.
+     *
+     * @param flagHasChanges Current state of change in the editor; if it doesn't match the value saved in this
+     * object, an event is dispatched with the new value and the saved value is updated
+     *
+     * @protected
+     */
+    _flagEditorHasChanges(flagHasChanges) {
+        // Event for notifying if the editor has updated the value of its hasChanges property
+        if (this.hasChanges !== flagHasChanges) {
+            window.dispatchEvent(new CustomEvent("solutionEditorHasChanges", {
+                detail: flagHasChanges,
+                bubbles: true,
+                cancelable: false,
+                composed: true
+            }));
+            this.hasChanges = flagHasChanges;
+        }
+    }
+    /**
+     * Sets the editor's flag indicating if it has errors and dispatches an event when
+     * the flag value changes.
+     *
+     * @param flagHasErrors Current state of errors in the editor; if it doesn't match the value saved in this
+     * object, an event is dispatched with the new value and the saved value is updated
+     *
+     * @protected
+     */
+    _flagEditorHasErrors(flagHasErrors) {
+        // Event for notifying if the editor has updated the value of its hasErrors property
+        if (this.hasErrors !== flagHasErrors) {
+            window.dispatchEvent(new CustomEvent("solutionEditorHasErrors", {
+                detail: flagHasErrors,
+                bubbles: true,
+                cancelable: false,
+                composed: true
+            }));
+            this.hasErrors = flagHasErrors;
+        }
+    }
+    /**
+     * Fetches the component's translations
+     *
+     * @protected
+     */
+    async _getTranslations() {
+        const translations = await getLocaleComponentStrings(this.el);
+        this._translations = translations[0];
+    }
+    /**
+     * Initializes the observer that will monitor and respond to changes of the value.
+     *
+     * @protected
+     */
+    _initValueObserver() {
+        this._valueObserver = new MutationObserver(ml => {
+            ml.forEach(mutation => {
+                if (mutation.type === 'attributes' && mutation.attributeName === "value") {
+                    const newValue = mutation.target[mutation.attributeName];
+                    if ((newValue !== mutation.oldValue && this._loaded)) {
+                        this._currentModel.setValue(this.value);
+                    }
+                }
+            });
+        });
+        this._valueObserver.observe(this.el, { attributes: true, attributeOldValue: true });
+    }
+    /**
+     * Handles activites appropriate to changes in the editor.
+     *
+     * @protected
+     */
+    _onEditorChange() {
+        // Note: we're not flagging that the editor has changes here because this event
+        // arrives before the model markers event, which indicates errors. We don't want
+        // to notify about changes if there are errors.
+        this._toggleUndoRedo();
+    }
+    /**
+     * Redoes the previous edit operation.
+     *
+     * @protected
+     */
+    _redo() {
+        var _a;
+        if ((_a = this._currentModel) === null || _a === void 0 ? void 0 : _a.canRedo()) {
+            this._currentModel.redo();
+            this._toggleUndoRedo();
+        }
+    }
+    /**
+     * Resets the stored model to the original value.
+     *
+     * @protected
+     */
+    _reset() {
+        // Restore the original value
+        this._currentModel.setValue(this.value);
+        // update the ui
+        this._toggleUndoRedo();
+    }
+    /**
+     * Handles click on "Search" button.
+     *
+     * @protected
+     */
+    _search() {
+        this._editor.trigger('toggleFind', 'actions.find');
+    }
+    /**
+     * Sets the models for the diff editor.
+     *
+     * @protected
+     */
+    _setDiffModel() {
+        if (this._diffEditor) {
+            this._diffEditor.setModel({
+                original: monaco.editor.createModel(this.value, "json"),
+                modified: this._editor.getModel()
+            });
+        }
+    }
+    /**
+     * Shows/Hides the appropriate editor: regular or diff.
+     *
+     * @protected
+     */
+    _toggleEditor() {
+        this._useDiffEditor = !this._useDiffEditor;
+        let diffContainer = document.getElementById(`${this.instanceid}-diff-container`);
+        let container = document.getElementById(`${this.instanceid}-container`);
+        if (this._useDiffEditor) {
+            this._setDiffModel();
+            diffContainer.classList.remove("display-none");
+            container.classList.add("display-none");
+        }
+        else {
+            diffContainer.classList.add("display-none");
+            container.classList.remove("display-none");
+        }
+    }
+    /**
+     * Toggles the undo and redo buttons.
+     *
+     * @protected
+     */
+    _toggleUndoRedo() {
+        var _a, _b, _c, _d;
+        if ((_a = this._currentModel) === null || _a === void 0 ? void 0 : _a.canUndo()) {
+            this._enableButton(`${this.instanceid}-undo`);
+        }
+        else {
+            this._disableButton(`${this.instanceid}-undo`);
+        }
+        if ((_b = this._currentModel) === null || _b === void 0 ? void 0 : _b.canRedo()) {
+            this._enableButton(`${this.instanceid}-redo`);
+        }
+        else {
+            this._disableButton(`${this.instanceid}-redo`);
+        }
+        if (((_c = this._currentModel) === null || _c === void 0 ? void 0 : _c.canUndo()) || ((_d = this._currentModel) === null || _d === void 0 ? void 0 : _d.canRedo())) {
+            this._enableButton(`${this.instanceid}-reset`);
+        }
+        else {
+            this._disableButton(`${this.instanceid}-reset`);
+        }
+    }
+    /**
+     * Undoes the current edit operation.
+     *
+     * @protected
+     */
+    _undo() {
+        var _a;
+        if ((_a = this._currentModel) === null || _a === void 0 ? void 0 : _a.canUndo()) {
+            this._currentModel.undo();
+            this._toggleUndoRedo();
+        }
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return getElement(this); }
+};
+JsonEditor.style = jsonEditorCss;
+
+export { JsonEditor as json_editor };

package/dist/esm/key-9a10d862.js

@@ -0,0 +1,44 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0
+ */
+function isActivationKey(key) {
+    return key === "Enter" || key === " ";
+}
+const numberKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+const letterKeys = [
+    "a",
+    "b",
+    "c",
+    "d",
+    "e",
+    "f",
+    "g",
+    "h",
+    "i",
+    "j",
+    "k",
+    "l",
+    "m",
+    "n",
+    "o",
+    "p",
+    "q",
+    "r",
+    "s",
+    "t",
+    "u",
+    "v",
+    "w",
+    "x",
+    "y",
+    "z",
+];
+
+export { isActivationKey as i, numberKeys as n };

package/dist/esm/ko-d61df01d.js

@@ -0,0 +1,71 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { d as dayjs } from './calcite-input-time-picker-e5cd4d26.js';
+import './index-bdfaac50.js';
+import './form-f2181470.js';
+import './dom-b91aa537.js';
+import './guid-b75a5f7b.js';
+import './resources-0f8db821.js';
+import './interactive-71585ecc.js';
+import './browser-b8d08bed.js';
+import './key-9a10d862.js';
+import './label-16184ce7.js';
+import './component-edd2c3cd.js';
+import './loadable-aea90723.js';
+import './locale-857f39cf.js';
+import './observers-5ba39eee.js';
+import './focusTrapComponent-2fe6623b.js';
+import './time-4a90614b.js';
+import './math-efada7a9.js';
+import './t9n-b39c5433.js';
+import './openCloseComponent-b4b3788b.js';
+import './Validation-59a77488.js';
+
+// Korean [ko]
+var locale = {
+  name: 'ko',
+  weekdays: '일요일_월요일_화요일_수요일_목요일_금요일_토요일'.split('_'),
+  weekdaysShort: '일_월_화_수_목_금_토'.split('_'),
+  weekdaysMin: '일_월_화_수_목_금_토'.split('_'),
+  months: '1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월'.split('_'),
+  monthsShort: '1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월'.split('_'),
+  ordinal: function ordinal(n) {
+    return n + "\uC77C";
+  },
+  formats: {
+    LT: 'A h:mm',
+    LTS: 'A h:mm:ss',
+    L: 'YYYY.MM.DD.',
+    LL: 'YYYY년 MMMM D일',
+    LLL: 'YYYY년 MMMM D일 A h:mm',
+    LLLL: 'YYYY년 MMMM D일 dddd A h:mm',
+    l: 'YYYY.MM.DD.',
+    ll: 'YYYY년 MMMM D일',
+    lll: 'YYYY년 MMMM D일 A h:mm',
+    llll: 'YYYY년 MMMM D일 dddd A h:mm'
+  },
+  meridiem: function meridiem(hour) {
+    return hour < 12 ? '오전' : '오후';
+  },
+  relativeTime: {
+    future: '%s 후',
+    past: '%s 전',
+    s: '몇 초',
+    m: '1분',
+    mm: '%d분',
+    h: '한 시간',
+    hh: '%d시간',
+    d: '하루',
+    dd: '%d일',
+    M: '한 달',
+    MM: '%d달',
+    y: '일 년',
+    yy: '%d년'
+  }
+};
+dayjs.locale(locale, null, true);
+
+export default locale;