@zohodesk/library-platform 1.2.2 → 1.2.3

package/es/cc/action-status/Constants.js

@@ -0,0 +1,5 @@
+class Constants {
+  static ACTION_STATUS_ACTION_CLICKED = "ACTION_STATUS#ACTION_CLICKED";
+}
+
+export default Constants;

package/es/cc/action-status/Events.js

@@ -0,0 +1,6 @@
+import Constants from "./Constants";
+let Events = [{
+  type: Constants.ACTION_STATUS_ACTION_CLICKED,
+  payload: {}
+}];
+export default Events;

package/es/cc/action-status/Properties.js

@@ -0,0 +1,29 @@
+export default {
+  label: {
+    defaultValue: '',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  actionLabel: {
+    defaultValue: 'Undo',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  hasAction: {
+    defaultValue: false,
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'boolean'
+      }
+    }
+  }
+};

package/es/cc/action-status/index.js

@@ -0,0 +1,3 @@
+export { default as ActionStatusProperties } from "./Properties";
+export { default as ActionStatusEvents } from "./Events";
+export { default as ActionStatusConstants } from "./Constants";

package/es/cc/button/Properties.js

@@ -73,5 +73,33 @@ export default {
         type: 'string'
       }
     }
+  },
+  iconName: {
+    defaultValue: '',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  iconSize: {
+    defaultValue: '14',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  iconPosition: {
+    defaultValue: 'right',
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string',
+        enum: ['left', 'right']
+      }
+    }
   }
 };

package/es/cc/fields/field/Events.js

@@ -29,6 +29,14 @@ const Events = [{
           type: 'any'
         }
       }
+    },
+    previousValue: {
+      name: 'previousValue',
+      typeMetadata: {
+        schema: {
+          type: 'any'
+        }
+      }
     }
   }
 }];

package/es/cc/highlighted-value/Properties.js

@@ -52,5 +52,33 @@ export default {
         enum: ["default", "pointer"]
       }
     }
+  },
+  iconName: {
+    required: false,
+    defaultValue: '',
+    typeMetadata: {
+      schema: {
+        type: "string"
+      }
+    }
+  },
+  iconSize: {
+    required: false,
+    defaultValue: '14',
+    typeMetadata: {
+      schema: {
+        type: "string"
+      }
+    }
+  },
+  iconPosition: {
+    required: false,
+    defaultValue: 'right',
+    typeMetadata: {
+      schema: {
+        type: "string",
+        enum: ['left', 'right']
+      }
+    }
   }
 };

package/es/cc/index.js

@@ -10,6 +10,7 @@ export * from "./table-list";
 export * from "./tags";
 export * from "./text";
 export * from "./action-icon";
+export * from "./action-status";
 export * from "./empty-state";
 export * from "./textbox";
 export * from "./textarea";

package/es/cc/radio-dropdown/Events.js

@@ -25,6 +25,22 @@ export default [{
           type: 'string'
         }
       }
+    },
+    previousId: {
+      name: 'previousId',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    },
+    previousValue: {
+      name: 'previousValue',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
     }
   }
 }, {

package/es/cc/table-column-filter/Properties.js

@@ -97,6 +97,15 @@ export default {
       }
     }
   },
+  emptyStateMessage: {
+    defaultValue: "No results found",
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: "string"
+      }
+    }
+  },
   clearFilterLabel: {
     defaultValue: "Clear Filter",
     required: false,

package/es/cc/table-list/Events.js

@@ -63,6 +63,14 @@ const Events = [{
           type: 'date'
         }
       }
+    },
+    previousValue: {
+      name: 'previousValue',
+      typeMetadata: {
+        schema: {
+          type: 'any'
+        }
+      }
     }
   }
 }, {

package/es/library/custom-component/frameworks/ui/DependencyFactory.js

@@ -2,7 +2,7 @@ import Presenter from "../../adapters/presenters/Presenter";
 import Service from "../../adapters/gateways/service/Service";
 import Controller from "../../adapters/controllers/Controller";
 import Repository from "../../adapters/gateways/repository/Repository";
-import Validator from "../json-schema-validator/Validator";
+import { Validator } from "../../../json-schema-validator";
 import EventManager from "../../adapters/gateways/event-manager/EventManager";
 
 class DependencyFactory {

package/es/library/dot/components/action-location/frameworks/ui/ActionComponentMapping.js

@@ -14,6 +14,7 @@ import ListItem from "../../../../legacy-to-new-arch/list-item/frameworks/ui/Lis
 import Ribbon from "../../../../legacy-to-new-arch/ribbon/frameworks/ui/Ribbon";
 import Search from "../../../../legacy-to-new-arch/action-band-components/search/frameworks/ui/Search";
 import SortDropdown from "../../../../legacy-to-new-arch/sort-dropdown/frameworks/ui/SortDropdown";
+import ActionStatus from "../../../action-status/frameworks/ui/ActionStatus";
 const ActionComponentMapping = {
   ['ActionIcon']: ActionIcon,
   ['Button']: Button,
@@ -29,6 +30,7 @@ const ActionComponentMapping = {
   ['HighlightedValue']: HighlightedValue,
   ['Ribbon']: Ribbon,
   ['Search']: Search,
-  ['SortDropdown']: SortDropdown
+  ['SortDropdown']: SortDropdown,
+  ['ActionStatus']: ActionStatus
 };
 export default ActionComponentMapping;

package/es/library/dot/components/action-status/frameworks/ui/ActionStatus.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import ActionStatusProperties from "../../../../../../cc/action-status/Properties";
+import ActionStatusEvents from "../../../../../../cc/action-status/Events";
+import ActionStatusView from "./ActionStatusView";
+let ActionStatus = createCustomComponent({
+  name: "ActionStatus",
+  View: ActionStatusView,
+  properties: ActionStatusProperties,
+  events: ActionStatusEvents,
+  eventHandlers: {}
+});
+export default ActionStatus;

package/es/library/dot/components/action-status/frameworks/ui/ActionStatusView.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import ColoredTypography from '@zohodesk-private/desk-components/es/ColoredTypography/ColoredTypography';
+import Button from '@zohodesk-private/dot-registry/es/Button/Button';
+import { ActionStatusConstants } from "../../../../../../cc"; // @ts-ignore
+
+import styles from "./css/ActionStatus.module.css";
+
+function ActionStatusView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  let {
+    dispatch
+  } = helpers;
+  let {
+    label,
+    actionLabel,
+    hasAction
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Flex, {
+    ref: ref,
+    $ui_displayMode: "inline",
+    $ui_alignItems: "center",
+    $ui_direction: "row",
+    $ui_className: styles.container,
+    $a11yAttributes_container: {
+      'role': 'status',
+      'aria-live': 'polite',
+      'aria-busy': true
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.spinner,
+    "aria-hidden": "true"
+  }), label && /*#__PURE__*/React.createElement(ColoredTypography, {
+    $ui_size: "15",
+    $ui_weight: "regular",
+    $ui_color: "grey",
+    $flag_dotted: true,
+    $ui_className: styles.label
+  }, label), hasAction && /*#__PURE__*/React.createElement(Button, {
+    palette: "plainPrimary",
+    needAppearance: true,
+    text: actionLabel,
+    onClick: () => {
+      dispatch({
+        type: ActionStatusConstants.ACTION_STATUS_ACTION_CLICKED
+      });
+    },
+    customClass: {
+      customButton: styles.actionButton
+    }
+  }));
+}
+
+export default ActionStatusView;

package/es/library/dot/components/action-status/frameworks/ui/css/ActionStatus.module.css

@@ -0,0 +1,61 @@
+@property --_fill {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+.container {
+  gap: var(--zd_size8) ;
+}
+
+.spinner {
+  display: inline-block;
+  width: var(--zd_size16) ;
+  height: var(--zd_size16) ;
+  /* COLOR VARIABLES TO BE UPDATED PROPERLY USING COMMON COLORS */
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: 1px solid transparent;
+  background:
+    conic-gradient(var(--zdt_coloredtypography_grey_text) var(--_fill, 0deg),
+      var(--zdt_filterdropdown_clearbutton_bg) var(--_fill, 0deg)) content-box,
+    conic-gradient(var(--zdt_coloredtypography_grey_text) 0deg var(--_fill, 0deg),
+      transparent var(--_fill, 0deg) 360deg) border-box,
+    conic-gradient(transparent 0deg 4deg,
+      var(--zdt_coloredtypography_grey_text) 4deg 86deg,
+      transparent 86deg 94deg,
+      var(--zdt_coloredtypography_grey_text) 94deg 176deg,
+      transparent 176deg 184deg,
+      var(--zdt_coloredtypography_grey_text) 184deg 266deg,
+      transparent 266deg 274deg,
+      var(--zdt_coloredtypography_grey_text) 274deg 356deg,
+      transparent 356deg 360deg) border-box;
+}
+
+[dir=ltr] .spinner {
+  animation: fill 9s linear infinite;
+}
+
+[dir=rtl] .spinner {
+  animation: fill 9s linear infinite;
+}
+
+@keyframes fill {
+  0% {
+    --_fill: 0deg;
+  }
+
+  100% {
+    --_fill: 360deg;
+  }
+}
+
+.label {
+  line-height: 1.07;
+}
+
+.actionButton {
+  --button_font_size: 15px;
+  --button_text_transform: none;
+}

package/es/library/dot/components/form/frameworks/ui/sub-components/Footer.js

@@ -3,7 +3,7 @@ import FormAction, { LeftSide, RightSide } from '@zohodesk/dot/es/FormAction/For
 import { ActionViewGap } from "../../../../../../../platform/client-actions/components/interfaces/ActionViewModel"; // @ts-ignore
 
 import style from "../css/Form.module.css";
-import { RowActionsRenderer } from "../../../../../../../index";
+import RowActionsRenderer from "../../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 export default function Footer(_ref) {
   let {
     hasFooter,

package/es/library/dot/components/table-list/adapters/controllers/FieldChangeController.js

@@ -13,7 +13,8 @@ class FieldChangeController extends AbstractController {
     } = state;
     const {
       fieldName,
-      value
+      value,
+      previousValue
     } = action.payload;
     const {
       id
@@ -23,7 +24,8 @@ class FieldChangeController extends AbstractController {
       payload: {
         rowId: id,
         fieldName,
-        value
+        value,
+        previousValue
       }
     });
   }

package/es/library/dot/legacy-to-new-arch/button/frameworks/ui/ButtonView.js

@@ -1,5 +1,6 @@
 import React from "react";
 import Button from '@zohodesk-private/dot-registry/es/Button/Button';
+import Icon from "@zohodesk/icons/es/Icon";
 import ButtonConstants from "../../../../../../cc/button/Constants";
 
 function ButtonView(_ref, ref) {
@@ -18,11 +19,25 @@ function ButtonView(_ref, ref) {
     isDisabled,
     id,
     status,
-    tooltip
+    tooltip,
+    iconName,
+    iconSize,
+    iconPosition
   } = state.properties;
+  const iconElement = iconName ? /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    size: iconSize
+  }) : null;
+  const buttonText = iconElement ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '4px'
+    }
+  }, iconPosition === 'left' && iconElement, text, iconPosition !== 'left' && iconElement) : text;
   return /*#__PURE__*/React.createElement(Button, {
     getRef: ref,
-    text: text,
+    text: buttonText,
     palette: palette,
     size: size,
     isRounded: isRounded,

package/es/library/dot/legacy-to-new-arch/highlighted-value/frameworks/ui/HighlightedValueView.js

@@ -1,5 +1,6 @@
 import React from "react";
 import StatusBox from "@zohodesk-private/desk-components/es/table/StatusBox/StatusBox";
+import Icon from "@zohodesk/icons/es/Icon";
 import HighlightedValueConstants from "../../../../../../cc/highlighted-value/Constants"; // @ts-ignore
 
 import style from "./css/HighlightedValue.module.css";
@@ -18,8 +19,15 @@ function HighlightedValueView(_ref, ref) {
     tooltip,
     weight,
     isDotted,
-    cursor
+    cursor,
+    iconName,
+    iconSize,
+    iconPosition
   } = state.properties;
+  const iconElement = iconName ? /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    size: iconSize
+  }) : null;
   return /*#__PURE__*/React.createElement(StatusBox, {
     $customProps_container: {
       ref
@@ -29,8 +37,11 @@ function HighlightedValueView(_ref, ref) {
     $ui_weight: weight,
     $flag_wrapText: !isDotted,
     $i18n_tooltip: tooltip,
+    $render_leftChild: iconPosition === 'left' ? iconElement : null,
+    $render_rightChild: iconPosition !== 'left' ? iconElement : null,
     customStyle: {
-      pointer: cursor === "default" && style.default
+      pointer: cursor === "default" && style.default,
+      container: iconName ? style.gap : undefined
     },
     $event_onClick: () => {
       dispatch({

package/es/library/dot/legacy-to-new-arch/highlighted-value/frameworks/ui/css/HighlightedValue.module.css

@@ -1,3 +1,7 @@
 .default {
     cursor: default
+}
+
+.gap {
+    gap: var(--zd_size4) ;
 }

package/es/library/dot/legacy-to-new-arch/radio-dropdown/frameworks/ui/RadioDropdownView.js

@@ -107,7 +107,9 @@ function RadioDropdownView(_ref, ref) {
         payload: {
           id,
           value,
-          secondaryValue
+          secondaryValue,
+          previousId: selectedId,
+          previousValue: selectedValue
         }
       });
     },

package/es/library/dot/legacy-to-new-arch/table-column-filter/frameworks/ui/EventHandlersFactory.js

@@ -0,0 +1,26 @@
+import TableColumnFilterConstants from "../../../../../../cc/table-column-filter/Constants";
+import { SEARCH_REQUESTED } from "../../../../../../bc/search/Constants";
+export default class EventHandlersFactory {
+  static create() {
+    const searchHandler = input => {
+      const {
+        dispatch,
+        action
+      } = input;
+      const {
+        searchText
+      } = action.payload;
+      dispatch({
+        type: SEARCH_REQUESTED,
+        payload: {
+          searchString: searchText
+        }
+      });
+    };
+
+    return {
+      [TableColumnFilterConstants.FILTER_SEARCHED]: searchHandler
+    };
+  }
+
+}

package/es/library/dot/legacy-to-new-arch/table-column-filter/frameworks/ui/TableColumnFilter.js

@@ -1,12 +1,30 @@
 import { createCustomComponent } from "../../../../../custom-component";
 import TableColumnFilterProperties from "../../../../../../cc/table-column-filter/Properties";
 import TableColumnFilterEvents from "../../../../../../cc/table-column-filter/Events";
+import SearchTranslator from "../../../../../behaviours/search/adapters/presenter/SearchTranslator";
+import SearchBehaviourFactory from "../../../../../behaviours/search/frameworks/ui/SearchStringStoreBehaviourFactory";
+import EventHandlersFactory from "./EventHandlersFactory";
 import TableColumnFilterView from "./TableColumnFilterView";
+
+function transformState(state) {
+  const {
+    searchString
+  } = state.behaviours.search;
+  return { ...state,
+    viewModel: { ...state.properties,
+      ...state.viewModel,
+      options: SearchTranslator(searchString, 'value', state.properties.options)
+    }
+  };
+}
+
 const TableColumnFilter = createCustomComponent({
   name: 'TableColumnFilter',
   View: TableColumnFilterView,
+  transformState,
   properties: TableColumnFilterProperties,
+  behaviours: [SearchBehaviourFactory.create()],
   events: TableColumnFilterEvents,
-  eventHandlers: {}
+  eventHandlers: EventHandlersFactory.create()
 });
 export default TableColumnFilter;

package/es/library/dot/legacy-to-new-arch/table-column-filter/frameworks/ui/TableColumnFilterView.js

@@ -22,11 +22,12 @@ function TableColumnFilterView(_ref, ref) {
     heading,
     hasSearch,
     searchPlaceholder,
+    emptyStateMessage,
     hasClearButton,
     clearFilterLabel,
     optionTagLabel,
     taggedOption
-  } = state.properties;
+  } = state.viewModel;
 
   const handleFilter = (_ref2, e) => {
     let {
@@ -87,6 +88,7 @@ function TableColumnFilterView(_ref, ref) {
     options,
     hasSearch,
     searchPlaceholder,
+    emptyStateTitle: emptyStateMessage,
     hasClearButton,
     isClearButtonDisabled: !isFiltered,
     clearFilterLabel,

package/es/library/dot/legacy-to-new-arch/table-field-components/checkbox-field/frameworks/ui/EventHandlersFactory.js

@@ -16,7 +16,8 @@ export class EventHandlersFactory {
         type: FieldConstants.FIELD_CHANGED,
         payload: {
           fieldName,
-          value: toggledValue
+          value: toggledValue,
+          previousValue: checked
         }
       });
     };

package/es/library/dot/legacy-to-new-arch/table-field-components/highlighted-value-field/frameworks/ui/HighlightedValueFieldView.js

@@ -10,7 +10,10 @@ export default function HighlightedValueFieldView(_ref, ref) {
     tooltip,
     weight,
     isDotted,
-    cursor
+    cursor,
+    iconName,
+    iconSize,
+    iconPosition
   } = state.properties;
   return /*#__PURE__*/React.createElement(HighlightedValue, {
     getRef: ref,
@@ -19,6 +22,9 @@ export default function HighlightedValueFieldView(_ref, ref) {
     tooltip: tooltip,
     cursor: cursor,
     weight: weight,
-    isDotted: isDotted
+    isDotted: isDotted,
+    iconName: iconName,
+    iconSize: iconSize,
+    iconPosition: iconPosition
   });
 }

package/es/library/dot/legacy-to-new-arch/table-field-components/radio-dropdown-field/frameworks/ui/EventHandlersFactory.js

@@ -15,13 +15,15 @@ export class EventHandlersFactory {
         fieldType
       } = state.properties;
       const {
-        id
+        id,
+        previousId
       } = action.payload;
       dispatch({
         type: FieldConstants.FIELD_CHANGED,
         payload: {
           fieldName,
-          value: fieldType === 'Boolean' ? id === 'true' : id
+          value: fieldType === 'Boolean' ? id === 'true' : id,
+          previousValue: fieldType === 'Boolean' ? previousId === 'true' : previousId
         }
       });
     };

package/es/library/dot/legacy-to-new-arch/table-field-components/switch-field/frameworks/ui/EventHandlersFactory.js

@@ -16,7 +16,8 @@ export class EventHandlersFactory {
         type: FieldConstants.FIELD_CHANGED,
         payload: {
           fieldName,
-          value: toggledValue
+          value: toggledValue,
+          previousValue: checked
         }
       });
     };