eat-js-sdk 2.7.0 → 2.7.2

package/dist/interaction-builder.mjs

@@ -7077,10 +7077,10 @@ function useImageModalSize() {
   };
 }
 var root_4$8 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
-var root_5$8 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
+var root_5$9 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
 var root_7$7 = /* @__PURE__ */ from_html(`<span class="sr-only"><!></span>`);
 var root_6$4 = /* @__PURE__ */ from_html(`<div><!> <span aria-hidden="true"><!></span></div>`);
-var root_10$3 = /* @__PURE__ */ from_html(`<span class="w-4 h-4 flex items-center justify-center"><!></span>`);
+var root_10$4 = /* @__PURE__ */ from_html(`<span class="w-4 h-4 flex items-center justify-center"><!></span>`);
 var root_11$2 = /* @__PURE__ */ from_html(`<span class="w-4 h-4 flex items-center justify-center"><!></span>`);
 var root_2$f = /* @__PURE__ */ from_html(`<div class="absolute inset-0 m-0"><div class="w-full h-full px-0 md:px-[82px] lg:px-[128px] pt-14 pb-[72px] relative lg:py-24 flex flex-col items-center justify-center"><div aria-live="polite" aria-atomic="true" class="sr-only"><!> <!></div> <div class="w-full h-full flex flex-col md:flex-row md:justify-center items-center justify-between"><div class="md:hidden"></div> <!> <!> <div><div class="flex-shrink-0 flex items-center justify-between py-1 px-2 md:px-4 border-border-minimal border rounded-t-md lg:rounded-t-lg md:gap-4 h-8.5 md:h-fit"><!> <!> <!></div> <div class="rounded-b-md"><img class="mx-auto block rounded-b-md lg:rounded-b-lg object-contain max-w-full max-h-[calc(100vh-168px-34px)] md:max-h-[calc(100vh-128px-54px)] lg:max-h-[calc(100vh-192px-54px)] pointer-events-none"/></div></div> <div class="md:hidden flex justify-center items-center gap-1 flex-shrink-0 h-6 mt-4"><!> <!></div></div></div></div>`);
 function MCQImageModal($$anchor, $$props) {
@@ -7351,7 +7351,7 @@ function MCQImageModal($$anchor, $$props) {
             dataTestId: "img-viewer-next",
             onclick: navigateNext,
             children: ($$anchor4, $$slotProps2) => {
-              var span_1 = root_5$8();
+              var span_1 = root_5$9();
               var node_6 = child(span_1);
               SvgLoader(node_6, {
                 svgName: "smallChevronRight",
@@ -7473,7 +7473,7 @@ function MCQImageModal($$anchor, $$props) {
               dataTestId: "img-viewer-prev",
               onclick: navigatePrevious,
               children: ($$anchor4, $$slotProps2) => {
-                var span_4 = root_10$3();
+                var span_4 = root_10$4();
                 var node_14 = child(span_4);
                 SvgLoader(node_14, {
                   svgName: "smallChevronLeft",
@@ -7649,8 +7649,10 @@ function getStimulusTextMaxHeight(fileAlignment, stimulusTextAlignment, hasMedia
   const hasDefaultAlignment = hasMedia && fileAlignment === ALIGNMENT.DEFAULT || hasText && stimulusTextAlignment === ALIGNMENT.DEFAULT;
   return hasDefaultAlignment ? "max-h-[660px]" : "max-h-[470px]";
 }
-function configureHtmlString(htmlString, maxHeight = "") {
-  return htmlString.replace(/<table>/g, `<div class="table-container ${maxHeight}" tabindex="0"><table>`).replace(/<\/table>/g, "</table></div>");
+function configureHtmlString(htmlString, maxHeight = "", tableAriaLabel) {
+  const labelAttr = tableAriaLabel ? ` aria-label="${tableAriaLabel.replace(/"/g, "&quot;")}"` : "";
+  const tableAriaHidden = tableAriaLabel ? ' aria-hidden="true"' : "";
+  return htmlString.replace(/<table>/g, `<div class="table-container ${maxHeight}" tabindex="0"${labelAttr}><table${tableAriaHidden}>`).replace(/<\/table>/g, "</table></div>");
 }
 function PromptSection($$anchor, $$props) {
   push($$props, true);
@@ -7710,7 +7712,7 @@ function InteractionSection($$anchor, $$props) {
   return pop($$exports);
 }
 create_custom_element(InteractionSection, { children: {} }, [], [], true);
-var root_5$7 = /* @__PURE__ */ from_html(`<div></div>`);
+var root_5$8 = /* @__PURE__ */ from_html(`<div></div>`);
 var root_4$7 = /* @__PURE__ */ from_html(`<div class="px-4 w-full max-w-[1008px] mx-auto flex-shrink-0 text-center font-semibold text-sm md:text-lg leading-[150%] text-white" aria-hidden="true" data-testid="img-viewer-cap-txt"> </div> <!>`, 1);
 var root_7$6 = /* @__PURE__ */ from_html(`<div></div>`);
 var root_2$e = /* @__PURE__ */ from_html(`<div class="absolute inset-0"><div class="w-full h-full flex items-center justify-center pt-14 pb-[72px] lg:py-24"><div aria-live="polite" aria-atomic="true" class="sr-only"> </div> <div class="flex flex-col items-center overflow-y-auto overflow-x-hidden w-full px-0 md:px-6 lg:px-16"><div class="relative bg-white rounded-md md:rounded-lg shadow-sm overflow-hidden flex-shrink-0"><img class="block object-contain w-full h-auto max-w-full mx-auto"/> <!></div> <!></div></div></div>`);
@@ -7884,7 +7886,7 @@ function PromptStimulusImageModal($$anchor, $$props) {
               var node_3 = sibling(div_5, 2);
               {
                 var consequent = ($$anchor5) => {
-                  var div_6 = root_5$7();
+                  var div_6 = root_5$8();
                   template_effect(() => set_style(div_6, `height:${get$1(bottomSpacerHeight) ?? ""}px`));
                   append($$anchor5, div_6);
                 };
@@ -8367,7 +8369,7 @@ const shouldRenderSection = (section) => section.condition !== false;
 const getClassString = (classes = []) => classes.join(" ");
 const getStyleString = (styles = {}) => Object.entries(styles).map(([k, v]) => `${k}:${v}`).join(";");
 var root_4$6 = /* @__PURE__ */ from_html(`<p class="text-lg leading-[22px] text-blue-1000 font-semibold mt-4" data-testid="img-cap-txt"> </p>`);
-var root_5$6 = /* @__PURE__ */ from_html(`<div class="mt-6 w-full"><button class="flex items-center font-semibold leading-[1.5] outline-none group w-fit h-11 text-charcoal" aria-controls="long-description-content" aria-labelledby="image-description-label" type="button"><div class="w-6 h-6 flex items-center justify-center mr-2" data-testid="img-desc-txt"><!></div> <div id="image-description-label" class="image-description-accordion group-[.active]:border-b-2">Image Description</div></button> <div id="long-description-content" data-testid="img-desc-txt"><!></div></div>`);
+var root_5$7 = /* @__PURE__ */ from_html(`<div class="mt-6 w-full"><button class="flex items-center font-semibold leading-[1.5] outline-none group w-fit h-11 text-charcoal" aria-controls="long-description-content" aria-labelledby="image-description-label" type="button"><div class="w-6 h-6 flex items-center justify-center mr-2" data-testid="img-desc-txt"><!></div> <div id="image-description-label" class="image-description-accordion group-[.active]:border-b-2">Image Description</div></button> <div id="long-description-content" data-testid="img-desc-txt"><!></div></div>`);
 var root_2$d = /* @__PURE__ */ from_html(`<div class="flex flex-col justify-center items-center text-center"><div class="flex flex-col items-center"><div class="relative inline-block"><img/> <!></div> <!></div></div> <!>`, 1);
 var root_1$j = /* @__PURE__ */ from_html(`<div class="w-full"><!></div>`);
 function CommonMedia($$anchor, $$props) {
@@ -8500,7 +8502,7 @@ function CommonMedia($$anchor, $$props) {
           var node_4 = sibling(div_1, 2);
           {
             var consequent_1 = ($$anchor4) => {
-              var div_4 = root_5$6();
+              var div_4 = root_5$7();
               var button = child(div_4);
               button.__click = toggleLongDescription;
               button.__keydown = handleKeyDown;
@@ -8693,10 +8695,33 @@ function getTranscriptionSRText(html2) {
     return toTranscriptionReadableText(plain);
   }).replace(/<[^>]+>/g, "").replace(/&lt;\/?eat-transcription&gt;/gi, "").replace(/\s{2,}/g, " ").trim();
 }
+const STRUCTURAL_TAG_RE = /^(table|thead|tbody|tfoot|tr|th|td|caption|p|br|ul|ol|li|h[1-6]|blockquote)$/i;
+function getTranscriptionSRHtml(html2) {
+  if (!html2) return "";
+  const normalized = normalizeTranscriptionTags(html2);
+  EAT_TRANSCRIPTION_RE.lastIndex = 0;
+  let result = normalized.replace(EAT_TRANSCRIPTION_RE, (_full, content) => {
+    let processed = content.replace(/<u>(.*?)<\/u>/gi, (_m, t2) => `stressed: ${t2.replace(/<[^>]+>/g, "").trim()}`);
+    const plain = processed.replace(/<[^>]+>/g, "").trim();
+    return toTranscriptionReadableText(plain);
+  });
+  result = result.replace(/&lt;\/?eat-transcription&gt;/gi, "");
+  result = result.replace(/<(\/?)([a-zA-Z][a-zA-Z0-9]*)\b([^>]*)>/g, (_match, slash, tag, attrs) => {
+    if (!STRUCTURAL_TAG_RE.test(tag)) return "";
+    if (/^(th|td)$/i.test(tag) && !slash) {
+      const safeAttrs = (attrs.match(/(?:scope|colspan|rowspan)="[^"]*"/gi) ?? []).join(" ");
+      return `<${tag}${safeAttrs ? " " + safeAttrs : ""}>`;
+    }
+    return `<${slash}${tag}>`;
+  });
+  return result.replace(/<p>\s*<\/p>/g, "").replace(/\s{2,}/g, " ").trim();
+}
+var root_5$6 = /* @__PURE__ */ from_html(`<div class="sr-only"><!></div>`);
 var root_4$5 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-txt-ctr"><!> <!></div>`);
 var root_6$3 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-img-ctr"><!></div>`);
 var root_3$b = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 var root_8$6 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-img-ctr"><!></div>`);
+var root_10$3 = /* @__PURE__ */ from_html(`<div class="sr-only"><!></div>`);
 var root_9$4 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-txt-ctr"><!> <!></div>`);
 var root_7$5 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 var root_1$i = /* @__PURE__ */ from_html(`<div class="stimulus-section flex flex-col w-full"><!> <div><!></div></div>`);
@@ -8716,11 +8741,12 @@ function StimulusSection($$anchor, $$props) {
   let isInlineMedia = /* @__PURE__ */ user_derived(() => stimulusData().fileAlignment === ALIGNMENT.INLINE);
   let isInlineText = /* @__PURE__ */ user_derived(() => stimulusData().stimulusTextAlignment === ALIGNMENT.INLINE);
   let isTextFirst = /* @__PURE__ */ user_derived(() => stimulusData().stimulusLayoutOrder === LAYOUT_ORDER.TEXT_FIRST);
-  let configuredStimulusText = /* @__PURE__ */ user_derived(() => configureHtmlString(stimulusData().stimulusText, getStimulusTextMaxHeight(stimulusData().fileAlignment, stimulusData().stimulusTextAlignment, stimulusData().hasMedia, stimulusData().hasText)));
-  let configuredLongDescription = /* @__PURE__ */ user_derived(() => configureHtmlString(stimulusData().longDescription, getStimulusTextMaxHeight(stimulusData().fileAlignment, stimulusData().stimulusTextAlignment, stimulusData().hasMedia, stimulusData().hasText)));
-  const escapeHtml = (text2) => text2.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   let hasTranscription = /* @__PURE__ */ user_derived(() => /&lt;eat-transcription&gt;/i.test(stimulusData().stimulusText ?? ""));
-  let stimulusSRText = /* @__PURE__ */ user_derived(() => get$1(hasTranscription) ? getTranscriptionSRText(stimulusData().stimulusText ?? "") : "");
+  let stimulusSRText = /* @__PURE__ */ user_derived(() => get$1(hasTranscription) ? getTranscriptionSRText(stimulusData().stimulusText ?? "") : void 0);
+  let configuredStimulusText = /* @__PURE__ */ user_derived(() => configureHtmlString(stimulusData().stimulusText, getStimulusTextMaxHeight(stimulusData().fileAlignment, stimulusData().stimulusTextAlignment, stimulusData().hasMedia, stimulusData().hasText), get$1(stimulusSRText)));
+  let configuredLongDescription = /* @__PURE__ */ user_derived(() => configureHtmlString(stimulusData().longDescription, getStimulusTextMaxHeight(stimulusData().fileAlignment, stimulusData().stimulusTextAlignment, stimulusData().hasMedia, stimulusData().hasText)));
+  const { segmentAndAnnotate } = useLanguageAnnotator();
+  let stimulusSRHtml = /* @__PURE__ */ user_derived(() => get$1(hasTranscription) ? segmentAndAnnotate(getTranscriptionSRHtml(stimulusData().stimulusText ?? "")) : "");
   const shouldShowText = /* @__PURE__ */ user_derived(() => stimulusData().hasText && (stimulusData().stimulusTextAlignment === stimulusAlignment() || stimulusData().stimulusTextAlignment !== stimulusAlignment() && windowWidth.value < BREAKPOINTS.LG) && (!stimulusType() || stimulusType() === "stimulus-text"));
   const shouldShowMedia = /* @__PURE__ */ user_derived(() => stimulusData().hasMedia && (stimulusData().fileAlignment === stimulusAlignment() || stimulusData().fileAlignment !== stimulusAlignment() && windowWidth.value < BREAKPOINTS.LG) && (!stimulusType() || stimulusType() === "stimulus-media"));
   let textContainerClass = /* @__PURE__ */ user_derived(() => `stimulus-text ${get$1(isInlineText) ? "inline-text" : "block-text"}`);
@@ -8810,36 +8836,31 @@ function StimulusSection($$anchor, $$props) {
               var node_5 = sibling(node_4, 2);
               {
                 var consequent_1 = ($$anchor5) => {
-                  {
-                    let $0 = /* @__PURE__ */ user_derived(() => escapeHtml(get$1(stimulusSRText)));
-                    CommonStringToHtml($$anchor5, {
-                      get htmlString() {
-                        return get$1($0);
-                      },
-                      otherClass: "sr-only",
-                      tag: "span"
-                    });
-                  }
+                  var div_3 = root_5$6();
+                  var node_6 = child(div_3);
+                  html(node_6, () => get$1(stimulusSRHtml));
+                  reset(div_3);
+                  append($$anchor5, div_3);
                 };
                 if_block(node_5, ($$render) => {
                   if (get$1(hasTranscription)) $$render(consequent_1);
                 });
               }
               reset(div_2);
-              template_effect(() => set_class(div_2, 1, `stimulus-txt-ctr ${get$1(textContainerClass) ?? ""}`));
+              template_effect(() => set_class(div_2, 1, `relative stimulus-txt-ctr ${get$1(textContainerClass) ?? ""}`));
               append($$anchor4, div_2);
             };
             if_block(node_3, ($$render) => {
               if (get$1(shouldShowText)) $$render(consequent_2);
             });
           }
-          var node_6 = sibling(node_3, 2);
+          var node_7 = sibling(node_3, 2);
           {
             var consequent_3 = ($$anchor4) => {
-              var div_3 = root_6$3();
+              var div_4 = root_6$3();
               let classes_2;
-              var node_7 = child(div_3);
-              CommonMedia(node_7, {
+              var node_8 = child(div_4);
+              CommonMedia(node_8, {
                 get fileUrl() {
                   return stimulusData().fileUrl;
                 },
@@ -8860,25 +8881,25 @@ function StimulusSection($$anchor, $$props) {
                   return onexpandImage();
                 }
               });
-              reset(div_3);
-              template_effect(() => classes_2 = set_class(div_3, 1, `stimulus-img-ctr ${get$1(mediaContainerClass) ?? ""}`, null, classes_2, { hidden: !get$1(shouldShowMedia) }));
-              append($$anchor4, div_3);
+              reset(div_4);
+              template_effect(() => classes_2 = set_class(div_4, 1, `stimulus-img-ctr ${get$1(mediaContainerClass) ?? ""}`, null, classes_2, { hidden: !get$1(shouldShowMedia) }));
+              append($$anchor4, div_4);
             };
-            if_block(node_6, ($$render) => {
+            if_block(node_7, ($$render) => {
               if (stimulusData().hasMedia) $$render(consequent_3);
             });
           }
           append($$anchor3, fragment_2);
         };
         var alternate = ($$anchor3) => {
-          var fragment_4 = root_7$5();
-          var node_8 = first_child(fragment_4);
+          var fragment_3 = root_7$5();
+          var node_9 = first_child(fragment_3);
           {
             var consequent_5 = ($$anchor4) => {
-              var div_4 = root_8$6();
+              var div_5 = root_8$6();
               let classes_3;
-              var node_9 = child(div_4);
-              CommonMedia(node_9, {
+              var node_10 = child(div_5);
+              CommonMedia(node_10, {
                 get fileUrl() {
                   return stimulusData().fileUrl;
                 },
@@ -8899,20 +8920,20 @@ function StimulusSection($$anchor, $$props) {
                   return onexpandImage();
                 }
               });
-              reset(div_4);
-              template_effect(() => classes_3 = set_class(div_4, 1, `stimulus-img-ctr ${get$1(mediaContainerClass) ?? ""}`, null, classes_3, { hidden: !get$1(shouldShowMedia) }));
-              append($$anchor4, div_4);
+              reset(div_5);
+              template_effect(() => classes_3 = set_class(div_5, 1, `stimulus-img-ctr ${get$1(mediaContainerClass) ?? ""}`, null, classes_3, { hidden: !get$1(shouldShowMedia) }));
+              append($$anchor4, div_5);
             };
-            if_block(node_8, ($$render) => {
+            if_block(node_9, ($$render) => {
               if (stimulusData().hasMedia) $$render(consequent_5);
             });
           }
-          var node_10 = sibling(node_8, 2);
+          var node_11 = sibling(node_9, 2);
           {
             var consequent_7 = ($$anchor4) => {
-              var div_5 = root_9$4();
-              var node_11 = child(div_5);
-              CommonStringToHtml(node_11, {
+              var div_6 = root_9$4();
+              var node_12 = child(div_6);
+              CommonStringToHtml(node_12, {
                 get htmlString() {
                   return get$1(configuredStimulusText);
                 },
@@ -8923,33 +8944,28 @@ function StimulusSection($$anchor, $$props) {
                   return get$1(hasTranscription);
                 }
               });
-              var node_12 = sibling(node_11, 2);
+              var node_13 = sibling(node_12, 2);
               {
                 var consequent_6 = ($$anchor5) => {
-                  {
-                    let $0 = /* @__PURE__ */ user_derived(() => escapeHtml(get$1(stimulusSRText)));
-                    CommonStringToHtml($$anchor5, {
-                      get htmlString() {
-                        return get$1($0);
-                      },
-                      otherClass: "sr-only",
-                      tag: "span"
-                    });
-                  }
+                  var div_7 = root_10$3();
+                  var node_14 = child(div_7);
+                  html(node_14, () => get$1(stimulusSRHtml));
+                  reset(div_7);
+                  append($$anchor5, div_7);
                 };
-                if_block(node_12, ($$render) => {
+                if_block(node_13, ($$render) => {
                   if (get$1(hasTranscription)) $$render(consequent_6);
                 });
               }
-              reset(div_5);
-              template_effect(() => set_class(div_5, 1, `stimulus-txt-ctr ${get$1(textContainerClass) ?? ""}`));
-              append($$anchor4, div_5);
+              reset(div_6);
+              template_effect(() => set_class(div_6, 1, `relative stimulus-txt-ctr ${get$1(textContainerClass) ?? ""}`));
+              append($$anchor4, div_6);
             };
-            if_block(node_10, ($$render) => {
+            if_block(node_11, ($$render) => {
               if (get$1(shouldShowText)) $$render(consequent_7);
             });
           }
-          append($$anchor3, fragment_4);
+          append($$anchor3, fragment_3);
         };
         if_block(node_2, ($$render) => {
           if (get$1(isTextFirst)) $$render(consequent_4);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eat-js-sdk",
-  "version": "2.7.0",
+  "version": "2.7.2",
   "change version": "2.7.0",
   "description": "Authoring tool frontend SDK",
   "contributors": [