@dnncommunity/dnn-elements 0.14.1 → 0.15.0-beta.3

package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.js

@@ -1,234 +1,234 @@
-import { Component, Host, h, Prop, Element, State, Method, Event } from '@stencil/core';
-import { getMovementFromEvent } from "../../utilities/mouseUtilities";
-/**
- * @slot default - The split divider control you want to use.
- * @slot left - The content of the left pane.
- * @slot right - The content of the right pane.
- */
-export class DnnVerticalSplitview {
-  constructor() {
-    /** The width of the splitter area. */
-    this.splitterWidth = 16;
-    /** The percentage position of the splitter in the container. */
-    this.splitWidthPercentage = 30;
-    this.leftWidth = 0;
-    this.rightWidth = 0;
-  }
-  /** Sets the width percentage of the divider */
-  async setSplitWidthPercentage(newWidth) {
-    const panes = this.element.shadowRoot.querySelectorAll(".pane");
-    requestAnimationFrame(() => {
-      panes.forEach(pane => pane.classList.add("transition"));
-      this.splitter.classList.add("transition");
-      requestAnimationFrame(() => {
-        const fullWidth = this.element.getBoundingClientRect().width;
-        let newLeft = fullWidth * newWidth / 100;
-        if (newLeft < 0) {
-          newLeft = 0;
-        }
-        if (newLeft > fullWidth) {
-          newLeft = fullWidth;
-        }
-        this.leftWidth = newLeft;
-        this.rightWidth = fullWidth - newLeft;
-        setTimeout(() => {
-          panes.forEach(pane => pane.classList.remove("transition"));
-          this.splitter.classList.remove("transition");
-        }, 300);
-      });
-    });
-  }
-  /** Gets the current divider position percentage. */
-  async getSplitWidthPercentage() {
-    const fullWidth = this.element.getBoundingClientRect().width;
-    return this.leftWidth / fullWidth;
-  }
-  componentDidLoad() {
-    requestAnimationFrame(() => {
-      this.resizeObserver = new ResizeObserver(() => {
-        const fullWidth = this.element.getBoundingClientRect().width;
-        this.leftWidth = fullWidth * this.splitWidthPercentage / 100;
-        this.rightWidth = fullWidth - this.leftWidth;
-        this.widthChanged.emit(this.splitWidthPercentage);
-      });
-      this.resizeObserver.observe(this.element);
-    });
-  }
-  handleMouseDown(event) {
-    event.preventDefault();
-    const handleDrag = (ev) => {
-      requestAnimationFrame(() => {
-        let fullWidth = this.element.getBoundingClientRect().width;
-        let { movementX } = getMovementFromEvent(ev, this.previousTouch);
-        let newLeft = this.leftWidth + movementX;
-        if (newLeft < 0) {
-          newLeft = 0;
-        }
-        if (newLeft > fullWidth) {
-          newLeft = fullWidth;
-        }
-        this.leftWidth = newLeft;
-        this.rightWidth = fullWidth - newLeft;
-        this.splitWidthPercentage = this.leftWidth / fullWidth * 100;
-      });
-    };
-    const handleDragFinished = () => {
-      document.removeEventListener("mousemove", handleDrag);
-      document.removeEventListener("touchmove", handleDrag);
-      const fullWidth = this.element.getBoundingClientRect().width;
-      const newPercentage = this.leftWidth / fullWidth * 100;
-      this.widthChanged.emit(newPercentage);
-    };
-    document.addEventListener("mouseup", handleDragFinished);
-    document.addEventListener("touchend", handleDragFinished);
-    document.addEventListener("mousemove", handleDrag);
-    document.addEventListener("touchmove", handleDrag);
-  }
-  handleKeyDown(e) {
-    let movementX = 0;
-    switch (e.key) {
-      case "ArrowLeft":
-        movementX = -10;
-        break;
-      case "ArrowRight":
-        movementX = 10;
-        break;
-      default:
-        return;
-    }
-    if (e.shiftKey) {
-      movementX = movementX * 10;
-    }
-    const fullWidth = this.element.getBoundingClientRect().width;
-    let newLeft = this.leftWidth + movementX;
-    if (newLeft < 0) {
-      newLeft = 0;
-    }
-    if (newLeft > fullWidth) {
-      newLeft = fullWidth;
-    }
-    this.leftWidth = newLeft;
-    this.rightWidth = fullWidth - this.leftWidth;
-  }
-  render() {
-    return (h(Host, null,
-      h("div", { class: "left pane", style: {
-          width: `${this.leftWidth}px`,
-        } },
-        h("slot", { name: "left" })),
-      h("button", { onMouseDown: e => this.handleMouseDown(e), onTouchStart: e => this.handleMouseDown(e), onKeyDown: e => this.handleKeyDown(e), ref: el => this.splitter = el, style: {
-          minWidth: `${this.splitterWidth.toString()}px`,
-          left: `${this.leftWidth - 2}px`,
-        } },
-        h("slot", null)),
-      h("div", { class: "right pane", style: {
-          width: `${this.rightWidth}px`,
-        } },
-        h("slot", { name: "right" }))));
-  }
-  static get is() { return "dnn-vertical-splitview"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["dnn-vertical-splitview.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["dnn-vertical-splitview.css"]
-  }; }
-  static get properties() { return {
-    "splitterWidth": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The width of the splitter area."
-      },
-      "attribute": "splitter-width",
-      "reflect": false,
-      "defaultValue": "16"
-    },
-    "splitWidthPercentage": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The percentage position of the splitter in the container."
-      },
-      "attribute": "split-width-percentage",
-      "reflect": false,
-      "defaultValue": "30"
-    }
-  }; }
-  static get states() { return {
-    "leftWidth": {},
-    "rightWidth": {}
-  }; }
-  static get events() { return [{
-      "method": "widthChanged",
-      "name": "widthChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the width of the divider changes."
-      },
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "setSplitWidthPercentage": {
-      "complexType": {
-        "signature": "(newWidth: number) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets the width percentage of the divider",
-        "tags": []
-      }
-    },
-    "getSplitWidthPercentage": {
-      "complexType": {
-        "signature": "() => Promise<number>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<number>"
-      },
-      "docs": {
-        "text": "Gets the current divider position percentage.",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "element"; }
-}
+import { Component, Host, h, Prop, Element, State, Method, Event } from '@stencil/core';
+import { getMovementFromEvent } from "../../utilities/mouseUtilities";
+/**
+ * @slot default - The split divider control you want to use.
+ * @slot left - The content of the left pane.
+ * @slot right - The content of the right pane.
+ */
+export class DnnVerticalSplitview {
+  constructor() {
+    /** The width of the splitter area. */
+    this.splitterWidth = 16;
+    /** The percentage position of the splitter in the container. */
+    this.splitWidthPercentage = 30;
+    this.leftWidth = 0;
+    this.rightWidth = 0;
+  }
+  /** Sets the width percentage of the divider */
+  async setSplitWidthPercentage(newWidth) {
+    const panes = this.element.shadowRoot.querySelectorAll(".pane");
+    requestAnimationFrame(() => {
+      panes.forEach(pane => pane.classList.add("transition"));
+      this.splitter.classList.add("transition");
+      requestAnimationFrame(() => {
+        const fullWidth = this.element.getBoundingClientRect().width;
+        let newLeft = fullWidth * newWidth / 100;
+        if (newLeft < 0) {
+          newLeft = 0;
+        }
+        if (newLeft > fullWidth) {
+          newLeft = fullWidth;
+        }
+        this.leftWidth = newLeft;
+        this.rightWidth = fullWidth - newLeft;
+        setTimeout(() => {
+          panes.forEach(pane => pane.classList.remove("transition"));
+          this.splitter.classList.remove("transition");
+        }, 300);
+      });
+    });
+  }
+  /** Gets the current divider position percentage. */
+  async getSplitWidthPercentage() {
+    const fullWidth = this.element.getBoundingClientRect().width;
+    return this.leftWidth / fullWidth;
+  }
+  componentDidLoad() {
+    requestAnimationFrame(() => {
+      this.resizeObserver = new ResizeObserver(() => {
+        const fullWidth = this.element.getBoundingClientRect().width;
+        this.leftWidth = fullWidth * this.splitWidthPercentage / 100;
+        this.rightWidth = fullWidth - this.leftWidth;
+        this.widthChanged.emit(this.splitWidthPercentage);
+      });
+      this.resizeObserver.observe(this.element);
+    });
+  }
+  handleMouseDown(event) {
+    event.preventDefault();
+    const handleDrag = (ev) => {
+      requestAnimationFrame(() => {
+        let fullWidth = this.element.getBoundingClientRect().width;
+        let { movementX } = getMovementFromEvent(ev, this.previousTouch);
+        let newLeft = this.leftWidth + movementX;
+        if (newLeft < 0) {
+          newLeft = 0;
+        }
+        if (newLeft > fullWidth) {
+          newLeft = fullWidth;
+        }
+        this.leftWidth = newLeft;
+        this.rightWidth = fullWidth - newLeft;
+        this.splitWidthPercentage = this.leftWidth / fullWidth * 100;
+      });
+    };
+    const handleDragFinished = () => {
+      document.removeEventListener("mousemove", handleDrag);
+      document.removeEventListener("touchmove", handleDrag);
+      const fullWidth = this.element.getBoundingClientRect().width;
+      const newPercentage = this.leftWidth / fullWidth * 100;
+      this.widthChanged.emit(newPercentage);
+    };
+    document.addEventListener("mouseup", handleDragFinished);
+    document.addEventListener("touchend", handleDragFinished);
+    document.addEventListener("mousemove", handleDrag);
+    document.addEventListener("touchmove", handleDrag);
+  }
+  handleKeyDown(e) {
+    let movementX = 0;
+    switch (e.key) {
+      case "ArrowLeft":
+        movementX = -10;
+        break;
+      case "ArrowRight":
+        movementX = 10;
+        break;
+      default:
+        return;
+    }
+    if (e.shiftKey) {
+      movementX = movementX * 10;
+    }
+    const fullWidth = this.element.getBoundingClientRect().width;
+    let newLeft = this.leftWidth + movementX;
+    if (newLeft < 0) {
+      newLeft = 0;
+    }
+    if (newLeft > fullWidth) {
+      newLeft = fullWidth;
+    }
+    this.leftWidth = newLeft;
+    this.rightWidth = fullWidth - this.leftWidth;
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "left pane", style: {
+          width: `${this.leftWidth}px`,
+        } },
+        h("slot", { name: "left" })),
+      h("button", { onMouseDown: e => this.handleMouseDown(e), onTouchStart: e => this.handleMouseDown(e), onKeyDown: e => this.handleKeyDown(e), ref: el => this.splitter = el, style: {
+          minWidth: `${this.splitterWidth.toString()}px`,
+          left: `${this.leftWidth - 2}px`,
+        } },
+        h("slot", null)),
+      h("div", { class: "right pane", style: {
+          width: `${this.rightWidth}px`,
+        } },
+        h("slot", { name: "right" }))));
+  }
+  static get is() { return "dnn-vertical-splitview"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-vertical-splitview.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-vertical-splitview.css"]
+  }; }
+  static get properties() { return {
+    "splitterWidth": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The width of the splitter area."
+      },
+      "attribute": "splitter-width",
+      "reflect": false,
+      "defaultValue": "16"
+    },
+    "splitWidthPercentage": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The percentage position of the splitter in the container."
+      },
+      "attribute": "split-width-percentage",
+      "reflect": false,
+      "defaultValue": "30"
+    }
+  }; }
+  static get states() { return {
+    "leftWidth": {},
+    "rightWidth": {}
+  }; }
+  static get events() { return [{
+      "method": "widthChanged",
+      "name": "widthChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires when the width of the divider changes."
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "setSplitWidthPercentage": {
+      "complexType": {
+        "signature": "(newWidth: number) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets the width percentage of the divider",
+        "tags": []
+      }
+    },
+    "getSplitWidthPercentage": {
+      "complexType": {
+        "signature": "() => Promise<number>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<number>"
+      },
+      "docs": {
+        "text": "Gets the current divider position percentage.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "element"; }
+}
 //# sourceMappingURL=dnn-vertical-splitview.js.map

package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.js.map

@@ -1 +1 @@
-{"version":3,"file":"dnn-vertical-splitview.js","sourceRoot":"","sources":["../../../src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, State, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\r\n\r\n/**\r\n * @slot default - The split divider control you want to use.\r\n * @slot left - The content of the left pane.\r\n * @slot right - The content of the right pane.\r\n */\r\n@Component({\r\n  tag: 'dnn-vertical-splitview',\r\n  styleUrl: 'dnn-vertical-splitview.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnVerticalSplitview {\r\n\r\n  /** The width of the splitter area. */\r\n  @Prop() splitterWidth = 16;\r\n\r\n  /** The percentage position of the splitter in the container. */\r\n  @Prop({mutable: true}) splitWidthPercentage = 30;\r\n  \r\n  private splitter!: HTMLButtonElement;\r\n\r\n  private resizeObserver: ResizeObserver;\r\n\r\n  /** Sets the width percentage of the divider */\r\n  @Method()\r\n  async setSplitWidthPercentage(newWidth: number) {\r\n    const panes = this.element.shadowRoot.querySelectorAll(\".pane\");\r\n    requestAnimationFrame(() => {\r\n      panes.forEach(pane => pane.classList.add(\"transition\"));\r\n      this.splitter.classList.add(\"transition\");\r\n      requestAnimationFrame(() => {\r\n        const fullWidth = this.element.getBoundingClientRect().width;\r\n        let newLeft = fullWidth * newWidth / 100;\r\n        if (newLeft < 0){\r\n          newLeft = 0;\r\n        }\r\n        if (newLeft > fullWidth){\r\n          newLeft = fullWidth;\r\n        }\r\n        this.leftWidth = newLeft;\r\n        this.rightWidth = fullWidth - newLeft;\r\n        setTimeout(() => {\r\n          panes.forEach(pane => pane.classList.remove(\"transition\"));\r\n          this.splitter.classList.remove(\"transition\");\r\n        }, 300);\r\n      });\r\n    });\r\n  }\r\n\r\n  /** Gets the current divider position percentage. */\r\n  @Method()\r\n  async getSplitWidthPercentage(){\r\n    const fullWidth = this.element.getBoundingClientRect().width;\r\n    return this.leftWidth / fullWidth;\r\n  }\r\n\r\n  /** Fires when the width of the divider changes. */\r\n  @Event() widthChanged: EventEmitter<number>;\r\n\r\n  @State() leftWidth = 0;\r\n  @State() rightWidth = 0;\r\n\r\n  @Element() element : HTMLDnnVerticalSplitviewElement;\r\n  \r\n  componentDidLoad() {\r\n    requestAnimationFrame(() => {\r\n      this.resizeObserver = new ResizeObserver(() => {\r\n        const fullWidth = this.element.getBoundingClientRect().width;\r\n        this.leftWidth = fullWidth * this.splitWidthPercentage / 100;\r\n        this.rightWidth = fullWidth - this.leftWidth;\r\n        this.widthChanged.emit(this.splitWidthPercentage);\r\n      });\r\n      this.resizeObserver.observe(this.element);\r\n    });\r\n  }\r\n  \r\n  private previousTouch: Touch;\r\n\r\n  private handleMouseDown(event: MouseEvent | TouchEvent) {\r\n    event.preventDefault();\r\n    const handleDrag = (ev: MouseEvent | TouchEvent) => {\r\n      requestAnimationFrame(() => {\r\n        let fullWidth = this.element.getBoundingClientRect().width;\r\n        let {movementX} = getMovementFromEvent(ev, this.previousTouch);\r\n        let newLeft = this.leftWidth + movementX;\r\n        if (newLeft < 0){\r\n          newLeft = 0;\r\n        }\r\n        if (newLeft > fullWidth){\r\n          newLeft = fullWidth;\r\n        }\r\n        this.leftWidth = newLeft;\r\n        this.rightWidth = fullWidth - newLeft;\r\n        this.splitWidthPercentage = this.leftWidth / fullWidth * 100;\r\n      });\r\n    }\r\n    const handleDragFinished = () => {\r\n      document.removeEventListener(\"mousemove\", handleDrag);\r\n      document.removeEventListener(\"touchmove\", handleDrag);\r\n      const fullWidth = this.element.getBoundingClientRect().width;\r\n      const newPercentage = this.leftWidth / fullWidth * 100;\r\n      this.widthChanged.emit(newPercentage);\r\n    };\r\n    document.addEventListener(\"mouseup\", handleDragFinished);\r\n    document.addEventListener(\"touchend\", handleDragFinished);\r\n    document.addEventListener(\"mousemove\", handleDrag);\r\n    document.addEventListener(\"touchmove\", handleDrag);\r\n  }\r\n\r\n  private handleKeyDown(e: KeyboardEvent): void {\r\n    let movementX = 0;\r\n    switch (e.key) {\r\n      case \"ArrowLeft\":\r\n        movementX = -10;\r\n        break;\r\n      case \"ArrowRight\":\r\n        movementX = 10;\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n    if (e.shiftKey){\r\n      movementX = movementX * 10;\r\n    }\r\n    const fullWidth = this.element.getBoundingClientRect().width;\r\n    let newLeft = this.leftWidth + movementX;\r\n    if (newLeft < 0){\r\n      newLeft = 0;\r\n    }\r\n    if (newLeft > fullWidth){\r\n      newLeft = fullWidth;\r\n    }\r\n    this.leftWidth = newLeft;\r\n    this.rightWidth = fullWidth - this.leftWidth;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n          <div class=\"left pane\" style={{\r\n              width: `${this.leftWidth}px`,\r\n            }}>\r\n            <slot name=\"left\"></slot>\r\n          </div>\r\n          <button\r\n            onMouseDown={e => this.handleMouseDown(e)}\r\n            onTouchStart={e => this.handleMouseDown(e)}\r\n            onKeyDown={e => this.handleKeyDown(e)}\r\n            ref={el => this.splitter = el}\r\n            style={{\r\n              minWidth: `${this.splitterWidth.toString()}px`,\r\n              left: `${this.leftWidth - 2}px`,\r\n            }}\r\n          >\r\n            <slot></slot>\r\n          </button>\r\n          <div\r\n            class=\"right pane\"\r\n            style={{\r\n              width: `${this.rightWidth}px`,\r\n            }}>\r\n            <slot name=\"right\"></slot>\r\n          </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"dnn-vertical-splitview.js","sourceRoot":"","sources":["../../../../src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, State, Method, Event, EventEmitter } from '@stencil/core';\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\n\n/**\n * @slot default - The split divider control you want to use.\n * @slot left - The content of the left pane.\n * @slot right - The content of the right pane.\n */\n@Component({\n  tag: 'dnn-vertical-splitview',\n  styleUrl: 'dnn-vertical-splitview.scss',\n  shadow: true,\n})\nexport class DnnVerticalSplitview {\n\n  /** The width of the splitter area. */\n  @Prop() splitterWidth = 16;\n\n  /** The percentage position of the splitter in the container. */\n  @Prop({mutable: true}) splitWidthPercentage = 30;\n  \n  private splitter!: HTMLButtonElement;\n\n  private resizeObserver: ResizeObserver;\n\n  /** Sets the width percentage of the divider */\n  @Method()\n  async setSplitWidthPercentage(newWidth: number) {\n    const panes = this.element.shadowRoot.querySelectorAll(\".pane\");\n    requestAnimationFrame(() => {\n      panes.forEach(pane => pane.classList.add(\"transition\"));\n      this.splitter.classList.add(\"transition\");\n      requestAnimationFrame(() => {\n        const fullWidth = this.element.getBoundingClientRect().width;\n        let newLeft = fullWidth * newWidth / 100;\n        if (newLeft < 0){\n          newLeft = 0;\n        }\n        if (newLeft > fullWidth){\n          newLeft = fullWidth;\n        }\n        this.leftWidth = newLeft;\n        this.rightWidth = fullWidth - newLeft;\n        setTimeout(() => {\n          panes.forEach(pane => pane.classList.remove(\"transition\"));\n          this.splitter.classList.remove(\"transition\");\n        }, 300);\n      });\n    });\n  }\n\n  /** Gets the current divider position percentage. */\n  @Method()\n  async getSplitWidthPercentage(){\n    const fullWidth = this.element.getBoundingClientRect().width;\n    return this.leftWidth / fullWidth;\n  }\n\n  /** Fires when the width of the divider changes. */\n  @Event() widthChanged: EventEmitter<number>;\n\n  @State() leftWidth = 0;\n  @State() rightWidth = 0;\n\n  @Element() element : HTMLDnnVerticalSplitviewElement;\n  \n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      this.resizeObserver = new ResizeObserver(() => {\n        const fullWidth = this.element.getBoundingClientRect().width;\n        this.leftWidth = fullWidth * this.splitWidthPercentage / 100;\n        this.rightWidth = fullWidth - this.leftWidth;\n        this.widthChanged.emit(this.splitWidthPercentage);\n      });\n      this.resizeObserver.observe(this.element);\n    });\n  }\n  \n  private previousTouch: Touch;\n\n  private handleMouseDown(event: MouseEvent | TouchEvent) {\n    event.preventDefault();\n    const handleDrag = (ev: MouseEvent | TouchEvent) => {\n      requestAnimationFrame(() => {\n        let fullWidth = this.element.getBoundingClientRect().width;\n        let {movementX} = getMovementFromEvent(ev, this.previousTouch);\n        let newLeft = this.leftWidth + movementX;\n        if (newLeft < 0){\n          newLeft = 0;\n        }\n        if (newLeft > fullWidth){\n          newLeft = fullWidth;\n        }\n        this.leftWidth = newLeft;\n        this.rightWidth = fullWidth - newLeft;\n        this.splitWidthPercentage = this.leftWidth / fullWidth * 100;\n      });\n    }\n    const handleDragFinished = () => {\n      document.removeEventListener(\"mousemove\", handleDrag);\n      document.removeEventListener(\"touchmove\", handleDrag);\n      const fullWidth = this.element.getBoundingClientRect().width;\n      const newPercentage = this.leftWidth / fullWidth * 100;\n      this.widthChanged.emit(newPercentage);\n    };\n    document.addEventListener(\"mouseup\", handleDragFinished);\n    document.addEventListener(\"touchend\", handleDragFinished);\n    document.addEventListener(\"mousemove\", handleDrag);\n    document.addEventListener(\"touchmove\", handleDrag);\n  }\n\n  private handleKeyDown(e: KeyboardEvent): void {\n    let movementX = 0;\n    switch (e.key) {\n      case \"ArrowLeft\":\n        movementX = -10;\n        break;\n      case \"ArrowRight\":\n        movementX = 10;\n        break;\n      default:\n        return;\n    }\n    if (e.shiftKey){\n      movementX = movementX * 10;\n    }\n    const fullWidth = this.element.getBoundingClientRect().width;\n    let newLeft = this.leftWidth + movementX;\n    if (newLeft < 0){\n      newLeft = 0;\n    }\n    if (newLeft > fullWidth){\n      newLeft = fullWidth;\n    }\n    this.leftWidth = newLeft;\n    this.rightWidth = fullWidth - this.leftWidth;\n  }\n\n  render() {\n    return (\n      <Host>\n          <div class=\"left pane\" style={{\n              width: `${this.leftWidth}px`,\n            }}>\n            <slot name=\"left\"></slot>\n          </div>\n          <button\n            onMouseDown={e => this.handleMouseDown(e)}\n            onTouchStart={e => this.handleMouseDown(e)}\n            onKeyDown={e => this.handleKeyDown(e)}\n            ref={el => this.splitter = el}\n            style={{\n              minWidth: `${this.splitterWidth.toString()}px`,\n              left: `${this.leftWidth - 2}px`,\n            }}\n          >\n            <slot></slot>\n          </button>\n          <div\n            class=\"right pane\"\n            style={{\n              width: `${this.rightWidth}px`,\n            }}>\n            <slot name=\"right\"></slot>\n          </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.stories.js

@@ -0,0 +1,75 @@
+import { html } from "lit-html";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import readme from './readme.md';
+import { injectStyles } from "../../../.storybook/utilities";
+export default {
+  title: 'Elements/Vertical Splitview',
+  component: 'dnn-vertical-splitview',
+  parameters: {
+    actions: {
+      handles: ['widthChanged'],
+    },
+    notes: readme,
+  },
+  argTypes: {
+    'splitter-width': {
+      control: 'number',
+    },
+    'split-width-percentage': {
+      control: 'number',
+    },
+  },
+  '--left-pane-background-color': {
+    control: 'color',
+  },
+  '--right-pane-background-color': {
+    control: 'color',
+  },
+};
+const Template = (args, context) => html `
+<dnn-vertical-splitview
+    id="split-view-demo"
+    style=${ifDefined(injectStyles(args, context))}
+    splitter-width=${ifDefined(args.splitterWidth)}
+    split-width-percentage=${ifDefined(args.splitWidthPercentage)}
+    @setSplitWidthPercentage>
+    <div style="height: 100%;
+        display: flex;
+        align-items: center;
+        box-shadow: inset 8px 0 8px -8px grey;
+        position: absolute;
+        top:0;">
+        <button
+            id="vertical-splitview-button"
+            style="margin: 0;
+            padding: 0;
+            width: 24px;
+            height: 24px;
+            border: 1px solid lightgray;
+            border-radius: 50%;
+            background-color: white;
+            box-shadow: 2px 2px 4px rgb(0 0 0 / 20%);
+            position: relative;
+            left: -12px;"
+        >
+        &lt;&gt;
+    </button>
+    </div>
+    <div slot="left" style="padding: 1em;">
+        <p>Laboris velit ullamco reprehenderit incididunt culpa id do voluptate non. Do et officia ad ullamco et. Aliqua dolor nostrud velit ex duis adipisicing sit consectetur ea id nostrud sit labore. Voluptate culpa ut anim pariatur.</p>
+        <p>Officia tempor anim nulla irure elit excepteur velit ea mollit non minim ad duis. Mollit in et sint adipisicing in tempor et fugiat. Laborum id pariatur ut deserunt anim esse ullamco officia dolor labore proident esse. Reprehenderit adipisicing eu irure officia labore sint velit. Anim consequat incididunt tempor excepteur dolor consequat eiusmod dolore adipisicing consectetur. Incididunt aliqua eiusmod sint proident nisi nostrud minim quis mollit tempor.</p>
+        <p>Anim aute duis excepteur ipsum mollit. Ea officia elit amet qui labore reprehenderit pariatur laboris amet exercitation eu et. Ad Lorem aute exercitation amet. Est excepteur occaecat id consequat consequat.</p>
+    </div>
+    <div slot="right" style="padding: 1em;">
+    <p>Deserunt occaecat incididunt ipsum consectetur ullamco nulla qui sunt nostrud. Laborum incididunt enim culpa exercitation nisi dolore duis do sit deserunt cillum ullamco. Et incididunt nisi consectetur et cillum proident consectetur dolor cupidatat mollit magna. Ut Lorem incididunt sit consequat culpa mollit do officia. Amet eu proident non enim eu id mollit et occaecat. Ut dolor consectetur Lorem minim Lorem culpa quis nostrud elit reprehenderit labore sint. Officia dolore dolore ullamco tempor cupidatat est amet.</p>
+    <p>Consequat cillum ex elit pariatur laborum ullamco qui est nisi tempor ullamco. Dolor proident ipsum cupidatat culpa quis est amet exercitation veniam proident nulla consequat quis anim. Lorem exercitation incididunt aliqua sit nisi.</p>
+    <p>Consectetur elit tempor Lorem nostrud non cillum aliquip. Culpa culpa eu est est id deserunt exercitation elit occaecat enim in velit. Reprehenderit nostrud reprehenderit ex cillum pariatur enim. Amet minim elit quis excepteur exercitation eiusmod amet labore. Officia culpa exercitation do eu in ad id qui eiusmod aliqua id ex. Aliqua ullamco fugiat ex magna ex dolore fugiat consectetur mollit consequat consequat nulla et. Ea eu Lorem non officia pariatur nostrud.</p>
+    </div>
+</dnn-vertical-splitview>
+    `;
+export const VerticalSplitview = Template.bind({});
+VerticalSplitview.args = {
+  splitterWidth: 16,
+  splitWidthPercentage: 30,
+};
+//# sourceMappingURL=dnn-vertical-splitview.stories.js.map

package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-vertical-splitview.stories.js","sourceRoot":"","sources":["../../../../src/components/dnn-vertical-splitview/dnn-vertical-splitview.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,eAAe;EACX,KAAK,EAAE,6BAA6B;EACpC,SAAS,EAAE,wBAAwB;EACnC,UAAU,EAAE;IACR,OAAO,EAAE;MACL,OAAO,EAAE,CAAC,cAAc,CAAC;KAC5B;IACD,KAAK,EAAG,MAAM;GACjB;EACD,QAAQ,EAAE;IACN,gBAAgB,EAAE;MACd,OAAO,EAAE,QAAQ;KACpB;IACD,wBAAwB,EAAE;MACtB,OAAO,EAAE,QAAQ;KAClB;GACF;EACD,8BAA8B,EAAE;IAC5B,OAAO,EAAE,OAAO;GACnB;EACD,+BAA+B,EAAE;IAC7B,OAAO,EAAE,OAAO;GACnB;CACA,CAAC;AAEV,MAAM,QAAQ,GAAG,CAAC,IAGjB,EAAE,OAAO,EAAE,EAAE,CACV,IAAI,CAAA;;;YAGI,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;qBAC7B,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;6BACrB,SAAS,CAAC,IAAI,CAAC,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmC5D,CAAC;AAEN,MAAM,CAAC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACnD,iBAAiB,CAAC,IAAI,GAAG;EACrB,aAAa,EAAE,EAAE;EACjB,oBAAoB,EAAE,EAAE;CAC3B,CAAC","sourcesContent":["import { html } from \"lit-html\";\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { Meta } from \"@storybook/web-components\";\nimport readme from './readme.md';\nimport { injectStyles } from \"../../../.storybook/utilities\";\n\nexport default {\n    title: 'Elements/Vertical Splitview',\n    component: 'dnn-vertical-splitview',\n    parameters: {\n        actions: {\n            handles: ['widthChanged'],\n        },\n        notes:  readme,\n    },\n    argTypes: {\n        'splitter-width': {\n            control: 'number',\n        },\n        'split-width-percentage': {\n            control: 'number',\n          },\n        },\n        '--left-pane-background-color': {\n            control: 'color',\n        },\n        '--right-pane-background-color': {\n            control: 'color',\n        },\n} as Meta;\n\nconst Template = (args: {\n    splitterWidth: number,\n    splitWidthPercentage: number,\n}, context) => \n    html`\n<dnn-vertical-splitview\n    id=\"split-view-demo\"\n    style=${ifDefined(injectStyles(args, context))}\n    splitter-width=${ifDefined(args.splitterWidth)}\n    split-width-percentage=${ifDefined(args.splitWidthPercentage)}\n    @setSplitWidthPercentage>\n    <div style=\"height: 100%;\n        display: flex;\n        align-items: center;\n        box-shadow: inset 8px 0 8px -8px grey;\n        position: absolute;\n        top:0;\">\n        <button\n            id=\"vertical-splitview-button\"\n            style=\"margin: 0;\n            padding: 0;\n            width: 24px;\n            height: 24px;\n            border: 1px solid lightgray;\n            border-radius: 50%;\n            background-color: white;\n            box-shadow: 2px 2px 4px rgb(0 0 0 / 20%);\n            position: relative;\n            left: -12px;\"\n        >\n        &lt;&gt;\n    </button>\n    </div>\n    <div slot=\"left\" style=\"padding: 1em;\">\n        <p>Laboris velit ullamco reprehenderit incididunt culpa id do voluptate non. Do et officia ad ullamco et. Aliqua dolor nostrud velit ex duis adipisicing sit consectetur ea id nostrud sit labore. Voluptate culpa ut anim pariatur.</p>\n        <p>Officia tempor anim nulla irure elit excepteur velit ea mollit non minim ad duis. Mollit in et sint adipisicing in tempor et fugiat. Laborum id pariatur ut deserunt anim esse ullamco officia dolor labore proident esse. Reprehenderit adipisicing eu irure officia labore sint velit. Anim consequat incididunt tempor excepteur dolor consequat eiusmod dolore adipisicing consectetur. Incididunt aliqua eiusmod sint proident nisi nostrud minim quis mollit tempor.</p>\n        <p>Anim aute duis excepteur ipsum mollit. Ea officia elit amet qui labore reprehenderit pariatur laboris amet exercitation eu et. Ad Lorem aute exercitation amet. Est excepteur occaecat id consequat consequat.</p>\n    </div>\n    <div slot=\"right\" style=\"padding: 1em;\">\n    <p>Deserunt occaecat incididunt ipsum consectetur ullamco nulla qui sunt nostrud. Laborum incididunt enim culpa exercitation nisi dolore duis do sit deserunt cillum ullamco. Et incididunt nisi consectetur et cillum proident consectetur dolor cupidatat mollit magna. Ut Lorem incididunt sit consequat culpa mollit do officia. Amet eu proident non enim eu id mollit et occaecat. Ut dolor consectetur Lorem minim Lorem culpa quis nostrud elit reprehenderit labore sint. Officia dolore dolore ullamco tempor cupidatat est amet.</p>\n    <p>Consequat cillum ex elit pariatur laborum ullamco qui est nisi tempor ullamco. Dolor proident ipsum cupidatat culpa quis est amet exercitation veniam proident nulla consequat quis anim. Lorem exercitation incididunt aliqua sit nisi.</p>\n    <p>Consectetur elit tempor Lorem nostrud non cillum aliquip. Culpa culpa eu est est id deserunt exercitation elit occaecat enim in velit. Reprehenderit nostrud reprehenderit ex cillum pariatur enim. Amet minim elit quis excepteur exercitation eiusmod amet labore. Officia culpa exercitation do eu in ad id qui eiusmod aliqua id ex. Aliqua ullamco fugiat ex magna ex dolore fugiat consectetur mollit consequat consequat nulla et. Ea eu Lorem non officia pariatur nostrud.</p>\n    </div>\n</dnn-vertical-splitview>\n    `;\n\nexport const VerticalSplitview = Template.bind({});\nVerticalSplitview.args = {\n    splitterWidth: 16,\n    splitWidthPercentage: 30,\n};\n"]}

package/dist/collection/index.js

@@ -1,3 +1,3 @@
-export * from './utilities/debounce';
-export * from './utilities/dnnServicesFramework';
+export * from './utilities/debounce';
+export * from './utilities/dnnServicesFramework';
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,sBAAsB,CAAC;AACrC,cAAc,kCAAkC,CAAC","sourcesContent":["export { Components, JSX } from './components';\r\nexport * from './utilities/debounce';\r\nexport * from './utilities/dnnServicesFramework';\r\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,sBAAsB,CAAC;AACrC,cAAc,kCAAkC,CAAC","sourcesContent":["export { Components, JSX } from './components';\nexport * from './utilities/debounce';\nexport * from './utilities/dnnServicesFramework';\n"]}