feat(dialog): add resizable and dragEnabled properties (#9804)

**Related Issue:** #9875

## Summary

- adds `dragEnabled` property
- adds `resizable` property
- uses interact.js for dragging/resizing
  - https://interactjs.io/
  - https://www.npmjs.com/package/interactjs 
- fix animations when using dragging 
- adds e2e tests
  - added themed e2e test
- adds storybook

packages/calcite-components/package.json

@@ -69,6 +69,7 @@
     "composed-offset-position": "0.0.6",
     "dayjs": "1.11.12",
     "focus-trap": "7.5.4",
+    "interactjs": "1.10.27",
     "lodash-es": "4.17.21",
     "sortablejs": "1.15.1",
     "timezone-groups": "0.9.1",

packages/calcite-components/src/components.d.ts

@@ -1696,6 +1696,10 @@ export namespace Components {
           * A description for the component.
          */
         "description": string;
+        /**
+          * When `true`, the component is draggable.
+         */
+        "dragEnabled": boolean;
         /**
           * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed
          */
@@ -1753,6 +1757,10 @@ export namespace Components {
           * Specifies the placement of the dialog.
          */
         "placement": DialogPlacement;
+        /**
+          * When `true`, the component is resizable.
+         */
+        "resizable": boolean;
         /**
           * Specifies the size of the component.
          */
@@ -9703,6 +9711,10 @@ declare namespace LocalJSX {
           * A description for the component.
          */
         "description"?: string;
+        /**
+          * When `true`, the component is draggable.
+         */
+        "dragEnabled"?: boolean;
         /**
           * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed
          */
@@ -9780,6 +9792,10 @@ declare namespace LocalJSX {
           * Specifies the placement of the dialog.
          */
         "placement"?: DialogPlacement;
+        /**
+          * When `true`, the component is resizable.
+         */
+        "resizable"?: boolean;
         /**
           * Specifies the size of the component.
          */

packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages.json

@@ -1,3 +1,5 @@
 {
-  "close": "Close"
+  "close": "Close",
+  "resizeEnabled": "Resize enabled. Use the shift and arrow keys to resize the dialog.",
+  "dragEnabled": "Drag enabled. Use the arrow keys to move the dialog."
 }

packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_en.json

@@ -1,3 +1,5 @@
 {
-  "close": "Close"
+  "close": "Close",
+  "resizeEnabled": "Resize enabled. Use the shift and arrow keys to resize the dialog.",
+  "dragEnabled": "Drag enabled. Use the arrow keys to move the dialog."
 }