@zohodesk/library-platform 1.1.10-temp-1 → 1.1.11

package/es/library/behaviours/clip-wrap/applications/usecases/DestructUsecase.js

@@ -0,0 +1,15 @@
+import AbstractUseCase from "./AbstractUseCase";
+
+class DestructUsecase extends AbstractUseCase {
+  execute() {
+    const {
+      repository,
+      presenter
+    } = this.dependencies;
+    const textOverFlow = repository.getClipWrapEntity();
+    presenter.updateClipWrap(textOverFlow.toObject());
+  }
+
+}
+
+export default DestructUsecase;

package/es/library/behaviours/clip-wrap/applications/usecases/InitializeUsecase.js

@@ -0,0 +1,15 @@
+import AbstractUseCase from "./AbstractUseCase";
+
+class InitializeUsecase extends AbstractUseCase {
+  execute() {
+    const {
+      repository,
+      presenter
+    } = this.dependencies;
+    const textOverFlow = repository.getClipWrapEntity();
+    presenter.updateClipWrap(textOverFlow.toObject());
+  }
+
+}
+
+export default InitializeUsecase;

package/es/library/behaviours/clip-wrap/domain/entities/ClipWrap.js

@@ -0,0 +1,22 @@
+class ClipWrap {
+  constructor(value) {
+    this.value = value;
+  }
+
+  setValue(value) {
+    this.value = value;
+  }
+
+  getValue() {
+    return this.value;
+  }
+
+  toObject() {
+    return {
+      mode: this.value
+    };
+  }
+
+}
+
+export default ClipWrap;

package/es/library/behaviours/clip-wrap/domain/entities/interfaces/IClipWrap.js

@@ -0,0 +1 @@
+export {};

package/es/library/behaviours/clip-wrap/frameworks/ui/ActionsHandlerFactory.js

@@ -0,0 +1,28 @@
+import { TEXT_OVERFLOW_BEHAVIOUR_UPDATE_REQUESTED } from "../../../../../bc/clip-wrap/Constants";
+import ClipWrapController from "../../adapters/controllers/ClipWrap";
+import Repository from "../../adapters/gateway/Repository";
+import Service from "../../adapters/gateway/Service";
+import Presenter from "../../adapters/presenter/Presenter";
+import LifeCycleAction from "../../../../../cc/architecture/LifeCycleActionEnum";
+import InitializeController from "../../adapters/controllers/InitializeController";
+import DestructController from "../../adapters/controllers/DestructController"; // TODO: Rename as EventHandlersFactory
+
+class ActionsHandlersFactory {
+  static create() {
+    const presenter = new Presenter();
+    const repository = new Repository();
+    const service = new Service({
+      presenter,
+      repository
+    });
+    const controller = new ClipWrapController(service);
+    return {
+      [LifeCycleAction.MOUNT]: new InitializeController(service).handle,
+      [LifeCycleAction.UN_MOUNT]: new DestructController(service).handle,
+      [TEXT_OVERFLOW_BEHAVIOUR_UPDATE_REQUESTED]: controller.handle
+    };
+  }
+
+}
+
+export default ActionsHandlersFactory;

package/es/library/behaviours/clip-wrap/frameworks/ui/ClipWrapBehaviourFactory.js

@@ -0,0 +1,26 @@
+import properties from "../../../../../bc/clip-wrap/Properties";
+import ActionsHandlerFactory from "./ActionsHandlerFactory";
+
+class ClipWrapBehaviourFactory {
+  static create() {
+    return {
+      name: 'textOverflow',
+      setInitialState: _ref => {
+        let {
+          properties
+        } = _ref;
+        const {
+          textOverflowConfig
+        } = properties;
+        return {
+          mode: textOverflowConfig.mode || 'clip'
+        };
+      },
+      properties,
+      eventHandlers: ActionsHandlerFactory.create()
+    };
+  }
+
+}
+
+export default ClipWrapBehaviourFactory;

package/es/library/custom-component/adapters/gateways/event-manager/EventManager.js

@@ -55,10 +55,10 @@ class EventManager {
       metaData,
       type
     } = event;
-    this.log(type, payload, metaData);
+    __DEVELOPMENT__ && this.log(type, payload, metaData);
 
     if (!this._element) {
-      console.error('Error: Element `ref` not found!', this._element, type, {
+      __DEVELOPMENT__ && console.error('Error: Element `ref` not found!', this._element, type, {
         payload,
         metaData
       });
@@ -110,25 +110,28 @@ class EventManager {
 
   printEventPayloadSchemaInvalidError(eventName, error) {
     let dataName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '(root)';
-    const {
-      msg,
-      styles: nameStyles
-    } = this.eventNameConsoleStyle(eventName);
-    console.group(`${msg}%c's ${dataName} Validation Errors:`, ...nameStyles, 'color: initial; font-weight: initial');
-
-    if (error.code === ErrorCode.InvalidSchema) {
-      console.error(`%cInvalid Schema:`, 'color: #FF6F61; font-weight: bold;', error.error);
-    } else if (error.code === ErrorCode.InvalidData) {
-      error.errors.forEach((_ref, i) => {
-        let {
-          dataPath,
-          message
-        } = _ref;
-        console.error(`%c${i + 1}. %c${dataName + dataPath}%c → ${message}`, 'color: initial;', 'color: #FF6F61; font-weight: bold;', 'color: #FFA500;');
-      });
-    }
 
-    console.groupEnd(); // }
+    if (__DEVELOPMENT__) {
+      const {
+        msg,
+        styles: nameStyles
+      } = this.eventNameConsoleStyle(eventName);
+      console.group(`${msg}%c's ${dataName} Validation Errors:`, ...nameStyles, 'color: initial; font-weight: initial');
+
+      if (error.code === ErrorCode.InvalidSchema) {
+        console.error(`%cInvalid Schema:`, 'color: #FF6F61; font-weight: bold;', error.error);
+      } else if (error.code === ErrorCode.InvalidData) {
+        error.errors.forEach((_ref, i) => {
+          let {
+            dataPath,
+            message
+          } = _ref;
+          console.error(`%c${i + 1}. %c${dataName + dataPath}%c → ${message}`, 'color: initial;', 'color: #FF6F61; font-weight: bold;', 'color: #FFA500;');
+        });
+      }
+
+      console.groupEnd();
+    }
   }
 
   verifyEventPayload(event) {

package/es/library/custom-component/applications/usecases/UpdateStateUseCase.js

@@ -8,11 +8,9 @@ class UpdateStateUseCase extends AbstractUseCase {
       eventManager
     } = this.dependencies;
     let component = repository.getComponent();
-    let preState = component.getState(); // console.log(`preState ${component.getName()}`,preState)
-
+    let preState = component.getState();
     component.updateState(newState);
-    let state = component.getState(); // console.log(`newState ${component.getName()}`,state)
-
+    let state = component.getState();
     presenter.render(state);
     eventManager.dispatch(component.getStateUpdatedAction({
       state,

package/es/library/custom-component/domain/entities/ComponentProperties.js

@@ -43,7 +43,6 @@ export default class ComponentProperties {
     } = this.validateProperties(jsonValidator, newProps);
 
     if (!isValid) {
-      // console.log({ isValid, componentName: this.componentName, validationResults });
       throw {
         code: ErrorCodes.PROPERTY_VALIDATION_FAILED,
         message: `Properties validation failed for component ${this.componentName}`,

package/es/library/custom-component/domain/entities/Logger.js

@@ -12,55 +12,61 @@ export default class Logger {
 
 
   logPropertiesValidation(validationResults) {
-    console.group(`%cProperties Validation: %c${this.componentName}`, ERROR_PRIMARY, ERROR_SECONDARY, validationResults);
-    validationResults.forEach(_ref => {
-      let {
-        key,
-        errors,
-        warnings,
-        value
-      } = _ref;
-      errors?.forEach(error => {
-        this.printResult(key, error, 'error');
+    if (__DEVELOPMENT__) {
+      console.group(`%cProperties Validation: %c${this.componentName}`, ERROR_PRIMARY, ERROR_SECONDARY, validationResults);
+      validationResults.forEach(_ref => {
+        let {
+          key,
+          errors,
+          warnings,
+          value
+        } = _ref;
+        errors?.forEach(error => {
+          this.printResult(key, error, 'error');
+        });
+        warnings?.forEach(warning => {
+          this.printResult(key, warning, 'warning');
+        });
+        console.log('%cBut, Given is:', 'color: white;font-weight: bold;', {
+          [key]: value
+        });
       });
-      warnings?.forEach(warning => {
-        this.printResult(key, warning, 'warning');
-      });
-      console.log('%cBut, Given is:', 'color: white;font-weight: bold;', {
-        [key]: value
-      });
-    });
-    console.groupEnd();
+      console.groupEnd();
+    }
   }
 
   logError(error) {
-    console.log('Logging Error in ComponentProperties - logError');
+    if (__DEVELOPMENT__) {
+      console.log('Logging Error in ComponentProperties - logError');
 
-    if (error.code === ErrorCodes.PROPERTY_VALIDATION_FAILED) {
-      this.logPropertiesValidation(error.errorDetails?.validationResults);
-      return;
-    }
+      if (error.code === ErrorCodes.PROPERTY_VALIDATION_FAILED) {
+        this.logPropertiesValidation(error.errorDetails?.validationResults);
+        return;
+      }
 
-    console.group(`%cError Occurred: %c${this.componentName}`, ERROR_PRIMARY, ERROR_SECONDARY, error);
-    console.error(`%cError Code: %c${error.code}`, ERROR_PRIMARY, ERROR_SECONDARY);
-    console.error(`%cError Message: %c${error.message}`, ERROR_PRIMARY, ERROR_SECONDARY);
+      console.group(`%cError Occurred: %c${this.componentName}`, ERROR_PRIMARY, ERROR_SECONDARY, error);
+      console.error(`%cError Code: %c${error.code}`, ERROR_PRIMARY, ERROR_SECONDARY);
+      console.error(`%cError Message: %c${error.message}`, ERROR_PRIMARY, ERROR_SECONDARY);
 
-    if (error.errorDetails?.originalError) {
-      console.error(error.errorDetails.originalError);
-    }
+      if (error.errorDetails?.originalError) {
+        console.error(error.errorDetails.originalError);
+      }
 
-    console.groupEnd();
+      console.groupEnd();
+    }
   }
 
   printResult(key, errorOrWarning, type) {
-    const log = type === 'error' ? console.error : console.warn;
+    if (__DEVELOPMENT__) {
+      const log = type === 'error' ? console.error : console.warn;
 
-    if (errorOrWarning.dataPath) {
-      log(`Invalid Property %c${key}%c${errorOrWarning.dataPath} %c${errorOrWarning.message}`, ERROR_PRIMARY, ERROR_SECONDARY, 'color: white;');
-      return;
-    }
+      if (errorOrWarning.dataPath) {
+        log(`Invalid Property %c${key}%c${errorOrWarning.dataPath} %c${errorOrWarning.message}`, ERROR_PRIMARY, ERROR_SECONDARY, 'color: white;');
+        return;
+      }
 
-    log(`Invalid Property %c${key} : %c${errorOrWarning.message}`, ERROR_PRIMARY, 'color: white;');
+      log(`Invalid Property %c${key} : %c${errorOrWarning.message}`, ERROR_PRIMARY, 'color: white;');
+    }
   }
 
   eventNameConsoleStyle(type) {
@@ -81,7 +87,7 @@ export default class Logger {
   }
 
   logEvent(type, data) {
-    if (this.isLoggingEnabledAndTypePresent(type)) {
+    if (__DEVELOPMENT__ && this.isLoggingEnabledAndTypePresent(type)) {
       const {
         msg,
         styles: nameStyles

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

@@ -13,11 +13,11 @@ class ComponentRegistry {
 
   register(name, component) {
     if (this.components.has(name)) {
-      console.warn(`Component with name "${name}" is already registered. Overwriting the existing component.`);
+      __DEVELOPMENT__ && console.warn(`Component with name "${name}" is already registered. Overwriting the existing component.`);
     }
 
     if (this.components.has(name) && this.get(name) !== component) {
-      console.warn(`Component with name "${name}" is already registered with a different instance. Overwriting the existing component.`);
+      __DEVELOPMENT__ && console.warn(`Component with name "${name}" is already registered with a different instance. Overwriting the existing component.`);
     }
 
     this.components.set(name, component);

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

@@ -77,7 +77,7 @@ const createCustomComponent = input => {
     }
 
     componentDidCatch(error, errorInfo) {
-      console.log('Error', error, errorInfo, errorInfo.componentStack);
+      __DEVELOPMENT__ && console.log('Error', error, errorInfo, errorInfo.componentStack);
     }
 
     componentWillReceiveProps(nextProps, nextContext) {

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

@@ -9,10 +9,12 @@ import MoreDropdown from "../../../../legacy-to-new-arch/more-dropdown/framework
 import Breadcrumb from "../../../../legacy-to-new-arch/breadcrumb/frameworks/ui/Breadcrumb";
 import IconButton from "../../../../legacy-to-new-arch/icon-button/frameworks/ui/IconButton";
 import HighlightedValue from "../../../../legacy-to-new-arch/highlighted-value/frameworks/ui/HighlightedValue";
+import Switch from "../../../../legacy-to-new-arch/switch/frameworks/ui/Switch";
 import ListItem from "../../../../legacy-to-new-arch/list-item/frameworks/ui/ListItem";
 const ActionComponentMapping = {
   ['ActionIcon']: ActionIcon,
   ['Button']: Button,
+  ['Switch']: Switch,
   ['ListItem']: ListItem,
   ['MoreDropdown']: MoreDropdown,
   ['TableColumnSort']: TableColumnSort,

package/es/library/dot/components/form/frameworks/ui/DefaultComponentRegister.js

@@ -3,8 +3,8 @@ import ComponentRegistry from "../../../../../custom-component/frameworks/ui/Com
 import { TextArea, TextBox, Email, PickList, Currency, MultiSelect, Url, Percentage, Phone, Number, Decimal, Date, DateTime, Checkbox, LookUp } from "../../../form-fields";
 import Section from "../../../section/frameworks/ui/Section";
 import ActionIcon from "../../../../legacy-to-new-arch/action-icon/frameworks/ui/ActionIcon";
-import Button from "../../../../legacy-to-new-arch/button/frameworks/ui/Button";
-import SwitchField from "../../../../legacy-to-new-arch/table-field-components/switch-field/frameworks/ui/SwitchField";
+import Button from "../../../../legacy-to-new-arch/button/frameworks/ui/Button"; // import SwitchField from '@library/dot/legacy-to-new-arch/table-field-components/switch-field/frameworks/ui/SwitchField';
+
 export function registerDefaultComponents() {
   // Registering components in the ComponentRegistry
   // NOTE: This is a workaround to avoid dynamic imports
@@ -26,8 +26,8 @@ export function registerDefaultComponents() {
 
   ComponentRegistry.register('LookUp', LookUp);
   ComponentRegistry.register(DefaultFormSectionUIType, Section); // Add more components as needed
+  // ComponentRegistry.register('Switch', SwitchField);
 
-  ComponentRegistry.register('Switch', SwitchField);
   ComponentRegistry.register('Button', Button);
   ComponentRegistry.register('ActionIcon', ActionIcon);
 }

package/es/library/dot/components/form/frameworks/ui/FormView.js

@@ -21,7 +21,6 @@ function FormView(_ref, ref) {
     clientScripts
   } = state.viewModel;
   return /*#__PURE__*/React.createElement(Flex, {
-    $ui_tagName: "form",
     $ui_displayMode: "flex",
     $ui_direction: "column",
     $flag_fullsize: true,
@@ -37,7 +36,8 @@ function FormView(_ref, ref) {
   }), /*#__PURE__*/React.createElement(MiddleSection, {
     sections: sections,
     isLoading: isLoading,
-    rightPanel: rightPanel
+    rightPanel: rightPanel,
+    clientScripts: clientScripts
   }), /*#__PURE__*/React.createElement(Footer, {
     hasFooter: isFooterEnabled,
     footerLeftActions: footerLeftActions,

package/es/library/dot/components/form/frameworks/ui/css/Form.module.css

@@ -3,17 +3,17 @@
 }
 
 .field {
-    margin-top: var(--zd_size5) ;
+    margin-top: 5px;
 }
 
 .multiSelectField {
-    margin-top: var(--zd_size2) 
+    margin-top: 2px
 }
 
 .checkboxField {
     composes: dInflex alignFstart from '~@zohodesk/components/es/common/common.module.css';
-    max-width: 100% ;
-    gap: var(--zd_size8) 
+    max-width: 100%;
+    gap: 8px
 }
 
 .cursor_pointer {
@@ -27,36 +27,36 @@
 }
 
 [dir=ltr] .footer {
-    padding-right: var(--zd_size32) 
+    padding-right: 32px
 }
 
 [dir=rtl] .footer {
-    padding-left: var(--zd_size32) 
+    padding-left: 32px
 }
 
 /* Sections layout */
 
 .sectionsWrapper {
-    padding-bottom: var(--zd_size8) 
+    padding-bottom: 8px
 }
 
 .sectionsLayout, .sectionsTwoLayout {
-    margin: 0 auto 
+    margin: 0 auto
 }
 
 .sectionsLayout {
-    max-width: var(--local-form-layout-max-width, var(--zd_size1080))
+    max-width: var(--local-form-layout-max-width, 1080px)
 }
 
 .sectionsTwoLayout {
-    column-gap: var(--zd_size8) ;
-    max-width: var(--local-form-layout-max-width, var(--zd_size1210))
+    column-gap: 8px;
+    max-width: var(--local-form-layout-max-width, 1210px)
 }
 
 .rightPanel {
     height: var(--local-form-right-panel-height, 100%);
     position: -webkit-sticky;
     position: sticky;
-    top: 0 ;
-    padding: var(--zd_size8) 0 
+    top: 0;
+    padding: 8px 0
 }

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

@@ -7,7 +7,8 @@ export default function MiddleSection(_ref) {
   let {
     sections,
     isLoading,
-    rightPanel
+    rightPanel,
+    clientScripts
   } = _ref;
   return /*#__PURE__*/React.createElement(MiddleContainer, {
     $flag_padding: true,
@@ -19,6 +20,7 @@ export default function MiddleSection(_ref) {
   }) : /*#__PURE__*/React.createElement(SectionsLayout, {
     rightPanel: rightPanel
   }, /*#__PURE__*/React.createElement(Sections, {
-    sections: sections
+    sections: sections,
+    clientScripts: clientScripts
   })));
 }

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

@@ -5,7 +5,8 @@ import SectionsWrapper from '@zohodesk-private/desk-components/es/form/SectionsW
 import style from "../css/Form.module.css";
 export default function Sections(_ref) {
   let {
-    sections
+    sections,
+    clientScripts
   } = _ref;
   return /*#__PURE__*/React.createElement(SectionsWrapper, {
     $ui_className: style.sectionsWrapper
@@ -19,6 +20,8 @@ export default function Sections(_ref) {
       isVisible,
       fields,
       type,
+      titleActions,
+      headerActions,
       additionalDetails
     } = section;
     const Section = ComponentRegistry.get(type);
@@ -31,7 +34,10 @@ export default function Sections(_ref) {
       description: description,
       fields: fields,
       isCollapsed: isCollapsed,
-      additionalDetails: additionalDetails
+      titleActions: titleActions,
+      headerActions: headerActions,
+      additionalDetails: additionalDetails,
+      clientScripts: clientScripts
     });
   }));
 }

package/es/library/dot/components/form-fields/checkbox/frameworks/ui/CheckboxView.js

@@ -34,7 +34,8 @@ function CheckboxView(_ref2, ref) {
     disabled,
     readonly,
     required,
-    labelActions
+    labelActions,
+    clientScripts
   } = state.properties;
   const {
     size,
@@ -74,7 +75,8 @@ function CheckboxView(_ref2, ref) {
     for: id,
     label: label,
     actions: labelActions,
-    isMandatory: required
+    isMandatory: required,
+    clientScripts: clientScripts
   })));
 }
 

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

@@ -26,7 +26,8 @@ function CurrencyView(_ref, ref) {
     currencySymbol,
     labelActions,
     actions,
-    uiConfig
+    uiConfig,
+    clientScripts
   } = properties;
   const {
     size,
@@ -56,7 +57,8 @@ function CurrencyView(_ref, ref) {
     disabled: disabled,
     readonly: readonly,
     required: required,
-    actions: actions
+    actions: actions,
+    clientScripts: clientScripts
   })));
 }
 

package/es/library/dot/components/form-fields/date/frameworks/ui/DateView.js

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

package/es/library/dot/components/form-fields/datetime/frameworks/ui/DateTimeView.js

@@ -18,7 +18,8 @@ function DateView(_ref, ref) {
     required,
     uiConfig,
     labelActions,
-    actions
+    actions,
+    clientScripts
   } = state.properties;
   const {
     size,
@@ -43,7 +44,8 @@ function DateView(_ref, ref) {
     disabled: disabled,
     readonly: readonly,
     actions: actions,
-    isTimeInculded: true
+    isTimeIncluded: true,
+    clientScripts: clientScripts
   })));
 }
 

package/es/library/dot/components/form-fields/decimal/frameworks/ui/DecimalView.js

@@ -19,7 +19,8 @@ function DecimalView(_ref, ref) {
     required,
     uiConfig,
     labelActions,
-    actions
+    actions,
+    clientScripts
   } = state.properties;
   const {
     size,
@@ -44,7 +45,8 @@ function DecimalView(_ref, ref) {
     required: required,
     disabled: disabled,
     readonly: readonly,
-    actions: actions
+    actions: actions,
+    clientScripts: clientScripts
   })));
 }
 

package/es/library/dot/components/form-fields/email/frameworks/ui/EmailView.js

@@ -19,7 +19,8 @@ function EmailView(_ref, ref) {
     required,
     uiConfig,
     labelActions,
-    actions
+    actions,
+    clientScripts
   } = state.properties;
   const {
     size,
@@ -44,7 +45,8 @@ function EmailView(_ref, ref) {
     disabled: disabled,
     readonly: readonly,
     required: required,
-    actions: actions
+    actions: actions,
+    clientScripts: clientScripts
   })));
 }
 

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/lookup/frameworks/ui/LookupView.js

@@ -19,7 +19,8 @@ function TextBoxView(_ref, ref) {
     required,
     uiConfig,
     labelActions,
-    actions
+    actions,
+    clientScripts
   } = state.properties;
   const {
     size,
@@ -44,7 +45,8 @@ function TextBoxView(_ref, ref) {
     required: required,
     disabled: disabled,
     readonly: readonly,
-    actions: actions
+    actions: actions,
+    clientScripts: clientScripts
   })));
 }