@arcgis/common-components 4.29.0-beta.42 → 4.29.0-beta.44

package/dist/esm/arcgis-field-pick-list.entry.js

@@ -0,0 +1,254 @@
+import { r as registerInstance, c as createEvent, h, a as getAssetPath, H as Host, g as getElement } from './index-74897166.js';
+import { a as importIntl } from './index-877e3851.js';
+import { F, U, C } from './index-e7244815.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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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) => {
+      return this.selectedFields.some((curr) => {
+        return 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) => {
+              return 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 ? true : false, 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) => {
+              return 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) => {
+          return item.value;
+        });
+      } }, this.fields.length >= this.showFilterLength && this.showSort && sort, this.multiple && this.showSelectionAll && selectionBtn, [...this.getSortedList()].map((field) => {
+      return 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 getElement(this); }
+};
+ArcgisFieldPickList.style = fieldPickListScss;
+
+export { ArcgisFieldPickList as arcgis_field_pick_list };

package/dist/esm/arcgis-identity.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, g as getElement } from './index-00709df9.js';
-import { a as importCoreReactiveUtils, n as newIdentityOAuthInfo, b as importIdentityIdentityManager } from './index-2ba2e62a.js';
+import { r as registerInstance, c as createEvent, g as getElement } from './index-74897166.js';
+import { b as importCoreReactiveUtils, n as newIdentityOAuthInfo, c as importIdentityIdentityManager } from './index-877e3851.js';
 
 const identityCss = ":host{display:none}arcgis-identity{display:none}";