@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260714124630 → 0.8.1-dev.20260715103126

package/dist/index.js

@@ -1,3 +1,5 @@
+"use client";
+
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -5340,6 +5342,17 @@ init_AssetUtility();
 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 {
@@ -5359,6 +5372,7 @@ var AnimationUtility = class {
       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;`;
@@ -5392,28 +5406,19 @@ 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};
-`;
+        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};
-  `;
+        base = `transition: border-color ${duration}ms ${easing} ${delay}ms;`;
+        visible = `border-color: ${borderColor};`;
         break;
       case "Typewriter":
         keyframes = ` 
@@ -5436,14 +5441,14 @@ background-color: ${backgroundColor};
     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} } 
     `;
     }
   }
@@ -6575,6 +6580,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) {
@@ -6584,7 +6590,7 @@ var DivContainer = async (props) => {
         mode: "enter",
         ...enterAnimation.properties
       },
-      `#${guid}`
+      animationSelector
     );
   }
   if (hoverAnimation?.name) {
@@ -6594,7 +6600,7 @@ var DivContainer = async (props) => {
         mode: "hover",
         ...hoverAnimation.properties
       },
-      `#${guid}`
+      animationSelector
     );
   }
   const isHidden = !shouldRenderContainer(

package/dist/index.mjs

@@ -1,6 +1,8 @@
+"use client";
+
 import {
   OdataBuilder
-} from "./chunk-UFKPTMM7.mjs";
+} from "./chunk-X3YSXTD2.mjs";
 import {
   AssetUtility_default,
   BooleanSelect_default,
@@ -17,22 +19,22 @@ import {
   PhoneInput_default,
   SelectWithSearchInput_default,
   TimeInput_default
-} from "./chunk-YG6FKKQJ.mjs";
+} from "./chunk-7ZFZLN56.mjs";
 import {
   Constants,
   Hyperlink,
   Icon_default,
   InputControlType_default
-} from "./chunk-DBHUCH4B.mjs";
+} from "./chunk-5GHPW7SJ.mjs";
 import {
   ServiceClient_default
-} from "./chunk-3GWLDT7C.mjs";
+} from "./chunk-WEV5U33G.mjs";
 import {
   Button_default,
   ClientButton_default,
   ToastService_default
-} from "./chunk-YL6E76X2.mjs";
-import "./chunk-56HSDML5.mjs";
+} from "./chunk-JKP4XOZB.mjs";
+import "./chunk-IMNQO57B.mjs";
 
 // src/components/controls/view/ViewControl.tsx
 import React13 from "react";
@@ -76,7 +78,7 @@ var NumberView_default = NumberView;
 
 // src/components/controls/view/DateView.tsx
 import dynamic from "next/dynamic";
-var DateView = dynamic(() => import("./DateViewClient-ELEHLGWS.mjs"), {
+var DateView = dynamic(() => import("./DateViewClient-VLTRN47D.mjs"), {
   ssr: false
 });
 var DateView_default = DateView;
@@ -131,7 +133,7 @@ import React3 from "react";
 // src/components/DeviceAssetSelector.tsx
 import dynamic2 from "next/dynamic";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var HlsPlayer = dynamic2(() => import("./HlsPlayer-57543DTW.mjs"), { ssr: false });
+var HlsPlayer = dynamic2(() => import("./HlsPlayer-5AWFZ2P6.mjs"), { ssr: false });
 var FORMAT_CLASSES = {
   center: "justify-center",
   left: "justify-start",
@@ -366,7 +368,7 @@ var AiGeneratedSummary_default = AiGeneratedSummary;
 
 // src/components/controls/view/DateTimeVew.tsx
 import dynamic3 from "next/dynamic";
-var DateTimeView = dynamic3(() => import("./DateTimeViewClient-22GW4AD7.mjs"), {
+var DateTimeView = dynamic3(() => import("./DateTimeViewClient-R3M6ISVK.mjs"), {
   ssr: false
 });
 var DateTimeVew_default = DateTimeView;
@@ -407,7 +409,7 @@ var ViewControl_default = ViewControl;
 
 // src/components/controls/edit/InputControl.tsx
 import dynamic4 from "next/dynamic";
-var InputControl = dynamic4(() => import("./InputControlClient-QQCQD4EG.mjs"), {
+var InputControl = dynamic4(() => import("./InputControlClient-QAZKQLFO.mjs"), {
   ssr: false
 });
 var InputControl_default = InputControl;
@@ -503,7 +505,7 @@ import React14 from "react";
 // src/components/pageRenderingEngine/nodes/ImageNode.tsx
 import dynamic5 from "next/dynamic";
 import { jsx as jsx17 } from "react/jsx-runtime";
-var HlsPlayer2 = dynamic5(() => import("./HlsPlayer-57543DTW.mjs"), { ssr: false });
+var HlsPlayer2 = dynamic5(() => import("./HlsPlayer-5AWFZ2P6.mjs"), { ssr: false });
 var getNestedValue = (obj, path) => {
   if (!obj || !path) return void 0;
   return path.split(".").reduce((current, key) => {
@@ -611,7 +613,7 @@ var ImageNode_default = ImageNode;
 // src/components/pageRenderingEngine/nodes/LinkNode.tsx
 import dynamic6 from "next/dynamic";
 import { Fragment, jsx as jsx18, jsxs as jsxs6 } from "react/jsx-runtime";
-var LinkNodeButton = dynamic6(() => import("./LinkNodeButton-XA7Z5IDR.mjs"), {
+var LinkNodeButton = dynamic6(() => import("./LinkNodeButton-LX3KKGZY.mjs"), {
   ssr: false
 });
 function getNestedValue2(obj, path) {
@@ -1046,7 +1048,7 @@ var QuoteNode_default = QuoteNode;
 import React20 from "react";
 import dynamic7 from "next/dynamic";
 import { jsx as jsx27, jsxs as jsxs9 } from "react/jsx-runtime";
-var CopyButton = dynamic7(() => import("./CopyButton-XONTQQW7.mjs"), {
+var CopyButton = dynamic7(() => import("./CopyButton-UPJPMJUB.mjs"), {
   ssr: false,
   // optional: fallback UI while loading
   loading: () => /* @__PURE__ */ jsx27("span", { className: "text-gray-400 text-xs", children: "Copy" })
@@ -1189,7 +1191,7 @@ import React22 from "react";
 // src/components/pageRenderingEngine/nodes/EmbedNode.tsx
 import dynamic8 from "next/dynamic";
 import { jsx as jsx30 } from "react/jsx-runtime";
-var IframeClient = dynamic8(() => import("./IframeClient-J22NMEVY.mjs"), {
+var IframeClient = dynamic8(() => import("./IframeClient-RGJFZ5P2.mjs"), {
   ssr: false
 });
 var EmbedNode = (props) => {
@@ -1206,6 +1208,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 {
@@ -1225,6 +1238,7 @@ var AnimationUtility = class {
       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;`;
@@ -1258,28 +1272,19 @@ 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};
-`;
+        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};
-  `;
+        base = `transition: border-color ${duration}ms ${easing} ${delay}ms;`;
+        visible = `border-color: ${borderColor};`;
         break;
       case "Typewriter":
         keyframes = ` 
@@ -1302,14 +1307,14 @@ background-color: ${backgroundColor};
     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} } 
     `;
     }
   }
@@ -1422,7 +1427,7 @@ var NoDataFound_default = NoDataFound;
 // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
 import dynamic9 from "next/dynamic";
 import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs11 } from "react/jsx-runtime";
-var HlsPlayer3 = dynamic9(() => import("./HlsPlayer-57543DTW.mjs"), { ssr: false });
+var HlsPlayer3 = dynamic9(() => import("./HlsPlayer-5AWFZ2P6.mjs"), { ssr: false });
 var deviceToMediaQuery = (device) => {
   switch (device) {
     case "lg":
@@ -2237,8 +2242,8 @@ var DocumentNode_default = DocumentNode;
 
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
 import { jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
-var Pagination = dynamic10(() => import("./Pagination-NCJCOYHF.mjs"), { ssr: true });
-var Slider = dynamic10(() => import("./Slider-PEIVH6A5.mjs"), {
+var Pagination = dynamic10(() => import("./Pagination-T7YN2OMV.mjs"), { ssr: true });
+var Slider = dynamic10(() => import("./Slider-554BKC7N.mjs"), {
   ssr: false
 });
 function toCamelCase(str) {
@@ -2436,6 +2441,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) {
@@ -2445,7 +2451,7 @@ var DivContainer = async (props) => {
         mode: "enter",
         ...enterAnimation.properties
       },
-      `#${guid}`
+      animationSelector
     );
   }
   if (hoverAnimation?.name) {
@@ -2455,7 +2461,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.20260714124630",
+  "version": "0.8.1-dev.20260715103126",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",