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

package/dist/collection/components/checkbox/checkbox.js

@@ -1,23 +1,31 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, } from "@stencil/core";
-import { focusVisible } from "../../utils/focus-visible";
-import { createColorClasses } from "../../utils/theme";
 import { transformTag, h } from "../../utils/renderer";
 let checkboxIds = 0;
 /**
- * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.
- * They appear as checked when activated.
- * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.
+ * Checkboxes are used to let a user choose one or more values from a limited number of options.
  *
- * @slot - if you do not set a label attribute, you can use this slot for more complex markup
+ * @status stable
+ * @version 1.0.0
+ *
+ * @slot - used for more complex, label markup
  */
 export class Checkbox {
     inputId = `nano-cb-${checkboxIds++}`;
     input;
+    _slotWrapper;
+    get slotWrapper() {
+        return this._slotWrapper;
+    }
+    set slotWrapper(value) {
+        this._slotWrapper = value;
+        this.hasLabel = !!value.querySelectorAll('*').length || !!this.label;
+    }
     host;
     inputType = 'checkbox';
+    hasLabel = false;
     /** @internal */
     hasFocus = false;
     /**
@@ -79,6 +87,10 @@ export class Checkbox {
      * label property that can be used to set the label text. Alternatively you may use a label slot.
      */
     label;
+    /**
+     * Visually hide the label - but make it accessible.
+     */
+    hideLabel = false;
     /**
      * If `true`, the checkbox will visually appear as indeterminate (only relevant for type="checkbox")
      */
@@ -103,10 +115,6 @@ export class Checkbox {
             return '';
         return this.input.validationMessage;
     }
-    /**
-     * Color to use from your application's color palette.
-     */
-    color;
     /**
      * The form element to associate the input with (its form owner). Must be the id of a form.
      */
@@ -163,7 +171,6 @@ export class Checkbox {
     async setFocus() {
         if (this.input) {
             this.input.focus();
-            focusVisible.force(this.input);
         }
     }
     /**
@@ -172,9 +179,16 @@ export class Checkbox {
     async removeFocus() {
         if (this.input) {
             this.input.blur();
-            focusVisible.force(this.input, false);
         }
     }
+    onHostClick(e) {
+        // only click events coming from the host itself should toggle the checkbox
+        // (ignore ones coming from the native input or label as this will cause a double toggle)
+        if (this.host !== e.target && this.host.contains(e.target)) {
+            return;
+        }
+        this.checked = !this.checked;
+    }
     onReset(e) {
         const form = this.form
             ? document.querySelector('#' + this.form)
@@ -207,25 +221,27 @@ export class Checkbox {
     // Stencil hooks
     componentWillLoad() {
         this.typeChange();
+        this.hasLabel = !!this.host.querySelectorAll('*').length || !!this.label;
     }
     componentDidLoad() {
         this.input.indeterminate = this.indeterminate;
         this.isRadioChecked();
-        focusVisible.observe(this.input);
-    }
-    disconnectedCallback() {
-        focusVisible.unobserve(this.input);
     }
     render() {
         const labelId = this.inputId + '-lbl';
-        return (h(Host, { key: '92eaee0287da5164176c1893add5d48ff518153a', class: { ...createColorClasses(this.color), 'nano-checkbox': true } }, h("label", { key: '5082a3b8114162d5b52e9f24abe031f8796665e2', class: {
+        return (h(Host, { key: 'ca41f256a304b8ec19dba81fbe0dcd30eefd63fe' }, h("label", { key: '31254b867b036d7703939e7b19f4f483f00af844', class: {
                 nanocb: true,
                 'nanocb--checked': this.checked,
                 'nanocb--invalid': this.invalid,
                 'nanocb--disabled': this.disabled,
                 'nanocb--focused': this.hasFocus,
                 'nanocb--indeterminate': this.indeterminate,
-            }, htmlFor: this.inputId }, h("input", { key: '2b91ea2ac18ac260710202040db3f7a4574a1922', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": labelId, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '0594a16034577181d4f3b1801b08d1761bd4cfe8', class: 'nanocb__input nanocb__input--' + this.type }), h("div", { key: '051e89cbd5aeabad7f6e70369a3f9316f86eb8f8', id: labelId, class: 'nanocb__label nanocb__label--' + this.type }, this.label && !!this.label.length && h("span", { key: 'ddb4067806f185c0d564a0a54c7642a57313e482' }, this.label), h("span", { key: '745cbff6863337008827893a7b451c4a31fb1e91', hidden: this.label && !!this.label.length }, h("slot", { key: '023db905814a76b115e2779d717932125c0bff4a' }))))));
+                ['nanocb__' + this.type]: true,
+            }, htmlFor: this.inputId }, h("input", { key: 'd46202d25ee15a0274766d845510608ed5af88f4', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": this.hasLabel ? labelId : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '0f3c9134ab08ce653a58d71d681495349536e211', class: 'nanocb__input' }), this.hasLabel && (h("div", { key: 'e4315662f387dc17f3406f22931535061756cca6', id: labelId, class: {
+                nanocb__label: true,
+                [`nanocb__label--${this.type}`]: true,
+                'nanocb__label--hidden': this.hideLabel,
+            } }, this.label && !!this.label.length && h("span", { key: '05716b3189e0a489c530c2539944eaaae74e0e08' }, this.label), h("span", { key: '026a9bbb2f50332d184a29a03a58e6cb287d7f8c', hidden: this.label && !!this.label.length, ref: (s) => (this.slotWrapper = s) }, h("slot", { key: '62b0ab184d32167780d52aa90dddcdc25977548c' })))))));
     }
     static get is() { return "nano-checkbox"; }
     static get encapsulation() { return "scoped"; }
@@ -243,6 +259,7 @@ export class Checkbox {
         return {
             "hasFocus": {
                 "type": "boolean",
+                "attribute": "has-focus",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -260,12 +277,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "has-focus",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -280,12 +297,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -300,12 +317,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -320,12 +337,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true,
                 "defaultValue": "'on'"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -340,11 +357,11 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": true
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -359,16 +376,16 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
-                    "original": "| 'radio'\n    | 'checkbox'\n    | 'tag'\n    | 'segment'\n    | 'switch'\n    | 'segment-pill'",
-                    "resolved": "\"checkbox\" | \"radio\" | \"segment\" | \"segment-pill\" | \"switch\" | \"tag\"",
+                    "original": "| 'radio'\n    | 'checkbox'\n    | 'tag'\n    | 'segment'\n    | 'switch'",
+                    "resolved": "\"checkbox\" | \"radio\" | \"segment\" | \"switch\" | \"tag\"",
                     "references": {}
                 },
                 "required": false,
@@ -379,12 +396,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": true,
                 "defaultValue": "'checkbox'"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -399,11 +416,31 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
+            "hideLabel": {
+                "type": "boolean",
+                "attribute": "hide-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hide the label - but make it accessible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "indeterminate": {
                 "type": "boolean",
+                "attribute": "indeterminate",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -418,12 +455,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "indeterminate",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -441,12 +478,12 @@ export class Checkbox {
                 },
                 "getter": true,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "validityMessage": {
                 "type": "string",
+                "attribute": "validity-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -464,36 +501,11 @@ export class Checkbox {
                 },
                 "getter": true,
                 "setter": false,
-                "attribute": "validity-message",
-                "reflect": false
-            },
-            "color": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "Color",
-                    "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
-                    "references": {
-                        "Color": {
-                            "location": "import",
-                            "path": "../../types/shared",
-                            "id": "src/types/shared.ts::Color"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Color to use from your application's color palette."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "color",
                 "reflect": false
             },
             "form": {
                 "type": "string",
+                "attribute": "form",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -508,7 +520,6 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "form",
                 "reflect": false
             }
         };
@@ -516,6 +527,7 @@ export class Checkbox {
     static get states() {
         return {
             "inputType": {},
+            "hasLabel": {},
             "_invalid": {}
         };
     }
@@ -707,6 +719,12 @@ export class Checkbox {
     }
     static get listeners() {
         return [{
+                "name": "click",
+                "method": "onHostClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
                 "name": "reset",
                 "method": "onReset",
                 "target": "body",
@@ -715,4 +733,3 @@ export class Checkbox {
             }];
     }
 }
-//# sourceMappingURL=checkbox.js.map

package/dist/collection/components/collapsible-comparison/collapsible-comparison.css

@@ -0,0 +1,80 @@
+:host,
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+[hidden] {
+  display: none !important;
+}
+@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 {
+  box-sizing: border-box;
+}
+[hidden] {
+  display: none !important;
+}
+@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 --color-bg - Background color of the component. Defaults to var(--nano-color-base-0).
+  * @prop --color-border - Border color of the component. Defaults to var(--nano-color-neutral-200).
+  * @prop --outer-spacing - Horizontal padding of the component. Defaults to var(--nano-spacing-l1-default).
+  */
+}
+:host .collapsible-comparison {
+  background-color: var(--color-bg);
+  color: var(--nano-color-neutral-1400);
+  padding: var(--outer-spacing) 0;
+  container-type: inline-size;
+}
+:host .header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-block-end: var(--nano-spacing-xl);
+}
+:host .headings {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--nano-spacing-xl);
+}
+:host nano-icon-button {
+  display: none;
+}
+@container (max-width: 400px) {
+  :host nano-cta {
+    display: none;
+  }
+  :host nano-icon-button {
+    --color: var(--nano-color-primary-1100);
+    display: block;
+    margin-inline-start: auto;
+    font-size: var(--nano-font-size-xl);
+    transition: 0.3s ease transform;
+  }
+  :host nano-icon-button.open {
+    transform: rotate(180deg);
+  }
+}

package/dist/collection/components/collapsible-comparison/collapsible-comparison.js

@@ -0,0 +1,120 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { Host, } from "@stencil/core";
+import { h } from "../../utils/renderer";
+import { addGlobalStylesheetToShadow } from "../../utils/style";
+/**
+ * Collapsible comparison allows users to compare two short lists of titles which can be expanded to reveal more detail about each item.
+ *
+ * @version 8.0.0
+ * @status new
+ *
+ * @slot heading - the heading of the comparison
+ * @slot comparison-headings - the headings of the comparison
+ * @slot content - the content of the comparison
+ *
+ * @part header - the header of the comparison
+ */
+export class CollapsibleComparison {
+    get details() {
+        return this.el.querySelectorAll('nano-details');
+    }
+    el;
+    /**
+     * Controls whether the comparison is open or closed.
+     */
+    open = false;
+    /**
+     * Emits when the comparison is opened and closed.
+     */
+    nanoToggle;
+    handleOpenChange() {
+        this.details?.forEach((detail) => {
+            if (this.open) {
+                detail.open = true;
+            }
+            else {
+                detail.open = false;
+            }
+        });
+        this.nanoToggle.emit(this.open);
+    }
+    handleClick = () => {
+        this.open = !this.open;
+    };
+    componentWillLoad() {
+        addGlobalStylesheetToShadow(this.el.shadowRoot);
+    }
+    componentDidLoad() {
+        if (this.open) {
+            this.details?.forEach((detail) => {
+                detail.open = true;
+            });
+        }
+    }
+    render() {
+        return (h(Host, { key: 'b522b71cd7f9b9e793f1d1345563ee60b2fd76ed', class: "nano-collapsible-comparison" }, h("div", { key: '7a37b4880f5791455f03fb2b0a8b6f5ac1a79a56', class: "collapsible-comparison" }, h("div", { key: '2c90c230cd3b2b3417e642a6d31eff6f6920cb04', part: "header" }, h("div", { key: '36db63362337181821a7e58cba8fb346909228e7', class: "header" }, h("slot", { key: '29b0ca97e9dea363b4b41a5df393051db364f53c', name: "heading" }), h("nano-cta", { key: '33f265d889e154b943d68c7f42eae8056d6f7386', size: "large", icon: this.open ? 'up' : 'down', secondary: true }, h("button", { key: '07e6a40182306df742e947ecfbc35ab4f9fe353b', onClick: this.handleClick }, this.open ? 'Hide' : 'Show', " details")), h("nano-icon-button", { key: '116c3b24bb71628d1a64852699d988cfad57d287', label: `${this.open ? 'Hide' : 'Show'} details`, onClick: this.handleClick, iconName: "light/chevron-down", class: this.open ? 'open' : '' })), h("div", { key: '492b3281c61c49be475483564e9e080d0512fa56', class: "headings" }, h("slot", { key: 'bb8d6afcb544ea4c9652bf94798c517e2062a2ed', name: "comparison-headings" }))), h("div", { key: 'd68d1a90c62bfe70d0e9074e3262c176f066e992', class: "content" }, h("slot", { key: 'd30b86a902b62d56d56adc92b88f246fe019a3fe', name: "content" })))));
+    }
+    static get is() { return "nano-collapsible-comparison"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["collapsible-comparison.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["collapsible-comparison.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "attribute": "open",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether the comparison is open or closed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "nanoToggle",
+                "name": "nanoToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when the comparison is opened and closed."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
+}

package/dist/collection/components/content-links/content-links.css

@@ -0,0 +1,46 @@
+:host,
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+[hidden] {
+  display: none !important;
+}
+@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 {
+  box-sizing: border-box;
+}
+[hidden] {
+  display: none !important;
+}
+@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;
+    }
+  }/**
+* @prop --text-color: The primary text and chevron colour. defaults to var(--nano-color-neutral-1400)
+* @prop --color-disabled: The disabled text and chevron colour. defaults to var(--nano-color-neutral-800)
+* @prop --color-border: The border colour. defaults to var(--nano-color-neutral-200)
+* @prop --color-active: The active text and chevron colour. defaults to var(--nano-color-primary-1000)
+* @prop --padding: The padding around the content link. defaults to var(--nano-spacing-sm)
+* @prop --icon-size: The size of the chevron icon. defaults to 1em
+*/

package/dist/collection/components/content-links/content-links.js

@@ -0,0 +1,21 @@
+/**
+ * Content links are used to group multiple links together.
+ *
+ * @status new
+ * @version 8.0.0
+ * @type CSS Only
+ * @supportedTags a
+ */
+export class NanoContentLinks {
+    static get is() { return "nano-content-links"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["content-links.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["content-links.css"]
+        };
+    }
+}

package/dist/collection/components/cta/cta.css

@@ -0,0 +1,49 @@
+:host,
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+[hidden] {
+  display: none !important;
+}
+@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 {
+  box-sizing: border-box;
+}
+[hidden] {
+  display: none !important;
+}
+@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;
+    }
+  }/**
+* @prop --color: Defaults to var(--nano-color-basic-white);
+* @prop --bg: Defaults to var(--nano-color-blue-cerulean-1000);
+* @prop --bg-hover: Defaults to var(--nano-color-blue-cerulean-1100);
+* @prop --bg-active: Defaults to var(--nano-color-blue-cerulean-1200);
+* @prop --border: Defaults to 1px solid var(--bg);
+* @prop --icon-size: Defaults to 1em;
+* @prop --padding-v: Defaults to 0.4375rem;
+* @prop --padding-h: Defaults to 1.125rem;
+* @prop --spinner-size: Defaults to 1em;
+*/