@esri/solutions-components 0.6.31 → 0.6.33

package/dist/collection/components/edit-card/edit-card.js

@@ -44,7 +44,7 @@ export class EditCard {
    */
   async graphicsWatchHandler() {
     if (this.graphics.length === 0) {
-      this._closeEdit();
+      await this._closeEdit();
     }
   }
   async openWatchHandler(v) {
@@ -58,9 +58,12 @@ export class EditCard {
       this._editorLoading = false;
     }
     if (!v) {
-      this._closeEdit();
+      await this._closeEdit();
     }
   }
+  async featureSelectionChange() {
+    await this._closeEdit();
+  }
   //--------------------------------------------------------------------------
   //
   //  Functions (lifecycle)
@@ -90,7 +93,7 @@ export class EditCard {
       }
       this._layerEditHandle = this._layer.on("edits", () => {
         this.editsComplete.emit();
-        this._closeEdit();
+        void this._closeEdit();
       });
     }
   }
@@ -161,7 +164,7 @@ export class EditCard {
       });
       this._editHandle = this.reactiveUtils.when(() => this._editor.viewModel.state === "ready", () => {
         if (this._shouldClose) {
-          this._closeEdit();
+          void this._closeEdit();
         }
         else if (this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose) {
           void this._startUpdate();
@@ -181,7 +184,13 @@ export class EditCard {
    *
    * @returns void
    */
-  _closeEdit() {
+  async _closeEdit() {
+    var _a, _b, _c;
+    this._shouldClose = true;
+    if ((_a = this._editor) === null || _a === void 0 ? void 0 : _a.activeWorkflow) {
+      await ((_b = this._editor) === null || _b === void 0 ? void 0 : _b.cancelWorkflow());
+    }
+    (_c = this._editor) === null || _c === void 0 ? void 0 : _c.destroy();
     this._shouldClose = false;
     this.closeEdit.emit();
   }
@@ -343,4 +352,13 @@ export class EditCard {
         "methodName": "openWatchHandler"
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "featureSelectionChange",
+        "method": "featureSelectionChange",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/floor-filter/floor-filter.js

@@ -86,7 +86,8 @@ export class FloorFilter {
    * @protected
    */
   _initFloorFilter(view) {
-    if (view && this.enabled && this.FloorFilter) {
+    var _a;
+    if (view && this.enabled && this.FloorFilter && ((_a = view === null || view === void 0 ? void 0 : view.map) === null || _a === void 0 ? void 0 : _a.floorInfo)) {
       if (!this.floorFilterWidget) {
         this.floorFilterWidget = new this.FloorFilter({
           container: this._floorFilterElement,

package/dist/collection/components/layer-table/layer-table.css

@@ -60,14 +60,16 @@
 
 .bottom-left {
   position: absolute;
-  left: 5;
+  left: 0;
   bottom: 0;
+  padding-left: 5px;
 }
 
 html[dir="rtl"] .bottom-left {
   position: absolute;
-  right: 5;
+  right: 0;
   bottom: 0;
+  padding-right: 5px;
 }
 
 .height-19 {

package/dist/collection/components/layer-table/layer-table.js

@@ -331,26 +331,26 @@ export class LayerTable {
         func: () => this._selectAll(),
         label: this._translations.selectAll,
         disabled: false,
-        isOverflow: true
+        isOverflow: false
       }, {
         icon: "compare",
         func: () => this._switchSelected(),
         label: this._translations.switchSelected,
         disabled: false,
-        isOverflow: true
+        isOverflow: false
       }, {
         icon: "refresh",
         func: () => this._refresh(),
         label: this._translations.refresh,
         disabled: false,
-        isOverflow: true
+        isOverflow: false
       },
       this.enableCSV ? {
         icon: "export",
         func: () => void this._exportToCSV(),
         label: this._translations.exportCSV,
         disabled: false,
-        isOverflow: true
+        isOverflow: false
       } : undefined];
     this._defaultVisibleToolSizeInfos = undefined;
   }
@@ -394,14 +394,20 @@ export class LayerTable {
             prev.push(cur.id);
             return prev;
           }, []);
+          let forceFinish = false;
           const controlsThatFit = [...this._defaultVisibleToolSizeInfos].reduce((prev, cur) => {
-            if (skipControls.indexOf(cur.id) < 0 &&
+            if (!forceFinish && skipControls.indexOf(cur.id) < 0 &&
               (currentTools.indexOf(cur.id) > -1 || (controlsWidth + cur.width) <= toolbarWidth)) {
               if (currentTools.indexOf(cur.id) < 0) {
                 controlsWidth += cur.width;
               }
               prev.push(cur);
             }
+            else if (skipControls.indexOf(cur.id) < 0 && (controlsWidth + cur.width) > toolbarWidth) {
+              // exit the first time we evalute this as true...otherwise it will add the next control that will fit
+              // and not preserve the overall order of controls
+              forceFinish = true;
+            }
             return prev;
           }, []);
           this._setControlsThatFit(controlsThatFit, skipControls);
@@ -480,9 +486,9 @@ export class LayerTable {
    */
   _getDropdown(id) {
     const dropdownItems = this._getDropdownItems();
-    return (h("calcite-dropdown", { disabled: this._layer === undefined, id: "solutions-more" }, h("calcite-action", { appearance: "solid", id: id, label: "", slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, dropdownItems.map(item => {
+    return dropdownItems.length > 0 ? (h("calcite-dropdown", { disabled: this._layer === undefined, id: "solutions-more" }, h("calcite-action", { appearance: "solid", id: id, label: "", slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, dropdownItems.map(item => {
       return (h("calcite-dropdown-item", { iconStart: item.icon, onClick: item.func }, item.label));
-    }))));
+    })))) : undefined;
   }
   /**
    * Get a list of toolInfos that should display in the dropdown
@@ -599,33 +605,30 @@ export class LayerTable {
    * @returns void
    */
   async _resetTable() {
-    if (this._table) {
-      this._clearSelection();
-      this._allIds = [];
-      this.featureSelectionChange.emit(this._selectedIndexes);
-      if (this._layer) {
-        await this._layer.when(() => {
-          var _a, _b;
-          const columnTemplates = this._getColumnTemplates(this._layer.id, (_b = (_a = this._layer) === null || _a === void 0 ? void 0 : _a.popupTemplate) === null || _b === void 0 ? void 0 : _b.fieldInfos);
-          this._table.layer = this._layer;
-          this._table.tableTemplate.columnTemplates = columnTemplates;
-          this._table.view = this.mapView;
-          this._checkEditEnabled();
-          this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
-          this._initToolInfos();
-        });
-        await this._table.when(() => {
-          this._table.clearSelectionFilter();
-        });
-        this._showOnlySelected = false;
-        this._sortActive = false;
-        await this._sortTable();
-      }
-      else {
-        this._table.view = this.mapView;
-        this._table.layer = this._layer;
-      }
+    var _a, _b;
+    this._clearSelection();
+    this._allIds = [];
+    this.featureSelectionChange.emit(this._selectedIndexes);
+    const columnTemplates = this._getColumnTemplates(this._layer.id, (_b = (_a = this._layer) === null || _a === void 0 ? void 0 : _a.popupTemplate) === null || _b === void 0 ? void 0 : _b.fieldInfos);
+    this._allIds = await queryAllIds(this._layer);
+    if (!this._table) {
+      await this._getTable(this._tableNode, columnTemplates);
+    }
+    else if (columnTemplates) {
+      this._table.tableTemplate.columnTemplates = columnTemplates;
     }
+    this._table.layer = this._layer;
+    this._table.view = this.mapView;
+    this._checkEditEnabled();
+    this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
+    this._initToolInfos();
+    await this._table.when(() => {
+      this._table.highlightIds.removeAll();
+      this._table.clearSelectionFilter();
+    });
+    this._showOnlySelected = false;
+    this._sortActive = false;
+    await this._sortTable();
   }
   /**
    * Verify edit capabilities of the layer
@@ -827,28 +830,15 @@ export class LayerTable {
    * @returns a promise that will resolve when the operation is complete
    */
   async _layerSelectionChanged(evt) {
-    var _a, _b, _c;
+    var _a;
     const id = evt.detail[0];
     if (id !== ((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id) || this._allIds.length === 0) {
       this._fetchingData = true;
-      this._layer = await getLayerOrTable(this.mapView, id);
-      const columnTemplates = this._getColumnTemplates(id, (_c = (_b = this._layer) === null || _b === void 0 ? void 0 : _b.popupTemplate) === null || _c === void 0 ? void 0 : _c.fieldInfos);
-      this._allIds = await queryAllIds(this._layer);
-      if (!this._table) {
-        await this._getTable(this._tableNode, columnTemplates);
-      }
-      else if (columnTemplates) {
-        this._table.tableTemplate.columnTemplates = columnTemplates;
-      }
-      await this._table.when(() => {
-        this._table.highlightIds.removeAll();
+      const layer = await getLayerOrTable(this.mapView, id);
+      await layer.when(() => {
+        this._layer = layer;
       });
-      this._selectedIndexes = [];
-      this._table.layer = this._layer;
-      this._table.render();
     }
-    this._sortActive = false;
-    await this._sortTable();
     this._fetchingData = false;
   }
   /**

package/dist/collection/components/map-card/map-card.css

@@ -21,9 +21,13 @@
 }
 
 .map-height {
-  height: calc(100% - 58px);
+  height: calc(100% - 51px);
 }
 
 .box-shadow {
   box-shadow: none !important;
 }
+
+.visibility-hidden {
+  visibility: hidden;
+}

package/dist/collection/components/map-card/map-card.js

@@ -38,6 +38,7 @@ export class MapCard {
     this.enableSearch = undefined;
     this.enableBasemap = undefined;
     this.basemapConfig = undefined;
+    this.hidden = undefined;
     this.mapInfos = [];
     this.mapView = undefined;
     this._searchConfiguration = undefined;
@@ -64,7 +65,8 @@ export class MapCard {
    * Renders the component.
    */
   render() {
-    return (h(Host, null, h("map-picker", { mapInfos: this.mapInfos }), h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), h("map-tools", { basemapConfig: this.basemapConfig, class: "box-shadow", enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableSearch: this.enableSearch, mapView: this.mapView, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration })));
+    const mapClass = this.hidden ? "visibility-hidden" : "";
+    return (h(Host, null, h("map-picker", { mapInfos: this.mapInfos }), h("div", { class: `map-height ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { basemapConfig: this.basemapConfig, class: "box-shadow", enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableSearch: this.enableSearch, mapView: this.mapView, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration })));
   }
   //--------------------------------------------------------------------------
   //
@@ -247,6 +249,23 @@ export class MapCard {
           "text": "IBasemapConfig: List of any basemaps to filter out from the basemap widget"
         }
       },
+      "hidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: When true the map display will be hidden"
+        },
+        "attribute": "hidden",
+        "reflect": false
+      },
       "mapInfos": {
         "type": "unknown",
         "mutable": false,

package/dist/collection/components/map-tools/map-tools.js

@@ -31,6 +31,7 @@ export class MapTools {
     this.layout = "vertical";
     this.mapView = undefined;
     this.searchConfiguration = undefined;
+    this._hasFloorInfo = false;
     this._translations = undefined;
     this._showTools = true;
     this._showBasemapWidget = false;
@@ -44,6 +45,15 @@ export class MapTools {
   //  Watch handlers
   //
   //--------------------------------------------------------------------------
+  /**
+   * When the mapView loads check if it supports floor awareness
+   */
+  async mapViewWatchHandler() {
+    await this.mapView.when(() => {
+      var _a, _b;
+      this._hasFloorInfo = (_b = (_a = this.mapView) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.floorInfo;
+    });
+  }
   /**
    * When the _showBasemapWidget property is true display the basemap gallery
    */
@@ -157,7 +167,7 @@ export class MapTools {
       this._getActionGroup(fullscreenIcon, false, fullscreenTip, () => this._expand()) :
       undefined, this.enableBasemap ?
       this._getActionGroup("basemap", false, this._translations.basemap, () => this._toggleBasemapPicker()) :
-      undefined, this.enableFloorFilter ?
+      undefined, this.enableFloorFilter && this._hasFloorInfo ?
       this._getActionGroup("urban-model", false, this._translations.floorFilter, () => this._toggleFloorFilter()) :
       undefined)), h("basemap-gallery", { basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, resultGraphicEnabled: true, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, ref: (el) => { this._fullscreenElement = el; } }), h("floor-filter", { class: floorFilterClass, enabled: this.enableFloorFilter, mapView: this.mapView, ref: (el) => { this._floorFilterElement = el; } })));
   }
@@ -432,6 +442,7 @@ export class MapTools {
   }
   static get states() {
     return {
+      "_hasFloorInfo": {},
       "_translations": {},
       "_showTools": {},
       "_showBasemapWidget": {},
@@ -444,6 +455,9 @@ export class MapTools {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
+        "propName": "mapView",
+        "methodName": "mapViewWatchHandler"
+      }, {
         "propName": "_showBasemapWidget",
         "methodName": "_showBasemapWidgetWatchHandler"
       }, {

package/dist/collection/utils/downloadUtils.js

@@ -514,6 +514,26 @@ export function _prepareAttributeValue(attributeValue, attributeType, attributeD
         // e.g., "12/31/1969, 4:00 PM"
         value = value.replace(/\xe2\x80\xaf/g, "");
         break;
+      case "date-only":
+        // Value is a string, e.g., "2020-12-08"
+        if (attributeFormat === null || attributeFormat === void 0 ? void 0 : attributeFormat.dateFormat) {
+          const dateFormatIntlOptions = intl.convertDateFormatToIntlOptions(attributeFormat.dateFormat);
+          value = intl.formatDateOnly(value, dateFormatIntlOptions);
+        }
+        else {
+          value = intl.formatDateOnly(value);
+        }
+        break;
+      case "time-only":
+        // Value is a string, e.g., "14:51:44.2533333"
+        if (attributeFormat === null || attributeFormat === void 0 ? void 0 : attributeFormat.dateFormat) {
+          const dateFormatIntlOptions = intl.convertDateFormatToIntlOptions(attributeFormat.dateFormat);
+          value = intl.formatTimeOnly(value, dateFormatIntlOptions);
+        }
+        else {
+          value = intl.formatTimeOnly(value);
+        }
+        break;
       case "double":
       case "integer":
       case "long":

package/dist/collection/utils/downloadUtils.ts

@@ -688,6 +688,26 @@ export function _prepareAttributeValue(
         value = value.replace(/\xe2\x80\xaf/g, "");
         break;
 
+      case "date-only":
+        // Value is a string, e.g., "2020-12-08"
+        if (attributeFormat?.dateFormat) {
+          const dateFormatIntlOptions = intl.convertDateFormatToIntlOptions(attributeFormat.dateFormat as any);
+          value = intl.formatDateOnly(value, dateFormatIntlOptions);
+        } else {
+          value = intl.formatDateOnly(value);
+        }
+        break;
+
+      case "time-only":
+        // Value is a string, e.g., "14:51:44.2533333"
+        if (attributeFormat?.dateFormat) {
+          const dateFormatIntlOptions = intl.convertDateFormatToIntlOptions(attributeFormat.dateFormat as any);
+          value = intl.formatTimeOnly(value, dateFormatIntlOptions);
+        } else {
+          value = intl.formatTimeOnly(value);
+        }
+        break;
+
       case "double":
       case "integer":
       case "long":

package/dist/collection/utils/queryUtils.js

@@ -49,7 +49,7 @@ export async function queryAllFeatures(start, layer, graphics) {
  */
 export async function queryAllIds(layer) {
   const query = layer.createQuery();
-  query.where = "1=1";
+  query.where = layer.definitionExpression || "1=1";
   return await layer.queryObjectIds(query);
 }
 /**

package/dist/collection/utils/queryUtils.ts

@@ -59,7 +59,7 @@ export async function queryAllIds(
   layer: __esri.FeatureLayer
 ): Promise<number[]> {
   const query = layer.createQuery();
-  query.where = "1=1";
+  query.where = layer.definitionExpression || "1=1";
   return await layer.queryObjectIds(query);
 }
 

package/dist/collection/utils/test/downloadUtils.spec.js

@@ -803,21 +803,95 @@ describe("downloadUtils", () => {
     });
   });
   describe('_prepareAttributeValue', () => {
+    it('should format date attributes', () => {
+      const attributeValue = new Date('2022-02-01T00:00:00.000Z');
+      const attributeType = 'date';
+      const attributeDomain = null;
+      const attributeFormat = null;
+      const intl = {
+        formatDate: jest.fn().mockReturnValue('02/01/2022'),
+        convertDateFormatToIntlOptions: jest.fn().mockReturnValue({})
+      };
+      const result = downloadUtils._prepareAttributeValue(attributeValue, attributeType, attributeDomain, attributeFormat, intl);
+      expect(result).toEqual('02/01/2022');
+      expect(intl.formatDate).toHaveBeenCalledWith(attributeValue);
+      expect(intl.convertDateFormatToIntlOptions).not.toHaveBeenCalled();
+    });
+    it('should format date-only attributes', () => {
+      const attributeValue = '2020-02-01';
+      const attributeType = 'date-only';
+      const attributeDomain = null;
+      const attributeFormat = null;
+      const intl = {
+        formatDateOnly: jest.fn().mockReturnValue('02/01/2022'),
+        convertDateFormatToIntlOptions: jest.fn().mockReturnValue({})
+      };
+      const result = downloadUtils._prepareAttributeValue(attributeValue, attributeType, attributeDomain, attributeFormat, intl);
+      expect(result).toEqual('02/01/2022');
+      expect(intl.formatDateOnly).toHaveBeenCalledWith(attributeValue);
+      expect(intl.convertDateFormatToIntlOptions).not.toHaveBeenCalled();
+    });
+    it('should format time-only attributes', () => {
+      const attributeValue = '14:51:44.2533333';
+      const attributeType = 'time-only';
+      const attributeDomain = null;
+      const attributeFormat = null;
+      const intl = {
+        formatTimeOnly: jest.fn().mockReturnValue('14:41'),
+        convertDateFormatToIntlOptions: jest.fn().mockReturnValue({})
+      };
+      const result = downloadUtils._prepareAttributeValue(attributeValue, attributeType, attributeDomain, attributeFormat, intl);
+      expect(result).toEqual('14:41');
+      expect(intl.formatTimeOnly).toHaveBeenCalledWith(attributeValue);
+      expect(intl.convertDateFormatToIntlOptions).not.toHaveBeenCalled();
+    });
     it('should format date attributes using the specified date format', () => {
-      const attributeValue = new Date('2022-01-01T00:00:00.000Z');
+      const attributeValue = new Date('2022-02-01T00:00:00.000Z');
       const attributeType = 'date';
       const attributeDomain = null;
       const attributeFormat = {
-        dateFormat: 'short-date'
+        dateFormat: 'shortdate'
       };
       const intl = {
-        formatDate: jest.fn().mockReturnValue('01/01/2022'),
+        formatDate: jest.fn().mockReturnValue('02/01/2022'),
         convertDateFormatToIntlOptions: jest.fn().mockReturnValue({})
       };
       const result = downloadUtils._prepareAttributeValue(attributeValue, attributeType, attributeDomain, attributeFormat, intl);
-      expect(result).toEqual('01/01/2022');
+      expect(result).toEqual('02/01/2022');
       expect(intl.formatDate).toHaveBeenCalledWith(attributeValue, {});
-      expect(intl.convertDateFormatToIntlOptions).toHaveBeenCalledWith('short-date');
+      expect(intl.convertDateFormatToIntlOptions).toHaveBeenCalledWith('shortdate');
+    });
+    it('should format date-only attributes using the specified date format', () => {
+      const attributeValue = '2020-02-01';
+      const attributeType = 'date-only';
+      const attributeDomain = null;
+      const attributeFormat = {
+        dateFormat: 'shortdate'
+      };
+      const intl = {
+        formatDateOnly: jest.fn().mockReturnValue('02/01/2022'),
+        convertDateFormatToIntlOptions: jest.fn().mockReturnValue({})
+      };
+      const result = downloadUtils._prepareAttributeValue(attributeValue, attributeType, attributeDomain, attributeFormat, intl);
+      expect(result).toEqual('02/01/2022');
+      expect(intl.formatDateOnly).toHaveBeenCalledWith(attributeValue, {});
+      expect(intl.convertDateFormatToIntlOptions).toHaveBeenCalledWith('shortdate');
+    });
+    it('should format time-only attributes using the specified date format', () => {
+      const attributeValue = '14:51:44.2533333';
+      const attributeType = 'time-only';
+      const attributeDomain = null;
+      const attributeFormat = {
+        dateFormat: 'shortdate'
+      };
+      const intl = {
+        formatTimeOnly: jest.fn().mockReturnValue('14:41'),
+        convertDateFormatToIntlOptions: jest.fn().mockReturnValue({})
+      };
+      const result = downloadUtils._prepareAttributeValue(attributeValue, attributeType, attributeDomain, attributeFormat, intl);
+      expect(result).toEqual('14:41');
+      expect(intl.formatTimeOnly).toHaveBeenCalledWith(attributeValue, {});
+      expect(intl.convertDateFormatToIntlOptions).toHaveBeenCalledWith('shortdate');
     });
     it('should format number attributes using the specified number format', () => {
       const attributeValue = 1234.5678;

package/dist/collection/utils/test/downloadUtils.spec.tsx

@@ -924,21 +924,100 @@ describe("downloadUtils", () => {
 
   describe('_prepareAttributeValue', () => {
 
+    it('should format date attributes', () => {
+      const attributeValue = new Date('2022-02-01T00:00:00.000Z');
+      const attributeType = 'date';
+      const attributeDomain = null;
+      const attributeFormat = null;
+      const intl = {
+        formatDate: jest.fn().mockReturnValue('02/01/2022'),
+        convertDateFormatToIntlOptions: jest.fn().mockReturnValue({})
+      };
+      const result = downloadUtils._prepareAttributeValue(attributeValue, attributeType, attributeDomain, attributeFormat as any, intl);
+      expect(result).toEqual('02/01/2022');
+      expect(intl.formatDate).toHaveBeenCalledWith(attributeValue);
+      expect(intl.convertDateFormatToIntlOptions).not.toHaveBeenCalled();
+    });
+
+    it('should format date-only attributes', () => {
+      const attributeValue = '2020-02-01';
+      const attributeType = 'date-only';
+      const attributeDomain = null;
+      const attributeFormat = null;
+      const intl = {
+        formatDateOnly: jest.fn().mockReturnValue('02/01/2022'),
+        convertDateFormatToIntlOptions: jest.fn().mockReturnValue({})
+      };
+      const result = downloadUtils._prepareAttributeValue(attributeValue, attributeType, attributeDomain, attributeFormat as any, intl);
+      expect(result).toEqual('02/01/2022');
+      expect(intl.formatDateOnly).toHaveBeenCalledWith(attributeValue);
+      expect(intl.convertDateFormatToIntlOptions).not.toHaveBeenCalled();
+    });
+
+    it('should format time-only attributes', () => {
+      const attributeValue = '14:51:44.2533333';
+      const attributeType = 'time-only';
+      const attributeDomain = null;
+      const attributeFormat = null;
+      const intl = {
+        formatTimeOnly: jest.fn().mockReturnValue('14:41'),
+        convertDateFormatToIntlOptions: jest.fn().mockReturnValue({})
+      };
+      const result = downloadUtils._prepareAttributeValue(attributeValue, attributeType, attributeDomain, attributeFormat as any, intl);
+      expect(result).toEqual('14:41');
+      expect(intl.formatTimeOnly).toHaveBeenCalledWith(attributeValue);
+      expect(intl.convertDateFormatToIntlOptions).not.toHaveBeenCalled();
+    });
+
     it('should format date attributes using the specified date format', () => {
-      const attributeValue = new Date('2022-01-01T00:00:00.000Z');
+      const attributeValue = new Date('2022-02-01T00:00:00.000Z');
       const attributeType = 'date';
       const attributeDomain = null;
       const attributeFormat = {
-        dateFormat: 'short-date'
+        dateFormat: 'shortdate'
       };
       const intl = {
-        formatDate: jest.fn().mockReturnValue('01/01/2022'),
+        formatDate: jest.fn().mockReturnValue('02/01/2022'),
         convertDateFormatToIntlOptions: jest.fn().mockReturnValue({})
       };
       const result = downloadUtils._prepareAttributeValue(attributeValue, attributeType, attributeDomain, attributeFormat as any, intl);
-      expect(result).toEqual('01/01/2022');
+      expect(result).toEqual('02/01/2022');
       expect(intl.formatDate).toHaveBeenCalledWith(attributeValue, {});
-      expect(intl.convertDateFormatToIntlOptions).toHaveBeenCalledWith('short-date');
+      expect(intl.convertDateFormatToIntlOptions).toHaveBeenCalledWith('shortdate');
+    });
+
+    it('should format date-only attributes using the specified date format', () => {
+      const attributeValue = '2020-02-01';
+      const attributeType = 'date-only';
+      const attributeDomain = null;
+      const attributeFormat = {
+        dateFormat: 'shortdate'
+      };
+      const intl = {
+        formatDateOnly: jest.fn().mockReturnValue('02/01/2022'),
+        convertDateFormatToIntlOptions: jest.fn().mockReturnValue({})
+      };
+      const result = downloadUtils._prepareAttributeValue(attributeValue, attributeType, attributeDomain, attributeFormat as any, intl);
+      expect(result).toEqual('02/01/2022');
+      expect(intl.formatDateOnly).toHaveBeenCalledWith(attributeValue, {});
+      expect(intl.convertDateFormatToIntlOptions).toHaveBeenCalledWith('shortdate');
+    });
+
+    it('should format time-only attributes using the specified date format', () => {
+      const attributeValue = '14:51:44.2533333';
+      const attributeType = 'time-only';
+      const attributeDomain = null;
+      const attributeFormat = {
+        dateFormat: 'shortdate'
+      };
+      const intl = {
+        formatTimeOnly: jest.fn().mockReturnValue('14:41'),
+        convertDateFormatToIntlOptions: jest.fn().mockReturnValue({})
+      };
+      const result = downloadUtils._prepareAttributeValue(attributeValue, attributeType, attributeDomain, attributeFormat as any, intl);
+      expect(result).toEqual('14:41');
+      expect(intl.formatTimeOnly).toHaveBeenCalledWith(attributeValue, {});
+      expect(intl.convertDateFormatToIntlOptions).toHaveBeenCalledWith('shortdate');
     });
 
     it('should format number attributes using the specified number format', () => {