@expressms/smartapp-ui 1.1.7 → 1.1.8

package/build/main/assets/icons/story-loader.svg

@@ -0,0 +1,3 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 30C7.5 42.4264 17.5736 52.5 30 52.5C42.4264 52.5 52.5 42.4264 52.5 30C52.5 17.5736 42.4264 7.5 30 7.5" stroke="white" stroke-width="4" stroke-linecap="round"/>
+</svg>

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

@@ -1,17 +1,16 @@
-export declare const DEFAULT_BLUE_LIGHT_ICON_COLOR = "#4799E30D";
-export declare const DEFAULT_BLUE_ICON_COLOR = "#4799E3";
-export declare const DEFAULT_BLUE_ICON_HOVER_COLOR = "#3C82C1";
-export declare const DEFAULT_RED_ICON_COLOR = "#EB5545";
-export declare const DEFAULT_WHITE_LIGHT_ICON_COLOR = "#FFFFFF80";
-export declare const DEFAULT_GRAY_ICON_COLOR = "#1111114D";
-export declare const DEFAULT_BLACK_ICON_COLOR = "#111111";
-export declare const DEFAULT_HEADER_TEXT_COLOR = "#111111";
-export declare const DEFAULT_HEADER_BACKGROUND_COLOR = "#FFFFFF";
-export declare const DEFAULT_WHITE_LOADER_BACKGROUND_COLOR = "#FFFFFF";
-export declare const DEFAULT_GRAY_LOADER_BACKGROUND_COLOR = "#E0E4EC66";
-export declare const DEFAULT_TEXT_BUTTON_COLOR = "#111111";
-export declare const DEFAULT_BACKGROUND_BUTTON_COLOR = "#FFFFFF";
-export declare const DEFAULT_POPUP_BACKGROUND_COLOR = "rgba(37, 77, 145, 0.2)";
+export declare enum COLORS {
+    lighterBlue = "#4799E30D",
+    lightBlue = "rgba(37, 77, 145, 0.2)",
+    blue = "#4799E3",
+    darkBlue = "#3C82C1",
+    red = "#EB5545",
+    white = "#FFFFFF",
+    white3 = "#FFFFFF03",
+    white80 = "#FFFFFF80",
+    lightGray = "#E0E4EC66",
+    gray = "#1111114D",
+    black = "#111111"
+}
 export declare const INPUT_TYPE_PASSWORD = "password";
 export declare const INPUT_TYPE_TEXT = "text";
 export declare const ENTER_KEY = "Enter";

package/build/main/constants/constants.js

@@ -1,17 +1,17 @@
-export var DEFAULT_BLUE_LIGHT_ICON_COLOR = '#4799E30D';
-export var DEFAULT_BLUE_ICON_COLOR = '#4799E3';
-export var DEFAULT_BLUE_ICON_HOVER_COLOR = '#3C82C1';
-export var DEFAULT_RED_ICON_COLOR = '#EB5545';
-export var DEFAULT_WHITE_LIGHT_ICON_COLOR = '#FFFFFF80';
-export var DEFAULT_GRAY_ICON_COLOR = '#1111114D';
-export var DEFAULT_BLACK_ICON_COLOR = '#111111';
-export var DEFAULT_HEADER_TEXT_COLOR = '#111111';
-export var DEFAULT_HEADER_BACKGROUND_COLOR = '#FFFFFF';
-export var DEFAULT_WHITE_LOADER_BACKGROUND_COLOR = '#FFFFFF';
-export var DEFAULT_GRAY_LOADER_BACKGROUND_COLOR = '#E0E4EC66';
-export var DEFAULT_TEXT_BUTTON_COLOR = '#111111';
-export var DEFAULT_BACKGROUND_BUTTON_COLOR = '#FFFFFF';
-export var DEFAULT_POPUP_BACKGROUND_COLOR = 'rgba(37, 77, 145, 0.2)';
+export var COLORS;
+(function (COLORS) {
+    COLORS["lighterBlue"] = "#4799E30D";
+    COLORS["lightBlue"] = "rgba(37, 77, 145, 0.2)";
+    COLORS["blue"] = "#4799E3";
+    COLORS["darkBlue"] = "#3C82C1";
+    COLORS["red"] = "#EB5545";
+    COLORS["white"] = "#FFFFFF";
+    COLORS["white3"] = "#FFFFFF03";
+    COLORS["white80"] = "#FFFFFF80";
+    COLORS["lightGray"] = "#E0E4EC66";
+    COLORS["gray"] = "#1111114D";
+    COLORS["black"] = "#111111";
+})(COLORS || (COLORS = {}));
 export var INPUT_TYPE_PASSWORD = 'password';
 export var INPUT_TYPE_TEXT = 'text';
 export var ENTER_KEY = 'Enter';

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

@@ -1 +1,2 @@
 export * from './constants';
+export * from './types';

package/build/main/constants/index.js

@@ -1 +1,2 @@
 export * from './constants';
+export * from './types';

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

@@ -0,0 +1,8 @@
+export interface IThemeProps {
+    theme?: 'default' | 'dark';
+}
+export interface IPlatformProps {
+    platform?: 'web' | 'ios' | 'android';
+}
+export interface ICommonProps extends IThemeProps, IPlatformProps {
+}

package/build/main/constants/types.js

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

package/build/main/helpers/index.d.ts

@@ -1,7 +1,8 @@
+import { COLORS } from '../constants';
 export declare const getColor: (color: string | undefined, defaultColor: string) => string;
 export declare const isWebPlatform: (platform: string) => boolean;
 export declare const isIosPlatform: (platform: string) => boolean;
 export declare const isAndroidPlatform: (platform: string) => boolean;
 export declare const isMobilePlatform: (platform: string) => boolean;
 export declare const getClassNames: (className: string, delimiter: string, additionalClassName: string | string[]) => string;
-export declare const getDefaultColorForCloseIcon: (theme: string) => "#FFFFFF80" | "#1111114D";
+export declare const getDefaultColorForCloseIcon: (theme: string) => COLORS.white80 | COLORS.gray;

package/build/main/helpers/index.js

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { isArray } from 'lodash';
-import { DEFAULT_GRAY_ICON_COLOR, DEFAULT_WHITE_LIGHT_ICON_COLOR, PLATFORM, THEME } from '../constants';
+import { COLORS, PLATFORM, THEME } from '../constants';
 export var getColor = function (color, defaultColor) {
     return (color && CSS.supports('color', color)) ? color : defaultColor;
 };
@@ -11,4 +11,4 @@ export var isMobilePlatform = function (platform) { return isAndroidPlatform(pla
 export var getClassNames = function (className, delimiter, additionalClassName) { return (isArray(additionalClassName)
     ? classNames(className, additionalClassName.map(function (name) { return "".concat(className).concat(delimiter).concat(name); }))
     : classNames(className, "".concat(className).concat(delimiter).concat(additionalClassName))); };
-export var getDefaultColorForCloseIcon = function (theme) { return theme === THEME.default ? DEFAULT_GRAY_ICON_COLOR : DEFAULT_WHITE_LIGHT_ICON_COLOR; };
+export var getDefaultColorForCloseIcon = function (theme) { return theme === THEME.default ? COLORS.gray : COLORS.white80; };

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

@@ -4,6 +4,7 @@
 $color-black: rgba(17, 17, 17, 1);
 $color-light-black-50: rgba(17, 17, 17, 0.5);
 $color-light-black-30: rgba(17, 17, 17, 0.3);
+$color-light-black-20: rgba(85, 85, 85, 0.2);
 $color-light-black-10: rgba(17, 17, 17, 0.1);
 $color-black-60: rgba(0, 0, 0, 0.6);
 $color-black-20: rgba(0, 0, 0, 0.2);
@@ -32,6 +33,7 @@ $color-orange-10: rgba(252, 158, 90, 0.1);
 $color-light-orange: rgba(253, 246, 228, 1);
 
 $popup-background: rgba(37, 77, 145, 0.2);
+$blurred-background: linear-gradient(0deg, rgba(85, 85, 85, 0.8) 0%, rgba(85, 85, 85, 0.8) 100%), rgba(255, 255, 255, 0.01);
 
 .smartapp-action-modal {
   width: 100%;
@@ -968,6 +970,11 @@ $popup-background: rgba(37, 77, 145, 0.2);
     color: $color-light-black-30;
     word-break: break-word;
     margin: 0;
+
+    &--dark {
+      color: $color-white;
+      opacity: 0.3;
+    }
   }
 }
 
@@ -1174,7 +1181,9 @@ input:checked + .smartapp-slider:before {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: $color-black;
+  background: $blurred-background;
+  -webkit-backdrop-filter: blur(15px);
+  backdrop-filter: blur(15px);
   border: none;
   padding: 0;
 
@@ -1225,6 +1234,12 @@ input:checked + .smartapp-slider:before {
     }
   }
 
+  &:has(> div:first-child > div:nth-child(2) > div:first-child > .smartapp-stories__story > .smartapp-stories__story--loader) {
+    & > div:first-child > div:first-child {
+      opacity: 1 !important;
+    }
+  }
+
   &__web {
     width: 400px;
   }
@@ -1245,6 +1260,10 @@ input:checked + .smartapp-slider:before {
     justify-content: center;
     color: $color-white;
 
+    &--image-bg {
+      background: $color-light-black-20;
+    }
+
     &--title {
       font-size: 24px;
       font-weight: 700;
@@ -1294,6 +1313,18 @@ input:checked + .smartapp-slider:before {
         right: 16px;
       }
     }
+
+    &--loader {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      svg {
+        animation: loading 1s linear infinite;
+      }
+    }
   }
 
   &__animate-right {
@@ -1332,6 +1363,12 @@ input:checked + .smartapp-slider:before {
   }
 }
 
+@keyframes loading {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .smartapp-sync-loader {
   position: absolute;
   left: 0;