@expressms/smartapp-ui 1.1.4 → 1.1.5

package/build/main/assets/icons/clear.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_690_22198)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99991 8.67417L13.9774 4.6967C14.3435 4.33058 14.9371 4.33058 15.3032 4.6967C15.6693 5.06282 15.6693 5.65641 15.3032 6.02252L11.3257 10L15.3032 13.9775C15.6693 14.3436 15.6693 14.9372 15.3032 15.3033C14.9371 15.6694 14.3435 15.6694 13.9774 15.3033L9.99991 11.3258L6.02244 15.3033C5.65632 15.6694 5.06273 15.6694 4.69661 15.3033C4.33049 14.9372 4.33049 14.3436 4.69661 13.9775L8.67409 10L4.69661 6.02252C4.33049 5.65641 4.33049 5.06282 4.69661 4.6967C5.06273 4.33058 5.65632 4.33058 6.02244 4.6967L9.99991 8.67417Z" fill="#4799E3"/>
+</g>
+<defs>
+<clipPath id="clip0_690_22198">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/build/main/constants/constants.d.ts

@@ -12,6 +12,7 @@ export declare const DEFAULT_BACKGROUND_BUTTON_COLOR = "#FFFFFF";
 export declare const DEFAULT_POPUP_BACKGROUND_COLOR = "rgba(37, 77, 145, 0.2)";
 export declare const INPUT_TYPE_PASSWORD = "password";
 export declare const INPUT_TYPE_TEXT = "text";
+export declare const ENTER_KEY = "Enter";
 export declare enum FONT_SIZE {
     small = "14px",
     default = "16px",

package/build/main/constants/constants.js

@@ -12,6 +12,7 @@ export var DEFAULT_BACKGROUND_BUTTON_COLOR = '#FFFFFF';
 export var DEFAULT_POPUP_BACKGROUND_COLOR = 'rgba(37, 77, 145, 0.2)';
 export var INPUT_TYPE_PASSWORD = 'password';
 export var INPUT_TYPE_TEXT = 'text';
+export var ENTER_KEY = 'Enter';
 export var FONT_SIZE;
 (function (FONT_SIZE) {
     FONT_SIZE["small"] = "14px";

package/build/main/styles/stories.module.scss

@@ -808,21 +808,23 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
     position: relative;
 
     &--field {
-      padding: 12px 16px;
+      padding: 13px 16px;
       border: 1px solid $color-lightest-gray;
       border-radius: 8px;
       font-weight: 400;
-      font-size: 14px;
-      line-height: 19px;
       color: $color-black;
       width: 100%;
       box-sizing: border-box;
 
+      &__with-clear-button {
+        padding-right: 44px;
+      }
+
       &::placeholder {
         font-family: Open Sans, 'sans-serif';
-        font-size: 14px;
+        font-size: inherit;
         font-weight: 400;
-        line-height: 19px;
+        line-height: inherit;
         color: $color-darker-gray;
       }
 
@@ -850,6 +852,15 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
         transform: scale(0.95);
       }
     }
+
+    &--clear-icon {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 16px;
+      margin: auto 0;
+      cursor: pointer;
+    }
   }
 
   &__error {
@@ -1321,3 +1332,72 @@ input:checked + .smartapp-slider:before {
     transform: rotate(360deg);
   }
 }
+
+.smartapp-modal {
+  width: 100%;
+  padding: 0 20px;
+  cursor: default;
+
+  &__ios,
+  &__android {
+    padding: 0;
+  }
+
+  &__content {
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 100%;
+    background-color: $color-white;
+    border-radius: 4px;
+    padding: 24px;
+
+    &--ios,
+    &--android {
+      border-radius: 12px 12px 0 0;
+      padding: 24px 24px 40px 24px;
+    }
+
+    &--title {
+      font-family: Open Sans, 'sans-serif';
+      font-size: 16px;
+      font-weight: 700;
+      line-height: normal;
+      text-align: center;
+      color: $color-black;
+      margin: 0;
+    }
+
+    &--close-icon {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      cursor: pointer;
+    }
+  }
+}
+
+.modal-content {
+  width: 100%;
+  height: 100%;
+  background: var(--modal-background, $popup-background);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.modal-ios-content,
+.modal-android-content {
+  height: fit-content;
+  border-radius: 12px 12px 0 0;
+  margin: auto 0 0 !important;
+}
+
+.modal-ios-overlay,
+.modal-android-overlay {
+  background: var(--modal-background, $popup-background);
+  cursor: pointer;
+}