@zohodesk/library-platform 1.1.7 → 1.1.8-alpha.1

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

@@ -1,6 +1,7 @@
 import React from "react";
 import StatusBox from "@zohodesk-private/desk-components/es/table/StatusBox/StatusBox";
 import { HighlightedValueConstants } from "../../../../../../cc";
+import style from "./css/HighlightedValue.module.css";
 
 function HighlightedValueView(_ref, ref) {
   let {
@@ -13,7 +14,8 @@ function HighlightedValueView(_ref, ref) {
   let {
     text,
     color,
-    tooltip
+    tooltip,
+    cursor
   } = state.properties;
   return /*#__PURE__*/React.createElement(StatusBox, {
     $customProps_container: {
@@ -22,6 +24,9 @@ function HighlightedValueView(_ref, ref) {
     $ui_color: color,
     $i18n_text: text,
     $i18n_tooltip: tooltip,
+    customStyle: {
+      pointer: cursor === "default" && style.default
+    },
     $event_onClick: () => {
       dispatch({
         type: HighlightedValueConstants.HIGHLIGHTED_VALUE_CLICKED

package/es/library/dot/{components/form-fields/ephi-tag/frameworks/ui/css/EPHITag.module.css → legacy-to-new-arch/highlighted-value/frameworks/ui/css/HighlightedValue.module.css}

@@ -1,3 +1,3 @@
-.tag {
+.default {
     cursor: default
 }

package/es/library/dot/legacy-to-new-arch/label/frameworks/ui/LabelView.js

@@ -1,11 +1,10 @@
 import React from 'react';
-import Label from '@zohodesk/components/es/Label/Label'; // import ActionLocation from '@library/dot/components/action-location/frameworks/ui/ActionLocation';
-
-import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
-import LabelAction from "./sub-components/ui/LabelAction"; // @ts-ignore
-
+import Label from '@zohodesk/components/es/Label/Label';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
+import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
+// @ts-ignore
 import style from "./css/Label.module.css";
-ComponentRegistry.register(`LabelAction`, LabelAction);
 
 function LabelView(_ref, ref) {
   let {
@@ -14,18 +13,23 @@ function LabelView(_ref, ref) {
   let {
     label,
     for: htmlFor,
-    isMandatory
-  } = state.properties; // const { actions }: LabelProperties = state.properties;
-
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref
+    isMandatory,
+    actions
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Flex, {
+    ref: ref,
+    $ui_displayMode: "flex",
+    $ui_alignItems: "center"
   }, /*#__PURE__*/React.createElement(Label, {
     text: label,
     type: "subtitle",
     htmlFor: htmlFor,
     palette: isMandatory ? 'mandatory' : 'default',
     customClass: `${style.label} ${isMandatory ? style.mandatory : ''}`
-  }));
+  }), actions.length ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+    actions: actions,
+    gap: ActionViewGap.XMEDIUM
+  }) : null);
 }
 
 export default LabelView;

package/es/library/dot/legacy-to-new-arch/label/frameworks/ui/css/Label.module.css

@@ -1,11 +1,9 @@
 .label {
-    --label_cursor: inherit;
-    display: inline;
-    vertical-align: middle
+    --label_cursor: inherit
 }[dir=ltr] .label {
-    padding-right: var(--zd_size4) 
+    padding-right: var(--zd_size6) 
 }[dir=rtl] .label {
-    padding-left: var(--zd_size4) 
+    padding-left: var(--zd_size6) 
 }
 
 .mandatory::after {

package/es/library/dot/legacy-to-new-arch/multi-select/frameworks/ui/MultiSelectView.js

@@ -1,6 +1,9 @@
 import React from "react";
+import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import MultiSelect from "@zohodesk/components/es/MultiSelect/MultiSelect";
-import { MultiSelectConstants } from "../../../../../../cc/multi-select";
+import { MultiSelectConstants } from "../../../../../../cc/multi-select"; // @ts-ignore
+
+import style from "./css/MultiSelectView.module.css";
 
 function MultiSelectView(_ref, ref) {
   let {
@@ -18,8 +21,19 @@ function MultiSelectView(_ref, ref) {
     hasSelectAll,
     required,
     disabled,
-    readonly
+    readonly,
+    actions
   } = state.properties;
+
+  const renderRightFieldActions = () => {
+    if (!(actions !== null && actions !== void 0 && actions.length)) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.actionContainer
+    }, /*#__PURE__*/React.createElement(ActionEventMediator, {
+      actions: actions
+    }));
+  };
+
   return /*#__PURE__*/React.createElement(MultiSelect, {
     getRef: ref,
     options: options,
@@ -35,12 +49,18 @@ function MultiSelectView(_ref, ref) {
     textBoxSize: "xmedium",
     customProps: {
       TextBoxIconProps: {
-        required
+        customClass: {
+          customTBoxWrap: style.custmInputWrapper,
+          customTBoxIcon: style.clearIconContainer
+        },
+        'aria-required': required,
+        renderRightPlaceholderNode: renderRightFieldActions()
       }
     },
     selectAllText: "Select All",
     emptyMessage: "No options to select",
     searchEmptyMessage: "No Results Found",
+    customChildrenClass: `${(actions === null || actions === void 0 ? void 0 : actions.length) >= 2 ? style[`paddingRight${actions.length === 2 ? 64 : 96}`] : ''}`,
     onChange: selectedValues => {
       dispatch({
         type: MultiSelectConstants.MULTISELECT_CHANGED,

package/es/library/dot/legacy-to-new-arch/multi-select/frameworks/ui/css/MultiSelectView.module.css

@@ -0,0 +1,37 @@
+.actionContainer {
+    margin-top: var(--zd_size4) ;
+}
+
+.custmInputWrapper {
+    position: absolute;
+    top: 0 ;
+    width: 100% ;
+}
+
+[dir=ltr] .custmInputWrapper {
+    left: 0 ;
+}
+
+[dir=rtl] .custmInputWrapper {
+    right: 0 ;
+}
+
+.clearIconContainer {
+    --textboxicon_icon_margin: 0;
+}
+
+[dir=ltr] .paddingRight64 {
+    padding-right: var(--zd_size64) ;
+}
+
+[dir=rtl] .paddingRight64 {
+    padding-left: var(--zd_size64) ;
+}
+
+[dir=ltr] .paddingRight96 {
+    padding-right: var(--zd_size96) ;
+}
+
+[dir=rtl] .paddingRight96 {
+    padding-left: var(--zd_size96) ;
+}

package/es/library/dot/legacy-to-new-arch/select/frameworks/ui/SelectView.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Select from '@zohodesk/components/es/Select/Select';
 import SelectConstants from "../../../../../../cc/select/Constants";
+import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 
 function SelectView(_ref, ref) {
   let {
@@ -17,12 +18,20 @@ function SelectView(_ref, ref) {
     placeholder,
     required,
     disabled,
-    readonly
+    readonly,
+    actions
   } = state.properties;
   const transformedOptions = options.map(option => ({
     id: option.value,
     text: option.value
   }));
+
+  const renderRightFieldActions = () => {
+    return actions !== null && actions !== void 0 && actions.length ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+      actions: actions
+    }) : null;
+  };
+
   return /*#__PURE__*/React.createElement(Select, {
     getRef: ref,
     options: transformedOptions,
@@ -44,10 +53,13 @@ function SelectView(_ref, ref) {
     customProps: {
       TextBoxProps: {
         role: 'combobox',
-        required
+        'aria-required': required
+      },
+      // HACK: The select is not rendered with "combobox" role.
+      TextBoxIconProps: {
+        renderRightPlaceholderNode: renderRightFieldActions()
       }
-    } // HACK: The select is not rendered with "combobox" role.
-    ,
+    },
     needSearch: transformedOptions.length > 4,
     isDefaultSelectValue: false,
     searchBoxPlaceHolder: "Search",

package/es/library/dot/legacy-to-new-arch/text-area/frameworks/ui/TextAreaView.js

@@ -1,6 +1,9 @@
 import React from "react";
+import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import Textarea from '@zohodesk/components/es/Textarea/Textarea';
-import TextAreaConstants from "../../../../../../cc/textarea/Constants";
+import TextAreaConstants from "../../../../../../cc/textarea/Constants"; // @ts-ignore
+
+import style from "./css/TextAreaView.module.css";
 
 function TextAreaView(_ref, ref) {
   let {
@@ -17,9 +20,10 @@ function TextAreaView(_ref, ref) {
     value,
     required,
     disabled,
-    readonly
+    readonly,
+    actions
   } = state.properties;
-  return /*#__PURE__*/React.createElement(Textarea, {
+  const textAreaRenderer = /*#__PURE__*/React.createElement(Textarea, {
     getRef: ref,
     htmlId: id,
     maxLength: maxLength,
@@ -29,8 +33,9 @@ function TextAreaView(_ref, ref) {
     isDisabled: disabled,
     animated: !readonly && !disabled,
     size: "xsmall",
+    resize: "vertical",
     customAttributes: {
-      required
+      'aria-required': required
     },
     onFocus: () => dispatch({
       type: TextAreaConstants.TEXTAREA_FOCUSED
@@ -45,8 +50,21 @@ function TextAreaView(_ref, ref) {
           value
         }
       });
-    }
+    },
+    customClass: `${actions !== null && actions !== void 0 && actions.length ? style[`paddingRight${actions.length === 1 ? 32 : actions.length === 2 ? 64 : 96}`] : ''}`
   });
+
+  if (!(actions !== null && actions !== void 0 && actions.length)) {
+    return textAreaRenderer;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.hasChildren
+  }, textAreaRenderer, /*#__PURE__*/React.createElement("div", {
+    className: style.rightPlaceholder
+  }, /*#__PURE__*/React.createElement(ActionEventMediator, {
+    actions: actions
+  })));
 }
 
 export default TextAreaView;

package/es/library/dot/legacy-to-new-arch/text-area/frameworks/ui/css/TextAreaView.module.css

@@ -0,0 +1,40 @@
+.hasChildren {
+    position: relative;
+}
+
+.rightPlaceholder {
+    position: absolute;
+    bottom: var(--zd_size4) ;
+}
+
+[dir=ltr] .rightPlaceholder {
+    right: var(--zd_size12) ;
+}
+
+[dir=rtl] .rightPlaceholder {
+    left: var(--zd_size12) ;
+}
+
+[dir=ltr] .paddingRight32 {
+    padding-right: var(--zd_size32) ;
+}
+
+[dir=rtl] .paddingRight32 {
+    padding-left: var(--zd_size32) ;
+}
+
+[dir=ltr] .paddingRight64 {
+    padding-right: var(--zd_size64) ;
+}
+
+[dir=rtl] .paddingRight64 {
+    padding-left: var(--zd_size64) ;
+}
+
+[dir=ltr] .paddingRight96 {
+    padding-right: var(--zd_size96) ;
+}
+
+[dir=rtl] .paddingRight96 {
+    padding-left: var(--zd_size96) ;
+}

package/es/library/dot/legacy-to-new-arch/textbox/frameworks/ui/TextBoxView.js

@@ -1,4 +1,5 @@
 import React from "react";
+import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import TextBox from "@zohodesk/components/es/TextBoxIcon/TextBoxIcon";
 import TextBoxConstants from "../../../../../../cc/textbox/Constants";
 
@@ -19,8 +20,16 @@ function TextBoxView(_ref, ref) {
     value,
     required,
     disabled,
-    readonly
+    readonly,
+    actions
   } = state.properties;
+
+  const renderRightFieldActions = () => {
+    return actions !== null && actions !== void 0 && actions.length ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+      actions: actions
+    }) : null;
+  };
+
   return /*#__PURE__*/React.createElement(TextBox, {
     inputRef: ref,
     htmlId: id,
@@ -40,7 +49,7 @@ function TextBoxView(_ref, ref) {
     }),
     customProps: {
       TextBoxProps: {
-        required
+        'aria-required': required
       }
     },
     onChange: value => dispatch({
@@ -48,7 +57,8 @@ function TextBoxView(_ref, ref) {
       payload: {
         value
       }
-    })
+    }),
+    renderRightPlaceholderNode: renderRightFieldActions()
   });
 }
 

package/es/platform/client-actions/bc/zclient-actions/SdkContract.js

@@ -0,0 +1,35 @@
+export const SdkContracts = {
+  getLocationMeta: {
+    type: 'object',
+    properties: {
+      clientActionId: {
+        type: 'string',
+        minLength: 1
+      }
+    },
+    required: ['clientActionId']
+  },
+  getComponentPropertiesMeta: {
+    type: 'object',
+    properties: {
+      clientActionId: {
+        type: 'string',
+        minLength: 1
+      }
+    },
+    required: ['clientActionId']
+  },
+  updateComponentPropertiesMeta: {
+    type: 'object',
+    properties: {
+      clientActionId: {
+        type: 'string',
+        minLength: 1
+      },
+      newComponentProperties: {
+        type: 'object'
+      }
+    },
+    required: ['clientActionId', 'newComponentProperties']
+  }
+};

package/es/platform/client-actions/behaviour/zclient-actions/adapters/resources/ClientActionResource.js

@@ -0,0 +1,105 @@
+import { AbstractResource } from "../../../../../sdk/application/interfaces/gateways/AbstractResource";
+import Repository from "../gateways/Repository";
+import Presenter from "../presenters/Presenter";
+import GetClientActionLocationUseCase from "../../applications/usecases/GetClientActionLocationUseCase";
+import GetClientActionUIComponentPropertiesUseCase from "../../applications/usecases/GetClientActionUIComponentPropertiesUseCase";
+import UpdateClientActionUIComponentPropertiesUseCase from "../../applications/usecases/UpdateClientActionUIComponentPropertiesUseCase";
+import GetClientActionsUseCase from "../../applications/usecases/GetClientActionsUseCase";
+import { SdkContracts } from "../../../../bc/zclient-actions/SdkContract";
+export class ClientActionResource extends AbstractResource {
+  initialize() {}
+
+  destroy() {}
+
+  getClientActionDependencies() {
+    const dependencies = {
+      repository: new Repository(),
+      presenter: new Presenter()
+    };
+    return dependencies;
+  }
+
+  createUseCase(dependencies, UseCaseClass) {
+    var _usecase$updateDepend, _usecase$updateDepend2;
+
+    const {
+      state,
+      updateState
+    } = this.dependencies;
+    const usecase = new UseCaseClass(dependencies);
+    (_usecase$updateDepend = usecase.updateDependency) === null || _usecase$updateDepend === void 0 ? void 0 : _usecase$updateDepend.call(usecase, state, updateState);
+    (_usecase$updateDepend2 = usecase.updateDependencies) === null || _usecase$updateDepend2 === void 0 ? void 0 : _usecase$updateDepend2.call(usecase, state, updateState);
+    return usecase;
+  }
+
+  getLocation(id) {
+    this.validateInput('getLocation', {
+      clientActionId: id
+    }, SdkContracts.getLocationMeta);
+    const {
+      getData,
+      setData
+    } = this.createCallback();
+    const dependencies = this.getClientActionDependencies();
+    const useCase = this.createUseCase(dependencies, GetClientActionLocationUseCase);
+    useCase.execute({
+      id,
+      callback: setData
+    });
+    return getData();
+  }
+
+  getUIComponentProperties(id) {
+    this.validateInput('getUIComponentProperties', {
+      clientActionId: id
+    }, SdkContracts.getComponentPropertiesMeta);
+    const {
+      getData,
+      setData
+    } = this.createCallback();
+    const dependencies = this.getClientActionDependencies();
+    const useCase = this.createUseCase(dependencies, GetClientActionUIComponentPropertiesUseCase);
+    useCase.execute({
+      id,
+      callback: setData
+    });
+    return getData();
+  }
+
+  getClientActions() {
+    const {
+      getData,
+      setData
+    } = this.createCallback();
+    const dependencies = this.getClientActionDependencies();
+    const useCase = this.createUseCase(dependencies, GetClientActionsUseCase);
+    useCase.execute({
+      callback: setData
+    });
+    return getData();
+  }
+
+  updateUIComponentProperties(id, newComponentProperties) {
+    this.validateInput('updateUIComponentProperties', {
+      clientActionId: id,
+      newComponentProperties
+    }, SdkContracts.updateComponentPropertiesMeta);
+    const {
+      getData,
+      setData
+    } = this.createCallback();
+    const dependencies = this.getClientActionDependencies();
+    const {
+      dispatch
+    } = this.dependencies;
+    const useCase = this.createUseCase(dependencies, UpdateClientActionUIComponentPropertiesUseCase);
+    useCase.execute({
+      id,
+      newComponentProperties,
+      dispatch,
+      callback: setData
+    });
+    return getData();
+  }
+
+}

package/es/platform/client-actions/behaviour/zclient-actions/applications/usecases/GetClientActionLocationUseCase.js

@@ -0,0 +1,20 @@
+import AbstractUseCase from "./AbstractUseCase";
+
+class GetClientActionLocationUseCase extends AbstractUseCase {
+  execute(_ref) {
+    let {
+      id,
+      callback
+    } = _ref;
+    const {
+      repository
+    } = this.dependencies;
+    const clientActionManager = repository.getClientActionsManagerEntity();
+    clientActionManager.validateClientActionId(id);
+    const clientAction = clientActionManager.getClientAction(id);
+    callback === null || callback === void 0 ? void 0 : callback(clientAction.getLocation());
+  }
+
+}
+
+export default GetClientActionLocationUseCase;

package/es/platform/client-actions/behaviour/zclient-actions/applications/usecases/GetClientActionUIComponentPropertiesUseCase.js

@@ -0,0 +1,20 @@
+import AbstractUseCase from "./AbstractUseCase";
+
+class GetClientActionUIComponentPropertiesUseCase extends AbstractUseCase {
+  execute(_ref) {
+    let {
+      id,
+      callback
+    } = _ref;
+    const {
+      repository
+    } = this.dependencies;
+    const clientActionManager = repository.getClientActionsManagerEntity();
+    clientActionManager.validateClientActionId(id);
+    const clientAction = clientActionManager.getClientAction(id);
+    callback === null || callback === void 0 ? void 0 : callback(clientAction.getUIComponentProperties());
+  }
+
+}
+
+export default GetClientActionUIComponentPropertiesUseCase;

package/es/platform/client-actions/behaviour/zclient-actions/applications/usecases/GetClientActionsUseCase.js

@@ -0,0 +1,18 @@
+import AbstractUseCase from "./AbstractUseCase";
+
+class GetClientActionsUseCase extends AbstractUseCase {
+  execute(_ref) {
+    let {
+      callback
+    } = _ref;
+    const {
+      repository
+    } = this.dependencies;
+    const clientActionManager = repository.getClientActionsManagerEntity();
+    const clientActions = clientActionManager.getClientActionModels();
+    callback === null || callback === void 0 ? void 0 : callback(clientActions);
+  }
+
+}
+
+export default GetClientActionsUseCase;

package/es/platform/client-actions/behaviour/zclient-actions/applications/usecases/UpdateClientActionUIComponentPropertiesUseCase.js

@@ -0,0 +1,32 @@
+import AbstractUseCase from "./AbstractUseCase";
+import { SET_CLIENTACTIONS } from "../../../../bc/zclient-actions/Constants";
+
+class UpdateClientActionUIComponentPropertiesUseCase extends AbstractUseCase {
+  execute(_ref) {
+    let {
+      id,
+      newComponentProperties,
+      dispatch,
+      callback
+    } = _ref;
+    const {
+      repository
+    } = this.dependencies;
+    const clientActionManager = repository.getClientActionsManagerEntity();
+    clientActionManager.validateClientActionId(id);
+    const {
+      updatedClientAction,
+      updatedClientActions
+    } = clientActionManager.updateClientActionComponentProperties(id, newComponentProperties);
+    dispatch({
+      type: SET_CLIENTACTIONS,
+      payload: {
+        clientActions: updatedClientActions
+      }
+    });
+    callback === null || callback === void 0 ? void 0 : callback(updatedClientAction.getUIComponentProperties());
+  }
+
+}
+
+export default UpdateClientActionUIComponentPropertiesUseCase;

package/es/platform/client-actions/behaviour/zclient-actions/domain/entities/ClientAction.js

@@ -41,6 +41,18 @@ export default class ClientAction {
     this.conditionMeta = clientActionObj.conditions;
   }
 
+  getLocation() {
+    return this.location;
+  }
+
+  getUIComponentProperties() {
+    return this.uiComponentMapping.getPropertiesValueMapping();
+  }
+
+  updateUIComponentProperties(newProperties) {
+    this.uiComponentMapping.updatePropertiesValueMapping(newProperties);
+  }
+
   toObject() {
     return {
       id: this.id,