@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.1

package/dist/collection/components/range/range.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, } from "@stencil/core";
 import { h } from "../../utils/renderer";
@@ -8,11 +8,10 @@ import { clamp } from "../../utils/math";
 import { createColorClasses } from "../../utils/theme";
 import { debounceEvent } from "../../utils/throttle";
 /**
- * The Range slider lets users select from a range of values by moving
- * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.
+ * Ranges allow the user to select a value within a given range using a slider.
  *
- * Labels can be placed on either side of the range by adding the
- * `slot="start"` or `slot="end"` to the element.
+ * @version 1.0.0
+ * @status stable
  *
  * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.
  * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.
@@ -388,10 +387,11 @@ export class Range {
         return {
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
-                    "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"danger\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
                     "references": {
                         "Color": {
                             "location": "import",
@@ -408,11 +408,11 @@ export class Range {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": false
             },
             "debounce": {
                 "type": "number",
+                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -427,12 +427,12 @@ export class Range {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "debounce",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -447,12 +447,12 @@ export class Range {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "dualKnobs": {
                 "type": "boolean",
+                "attribute": "dual-knobs",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -467,12 +467,12 @@ export class Range {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "dual-knobs",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "min": {
                 "type": "number",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -487,12 +487,12 @@ export class Range {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "max": {
                 "type": "number",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -507,12 +507,12 @@ export class Range {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false,
                 "defaultValue": "100"
             },
             "pin": {
                 "type": "boolean",
+                "attribute": "pin",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -527,12 +527,12 @@ export class Range {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "pin",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "snaps": {
                 "type": "boolean",
+                "attribute": "snaps",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -547,12 +547,12 @@ export class Range {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "snaps",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "step": {
                 "type": "number",
+                "attribute": "step",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -567,12 +567,12 @@ export class Range {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "step",
                 "reflect": false,
                 "defaultValue": "1"
             },
             "ticks": {
                 "type": "boolean",
+                "attribute": "ticks",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -587,12 +587,12 @@ export class Range {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "ticks",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -607,12 +607,12 @@ export class Range {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "number",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "RangeValue",
@@ -633,7 +633,6 @@ export class Range {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "0"
             }
@@ -782,4 +781,3 @@ const ratioToValue = (ratio, min, max, step) => {
 const valueToRatio = (value, min, max) => {
     return clamp(0, (value - min) / (max - min), 1);
 };
-//# sourceMappingURL=range.js.map

package/dist/collection/components/rating/rating.css

@@ -1,7 +1,4 @@
-:host {
-  box-sizing: border-box;
-}
-
+:host,
 *,
 *::before,
 *::after {
@@ -10,10 +7,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
-  box-sizing: border-box;
-}
-
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host,
 *,
 *::before,
 *::after {
@@ -22,7 +26,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host {
   /**
   * @prop --symbol-color: The inactive color for symbols. Defaults to #b5aea7
   * @prop --symbol-color-active: The active color for symbols. Defaults to #b5aea7
@@ -53,7 +67,7 @@
 .rating:focus {
   outline: none;
 }
-.rating.focus-visible:focus {
+.rating:focus-visible:focus {
   box-shadow: var(--focus-shadow);
 }
 .rating__symbols {

package/dist/collection/components/rating/rating.js

@@ -1,9 +1,8 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, } from "@stencil/core";
 import { h } from "../../utils/renderer";
-import { focusVisible } from "../../utils/focus-visible";
 import { clamp } from "../../utils/math";
 /**
  * Rating - a form element to allow the viewing and input of user feedback.
@@ -150,16 +149,12 @@ export class Rating {
         return `rect(0, ${(tw / 100) * ((displayValue / this.max) * 100)}px, 2em, 0)`;
     }
     componentDidLoad() {
-        focusVisible.observe(this.rating);
         setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);
     }
     connectedCallback() {
         this.isRtl =
             this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';
     }
-    disconnectedCallback() {
-        focusVisible.unobserve(this.rating);
-    }
     render() {
         this.isRtl =
             this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';
@@ -171,23 +166,23 @@ export class Rating {
         else {
             displayValue = this.isHovering ? this.hoverValue : this.value;
         }
-        return (h(Host, { key: 'e7aec714fffd7abf991de7f31712d6a85a67ee75', class: "nano-rating" }, h("div", { key: '1865bfccf63d3b544e394abb8e4c9141636dd930', class: "rating-wrap" }, h("div", { key: '5cb091e86a3b68cdc44ed0f181ba9e99cecfd8da', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
+        return (h(Host, { key: 'cecf5fdd43d5b48e55ddd4c69900e82c85c48bee', class: "nano-rating" }, h("div", { key: '87803596623dfc08370dd7e6f0a59bfaed8fcf4f', class: "rating-wrap" }, h("div", { key: '32da5e5a323bf552e5e04403e7594ecc57739b31', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
                 rating: true,
                 'rating--readonly': this.readonly,
                 'rating--disabled': this.disabled,
-            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: '118a16e603a53cbfc515297eb347705277118ca1', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
+            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: 'cab05324ead1b6e539e6c162ab0a9f2488a3a801', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
                 rating__symbol: true,
                 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
             },
             // Users can click the current value to clear the rating. When this happens, we set this.isHovering to
             // false to prevent the hover state from confusing them as they move the mouse out of the control. This
             // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.
-            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: 'b299dae6997acbcece7582efd9f99858cf30b22b', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
+            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: 'd369b4d296ba7c763777422a7885a78d0175e0c8', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
                 clip: this.clip(displayValue),
             } }, counter.map((index) => (h("span", { class: {
                 rating__symbol: true,
                 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
-            }, innerHTML: this.symbol(index + 1) })))), h("input", { key: '7e134eb0de5e255b474e567406a0ae4f027aa83b', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly })))));
+            }, innerHTML: this.symbol(index + 1) })))), h("input", { key: 'd1cfd5eeb33163a3c0f02cde0234bbf0ddbd2805', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly })))));
     }
     static get is() { return "nano-rating"; }
     static get encapsulation() { return "scoped"; }
@@ -205,6 +200,7 @@ export class Rating {
         return {
             "value": {
                 "type": "number",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -219,12 +215,12 @@ export class Rating {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true,
                 "defaultValue": "0"
             },
             "max": {
                 "type": "number",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -239,12 +235,12 @@ export class Rating {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false,
                 "defaultValue": "5"
             },
             "precision": {
                 "type": "number",
+                "attribute": "precision",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -259,12 +255,12 @@ export class Rating {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "precision",
                 "reflect": false,
                 "defaultValue": "1"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -279,12 +275,12 @@ export class Rating {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -299,12 +295,12 @@ export class Rating {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -319,12 +315,12 @@ export class Rating {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "symbolName": {
                 "type": "string",
+                "attribute": "symbol-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -339,12 +335,12 @@ export class Rating {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "symbol-name",
                 "reflect": false,
                 "defaultValue": "'solid/star'"
             },
             "symbol": {
                 "type": "unknown",
+                "attribute": "symbol",
                 "mutable": false,
                 "complexType": {
                     "original": "(_number: number) => string",
@@ -472,4 +468,3 @@ export class Rating {
             }];
     }
 }
-//# sourceMappingURL=rating.js.map

package/dist/collection/components/resize-observe/resize-observe.js

@@ -1,13 +1,11 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, readTask, } from "@stencil/core";
 import { h } from "../../utils/renderer";
 /**
- * A Resize-Observer utility component.
- * Takes a string list of sizes and optional class-names.
- * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.
- * Additionally, can fire events when content no-longer fits within the element.
+ * A thin, declarative interface to the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
+ *
  * @slot - Main slot for any content.
  * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off
  * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off
@@ -229,7 +227,7 @@ export class ResizeObserve {
             this.ro.disconnect();
     }
     render() {
-        return (h(Host, { key: 'b34bd4742548d018aeae0f3ab98e85611287ec07', class: "nano-resize-observe" }, h("slot", { key: 'f9220f1781302bed070ba24f297dfa168fdf0549' }), !!this.notifyContentFit &&
+        return (h(Host, { key: 'c18db95f590c660cc2c0e1dd1f2d2a0c66e63a54', class: "nano-resize-observe" }, h("slot", { key: '25cd2b6762d1bb05d5182fd817b758256ce6750a' }), !!this.notifyContentFit &&
             (this.contentFitX !== null || this.contentFitY !== null) && [
             this.contentFitX ? (h("slot", { name: "content-fit-x" })) : (h("slot", { name: "content-nofit-x" })),
             this.contentFitY ? (h("slot", { name: "content-fit-y" })) : (h("slot", { name: "content-nofit-y" })),
@@ -242,6 +240,7 @@ export class ResizeObserve {
         return {
             "notifyContentFit": {
                 "type": "string",
+                "attribute": "notify-content-fit",
                 "mutable": false,
                 "complexType": {
                     "original": "'x' | 'y' | 'xy'",
@@ -256,11 +255,11 @@ export class ResizeObserve {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "notify-content-fit",
                 "reflect": false
             },
             "states": {
                 "type": "string",
+                "attribute": "states",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -275,7 +274,6 @@ export class ResizeObserve {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "states",
                 "reflect": false
             }
         };
@@ -383,4 +381,3 @@ export class ResizeObserve {
             }];
     }
 }
-//# sourceMappingURL=resize-observe.js.map