@esri/solutions-components 0.6.32 → 0.6.34

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.js

@@ -48,6 +48,7 @@ export class LayerTable {
     this.enableAutoRefresh = undefined;
     this.enableCSV = undefined;
     this.enableInlineEdit = undefined;
+    this.enableZoom = undefined;
     this.mapInfo = undefined;
     this.mapView = undefined;
     this.onlyShowUpdatableLayers = undefined;
@@ -294,13 +295,15 @@ export class LayerTable {
   _initToolInfos() {
     var _a;
     const featuresSelected = this._selectedIndexes.length > 0;
-    this._toolInfos = [{
+    const featuresEmpty = this._allIds.length === 0;
+    this._toolInfos = [this.enableZoom ? {
         icon: "zoom-to-object",
         label: this._translations.zoom,
         func: () => this._zoom(),
         disabled: !featuresSelected,
         isOverflow: false
-      }, ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? {
+      } : undefined,
+      ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? {
         icon: "filter",
         label: this._translations.filters,
         func: () => this._filter(),
@@ -330,27 +333,27 @@ export class LayerTable {
         icon: "list-check-all",
         func: () => this._selectAll(),
         label: this._translations.selectAll,
-        disabled: false,
-        isOverflow: true
+        disabled: featuresEmpty,
+        isOverflow: false
       }, {
         icon: "compare",
         func: () => this._switchSelected(),
         label: this._translations.switchSelected,
-        disabled: false,
-        isOverflow: true
+        disabled: featuresEmpty,
+        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
+        disabled: featuresEmpty,
+        isOverflow: false
       } : undefined];
     this._defaultVisibleToolSizeInfos = undefined;
   }
@@ -394,14 +397,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 +489,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
@@ -945,6 +954,23 @@ export class LayerTable {
         "attribute": "enable-inline-edit",
         "reflect": false
       },
+      "enableZoom": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the zoom button will be enabled"
+        },
+        "attribute": "enable-zoom",
+        "reflect": false
+      },
       "mapInfo": {
         "type": "unknown",
         "mutable": 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

@@ -32,12 +32,14 @@ export class MapCard {
      * string: the id of map currently displayed
      */
     this._loadedId = "";
+    this.enableHome = undefined;
     this.enableLegend = undefined;
     this.enableFloorFilter = undefined;
     this.enableFullscreen = undefined;
     this.enableSearch = undefined;
     this.enableBasemap = undefined;
     this.basemapConfig = undefined;
+    this.hidden = undefined;
     this.mapInfos = [];
     this.mapView = undefined;
     this._searchConfiguration = undefined;
@@ -64,7 +66,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 })));
   }
   //--------------------------------------------------------------------------
   //
@@ -116,10 +119,12 @@ export class MapCard {
       this._searchConfiguration = this._webMapInfo.searchConfiguration;
       this.beforeMapChanged.emit();
       await this.mapView.when(() => {
-        const home = new this.Home({
-          view: this.mapView
-        });
-        this.mapView.ui.add(home, { position: "top-left", index: 3 });
+        if (this.enableHome) {
+          const home = new this.Home({
+            view: this.mapView
+          });
+          this.mapView.ui.add(home, { position: "top-left", index: 3 });
+        }
         this.mapView.ui.add(this._mapTools, { position: "top-right", index: 0 });
         this.mapChanged.emit({
           id: id,
@@ -141,6 +146,23 @@ export class MapCard {
   }
   static get properties() {
     return {
+      "enableHome": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the home widget will be available"
+        },
+        "attribute": "enable-home",
+        "reflect": false
+      },
       "enableLegend": {
         "type": "boolean",
         "mutable": false,
@@ -247,6 +269,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/demos/crowdsource-manager.html

@@ -28,10 +28,9 @@
       }
     </style>
 
-    <link
-      rel="stylesheet"
-      href="https://jsdev.arcgis.com/4.28/esri/themes/light/main.css"
-    />
+    <link rel="stylesheet" href="https://jsdev.arcgis.com/4.28/esri/themes/light/main.css" />
+    <!-- <link rel="stylesheet" href="https://jsdev.arcgis.com/4.28/esri/themes/dark/main.css" /> -->
+
     <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../solutions-components.css" type="text/css">
 
@@ -132,7 +131,9 @@
     </script>
   </head>
 
+  <!-- <body class="calcite-mode-dark" onload="addValues()"> -->
   <body onload="addValues()">
     <crowdsource-manager id="demo" class="crowdsource"/>
+    <!-- <crowdsource-manager id="demo" class="crowdsource" theme="dark"/> -->
   </body>
 </html>

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', () => {