@everymatrix/cashier-method-details 1.29.4 → 1.29.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/cashier-method-details",
-  "version": "1.29.4",
+  "version": "1.29.5",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "70873f2feed3be9c071d9ad09343a833b236b4fc"
+  "gitHead": "f2e3f1edbe2a15979fd224f987ea52d179bb95f0"
 }

package/src/CashierMethodDetails.svelte

@@ -17,8 +17,6 @@
   import FlatpickrLanguages from "flatpickr/dist/l10n";
   import dayjs from 'dayjs';
   import customParseFormat from 'dayjs/plugin/customParseFormat';
-  import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
-  import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
   import type {PaymentMethod} from "./CashierMethodDetails.types";
   export class PaymentMethodDetails {
     name: string;
@@ -394,8 +392,6 @@
     window.addEventListener('closeCashierReceiptPage', closeReceiptPage, false);
     document.addEventListener('click',closeAllLookups);
     dayjs.extend(customParseFormat);
-    dayjs.extend(isSameOrBefore);
-    dayjs.extend(isSameOrAfter);
 
     return () => {
       window.removeEventListener('closeModal', closeModal);
@@ -702,7 +698,7 @@
     const inputValue = dayjs(value, format); 
     const maxValue = dayjs(field.maxValue, format);
     const minValue = dayjs(field.minValue, format);
-    if (inputValue.isSameOrBefore(minValue) || inputValue.isSameOrAfter(maxValue)) {
+    if (inputValue.isBefore(minValue) || inputValue.isAfter(maxValue)) {
       fieldValidation[field.name] = $_('invalidFieldError',{ values: { field: field.label }})
       return;
     }
@@ -793,7 +789,8 @@
                              on:input="{() => { validateField(field) }}"
                              on:blur="{() => { showError[field.name] = true; validateField(field) }}">
                     {:else if field.type === FieldTypes.Time || field.type === FieldTypes.Date || field.type === FieldTypes.DateTime}
-                      <input type="text" bind:value={ prepareFields[field.name] } pattern={field.format}
+                    <div class="DateInput">
+                      <input class="DateTimePicker" type="text" bind:value={ prepareFields[field.name] } pattern={field.format}
                              data-field={JSON.stringify(field)}
                              placeholder={field.placeholder}
                              on:input={() => { showError[field.name] = true; dateTimeValidation(field) }}
@@ -801,6 +798,10 @@
                              on:blur={() => { showError[field.name] = true; dateTimeValidation(field) }}
                              bind:this={flatpickrEl[flatpickrEl.length]}
                       >
+                      {#if isMobile(userAgent)}
+                      <div class="MobileDateInput">{prepareFields[field.name]}</div>
+                      {/if}
+                    </div>
                     {:else if field.type === FieldTypes.Number || field.type === FieldTypes.Money}
                       <input type="number" placeholder="{field.placeholder}" bind:value={prepareFields[field.name]}
                              on:input="{() => { validateField(field) }}"
@@ -976,12 +977,16 @@
     margin: 0;
   }
 
+  input::-webkit-date-and-time-value {
+    visibility: hidden;
+  }
+  
   input[type=number] {
     -moz-appearance: textfield;
   }
   .CashierMethodDetails {
     width: 100%;
-    height: 100%;
+    height: inherit;
     container-name: method-details;
     container-type: inline-size;
   }
@@ -1279,6 +1284,19 @@
         display: block;
       }
     }
+}
+  .DateInput {
+    position: relative;
+  }
+  .MobileDateInput {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);    
+    left: 15px;
+  }
+  .DateTimePicker {
+    width: -webkit-fill-available;
+    width: -moz-available;
   }
   .CustomSelect {
     width: 100%;
@@ -1341,11 +1359,21 @@
       text-overflow: ellipsis;
     }
     
-    label, input, .Description, .FormLogo .ChangePaymeth {
+    label, input, .Description, .FormLogo .ChangePaymeth, .OptionList div {
       font-size: var(--emw--font-size-x-small, 12px);
     }
     .SelectedMethodDescription, .AmountLimits {
       font-size: var(--emw--font-size-2x-small, 10px);
     }
-  }
+
+    .DateTimePicker {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      font-size: inherit;
+      background: none;
+      width: -webkit-fill-available;
+      font-size: 0;
+      width: -moz-available;
+    }
+}
 </style>