chayns-api 1.0.9 → 1.0.10-beta.1

package/dist/cjs/hooks/useEnvironment.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useEnvironment = void 0;
 var _useContextSelector = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useEnvironment = () => (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsContext, v => v === null || v === void 0 ? void 0 : v.environment);
 exports.useEnvironment = useEnvironment;

package/dist/cjs/hooks/useFunctions.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useFunctions = void 0;
 var _useContextSelector = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useFunctions = () => {
   const t = (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsFunctionsContext, f => f || {});

package/dist/cjs/hooks/useIsAdminMode.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useIsAdminMode = void 0;
 var _useContextSelector2 = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useIsAdminMode = () => {
   var _useContextSelector;

package/dist/cjs/hooks/useLanguage.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useLanguage = void 0;
 var _useContextSelector = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useLanguage = () => (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsContext, v => v === null || v === void 0 ? void 0 : v.language);
 exports.useLanguage = useLanguage;

package/dist/cjs/hooks/usePages.js

@@ -7,8 +7,8 @@ exports.usePages = exports.usePage = exports.getPage = void 0;
 var _useContextSelector = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
 var _ChaynsProvider = require("../components/ChaynsProvider");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const usePages = ({
   siteId
@@ -21,8 +21,8 @@ const usePages = ({
   }
   return pages;
 };
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 exports.usePages = usePages;
 const usePage = ({

package/dist/cjs/hooks/useParameters.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useParameters = void 0;
 var _useContextSelector = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useParameters = () => (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsContext, v => (v === null || v === void 0 ? void 0 : v.parameters) || []);
 exports.useParameters = useParameters;

package/dist/cjs/hooks/useSite.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useSite = void 0;
 var _useContextSelector = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useSite = () => (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsContext, v => v === null || v === void 0 ? void 0 : v.site);
 exports.useSite = useSite;

package/dist/cjs/hooks/useUser.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useUser = void 0;
 var _useContextSelector = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useUser = () => (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsContext, v => (v === null || v === void 0 ? void 0 : v.user) || {});
 exports.useUser = useUser;

package/dist/cjs/hooks/useValues.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useValues = void 0;
 var _useContextSelector = require("use-context-selector");
 var _ChaynsContext = require("../components/ChaynsContext");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useValues = () => {
   const t = (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsContext, v => v || {});

package/dist/cjs/hooks/windowMetricsListener.js

@@ -8,8 +8,8 @@ var _useContextSelector = require("use-context-selector");
 var _react = require("react");
 var _ChaynsContext = require("../components/ChaynsContext");
 var _IChaynsReact = require("../types/IChaynsReact");
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 const useWindowMetricsListener = () => {
   const addListener = (0, _useContextSelector.useContextSelector)(_ChaynsContext.ChaynsFunctionsContext, v => v.addWindowMetricsListener);
@@ -24,8 +24,8 @@ const useWindowMetricsListener = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 };
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 exports.useWindowMetricsListener = useWindowMetricsListener;
 const useWindowMetrics = ({

package/dist/cjs/host/ChaynsHost.js

@@ -28,7 +28,8 @@ const ChaynsHost = ({
   parameters,
   customData,
   environment,
-  preventStagingReplacement
+  preventStagingReplacement,
+  dialog
 }) => {
   switch (type) {
     case 'client-iframe':
@@ -47,7 +48,8 @@ const ChaynsHost = ({
         parameters: parameters,
         environment: environment,
         customData: customData,
-        preventStagingReplacement: preventStagingReplacement
+        preventStagingReplacement: preventStagingReplacement,
+        dialog: dialog
       });
     case 'client-module':
       return /*#__PURE__*/_react.default.createElement(_ModuleHost.default, {
@@ -83,7 +85,8 @@ const ChaynsHost = ({
         parameters: parameters,
         environment: environment,
         customData: customData,
-        preventStagingReplacement: preventStagingReplacement
+        preventStagingReplacement: preventStagingReplacement,
+        dialog: dialog
       });
     case 'server-module':
       return /*#__PURE__*/_react.default.createElement(_ModuleHost.default, {

package/dist/cjs/host/iframe/HostIframe.js

@@ -30,7 +30,8 @@ const HostIframe = ({
   parameters,
   environment,
   customData,
-  preventStagingReplacement
+  preventStagingReplacement,
+  dialog
 }) => {
   const eventTarget = (0, _react.useRef)();
   const ref = (0, _react.useRef)();
@@ -56,7 +57,8 @@ const HostIframe = ({
     language,
     parameters,
     environment,
-    customData
+    customData,
+    dialog
   };
   // endregion
 
@@ -68,7 +70,7 @@ const HostIframe = ({
       if (postForm) {
         var _await$functions$getA;
         const accessToken = (_await$functions$getA = await functions.getAccessToken()) !== null && _await$functions$getA !== void 0 ? _await$functions$getA : {};
-        void (0, _postIframeForm.default)((0, _url.replaceStagingUrl)(preventStagingReplacement, src, environment.runtimeEnvironment), JSON.stringify({
+        void (0, _postIframeForm.default)((0, _url.replaceStagingUrl)(preventStagingReplacement, src, environment.buildEnvironment), JSON.stringify({
           ...initialData,
           pages: undefined,
           ...accessToken
@@ -116,6 +118,7 @@ const HostIframe = ({
   (0, _useUpdateData.default)(eventTarget.current, 'parameters', parameters);
   (0, _useUpdateData.default)(eventTarget.current, 'environment', environment);
   (0, _useUpdateData.default)(eventTarget.current, 'customData', customData);
+  (0, _useUpdateData.default)(eventTarget.current, 'dialog', dialog);
   // endregion
 
   return /*#__PURE__*/_react.default.createElement("iframe", _extends({

package/dist/cjs/types/IChaynsReact.js

@@ -3,7 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TappEvent = exports.SharingApp = exports.ScreenSize = exports.ScanQrCodeCodeType = exports.ScanQrCodeCameraTypes = exports.RuntimeEnviroment = exports.Language = exports.IconType = exports.Gender = exports.Font = exports.FloatingButtonPosition = exports.Environment = exports.DeviceOs = exports.ColorMode = exports.BrowserName = exports.AppName = exports.AccessMode = void 0;
+exports.TappEvent = exports.SharingApp = exports.ScreenSize = exports.ScanQrCodeCodeType = exports.ScanQrCodeCameraTypes = exports.RuntimeEnviroment = exports.Language = exports.IconType = exports.Gender = exports.Font = exports.FloatingButtonPosition = exports.Environment = exports.DialogType = exports.DialogButtonType = exports.DeviceOs = exports.ColorMode = exports.BrowserName = exports.AppName = exports.AccessMode = void 0;
+let DialogButtonType;
+exports.DialogButtonType = DialogButtonType;
+(function (DialogButtonType) {
+  DialogButtonType[DialogButtonType["OK"] = 1] = "OK";
+  DialogButtonType[DialogButtonType["CANCEL"] = -1] = "CANCEL";
+  DialogButtonType[DialogButtonType["NEGATIVE"] = 0] = "NEGATIVE";
+})(DialogButtonType || (exports.DialogButtonType = DialogButtonType = {}));
 let ScreenSize;
 exports.ScreenSize = ScreenSize;
 (function (ScreenSize) {
@@ -258,4 +265,17 @@ var selectType;
 (function (selectType) {
   selectType[selectType["DEFAULT"] = 0] = "DEFAULT";
   selectType[selectType["ICON"] = 1] = "ICON";
-})(selectType || (selectType = {}));
+})(selectType || (selectType = {}));
+let DialogType;
+exports.DialogType = DialogType;
+(function (DialogType) {
+  DialogType["ALERT"] = "alert";
+  DialogType["CONFIRM"] = "confirm";
+  DialogType["DATE"] = "date";
+  DialogType["FILE_SELECT"] = "fileSelect";
+  DialogType["IFRAME"] = "iframe";
+  DialogType["MODULE"] = "module";
+  DialogType["INPUT"] = "input";
+  DialogType["SELECT"] = "select";
+  DialogType["TOAST"] = "toast";
+})(DialogType || (exports.DialogType = DialogType = {}));

package/dist/cjs/util/deviceHelper.js

@@ -35,7 +35,7 @@ const getDeviceInfo = (userAgent, acceptHeader) => {
   result.accessToken = undefined; // TODO
   result.os = parsedUA === null || parsedUA === void 0 ? void 0 : parsedUA.os;
   if (typeof window !== 'undefined') {
-    result.screenSize = getScreenSize(window.innerWidth);
+    result.screenSize = getScreenSize(window.innerWidth, window.innerHeight);
   } else {
     // estimate size over user agent, very inaccurate, could be improved by setting a cookie with the screensize
     const screenSizeByUA = /mobi/i.test(userAgent) ? _IChaynsReact.ScreenSize.SM : _IChaynsReact.ScreenSize.XL;
@@ -49,15 +49,16 @@ const getClientDeviceInfo = () => ({
   isTouch: navigator.maxTouchPoints > 0 && window.matchMedia('(pointer: coarse)')
 });
 exports.getClientDeviceInfo = getClientDeviceInfo;
-const getScreenSize = width => {
+const getScreenSize = (width, height) => {
+  const size = Math.max(width, height);
   let value;
-  if (width > 1200) {
+  if (size > 1200) {
     value = _IChaynsReact.ScreenSize.XL;
-  } else if (width > 993) {
+  } else if (size > 993) {
     value = _IChaynsReact.ScreenSize.LG;
-  } else if (width > 769) {
+  } else if (size > 769) {
     value = _IChaynsReact.ScreenSize.MD;
-  } else if (width > 556) {
+  } else if (size > 556) {
     value = _IChaynsReact.ScreenSize.SM;
   } else {
     value = _IChaynsReact.ScreenSize.XS;

package/dist/cjs/wrapper/AppWrapper.js

@@ -17,6 +17,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* eslint-disable */
 // @ts-nocheck
 
+let appWrapperDialogId = 0;
 class AppWrapper {
   values = null;
   accessToken = '';
@@ -98,6 +99,12 @@ class AppWrapper {
   notImplemented(call) {
     console.warn(`call ${call} not implement in app`);
   }
+  dispatchDialogChange(detail) {
+    this.dialogs = detail;
+    this.dialogEventTarget.dispatchEvent(new CustomEvent('change', {
+      detail
+    }));
+  }
   counter = 0;
   appCall(action, value = {}, {
     callback,
@@ -465,8 +472,51 @@ class AppWrapper {
       void this.appCall(19, value, {
         awaitResult: false
       });
+    },
+    openDialog: async (...args) => {
+      return this.openDialog(...args);
+    },
+    createDialog: config => {
+      return {
+        close: async value => {
+          this.dialogs.find(x => x.dialogId === dialogId).eventTarget.dispatchEvent(new CustomEvent('close', {
+            detail: data
+          }));
+        },
+        open: async () => {
+          return await this.openDialog(config);
+        }
+      };
+    },
+    closeDialog: (dialogId, data) => {
+      try {
+        this.dialogs.find(x => x.dialogId === dialogId).eventTarget.dispatchEvent(new CustomEvent('requestClose', {
+          detail: data
+        }));
+      } catch (e) {
+        console.error(e);
+      }
     }
   };
+  async openDialog(config) {
+    const currentDialogId = appWrapperDialogId;
+    const res = await new Promise(resolve => {
+      const eventTarget = new EventTarget();
+      this.dispatchDialogChange([...(this.dialogs || []), {
+        config,
+        resolve,
+        dialogId: appWrapperDialogId++,
+        eventTarget
+      }]);
+    });
+    this.dispatchDialogChange(this.dialogs.filter(x => x.dialogId !== currentDialogId));
+    return res;
+  }
+  dialogs = [];
+  dialogEventTarget = new EventTarget();
+  getDialogEventTarget() {
+    return this.dialogEventTarget;
+  }
   async init() {
     this.values = this.mapOldApiToNew(await this.appCall(18));
     return undefined;
@@ -484,5 +534,14 @@ class AppWrapper {
   getInitialData() {
     return this.values;
   }
+  createDialog(config) {
+    return {
+      close: () => {},
+      open: async () => {
+        const dialog = await functions.openDialog(config);
+        return dialog;
+      }
+    };
+  }
 }
 exports.AppWrapper = AppWrapper;

package/dist/cjs/wrapper/FrameWrapper.js

@@ -233,7 +233,22 @@ class FrameWrapper {
     scrollByY: async (value, duration) => {
       if (!this.initialized) await this.ready;
       return this.exposedFunctions.scrollByY(value, duration);
-    }
+    },
+    createDialog: config => {
+      return {
+        close: async (buttonType, data) => {
+          await this.exposedFunctions.closeDialog(buttonType, data);
+        },
+        open: async () => {
+          return await this.exposedFunctions.openDialog(config);
+        }
+      };
+    },
+    closeDialog: async (buttonType, value) => {
+      if (!this.initialized) await this.ready;
+      return this.exposedFunctions.closeDialog(buttonType, value);
+    },
+    openDialog: async value => {}
   };
   initialized = false;
   constructor() {

package/dist/cjs/wrapper/ModuleFederationWrapper.js

@@ -24,6 +24,17 @@ class ModuleFederationWrapper {
       // eslint-disable-next-line
       this.functions[k] = async (...args) => fn(...args);
     });
+    this.functions.createDialog = config => {
+      return {
+        close: (buttonType, data) => {
+          return functions.closeDialog(buttonType, data);
+        },
+        open: async () => {
+          const dialog = await functions.openDialog(config);
+          return dialog;
+        }
+      };
+    };
     this.functions.addWindowMetricsListener = async callback => {
       const {
         id,

package/dist/esm/calls/dialogs/date.js

@@ -3,32 +3,32 @@ import { isDate, isNumber, isObject } from './utils/is';
 import { open } from './open';
 import { getDevice } from "../index";
 
-/**
- * The config object for date dialog
- * @typedef {Object} dateConfig
- * @property {Date} preSelect  - The date object which should be preselected.
- * @property {Date} minDate   - The min date which you could select.
- * @property {Date} maxDate  - The max date which you could select.
- * @property {dateDialogType} dateType  - The type of dialog you want to display.
- * @property {number} minuteIntervall - The interval for special minutes, possible are 2, 3, 4, 5, 6, 12, 15, 20, 30. Default is 1.
- * @property {string} message - The message that is displayed above the date dialog, only in apps supported
- * @property {string} title - The title that is displayed above the message, only in apps supported
+/**
+ * The config object for date dialog
+ * @typedef {Object} dateConfig
+ * @property {Date} preSelect  - The date object which should be preselected.
+ * @property {Date} minDate   - The min date which you could select.
+ * @property {Date} maxDate  - The max date which you could select.
+ * @property {dateDialogType} dateType  - The type of dialog you want to display.
+ * @property {number} minuteIntervall - The interval for special minutes, possible are 2, 3, 4, 5, 6, 12, 15, 20, 30. Default is 1.
+ * @property {string} message - The message that is displayed above the date dialog, only in apps supported
+ * @property {string} title - The title that is displayed above the message, only in apps supported
  */
 
-/**
- * This call will open a date select dialog.
- * <div>Call: 30</div>
- * @param {dateConfig} config - Define the configuration of this call
- * @return {Promise} contains a timestamp as result
- * @example chayns.dialog.date({
- *  'dateType': chayns.dialog.dateType.DATE_TIME,
- *  'preSelect': new Date(2018, 6, 14, 0, 0, 0),
- *  'minDate':  new Date(2018, 6, 1, 15, 0, 0),
- *  'maxDate': new Date(2019, 6, 1, 0, 23, 0),
- *  'minuteInterval': 15
- * ).then(function (data) {
- *  console.log(data);
- * });
+/**
+ * This call will open a date select dialog.
+ * <div>Call: 30</div>
+ * @param {dateConfig} config - Define the configuration of this call
+ * @return {Promise} contains a timestamp as result
+ * @example chayns.dialog.date({
+ *  'dateType': chayns.dialog.dateType.DATE_TIME,
+ *  'preSelect': new Date(2018, 6, 14, 0, 0, 0),
+ *  'minDate':  new Date(2018, 6, 1, 15, 0, 0),
+ *  'maxDate': new Date(2019, 6, 1, 0, 23, 0),
+ *  'minuteInterval': 15
+ * ).then(function (data) {
+ *  console.log(data);
+ * });
  */
 
 export function date() {
@@ -165,18 +165,18 @@ export function advancedDate() {
   });
 }
 
-/**
- * @typedef {number} dateDialogType
+/**
+ * @typedef {number} dateDialogType
  */
 
-/**
- * Enum for date dialog
- * <div>DATE will open a dialog where you can select a special day</div>
- * <div>TIME will open a dialog where you can only select a special time</div>
- * <div>DATE_TIME will open a dialog where you can select a special time on a special day</div>
- * @readonly
- * @enum {dateDialogType}
- * @type {{DATE: number, TIME: number, DATE_TIME: number}}
+/**
+ * Enum for date dialog
+ * <div>DATE will open a dialog where you can select a special day</div>
+ * <div>TIME will open a dialog where you can only select a special time</div>
+ * <div>DATE_TIME will open a dialog where you can select a special time on a special day</div>
+ * @readonly
+ * @enum {dateDialogType}
+ * @type {{DATE: number, TIME: number, DATE_TIME: number}}
  */
 export const dateType = {
   'DATE': 1,