@esri/solutions-components 0.8.3 → 0.8.4

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

@@ -1,316 +0,0 @@
-/*!
- * 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

@@ -1,121 +0,0 @@
-/*!
- * 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

@@ -1,94 +0,0 @@
-/*!
- * 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 };