@pushwoosh/dumb-components 1.1.172 → 1.1.174

package/NativeRichMediaPreview/NativeRichMediaPreview.js

@@ -11,7 +11,6 @@ import { parseNativeRichMediaConfig } from './parseNativeRichMediaConfig';
 import { resolveLocalization } from './resolveLocalization';
 import { BackdropLayer, ContentFlow, PreviewHost, ScrollLayer, SpinnerLayer } from './styles';
 import { NativeRichMediaBannerView, NativeRichMediaCarouselView, NativeRichMediaFullscreenView, NativeRichMediaInvalidView, NativeRichMediaModalView, NativeRichMediaPipView, NativeRichMediaScratchcardView, NativeRichMediaSheetView, NativeRichMediaSpinwheelView, NativeRichMediaStoriesView, NativeRichMediaVideoView } from './views';
-import { GradientOverlay } from './views/shared/styles';
 function dimsScreen(config) {
   if (!config) {
     return false;
@@ -50,16 +49,12 @@ function justifyFor(config) {
       return 'center';
   }
 }
-function renderCoverBackdrop(url, backgroundColor, overlayTopOffset) {
-  return _jsxs(_Fragment, {
-    children: [_jsx(NativeRichMediaCoverImg, {
-      url: url,
-      position: "absolute",
-      inset: true,
-      backgroundColor: backgroundColor
-    }), _jsx(GradientOverlay, {
-      "$topOffset": overlayTopOffset
-    })]
+function renderCoverBackdrop(url, backgroundColor) {
+  return _jsx(NativeRichMediaCoverImg, {
+    url: url,
+    position: "absolute",
+    inset: true,
+    backgroundColor: backgroundColor
   });
 }
 function renderBackdrop(config, activeIndex) {
@@ -72,7 +67,7 @@ function renderBackdrop(config, activeIndex) {
       {
         var _items$clampIndex;
         const items = config.stories.items;
-        return renderCoverBackdrop((_items$clampIndex = items[clampIndex(activeIndex, items.length)]) === null || _items$clampIndex === void 0 ? void 0 : _items$clampIndex.image, '#000', '55%');
+        return renderCoverBackdrop((_items$clampIndex = items[clampIndex(activeIndex, items.length)]) === null || _items$clampIndex === void 0 ? void 0 : _items$clampIndex.image, '#000');
       }
     default:
       return null;

package/NativeRichMediaPreview/components/NativeRichMediaContentImg/NativeRichMediaContentImg.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { NativeRichMediaContentImgProps } from './types';
+export declare function NativeRichMediaContentImg(props: NativeRichMediaContentImgProps): ReactElement;

package/NativeRichMediaPreview/components/NativeRichMediaContentImg/NativeRichMediaContentImg.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Color } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { Img } from './styles';
+export function NativeRichMediaContentImg(props) {
+  const {
+    url,
+    margin,
+    borderRadius = 18
+  } = props;
+  return _jsx(Horizontal, {
+    "$margin": margin,
+    "$borderRadius": borderRadius,
+    "$bgColor": Color.FROZEN,
+    "$overflow": "hidden",
+    children: _jsx(Img, {
+      src: url,
+      alt: ""
+    })
+  });
+}

package/NativeRichMediaPreview/components/NativeRichMediaContentImg/index.d.ts

@@ -0,0 +1 @@
+export { NativeRichMediaContentImg } from './NativeRichMediaContentImg';

package/NativeRichMediaPreview/components/NativeRichMediaContentImg/index.js

@@ -0,0 +1 @@
+export { NativeRichMediaContentImg } from './NativeRichMediaContentImg';

package/NativeRichMediaPreview/components/NativeRichMediaContentImg/styles.d.ts

@@ -0,0 +1 @@
+export declare const Img: import("styled-components").StyledComponent<"img", any, {}, never>;

package/NativeRichMediaPreview/components/NativeRichMediaContentImg/styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const Img = styled.img.withConfig({
+  displayName: "Img",
+  componentId: "sc-1q27duj-0"
+})(["display:block;width:100%;height:auto;"]);

package/NativeRichMediaPreview/components/NativeRichMediaContentImg/types.d.ts

@@ -0,0 +1,5 @@
+export type NativeRichMediaContentImgProps = {
+    url?: string;
+    margin?: string;
+    borderRadius?: number;
+};

package/NativeRichMediaPreview/components/NativeRichMediaContentImg/types.js

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

package/NativeRichMediaPreview/helpers.d.ts

@@ -9,6 +9,7 @@ export declare function contrastOn(hex: string): string;
 export declare function withAlpha(hex: string, a: number): string;
 export declare function mixHex(hex: string, target: string, t: number): string;
 export declare function surfaceBackground(background: string | string[] | undefined, fallbackHex: string): string;
+export declare function isObject(value: unknown): value is Record<string, unknown>;
 export declare function asText(value: unknown): string;
 export type NativeRichMediaTextValue = {
     text: string;

package/NativeRichMediaPreview/helpers.js

@@ -65,6 +65,9 @@ export function surfaceBackground(background, fallbackHex) {
   }
   return background || fallbackHex;
 }
+export function isObject(value) {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
 export function asText(value) {
   return typeof value === 'string' ? value : '';
 }

package/NativeRichMediaPreview/index.d.ts

@@ -1,4 +1,5 @@
 export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaText, NativeRichMediaBorder, NativeRichMediaCover, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaStoriesBlock, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaSpinwheelBlock, NativeRichMediaPreviewProps, NativeRichMediaLocalization, } from './types';
 export { NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './types';
 export { parseNativeRichMediaConfig } from './parseNativeRichMediaConfig';
+export { parseLocalizationParams } from './parseLocalizationParams';
 export { NativeRichMediaPreview } from './NativeRichMediaPreview';

package/NativeRichMediaPreview/index.js

@@ -1,3 +1,4 @@
 export { NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './types';
 export { parseNativeRichMediaConfig } from './parseNativeRichMediaConfig';
+export { parseLocalizationParams } from './parseLocalizationParams';
 export { NativeRichMediaPreview } from './NativeRichMediaPreview';

package/NativeRichMediaPreview/parseLocalizationParams.d.ts

@@ -0,0 +1,9 @@
+import type { NativeRichMediaLocalization } from './types';
+/**
+ * Parses a rich media `params` JSON string into a {@link NativeRichMediaLocalization}
+ * ready for the `localization` prop of {@link NativeRichMediaPreview}. Accepts both the
+ * wrapped shape (`{ localization: { … } }`) and a bare localization object, and tolerates
+ * malformed input: a missing, non-JSON, or non-object `params` yields `{}`, and non-string
+ * leaves are dropped so the result is always `Record<string, Record<string, string>>`.
+ */
+export declare function parseLocalizationParams(params?: string): NativeRichMediaLocalization;

package/NativeRichMediaPreview/parseLocalizationParams.js

@@ -0,0 +1,37 @@
+import { isObject } from './helpers';
+/**
+ * Parses a rich media `params` JSON string into a {@link NativeRichMediaLocalization}
+ * ready for the `localization` prop of {@link NativeRichMediaPreview}. Accepts both the
+ * wrapped shape (`{ localization: { … } }`) and a bare localization object, and tolerates
+ * malformed input: a missing, non-JSON, or non-object `params` yields `{}`, and non-string
+ * leaves are dropped so the result is always `Record<string, Record<string, string>>`.
+ */
+export function parseLocalizationParams(params) {
+  if (!params) {
+    return {};
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(params);
+  } catch {
+    return {};
+  }
+  if (!isObject(parsed)) {
+    return {};
+  }
+  const source = isObject(parsed.localization) ? parsed.localization : parsed;
+  const result = {};
+  Object.entries(source).forEach(([code, dict]) => {
+    if (!isObject(dict)) {
+      return;
+    }
+    const clean = {};
+    Object.entries(dict).forEach(([key, value]) => {
+      if (typeof value === 'string') {
+        clean[key] = value;
+      }
+    });
+    result[code] = clean;
+  });
+  return result;
+}

package/NativeRichMediaPreview/parseNativeRichMediaConfig.js

@@ -1,7 +1,5 @@
+import { isObject } from './helpers';
 import { NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './types';
-function isObject(value) {
-  return typeof value === 'object' && value !== null && !Array.isArray(value);
-}
 function isNonEmptyString(value) {
   return typeof value === 'string' && value.length > 0;
 }

package/NativeRichMediaPreview/views/NativeRichMediaCarouselView/NativeRichMediaCarouselView.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Card, Dot, Dots, GradientOverlay, TextBlock } from './styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, Dot, Dots, TextBlock } from './styles';
 import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
 import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
 import { NativeRichMediaText } from '../../components/NativeRichMediaText';
@@ -20,15 +20,13 @@ export function NativeRichMediaCarouselView(props) {
       url: item.image,
       position: "absolute",
       inset: true
-    }), (title.text || message.text) && _jsxs(_Fragment, {
-      children: [_jsx(GradientOverlay, {}), _jsxs(TextBlock, {
-        children: [title.text && _jsx(NativeRichMediaTitle, {
-          "$color": title.color,
-          children: title.text
-        }), message.text && _jsx(NativeRichMediaText, {
-          "$color": message.color,
-          children: message.text
-        })]
+    }), (title.text || message.text) && _jsxs(TextBlock, {
+      children: [title.text && _jsx(NativeRichMediaTitle, {
+        "$color": title.color,
+        children: title.text
+      }), message.text && _jsx(NativeRichMediaText, {
+        "$color": message.color,
+        children: message.text
       })]
     }), items.length > 1 && _jsx(Dots, {
       children: items.map((_, i) => _jsx(Dot

package/NativeRichMediaPreview/views/NativeRichMediaCarouselView/styles.d.ts

@@ -1,5 +1,4 @@
 export declare const Card: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const GradientOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Dots: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Dot: import("styled-components").StyledComponent<"div", any, {

package/NativeRichMediaPreview/views/NativeRichMediaCarouselView/styles.js

@@ -3,21 +3,17 @@ export const Card = styled.div.withConfig({
   displayName: "Card",
   componentId: "sc-15b2cux-0"
 })(["position:relative;margin:0 12px;height:461px;border-radius:24px;background:#000;overflow:hidden;box-shadow:0 16px 28px rgba(0,0,0,0.28);"]);
-export const GradientOverlay = styled.div.withConfig({
-  displayName: "GradientOverlay",
-  componentId: "sc-15b2cux-1"
-})(["position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.75));"]);
 export const TextBlock = styled.div.withConfig({
   displayName: "TextBlock",
-  componentId: "sc-15b2cux-2"
+  componentId: "sc-15b2cux-1"
 })(["position:absolute;left:18px;right:18px;bottom:36px;"]);
 export const Dots = styled.div.withConfig({
   displayName: "Dots",
-  componentId: "sc-15b2cux-3"
+  componentId: "sc-15b2cux-2"
 })(["position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:0;"]);
 export const Dot = styled.div.withConfig({
   displayName: "Dot",
-  componentId: "sc-15b2cux-4"
+  componentId: "sc-15b2cux-3"
 })(["display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 4.5px;background:", ";"], ({
   $active
 }) => $active ? '#FFF' : 'rgba(255,255,255,0.4)');

package/NativeRichMediaPreview/views/NativeRichMediaModalView/NativeRichMediaModalView.js

@@ -3,7 +3,7 @@ import { Vertical } from '@pushwoosh/kit-helpers';
 import { Card } from './styles';
 import { NativeRichMediaButtonList } from '../../components/NativeRichMediaButtonList';
 import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
-import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
+import { NativeRichMediaContentImg } from '../../components/NativeRichMediaContentImg';
 import { NativeRichMediaText } from '../../components/NativeRichMediaText';
 import { NativeRichMediaTitle } from '../../components/NativeRichMediaTitle';
 import { asButtonList, asTextValue } from '../../helpers';
@@ -17,10 +17,9 @@ export function NativeRichMediaModalView(props) {
   const message = asTextValue(block.message);
   return _jsxs(Card, {
     "$background": block.background,
-    children: [block.image && _jsx(NativeRichMediaCoverImg, {
+    children: [block.image && _jsx(NativeRichMediaContentImg, {
       url: block.image,
       margin: "14px 14px 0",
-      height: 179,
       borderRadius: 18
     }), (title.text || message.text) && _jsxs(Vertical, {
       "$padding": (block.image ? '20px' : '30px') + ' 24px 0',

package/NativeRichMediaPreview/views/NativeRichMediaSheetView/NativeRichMediaSheetView.js

@@ -3,7 +3,7 @@ import { Vertical } from '@pushwoosh/kit-helpers';
 import { Handle, Sheet } from './styles';
 import { NativeRichMediaButtonList } from '../../components/NativeRichMediaButtonList';
 import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
-import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
+import { NativeRichMediaContentImg } from '../../components/NativeRichMediaContentImg';
 import { NativeRichMediaText } from '../../components/NativeRichMediaText';
 import { NativeRichMediaTitle } from '../../components/NativeRichMediaTitle';
 import { asButtonList, asTextValue } from '../../helpers';
@@ -17,10 +17,9 @@ export function NativeRichMediaSheetView(props) {
   const message = asTextValue(block.message);
   return _jsxs(Sheet, {
     "$background": block.background,
-    children: [_jsx(Handle, {}), block.image && _jsx(NativeRichMediaCoverImg, {
+    children: [_jsx(Handle, {}), block.image && _jsx(NativeRichMediaContentImg, {
       url: block.image,
       margin: "26px 14px 0",
-      height: 190,
       borderRadius: 18
     }), (title.text || message.text) && _jsxs(Vertical, {
       "$padding": (block.image ? '16px' : '20px') + ' 24px 0',

package/NativeRichMediaPreview/views/shared/styles.d.ts

@@ -1,6 +1,3 @@
-export declare const GradientOverlay: import("styled-components").StyledComponent<"div", any, {
-    $topOffset?: string;
-}, never>;
 export declare const TextBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Card: import("styled-components").StyledComponent<"div", any, {
     $background: string;

package/NativeRichMediaPreview/views/shared/styles.js

@@ -1,18 +1,12 @@
 import styled from 'styled-components';
 import { EDGE_INSET } from '../../helpers';
-export const GradientOverlay = styled.div.withConfig({
-  displayName: "GradientOverlay",
-  componentId: "sc-x5bn03-0"
-})(["position:absolute;left:0;right:0;bottom:0;top:", ";background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.75));"], ({
-  $topOffset
-}) => $topOffset ?? '45%');
 export const TextBlock = styled.div.withConfig({
   displayName: "TextBlock",
-  componentId: "sc-x5bn03-1"
+  componentId: "sc-x5bn03-0"
 })(["margin:0 ", "px ", "px;"], EDGE_INSET, EDGE_INSET);
 export const Card = styled.div.withConfig({
   displayName: "Card",
-  componentId: "sc-x5bn03-2"
+  componentId: "sc-x5bn03-1"
 })(["position:relative;margin:0 12px;border-radius:24px;box-shadow:0 16px 28px rgba(0,0,0,0.28);padding:", ";background:", ";"], ({
   $padding
 }) => $padding, ({

package/index.d.ts

@@ -44,7 +44,7 @@ export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip, type ChipProps, type ChipVariant } from './Chip';
 export { RichmediaPreview, useRichmediaHtml } from './RichmediaPreview';
 export { SandboxedHtmlFrame, type SandboxedHtmlFrameProps, type IsolatedSandboxedHtmlFrameProps, type InspectableSandboxedHtmlFrameProps, } from './SandboxedHtmlFrame';
-export { NativeRichMediaPreview, parseNativeRichMediaConfig, NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './NativeRichMediaPreview';
+export { NativeRichMediaPreview, parseNativeRichMediaConfig, parseLocalizationParams, NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './NativeRichMediaPreview';
 export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaText, NativeRichMediaBorder, NativeRichMediaCover, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaStoriesBlock, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaSpinwheelBlock, NativeRichMediaPreviewProps, NativeRichMediaLocalization, } from './NativeRichMediaPreview';
 export { RichMessageEditor, RichMessageViewer, type DynamicContent, } from './RichMessageEditor';
 export { FrequencyCappingEdit, FrequencyCappingReadonly, FrequencyCappingInApps, type LocalCapping, type CappingInAppBase, } from './FrequencyCapping';

package/index.js

@@ -44,7 +44,7 @@ export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip } from './Chip';
 export { RichmediaPreview, useRichmediaHtml } from './RichmediaPreview';
 export { SandboxedHtmlFrame } from './SandboxedHtmlFrame';
-export { NativeRichMediaPreview, parseNativeRichMediaConfig, NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './NativeRichMediaPreview';
+export { NativeRichMediaPreview, parseNativeRichMediaConfig, parseLocalizationParams, NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './NativeRichMediaPreview';
 export { RichMessageEditor, RichMessageViewer } from './RichMessageEditor';
 export { FrequencyCappingEdit, FrequencyCappingReadonly, FrequencyCappingInApps } from './FrequencyCapping';
 export { SendRateEdit, SendRateReadonly } from './SendRate';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.172",
+  "version": "1.1.174",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",