@pie-players/pie-assessment-toolkit 0.3.45 → 0.3.47

package/README.md

@@ -1410,7 +1410,11 @@ from tool configuration. Two sanitization layers apply:
   (PIE-94 / WCAG 1.4.10 Reflow at 400% zoom). The wrapper is
   keyboard-scrollable (`tabindex="0"`, `role="region"`) and carries
   the image's `alt` text in its `aria-label`; matching CSS lives in
-  `@pie-players/pie-theme` (`components.css`).
+  `@pie-players/pie-theme` (`components.css`). Authored `<table>`
+  elements outside a `pie-*` custom element get the same treatment via
+  `<div class="pie-table-scroll">` so wide data grids reflow into a
+  horizontally scrollable region; the wrapper's `aria-label` is derived
+  from the table's `aria-label` / `aria-labelledby` / `<caption>`.
 - **Tool icons and SSML** - tool-registered icon markup is parsed and
   DOMPurified inside the toolbar at render time; SSML payloads are
   restricted to an allow-listed subset of SSML tags/attributes before

package/dist/components/ItemToolBar.custom-element.js

@@ -5332,7 +5332,11 @@ function isExternalIconUrl(icon) {
 
 // dist/components/.ItemToolBar.custom-element.unbundled.js
 import { sanitizeSvgIcon } from "@pie-players/pie-players-shared/security";
-import { createFocusTrap } from "@pie-players/pie-players-shared";
+import {
+  createFocusTrap,
+  FOCUSABLE_SELECTOR,
+  isProgrammaticFocusTarget
+} from "@pie-players/pie-players-shared";
 
 // dist/services/tool-config-defaults.js
 var DEFAULT_TOOL_PLACEMENT = {
@@ -6761,10 +6765,12 @@ var calculatorToolRegistration = {
             draggable: true,
             resizable: true,
             closeable: true,
-            initialWidth: 720,
-            initialHeight: 620,
-            minWidth: 360,
-            minHeight: 420
+            initialWidth: 380,
+            initialHeight: 420,
+            minWidth: 380,
+            minHeight: 420,
+            initialAlign: "bottom-right",
+            initialMargin: 16
           }
         }
       ],
@@ -8604,6 +8610,7 @@ function ItemToolBar($$anchor, $$props) {
   const FA_PRO_HREFS = ["/_fa-pro/fontawesome.min.css", "/_fa-pro/light.min.css"];
   const FA_FREE_HREF = "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css";
   const ROBOTO_HREF = "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap";
+  const FA_HREF_PATTERN = /font.?awesome|fa-?pro/i;
   let ndsAssetsInstalled = false;
   const ensureNdsAssets = () => {
     if (!isBrowser || ndsAssetsInstalled)
@@ -8615,6 +8622,9 @@ function ItemToolBar($$anchor, $$props) {
       link2.href = ROBOTO_HREF;
       document.head.appendChild(link2);
     }
+    const hostHasFa = Array.from(document.querySelectorAll('link[rel="stylesheet"][href]')).some((link2) => FA_HREF_PATTERN.test(link2.href));
+    if (hostHasFa)
+      return;
     if (!document.querySelector(`link[href="${FA_FREE_HREF}"]`)) {
       const link2 = document.createElement("link");
       link2.rel = "stylesheet";
@@ -8631,7 +8641,6 @@ function ItemToolBar($$anchor, $$props) {
     }
   };
   const FA_TOOLBAR_SHADOW_INSTALLED = "__pieFaToolbarShadowInstalled";
-  const FA_HREF_PATTERN = /font.?awesome|fa-?pro/i;
   const installFaInToolbarShadow = (root) => {
     const shadow = root.getRootNode();
     if (!(shadow instanceof ShadowRoot))
@@ -8653,9 +8662,6 @@ function ItemToolBar($$anchor, $$props) {
     const documentFaLinks = Array.from(document.querySelectorAll('link[rel="stylesheet"][href]')).filter((link2) => FA_HREF_PATTERN.test(link2.href));
     for (const link2 of documentFaLinks)
       appendLink(link2.href);
-    const shim = document.createElement("style");
-    shim.textContent = '.fa-light{font-family:"Font Awesome 6 Free";font-weight:900;}';
-    shadow.appendChild(shim);
   };
   const ndsIconButtonAction = (node) => {
     ensureNdsAssets();
@@ -9232,6 +9238,10 @@ function ItemToolBar($$anchor, $$props) {
     let controlsEl = null;
     let closeButtonEl = null;
     let resizeHandleEl = null;
+    let startFocusGuardEl = null;
+    let endFocusGuardEl = null;
+    let focusGuardRedirecting = false;
+    let calculatorBridgeAttached = false;
     let mountedContentElement = null;
     let dragPointerId = null;
     let resizePointerId = null;
@@ -9241,6 +9251,10 @@ function ItemToolBar($$anchor, $$props) {
     let resizeStartHeight = 0;
     let resizeStartX = 0;
     let resizeStartY = 0;
+    let resizeStartShellX = 0;
+    let resizeStartShellY = 0;
+    let resizeCorner = null;
+    const resizeHandleEls = [];
     let x2 = 0;
     let y2 = 0;
     let width = currentArgs.mounted.entry.shell?.initialWidth ?? 720;
@@ -9427,8 +9441,31 @@ function ItemToolBar($$anchor, $$props) {
     const centerShell = () => {
       const viewportW = window.innerWidth;
       const viewportH = window.innerHeight;
-      x2 = Math.max(0, Math.round((viewportW - width) / 2));
-      y2 = Math.max(0, Math.round((viewportH - height) / 2));
+      const shellConfig = currentArgs.mounted.entry.shell;
+      const align = shellConfig?.initialAlign ?? "center";
+      const margin = shellConfig?.initialMargin ?? 16;
+      const verticalMargin = margin + 60;
+      switch (align) {
+        case "top-left":
+          x2 = margin;
+          y2 = verticalMargin;
+          break;
+        case "top-right":
+          x2 = Math.max(0, viewportW - width - margin);
+          y2 = verticalMargin;
+          break;
+        case "bottom-left":
+          x2 = margin;
+          y2 = Math.max(0, viewportH - height - verticalMargin);
+          break;
+        case "bottom-right":
+          x2 = Math.max(0, viewportW - width - margin);
+          y2 = Math.max(0, viewportH - height - verticalMargin);
+          break;
+        default:
+          x2 = Math.max(0, Math.round((viewportW - width) / 2));
+          y2 = Math.max(0, Math.round((viewportH - height) / 2));
+      }
       applyPositionAndSize();
     };
     const restoreOpenerFocus = () => {
@@ -9464,14 +9501,113 @@ function ItemToolBar($$anchor, $$props) {
       if (!openerEl && active && !shellEl.contains(active)) {
         openerEl = active;
       }
+      const isCalculatorShellTrap = currentArgs.mounted.toolId === "calculator";
+      if (isCalculatorShellTrap && !calculatorBridgeAttached) {
+        document.addEventListener("keydown", onCalculatorBridgeKeydown, true);
+        calculatorBridgeAttached = true;
+      }
       focusTrapCleanup = createFocusTrap(shellEl, {
         initialFocus: closeButtonEl,
         onEscape: () => {
           closeShell();
-        }
+        },
+        wrap: !isCalculatorShellTrap,
+        onTabExit: isCalculatorShellTrap ? (direction, event2) => {
+          if (direction === "backward") {
+            if (openerEl?.isConnected) {
+              event2.preventDefault();
+              try {
+                openerEl.focus();
+              } catch {}
+            }
+            return;
+          }
+          const next2 = findFirstQuestionFocusable();
+          if (next2) {
+            event2.preventDefault();
+            try {
+              next2.focus();
+            } catch {}
+          }
+        } : undefined
       });
     };
+    const findFirstQuestionFocusable = () => {
+      const scope = get2(toolbarContext).getScopeElement?.() ?? null;
+      if (!scope)
+        return null;
+      const isExcluded = (el) => {
+        if (get2(toolbarRootElement) && get2(toolbarRootElement).contains(el))
+          return true;
+        if (shellEl && shellEl.contains(el))
+          return true;
+        return false;
+      };
+      const visit = (node2) => {
+        if (node2 instanceof HTMLElement) {
+          if (isExcluded(node2))
+            return null;
+          if (node2.matches?.(FOCUSABLE_SELECTOR) && isProgrammaticFocusTarget(node2)) {
+            return node2;
+          }
+        }
+        const shadow = node2.shadowRoot;
+        if (shadow) {
+          for (let i = 0;i < shadow.children.length; i++) {
+            const found = visit(shadow.children[i]);
+            if (found)
+              return found;
+          }
+        }
+        for (let i = 0;i < node2.children.length; i++) {
+          const found = visit(node2.children[i]);
+          if (found)
+            return found;
+        }
+        return null;
+      };
+      return visit(scope);
+    };
+    const getShellFocusables = () => {
+      if (!shellEl)
+        return [];
+      return Array.from(shellEl.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => el !== startFocusGuardEl && el !== endFocusGuardEl).filter(isProgrammaticFocusTarget);
+    };
+    const onCalculatorBridgeKeydown = (event2) => {
+      if (event2.key !== "Tab")
+        return;
+      if (!shellEl || !currentArgs.active)
+        return;
+      const active = getDeepActiveElement();
+      if (!active)
+        return;
+      if (shellEl.contains(active))
+        return;
+      const focusables = getShellFocusables();
+      if (focusables.length === 0)
+        return;
+      if (event2.shiftKey) {
+        const firstQuestion = findFirstQuestionFocusable();
+        if (active !== firstQuestion)
+          return;
+        event2.preventDefault();
+        try {
+          focusables[focusables.length - 1].focus();
+        } catch {}
+        return;
+      }
+      if (active !== openerEl)
+        return;
+      event2.preventDefault();
+      try {
+        focusables[0].focus();
+      } catch {}
+    };
     const removeFocusTrap = () => {
+      if (calculatorBridgeAttached) {
+        document.removeEventListener("keydown", onCalculatorBridgeKeydown, true);
+        calculatorBridgeAttached = false;
+      }
       if (!focusTrapCleanup)
         return;
       const cleanup = focusTrapCleanup;
@@ -9489,25 +9625,28 @@ function ItemToolBar($$anchor, $$props) {
       if (!currentArgs.mounted.entry.shell?.draggable)
         return;
       const target = event2.target;
-      if (target.closest("button"))
-        return;
-      if (!shellEl)
+      if (target.closest("button") || !shellEl)
         return;
+      event2.preventDefault();
       dragPointerId = event2.pointerId;
       dragOffsetX = event2.clientX - x2;
       dragOffsetY = event2.clientY - y2;
       shellEl.setPointerCapture(event2.pointerId);
       bringToFront();
     };
-    const onResizePointerDown = (event2) => {
+    const createResizePointerDownHandler = (corner) => (event2) => {
       if (!shellEl || !currentArgs.mounted.entry.shell?.resizable)
         return;
+      event2.preventDefault();
       event2.stopPropagation();
       resizePointerId = event2.pointerId;
+      resizeCorner = corner;
       resizeStartWidth = width;
       resizeStartHeight = height;
       resizeStartX = event2.clientX;
       resizeStartY = event2.clientY;
+      resizeStartShellX = x2;
+      resizeStartShellY = y2;
       shellEl.setPointerCapture(event2.pointerId);
       bringToFront();
     };
@@ -9515,6 +9654,7 @@ function ItemToolBar($$anchor, $$props) {
       if (!shellEl)
         return;
       if (dragPointerId === event2.pointerId) {
+        event2.preventDefault();
         const maxX = Math.max(0, window.innerWidth - width);
         const maxY = Math.max(0, window.innerHeight - height);
         x2 = clamp(event2.clientX - dragOffsetX, 0, maxX);
@@ -9523,13 +9663,39 @@ function ItemToolBar($$anchor, $$props) {
         return;
       }
       if (resizePointerId === event2.pointerId) {
+        event2.preventDefault();
         const shellConfig = currentArgs.mounted.entry.shell;
         const minWidth = shellConfig?.minWidth ?? 320;
         const minHeight = shellConfig?.minHeight ?? 240;
         const maxWidth = shellConfig?.maxWidth ?? window.innerWidth;
         const maxHeight = shellConfig?.maxHeight ?? window.innerHeight;
-        width = clamp(resizeStartWidth + (event2.clientX - resizeStartX), minWidth, Math.max(minWidth, Math.min(maxWidth, window.innerWidth - x2)));
-        height = clamp(resizeStartHeight + (event2.clientY - resizeStartY), minHeight, Math.max(minHeight, Math.min(maxHeight, window.innerHeight - y2)));
+        const dx = event2.clientX - resizeStartX;
+        const dy = event2.clientY - resizeStartY;
+        if (resizeCorner === "se") {
+          width = clamp(resizeStartWidth + dx, minWidth, Math.max(minWidth, Math.min(maxWidth, window.innerWidth - x2)));
+          height = clamp(resizeStartHeight + dy, minHeight, Math.max(minHeight, Math.min(maxHeight, window.innerHeight - y2)));
+        } else if (resizeCorner === "sw") {
+          const rightEdge = resizeStartShellX + resizeStartWidth;
+          const newWidth = clamp(resizeStartWidth - dx, minWidth, Math.min(maxWidth, rightEdge));
+          x2 = rightEdge - newWidth;
+          width = newWidth;
+          height = clamp(resizeStartHeight + dy, minHeight, Math.max(minHeight, Math.min(maxHeight, window.innerHeight - y2)));
+        } else if (resizeCorner === "ne") {
+          const bottomEdge = resizeStartShellY + resizeStartHeight;
+          width = clamp(resizeStartWidth + dx, minWidth, Math.max(minWidth, Math.min(maxWidth, window.innerWidth - x2)));
+          const newHeight = clamp(resizeStartHeight - dy, minHeight, Math.min(maxHeight, bottomEdge));
+          y2 = bottomEdge - newHeight;
+          height = newHeight;
+        } else if (resizeCorner === "nw") {
+          const rightEdge = resizeStartShellX + resizeStartWidth;
+          const bottomEdge = resizeStartShellY + resizeStartHeight;
+          const newWidth = clamp(resizeStartWidth - dx, minWidth, Math.min(maxWidth, rightEdge));
+          x2 = rightEdge - newWidth;
+          width = newWidth;
+          const newHeight = clamp(resizeStartHeight - dy, minHeight, Math.min(maxHeight, bottomEdge));
+          y2 = bottomEdge - newHeight;
+          height = newHeight;
+        }
         applyShellStyle();
         notifyHostedResize();
       }
@@ -9562,14 +9728,20 @@ function ItemToolBar($$anchor, $$props) {
       shellEl.style.border = "1px solid var(--pie-border-light, #d1d5db)";
       shellEl.style.borderRadius = "12px";
       shellEl.style.boxShadow = "0 10px 40px color-mix(in srgb, var(--pie-black, #000) 25%, transparent)";
-      shellEl.style.overflow = "hidden";
+      shellEl.style.overflow = "visible";
       shellEl.style.display = currentArgs.active ? "flex" : "none";
       shellEl.style.flexDirection = "column";
+      shellEl.style.userSelect = "none";
+      shellEl.style.webkitUserSelect = "none";
+      shellEl.style.touchAction = "none";
+      shellEl.setAttribute("draggable", "false");
+      shellEl.addEventListener("dragstart", (e) => e.preventDefault());
       headerEl = document.createElement("div");
       headerEl.className = "pie-tool-shell__header";
       headerEl.style.display = "flex";
       headerEl.style.alignItems = "center";
       headerEl.style.justifyContent = "space-between";
+      headerEl.style.gap = "6px";
       headerEl.style.padding = isCalculatorShell ? "12px 12px 12px 28px" : "10px 12px";
       if (isCalculatorShell) {
         headerEl.style.minHeight = "48px";
@@ -9584,6 +9756,13 @@ function ItemToolBar($$anchor, $$props) {
       }
       headerEl.style.cursor = currentArgs.mounted.entry.shell.draggable === false ? "default" : "move";
       headerEl.style.flex = "0 0 auto";
+      headerEl.style.borderRadius = "12px 12px 0 0";
+      headerEl.style.overflow = "hidden";
+      headerEl.style.userSelect = "none";
+      headerEl.style.webkitUserSelect = "none";
+      headerEl.style.touchAction = "none";
+      headerEl.setAttribute("draggable", "false");
+      headerEl.addEventListener("dragstart", (e) => e.preventDefault());
       titleEl = document.createElement("span");
       titleEl.className = "pie-tool-shell__title";
       titleEl.textContent = currentArgs.mounted.entry.shell.title || currentArgs.mounted.toolId;
@@ -9730,20 +9909,100 @@ function ItemToolBar($$anchor, $$props) {
       contentEl.style.width = "100%";
       contentEl.style.flex = "1 1 auto";
       contentEl.style.minHeight = "0";
+      contentEl.style.overflow = "hidden";
+      contentEl.style.borderRadius = "0 0 12px 12px";
+      if (isCalculatorShell) {
+        const makeFocusGuard = (label) => {
+          const el = document.createElement("div");
+          el.tabIndex = 0;
+          el.setAttribute("aria-hidden", "true");
+          el.setAttribute("data-pie-tool-shell-focus-guard", label);
+          el.style.position = "absolute";
+          el.style.width = "1px";
+          el.style.height = "1px";
+          el.style.padding = "0";
+          el.style.margin = "-1px";
+          el.style.overflow = "hidden";
+          el.style.clipPath = "inset(50%)";
+          el.style.whiteSpace = "nowrap";
+          el.style.border = "0";
+          return el;
+        };
+        startFocusGuardEl = makeFocusGuard("start");
+        endFocusGuardEl = makeFocusGuard("end");
+        startFocusGuardEl.addEventListener("focus", (event2) => {
+          if (focusGuardRedirecting)
+            return;
+          focusGuardRedirecting = true;
+          try {
+            event2.stopPropagation();
+            if (openerEl?.isConnected) {
+              try {
+                openerEl.focus();
+              } catch {}
+            }
+          } finally {
+            queueMicrotask(() => {
+              focusGuardRedirecting = false;
+            });
+          }
+        });
+        endFocusGuardEl.addEventListener("focus", (event2) => {
+          if (focusGuardRedirecting)
+            return;
+          focusGuardRedirecting = true;
+          try {
+            event2.stopPropagation();
+            const next2 = findFirstQuestionFocusable();
+            if (next2) {
+              try {
+                next2.focus();
+              } catch {}
+            }
+          } finally {
+            queueMicrotask(() => {
+              focusGuardRedirecting = false;
+            });
+          }
+        });
+        shellEl.appendChild(startFocusGuardEl);
+      }
       shellEl.appendChild(headerEl);
       shellEl.appendChild(contentEl);
+      if (isCalculatorShell && endFocusGuardEl) {
+        shellEl.appendChild(endFocusGuardEl);
+      }
       if (currentArgs.mounted.entry.shell.resizable !== false) {
-        resizeHandleEl = document.createElement("div");
-        resizeHandleEl.className = "pie-tool-shell__resize";
-        resizeHandleEl.style.position = "absolute";
-        resizeHandleEl.style.right = "0";
-        resizeHandleEl.style.bottom = "0";
-        resizeHandleEl.style.width = "24px";
-        resizeHandleEl.style.height = "24px";
-        resizeHandleEl.style.cursor = "nwse-resize";
-        resizeHandleEl.style.background = "linear-gradient(135deg, transparent 0%, transparent 40%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.35) 60%, transparent 60%, transparent 100%)";
-        shellEl.appendChild(resizeHandleEl);
-        resizeHandleEl.addEventListener("pointerdown", onResizePointerDown);
+        const addResizeHandle = (corner, top, right, bottom, left, cursor, gradientAngle) => {
+          const el = document.createElement("div");
+          el.className = "pie-tool-shell__resize";
+          el.style.position = "absolute";
+          el.style.width = "24px";
+          el.style.height = "24px";
+          el.style.cursor = cursor;
+          el.style.zIndex = "10";
+          el.style.touchAction = "none";
+          el.setAttribute("draggable", "false");
+          if (top !== null)
+            el.style.top = top;
+          if (right !== null)
+            el.style.right = right;
+          if (bottom !== null)
+            el.style.bottom = bottom;
+          if (left !== null)
+            el.style.left = left;
+          if (gradientAngle !== null) {
+            el.style.background = `linear-gradient(${gradientAngle}, transparent 0%, transparent 40%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.35) 60%, transparent 60%, transparent 100%)`;
+          }
+          const handler = createResizePointerDownHandler(corner);
+          el.addEventListener("pointerdown", handler);
+          shellEl.appendChild(el);
+          resizeHandleEls.push({ el, handler });
+        };
+        addResizeHandle("se", null, "0", "0", null, "nwse-resize", null);
+        addResizeHandle("nw", "0", null, null, "0", "nwse-resize", "135deg");
+        addResizeHandle("ne", "0", "0", null, null, "nesw-resize", null);
+        addResizeHandle("sw", null, null, "0", "0", "nesw-resize", null);
       }
       headerEl.addEventListener("pointerdown", onHeaderPointerDown);
       shellEl.addEventListener("pointermove", onShellPointerMove);
@@ -9784,10 +10043,15 @@ function ItemToolBar($$anchor, $$props) {
         if (focusTrapCleanup) {
           removeFocusTrap();
         }
-        openerEl = null;
-        if (resizeHandleEl) {
-          resizeHandleEl.removeEventListener("pointerdown", onResizePointerDown);
+        if (calculatorBridgeAttached) {
+          document.removeEventListener("keydown", onCalculatorBridgeKeydown, true);
+          calculatorBridgeAttached = false;
+        }
+        for (const { el, handler } of resizeHandleEls) {
+          el.removeEventListener("pointerdown", handler);
         }
+        openerEl = null;
+        resizeHandleEls.length = 0;
         if (headerEl) {
           headerEl.removeEventListener("pointerdown", onHeaderPointerDown);
           headerEl.onkeydown = null;
@@ -9994,9 +10258,9 @@ function ItemToolBar($$anchor, $$props) {
                         append($$anchor7, span_4);
                       };
                       var alternate_1 = ($$anchor7) => {
-                        var i = root_5();
-                        template_effect(() => set_class(i, 1, `icon icon-${get2(item2).icon}`, "svelte-rnx3ie"));
-                        append($$anchor7, i);
+                        var i_1 = root_5();
+                        template_effect(() => set_class(i_1, 1, `icon icon-${get2(item2).icon}`, "svelte-rnx3ie"));
+                        append($$anchor7, i_1);
                       };
                       if_block(node_8, ($$render) => {
                         if (get2(fallbackIcon))
@@ -10086,9 +10350,9 @@ function ItemToolBar($$anchor, $$props) {
                         append($$anchor7, span_7);
                       };
                       var alternate_3 = ($$anchor7) => {
-                        var i_1 = root_5();
-                        template_effect(() => set_class(i_1, 1, `icon icon-${get2(item2).icon}`, "svelte-rnx3ie"));
-                        append($$anchor7, i_1);
+                        var i_2 = root_5();
+                        template_effect(() => set_class(i_2, 1, `icon icon-${get2(item2).icon}`, "svelte-rnx3ie"));
+                        append($$anchor7, i_2);
                       };
                       if_block(node_11, ($$render) => {
                         if (get2(fallbackIcon))

package/dist/components/PieAssessmentToolkit.custom-element.js

@@ -39,7 +39,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 
 // ../../node_modules/.bun/speech-rule-engine@5.0.0-rc.1/node_modules/speech-rule-engine/lib/sre.js
 var require_sre = __commonJS((exports, module) => {
-  var __dirname = "/Users/eelco.hillenius/dev/prj/pie/pie-players/node_modules/.bun/speech-rule-engine@5.0.0-rc.1/node_modules/speech-rule-engine/lib";
+  var __dirname = "/home/runner/work/pie-players/pie-players/node_modules/.bun/speech-rule-engine@5.0.0-rc.1/node_modules/speech-rule-engine/lib";
   (function(t, e) {
     typeof exports == "object" && typeof module == "object" ? module.exports = e() : typeof define == "function" && define.amd ? define([], e) : typeof exports == "object" ? exports.SRE = e() : t.SRE = e();
   })(exports, () => (() => {
@@ -18622,10 +18622,12 @@ var calculatorToolRegistration = {
             draggable: true,
             resizable: true,
             closeable: true,
-            initialWidth: 720,
-            initialHeight: 620,
-            minWidth: 360,
-            minHeight: 420
+            initialWidth: 380,
+            initialHeight: 420,
+            minWidth: 380,
+            minHeight: 420,
+            initialAlign: "bottom-right",
+            initialMargin: 16
           }
         }
       ],