@arcgis/common-components 4.29.0-beta.5 → 4.29.0-beta.51

package/dist/cjs/loader.cjs.js

@@ -2,20 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e8c59179.js');
-
-/*
- Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com
- */
-const patchEsm = () => {
-    return index.promiseResolve();
-};
+const index = require('./index-e0422bc8.js');
 
 const defineCustomElements = (win, options) => {
-  if (typeof window === 'undefined') return Promise.resolve();
-  return patchEsm().then(() => {
-  return index.bootstrapLazy([["arcgis-api-key.cjs",[[0,"arcgis-api-key",{"apiKey":[1,"api-key"]}]]],["arcgis-identity.cjs",[[0,"arcgis-identity",{"identity":[1040],"appId":[1,"app-id"],"credential":[1040],"expiration":[1026],"locale":[1],"usePopup":[4,"use-popup"],"popupCallbackUrl":[1,"popup-callback-url"],"portalUrl":[1,"portal-url"],"preserveUrlHash":[4,"preserve-url-hash"],"signIn":[64],"signOut":[64]}]]]], options);
-  });
+  if (typeof window === 'undefined') return undefined;
+  return index.bootstrapLazy([["arcgis-field-info.cjs",[[1,"arcgis-field-info",{"view":[16],"layer":[16],"fieldName":[1,"field-name"],"hideStatistics":[4,"hide-statistics"],"oneFeatureResponse":[32],"oneFeatureResponseStatus":[32],"statistics":[32],"statisticsStatus":[32],"uniqueValues":[32],"uniqueValuesStatus":[32],"_lang":[32],"_t9nLocale":[32],"_t9nStrings":[32]}]]],["arcgis-field-pick-list.cjs",[[1,"arcgis-field-pick-list",{"selectedFields":[1040],"fields":[16],"popoverProps":[16],"layer":[16],"mapView":[16],"showFieldInfo":[4,"show-field-info"],"showFieldName":[4,"show-field-name"],"showDescription":[4,"show-description"],"showSelectionAll":[4,"show-selection-all"],"showCancel":[4,"show-cancel"],"showSort":[4,"show-sort"],"showFilterLength":[2,"show-filter-length"],"multiple":[4],"heading":[1],"okBtnText":[1,"ok-btn-text"],"filterPlaceholderText":[1,"filter-placeholder-text"],"sortBy":[1,"sort-by"],"lastSortyBy":[32],"filterFields":[32],"_lang":[32],"_t9nLocale":[32],"_t9nStrings":[32],"setFocus":[64],"reposition":[64]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/components/{arcgis-api-key.d.ts → arcgis-field-info.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface ArcgisApiKey extends Components.ArcgisApiKey, HTMLElement {}
-export const ArcgisApiKey: {
-  prototype: ArcgisApiKey;
-  new (): ArcgisApiKey;
+interface ArcgisFieldInfo extends Components.ArcgisFieldInfo, HTMLElement {}
+export const ArcgisFieldInfo: {
+    prototype: ArcgisFieldInfo;
+    new (): ArcgisFieldInfo;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/arcgis-field-info.js

@@ -0,0 +1,6 @@
+import { A as ArcgisFieldInfo$1, d as defineCustomElement$1 } from './field-info.js';
+
+const ArcgisFieldInfo = ArcgisFieldInfo$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ArcgisFieldInfo, defineCustomElement };

package/dist/components/{arcgis-identity.d.ts → arcgis-field-pick-list.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface ArcgisIdentity extends Components.ArcgisIdentity, HTMLElement {}
-export const ArcgisIdentity: {
-  prototype: ArcgisIdentity;
-  new (): ArcgisIdentity;
+interface ArcgisFieldPickList extends Components.ArcgisFieldPickList, HTMLElement {}
+export const ArcgisFieldPickList: {
+    prototype: ArcgisFieldPickList;
+    new (): ArcgisFieldPickList;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/arcgis-field-pick-list.js

@@ -0,0 +1,301 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, getAssetPath, Host } from '@stencil/core/internal/client';
+import { F, i as importIntl, U, C, d as defineCustomElement$2 } from './field-info.js';
+import '@esri/calcite-components/dist/components/calcite-pick-list-item.js';
+import '@esri/calcite-components/dist/components/calcite-action.js';
+import '@esri/calcite-components/dist/components/calcite-button.js';
+import '@esri/calcite-components/dist/components/calcite-dropdown.js';
+import '@esri/calcite-components/dist/components/calcite-icon.js';
+import '@esri/calcite-components/dist/components/calcite-dropdown-group.js';
+import '@esri/calcite-components/dist/components/calcite-dropdown-item.js';
+import '@esri/calcite-components/dist/components/calcite-popover.js';
+import '@esri/calcite-components/dist/components/calcite-flow.js';
+import '@esri/calcite-components/dist/components/calcite-flow-item.js';
+import '@esri/calcite-components/dist/components/calcite-pick-list.js';
+
+const fieldPickListScss = ".popover{z-index:100}.panel{min-height:300px}.content{max-height:60vh}.selection-button-div{padding:4px 10px}";
+
+var FieldInfoPrefix;
+(function (FieldInfoPrefix) {
+    FieldInfoPrefix["expression"] = "expression/";
+    FieldInfoPrefix["relationship"] = "relationships/";
+    FieldInfoPrefix["raster"] = "Raster.";
+})(FieldInfoPrefix || (FieldInfoPrefix = {}));
+var LastSortyBy;
+(function (LastSortyBy) {
+    LastSortyBy["default"] = "default";
+    LastSortyBy["display"] = "display";
+    LastSortyBy["type"] = "type";
+    LastSortyBy["field"] = "field";
+})(LastSortyBy || (LastSortyBy = {}));
+const ArcgisFieldPickList$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisFieldPickList extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.arcgisFieldPickListDismissed = createEvent(this, "arcgisFieldPickListDismissed", 7);
+        this.arcgisFieldPickListChange = createEvent(this, "arcgisFieldPickListChange", 7);
+        this.arcgisFieldPickListSortByChange = createEvent(this, "arcgisFieldPickListSortByChange", 7);
+        this.calciteValueList = (field) => (h("calcite-pick-list-item", { key: field.name, label: field.alias || field.name, description: (() => {
+                if (this.showFieldName) {
+                    return `{${field.name}}`;
+                }
+                if (this.showDescription && field.description) {
+                    return field.description;
+                }
+                return null;
+            })(), value: field.name, selected: (!this.multiple && field.name === this.selectedFields[0]) ||
+                (this.multiple && this.selectedFields.indexOf(field.name) > -1), metadata: {
+                label: field.alias,
+                fieldName: field.name
+            } }, this.showFieldInfoCheck(field) && (h("calcite-action", { slot: "actions-end", text: this._t9nStrings.info, title: this._t9nStrings.info, scale: "s", icon: "information", onClick: (event) => {
+                event.stopPropagation();
+                const action = event.target;
+                const fieldInfoFlowItem = document.createElement("calcite-flow-item");
+                fieldInfoFlowItem.heading = field.alias ?? field.name;
+                fieldInfoFlowItem.description = field.name;
+                fieldInfoFlowItem.className = "panel";
+                const fieldInfo = document.createElement("arcgis-field-info");
+                fieldInfo.lang = this._lang;
+                fieldInfo.fieldName = field.name;
+                fieldInfo.layer = this.layer;
+                fieldInfo.view = this.mapView;
+                fieldInfo.classList.add("content");
+                fieldInfoFlowItem.appendChild(fieldInfo);
+                fieldInfoFlowItem.addEventListener("calciteFlowItemBack", () => setTimeout(() => requestAnimationFrame(() => action.setFocus()), 200));
+                this.flowElement.appendChild(fieldInfoFlowItem);
+                setTimeout(() => requestAnimationFrame(() => fieldInfoFlowItem.setFocus()), 200);
+            } }))));
+        this.selectedFields = [];
+        this.fields = undefined;
+        this.popoverProps = undefined;
+        this.layer = undefined;
+        this.mapView = undefined;
+        this.showFieldInfo = false;
+        this.showFieldName = false;
+        this.showDescription = false;
+        this.showSelectionAll = false;
+        this.showCancel = true;
+        this.showSort = true;
+        this.showFilterLength = 10;
+        this.multiple = false;
+        this.heading = undefined;
+        this.okBtnText = undefined;
+        this.filterPlaceholderText = undefined;
+        this.sortBy = undefined;
+        this.lastSortyBy = LastSortyBy.default;
+        this.filterFields = null;
+        this._lang = "";
+        this._t9nLocale = "";
+        this._t9nStrings = undefined;
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    // --------------------------------------------------------------------------
+    async componentWillLoad() {
+        await F(this, getAssetPath("./assets"));
+        // in case more than 1 selected field and multiple is set to false
+        if (!this.multiple && this.selectedFields.length > 1) {
+            this.selectedFields = [this.selectedFields[0]];
+        }
+        this.lastSortyBy = this.sortBy || this.lastSortyBy;
+    }
+    async componentDidLoad() {
+        const intl = await importIntl();
+        intl.setLocale(this._lang);
+        this.setUpObserver();
+        this.popoverNode.open = true;
+        // need timeout because of re-render
+        setTimeout(() => requestAnimationFrame(() => this.panelElement.setFocus()), 200);
+    }
+    disconnectedCallback() {
+        U(this);
+        this.observer?.disconnect();
+    }
+    // --------------------------------------------------------------------------
+    //
+    // Public Methods
+    //
+    // --------------------------------------------------------------------------
+    async setFocus() {
+        setTimeout(() => requestAnimationFrame(() => this.panelElement.setFocus()), 1);
+    }
+    async reposition() {
+        this.popoverNode?.reposition();
+    }
+    // --------------------------------------------------------------------------
+    //
+    // Private Methods
+    //
+    // --------------------------------------------------------------------------
+    getSortedList() {
+        const tempSorted = [...this.fields];
+        if (this.lastSortyBy === LastSortyBy.display) {
+            tempSorted.sort((a, b) => a.alias.localeCompare(b.alias));
+        }
+        else if (this.lastSortyBy === LastSortyBy.field) {
+            tempSorted.sort((a, b) => a.name.localeCompare(b.name));
+        }
+        else if (this.lastSortyBy === LastSortyBy.type) {
+            tempSorted.sort((a, b) => a.type.localeCompare(b.type));
+        }
+        return tempSorted;
+    }
+    showFieldInfoCheck(field) {
+        if (this.showFieldInfo) {
+            // dont want info for arcade and relation fields
+            if (field.name.includes(FieldInfoPrefix.expression) || field.name.includes(FieldInfoPrefix.relationship)) {
+                return false;
+            }
+            else {
+                return true;
+            }
+        }
+        else {
+            return false;
+        }
+    }
+    // return true for deselect all, false for select all
+    selectDeselect() {
+        return this.filterFields?.length ? this.filterContainsAll() : this.selectedFields.length === this.fields.length;
+    }
+    // check if filter has all current field info
+    filterContainsAll() {
+        return !!this.filterFields?.every((filter) => this.selectedFields.some((curr) => curr === filter));
+    }
+    // --------------------------------------------------------------------------
+    //
+    // Rendor  Methods
+    //
+    // --------------------------------------------------------------------------
+    render() {
+        const addBtn = (h("calcite-button", { slot: "footer", appearance: this.showCancel ? "solid" : "outline-fill", width: this.showCancel ? "half" : "full", scale: "m", onClick: () => {
+                this.arcgisFieldPickListDismissed.emit({ selectedFields: this.selectedFields });
+            } }, this.okBtnText || (this.multiple ? this._t9nStrings.done : this._t9nStrings.ok)));
+        const cancelBtn = (h("calcite-button", { slot: "footer", appearance: "outline-fill", width: this.multiple ? "half" : "full", scale: "m", onClick: () => this.arcgisFieldPickListDismissed.emit() }, this._t9nStrings.cancel));
+        const hasType = this.fields.every((field) => !!field.type);
+        const sort = (h("calcite-dropdown", { slot: "menu-actions", placement: "bottom-end", overlayPositioning: "fixed", ref: (node) => (this.dropdownNode = node), onCalciteDropdownOpen: () => {
+                this.observer?.disconnect();
+                this.observer?.observe(this.popoverNode, { attributes: true });
+            }, onCalciteDropdownClose: () => this.observer?.disconnect() }, h("calcite-action", { slot: "trigger", text: this._t9nStrings.sort, title: this._t9nStrings.sort }, h("calcite-icon", { scale: "s", icon: "sortDescending" })), h("calcite-dropdown-group", null, h("calcite-dropdown-item", { selected: this.lastSortyBy === LastSortyBy.default, onClick: () => {
+                this.lastSortyBy = LastSortyBy.default;
+                this.arcgisFieldPickListSortByChange.emit(this.lastSortyBy);
+            } }, this._t9nStrings.default), h("calcite-dropdown-item", { selected: this.lastSortyBy === LastSortyBy.display, onClick: () => {
+                this.lastSortyBy = LastSortyBy.display;
+                this.arcgisFieldPickListSortByChange.emit(this.lastSortyBy);
+            } }, this._t9nStrings.displayName), hasType && (h("calcite-dropdown-item", { selected: this.lastSortyBy === LastSortyBy.type, onClick: () => {
+                this.lastSortyBy = LastSortyBy.type;
+                this.arcgisFieldPickListSortByChange.emit(this.lastSortyBy);
+            } }, this._t9nStrings.type)), h("calcite-dropdown-item", { selected: this.lastSortyBy === LastSortyBy.field, onClick: () => {
+                this.lastSortyBy = LastSortyBy.field;
+                this.arcgisFieldPickListSortByChange.emit(this.lastSortyBy);
+            } }, this._t9nStrings.fieldName))));
+        const selectionBtn = (h("div", { class: "selection-button-div" }, h("calcite-button", { appearance: "transparent", scale: "s", width: "full", onClick: () => {
+                if (this.selectDeselect()) {
+                    //deselect all
+                    this.selectedFields = this.filterFields?.length
+                        ? this.selectedFields.filter((item) => !this.filterFields?.includes(item))
+                        : [];
+                }
+                else {
+                    //select all
+                    this.selectedFields = this.filterFields?.length
+                        ? [...new Set([...this.selectedFields, ...this.filterFields])]
+                        : this.fields.map((field) => field.name);
+                }
+            } }, this.selectDeselect() ? this._t9nStrings.deselectAll : this._t9nStrings.selectAll)));
+        return (h(Host, { class: "js-app-flyout" }, h("calcite-popover", { dir: C(this._hostElement), class: "popover", placement: this.popoverProps.placement || "leading-start", open: false, pointerDisabled: true, referenceElement: this.popoverProps.refElement, offsetDistance: this.popoverProps.offsetDistance || -Math.round(this.popoverProps.refElement.getBoundingClientRect().width), offsetSkidding: this.popoverProps.offsetSkidding || 0, overlayPositioning: this.popoverProps.overlayPositioning, triggerDisabled: this.popoverProps.triggerDisabled, autoClose: this.popoverProps.autoClose, label: this.heading || (this.multiple ? this._t9nStrings.headerSelect : this._t9nStrings.header), onCalcitePopoverClose: () => this.arcgisFieldPickListDismissed.emit(), ref: (node) => (this.popoverNode = node) }, h("calcite-flow", { ref: (node) => {
+                this.flowElement = node;
+            }, style: {
+                width: `${this.popoverProps.popoverWidth || this.popoverProps.refElement.getBoundingClientRect().width}px`
+            } }, h("calcite-flow-item", { ref: (el) => (this.panelElement = el), class: "panel", heading: this.heading || (this.multiple ? this._t9nStrings.headerSelect : this._t9nStrings.header), closable: true, onCalciteFlowItemClose: () => this.arcgisFieldPickListDismissed.emit() }, this.multiple && addBtn, this.showCancel && cancelBtn, h("calcite-pick-list", { multiple: this.multiple, ref: (node) => {
+                this.pickListNode = node;
+            }, class: "content", filterEnabled: this.fields.length >= this.showFilterLength, filterPlaceholder: this.filterPlaceholderText ?? this._t9nStrings.filter, onCalciteListChange: async () => {
+                // keep original order. Add addional values at the end
+                const tempSelectedFields = await this.pickListNode.getSelectedItems();
+                this.selectedFields = [
+                    ...new Set([
+                        ...this.selectedFields.filter((item) => tempSelectedFields.has(item)),
+                        ...tempSelectedFields.keys()
+                    ])
+                ];
+                this.arcgisFieldPickListChange.emit({ selectedFields: this.selectedFields });
+                if (!this.multiple) {
+                    this.arcgisFieldPickListDismissed.emit({ selectedFields: this.selectedFields });
+                }
+            }, onCalciteListFilter: (event) => {
+                event.stopPropagation();
+                const node = event.target;
+                this.filterFields = node.filteredItems?.map((item) => item.value);
+            } }, this.fields.length >= this.showFilterLength && this.showSort && sort, this.multiple && this.showSelectionAll && selectionBtn, [...this.getSortedList()].map((field) => this.calciteValueList(field))))))));
+    }
+    // --------------------------------------------------------------------------
+    //
+    // Private  Methods
+    //
+    // --------------------------------------------------------------------------
+    setUpObserver() {
+        this.observer = new MutationObserver((mutationList /* , observer */) => {
+            for (const mutation of mutationList) {
+                if (mutation.attributeName === "style") {
+                    if (this.popoverNode.style.visibility === "hidden") {
+                        this.dropdownNode.open = false;
+                    }
+                }
+            }
+        });
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get _hostElement() { return this; }
+    static get style() { return fieldPickListScss; }
+}, [1, "arcgis-field-pick-list", {
+        "selectedFields": [1040],
+        "fields": [16],
+        "popoverProps": [16],
+        "layer": [16],
+        "mapView": [16],
+        "showFieldInfo": [4, "show-field-info"],
+        "showFieldName": [4, "show-field-name"],
+        "showDescription": [4, "show-description"],
+        "showSelectionAll": [4, "show-selection-all"],
+        "showCancel": [4, "show-cancel"],
+        "showSort": [4, "show-sort"],
+        "showFilterLength": [2, "show-filter-length"],
+        "multiple": [4],
+        "heading": [1],
+        "okBtnText": [1, "ok-btn-text"],
+        "filterPlaceholderText": [1, "filter-placeholder-text"],
+        "sortBy": [1, "sort-by"],
+        "lastSortyBy": [32],
+        "filterFields": [32],
+        "_lang": [32],
+        "_t9nLocale": [32],
+        "_t9nStrings": [32],
+        "setFocus": [64],
+        "reposition": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["arcgis-field-pick-list", "arcgis-field-info"];
+    components.forEach(tagName => { switch (tagName) {
+        case "arcgis-field-pick-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ArcgisFieldPickList$1);
+            }
+            break;
+        case "arcgis-field-info":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const ArcgisFieldPickList = ArcgisFieldPickList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ArcgisFieldPickList, defineCustomElement };