@dnncommunity/dnn-elements 0.14.0-beta.5 → 0.14.0-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/cjs/dnn-button_16.cjs.entry.js +7 -2
  2. package/dist/cjs/dnn-button_16.cjs.entry.js.map +1 -1
  3. package/dist/cjs/dnn-vertical-splitview.cjs.entry.js +7 -2
  4. package/dist/cjs/dnn-vertical-splitview.cjs.entry.js.map +1 -1
  5. package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.css +7 -1
  6. package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.js +6 -1
  7. package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.js.map +1 -1
  8. package/dist/dnn/dnn-vertical-splitview.entry.js +7 -2
  9. package/dist/dnn/dnn-vertical-splitview.entry.js.map +1 -1
  10. package/dist/dnn/dnn-vertical-splitview.system.entry.js +1 -1
  11. package/dist/dnn/dnn-vertical-splitview.system.entry.js.map +1 -1
  12. package/dist/dnn/{p-38b03e27.system.entry.js → p-24a552b2.system.entry.js} +2 -2
  13. package/dist/dnn/p-24a552b2.system.entry.js.map +1 -0
  14. package/dist/dnn/p-3fbd1ad6.system.js +1 -1
  15. package/dist/dnn/{p-a8e7290b.entry.js → p-bdfc3291.entry.js} +2 -2
  16. package/dist/dnn/p-bdfc3291.entry.js.map +1 -0
  17. package/dist/esm/dnn-button_16.entry.js +7 -2
  18. package/dist/esm/dnn-button_16.entry.js.map +1 -1
  19. package/dist/esm/dnn-vertical-splitview.entry.js +7 -2
  20. package/dist/esm/dnn-vertical-splitview.entry.js.map +1 -1
  21. package/dist/esm-es5/dnn-button_16.entry.js +1 -1
  22. package/dist/esm-es5/dnn-button_16.entry.js.map +1 -1
  23. package/dist/types/components/dnn-vertical-splitview/dnn-vertical-splitview.d.ts +1 -0
  24. package/package.json +1 -1
  25. package/dist/dnn/p-38b03e27.system.entry.js.map +0 -1
  26. package/dist/dnn/p-a8e7290b.entry.js.map +0 -1
package/dist/cjs/dnn-vertical-splitview.cjs.entry.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-ba8b86b1.js');
6
6
  const mouseUtilities = require('./mouseUtilities-75be531a.js');
7
7
 
8
- const dnnVerticalSplitviewCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;margin:0 auto;--left-pane-background-color:transparent;--right-pane-background-color:transparent}button{background-color:var(--right-pane-background-color);border:none;margin:0;padding:0;cursor:ew-resize}.pane{overflow-y:auto}.pane.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane.left{background-color:var(--left-pane-background-color)}.pane.right{background-color:var(--right-pane-background-color);-ms-flex-positive:1;flex-grow:1}";
8
+ const dnnVerticalSplitviewCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;margin:0 auto;position:relative;--left-pane-background-color:transparent;--right-pane-background-color:transparent}button{border:none;margin:0;padding:0;cursor:ew-resize;position:absolute;height:100%;background-color:transparent}button.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane{overflow-y:auto}.pane.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane.left{background-color:var(--left-pane-background-color)}.pane.right{background-color:var(--right-pane-background-color);-ms-flex-positive:1;flex-grow:1}";
9
9
 
10
10
  let DnnVerticalSplitview = class {
11
11
  constructor(hostRef) {
@@ -23,6 +23,7 @@ let DnnVerticalSplitview = class {
23
23
  const panes = this.element.shadowRoot.querySelectorAll(".pane");
24
24
  requestAnimationFrame(() => {
25
25
  panes.forEach(pane => pane.classList.add("transition"));
26
+ this.splitter.classList.add("transition");
26
27
  requestAnimationFrame(() => {
27
28
  const fullWidth = this.element.getBoundingClientRect().width;
28
29
  let newLeft = fullWidth * newWidth / 100;
@@ -36,6 +37,7 @@ let DnnVerticalSplitview = class {
36
37
  this.rightWidth = fullWidth - newLeft;
37
38
  setTimeout(() => {
38
39
  panes.forEach(pane => pane.classList.remove("transition"));
40
+ this.splitter.classList.remove("transition");
39
41
  }, 300);
40
42
  });
41
43
  });
@@ -109,7 +111,10 @@ let DnnVerticalSplitview = class {
109
111
  render() {
110
112
  return (index.h(index.Host, null, index.h("div", { class: "left pane", style: {
111
113
  width: `${this.leftWidth}px`,
112
- } }, index.h("slot", { name: "left" })), index.h("button", { onMouseDown: e => this.handleMouseDown(e), onTouchStart: e => this.handleMouseDown(e), onKeyDown: e => this.handleKeyDown(e), style: { minWidth: `${this.splitterWidth.toString()}px` } }, index.h("slot", null)), index.h("div", { class: "right pane", style: {
114
+ } }, index.h("slot", { name: "left" })), index.h("button", { onMouseDown: e => this.handleMouseDown(e), onTouchStart: e => this.handleMouseDown(e), onKeyDown: e => this.handleKeyDown(e), ref: el => this.splitter = el, style: {
115
+ minWidth: `${this.splitterWidth.toString()}px`,
116
+ left: `${this.leftWidth - 2}px`,
117
+ } }, index.h("slot", null)), index.h("div", { class: "right pane", style: {
113
118
  width: `${this.rightWidth}px`,
114
119
  } }, index.h("slot", { name: "right" }))));
115
120
  }
package/dist/cjs/dnn-vertical-splitview.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"dnn-vertical-splitview.entry.cjs.js","mappings":"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","names":["getMovementFromEvent","h","Host"],"sources":["./src/components/dnn-vertical-splitview/dnn-vertical-splitview.scss?tag=dnn-vertical-splitview&encapsulation=shadow","./src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx"],"sourcesContent":[":host {\r\n display: flex;\r\n align-items: stretch;\r\n margin: 0 auto;\r\n\r\n /** @prop --left-pane-background-color: Allows customizing the left pane background-color */\r\n --left-pane-background-color: transparent;\r\n\r\n /** @prop --right-pane-background-color: Allows customizing the right pane background-color */\r\n --right-pane-background-color: transparent;\r\n}\r\n\r\nbutton{\r\n background-color: var(--right-pane-background-color);\r\n border: none;\r\n margin:0;\r\n padding:0;\r\n cursor: ew-resize;\r\n}\r\n\r\n.pane{\r\n overflow-y: auto;\r\n &.transition{\r\n transition: all 300ms ease-in-out;\r\n }\r\n &.left{\r\n background-color: var(--left-pane-background-color);\r\n }\r\n &.right{\r\n background-color: var(--right-pane-background-color);\r\n flex-grow: 1;\r\n }\r\n}","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() splitWidthPercentage = 30;\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 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 }, 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 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 }\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 let {movementX} = getMovementFromEvent(ev, this.previousTouch);\r\n let 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 - newLeft;\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 style={{minWidth: `${this.splitterWidth.toString()}px`}}\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}
1
+ {"file":"dnn-vertical-splitview.entry.cjs.js","mappings":"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","names":["getMovementFromEvent","h","Host"],"sources":["./src/components/dnn-vertical-splitview/dnn-vertical-splitview.scss?tag=dnn-vertical-splitview&encapsulation=shadow","./src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx"],"sourcesContent":[":host {\r\n display: flex;\r\n align-items: stretch;\r\n margin: 0 auto;\r\n position: relative;\r\n\r\n /** @prop --left-pane-background-color: Allows customizing the left pane background-color */\r\n --left-pane-background-color: transparent;\r\n\r\n /** @prop --right-pane-background-color: Allows customizing the right pane background-color */\r\n --right-pane-background-color: transparent;\r\n}\r\n\r\nbutton{\r\n border: none;\r\n margin:0;\r\n padding:0;\r\n cursor: ew-resize;\r\n position: absolute;\r\n height: 100%;\r\n background-color: transparent;\r\n &.transition{\r\n transition: all 300ms ease-in-out;\r\n }\r\n}\r\n\r\n\r\n.pane{\r\n overflow-y: auto;\r\n &.transition{\r\n transition: all 300ms ease-in-out;\r\n }\r\n &.left{\r\n background-color: var(--left-pane-background-color);\r\n }\r\n &.right{\r\n background-color: var(--right-pane-background-color);\r\n flex-grow: 1;\r\n }\r\n}","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() splitWidthPercentage = 30;\r\n \r\n private splitter!: HTMLButtonElement;\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 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 }\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 let {movementX} = getMovementFromEvent(ev, this.previousTouch);\r\n let 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 - newLeft;\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}
package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.css CHANGED
@@ -2,6 +2,7 @@
2
2
  display: flex;
3
3
  align-items: stretch;
4
4
  margin: 0 auto;
5
+ position: relative;
5
6
  /** @prop --left-pane-background-color: Allows customizing the left pane background-color */
6
7
  --left-pane-background-color: transparent;
7
8
  /** @prop --right-pane-background-color: Allows customizing the right pane background-color */
@@ -9,11 +10,16 @@
9
10
  }
10
11
 
11
12
  button {
12
- background-color: var(--right-pane-background-color);
13
13
  border: none;
14
14
  margin: 0;
15
15
  padding: 0;
16
16
  cursor: ew-resize;
17
+ position: absolute;
18
+ height: 100%;
19
+ background-color: transparent;
20
+ }
21
+ button.transition {
22
+ transition: all 300ms ease-in-out;
17
23
  }
18
24
 
19
25
  .pane {
package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.js CHANGED
@@ -19,6 +19,7 @@ export class DnnVerticalSplitview {
19
19
  const panes = this.element.shadowRoot.querySelectorAll(".pane");
20
20
  requestAnimationFrame(() => {
21
21
  panes.forEach(pane => pane.classList.add("transition"));
22
+ this.splitter.classList.add("transition");
22
23
  requestAnimationFrame(() => {
23
24
  const fullWidth = this.element.getBoundingClientRect().width;
24
25
  let newLeft = fullWidth * newWidth / 100;
@@ -32,6 +33,7 @@ export class DnnVerticalSplitview {
32
33
  this.rightWidth = fullWidth - newLeft;
33
34
  setTimeout(() => {
34
35
  panes.forEach(pane => pane.classList.remove("transition"));
36
+ this.splitter.classList.remove("transition");
35
37
  }, 300);
36
38
  });
37
39
  });
@@ -108,7 +110,10 @@ export class DnnVerticalSplitview {
108
110
  width: `${this.leftWidth}px`,
109
111
  } },
110
112
  h("slot", { name: "left" })),
111
- h("button", { onMouseDown: e => this.handleMouseDown(e), onTouchStart: e => this.handleMouseDown(e), onKeyDown: e => this.handleKeyDown(e), style: { minWidth: `${this.splitterWidth.toString()}px` } },
113
+ h("button", { onMouseDown: e => this.handleMouseDown(e), onTouchStart: e => this.handleMouseDown(e), onKeyDown: e => this.handleKeyDown(e), ref: el => this.splitter = el, style: {
114
+ minWidth: `${this.splitterWidth.toString()}px`,
115
+ left: `${this.leftWidth - 2}px`,
116
+ } },
112
117
  h("slot", null)),
113
118
  h("div", { class: "right pane", style: {
114
119
  width: `${this.rightWidth}px`,
package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.js.map CHANGED
@@ -1 +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() splitWidthPercentage = 30;\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 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 }, 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 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 }\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 let {movementX} = getMovementFromEvent(ev, this.previousTouch);\r\n let 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 - newLeft;\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 style={{minWidth: `${this.splitterWidth.toString()}px`}}\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"]}
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() splitWidthPercentage = 30;\r\n \r\n private splitter!: HTMLButtonElement;\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 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 }\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 let {movementX} = getMovementFromEvent(ev, this.previousTouch);\r\n let 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 - newLeft;\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"]}
package/dist/dnn/dnn-vertical-splitview.entry.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-3e56049b.js';
2
2
  import { g as getMovementFromEvent } from './mouseUtilities-817973b4.js';
3
3
 
4
- const dnnVerticalSplitviewCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;margin:0 auto;--left-pane-background-color:transparent;--right-pane-background-color:transparent}button{background-color:var(--right-pane-background-color);border:none;margin:0;padding:0;cursor:ew-resize}.pane{overflow-y:auto}.pane.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane.left{background-color:var(--left-pane-background-color)}.pane.right{background-color:var(--right-pane-background-color);-ms-flex-positive:1;flex-grow:1}";
4
+ const dnnVerticalSplitviewCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;margin:0 auto;position:relative;--left-pane-background-color:transparent;--right-pane-background-color:transparent}button{border:none;margin:0;padding:0;cursor:ew-resize;position:absolute;height:100%;background-color:transparent}button.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane{overflow-y:auto}.pane.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane.left{background-color:var(--left-pane-background-color)}.pane.right{background-color:var(--right-pane-background-color);-ms-flex-positive:1;flex-grow:1}";
5
5
 
6
6
  let DnnVerticalSplitview = class {
7
7
  constructor(hostRef) {
@@ -19,6 +19,7 @@ let DnnVerticalSplitview = class {
19
19
  const panes = this.element.shadowRoot.querySelectorAll(".pane");
20
20
  requestAnimationFrame(() => {
21
21
  panes.forEach(pane => pane.classList.add("transition"));
22
+ this.splitter.classList.add("transition");
22
23
  requestAnimationFrame(() => {
23
24
  const fullWidth = this.element.getBoundingClientRect().width;
24
25
  let newLeft = fullWidth * newWidth / 100;
@@ -32,6 +33,7 @@ let DnnVerticalSplitview = class {
32
33
  this.rightWidth = fullWidth - newLeft;
33
34
  setTimeout(() => {
34
35
  panes.forEach(pane => pane.classList.remove("transition"));
36
+ this.splitter.classList.remove("transition");
35
37
  }, 300);
36
38
  });
37
39
  });
@@ -105,7 +107,10 @@ let DnnVerticalSplitview = class {
105
107
  render() {
106
108
  return (h(Host, null, h("div", { class: "left pane", style: {
107
109
  width: `${this.leftWidth}px`,
108
- } }, h("slot", { name: "left" })), h("button", { onMouseDown: e => this.handleMouseDown(e), onTouchStart: e => this.handleMouseDown(e), onKeyDown: e => this.handleKeyDown(e), style: { minWidth: `${this.splitterWidth.toString()}px` } }, h("slot", null)), h("div", { class: "right pane", style: {
110
+ } }, 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: {
111
+ minWidth: `${this.splitterWidth.toString()}px`,
112
+ left: `${this.leftWidth - 2}px`,
113
+ } }, h("slot", null)), h("div", { class: "right pane", style: {
109
114
  width: `${this.rightWidth}px`,
110
115
  } }, h("slot", { name: "right" }))));
111
116
  }
package/dist/dnn/dnn-vertical-splitview.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"dnn-vertical-splitview.entry.esm.js","mappings":"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","names":[],"sources":["./src/components/dnn-vertical-splitview/dnn-vertical-splitview.scss?tag=dnn-vertical-splitview&encapsulation=shadow","./src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx"],"sourcesContent":[":host {\r\n display: flex;\r\n align-items: stretch;\r\n margin: 0 auto;\r\n\r\n /** @prop --left-pane-background-color: Allows customizing the left pane background-color */\r\n --left-pane-background-color: transparent;\r\n\r\n /** @prop --right-pane-background-color: Allows customizing the right pane background-color */\r\n --right-pane-background-color: transparent;\r\n}\r\n\r\nbutton{\r\n background-color: var(--right-pane-background-color);\r\n border: none;\r\n margin:0;\r\n padding:0;\r\n cursor: ew-resize;\r\n}\r\n\r\n.pane{\r\n overflow-y: auto;\r\n &.transition{\r\n transition: all 300ms ease-in-out;\r\n }\r\n &.left{\r\n background-color: var(--left-pane-background-color);\r\n }\r\n &.right{\r\n background-color: var(--right-pane-background-color);\r\n flex-grow: 1;\r\n }\r\n}","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() splitWidthPercentage = 30;\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 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 }, 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 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 }\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 let {movementX} = getMovementFromEvent(ev, this.previousTouch);\r\n let 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 - newLeft;\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 style={{minWidth: `${this.splitterWidth.toString()}px`}}\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}
1
+ {"file":"dnn-vertical-splitview.entry.esm.js","mappings":"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","names":[],"sources":["./src/components/dnn-vertical-splitview/dnn-vertical-splitview.scss?tag=dnn-vertical-splitview&encapsulation=shadow","./src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx"],"sourcesContent":[":host {\r\n display: flex;\r\n align-items: stretch;\r\n margin: 0 auto;\r\n position: relative;\r\n\r\n /** @prop --left-pane-background-color: Allows customizing the left pane background-color */\r\n --left-pane-background-color: transparent;\r\n\r\n /** @prop --right-pane-background-color: Allows customizing the right pane background-color */\r\n --right-pane-background-color: transparent;\r\n}\r\n\r\nbutton{\r\n border: none;\r\n margin:0;\r\n padding:0;\r\n cursor: ew-resize;\r\n position: absolute;\r\n height: 100%;\r\n background-color: transparent;\r\n &.transition{\r\n transition: all 300ms ease-in-out;\r\n }\r\n}\r\n\r\n\r\n.pane{\r\n overflow-y: auto;\r\n &.transition{\r\n transition: all 300ms ease-in-out;\r\n }\r\n &.left{\r\n background-color: var(--left-pane-background-color);\r\n }\r\n &.right{\r\n background-color: var(--right-pane-background-color);\r\n flex-grow: 1;\r\n }\r\n}","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() splitWidthPercentage = 30;\r\n \r\n private splitter!: HTMLButtonElement;\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 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 }\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 let {movementX} = getMovementFromEvent(ev, this.previousTouch);\r\n let 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 - newLeft;\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}
package/dist/dnn/dnn-vertical-splitview.system.entry.js CHANGED
@@ -1,2 +1,2 @@
1
- var __awaiter=this&&this.__awaiter||function(t,e,n,i){function r(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,o){function a(t){try{s(i.next(t))}catch(t){o(t)}}function u(t){try{s(i["throw"](t))}catch(t){o(t)}}function s(t){t.done?n(t.value):r(t.value).then(a,u)}s((i=i.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,r,o,a;return a={next:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function u(t){return function(e){return s([t,e])}}function s(a){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,r&&(o=a[0]&2?r["return"]:a[0]?r["throw"]||((o=r["return"])&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;if(r=0,o)a=[a[0]&2,o.value];switch(a[0]){case 0:case 1:o=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;r=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!o||a[1]>o[0]&&a[1]<o[3])){n.label=a[1];break}if(a[0]===6&&n.label<o[1]){n.label=o[1];o=a;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(a);break}if(o[2])n.ops.pop();n.trys.pop();continue}a=e.call(t,n)}catch(t){a=[6,t];r=0}finally{i=o=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./index-5c2c8f16.system.js","./mouseUtilities-e7e4e78f.system.js"],(function(t){"use strict";var e,n,i,r,o,a;return{setters:[function(t){e=t.r;n=t.e;i=t.h;r=t.f;o=t.g},function(t){a=t.g}],execute:function(){var u=":host{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;margin:0 auto;--left-pane-background-color:transparent;--right-pane-background-color:transparent}button{background-color:var(--right-pane-background-color);border:none;margin:0;padding:0;cursor:ew-resize}.pane{overflow-y:auto}.pane.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane.left{background-color:var(--left-pane-background-color)}.pane.right{background-color:var(--right-pane-background-color);-ms-flex-positive:1;flex-grow:1}";var s=t("dnn_vertical_splitview",function(){function t(t){e(this,t);this.widthChanged=n(this,"widthChanged",7);this.splitterWidth=16;this.splitWidthPercentage=30;this.leftWidth=0;this.rightWidth=0}t.prototype.setSplitWidthPercentage=function(t){return __awaiter(this,void 0,void 0,(function(){var e;var n=this;return __generator(this,(function(i){e=this.element.shadowRoot.querySelectorAll(".pane");requestAnimationFrame((function(){e.forEach((function(t){return t.classList.add("transition")}));requestAnimationFrame((function(){var i=n.element.getBoundingClientRect().width;var r=i*t/100;if(r<0){r=0}if(r>i){r=i}n.leftWidth=r;n.rightWidth=i-r;setTimeout((function(){e.forEach((function(t){return t.classList.remove("transition")}))}),300)}))}));return[2]}))}))};t.prototype.getSplitWidthPercentage=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){t=this.element.getBoundingClientRect().width;return[2,this.leftWidth/t]}))}))};t.prototype.componentDidLoad=function(){var t=this;requestAnimationFrame((function(){var e=t.element.getBoundingClientRect().width;t.leftWidth=e*t.splitWidthPercentage/100;t.rightWidth=e-t.leftWidth;t.widthChanged.emit(t.splitWidthPercentage)}))};t.prototype.handleMouseDown=function(t){var e=this;t.preventDefault();var n=function(t){var n=a(t,e.previousTouch).movementX;var i=e.element.getBoundingClientRect().width;var r=e.leftWidth+n;if(r<0){r=0}if(r>i){r=i}e.leftWidth=r;e.rightWidth=i-r};var i=function(){document.removeEventListener("mousemove",n);document.removeEventListener("touchmove",n);var t=e.element.getBoundingClientRect().width;var i=e.leftWidth/t*100;e.widthChanged.emit(i)};document.addEventListener("mouseup",i);document.addEventListener("touchend",i);document.addEventListener("mousemove",n);document.addEventListener("touchmove",n)};t.prototype.handleKeyDown=function(t){var e=0;switch(t.key){case"ArrowLeft":e=-10;break;case"ArrowRight":e=10;break;default:return}if(t.shiftKey){e=e*10}var n=this.element.getBoundingClientRect().width;var i=this.leftWidth+e;if(i<0){i=0}if(i>n){i=n}this.leftWidth=i;this.rightWidth=n-this.leftWidth};t.prototype.render=function(){var t=this;return i(r,null,i("div",{class:"left pane",style:{width:this.leftWidth+"px"}},i("slot",{name:"left"})),i("button",{onMouseDown:function(e){return t.handleMouseDown(e)},onTouchStart:function(e){return t.handleMouseDown(e)},onKeyDown:function(e){return t.handleKeyDown(e)},style:{minWidth:this.splitterWidth.toString()+"px"}},i("slot",null)),i("div",{class:"right pane",style:{width:this.rightWidth+"px"}},i("slot",{name:"right"})))};Object.defineProperty(t.prototype,"element",{get:function(){return o(this)},enumerable:false,configurable:true});return t}());s.style=u}}}));
1
+ var __awaiter=this&&this.__awaiter||function(t,e,n,i){function r(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,o){function a(t){try{u(i.next(t))}catch(t){o(t)}}function s(t){try{u(i["throw"](t))}catch(t){o(t)}}function u(t){t.done?n(t.value):r(t.value).then(a,s)}u((i=i.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,r,o,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(e){return u([t,e])}}function u(a){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,r&&(o=a[0]&2?r["return"]:a[0]?r["throw"]||((o=r["return"])&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;if(r=0,o)a=[a[0]&2,o.value];switch(a[0]){case 0:case 1:o=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;r=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!o||a[1]>o[0]&&a[1]<o[3])){n.label=a[1];break}if(a[0]===6&&n.label<o[1]){n.label=o[1];o=a;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(a);break}if(o[2])n.ops.pop();n.trys.pop();continue}a=e.call(t,n)}catch(t){a=[6,t];r=0}finally{i=o=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./index-5c2c8f16.system.js","./mouseUtilities-e7e4e78f.system.js"],(function(t){"use strict";var e,n,i,r,o,a;return{setters:[function(t){e=t.r;n=t.e;i=t.h;r=t.f;o=t.g},function(t){a=t.g}],execute:function(){var s=":host{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;margin:0 auto;position:relative;--left-pane-background-color:transparent;--right-pane-background-color:transparent}button{border:none;margin:0;padding:0;cursor:ew-resize;position:absolute;height:100%;background-color:transparent}button.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane{overflow-y:auto}.pane.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane.left{background-color:var(--left-pane-background-color)}.pane.right{background-color:var(--right-pane-background-color);-ms-flex-positive:1;flex-grow:1}";var u=t("dnn_vertical_splitview",function(){function t(t){e(this,t);this.widthChanged=n(this,"widthChanged",7);this.splitterWidth=16;this.splitWidthPercentage=30;this.leftWidth=0;this.rightWidth=0}t.prototype.setSplitWidthPercentage=function(t){return __awaiter(this,void 0,void 0,(function(){var e;var n=this;return __generator(this,(function(i){e=this.element.shadowRoot.querySelectorAll(".pane");requestAnimationFrame((function(){e.forEach((function(t){return t.classList.add("transition")}));n.splitter.classList.add("transition");requestAnimationFrame((function(){var i=n.element.getBoundingClientRect().width;var r=i*t/100;if(r<0){r=0}if(r>i){r=i}n.leftWidth=r;n.rightWidth=i-r;setTimeout((function(){e.forEach((function(t){return t.classList.remove("transition")}));n.splitter.classList.remove("transition")}),300)}))}));return[2]}))}))};t.prototype.getSplitWidthPercentage=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){t=this.element.getBoundingClientRect().width;return[2,this.leftWidth/t]}))}))};t.prototype.componentDidLoad=function(){var t=this;requestAnimationFrame((function(){var e=t.element.getBoundingClientRect().width;t.leftWidth=e*t.splitWidthPercentage/100;t.rightWidth=e-t.leftWidth;t.widthChanged.emit(t.splitWidthPercentage)}))};t.prototype.handleMouseDown=function(t){var e=this;t.preventDefault();var n=function(t){var n=a(t,e.previousTouch).movementX;var i=e.element.getBoundingClientRect().width;var r=e.leftWidth+n;if(r<0){r=0}if(r>i){r=i}e.leftWidth=r;e.rightWidth=i-r};var i=function(){document.removeEventListener("mousemove",n);document.removeEventListener("touchmove",n);var t=e.element.getBoundingClientRect().width;var i=e.leftWidth/t*100;e.widthChanged.emit(i)};document.addEventListener("mouseup",i);document.addEventListener("touchend",i);document.addEventListener("mousemove",n);document.addEventListener("touchmove",n)};t.prototype.handleKeyDown=function(t){var e=0;switch(t.key){case"ArrowLeft":e=-10;break;case"ArrowRight":e=10;break;default:return}if(t.shiftKey){e=e*10}var n=this.element.getBoundingClientRect().width;var i=this.leftWidth+e;if(i<0){i=0}if(i>n){i=n}this.leftWidth=i;this.rightWidth=n-this.leftWidth};t.prototype.render=function(){var t=this;return i(r,null,i("div",{class:"left pane",style:{width:this.leftWidth+"px"}},i("slot",{name:"left"})),i("button",{onMouseDown:function(e){return t.handleMouseDown(e)},onTouchStart:function(e){return t.handleMouseDown(e)},onKeyDown:function(e){return t.handleKeyDown(e)},ref:function(e){return t.splitter=e},style:{minWidth:this.splitterWidth.toString()+"px",left:this.leftWidth-2+"px"}},i("slot",null)),i("div",{class:"right pane",style:{width:this.rightWidth+"px"}},i("slot",{name:"right"})))};Object.defineProperty(t.prototype,"element",{get:function(){return o(this)},enumerable:false,configurable:true});return t}());u.style=s}}}));
2
2
  //# sourceMappingURL=dnn-vertical-splitview.system.entry.js.map
package/dist/dnn/dnn-vertical-splitview.system.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["src/components/dnn-vertical-splitview/dnn-vertical-splitview.scss?tag=dnn-vertical-splitview&encapsulation=shadow","src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx"],"names":["dnnVerticalSplitviewCss","DnnVerticalSplitview","exports","class_1","hostRef","this","splitterWidth","splitWidthPercentage","leftWidth","rightWidth","prototype","setSplitWidthPercentage","newWidth","panes","element","shadowRoot","querySelectorAll","requestAnimationFrame","forEach","pane","classList","add","fullWidth","_this","getBoundingClientRect","width","newLeft","setTimeout","remove","getSplitWidthPercentage","componentDidLoad","widthChanged","emit","handleMouseDown","event","preventDefault","handleDrag","ev","movementX","getMovementFromEvent","previousTouch","handleDragFinished","document","removeEventListener","newPercentage","addEventListener","handleKeyDown","e","key","shiftKey","render","h","Host","class","style","name","onMouseDown","onTouchStart","onKeyDown","minWidth","toString"],"mappings":"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","sourcesContent":[":host {\r\n display: flex;\r\n align-items: stretch;\r\n margin: 0 auto;\r\n\r\n /** @prop --left-pane-background-color: Allows customizing the left pane background-color */\r\n --left-pane-background-color: transparent;\r\n\r\n /** @prop --right-pane-background-color: Allows customizing the right pane background-color */\r\n --right-pane-background-color: transparent;\r\n}\r\n\r\nbutton{\r\n background-color: var(--right-pane-background-color);\r\n border: none;\r\n margin:0;\r\n padding:0;\r\n cursor: ew-resize;\r\n}\r\n\r\n.pane{\r\n overflow-y: auto;\r\n &.transition{\r\n transition: all 300ms ease-in-out;\r\n }\r\n &.left{\r\n background-color: var(--left-pane-background-color);\r\n }\r\n &.right{\r\n background-color: var(--right-pane-background-color);\r\n flex-grow: 1;\r\n }\r\n}","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() splitWidthPercentage = 30;\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 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 }, 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 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 }\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 let {movementX} = getMovementFromEvent(ev, this.previousTouch);\r\n let 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 - newLeft;\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 style={{minWidth: `${this.splitterWidth.toString()}px`}}\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"]}
1
+ {"version":3,"sources":["src/components/dnn-vertical-splitview/dnn-vertical-splitview.scss?tag=dnn-vertical-splitview&encapsulation=shadow","src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx"],"names":["dnnVerticalSplitviewCss","DnnVerticalSplitview","exports","class_1","hostRef","this","splitterWidth","splitWidthPercentage","leftWidth","rightWidth","prototype","setSplitWidthPercentage","newWidth","panes","element","shadowRoot","querySelectorAll","requestAnimationFrame","forEach","pane","classList","add","_this","splitter","fullWidth","getBoundingClientRect","width","newLeft","setTimeout","remove","getSplitWidthPercentage","componentDidLoad","widthChanged","emit","handleMouseDown","event","preventDefault","handleDrag","ev","movementX","getMovementFromEvent","previousTouch","handleDragFinished","document","removeEventListener","newPercentage","addEventListener","handleKeyDown","e","key","shiftKey","render","h","Host","class","style","name","onMouseDown","onTouchStart","onKeyDown","ref","el","minWidth","toString","left"],"mappings":"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","sourcesContent":[":host {\r\n display: flex;\r\n align-items: stretch;\r\n margin: 0 auto;\r\n position: relative;\r\n\r\n /** @prop --left-pane-background-color: Allows customizing the left pane background-color */\r\n --left-pane-background-color: transparent;\r\n\r\n /** @prop --right-pane-background-color: Allows customizing the right pane background-color */\r\n --right-pane-background-color: transparent;\r\n}\r\n\r\nbutton{\r\n border: none;\r\n margin:0;\r\n padding:0;\r\n cursor: ew-resize;\r\n position: absolute;\r\n height: 100%;\r\n background-color: transparent;\r\n &.transition{\r\n transition: all 300ms ease-in-out;\r\n }\r\n}\r\n\r\n\r\n.pane{\r\n overflow-y: auto;\r\n &.transition{\r\n transition: all 300ms ease-in-out;\r\n }\r\n &.left{\r\n background-color: var(--left-pane-background-color);\r\n }\r\n &.right{\r\n background-color: var(--right-pane-background-color);\r\n flex-grow: 1;\r\n }\r\n}","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() splitWidthPercentage = 30;\r\n \r\n private splitter!: HTMLButtonElement;\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 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 }\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 let {movementX} = getMovementFromEvent(ev, this.previousTouch);\r\n let 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 - newLeft;\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"]}