@nanoporetech-digital/components 2.1.2 → 2.2.0

package/dist/types/components.d.ts

@@ -1684,6 +1684,44 @@ export namespace Components {
          */
         "type": 'dna' | 'circle';
     }
+    interface NanoSplitPane {
+        /**
+          * When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable.
+         */
+        "animationDuration": number;
+        /**
+          * Disables resizing. Note that the position may still change as a result of resizing the host element.
+         */
+        "disabled": boolean;
+        /**
+          * @readonly - hook to know if the pane is currently being dragged
+         */
+        "isDragging": boolean;
+        /**
+          * The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the container's initial size.
+         */
+        "position": number;
+        /**
+          * The current position of the divider from the primary panel's edge in pixels.
+         */
+        "positionInPixels": number;
+        /**
+          * If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the host element is resized.
+         */
+        "primary"?: 'start' | 'end';
+        /**
+          * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g. `"100px 50%"`.
+         */
+        "snap"?: string;
+        /**
+          * How close the divider must be to a snap point until snapping occurs.
+         */
+        "snapThreshold": number;
+        /**
+          * Draws the split panel in a vertical orientation with the start and end panels stacked.
+         */
+        "vertical": boolean;
+    }
     interface NanoSticker {
         /**
           * Only applicable to root stickers. When applied the sticker will grow or shrink to the scrollParent size
@@ -2090,6 +2128,12 @@ declare global {
         prototype: HTMLNanoSpinnerElement;
         new (): HTMLNanoSpinnerElement;
     };
+    interface HTMLNanoSplitPaneElement extends Components.NanoSplitPane, HTMLStencilElement {
+    }
+    var HTMLNanoSplitPaneElement: {
+        prototype: HTMLNanoSplitPaneElement;
+        new (): HTMLNanoSplitPaneElement;
+    };
     interface HTMLNanoStickerElement extends Components.NanoSticker, HTMLStencilElement {
     }
     var HTMLNanoStickerElement: {
@@ -2160,6 +2204,7 @@ declare global {
         "nano-slide": HTMLNanoSlideElement;
         "nano-slides": HTMLNanoSlidesElement;
         "nano-spinner": HTMLNanoSpinnerElement;
+        "nano-split-pane": HTMLNanoSplitPaneElement;
         "nano-sticker": HTMLNanoStickerElement;
         "nano-tab": HTMLNanoTabElement;
         "nano-tab-content": HTMLNanoTabContentElement;
@@ -3951,6 +3996,48 @@ declare namespace LocalJSX {
          */
         "type"?: 'dna' | 'circle';
     }
+    interface NanoSplitPane {
+        /**
+          * When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable.
+         */
+        "animationDuration"?: number;
+        /**
+          * Disables resizing. Note that the position may still change as a result of resizing the host element.
+         */
+        "disabled"?: boolean;
+        /**
+          * @readonly - hook to know if the pane is currently being dragged
+         */
+        "isDragging"?: boolean;
+        /**
+          * Emitted when the divider's position changes.
+         */
+        "onNanoReposition"?: (event: CustomEvent<any>) => void;
+        /**
+          * The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the container's initial size.
+         */
+        "position"?: number;
+        /**
+          * The current position of the divider from the primary panel's edge in pixels.
+         */
+        "positionInPixels"?: number;
+        /**
+          * If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the host element is resized.
+         */
+        "primary"?: 'start' | 'end';
+        /**
+          * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g. `"100px 50%"`.
+         */
+        "snap"?: string;
+        /**
+          * How close the divider must be to a snap point until snapping occurs.
+         */
+        "snapThreshold"?: number;
+        /**
+          * Draws the split panel in a vertical orientation with the start and end panels stacked.
+         */
+        "vertical"?: boolean;
+    }
     interface NanoSticker {
         /**
           * Only applicable to root stickers. When applied the sticker will grow or shrink to the scrollParent size
@@ -4180,6 +4267,7 @@ declare namespace LocalJSX {
         "nano-slide": NanoSlide;
         "nano-slides": NanoSlides;
         "nano-spinner": NanoSpinner;
+        "nano-split-pane": NanoSplitPane;
         "nano-sticker": NanoSticker;
         "nano-tab": NanoTab;
         "nano-tab-content": NanoTabContent;
@@ -4230,6 +4318,7 @@ declare module "@stencil/core" {
             "nano-slide": LocalJSX.NanoSlide & JSXBase.HTMLAttributes<HTMLNanoSlideElement>;
             "nano-slides": LocalJSX.NanoSlides & JSXBase.HTMLAttributes<HTMLNanoSlidesElement>;
             "nano-spinner": LocalJSX.NanoSpinner & JSXBase.HTMLAttributes<HTMLNanoSpinnerElement>;
+            "nano-split-pane": LocalJSX.NanoSplitPane & JSXBase.HTMLAttributes<HTMLNanoSplitPaneElement>;
             "nano-sticker": LocalJSX.NanoSticker & JSXBase.HTMLAttributes<HTMLNanoStickerElement>;
             "nano-tab": LocalJSX.NanoTab & JSXBase.HTMLAttributes<HTMLNanoTabElement>;
             "nano-tab-content": LocalJSX.NanoTabContent & JSXBase.HTMLAttributes<HTMLNanoTabContentElement>;

package/dist/types/utils/drag.d.ts

@@ -0,0 +1 @@
+export declare function drag(container: HTMLElement, onMove: (x: number, y: number) => void): void;

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-03-04T14:03:08",
+  "timestamp": "2022-05-06T15:07:19",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.12.2",
@@ -2648,7 +2648,7 @@
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "default text color of content other than `nano-option`. Defaults to $color-palegrey;"
+          "docs": "default text color of content other than `nano-option`. Defaults to #b5aea7;"
         },
         {
           "name": "--font-size",
@@ -7213,6 +7213,7 @@
         "nano-menu-drawer",
         "nano-option",
         "nano-select",
+        "nano-split-pane",
         "nano-tab-group"
       ],
       "dependencies": [],
@@ -7244,6 +7245,9 @@
         "nano-select": [
           "nano-icon"
         ],
+        "nano-split-pane": [
+          "nano-icon"
+        ],
         "nano-tab-group": [
           "nano-icon"
         ]
@@ -12234,6 +12238,309 @@
         ]
       }
     },
+    {
+      "filePath": "./src/components/split-pane/split-pane.tsx",
+      "encapsulation": "shadow",
+      "tag": "nano-split-pane",
+      "readme": "# nano-split-pane\n\n\n",
+      "docs": "Split panes display two adjacent panels, allowing the user to reposition them.",
+      "docsTags": [
+        {
+          "name": "part",
+          "text": "start - The start panel."
+        },
+        {
+          "name": "part",
+          "text": "end - The end panel."
+        },
+        {
+          "name": "part",
+          "text": "panel - Targets both the start and end panels."
+        },
+        {
+          "name": "part",
+          "text": "divider - The divider that separates the start and end panels."
+        },
+        {
+          "name": "slot",
+          "text": "start - The start panel."
+        },
+        {
+          "name": "slot",
+          "text": "end - The end panel."
+        },
+        {
+          "name": "slot",
+          "text": "handle - An optional handle to render at the center of the divider."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "animationDuration",
+          "type": "number",
+          "mutable": false,
+          "attr": "animation-duration",
+          "reflectToAttr": false,
+          "docs": "When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable.",
+          "docsTags": [],
+          "default": "0.6",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "disabled",
+          "reflectToAttr": true,
+          "docs": "Disables resizing. Note that the position may still change as a result of resizing the host element.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "isDragging",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "is-dragging",
+          "reflectToAttr": true,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "readonly",
+              "text": "- hook to know if the pane is currently being dragged"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": false
+        },
+        {
+          "name": "position",
+          "type": "number",
+          "mutable": false,
+          "attr": "position",
+          "reflectToAttr": false,
+          "docs": "The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\ncontainer's initial size.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": true
+        },
+        {
+          "name": "positionInPixels",
+          "type": "number",
+          "mutable": true,
+          "attr": "position-in-pixels",
+          "reflectToAttr": false,
+          "docs": "The current position of the divider from the primary panel's edge in pixels.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "primary",
+          "type": "\"end\" | \"start\"",
+          "mutable": false,
+          "attr": "primary",
+          "reflectToAttr": false,
+          "docs": "If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\nprimary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\nhost element is resized.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "end",
+              "type": "string"
+            },
+            {
+              "value": "start",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "snap",
+          "type": "string",
+          "mutable": false,
+          "attr": "snap",
+          "reflectToAttr": false,
+          "docs": "One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n`\"100px 50%\"`.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "snapThreshold",
+          "type": "number",
+          "mutable": false,
+          "attr": "snap-threshold",
+          "reflectToAttr": false,
+          "docs": "How close the divider must be to a snap point until snapping occurs.",
+          "docsTags": [],
+          "default": "12",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "vertical",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "vertical",
+          "reflectToAttr": true,
+          "docs": "Draws the split panel in a vertical orientation with the start and end panels stacked.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "nanoReposition",
+          "detail": "any",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the divider's position changes.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [
+        {
+          "name": "--background-color",
+          "annotation": "prop",
+          "docs": "Handle background. Default #e4e6e8."
+        },
+        {
+          "name": "--content-color",
+          "annotation": "prop",
+          "docs": "Handle color. Default #918b86."
+        },
+        {
+          "name": "--divider-hit-area",
+          "annotation": "prop",
+          "docs": "The invisible region around the divider where dragging can occur. This is usually wider than the divider to facilitate easier dragging. Default 12px."
+        },
+        {
+          "name": "--divider-width",
+          "annotation": "prop",
+          "docs": "The width of the visible divider. Default 4px."
+        },
+        {
+          "name": "--max",
+          "annotation": "prop",
+          "docs": "The maximum allowed size of the primary panel. Default 100%."
+        },
+        {
+          "name": "--min",
+          "annotation": "prop",
+          "docs": "The minimum allowed size of the primary panel. Default 0."
+        }
+      ],
+      "slots": [
+        {
+          "name": "end",
+          "docs": "The end panel."
+        },
+        {
+          "name": "handle",
+          "docs": "An optional handle to render at the center of the divider."
+        },
+        {
+          "name": "start",
+          "docs": "The start panel."
+        }
+      ],
+      "parts": [
+        {
+          "name": "divider",
+          "docs": "The divider that separates the start and end panels."
+        },
+        {
+          "name": "end",
+          "docs": "The end panel."
+        },
+        {
+          "name": "panel",
+          "docs": "Targets both the start and end panels."
+        },
+        {
+          "name": "start",
+          "docs": "The start panel."
+        }
+      ],
+      "dependents": [],
+      "dependencies": [
+        "nano-icon"
+      ],
+      "dependencyGraph": {
+        "nano-split-pane": [
+          "nano-icon"
+        ]
+      }
+    },
     {
       "filePath": "./src/components/sticky/sticker.tsx",
       "encapsulation": "shadow",

package/docs-vscode.json

@@ -2298,6 +2298,59 @@
         }
       ]
     },
+    {
+      "name": "nano-split-pane",
+      "description": {
+        "kind": "markdown",
+        "value": "Split panes display two adjacent panels, allowing the user to reposition them."
+      },
+      "attributes": [
+        {
+          "name": "animation-duration",
+          "description": "When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable."
+        },
+        {
+          "name": "disabled",
+          "description": "Disables resizing. Note that the position may still change as a result of resizing the host element."
+        },
+        {
+          "name": "is-dragging",
+          "description": ""
+        },
+        {
+          "name": "position",
+          "description": "The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\ncontainer's initial size."
+        },
+        {
+          "name": "position-in-pixels",
+          "description": "The current position of the divider from the primary panel's edge in pixels."
+        },
+        {
+          "name": "primary",
+          "description": "If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\nprimary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\nhost element is resized.",
+          "values": [
+            {
+              "name": "end"
+            },
+            {
+              "name": "start"
+            }
+          ]
+        },
+        {
+          "name": "snap",
+          "description": "One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n`\"100px 50%\"`."
+        },
+        {
+          "name": "snap-threshold",
+          "description": "How close the divider must be to a snap point until snapping occurs."
+        },
+        {
+          "name": "vertical",
+          "description": "Draws the split panel in a vertical orientation with the start and end panels stacked."
+        }
+      ]
+    },
     {
       "name": "nano-sticker",
       "description": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -22,7 +22,6 @@
     "docs-json.json"
   ],
   "scripts": {
-    "prepare": "npm run build",
     "start": "npm run stencil.dev",
     "build": "run-s themes.prod stencil.prod",
     "dev": "run-p themes.dev stencil.dev",
@@ -43,12 +42,12 @@
     "prettier.test": "npm run prettier.base -- --check",
     "prettier.base": "prettier \"./{src,jest}/**/*.{ts,tsx,js,jsx}\"",
     "test": "run-p themes.prod test.all.base",
-    "test.ci": "run-p themes.prod test.all.base -- --ci",
+    "test.ci": "run-p themes.prod test.all.base",
     "test.spec": "stencil test --spec --max-workers=2 --watch --config='./stencil.config.test.ts'",
     "test.spec.debug": "npx --node-arg=\"--inspect-brk\" stencil test --spec --config='./stencil.config.test.ts'",
     "test.watch": "run-s themes.prod test.all.watch",
     "test.all.watch": "stencil test --spec --e2e --watch --bail --config='./stencil.config.test.ts'",
-    "test.all.base": "stencil test --spec --e2e --max-workers=2 --config='./stencil.config.test.ts'",
+    "test.all.base": "stencil test --spec --e2e --max-workers=1 --config='./stencil.config.test.ts'",
     "jest": "jest",
     "serve": "http-server www -p 5000"
   },
@@ -72,7 +71,7 @@
   "devDependencies": {
     "@stencil/eslint-plugin": "^0.3.1",
     "@stencil/postcss": "^2.0.0",
-    "@stencil/react-output-target": "0.0.9",
+    "@stencil/react-output-target": "^0.3.1",
     "@stencil/sass": "^2.0.0-0",
     "@stencil/vue-output-target": "^0.5",
     "@types/jest": "^26.0.3",
@@ -107,6 +106,9 @@
     "tslint": "^6.1.3",
     "typescript": "^3.9.5"
   },
+  "resolutions": {
+    "eslint": "^6.0.0"
+  },
   "jest": {
     "preset": "@stencil/core/testing"
   },
@@ -124,5 +126,5 @@
   "peerDependencies": {
     "@stencil/core": "^2.5.0"
   },
-  "gitHead": "451b2afed8987603d7917df4ec58ea41a0fc02a6"
+  "gitHead": "50db749d1d853728731a756c260450b50247e4cc"
 }