@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260721123022 → 0.8.1-dev.20260721133206

package/dist/index.mjs

@@ -4279,5 +4279,3 @@ export {
   ViewControl_default as ViewControl,
   ViewControlTypes_default as ViewControlTypes
 };
-ontrolTypes
-};

package/dist/server.d.mts

@@ -81,7 +81,7 @@ interface ViewControlProps {
     session?: any;
 }
 
-declare const ViewControl: (props: ViewControlProps) => React.JSX.Element;
+declare const ViewControl: React.MemoExoticComponent<(props: ViewControlProps) => React.JSX.Element>;
 
 declare const ViewControlTypes: {
     lineText: string;

package/dist/server.d.ts

@@ -81,7 +81,7 @@ interface ViewControlProps {
     session?: any;
 }
 
-declare const ViewControl: (props: ViewControlProps) => React.JSX.Element;
+declare const ViewControl: React.MemoExoticComponent<(props: ViewControlProps) => React.JSX.Element>;
 
 declare const ViewControlTypes: {
     lineText: string;

package/dist/server.js

@@ -3168,36 +3168,36 @@ var DateTimeVew_default = DateTimeView;
 
 // src/components/controls/view/ViewControl.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var ViewControl = (props) => {
-  const ControlComponents = {
-    [ViewControlTypes_default.lineText]: LineTextView_default,
-    [ViewControlTypes_default.emailText]: EmailTextView_default,
-    [ViewControlTypes_default.asset]: Asset_default,
-    [ViewControlTypes_default.multilineTextBullets]: MultilineTextBulletsView_default,
-    [ViewControlTypes_default.boolean]: BooleanView_default,
-    [ViewControlTypes_default.checkboxInput]: BooleanView_default,
-    // [ViewControlTypes.timeUntilStarts]: TimeUntilStarts,
-    [ViewControlTypes_default.money]: MoneyView_default,
-    [ViewControlTypes_default.date]: DateView_default,
-    [ViewControlTypes_default.time]: DateView_default,
-    [ViewControlTypes_default.datetime]: DateTimeVew_default,
-    [ViewControlTypes_default.number]: NumberView_default,
-    [ViewControlTypes_default.multilineText]: MultilineTextView_default,
-    [ViewControlTypes_default.multilinetext]: MultilineTextView_default,
-    [ViewControlTypes_default.moneyText]: MoneyView_default,
-    [ViewControlTypes_default.percentage]: PercentageView_default,
-    [ViewControlTypes_default.status]: StatusView_default,
-    [ViewControlTypes_default.statusBg]: StatusBgView_default,
-    [ViewControlTypes_default.progressIndicator]: ProgressIndicator_default,
-    // [ViewControlTypes.timeUntilStarts]: TimeUntilStarts,
-    // [ViewControlTypes.timeUntilStartsStyled]: TimeUntilStartsStyled,
-    [ViewControlTypes_default.aiGeneratedSummary]: AiGeneratedSummary_default,
-    [ViewControlTypes_default.booleanView]: BooleanView_default,
-    [ViewControlTypes_default.text]: LineTextView_default
-  };
+var ControlComponents = {
+  [ViewControlTypes_default.lineText]: LineTextView_default,
+  [ViewControlTypes_default.emailText]: EmailTextView_default,
+  [ViewControlTypes_default.asset]: Asset_default,
+  [ViewControlTypes_default.multilineTextBullets]: MultilineTextBulletsView_default,
+  [ViewControlTypes_default.boolean]: BooleanView_default,
+  [ViewControlTypes_default.checkboxInput]: BooleanView_default,
+  // [ViewControlTypes.timeUntilStarts]: TimeUntilStarts,
+  [ViewControlTypes_default.money]: MoneyView_default,
+  [ViewControlTypes_default.date]: DateView_default,
+  [ViewControlTypes_default.time]: DateView_default,
+  [ViewControlTypes_default.datetime]: DateTimeVew_default,
+  [ViewControlTypes_default.number]: NumberView_default,
+  [ViewControlTypes_default.multilineText]: MultilineTextView_default,
+  [ViewControlTypes_default.multilinetext]: MultilineTextView_default,
+  [ViewControlTypes_default.moneyText]: MoneyView_default,
+  [ViewControlTypes_default.percentage]: PercentageView_default,
+  [ViewControlTypes_default.status]: StatusView_default,
+  [ViewControlTypes_default.statusBg]: StatusBgView_default,
+  [ViewControlTypes_default.progressIndicator]: ProgressIndicator_default,
+  // [ViewControlTypes.timeUntilStarts]: TimeUntilStarts,
+  // [ViewControlTypes.timeUntilStartsStyled]: TimeUntilStartsStyled,
+  [ViewControlTypes_default.aiGeneratedSummary]: AiGeneratedSummary_default,
+  [ViewControlTypes_default.booleanView]: BooleanView_default,
+  [ViewControlTypes_default.text]: LineTextView_default
+};
+var ViewControl = import_react20.default.memo((props) => {
   const SelectedControlComponent = props.controlType ? ControlComponents[props.controlType] : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react20.default.Fragment, { children: SelectedControlComponent ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectedControlComponent, { ...props }) : "Control not found:" + props.controlType });
-};
+});
 var ViewControl_default = ViewControl;
 
 // src/components/pageRenderingEngine/nodes/DatafieldNode.tsx
@@ -3632,6 +3632,17 @@ var EmbedNode_default = EmbedNode;
 init_ServiceClient();
 
 // src/components/utilities/AnimationUtility.tsx
+var normalizeSelector = (guid) => {
+  const trimmedGuid = guid?.trim();
+  if (!trimmedGuid) {
+    return ".animation-fallback";
+  }
+  const baseValue = trimmedGuid.replace(/^#/, "").replace(/^\./, "");
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    return `#${CSS.escape(baseValue)}`;
+  }
+  return `#${baseValue}`;
+};
 var AnimationUtility = class {
   static generateAnimationCSS(config, guid) {
     const {
@@ -3646,10 +3657,12 @@ var AnimationUtility = class {
       speedPerChar = 100,
       cursor = true,
       mode = "enter",
-      direction = "left"
-      // Default direction
+      direction = "left",
+      backgroundColor,
+      borderColor
     } = config;
     let base = "", visible = "", keyframes = "";
+    const selector = normalizeSelector(guid);
     switch (config.animation) {
       case "Fade":
         base = `opacity:0; transition:opacity ${duration}ms ${easing} ${delay}ms;`;
@@ -3683,12 +3696,20 @@ var AnimationUtility = class {
       `;
         if (mode === "enter") {
           base = `opacity:0;`;
-          visible = `opacity:1; animation:bounce ${duration}ms ${easing} ${delay}ms ${repeat};`;
+          visible = `opacity:1; animation: bounce ${duration}ms ${easing} ${delay}ms ${repeat};`;
         } else {
           base = ``;
-          visible = `animation:bounce ${duration / 1e3}s ${easing} ${delay / 1e3}s ${repeat};`;
+          visible = `animation: bounce ${duration / 1e3}s ${easing} ${delay / 1e3}s ${repeat};`;
         }
         break;
+      case "Background":
+        base = `transition: background-color ${duration}ms ${easing} ${delay}ms;`;
+        visible = `background-color: ${backgroundColor};`;
+        break;
+      case "Border":
+        base = `transition: border-color ${duration}ms ${easing} ${delay}ms;`;
+        visible = `border-color: ${borderColor};`;
+        break;
       case "Typewriter":
         keyframes = ` 
         @keyframes typewriter { from { width: 0 } to { width: 100% } } 
@@ -3710,14 +3731,14 @@ var AnimationUtility = class {
     if (mode === "hover") {
       return `
       ${keyframes} 
-      ${guid} { ${base} } 
-      ${guid}:hover { ${visible} } 
+      ${selector} { ${base} } 
+      ${selector}:hover { ${visible} } 
     `;
     } else {
       return `
       ${keyframes} 
-      ${guid} { ${base} } 
-      ${guid}.visible { ${visible} } 
+      ${selector} { ${base} } 
+      ${selector}.visible { ${visible} } 
     `;
     }
   }
@@ -4545,6 +4566,25 @@ var DocumentNode = (props) => {
       documents = [docData];
     }
   }
+  const handleDownload = async (e, url, filename) => {
+    e.preventDefault();
+    try {
+      const response = await fetch(url);
+      if (!response.ok) throw new Error("Network response was not ok");
+      const blob = await response.blob();
+      const blobUrl = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = blobUrl;
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(blobUrl);
+    } catch (error) {
+      console.warn("Blob download failed (possibly due to CORS), falling back to browser default navigation:", error);
+      window.open(url, "_blank", "noopener,noreferrer");
+    }
+  };
   if (documents.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "py-4 px-2 bg-neutral-weak border rounded text-center flex flex-col gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "mx-auto w-10 h-10 rounded-full flex items-center justify-center bg-neutral-soft", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
@@ -4588,6 +4628,9 @@ var DocumentNode = (props) => {
       }
     }
     const { Icon: Icon2, extLabel } = getFileDetails(documentUrl);
+    const extMatch = documentUrl.match(/\.([a-zA-Z0-9]+)(?:[\?#]|$)/);
+    const ext = extMatch ? extMatch[1] : "";
+    const filename = ext ? `${documentTitle}.${ext}` : documentTitle;
     return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
       "div",
       {
@@ -4601,6 +4644,8 @@ var DocumentNode = (props) => {
             "a",
             {
               href: documentUrl,
+              download: filename,
+              onClick: (e) => handleDownload(e, documentUrl, filename),
               target: "_blank",
               rel: "noopener noreferrer",
               className: "inline-flex items-center px-4 py-2 text-sm font-medium bg-default border rounded focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors",
@@ -4847,6 +4892,7 @@ var DivContainer = async (props) => {
   }
   const updatedStyle = { ...updatedStyles };
   const guid = "css" + crypto.randomUUID().toLocaleLowerCase();
+  const animationSelector = `#${guid}`;
   const { enterAnimation, exitAnimation, hoverAnimation } = props.node;
   let animationCSS = "";
   if (enterAnimation?.name) {
@@ -4856,7 +4902,7 @@ var DivContainer = async (props) => {
         mode: "enter",
         ...enterAnimation.properties
       },
-      `#${guid}`
+      animationSelector
     );
   }
   if (hoverAnimation?.name) {
@@ -4866,7 +4912,7 @@ var DivContainer = async (props) => {
         mode: "hover",
         ...hoverAnimation.properties
       },
-      `#${guid}`
+      animationSelector
     );
   }
   const isHidden = !shouldRenderContainer(

package/dist/server.mjs

@@ -732,36 +732,36 @@ var DateTimeVew_default = DateTimeView;
 
 // src/components/controls/view/ViewControl.tsx
 import { jsx as jsx20 } from "react/jsx-runtime";
-var ViewControl = (props) => {
-  const ControlComponents = {
-    [ViewControlTypes_default.lineText]: LineTextView_default,
-    [ViewControlTypes_default.emailText]: EmailTextView_default,
-    [ViewControlTypes_default.asset]: Asset_default,
-    [ViewControlTypes_default.multilineTextBullets]: MultilineTextBulletsView_default,
-    [ViewControlTypes_default.boolean]: BooleanView_default,
-    [ViewControlTypes_default.checkboxInput]: BooleanView_default,
-    // [ViewControlTypes.timeUntilStarts]: TimeUntilStarts,
-    [ViewControlTypes_default.money]: MoneyView_default,
-    [ViewControlTypes_default.date]: DateView_default,
-    [ViewControlTypes_default.time]: DateView_default,
-    [ViewControlTypes_default.datetime]: DateTimeVew_default,
-    [ViewControlTypes_default.number]: NumberView_default,
-    [ViewControlTypes_default.multilineText]: MultilineTextView_default,
-    [ViewControlTypes_default.multilinetext]: MultilineTextView_default,
-    [ViewControlTypes_default.moneyText]: MoneyView_default,
-    [ViewControlTypes_default.percentage]: PercentageView_default,
-    [ViewControlTypes_default.status]: StatusView_default,
-    [ViewControlTypes_default.statusBg]: StatusBgView_default,
-    [ViewControlTypes_default.progressIndicator]: ProgressIndicator_default,
-    // [ViewControlTypes.timeUntilStarts]: TimeUntilStarts,
-    // [ViewControlTypes.timeUntilStartsStyled]: TimeUntilStartsStyled,
-    [ViewControlTypes_default.aiGeneratedSummary]: AiGeneratedSummary_default,
-    [ViewControlTypes_default.booleanView]: BooleanView_default,
-    [ViewControlTypes_default.text]: LineTextView_default
-  };
+var ControlComponents = {
+  [ViewControlTypes_default.lineText]: LineTextView_default,
+  [ViewControlTypes_default.emailText]: EmailTextView_default,
+  [ViewControlTypes_default.asset]: Asset_default,
+  [ViewControlTypes_default.multilineTextBullets]: MultilineTextBulletsView_default,
+  [ViewControlTypes_default.boolean]: BooleanView_default,
+  [ViewControlTypes_default.checkboxInput]: BooleanView_default,
+  // [ViewControlTypes.timeUntilStarts]: TimeUntilStarts,
+  [ViewControlTypes_default.money]: MoneyView_default,
+  [ViewControlTypes_default.date]: DateView_default,
+  [ViewControlTypes_default.time]: DateView_default,
+  [ViewControlTypes_default.datetime]: DateTimeVew_default,
+  [ViewControlTypes_default.number]: NumberView_default,
+  [ViewControlTypes_default.multilineText]: MultilineTextView_default,
+  [ViewControlTypes_default.multilinetext]: MultilineTextView_default,
+  [ViewControlTypes_default.moneyText]: MoneyView_default,
+  [ViewControlTypes_default.percentage]: PercentageView_default,
+  [ViewControlTypes_default.status]: StatusView_default,
+  [ViewControlTypes_default.statusBg]: StatusBgView_default,
+  [ViewControlTypes_default.progressIndicator]: ProgressIndicator_default,
+  // [ViewControlTypes.timeUntilStarts]: TimeUntilStarts,
+  // [ViewControlTypes.timeUntilStartsStyled]: TimeUntilStartsStyled,
+  [ViewControlTypes_default.aiGeneratedSummary]: AiGeneratedSummary_default,
+  [ViewControlTypes_default.booleanView]: BooleanView_default,
+  [ViewControlTypes_default.text]: LineTextView_default
+};
+var ViewControl = React14.memo((props) => {
   const SelectedControlComponent = props.controlType ? ControlComponents[props.controlType] : void 0;
   return /* @__PURE__ */ jsx20(React14.Fragment, { children: SelectedControlComponent ? /* @__PURE__ */ jsx20(SelectedControlComponent, { ...props }) : "Control not found:" + props.controlType });
-};
+});
 var ViewControl_default = ViewControl;
 
 // src/components/pageRenderingEngine/nodes/DatafieldNode.tsx
@@ -1193,6 +1193,17 @@ var EmbedNode = (props) => {
 var EmbedNode_default = EmbedNode;
 
 // src/components/utilities/AnimationUtility.tsx
+var normalizeSelector = (guid) => {
+  const trimmedGuid = guid?.trim();
+  if (!trimmedGuid) {
+    return ".animation-fallback";
+  }
+  const baseValue = trimmedGuid.replace(/^#/, "").replace(/^\./, "");
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    return `#${CSS.escape(baseValue)}`;
+  }
+  return `#${baseValue}`;
+};
 var AnimationUtility = class {
   static generateAnimationCSS(config, guid) {
     const {
@@ -1207,10 +1218,12 @@ var AnimationUtility = class {
       speedPerChar = 100,
       cursor = true,
       mode = "enter",
-      direction = "left"
-      // Default direction
+      direction = "left",
+      backgroundColor,
+      borderColor
     } = config;
     let base = "", visible = "", keyframes = "";
+    const selector = normalizeSelector(guid);
     switch (config.animation) {
       case "Fade":
         base = `opacity:0; transition:opacity ${duration}ms ${easing} ${delay}ms;`;
@@ -1244,12 +1257,20 @@ var AnimationUtility = class {
       `;
         if (mode === "enter") {
           base = `opacity:0;`;
-          visible = `opacity:1; animation:bounce ${duration}ms ${easing} ${delay}ms ${repeat};`;
+          visible = `opacity:1; animation: bounce ${duration}ms ${easing} ${delay}ms ${repeat};`;
         } else {
           base = ``;
-          visible = `animation:bounce ${duration / 1e3}s ${easing} ${delay / 1e3}s ${repeat};`;
+          visible = `animation: bounce ${duration / 1e3}s ${easing} ${delay / 1e3}s ${repeat};`;
         }
         break;
+      case "Background":
+        base = `transition: background-color ${duration}ms ${easing} ${delay}ms;`;
+        visible = `background-color: ${backgroundColor};`;
+        break;
+      case "Border":
+        base = `transition: border-color ${duration}ms ${easing} ${delay}ms;`;
+        visible = `border-color: ${borderColor};`;
+        break;
       case "Typewriter":
         keyframes = ` 
         @keyframes typewriter { from { width: 0 } to { width: 100% } } 
@@ -1271,14 +1292,14 @@ var AnimationUtility = class {
     if (mode === "hover") {
       return `
       ${keyframes} 
-      ${guid} { ${base} } 
-      ${guid}:hover { ${visible} } 
+      ${selector} { ${base} } 
+      ${selector}:hover { ${visible} } 
     `;
     } else {
       return `
       ${keyframes} 
-      ${guid} { ${base} } 
-      ${guid}.visible { ${visible} } 
+      ${selector} { ${base} } 
+      ${selector}.visible { ${visible} } 
     `;
     }
   }
@@ -2103,6 +2124,25 @@ var DocumentNode = (props) => {
       documents = [docData];
     }
   }
+  const handleDownload = async (e, url, filename) => {
+    e.preventDefault();
+    try {
+      const response = await fetch(url);
+      if (!response.ok) throw new Error("Network response was not ok");
+      const blob = await response.blob();
+      const blobUrl = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = blobUrl;
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(blobUrl);
+    } catch (error) {
+      console.warn("Blob download failed (possibly due to CORS), falling back to browser default navigation:", error);
+      window.open(url, "_blank", "noopener,noreferrer");
+    }
+  };
   if (documents.length === 0) {
     return /* @__PURE__ */ jsx33(Fragment6, { children: /* @__PURE__ */ jsxs12("div", { className: "py-4 px-2 bg-neutral-weak border rounded text-center flex flex-col gap-2", children: [
       /* @__PURE__ */ jsx33("div", { className: "mx-auto w-10 h-10 rounded-full flex items-center justify-center bg-neutral-soft", children: /* @__PURE__ */ jsx33(
@@ -2146,6 +2186,9 @@ var DocumentNode = (props) => {
       }
     }
     const { Icon, extLabel } = getFileDetails(documentUrl);
+    const extMatch = documentUrl.match(/\.([a-zA-Z0-9]+)(?:[\?#]|$)/);
+    const ext = extMatch ? extMatch[1] : "";
+    const filename = ext ? `${documentTitle}.${ext}` : documentTitle;
     return /* @__PURE__ */ jsxs12(
       "div",
       {
@@ -2159,6 +2202,8 @@ var DocumentNode = (props) => {
             "a",
             {
               href: documentUrl,
+              download: filename,
+              onClick: (e) => handleDownload(e, documentUrl, filename),
               target: "_blank",
               rel: "noopener noreferrer",
               className: "inline-flex items-center px-4 py-2 text-sm font-medium bg-default border rounded focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors",
@@ -2405,6 +2450,7 @@ var DivContainer = async (props) => {
   }
   const updatedStyle = { ...updatedStyles };
   const guid = "css" + crypto.randomUUID().toLocaleLowerCase();
+  const animationSelector = `#${guid}`;
   const { enterAnimation, exitAnimation, hoverAnimation } = props.node;
   let animationCSS = "";
   if (enterAnimation?.name) {
@@ -2414,7 +2460,7 @@ var DivContainer = async (props) => {
         mode: "enter",
         ...enterAnimation.properties
       },
-      `#${guid}`
+      animationSelector
     );
   }
   if (hoverAnimation?.name) {
@@ -2424,7 +2470,7 @@ var DivContainer = async (props) => {
         mode: "hover",
         ...hoverAnimation.properties
       },
-      `#${guid}`
+      animationSelector
     );
   }
   const isHidden = !shouldRenderContainer(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acoustte-digital-services/digitalstore-controls-dev",
-  "version": "0.8.1-dev.20260721123022",
+  "version": "0.8.1-dev.20260721133206",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",