npm - @nanoporetech-digital/components - Versions diffs - 2.2.0 → 2.2.1 - Mend

@nanoporetech-digital/components 2.2.0 → 2.2.1

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 (62) hide show

package/dist/collection/components/split-pane/split-pane.js CHANGED Viewed

@@ -29,10 +29,6 @@ export class SplitPane {
     this.snapThreshold = 12;
     /** When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable. */
     this.animationDuration = 0.6;
-    this._isDragging = false;
-    this.handleIsDragging = (dragging) => {
-      this._isDragging = dragging;
-    };
     // Event handlers
     this.handleDrag = (e) => {
       if (this.disabled) {
@@ -41,8 +37,8 @@ export class SplitPane {
       // Prevent text selection when dragging
       e.preventDefault();
       drag(this.host, (x, y) => {
-        this.handleIsDragging(true);
         let newPositionInPixels = this.vertical ? y : x;
+        this.nanoDragging.emit(newPositionInPixels);
         // Flip for end panels
         if (this.primary === 'end') {
           newPositionInPixels = this.size - newPositionInPixels;
@@ -67,7 +63,6 @@ export class SplitPane {
         this.shouldAnimate = false;
         this.position = clamp(this.pixelsToPercentage(newPositionInPixels), 0, 100);
         raf(() => (this.shouldAnimate = true));
-        this.handleIsDragging(false);
       });
     };
     this.handleKeyDown = (event) => {
@@ -115,7 +110,6 @@ export class SplitPane {
       }
     };
     this.handlePositionChange = debounce(this.handlePositionChange.bind(this), 100);
-    this.handleIsDragging = debounce(this.handleIsDragging, 200);
   }
   get size() {
     const { width, height } = this.host.getBoundingClientRect();
@@ -139,7 +133,9 @@ export class SplitPane {
     pos = Math.min(Math.max(pos, 0), 100);
     if (isNaN(pos) || pos === this._position)
       return;
-    if (this.shouldAnimate && this.animationDuration > 0) {
+    if (this.shouldAnimate &&
+      this.animationDuration > 0 &&
+      !isNaN(this.position)) {
       this.animatePosition(pos);
       return;
     }
@@ -154,10 +150,6 @@ export class SplitPane {
   handlePositionInPixelsChange() {
     this.position = this.pixelsToPercentage(this.positionInPixels);
   }
-  /** @readonly - hook to know if the pane is currently being dragged */
-  get isDragging() {
-    return this._isDragging;
-  }
   // Private logic
   animatePosition(end) {
     if (this.isAnimating)
@@ -225,12 +217,13 @@ export class SplitPane {
     // if we set a default position in the class, this causes the divider to jump (from default to user set position)
     // so - wait a render, see if there's a position passed in via attribute, *then* set default if not
     raf(() => {
-      if (this.position === undefined)
+      if (typeof this.position === 'undefined') {
         this.position = 50;
+      }
     });
   }
   render() {
-    if (!this.position)
+    if (typeof this.position === 'undefined')
       return;
     const styles = {};
     const gridTemplate = this.vertical
@@ -426,29 +419,6 @@ export class SplitPane {
       "attribute": "animation-duration",
       "reflect": false,
       "defaultValue": "0.6"
-    },
-    "isDragging": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "readonly",
-            "text": "- hook to know if the pane is currently being dragged"
-          }],
-        "text": ""
-      },
-      "getter": true,
-      "setter": false,
-      "attribute": "is-dragging",
-      "reflect": true,
-      "defaultValue": "false"
     }
   }; }
   static get events() { return [{
@@ -466,6 +436,21 @@ export class SplitPane {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "nanoDragging",
+      "name": "nanoDragging",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the divider is being dragged."
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{

package/dist/collection/components/split-pane/split-pane.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"split-pane.js","sourceRoot":"","sources":["../../../src/components/split-pane/split-pane.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Prop,\n Component,\n Watch,\n Event,\n EventEmitter,\n ComponentInterface,\n Element,\n Host,\n h,\n} from '@stencil/core';\nimport { clamp, raf, debounce } from '../../utils';\nimport { drag } from '../../utils/drag';\n\n/*\n Split panes display two adjacent panels, allowing the user to reposition them.\n \n @part start - The start panel.\n * @part end - The end panel.\n * @part panel - Targets both the start and end panels.\n * @part divider - The divider that separates the start and end panels.\n \n @slot start - The start panel.\n * @slot end - The end panel.\n * @slot handle - An optional handle to render at the center of the divider.\n /\n@Component({\n tag: 'nano-split-pane',\n styleUrl: 'split-pane.scss',\n shadow: true,\n})\nexport class SplitPane implements ComponentInterface {\n @Element() host: HTMLNanoSplitPaneElement;\n private cachedPositionInPixels: number;\n private ro: ResizeObserver;\n private isAnimating = false;\n private didLoad = false;\n\n private get size() {\n const { width, height } = this.host.getBoundingClientRect();\n return this.vertical ? height : width;\n }\n\n private get shouldAnimate() {\n return this.didLoad && this._shouldAnimate;\n }\n private set shouldAnimate(sa: boolean) {\n this._shouldAnimate = sa;\n }\n private _shouldAnimate: boolean = true;\n\n constructor() {\n this.handlePositionChange = debounce(\n this.handlePositionChange.bind(this),\n 100\n );\n this.handleIsDragging = debounce(this.handleIsDragging, 200);\n }\n\n /\n The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\n * container's initial size.\n /\n @Prop()\n get position() {\n return this._position;\n }\n set position(pos: number) {\n // override too high / low\n pos = Math.min(Math.max(pos, 0), 100);\n if (isNaN(pos) \|\| pos === this._position) return;\n\n if (this.shouldAnimate && this.animationDuration > 0) {\n this.animatePosition(pos);\n return;\n }\n this._position = pos;\n }\n private _position: number;\n\n // eslint-disable-next-line @stencil/no-unused-watch\n @Watch('position')\n handlePositionChange() {\n this.cachedPositionInPixels = this.percentageToPixels(this.position);\n this.positionInPixels = this.percentageToPixels(this.position);\n this.nanoReposition.emit();\n }\n\n /\n The current position of the divider from the primary panel's edge in pixels.\n /\n @Prop({ mutable: true }) positionInPixels: number;\n\n @Watch('positionInPixels')\n handlePositionInPixelsChange() {\n this.position = this.pixelsToPercentage(this.positionInPixels);\n }\n\n /* Draws the split panel in a vertical orientation with the start and end panels stacked. /\n @Prop({ reflect: true }) vertical = false;\n\n /* Disables resizing. Note that the position may still change as a result of resizing the host element. /\n @Prop({ reflect: true }) disabled = false;\n\n /\n If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\n * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\n * host element is resized.\n /\n @Prop() primary?: 'start' \| 'end';\n\n /\n One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n * `\"100px 50%\"`.\n /\n @Prop() snap?: string;\n\n /* How close the divider must be to a snap point until snapping occurs. /\n @Prop() snapThreshold = 12;\n\n /* When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable. /\n @Prop() animationDuration = 0.6;\n\n /* @readonly - hook to know if the pane is currently being dragged /\n @Prop({ reflect: true }) get isDragging() {\n return this._isDragging;\n }\n private _isDragging = false;\n\n /* Emitted when the divider's position changes. /\n @Event() nanoReposition: EventEmitter;\n\n // Private logic\n\n private animatePosition(end: number) {\n if (this.isAnimating) return;\n\n const duration = this.animationDuration; // seconds\n const fps = 60;\n const start = this.position;\n const distance = end - start;\n\n let position = start;\n let time = 0;\n\n function easeInOutQuad(t: number, s: number, e: number, d: number) {\n if ((t /= d / 2) < 1) return (e / 2) t * t + s;\n else return (-e / 2) * (--t * (t - 2) - 1) + s;\n }\n\n const go = () => {\n time += 1 / fps;\n position = easeInOutQuad(time, start, distance, duration);\n\n if (\n (end > start && position >= end) \|\|\n (end < start && position <= end)\n ) {\n this.position = end;\n this.shouldAnimate = true;\n this.isAnimating = false;\n return;\n }\n this.position = position;\n raf(go);\n };\n\n this.shouldAnimate = false;\n this.isAnimating = true;\n raf(go);\n }\n\n private percentageToPixels(value: number) {\n return this.size * (value / 100);\n }\n\n private pixelsToPercentage(value: number) {\n return (value / this.size) * 100;\n }\n\n private attachRO() {\n this.detachRO();\n this.ro = new ResizeObserver(() => this.handleResize());\n this.ro.observe(this.host);\n }\n\n private detachRO() {\n if (!this.ro) return;\n this.ro.unobserve(this.host);\n this.ro = undefined;\n }\n\n private handleIsDragging = (dragging?: boolean) => {\n this._isDragging = dragging;\n };\n\n // Event handlers\n\n private handleDrag = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n // Prevent text selection when dragging\n e.preventDefault();\n\n drag(this.host, (x, y) => {\n this.handleIsDragging(true);\n let newPositionInPixels = this.vertical ? y : x;\n\n // Flip for end panels\n if (this.primary === 'end') {\n newPositionInPixels = this.size - newPositionInPixels;\n }\n\n // Check snap points\n if (this.snap) {\n const snaps = this.snap.split(' ');\n\n snaps.forEach((value) => {\n let snapPoint: number;\n\n if (value.endsWith('%')) {\n snapPoint = this.size * (parseFloat(value) / 100);\n } else {\n snapPoint = parseFloat(value);\n }\n\n if (\n newPositionInPixels >= snapPoint - this.snapThreshold &&\n newPositionInPixels <= snapPoint + this.snapThreshold\n ) {\n newPositionInPixels = snapPoint;\n }\n });\n }\n this.shouldAnimate = false;\n this.position = clamp(\n this.pixelsToPercentage(newPositionInPixels),\n 0,\n 100\n );\n raf(() => (this.shouldAnimate = true));\n this.handleIsDragging(false);\n });\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) {\n return;\n }\n\n if (\n [\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n ].includes(event.key)\n ) {\n let newPosition = this.position;\n const incr =\n (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);\n\n event.preventDefault();\n\n if (\n (event.key === 'ArrowLeft' && !this.vertical) \|\|\n (event.key === 'ArrowUp' && this.vertical)\n ) {\n newPosition -= incr;\n }\n\n if (\n (event.key === 'ArrowRight' && !this.vertical) \|\|\n (event.key === 'ArrowDown' && this.vertical)\n ) {\n newPosition += incr;\n }\n\n if (event.key === 'Home') {\n newPosition = this.primary === 'end' ? 100 : 0;\n }\n\n if (event.key === 'End') {\n newPosition = this.primary === 'end' ? 0 : 100;\n }\n\n this.shouldAnimate = false;\n\n this.position = clamp(newPosition, 0, 100);\n raf(() => (this.shouldAnimate = true));\n }\n };\n\n private handleResize = () => {\n if (!this.didLoad \|\| this.isAnimating) return;\n\n // Resize when a primary panel is set\n if (this.primary) {\n this.shouldAnimate = false;\n this.position = this.pixelsToPercentage(this.cachedPositionInPixels);\n raf(() => (this.shouldAnimate = true));\n }\n };\n\n componentDidLoad(): void {\n if (this.positionInPixels) this.handlePositionInPixelsChange();\n setTimeout(() => (this.didLoad = true));\n }\n\n connectedCallback() {\n this.cachedPositionInPixels = this.percentageToPixels(this.position);\n this.attachRO();\n }\n\n disconnectedCallback() {\n this.detachRO();\n }\n\n componentDidRender(): void {\n // bit hacky ... because we use getter / setter for position, there's a render before `position` is passed in via attribute\n // if we set a default position in the class, this causes the divider to jump (from default to user set position)\n // so - wait a render, see if there's a position passed in via attribute, then set default if not\n raf(() => {\n if (this.position === undefined) this.position = 50;\n });\n }\n\n render() {\n if (!this.position) return;\n const styles: { gridTemplateRows?: string; gridTemplateColumns?: string } =\n {};\n const gridTemplate = this.vertical\n ? 'gridTemplateRows'\n : 'gridTemplateColumns';\n const primary = `\n clamp(\n 0%,\n clamp(\n var(--min),\n ${this.position}% - var(--divider-width) / 2,\n var(--max)\n ),\n calc(100% - var(--divider-width))\n )\n `;\n const secondary = 'auto';\n\n if (this.primary === 'end') {\n styles[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n } else {\n styles[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n }\n\n return (\n <Host style={styles}>\n <div part=\"panel start\" class=\"start\">\n <slot name=\"start\"></slot>\n </div>\n <div\n part=\"divider\"\n class=\"divider\"\n tabindex={this.disabled ? undefined : '0'}\n role=\"separator\"\n aria-label=\"Resize\"\n onKeyDown={this.handleKeyDown}\n onMouseDown={this.handleDrag}\n onTouchStart={this.handleDrag}\n >\n <slot name=\"handle\">\n {!this.disabled && this.vertical ? (\n <nano-icon slot=\"handle\" name=\"solid/grip-lines\" />\n ) : (\n <nano-icon slot=\"handle\" name=\"solid/grip-lines-vertical\" />\n )}\n </slot>\n </div>\n <div part=\"panel end\" class=\"end\">\n <slot name=\"end\"></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"split-pane.js","sourceRoot":"","sources":["../../../src/components/split-pane/split-pane.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Prop,\n Component,\n Watch,\n Event,\n EventEmitter,\n ComponentInterface,\n Element,\n Host,\n h,\n} from '@stencil/core';\nimport { clamp, raf, debounce } from '../../utils';\nimport { drag } from '../../utils/drag';\n\n/*\n Split panes display two adjacent panels, allowing the user to reposition them.\n \n @part start - The start panel.\n * @part end - The end panel.\n * @part panel - Targets both the start and end panels.\n * @part divider - The divider that separates the start and end panels.\n \n @slot start - The start panel.\n * @slot end - The end panel.\n * @slot handle - An optional handle to render at the center of the divider.\n /\n@Component({\n tag: 'nano-split-pane',\n styleUrl: 'split-pane.scss',\n shadow: true,\n})\nexport class SplitPane implements ComponentInterface {\n @Element() host: HTMLNanoSplitPaneElement;\n private cachedPositionInPixels: number;\n private ro: ResizeObserver;\n private isAnimating = false;\n private didLoad = false;\n\n private get size() {\n const { width, height } = this.host.getBoundingClientRect();\n return this.vertical ? height : width;\n }\n\n private get shouldAnimate() {\n return this.didLoad && this._shouldAnimate;\n }\n private set shouldAnimate(sa: boolean) {\n this._shouldAnimate = sa;\n }\n private _shouldAnimate: boolean = true;\n\n constructor() {\n this.handlePositionChange = debounce(\n this.handlePositionChange.bind(this),\n 100\n );\n }\n\n /\n The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\n * container's initial size.\n /\n @Prop()\n get position() {\n return this._position;\n }\n set position(pos: number) {\n // override too high / low\n pos = Math.min(Math.max(pos, 0), 100);\n if (isNaN(pos) \|\| pos === this._position) return;\n\n if (\n this.shouldAnimate &&\n this.animationDuration > 0 &&\n !isNaN(this.position)\n ) {\n this.animatePosition(pos);\n return;\n }\n this._position = pos;\n }\n private _position: number;\n\n // eslint-disable-next-line @stencil/no-unused-watch\n @Watch('position')\n handlePositionChange() {\n this.cachedPositionInPixels = this.percentageToPixels(this.position);\n this.positionInPixels = this.percentageToPixels(this.position);\n this.nanoReposition.emit();\n }\n\n /\n The current position of the divider from the primary panel's edge in pixels.\n /\n @Prop({ mutable: true }) positionInPixels: number;\n\n @Watch('positionInPixels')\n handlePositionInPixelsChange() {\n this.position = this.pixelsToPercentage(this.positionInPixels);\n }\n\n /* Draws the split panel in a vertical orientation with the start and end panels stacked. /\n @Prop({ reflect: true }) vertical = false;\n\n /* Disables resizing. Note that the position may still change as a result of resizing the host element. /\n @Prop({ reflect: true }) disabled = false;\n\n /\n If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\n * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\n * host element is resized.\n /\n @Prop() primary?: 'start' \| 'end';\n\n /\n One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n * `\"100px 50%\"`.\n /\n @Prop() snap?: string;\n\n /* How close the divider must be to a snap point until snapping occurs. /\n @Prop() snapThreshold = 12;\n\n /* When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable. /\n @Prop() animationDuration = 0.6;\n\n /* Emitted when the divider's position changes. /\n @Event() nanoReposition: EventEmitter;\n\n /* Emitted when the divider is being dragged. /\n @Event() nanoDragging: EventEmitter<number>;\n\n // Private logic\n\n private animatePosition(end: number) {\n if (this.isAnimating) return;\n\n const duration = this.animationDuration; // seconds\n const fps = 60;\n const start = this.position;\n const distance = end - start;\n\n let position = start;\n let time = 0;\n\n function easeInOutQuad(t: number, s: number, e: number, d: number) {\n if ((t /= d / 2) < 1) return (e / 2) t * t + s;\n else return (-e / 2) * (--t * (t - 2) - 1) + s;\n }\n\n const go = () => {\n time += 1 / fps;\n position = easeInOutQuad(time, start, distance, duration);\n\n if (\n (end > start && position >= end) \|\|\n (end < start && position <= end)\n ) {\n this.position = end;\n this.shouldAnimate = true;\n this.isAnimating = false;\n return;\n }\n this.position = position;\n raf(go);\n };\n\n this.shouldAnimate = false;\n this.isAnimating = true;\n raf(go);\n }\n\n private percentageToPixels(value: number) {\n return this.size * (value / 100);\n }\n\n private pixelsToPercentage(value: number) {\n return (value / this.size) * 100;\n }\n\n private attachRO() {\n this.detachRO();\n this.ro = new ResizeObserver(() => this.handleResize());\n this.ro.observe(this.host);\n }\n\n private detachRO() {\n if (!this.ro) return;\n this.ro.unobserve(this.host);\n this.ro = undefined;\n }\n\n // Event handlers\n\n private handleDrag = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n // Prevent text selection when dragging\n e.preventDefault();\n\n drag(this.host, (x, y) => {\n let newPositionInPixels = this.vertical ? y : x;\n\n this.nanoDragging.emit(newPositionInPixels);\n\n // Flip for end panels\n if (this.primary === 'end') {\n newPositionInPixels = this.size - newPositionInPixels;\n }\n\n // Check snap points\n if (this.snap) {\n const snaps = this.snap.split(' ');\n\n snaps.forEach((value) => {\n let snapPoint: number;\n\n if (value.endsWith('%')) {\n snapPoint = this.size * (parseFloat(value) / 100);\n } else {\n snapPoint = parseFloat(value);\n }\n\n if (\n newPositionInPixels >= snapPoint - this.snapThreshold &&\n newPositionInPixels <= snapPoint + this.snapThreshold\n ) {\n newPositionInPixels = snapPoint;\n }\n });\n }\n this.shouldAnimate = false;\n this.position = clamp(\n this.pixelsToPercentage(newPositionInPixels),\n 0,\n 100\n );\n raf(() => (this.shouldAnimate = true));\n });\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) {\n return;\n }\n\n if (\n [\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n ].includes(event.key)\n ) {\n let newPosition = this.position;\n const incr =\n (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);\n\n event.preventDefault();\n\n if (\n (event.key === 'ArrowLeft' && !this.vertical) \|\|\n (event.key === 'ArrowUp' && this.vertical)\n ) {\n newPosition -= incr;\n }\n\n if (\n (event.key === 'ArrowRight' && !this.vertical) \|\|\n (event.key === 'ArrowDown' && this.vertical)\n ) {\n newPosition += incr;\n }\n\n if (event.key === 'Home') {\n newPosition = this.primary === 'end' ? 100 : 0;\n }\n\n if (event.key === 'End') {\n newPosition = this.primary === 'end' ? 0 : 100;\n }\n\n this.shouldAnimate = false;\n\n this.position = clamp(newPosition, 0, 100);\n raf(() => (this.shouldAnimate = true));\n }\n };\n\n private handleResize = () => {\n if (!this.didLoad \|\| this.isAnimating) return;\n\n // Resize when a primary panel is set\n if (this.primary) {\n this.shouldAnimate = false;\n this.position = this.pixelsToPercentage(this.cachedPositionInPixels);\n raf(() => (this.shouldAnimate = true));\n }\n };\n\n componentDidLoad(): void {\n if (this.positionInPixels) this.handlePositionInPixelsChange();\n setTimeout(() => (this.didLoad = true));\n }\n\n connectedCallback() {\n this.cachedPositionInPixels = this.percentageToPixels(this.position);\n this.attachRO();\n }\n\n disconnectedCallback() {\n this.detachRO();\n }\n\n componentDidRender(): void {\n // bit hacky ... because we use getter / setter for position, there's a render before `position` is passed in via attribute\n // if we set a default position in the class, this causes the divider to jump (from default to user set position)\n // so - wait a render, see if there's a position passed in via attribute, then set default if not\n raf(() => {\n if (typeof this.position === 'undefined') {\n this.position = 50;\n }\n });\n }\n\n render() {\n if (typeof this.position === 'undefined') return;\n const styles: { gridTemplateRows?: string; gridTemplateColumns?: string } =\n {};\n const gridTemplate = this.vertical\n ? 'gridTemplateRows'\n : 'gridTemplateColumns';\n const primary = `\n clamp(\n 0%,\n clamp(\n var(--min),\n ${this.position}% - var(--divider-width) / 2,\n var(--max)\n ),\n calc(100% - var(--divider-width))\n )\n `;\n const secondary = 'auto';\n\n if (this.primary === 'end') {\n styles[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n } else {\n styles[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n }\n\n return (\n <Host style={styles}>\n <div part=\"panel start\" class=\"start\">\n <slot name=\"start\"></slot>\n </div>\n <div\n part=\"divider\"\n class=\"divider\"\n tabindex={this.disabled ? undefined : '0'}\n role=\"separator\"\n aria-label=\"Resize\"\n onKeyDown={this.handleKeyDown}\n onMouseDown={this.handleDrag}\n onTouchStart={this.handleDrag}\n >\n <slot name=\"handle\">\n {!this.disabled && this.vertical ? (\n <nano-icon slot=\"handle\" name=\"solid/grip-lines\" />\n ) : (\n <nano-icon slot=\"handle\" name=\"solid/grip-lines-vertical\" />\n )}\n </slot>\n </div>\n <div part=\"panel end\" class=\"end\">\n <slot name=\"end\"></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/tabs/tab-group.js CHANGED Viewed

@@ -502,7 +502,7 @@ export class TabGroup {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -545,7 +545,7 @@ export class TabGroup {
         "references": {
           "StorageMethods": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
+            "path": "/builds/oyGwf-FZ/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
           }
         }
       },

package/dist/components/nano-split-pane.js CHANGED Viewed

@@ -32,6 +32,7 @@ let SplitPane = class extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.nanoReposition = createEvent(this, "nanoReposition", 7);
+    this.nanoDragging = createEvent(this, "nanoDragging", 7);
     this.isAnimating = false;
     this.didLoad = false;
     this._shouldAnimate = true;
@@ -43,10 +44,6 @@ let SplitPane = class extends HTMLElement {
     this.snapThreshold = 12;
     /** When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable. */
     this.animationDuration = 0.6;
-    this._isDragging = false;
-    this.handleIsDragging = (dragging) => {
-      this._isDragging = dragging;
-    };
     // Event handlers
     this.handleDrag = (e) => {
       if (this.disabled) {
@@ -55,8 +52,8 @@ let SplitPane = class extends HTMLElement {
       // Prevent text selection when dragging
       e.preventDefault();
       drag(this.host, (x, y) => {
-        this.handleIsDragging(true);
         let newPositionInPixels = this.vertical ? y : x;
+        this.nanoDragging.emit(newPositionInPixels);
         // Flip for end panels
         if (this.primary === 'end') {
           newPositionInPixels = this.size - newPositionInPixels;
@@ -81,7 +78,6 @@ let SplitPane = class extends HTMLElement {
         this.shouldAnimate = false;
         this.position = clamp(this.pixelsToPercentage(newPositionInPixels), 0, 100);
         raf(() => (this.shouldAnimate = true));
-        this.handleIsDragging(false);
       });
     };
     this.handleKeyDown = (event) => {
@@ -129,7 +125,6 @@ let SplitPane = class extends HTMLElement {
       }
     };
     this.handlePositionChange = debounce(this.handlePositionChange.bind(this), 100);
-    this.handleIsDragging = debounce(this.handleIsDragging, 200);
   }
   get size() {
     const { width, height } = this.host.getBoundingClientRect();
@@ -153,7 +148,9 @@ let SplitPane = class extends HTMLElement {
     pos = Math.min(Math.max(pos, 0), 100);
     if (isNaN(pos) || pos === this._position)
       return;
-    if (this.shouldAnimate && this.animationDuration > 0) {
+    if (this.shouldAnimate &&
+      this.animationDuration > 0 &&
+      !isNaN(this.position)) {
       this.animatePosition(pos);
       return;
     }
@@ -168,10 +165,6 @@ let SplitPane = class extends HTMLElement {
   handlePositionInPixelsChange() {
     this.position = this.pixelsToPercentage(this.positionInPixels);
   }
-  /** @readonly - hook to know if the pane is currently being dragged */
-  get isDragging() {
-    return this._isDragging;
-  }
   // Private logic
   animatePosition(end) {
     if (this.isAnimating)
@@ -239,12 +232,13 @@ let SplitPane = class extends HTMLElement {
     // if we set a default position in the class, this causes the divider to jump (from default to user set position)
     // so - wait a render, see if there's a position passed in via attribute, *then* set default if not
     raf(() => {
-      if (this.position === undefined)
+      if (typeof this.position === 'undefined') {
         this.position = 50;
+      }
     });
   }
   render() {
-    if (!this.position)
+    if (typeof this.position === 'undefined')
       return;
     const styles = {};
     const gridTemplate = this.vertical
@@ -285,8 +279,7 @@ SplitPane = /*@__PURE__*/ proxyCustomElement(SplitPane, [1, "nano-split-pane", {
     "primary": [1],
     "snap": [1],
     "snapThreshold": [2, "snap-threshold"],
-    "animationDuration": [2, "animation-duration"],
-    "isDragging": [2564, "is-dragging"]
+    "animationDuration": [2, "animation-duration"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/nano-split-pane.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-split-pane.js","mappings":"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","names":[],"sources":["./src/utils/drag.ts","./src/components/split-pane/split-pane.scss?tag=nano-split-pane&encapsulation=shadow","./src/components/split-pane/split-pane.tsx"],"sourcesContent":["export function drag(\n container: HTMLElement,\n onMove: (x: number, y: number) => void\n) {\n function move(pointerEvent: PointerEvent) {\n const dims = container.getBoundingClientRect();\n const defaultView = container.ownerDocument.defaultView!;\n const offsetX = dims.left + defaultView.pageXOffset;\n const offsetY = dims.top + defaultView.pageYOffset;\n const x = pointerEvent.pageX - offsetX;\n const y = pointerEvent.pageY - offsetY;\n\n onMove(x, y);\n }\n\n function stop() {\n document.removeEventListener('pointermove', move);\n document.removeEventListener('pointerup', stop);\n }\n\n document.addEventListener('pointermove', move, { passive: true });\n document.addEventListener('pointerup', stop);\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /*\n @prop --divider-width: The width of the visible divider. Default 4px.\n * @prop --divider-hit-area: The invisible region around the divider where dragging can occur. This is\n * usually wider than the divider to facilitate easier dragging. Default 12px.\n * @prop --min: The minimum allowed size of the primary panel. Default 0.\n * @prop --max: The maximum allowed size of the primary panel. Default 100%.\n * @prop --background-color: Handle background. Default #{map.get($colors, lightgrey)}.\n * @prop --content-color: Handle color. Default #{map.get($colors, dimgrey)}.\n /\n --divider-width: 12px;\n --divider-hit-area: 14px;\n --min: 0%;\n --max: 100%;\n --background-color: #{map.get($colors, lightgrey)};\n --content-color: #{map.get($colors, dimgrey)};\n\n display: grid;\n}\n\n.start,\n.end {\n overflow: hidden;\n}\n\n.divider {\n flex: 0 0 var(--divider-width);\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n background-color: var(--background-color);\n color: var(--content-color);\n z-index: 1;\n font-size: 0.8rem;\n}\n\n.divider:focus {\n outline: none;\n}\n\n:host(:not([disabled])) .divider:focus-visible {\n background-color: #{$control-focus-color};\n}\n\n:host([disabled]) .divider {\n cursor: not-allowed;\n}\n\n/ Horizontal /\n:host(:not([vertical], [disabled])) .divider {\n cursor: col-resize;\n}\n\n:host(:not([vertical])) .divider::after {\n display: flex;\n content: '';\n position: absolute;\n height: 100%;\n left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n width: var(--divider-hit-area);\n}\n\n/ Vertical /\n:host([vertical]) {\n flex-direction: column;\n}\n\n:host([vertical]:not([disabled])) .divider {\n cursor: row-resize;\n}\n\n:host([vertical]) .divider::after {\n content: '';\n position: absolute;\n width: 100%;\n top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n height: var(--divider-hit-area);\n}\n","import {\n Prop,\n Component,\n Watch,\n Event,\n EventEmitter,\n ComponentInterface,\n Element,\n Host,\n h,\n} from '@stencil/core';\nimport { clamp, raf, debounce } from '../../utils';\nimport { drag } from '../../utils/drag';\n\n/\n Split panes display two adjacent panels, allowing the user to reposition them.\n \n @part start - The start panel.\n * @part end - The end panel.\n * @part panel - Targets both the start and end panels.\n * @part divider - The divider that separates the start and end panels.\n \n @slot start - The start panel.\n * @slot end - The end panel.\n * @slot handle - An optional handle to render at the center of the divider.\n /\n@Component({\n tag: 'nano-split-pane',\n styleUrl: 'split-pane.scss',\n shadow: true,\n})\nexport class SplitPane implements ComponentInterface {\n @Element() host: HTMLNanoSplitPaneElement;\n private cachedPositionInPixels: number;\n private ro: ResizeObserver;\n private isAnimating = false;\n private didLoad = false;\n\n private get size() {\n const { width, height } = this.host.getBoundingClientRect();\n return this.vertical ? height : width;\n }\n\n private get shouldAnimate() {\n return this.didLoad && this._shouldAnimate;\n }\n private set shouldAnimate(sa: boolean) {\n this._shouldAnimate = sa;\n }\n private _shouldAnimate: boolean = true;\n\n constructor() {\n this.handlePositionChange = debounce(\n this.handlePositionChange.bind(this),\n 100\n );\n this.handleIsDragging = debounce(this.handleIsDragging, 200);\n }\n\n /\n The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\n * container's initial size.\n /\n @Prop()\n get position() {\n return this._position;\n }\n set position(pos: number) {\n // override too high / low\n pos = Math.min(Math.max(pos, 0), 100);\n if (isNaN(pos) \|\| pos === this._position) return;\n\n if (this.shouldAnimate && this.animationDuration > 0) {\n this.animatePosition(pos);\n return;\n }\n this._position = pos;\n }\n private _position: number;\n\n // eslint-disable-next-line @stencil/no-unused-watch\n @Watch('position')\n handlePositionChange() {\n this.cachedPositionInPixels = this.percentageToPixels(this.position);\n this.positionInPixels = this.percentageToPixels(this.position);\n this.nanoReposition.emit();\n }\n\n /\n The current position of the divider from the primary panel's edge in pixels.\n /\n @Prop({ mutable: true }) positionInPixels: number;\n\n @Watch('positionInPixels')\n handlePositionInPixelsChange() {\n this.position = this.pixelsToPercentage(this.positionInPixels);\n }\n\n /* Draws the split panel in a vertical orientation with the start and end panels stacked. /\n @Prop({ reflect: true }) vertical = false;\n\n /* Disables resizing. Note that the position may still change as a result of resizing the host element. /\n @Prop({ reflect: true }) disabled = false;\n\n /\n If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\n * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\n * host element is resized.\n /\n @Prop() primary?: 'start' \| 'end';\n\n /\n One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n * `\"100px 50%\"`.\n /\n @Prop() snap?: string;\n\n /* How close the divider must be to a snap point until snapping occurs. /\n @Prop() snapThreshold = 12;\n\n /* When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable. /\n @Prop() animationDuration = 0.6;\n\n /* @readonly - hook to know if the pane is currently being dragged /\n @Prop({ reflect: true }) get isDragging() {\n return this._isDragging;\n }\n private _isDragging = false;\n\n /* Emitted when the divider's position changes. /\n @Event() nanoReposition: EventEmitter;\n\n // Private logic\n\n private animatePosition(end: number) {\n if (this.isAnimating) return;\n\n const duration = this.animationDuration; // seconds\n const fps = 60;\n const start = this.position;\n const distance = end - start;\n\n let position = start;\n let time = 0;\n\n function easeInOutQuad(t: number, s: number, e: number, d: number) {\n if ((t /= d / 2) < 1) return (e / 2) t * t + s;\n else return (-e / 2) * (--t * (t - 2) - 1) + s;\n }\n\n const go = () => {\n time += 1 / fps;\n position = easeInOutQuad(time, start, distance, duration);\n\n if (\n (end > start && position >= end) \|\|\n (end < start && position <= end)\n ) {\n this.position = end;\n this.shouldAnimate = true;\n this.isAnimating = false;\n return;\n }\n this.position = position;\n raf(go);\n };\n\n this.shouldAnimate = false;\n this.isAnimating = true;\n raf(go);\n }\n\n private percentageToPixels(value: number) {\n return this.size * (value / 100);\n }\n\n private pixelsToPercentage(value: number) {\n return (value / this.size) * 100;\n }\n\n private attachRO() {\n this.detachRO();\n this.ro = new ResizeObserver(() => this.handleResize());\n this.ro.observe(this.host);\n }\n\n private detachRO() {\n if (!this.ro) return;\n this.ro.unobserve(this.host);\n this.ro = undefined;\n }\n\n private handleIsDragging = (dragging?: boolean) => {\n this._isDragging = dragging;\n };\n\n // Event handlers\n\n private handleDrag = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n // Prevent text selection when dragging\n e.preventDefault();\n\n drag(this.host, (x, y) => {\n this.handleIsDragging(true);\n let newPositionInPixels = this.vertical ? y : x;\n\n // Flip for end panels\n if (this.primary === 'end') {\n newPositionInPixels = this.size - newPositionInPixels;\n }\n\n // Check snap points\n if (this.snap) {\n const snaps = this.snap.split(' ');\n\n snaps.forEach((value) => {\n let snapPoint: number;\n\n if (value.endsWith('%')) {\n snapPoint = this.size * (parseFloat(value) / 100);\n } else {\n snapPoint = parseFloat(value);\n }\n\n if (\n newPositionInPixels >= snapPoint - this.snapThreshold &&\n newPositionInPixels <= snapPoint + this.snapThreshold\n ) {\n newPositionInPixels = snapPoint;\n }\n });\n }\n this.shouldAnimate = false;\n this.position = clamp(\n this.pixelsToPercentage(newPositionInPixels),\n 0,\n 100\n );\n raf(() => (this.shouldAnimate = true));\n this.handleIsDragging(false);\n });\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) {\n return;\n }\n\n if (\n [\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n ].includes(event.key)\n ) {\n let newPosition = this.position;\n const incr =\n (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);\n\n event.preventDefault();\n\n if (\n (event.key === 'ArrowLeft' && !this.vertical) \|\|\n (event.key === 'ArrowUp' && this.vertical)\n ) {\n newPosition -= incr;\n }\n\n if (\n (event.key === 'ArrowRight' && !this.vertical) \|\|\n (event.key === 'ArrowDown' && this.vertical)\n ) {\n newPosition += incr;\n }\n\n if (event.key === 'Home') {\n newPosition = this.primary === 'end' ? 100 : 0;\n }\n\n if (event.key === 'End') {\n newPosition = this.primary === 'end' ? 0 : 100;\n }\n\n this.shouldAnimate = false;\n\n this.position = clamp(newPosition, 0, 100);\n raf(() => (this.shouldAnimate = true));\n }\n };\n\n private handleResize = () => {\n if (!this.didLoad \|\| this.isAnimating) return;\n\n // Resize when a primary panel is set\n if (this.primary) {\n this.shouldAnimate = false;\n this.position = this.pixelsToPercentage(this.cachedPositionInPixels);\n raf(() => (this.shouldAnimate = true));\n }\n };\n\n componentDidLoad(): void {\n if (this.positionInPixels) this.handlePositionInPixelsChange();\n setTimeout(() => (this.didLoad = true));\n }\n\n connectedCallback() {\n this.cachedPositionInPixels = this.percentageToPixels(this.position);\n this.attachRO();\n }\n\n disconnectedCallback() {\n this.detachRO();\n }\n\n componentDidRender(): void {\n // bit hacky ... because we use getter / setter for position, there's a render before `position` is passed in via attribute\n // if we set a default position in the class, this causes the divider to jump (from default to user set position)\n // so - wait a render, see if there's a position passed in via attribute, then set default if not\n raf(() => {\n if (this.position === undefined) this.position = 50;\n });\n }\n\n render() {\n if (!this.position) return;\n const styles: { gridTemplateRows?: string; gridTemplateColumns?: string } =\n {};\n const gridTemplate = this.vertical\n ? 'gridTemplateRows'\n : 'gridTemplateColumns';\n const primary = `\n clamp(\n 0%,\n clamp(\n var(--min),\n ${this.position}% - var(--divider-width) / 2,\n var(--max)\n ),\n calc(100% - var(--divider-width))\n )\n `;\n const secondary = 'auto';\n\n if (this.primary === 'end') {\n styles[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n } else {\n styles[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n }\n\n return (\n <Host style={styles}>\n <div part=\"panel start\" class=\"start\">\n <slot name=\"start\"></slot>\n </div>\n <div\n part=\"divider\"\n class=\"divider\"\n tabindex={this.disabled ? undefined : '0'}\n role=\"separator\"\n aria-label=\"Resize\"\n onKeyDown={this.handleKeyDown}\n onMouseDown={this.handleDrag}\n onTouchStart={this.handleDrag}\n >\n <slot name=\"handle\">\n {!this.disabled && this.vertical ? (\n <nano-icon slot=\"handle\" name=\"solid/grip-lines\" />\n ) : (\n <nano-icon slot=\"handle\" name=\"solid/grip-lines-vertical\" />\n )}\n </slot>\n </div>\n <div part=\"panel end\" class=\"end\">\n <slot name=\"end\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-split-pane.js","mappings":";;;;;;;;SAAgB,IAAI,CAClB,SAAsB,EACtB,MAAsC;EAEtC,SAAS,IAAI,CAAC,YAA0B;IACtC,MAAM,IAAI,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;IAC/C,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,WAAY,CAAC;IACzD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,WAAW,CAAC,WAAW,CAAC;IACpD,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,GAAG,WAAW,CAAC,WAAW,CAAC;IACnD,MAAM,CAAC,GAAG,YAAY,CAAC,KAAK,GAAG,OAAO,CAAC;IACvC,MAAM,CAAC,GAAG,YAAY,CAAC,KAAK,GAAG,OAAO,CAAC;IAEvC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;GACd;EAED,SAAS,IAAI;IACX,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;IAClD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;GACjD;EAED,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;EAClE,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AAC/C;;ACtBA,MAAM,YAAY,GAAG,kjDAAkjD;;IC+B1jD,SAAS;EAoBpB;;;;;;IAhBQ,gBAAW,GAAG,KAAK,CAAC;IACpB,YAAO,GAAG,KAAK,CAAC;IAahB,mBAAc,GAAY,IAAI,CAAC;;IAqDd,aAAQ,GAAG,KAAK,CAAC;;IAGjB,aAAQ,GAAG,KAAK,CAAC;;IAgBlC,kBAAa,GAAG,EAAE,CAAC;;IAGnB,sBAAiB,GAAG,GAAG,CAAC;;IAsExB,eAAU,GAAG,CAAC,CAAQ;MAC5B,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,OAAO;OACR;;MAGD,CAAC,CAAC,cAAc,EAAE,CAAC;MAEnB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC;QACnB,IAAI,mBAAmB,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC;QAEhD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;;QAG5C,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE;UAC1B,mBAAmB,GAAG,IAAI,CAAC,IAAI,GAAG,mBAAmB,CAAC;SACvD;;QAGD,IAAI,IAAI,CAAC,IAAI,EAAE;UACb,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;UAEnC,KAAK,CAAC,OAAO,CAAC,CAAC,KAAK;YAClB,IAAI,SAAiB,CAAC;YAEtB,IAAI,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;cACvB,SAAS,GAAG,IAAI,CAAC,IAAI,IAAI,UAAU,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC;aACnD;iBAAM;cACL,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;aAC/B;YAED,IACE,mBAAmB,IAAI,SAAS,GAAG,IAAI,CAAC,aAAa;cACrD,mBAAmB,IAAI,SAAS,GAAG,IAAI,CAAC,aAAa,EACrD;cACA,mBAAmB,GAAG,SAAS,CAAC;aACjC;WACF,CAAC,CAAC;SACJ;QACD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,QAAQ,GAAG,KAAK,CACnB,IAAI,CAAC,kBAAkB,CAAC,mBAAmB,CAAC,EAC5C,CAAC,EACD,GAAG,CACJ,CAAC;QACF,GAAG,CAAC,OAAO,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC,CAAC;OACxC,CAAC,CAAC;KACJ,CAAC;IAEM,kBAAa,GAAG,CAAC,KAAoB;MAC3C,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,OAAO;OACR;MAED,IACE;QACE,WAAW;QACX,YAAY;QACZ,SAAS;QACT,WAAW;QACX,MAAM;QACN,KAAK;OACN,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EACrB;QACA,IAAI,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC;QAChC,MAAM,IAAI,GACR,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC,OAAO,KAAK,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QAEhE,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IACE,CAAC,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ;WAC3C,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAC,EAC1C;UACA,WAAW,IAAI,IAAI,CAAC;SACrB;QAED,IACE,CAAC,KAAK,CAAC,GAAG,KAAK,YAAY,IAAI,CAAC,IAAI,CAAC,QAAQ;WAC5C,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,IAAI,CAAC,QAAQ,CAAC,EAC5C;UACA,WAAW,IAAI,IAAI,CAAC;SACrB;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;UACxB,WAAW,GAAG,IAAI,CAAC,OAAO,KAAK,KAAK,GAAG,GAAG,GAAG,CAAC,CAAC;SAChD;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;UACvB,WAAW,GAAG,IAAI,CAAC,OAAO,KAAK,KAAK,GAAG,CAAC,GAAG,GAAG,CAAC;SAChD;QAED,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAE3B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC;QAC3C,GAAG,CAAC,OAAO,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC,CAAC;OACxC;KACF,CAAC;IAEM,iBAAY,GAAG;MACrB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW;QAAE,OAAO;;MAG9C,IAAI,IAAI,CAAC,OAAO,EAAE;QAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;QACrE,GAAG,CAAC,OAAO,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC,CAAC;OACxC;KACF,CAAC;IA1PA,IAAI,CAAC,oBAAoB,GAAG,QAAQ,CAClC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,EACpC,GAAG,CACJ,CAAC;GACH;EAlBD,IAAY,IAAI;IACd,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC5D,OAAO,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,KAAK,CAAC;GACvC;EAED,IAAY,aAAa;IACvB,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC;GAC5C;EACD,IAAY,aAAa,CAAC,EAAW;IACnC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;GAC1B;;;;;EAcD,IACI,QAAQ;IACV,OAAO,IAAI,CAAC,SAAS,CAAC;GACvB;EACD,IAAI,QAAQ,CAAC,GAAW;;IAEtB,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACtC,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,GAAG,KAAK,IAAI,CAAC,SAAS;MAAE,OAAO;IAEjD,IACE,IAAI,CAAC,aAAa;MAClB,IAAI,CAAC,iBAAiB,GAAG,CAAC;MAC1B,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,EACrB;MACA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;MAC1B,OAAO;KACR;IACD,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;GACtB;;EAKD,oBAAoB;IAClB,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACrE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC/D,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;GAC5B;EAQD,4BAA4B;IAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;GAChE;;EAmCO,eAAe,CAAC,GAAW;IACjC,IAAI,IAAI,CAAC,WAAW;MAAE,OAAO;IAE7B,MAAM,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC;IACxC,MAAM,GAAG,GAAG,EAAE,CAAC;IACf,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC5B,MAAM,QAAQ,GAAG,GAAG,GAAG,KAAK,CAAC;IAE7B,IAAI,QAAQ,GAAG,KAAK,CAAC;IACrB,IAAI,IAAI,GAAG,CAAC,CAAC;IAEb,SAAS,aAAa,CAAC,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS;MAC/D,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;QAAE,OAAO,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;;QAC5C,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;KAChD;IAED,MAAM,EAAE,GAAG;MACT,IAAI,IAAI,CAAC,GAAG,GAAG,CAAC;MAChB,QAAQ,GAAG,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;MAE1D,IACE,CAAC,GAAG,GAAG,KAAK,IAAI,QAAQ,IAAI,GAAG;SAC9B,GAAG,GAAG,KAAK,IAAI,QAAQ,IAAI,GAAG,CAAC,EAChC;QACA,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;QACpB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,OAAO;OACR;MACD,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;MACzB,GAAG,CAAC,EAAE,CAAC,CAAC;KACT,CAAC;IAEF,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IACxB,GAAG,CAAC,EAAE,CAAC,CAAC;GACT;EAEO,kBAAkB,CAAC,KAAa;IACtC,OAAO,IAAI,CAAC,IAAI,IAAI,KAAK,GAAG,GAAG,CAAC,CAAC;GAClC;EAEO,kBAAkB,CAAC,KAAa;IACtC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,IAAI,GAAG,CAAC;GAClC;EAEO,QAAQ;IACd,IAAI,CAAC,QAAQ,EAAE,CAAC;IAChB,IAAI,CAAC,EAAE,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;IACxD,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC5B;EAEO,QAAQ;IACd,IAAI,CAAC,IAAI,CAAC,EAAE;MAAE,OAAO;IACrB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;GACrB;EAkHD,gBAAgB;IACd,IAAI,IAAI,CAAC,gBAAgB;MAAE,IAAI,CAAC,4BAA4B,EAAE,CAAC;IAC/D,UAAU,CAAC,OAAO,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC;GACzC;EAED,iBAAiB;IACf,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACrE,IAAI,CAAC,QAAQ,EAAE,CAAC;GACjB;EAED,oBAAoB;IAClB,IAAI,CAAC,QAAQ,EAAE,CAAC;GACjB;EAED,kBAAkB;;;;IAIhB,GAAG,CAAC;MACF,IAAI,OAAO,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE;QACxC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;OACpB;KACF,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,IAAI,OAAO,IAAI,CAAC,QAAQ,KAAK,WAAW;MAAE,OAAO;IACjD,MAAM,MAAM,GACV,EAAE,CAAC;IACL,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ;QAC9B,kBAAkB;QAClB,qBAAqB,CAAC;IAC1B,MAAM,OAAO,GAAG;;;;;YAKR,IAAI,CAAC,QAAQ;;;;;KAKpB,CAAC;IACF,MAAM,SAAS,GAAG,MAAM,CAAC;IAEzB,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE;MAC1B,MAAM,CAAC,YAAY,CAAC,GAAG,GAAG,SAAS,yBAAyB,OAAO,EAAE,CAAC;KACvE;SAAM;MACL,MAAM,CAAC,YAAY,CAAC,GAAG,GAAG,OAAO,yBAAyB,SAAS,EAAE,CAAC;KACvE;IAED,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,MAAM,IACjB,WAAK,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,OAAO,IACnC,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,WACE,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,SAAS,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,GAAG,EACzC,IAAI,EAAC,WAAW,gBACL,QAAQ,EACnB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,WAAW,EAAE,IAAI,CAAC,UAAU,EAC5B,YAAY,EAAE,IAAI,CAAC,UAAU,IAE7B,YAAM,IAAI,EAAC,QAAQ,IAChB,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAC9B,iBAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,kBAAkB,GAAG,KAEnD,iBAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,2BAA2B,GAAG,CAC7D,CACI,CACH,EACN,WAAK,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,KAAK,IAC/B,YAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/utils/drag.ts","./src/components/split-pane/split-pane.scss?tag=nano-split-pane&encapsulation=shadow","./src/components/split-pane/split-pane.tsx"],"sourcesContent":["export function drag(\n container: HTMLElement,\n onMove: (x: number, y: number) => void\n) {\n function move(pointerEvent: PointerEvent) {\n const dims = container.getBoundingClientRect();\n const defaultView = container.ownerDocument.defaultView!;\n const offsetX = dims.left + defaultView.pageXOffset;\n const offsetY = dims.top + defaultView.pageYOffset;\n const x = pointerEvent.pageX - offsetX;\n const y = pointerEvent.pageY - offsetY;\n\n onMove(x, y);\n }\n\n function stop() {\n document.removeEventListener('pointermove', move);\n document.removeEventListener('pointerup', stop);\n }\n\n document.addEventListener('pointermove', move, { passive: true });\n document.addEventListener('pointerup', stop);\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /*\n @prop --divider-width: The width of the visible divider. Default 4px.\n * @prop --divider-hit-area: The invisible region around the divider where dragging can occur. This is\n * usually wider than the divider to facilitate easier dragging. Default 12px.\n * @prop --min: The minimum allowed size of the primary panel. Default 0.\n * @prop --max: The maximum allowed size of the primary panel. Default 100%.\n * @prop --background-color: Handle background. Default #{map.get($colors, lightgrey)}.\n * @prop --content-color: Handle color. Default #{map.get($colors, dimgrey)}.\n /\n --divider-width: 12px;\n --divider-hit-area: 14px;\n --min: 0%;\n --max: 100%;\n --background-color: #{map.get($colors, lightgrey)};\n --content-color: #{map.get($colors, dimgrey)};\n\n display: grid;\n}\n\n.start,\n.end {\n overflow: hidden;\n}\n\n.divider {\n flex: 0 0 var(--divider-width);\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n background-color: var(--background-color);\n color: var(--content-color);\n z-index: 1;\n font-size: 0.8rem;\n}\n\n.divider:focus {\n outline: none;\n}\n\n:host(:not([disabled])) .divider:focus-visible {\n background-color: #{$control-focus-color};\n}\n\n:host([disabled]) .divider {\n cursor: not-allowed;\n}\n\n/ Horizontal /\n:host(:not([vertical], [disabled])) .divider {\n cursor: col-resize;\n}\n\n:host(:not([vertical])) .divider::after {\n display: flex;\n content: '';\n position: absolute;\n height: 100%;\n left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n width: var(--divider-hit-area);\n}\n\n/ Vertical /\n:host([vertical]) {\n flex-direction: column;\n}\n\n:host([vertical]:not([disabled])) .divider {\n cursor: row-resize;\n}\n\n:host([vertical]) .divider::after {\n content: '';\n position: absolute;\n width: 100%;\n top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n height: var(--divider-hit-area);\n}\n","import {\n Prop,\n Component,\n Watch,\n Event,\n EventEmitter,\n ComponentInterface,\n Element,\n Host,\n h,\n} from '@stencil/core';\nimport { clamp, raf, debounce } from '../../utils';\nimport { drag } from '../../utils/drag';\n\n/\n Split panes display two adjacent panels, allowing the user to reposition them.\n \n @part start - The start panel.\n * @part end - The end panel.\n * @part panel - Targets both the start and end panels.\n * @part divider - The divider that separates the start and end panels.\n \n @slot start - The start panel.\n * @slot end - The end panel.\n * @slot handle - An optional handle to render at the center of the divider.\n /\n@Component({\n tag: 'nano-split-pane',\n styleUrl: 'split-pane.scss',\n shadow: true,\n})\nexport class SplitPane implements ComponentInterface {\n @Element() host: HTMLNanoSplitPaneElement;\n private cachedPositionInPixels: number;\n private ro: ResizeObserver;\n private isAnimating = false;\n private didLoad = false;\n\n private get size() {\n const { width, height } = this.host.getBoundingClientRect();\n return this.vertical ? height : width;\n }\n\n private get shouldAnimate() {\n return this.didLoad && this._shouldAnimate;\n }\n private set shouldAnimate(sa: boolean) {\n this._shouldAnimate = sa;\n }\n private _shouldAnimate: boolean = true;\n\n constructor() {\n this.handlePositionChange = debounce(\n this.handlePositionChange.bind(this),\n 100\n );\n }\n\n /\n The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\n * container's initial size.\n /\n @Prop()\n get position() {\n return this._position;\n }\n set position(pos: number) {\n // override too high / low\n pos = Math.min(Math.max(pos, 0), 100);\n if (isNaN(pos) \|\| pos === this._position) return;\n\n if (\n this.shouldAnimate &&\n this.animationDuration > 0 &&\n !isNaN(this.position)\n ) {\n this.animatePosition(pos);\n return;\n }\n this._position = pos;\n }\n private _position: number;\n\n // eslint-disable-next-line @stencil/no-unused-watch\n @Watch('position')\n handlePositionChange() {\n this.cachedPositionInPixels = this.percentageToPixels(this.position);\n this.positionInPixels = this.percentageToPixels(this.position);\n this.nanoReposition.emit();\n }\n\n /\n The current position of the divider from the primary panel's edge in pixels.\n /\n @Prop({ mutable: true }) positionInPixels: number;\n\n @Watch('positionInPixels')\n handlePositionInPixelsChange() {\n this.position = this.pixelsToPercentage(this.positionInPixels);\n }\n\n /* Draws the split panel in a vertical orientation with the start and end panels stacked. /\n @Prop({ reflect: true }) vertical = false;\n\n /* Disables resizing. Note that the position may still change as a result of resizing the host element. /\n @Prop({ reflect: true }) disabled = false;\n\n /\n If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\n * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\n * host element is resized.\n /\n @Prop() primary?: 'start' \| 'end';\n\n /\n One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n * `\"100px 50%\"`.\n /\n @Prop() snap?: string;\n\n /* How close the divider must be to a snap point until snapping occurs. /\n @Prop() snapThreshold = 12;\n\n /* When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable. /\n @Prop() animationDuration = 0.6;\n\n /* Emitted when the divider's position changes. /\n @Event() nanoReposition: EventEmitter;\n\n /* Emitted when the divider is being dragged. /\n @Event() nanoDragging: EventEmitter<number>;\n\n // Private logic\n\n private animatePosition(end: number) {\n if (this.isAnimating) return;\n\n const duration = this.animationDuration; // seconds\n const fps = 60;\n const start = this.position;\n const distance = end - start;\n\n let position = start;\n let time = 0;\n\n function easeInOutQuad(t: number, s: number, e: number, d: number) {\n if ((t /= d / 2) < 1) return (e / 2) t * t + s;\n else return (-e / 2) * (--t * (t - 2) - 1) + s;\n }\n\n const go = () => {\n time += 1 / fps;\n position = easeInOutQuad(time, start, distance, duration);\n\n if (\n (end > start && position >= end) \|\|\n (end < start && position <= end)\n ) {\n this.position = end;\n this.shouldAnimate = true;\n this.isAnimating = false;\n return;\n }\n this.position = position;\n raf(go);\n };\n\n this.shouldAnimate = false;\n this.isAnimating = true;\n raf(go);\n }\n\n private percentageToPixels(value: number) {\n return this.size * (value / 100);\n }\n\n private pixelsToPercentage(value: number) {\n return (value / this.size) * 100;\n }\n\n private attachRO() {\n this.detachRO();\n this.ro = new ResizeObserver(() => this.handleResize());\n this.ro.observe(this.host);\n }\n\n private detachRO() {\n if (!this.ro) return;\n this.ro.unobserve(this.host);\n this.ro = undefined;\n }\n\n // Event handlers\n\n private handleDrag = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n // Prevent text selection when dragging\n e.preventDefault();\n\n drag(this.host, (x, y) => {\n let newPositionInPixels = this.vertical ? y : x;\n\n this.nanoDragging.emit(newPositionInPixels);\n\n // Flip for end panels\n if (this.primary === 'end') {\n newPositionInPixels = this.size - newPositionInPixels;\n }\n\n // Check snap points\n if (this.snap) {\n const snaps = this.snap.split(' ');\n\n snaps.forEach((value) => {\n let snapPoint: number;\n\n if (value.endsWith('%')) {\n snapPoint = this.size * (parseFloat(value) / 100);\n } else {\n snapPoint = parseFloat(value);\n }\n\n if (\n newPositionInPixels >= snapPoint - this.snapThreshold &&\n newPositionInPixels <= snapPoint + this.snapThreshold\n ) {\n newPositionInPixels = snapPoint;\n }\n });\n }\n this.shouldAnimate = false;\n this.position = clamp(\n this.pixelsToPercentage(newPositionInPixels),\n 0,\n 100\n );\n raf(() => (this.shouldAnimate = true));\n });\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) {\n return;\n }\n\n if (\n [\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n ].includes(event.key)\n ) {\n let newPosition = this.position;\n const incr =\n (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);\n\n event.preventDefault();\n\n if (\n (event.key === 'ArrowLeft' && !this.vertical) \|\|\n (event.key === 'ArrowUp' && this.vertical)\n ) {\n newPosition -= incr;\n }\n\n if (\n (event.key === 'ArrowRight' && !this.vertical) \|\|\n (event.key === 'ArrowDown' && this.vertical)\n ) {\n newPosition += incr;\n }\n\n if (event.key === 'Home') {\n newPosition = this.primary === 'end' ? 100 : 0;\n }\n\n if (event.key === 'End') {\n newPosition = this.primary === 'end' ? 0 : 100;\n }\n\n this.shouldAnimate = false;\n\n this.position = clamp(newPosition, 0, 100);\n raf(() => (this.shouldAnimate = true));\n }\n };\n\n private handleResize = () => {\n if (!this.didLoad \|\| this.isAnimating) return;\n\n // Resize when a primary panel is set\n if (this.primary) {\n this.shouldAnimate = false;\n this.position = this.pixelsToPercentage(this.cachedPositionInPixels);\n raf(() => (this.shouldAnimate = true));\n }\n };\n\n componentDidLoad(): void {\n if (this.positionInPixels) this.handlePositionInPixelsChange();\n setTimeout(() => (this.didLoad = true));\n }\n\n connectedCallback() {\n this.cachedPositionInPixels = this.percentageToPixels(this.position);\n this.attachRO();\n }\n\n disconnectedCallback() {\n this.detachRO();\n }\n\n componentDidRender(): void {\n // bit hacky ... because we use getter / setter for position, there's a render before `position` is passed in via attribute\n // if we set a default position in the class, this causes the divider to jump (from default to user set position)\n // so - wait a render, see if there's a position passed in via attribute, then set default if not\n raf(() => {\n if (typeof this.position === 'undefined') {\n this.position = 50;\n }\n });\n }\n\n render() {\n if (typeof this.position === 'undefined') return;\n const styles: { gridTemplateRows?: string; gridTemplateColumns?: string } =\n {};\n const gridTemplate = this.vertical\n ? 'gridTemplateRows'\n : 'gridTemplateColumns';\n const primary = `\n clamp(\n 0%,\n clamp(\n var(--min),\n ${this.position}% - var(--divider-width) / 2,\n var(--max)\n ),\n calc(100% - var(--divider-width))\n )\n `;\n const secondary = 'auto';\n\n if (this.primary === 'end') {\n styles[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n } else {\n styles[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n }\n\n return (\n <Host style={styles}>\n <div part=\"panel start\" class=\"start\">\n <slot name=\"start\"></slot>\n </div>\n <div\n part=\"divider\"\n class=\"divider\"\n tabindex={this.disabled ? undefined : '0'}\n role=\"separator\"\n aria-label=\"Resize\"\n onKeyDown={this.handleKeyDown}\n onMouseDown={this.handleDrag}\n onTouchStart={this.handleDrag}\n >\n <slot name=\"handle\">\n {!this.disabled && this.vertical ? (\n <nano-icon slot=\"handle\" name=\"solid/grip-lines\" />\n ) : (\n <nano-icon slot=\"handle\" name=\"solid/grip-lines-vertical\" />\n )}\n </slot>\n </div>\n <div part=\"panel end\" class=\"end\">\n <slot name=\"end\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/custom-elements/index.js CHANGED Viewed

@@ -22359,6 +22359,7 @@ let SplitPane = class extends H {
     this.__registerHost();
     this.__attachShadow();
     this.nanoReposition = createEvent(this, "nanoReposition", 7);
+    this.nanoDragging = createEvent(this, "nanoDragging", 7);
     this.isAnimating = false;
     this.didLoad = false;
     this._shouldAnimate = true;
@@ -22370,10 +22371,6 @@ let SplitPane = class extends H {
     this.snapThreshold = 12;
     /** When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable. */
     this.animationDuration = 0.6;
-    this._isDragging = false;
-    this.handleIsDragging = (dragging) => {
-      this._isDragging = dragging;
-    };
     // Event handlers
     this.handleDrag = (e) => {
       if (this.disabled) {
@@ -22382,8 +22379,8 @@ let SplitPane = class extends H {
       // Prevent text selection when dragging
       e.preventDefault();
       drag(this.host, (x, y) => {
-        this.handleIsDragging(true);
         let newPositionInPixels = this.vertical ? y : x;
+        this.nanoDragging.emit(newPositionInPixels);
         // Flip for end panels
         if (this.primary === 'end') {
           newPositionInPixels = this.size - newPositionInPixels;
@@ -22408,7 +22405,6 @@ let SplitPane = class extends H {
         this.shouldAnimate = false;
         this.position = clamp$2(this.pixelsToPercentage(newPositionInPixels), 0, 100);
         raf(() => (this.shouldAnimate = true));
-        this.handleIsDragging(false);
       });
     };
     this.handleKeyDown = (event) => {
@@ -22456,7 +22452,6 @@ let SplitPane = class extends H {
       }
     };
     this.handlePositionChange = debounce$1(this.handlePositionChange.bind(this), 100);
-    this.handleIsDragging = debounce$1(this.handleIsDragging, 200);
   }
   get size() {
     const { width, height } = this.host.getBoundingClientRect();
@@ -22480,7 +22475,9 @@ let SplitPane = class extends H {
     pos = Math.min(Math.max(pos, 0), 100);
     if (isNaN(pos) || pos === this._position)
       return;
-    if (this.shouldAnimate && this.animationDuration > 0) {
+    if (this.shouldAnimate &&
+      this.animationDuration > 0 &&
+      !isNaN(this.position)) {
       this.animatePosition(pos);
       return;
     }
@@ -22495,10 +22492,6 @@ let SplitPane = class extends H {
   handlePositionInPixelsChange() {
     this.position = this.pixelsToPercentage(this.positionInPixels);
   }
-  /** @readonly - hook to know if the pane is currently being dragged */
-  get isDragging() {
-    return this._isDragging;
-  }
   // Private logic
   animatePosition(end) {
     if (this.isAnimating)
@@ -22566,12 +22559,13 @@ let SplitPane = class extends H {
     // if we set a default position in the class, this causes the divider to jump (from default to user set position)
     // so - wait a render, see if there's a position passed in via attribute, *then* set default if not
     raf(() => {
-      if (this.position === undefined)
+      if (typeof this.position === 'undefined') {
         this.position = 50;
+      }
     });
   }
   render() {
-    if (!this.position)
+    if (typeof this.position === 'undefined')
       return;
     const styles = {};
     const gridTemplate = this.vertical
@@ -23928,7 +23922,7 @@ const NanoSkeleton = /*@__PURE__*/proxyCustomElement(Skeleton, [1,"nano-skeleton
 const NanoSlide = /*@__PURE__*/proxyCustomElement(Slide$2, [1,"nano-slide",{"ready":[1540]}]);
 const NanoSlides = /*@__PURE__*/proxyCustomElement(Slides, [1,"nano-slides",{"options":[1040],"navbtns":[4],"pager":[4],"fullscreenbtn":[4],"fullscreen":[1540],"animation":[513],"currentSlide":[1538,"current-slide"],"autoplay":[8],"ready":[1540],"iCurrentSlide":[32],"slidesReady":[32],"didInit":[32]}]);
 const NanoSpinner = /*@__PURE__*/proxyCustomElement(Spinner, [1,"nano-spinner",{"type":[1],"overlay":[516],"hasText":[32]}]);
-const NanoSplitPane = /*@__PURE__*/proxyCustomElement(SplitPane, [1,"nano-split-pane",{"position":[6146],"positionInPixels":[1026,"position-in-pixels"],"vertical":[516],"disabled":[516],"primary":[1],"snap":[1],"snapThreshold":[2,"snap-threshold"],"animationDuration":[2,"animation-duration"],"isDragging":[2564,"is-dragging"]}]);
+const NanoSplitPane = /*@__PURE__*/proxyCustomElement(SplitPane, [1,"nano-split-pane",{"position":[6146],"positionInPixels":[1026,"position-in-pixels"],"vertical":[516],"disabled":[516],"primary":[1],"snap":[1],"snapThreshold":[2,"snap-threshold"],"animationDuration":[2,"animation-duration"]}]);
 const NanoSticker = /*@__PURE__*/proxyCustomElement(Sticker, [1,"nano-sticker",{"autoResize":[4,"auto-resize"],"isSticky":[1028,"is-sticky"],"offset":[1026],"position":[1],"quietMode":[1,"quiet-mode"],"hideOnNewStickers":[4,"hide-on-new-stickers"],"breakPointMax":[2,"break-point-max"],"breakPointMin":[2,"break-point-min"],"scrollParent":[1040],"stickTo":[1,"stick-to"],"isStuck":[32],"isRootSticker":[32],"hide":[32],"scrollHide":[32],"multiStickerHide":[32],"scrollingTo":[32],"quietModeIsOn":[32],"stuckCounter":[32],"stickerIndex":[32],"stickToEle":[32],"triggerPos":[32],"trigger":[32],"_offset":[32]}]);
 const NanoTab = /*@__PURE__*/proxyCustomElement(Tab, [1,"nano-tab",{"panel":[513],"active":[516],"disabled":[516],"closable":[4]}]);
 const NanoTabContent = /*@__PURE__*/proxyCustomElement(TabPanel, [1,"nano-tab-content",{"name":[513],"active":[516]}]);