@ikas/loyalty-widget-renderer 1.0.0-alpha.50 → 1.0.0-alpha.52

package/build/models/loyalty-widget/index.d.ts

@@ -1,4 +1,4 @@
-import { LoyaltyWidgetImage } from "../image";
+import { MiniMode } from "models/mini-mode";
 import { LoyaltyWidgetButton } from "../button";
 import { LoyaltyWidgetHeader } from "./header";
 import { LoyaltyWidgetSettings } from "./settings";
@@ -7,6 +7,6 @@ export declare class LoyaltyWidget {
     settings: LoyaltyWidgetSettings;
     header: LoyaltyWidgetHeader;
     button: LoyaltyWidgetButton;
-    miniModeLogo: LoyaltyWidgetImage;
+    miniMode: MiniMode;
     constructor(data?: Partial<LoyaltyWidget>);
 }

package/build/models/loyalty-widget/index.js

@@ -1 +1 @@
-import{makeObservable as e,observable as i}from"mobx";import'./../../ext/uuid/dist/esm-browser/stringify.js';import'./../../ext/uuid/dist/esm-browser/v3.js';import o from'./../../ext/uuid/dist/esm-browser/v4.js';import'./../../ext/uuid/dist/esm-browser/v5.js';import{LoyaltyWidgetImage as t}from"../image/index.js";import{LoyaltyWidgetButton as s}from"../button/index.js";import{LoyaltyWidgetHeader as d}from"./header/index.js";import{LoyaltyWidgetSettings as n}from"./settings/index.js";var r=function(r){void 0===r&&(r={}),this.id=r.id||o(),this.header=r.header?new d(r.header):new d({}),this.settings=r.settings?new n(r.settings):new n({}),this.miniModeLogo=r.miniModeLogo?new t(r.miniModeLogo):new t({}),this.button=r.button?new s(r.button):new s({}),e(this,{id:i,miniModeLogo:i,button:i,header:i,settings:i})};export{r as LoyaltyWidget};
+import{makeObservable as e,observable as i}from"mobx";import'./../../ext/uuid/dist/esm-browser/stringify.js';import'./../../ext/uuid/dist/esm-browser/v3.js';import t from'./../../ext/uuid/dist/esm-browser/v4.js';import'./../../ext/uuid/dist/esm-browser/v5.js';import{MiniMode as o}from"../mini-mode/index.js";import{LoyaltyWidgetButton as s}from"../button/index.js";import{LoyaltyWidgetHeader as d}from"./header/index.js";import{LoyaltyWidgetSettings as n}from"./settings/index.js";var r=function(r){void 0===r&&(r={}),this.id=r.id||t(),this.header=r.header?new d(r.header):new d({}),this.settings=r.settings?new n(r.settings):new n({}),this.miniMode=r.miniMode?new o(r.miniMode):new o({}),this.button=r.button?new s(r.button):new s({}),e(this,{id:i,miniMode:i,button:i,header:i,settings:i})};export{r as LoyaltyWidget};

package/build/models/mini-mode/index.d.ts

@@ -0,0 +1,7 @@
+import { LoyaltyWidgetImage } from "models/image";
+export declare class MiniMode {
+    logo: LoyaltyWidgetImage;
+    emoji?: string | null;
+    bgColor?: string | null;
+    constructor(data: Partial<MiniMode>);
+}

package/build/models/mini-mode/index.js

@@ -0,0 +1 @@
+import{makeObservable as o,observable as i}from"mobx";import{LoyaltyWidgetImage as m}from"../image/index.js";var r=function(r){this.logo=r.logo?new m(r.logo):new m({}),this.emoji=r.emoji||"🚀",this.bgColor=r.bgColor||"#FFF",o(this,{logo:i,emoji:i,bgColor:i})};export{r as MiniMode};

package/build/renderer/components/button/index.js

@@ -1 +1 @@
-import{observer as o}from"mobx-react";import r from"react";import{Button as t,Loader as e}from"./style.js";var i=o(function(o){var i=o.children,d=o.onClick,l=o.button,n=o.fontSize,a=o.paddingSize,u=o.fullWidth,b=void 0!==u&&u,f=o.disabled,m=void 0!==f&&f,s=o.isLoading,c=void 0!==s&&s;return r.createElement(t,{onClick:d,fullWidth:b,fontSize:n,paddingSize:a,borderRadius:l.buttonRadius,bgColor:l.bgColor,textColor:l.textColor,borderColor:l.borderColor,disabled:m||c},c&&r.createElement(e,null),i)});export{i as default};
+import{observer as o}from"mobx-react";import e from"react";import{Button as t,LoaderWrapper as r,Loader as i}from"./style.js";var l=o(function(o){var l=o.children,d=o.onClick,a=o.button,n=o.fontSize,s=o.paddingSize,b=o.fullWidth,m=void 0!==b&&b,u=o.disabled,c=void 0!==u&&u,f=o.isLoading,C=void 0!==f&&f;return e.createElement(t,{onClick:d,fullWidth:m,fontSize:n,paddingSize:s,borderRadius:a.buttonRadius,bgColor:a.bgColor,textColor:a.textColor,borderColor:a.borderColor,disabled:c||C},e.createElement(r,{className:C?"visible":""},e.createElement(i,null)),l)});export{l as default};

package/build/renderer/components/button/style.d.ts

@@ -11,5 +11,6 @@ type ButtonProps = {
     disabled?: boolean;
 };
 export declare const Button: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
+export declare const LoaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Loader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/build/renderer/components/button/style.js

@@ -1 +1 @@
-import{__makeTemplateObject as n}from'./../../../ext/tslib/tslib.es6.mjs.js';import r,{keyframes as o}from"styled-components";import{textXSMedium as t,textSM as e,textSMMedium as i,textMDMedium as a,textLGSemiBold as d,displayXSSemiBold as s}from"../style/typography.js";var l,p,u,c={textXSMedium:t,textSM:e,textSMMedium:i,textMDMedium:a,textLGSemiBold:d,displayXSSemiBold:s},f={small:"8px",medium:"10px 16px"},m=r.button(l||(l=n(["\n  border: none;\n  cursor: ",";\n  transition: all 0.2s ease;\n  opacity: ",";\n  /* pointer-events removed to allow cursor: not-allowed */\n\n  ","\n\n  padding: ",";\n  border-radius: ","px;\n  width: ",";\n  background-color: ",";\n  color: ",";\n  border: ",";\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n\n  &:hover {\n    opacity: ",";\n  }\n"],["\n  border: none;\n  cursor: ",";\n  transition: all 0.2s ease;\n  opacity: ",";\n  /* pointer-events removed to allow cursor: not-allowed */\n\n  ","\n\n  padding: ",";\n  border-radius: ","px;\n  width: ",";\n  background-color: ",";\n  color: ",";\n  border: ",";\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n\n  &:hover {\n    opacity: ",";\n  }\n"])),function(n){return n.disabled?"not-allowed":"pointer"},function(n){return n.disabled?.5:1},function(n){return c[n.fontSize]},function(n){return f[n.paddingSize]},function(n){return n.borderRadius},function(n){return n.fullWidth?"100%":"auto"},function(n){var r;return null!==(r=n.bgColor)&&void 0!==r?r:"transparent"},function(n){var r;return null!==(r=n.textColor)&&void 0!==r?r:"inherit"},function(n){return n.borderColor?"1px solid ".concat(n.borderColor):"none"},function(n){return n.disabled?.5:.9}),x=o(p||(p=n(["\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n"],["\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n"]))),b=r.div(u||(u=n(["\n  border: 2px solid rgba(255, 255, 255, 0.3);\n  border-top: 2px solid currentColor;\n  border-radius: 50%;\n  width: 14px;\n  height: 14px;\n  min-width: 14px; /* Ensure it doesn't collapse */\n  animation:\n    "," 1s linear infinite,\n    fade-in 0.3s ease-out;\n\n  @keyframes fade-in {\n    from {\n      opacity: 0;\n      width: 0;\n      transform: scale(0);\n    }\n    to {\n      opacity: 1;\n      width: 14px;\n      transform: scale(1);\n    }\n  }\n"],["\n  border: 2px solid rgba(255, 255, 255, 0.3);\n  border-top: 2px solid currentColor;\n  border-radius: 50%;\n  width: 14px;\n  height: 14px;\n  min-width: 14px; /* Ensure it doesn't collapse */\n  animation:\n    "," 1s linear infinite,\n    fade-in 0.3s ease-out;\n\n  @keyframes fade-in {\n    from {\n      opacity: 0;\n      width: 0;\n      transform: scale(0);\n    }\n    to {\n      opacity: 1;\n      width: 14px;\n      transform: scale(1);\n    }\n  }\n"])),x);export{m as Button,b as Loader};
+import{__makeTemplateObject as n}from'./../../../ext/tslib/tslib.es6.mjs.js';import t,{keyframes as e}from"styled-components";import{textXSMedium as r,textSM as i,textSMMedium as o,textMDMedium as a,textLGSemiBold as d,displayXSSemiBold as s}from"../style/typography.js";var p,l,u,c,m={textXSMedium:r,textSM:i,textSMMedium:o,textMDMedium:a,textLGSemiBold:d,displayXSSemiBold:s},x={small:"8px",medium:"10px 16px"},g=t.button(p||(p=n(["\n  border: none;\n  cursor: ",";\n  transition: all 0.2s ease;\n  opacity: ",";\n  /* pointer-events removed to allow cursor: not-allowed */\n\n  ","\n\n  padding: ",";\n  border-radius: ","px;\n  width: ",";\n  background-color: ",";\n  color: ",";\n  border: ",";\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  justify-content: center;\n  /* gap: 8px; Removed to handle spacing via LoaderWrapper transition */\n\n  &:hover {\n    opacity: ",";\n  }\n"],["\n  border: none;\n  cursor: ",";\n  transition: all 0.2s ease;\n  opacity: ",";\n  /* pointer-events removed to allow cursor: not-allowed */\n\n  ","\n\n  padding: ",";\n  border-radius: ","px;\n  width: ",";\n  background-color: ",";\n  color: ",";\n  border: ",";\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  justify-content: center;\n  /* gap: 8px; Removed to handle spacing via LoaderWrapper transition */\n\n  &:hover {\n    opacity: ",";\n  }\n"])),function(n){return n.disabled?"not-allowed":"pointer"},function(n){return n.disabled?.5:1},function(n){return m[n.fontSize]},function(n){return x[n.paddingSize]},function(n){return n.borderRadius},function(n){return n.fullWidth?"100%":"auto"},function(n){var t;return null!==(t=n.bgColor)&&void 0!==t?t:"transparent"},function(n){var t;return null!==(t=n.textColor)&&void 0!==t?t:"inherit"},function(n){return n.borderColor?"1px solid ".concat(n.borderColor):"none"},function(n){return n.disabled?.5:.9}),h=e(l||(l=n(["\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n"],["\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n"]))),f=t.div(u||(u=n(["\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  max-width: 0;\n  opacity: 0;\n  margin-right: 0;\n  transition:\n    max-width 0.3s ease-in-out,\n    opacity 0.3s ease-in-out,\n    margin-right 0.3s ease-in-out;\n\n  &.visible {\n    max-width: 20px; /* 14px width + extra space */\n    opacity: 1;\n    margin-right: 4px; /* Adjust gap here instead of parent gap */\n  }\n"],["\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  max-width: 0;\n  opacity: 0;\n  margin-right: 0;\n  transition:\n    max-width 0.3s ease-in-out,\n    opacity 0.3s ease-in-out,\n    margin-right 0.3s ease-in-out;\n\n  &.visible {\n    max-width: 20px; /* 14px width + extra space */\n    opacity: 1;\n    margin-right: 4px; /* Adjust gap here instead of parent gap */\n  }\n"]))),b=t.div(c||(c=n(["\n  border: 2px solid rgba(255, 255, 255, 0.3);\n  border-top: 2px solid currentColor;\n  border-radius: 50%;\n  width: 14px;\n  height: 14px;\n  min-width: 14px;\n  animation: "," 1s linear infinite;\n"],["\n  border: 2px solid rgba(255, 255, 255, 0.3);\n  border-top: 2px solid currentColor;\n  border-radius: 50%;\n  width: 14px;\n  height: 14px;\n  min-width: 14px;\n  animation: "," 1s linear infinite;\n"])),h);export{g as Button,b as Loader,f as LoaderWrapper};

package/build/renderer/components/mini-mode-button/index.js

@@ -1 +1 @@
-import{observer as e}from"mobx-react";import t from"react";import{ImageTypeEnum as o}from"../../../models/loyalty-widget/types/index.js";import{WidgetMode as r}from"../../../models/types/index.js";import{Container as i,Logo as m,Emoji as l}from"./style.js";var a=e(function(e){var a=e.viewModel,s=a.loyaltyWidget.miniModeLogo,n=s.type===o.SHOW&&!!s.src;return t.createElement(i,{$hasImg:n,onClick:function(e){e.stopPropagation(),a.setWidgetMode(r.WIDGET_MODE)}},n?t.createElement(m,{src:s.src,alt:"Loyalty Widget"}):t.createElement(l,null,"🚀"))});export{a as default};
+import{observer as o}from"mobx-react";import e from"react";import{ImageTypeEnum as t}from"../../../models/loyalty-widget/types/index.js";import{WidgetMode as r}from"../../../models/types/index.js";import{Container as l,Logo as i,Emoji as m}from"./style.js";var a=o(function(o){var a=o.viewModel,s=a.loyaltyWidget.miniMode,n=s.logo.type===t.SHOW&&!!s.logo.src;return e.createElement(l,{$hasImg:n,$bgColor:s.bgColor||void 0,onClick:function(o){o.stopPropagation(),a.setWidgetMode(r.WIDGET_MODE)}},n?e.createElement(i,{src:s.logo.src,alt:"Loyalty Widget"}):e.createElement(m,null,s.emoji))});export{a as default};

package/build/renderer/components/mini-mode-button/style.d.ts

@@ -1,5 +1,6 @@
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
     $hasImg: boolean;
+    $bgColor?: string;
 }, never>;
 export declare const Logo: import("styled-components").StyledComponent<"img", any, {}, never>;
 export declare const Emoji: import("styled-components").StyledComponent<"span", any, {}, never>;

package/build/renderer/components/mini-mode-button/style.js

@@ -1 +1 @@
-import{__makeTemplateObject as n}from'./../../../ext/tslib/tslib.es6.mjs.js';import e,{css as t}from"styled-components";var r,i,o,s,p=e.div(i||(i=n(["\n  display: flex;\n  width: 60px;\n  height: 60px;\n  padding: ",";\n  justify-content: center;\n  align-items: center;\n  border-radius: 60px;\n  overflow: hidden;\n\n  box-shadow:\n    0 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0 4px 6px -2px rgba(19, 19, 24, 0.03);\n  cursor: pointer;\n  transition: transform 0.2s ease-in-out;\n\n  &:hover {\n    transform: scale(1.05);\n  }\n\n  ","\n"],["\n  display: flex;\n  width: 60px;\n  height: 60px;\n  padding: ",";\n  justify-content: center;\n  align-items: center;\n  border-radius: 60px;\n  overflow: hidden;\n\n  box-shadow:\n    0 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0 4px 6px -2px rgba(19, 19, 24, 0.03);\n  cursor: pointer;\n  transition: transform 0.2s ease-in-out;\n\n  &:hover {\n    transform: scale(1.05);\n  }\n\n  ","\n"])),function(n){return n.$hasImg?"0":"14px"},function(e){return!e.$hasImg&&t(r||(r=n(["\n      background: #000;\n    "],["\n      background: #000;\n    "])))}),a=e.img(o||(o=n(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"],["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"]))),d=e.span(s||(s=n(["\n  font-size: 32px;\n  line-height: 1;\n"],["\n  font-size: 32px;\n  line-height: 1;\n"])));export{p as Container,d as Emoji,a as Logo};
+import{__makeTemplateObject as n}from'./../../../ext/tslib/tslib.es6.mjs.js';import e,{css as t}from"styled-components";var r,o,i,s,p=e.div(o||(o=n(["\n  display: flex;\n  width: 60px;\n  height: 60px;\n  padding: ",";\n  justify-content: center;\n  align-items: center;\n  border-radius: 60px;\n  overflow: hidden;\n\n  box-shadow:\n    0 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0 4px 6px -2px rgba(19, 19, 24, 0.03);\n  cursor: pointer;\n  transition: transform 0.2s ease-in-out;\n\n  &:hover {\n    transform: scale(1.05);\n  }\n\n  ","\n"],["\n  display: flex;\n  width: 60px;\n  height: 60px;\n  padding: ",";\n  justify-content: center;\n  align-items: center;\n  border-radius: 60px;\n  overflow: hidden;\n\n  box-shadow:\n    0 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0 4px 6px -2px rgba(19, 19, 24, 0.03);\n  cursor: pointer;\n  transition: transform 0.2s ease-in-out;\n\n  &:hover {\n    transform: scale(1.05);\n  }\n\n  ","\n"])),function(n){return n.$hasImg?"0":"14px"},function(e){return!e.$hasImg&&t(r||(r=n(["\n      background: ",";\n    "],["\n      background: ",";\n    "])),e.$bgColor||"#000")}),a=e.img(i||(i=n(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"],["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"]))),d=e.span(s||(s=n(["\n  font-size: 32px;\n  line-height: 1;\n"],["\n  font-size: 32px;\n  line-height: 1;\n"])));export{p as Container,d as Emoji,a as Logo};