@zohodesk/library-platform 1.1.9 → 1.1.10-exp.2

package/es/library/dot/components/form-fields/currency/frameworks/ui/CurrencyView.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import TextBox from "../../../../../legacy-to-new-arch/textbox/frameworks/ui/TextBox";
-import FieldItem from "../../../field/FieldItem"; // @ts-ignore
+import FieldItem from "../../../field/FieldItem";
+import { formatCurrency } from "../../../../../../translator-common"; // @ts-ignore
 
 import style from "../../../../form/frameworks/ui/css/Form.module.css";
 
@@ -8,6 +9,10 @@ function CurrencyView(_ref, ref) {
   let {
     state
   } = _ref;
+  const {
+    isFocused,
+    properties
+  } = state;
   const {
     id,
     label,
@@ -17,14 +22,21 @@ function CurrencyView(_ref, ref) {
     disabled,
     readonly,
     required,
+    currencyLocale,
+    currencySymbol,
     labelActions,
     actions,
     uiConfig
-  } = state.properties;
+  } = properties;
   const {
     size,
     breakRow
   } = uiConfig;
+  const formattedValue = isFocused ? value : formatCurrency({
+    value,
+    symbol: currencySymbol,
+    locale: currencyLocale
+  });
   return /*#__PURE__*/React.createElement(FieldItem, {
     ref: ref,
     id: id,
@@ -39,7 +51,7 @@ function CurrencyView(_ref, ref) {
     className: style.field
   }, /*#__PURE__*/React.createElement(TextBox, {
     id: id,
-    value: value,
+    value: formattedValue,
     placeholder: placeholder,
     disabled: disabled,
     readonly: readonly,

package/es/library/dot/components/form-fields/currency/frameworks/ui/EventHandlerFactory.js

@@ -13,8 +13,12 @@ class EventHandlersFactory {
   static handleTextBoxFocused(_ref) {
     let {
       state,
+      updateState,
       dispatch
     } = _ref;
+    updateState({ ...state,
+      isFocused: true
+    });
     const {
       name
     } = state.properties;
@@ -30,8 +34,12 @@ class EventHandlersFactory {
   static handleTextBoxBlurred(_ref2) {
     let {
       state,
+      updateState,
       dispatch
     } = _ref2;
+    updateState({ ...state,
+      isFocused: false
+    });
     const {
       name
     } = state.properties;

package/es/library/dot/components/form-fields/field/__test__/common.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import { render, fireEvent, screen, cleanup, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
@@ -17,9 +19,9 @@ export function testEPHIFieldVisibility(Component, props) {
   it('should display ePHI tag for ePHI-enabled fields', () => {
     const {
       getByText
-    } = render( /*#__PURE__*/React.createElement(Component, { ...props,
+    } = render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       ePHI: true
-    }));
+    })));
     const ePHITag = getByText('ePHI');
     expect(ePHITag).toBeInTheDocument();
   });
@@ -38,9 +40,9 @@ export function testCommonFieldAttributes(Component, props) {
   it('should display the correct label', () => {
     const {
       getByLabelText
-    } = render( /*#__PURE__*/React.createElement(Component, { ...props,
+    } = render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       label: "Test Label"
-    }));
+    })));
     const label = getByLabelText('Test Label');
     expect(label).toBeInTheDocument();
   });
@@ -51,9 +53,9 @@ export function testFieldErrorMessage(Component, props) {
   it('should display the correct error message', () => {
     const {
       getByRole
-    } = render( /*#__PURE__*/React.createElement(Component, { ...props,
+    } = render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       errorMessage: "Error occurred"
-    }));
+    })));
     const errorMessage = getByRole('alert');
     expect(errorMessage).toHaveTextContent('Error occurred');
   });
@@ -65,9 +67,9 @@ export function testFieldTooltip(Component, props) {
     const {
       getByText,
       container
-    } = render( /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement(Component, { ...props,
+    } = render( /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       tooltip: tooltipText
-    })));
+    }))));
     const infoIcon = container.querySelector(`[data-title="${tooltipText}"]`);
     expect(infoIcon).toBeInTheDocument();
     fireEvent.mouseEnter(infoIcon);
@@ -86,9 +88,9 @@ export function testRequiredTextKindFieldAttributes(Component, props) {
   it('should be required when required prop is true', () => {
     const {
       getByRole
-    } = render( /*#__PURE__*/React.createElement(Component, { ...props,
+    } = render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       required: true
-    }));
+    })));
     const input = getByRole('textbox');
     expect(input).toBeRequired();
   });
@@ -97,9 +99,9 @@ export function testDisabledTextKindFieldAttributes(Component, props) {
   it('should be disabled when disabled prop is true', () => {
     const {
       getByRole
-    } = render( /*#__PURE__*/React.createElement(Component, { ...props,
+    } = render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       disabled: true
-    }));
+    })));
     const input = getByRole('textbox');
     expect(input).toBeDisabled();
   });
@@ -108,9 +110,9 @@ export function testReadOnlyTextKindFieldAttributes(Component, props) {
   it('should be readonly when readonly prop is true', () => {
     const {
       getByRole
-    } = render( /*#__PURE__*/React.createElement(Component, { ...props,
+    } = render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       readonly: true
-    }));
+    })));
     const input = getByRole('textbox');
     expect(input).toHaveAttribute('readonly');
   });
@@ -145,10 +147,10 @@ export function testFieldValueChange(_ref2) {
     const Parent = createCustomComponent({
       name: 'Parent',
       View: (_, ref) => {
-        return /*#__PURE__*/React.createElement(Component, { ...props,
+        return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
           name: "fieldDetails",
           getRef: ref
-        });
+        }));
       },
       properties: {},
       eventHandlers: {

package/es/library/dot/components/form-fields/field/css/FieldItem.module.css

@@ -1,7 +1,7 @@
 .fieldItem {
     position: relative;
-    min-width: 0 ;
-    min-height: 0 
+    min-width: 0;
+    min-height: 0
 }
 
 .largeSize {

package/es/library/dot/components/form-fields/index.js

@@ -12,4 +12,5 @@ export { default as Number } from "./number/frameworks/ui/Number";
 export { default as Decimal } from "./decimal/frameworks/ui/Decimal";
 export { default as Date } from "./date/frameworks/ui/Date";
 export { default as DateTime } from "./datetime/frameworks/ui/DateTime";
-export { default as Checkbox } from "./checkbox/frameworks/ui/Checkbox";
+export { default as Checkbox } from "./checkbox/frameworks/ui/Checkbox";
+export { default as LookUp } from "./lookup/frameworks/ui/Lookup";

package/es/library/dot/components/form-fields/lookup/frameworks/ui/EventHandlerFactory.js

@@ -0,0 +1,70 @@
+import { TextBoxConstants } from "../../../../../../../cc/textbox";
+import FieldConstants from "../../../../../../../cc/fields/field/Constants";
+
+class EventHandlersFactory {
+  static create() {
+    return {
+      [TextBoxConstants.TEXTBOX_FOCUSED]: this.handleTextBoxFocused,
+      [TextBoxConstants.TEXTBOX_BLURED]: this.handleTextBoxBlurred,
+      [TextBoxConstants.TEXTBOX_CHANGED]: this.handleTextBoxChanged
+    };
+  }
+
+  static handleTextBoxFocused(_ref) {
+    let {
+      state,
+      dispatch
+    } = _ref;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_FOCUSED,
+      payload: {
+        fieldName: name
+      },
+      metaData: {}
+    });
+  }
+
+  static handleTextBoxBlurred(_ref2) {
+    let {
+      state,
+      dispatch
+    } = _ref2;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_BLURRED,
+      payload: {
+        fieldName: name
+      }
+    });
+  }
+
+  static handleTextBoxChanged(_ref3) {
+    let {
+      state,
+      dispatch,
+      action
+    } = _ref3;
+    const {
+      value
+    } = action.payload;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_CHANGED,
+      payload: {
+        fieldName: name,
+        value
+      },
+      metaData: {}
+    });
+  }
+
+}
+
+export default EventHandlersFactory;

package/es/library/dot/components/form-fields/lookup/frameworks/ui/Lookup.js

@@ -0,0 +1,13 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import LookupFieldProperties from "../../../../../../../cc/fields/lookup/Properties";
+import FocusFieldBehaviourFactory from "../../../../../../behaviours/field-focus/frameworks/ui/FocusFieldBehaviourFactory";
+import LookupView from "./LookupView";
+import EventHandlersFactory from "./EventHandlerFactory";
+let Lookup = createCustomComponent({
+  name: 'FormLookUpField',
+  View: LookupView,
+  properties: LookupFieldProperties,
+  eventHandlers: EventHandlersFactory.create(),
+  behaviours: [FocusFieldBehaviourFactory.create()]
+});
+export default Lookup;

package/es/library/dot/components/form-fields/lookup/frameworks/ui/LookupView.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import TextBox from "../../../../../legacy-to-new-arch/textbox/frameworks/ui/TextBox";
+import FieldItem from "../../../field/FieldItem"; // @ts-ignore
+
+import style from "../../../../form/frameworks/ui/css/Form.module.css";
+
+function TextBoxView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    id,
+    label,
+    value,
+    placeholder,
+    errorMessage,
+    disabled,
+    readonly,
+    required,
+    uiConfig,
+    labelActions,
+    actions
+  } = state.properties;
+  const {
+    size,
+    breakRow
+  } = uiConfig;
+  return /*#__PURE__*/React.createElement(FieldItem, {
+    ref: ref,
+    id: id,
+    label: label,
+    labelActions: labelActions,
+    required: required,
+    errorMessage: errorMessage,
+    testId: 'smart_form_field_lookup',
+    size: size,
+    breakRow: breakRow
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.field
+  }, /*#__PURE__*/React.createElement(TextBox, {
+    id: id,
+    placeholder: placeholder,
+    value: value,
+    required: required,
+    disabled: disabled,
+    readonly: readonly,
+    actions: actions
+  })));
+}
+
+export default TextBoxView;

package/es/library/dot/components/form-fields/textarea/frameworks/ui/TextAreaView.js

@@ -18,7 +18,8 @@ function TextAreaView(_ref, ref) {
     readonly,
     required,
     uiConfig,
-    labelActions
+    labelActions,
+    actions
   } = state.properties;
   const {
     size,
@@ -42,7 +43,8 @@ function TextAreaView(_ref, ref) {
     value: value,
     required: required,
     disabled: disabled,
-    readonly: readonly
+    readonly: readonly,
+    actions: actions
   })));
 }
 

package/es/library/dot/components/section/frameworks/ui/RenderField.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
 export function renderField(field, key) {
@@ -12,8 +14,7 @@ export function renderField(field, key) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(Component, {
-    key: key,
-    ...properties
-  });
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    key: key
+  }, properties));
 }

package/es/library/dot/components/section/frameworks/ui/SectionView.js

@@ -1,7 +1,10 @@
 import React from 'react';
+import VelocityAnimationGroup from '@zohodesk/components/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 import Section from '@zohodesk-private/desk-components/es/setup/SetupFormBox/SetupFormBox';
 import FieldsLayout from '@zohodesk-private/desk-components/es/form/FieldsLayout/FieldsLayout';
-import { renderField } from "./RenderField";
+import { renderField } from "./RenderField"; // @ts-ignore
+
+import style from "./css/Section.module.css";
 
 function SectionView(_ref, ref) {
   let {
@@ -16,15 +19,21 @@ function SectionView(_ref, ref) {
   } = state.properties;
   return /*#__PURE__*/React.createElement(Section, {
     $i18n_heading: title,
+    $flag_isDescriptionAsHtmlText: true,
     $i18n_description: description,
     testId: name,
     customId: name,
     $tagAttributes_container: {
       ref
     }
-  }, !isCollapsed && /*#__PURE__*/React.createElement(FieldsLayout, {
+  }, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+    name: "slideDown",
+    isActive: !isCollapsed
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.fieldsContainer
+  }, /*#__PURE__*/React.createElement(FieldsLayout, {
     $flag_topSpace: !!title || !!description
-  }, fields.filter(field => field.isVisible).map(field => renderField(field, field.name || field.apiName))));
+  }, fields.filter(field => field.isVisible).map(field => renderField(field, field.name || field.apiName))))));
 }
 
 export default SectionView;

package/es/library/dot/components/section/frameworks/ui/css/Section.module.css

@@ -0,0 +1,3 @@
+.fieldsContainer {
+    padding-top: 1px
+}

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

@@ -1,4 +1,4 @@
-import SmartTableConstants from "../../../../../../cc/table-connected/constants/Events";
+import SmartTableConstants from "../../../../../../cc/table-connected/constants/ExternalConstants";
 import AbstractController from "./AbstractController";
 
 class KeyboardRowClickController extends AbstractController {
@@ -15,7 +15,7 @@ class KeyboardRowClickController extends AbstractController {
       focussedRow,
       data
     } = state.properties || {};
-    const record = data === null || data === void 0 ? void 0 : data.rows[focussedRow];
+    const record = data?.rows[focussedRow];
 
     if (!record) {
       return;

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

@@ -11,7 +11,7 @@ class KeyboardRowSelectController extends AbstractController {
       focussedRow,
       data
     } = state.properties || {};
-    const record = data === null || data === void 0 ? void 0 : data.rows[focussedRow];
+    const record = data?.rows[focussedRow];
 
     if (!record) {
       return;

package/es/library/dot/components/table-list/adapters/presenters/TableTranslator.js

@@ -22,7 +22,7 @@ class TableTranslator {
 
   static translateHeaders(headers, sortBy) {
     return headers.map(header => {
-      const sortOrder = (sortBy === null || sortBy === void 0 ? void 0 : sortBy.name) === header.name ? sortBy === null || sortBy === void 0 ? void 0 : sortBy.order : 'none';
+      const sortOrder = sortBy?.name === header.name ? sortBy?.order : 'none';
       return { ...header,
         sortOrder
       };

package/es/library/dot/components/table-list/frameworks/ui/TableListView.js

@@ -40,7 +40,8 @@ function TableListView(_ref2, _ref) {
   } = state.properties;
   const {
     headers,
-    rows
+    rows,
+    clientScripts
   } = data;
   const {
     hasActions: hasRowActions,
@@ -76,7 +77,8 @@ function TableListView(_ref2, _ref) {
     isFlexibleColumns,
     hasRowActions,
     rowActionsColumnWidth,
-    dispatch
+    dispatch,
+    clientScripts
   }), renderBody({
     TableRef,
     dispatch,
@@ -90,7 +92,8 @@ function TableListView(_ref2, _ref) {
     hasRowActions,
     rowActionsColumnWidth,
     hasRows,
-    isReOrderLoading
+    isReOrderLoading,
+    clientScripts
   }), /*#__PURE__*/React.createElement(NoData, {
     isDataEmpty: isDataEmpty,
     emptyStateUiType: emptyStateUiType
@@ -113,7 +116,8 @@ function renderHeader(_ref3) {
     isFlexibleColumns,
     hasRowActions,
     rowActionsColumnWidth,
-    dispatch
+    dispatch,
+    clientScripts
   } = _ref3;
   return /*#__PURE__*/React.createElement(Header, {
     isReorderEnabled: isReorderEnabled,
@@ -128,7 +132,8 @@ function renderHeader(_ref3) {
     rowActionsColumnWidth: rowActionsColumnWidth,
     actions: selection.actions,
     headers: headers,
-    dispatch: dispatch
+    dispatch: dispatch,
+    clientScripts: clientScripts
   });
 }
 
@@ -158,7 +163,8 @@ function renderBody(_ref4) {
     hasRowActions,
     rowActionsColumnWidth,
     hasRows,
-    isReOrderLoading
+    isReOrderLoading,
+    clientScripts
   } = _ref4;
   const {
     rowData,
@@ -204,7 +210,8 @@ function renderBody(_ref4) {
     rowActionsColumnWidth: rowActionsColumnWidth,
     isKeyboardControlsEnabled: isKeyboardControlsEnabled,
     dropIndicator: dropIndicator,
-    isReOrderLoading: isReOrderLoading
+    isReOrderLoading: isReOrderLoading,
+    clientScripts: clientScripts
   }));
 }
 

package/es/library/dot/components/table-list/frameworks/ui/css/TableList.module.css

@@ -137,17 +137,18 @@
 }
 
 .loader {
-    padding: var(--zd_size40) 0 
+    padding: 40px 0
 }
 
 .wrapper {
-    height: 100% ;
-    width: 100% ;
+    height: 100%;
+    width: 100%;
+    z-index: 1;
     position: relative
 }
 
 .resizerSpace {
-    width: calc(var(--local_table_resizer_extra_space, 0) * var(--zd_size1));
+    width: calc(var(--local_table_resizer_extra_space, 0) * 1px);
     flex-shrink: 0
 }
 
@@ -156,32 +157,32 @@
 }
 
 [dir=ltr] .contentWrapper {
-    left: 0 ;
+    left: 0;
 }
 
 [dir=rtl] .contentWrapper {
-    right: 0 ;
+    right: 0;
 }
 
 .initialLoading {
-    height: calc(100% - (var(--zd_size100)))
+    height: calc(100% - 100px)
 }
 
 .emptyContent {
-    padding: var(--zd_size160) 0 var(--zd_size60) 
+    padding: 160px 0 60px
 }
 
 .errorContent {
-    padding: var(--zd_size60) 0 
+    padding: 60px 0
 }
 
 .headerWithActions,
 .fieldWithActions {
-    gap: var(--zd_size6) 
+    gap: 6px
 }
 
 .actions {
-    gap: var(--zd_size8) 
+    gap: 8px
 }
 
 .rowCursor_default {
@@ -249,8 +250,8 @@
 }
 
 .rowDropIndicator {
-    width: 100% ;
-    height: var(--zd_size2) ;
+    width: 100%;
+    height: 2px;
     /* css:theme-validation:ignore */
     position: absolute;
     z-index: 2;
@@ -258,11 +259,11 @@
 }
 
 .dropIndicatorTop {
-    top: 0 ;
+    top: 0;
 }
 
 .dropIndicatorBottom {
-    bottom: calc( var(--zd_size3) * -1 ) ;
+    bottom: -3px;
 }
 
 .row {

package/es/library/dot/components/table-list/frameworks/ui/sub-components/ErrorState.js

@@ -1,9 +1,7 @@
 import React from 'react';
+import ErrorTypes from "../../../../../../../cc/error-state/ErrorTypes";
 import Flex from '@zohodesk/layout/es/Flex/Flex';
-import ErrorOopsSomethingMiss from '@zohodesk/dot/es/version2/errorstate/OopsSomethingMiss/OopsSomethingMiss'; // import RequestUrlNotFound from '@zohodesk/dot/es/version2/errorstate/UrlNotFound/UrlNotFound';
-// import UnableToProcess from '@zohodesk/dot/es/version2/errorstate/UnableToProcessRequest/UnableToProcessRequest';
-// import Inconvenience from '@zohodesk/dot/es/version2/errorstate/Inconvenience/Inconvenience';
-
+import CommonErrorState from "../../../../../legacy-to-new-arch/error-state/frameworks/ui/ErrorState";
 /* @ts-ignore */
 
 import style from "../css/TableList.module.css";
@@ -18,9 +16,8 @@ export default function ErrorState(_ref) {
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
       $ui_className: `${style.contentWrapper} ${style.errorContent}`
-    }, /*#__PURE__*/React.createElement(ErrorOopsSomethingMiss, {
-      title: "Oops! Something is missing",
-      description: "We are unable to process your request. Please try again later."
+    }, /*#__PURE__*/React.createElement(CommonErrorState, {
+      type: ErrorTypes.OopsSomethingMiss
     }));
   }
 

package/es/library/dot/components/table-list/frameworks/ui/sub-components/Header.js

@@ -24,7 +24,8 @@ function Header(_ref) {
     hasRowActions,
     rowActionsColumnWidth,
     headers,
-    dispatch
+    dispatch,
+    clientScripts
   } = _ref;
 
   if (headers.length <= 0) {
@@ -43,13 +44,14 @@ function Header(_ref) {
     customStyle: {
       tableHeader: `${style.header} ${style[headerClasses]}`
     }
-  }, /*#__PURE__*/React.createElement(TableHeaderRow, null, renderReOrderColumn(isReorderEnabled), rendermassAction(isSelectionEnabled, actions), renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
+  }, /*#__PURE__*/React.createElement(TableHeaderRow, null, renderReOrderColumn(isReorderEnabled), rendermassAction(isSelectionEnabled, actions, clientScripts), renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch, clientScripts), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
 }
 
-function rendermassAction(isSelectionEnabled, actions) {
+function rendermassAction(isSelectionEnabled, actions, clientScripts) {
   return /*#__PURE__*/React.createElement(MassAction, {
     isSelectionEnabled: isSelectionEnabled,
-    actions: actions
+    actions: actions,
+    clientScripts: clientScripts
   });
 }
 
@@ -65,13 +67,14 @@ function renderReOrderColumn(isReorderEnabled) {
   }, /*#__PURE__*/React.createElement(React.Fragment, null));
 }
 
-function renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch) {
+function renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch, clientScripts) {
   return /*#__PURE__*/React.createElement(Headers, {
     headers: headers,
     currentlyResizingColumn: currentlyResizingColumn,
     isResizerEnabled: isResizerEnabled,
     isFlexibleColumns: isFlexibleColumns,
-    dispatch: dispatch
+    dispatch: dispatch,
+    clientScripts: clientScripts
   });
 }