@nanoporetech-digital/components 8.3.2 → 8.4.0

package/dist/collection/components/step-accordion/step-accordion.css

@@ -0,0 +1,138 @@
+: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;
+    }
+  }/** Typography */
+:host {
+  display: block;
+}
+
+.nano-details {
+  --padding: 0;
+  --btn-bg-color--hover: transparent;
+  --btn-bg-color--active: transparent;
+  border: none;
+  margin-block-end: var(--nano-spacing-sm);
+}
+.nano-details::part(base) {
+  display: grid;
+  grid-template-rows: auto auto;
+  grid-template-columns: auto 1fr;
+  gap: var(--nano-spacing-sm) 1.625rem;
+}
+.nano-details.step--grid-working::part(base)::before {
+  content: "";
+  display: block;
+  grid-column: 1;
+  grid-row: 2;
+  inline-size: 1rem;
+  min-block-size: 1rem;
+  border-inline-end: 2px solid var(--nano-color-neutral-300);
+}
+.nano-details.step--grid-working::part(base)::after {
+  content: "";
+  grid-column: 1;
+  grid-row: 2;
+  inline-size: 0.4rem;
+  block-size: 0.4rem;
+  place-self: end end;
+  translate: -50% 0;
+  inset-inline-start: calc(50% - 2.5px);
+  position: relative;
+  border-inline-end: 2px solid var(--nano-color-neutral-300);
+  border-block-end: 2px solid var(--nano-color-neutral-300);
+  rotate: 45deg;
+}
+.nano-details:last-of-type::part(base)::before {
+  min-block-size: 0;
+}
+.nano-details:last-of-type::part(base)::after {
+  display: none;
+}
+.nano-details::part(header) {
+  grid-column: 1/-1;
+  grid-row: 1;
+  display: inline-flex;
+  gap: var(--nano-spacing-sm);
+}
+.nano-details::part(body) {
+  grid-column: 2;
+  grid-row: 2;
+}
+.nano-details::part(content-wrapper) {
+  padding: 1px;
+}
+.nano-details.step--grid-not-working::part(header) {
+  padding-block-end: var(--nano-spacing-sm);
+}
+.nano-details.step--grid-not-working::part(body) {
+  padding: 0 0 0 2.5625rem;
+}
+
+.step .step-header {
+  display: inline-flex;
+  gap: var(--nano-spacing-sm);
+  align-items: center;
+}
+.step .step-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2rem;
+  block-size: 2rem;
+  border-radius: var(--nano-border-radius-circle);
+  background-color: transparent;
+  color: var(--nano-color-neutral-1400);
+  border: 1px solid var(--nano-color-neutral-300);
+}
+.step.step--complete .step-icon {
+  background-color: var(--nano-color-success-1000);
+  color: var(--nano-color-base-0);
+  border: none;
+}
+.step[open] .step-icon {
+  background-color: var(--nano-color-primary-1000);
+  color: var(--nano-color-base-0);
+  border: none;
+}
+.step .step-change {
+  font-size: var(--nano-font-size-xs);
+  line-height: var(--nano-line-height-normal);
+  letter-spacing: var(--nano-letter-spacing-loose);
+  text-decoration: underline;
+  color: var(--nano-color-primary-1200);
+}

package/dist/collection/components/step-accordion/step-accordion.js

@@ -0,0 +1,190 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { Fragment, forceUpdate, } from "@stencil/core";
+import { h } from "../../utils/renderer";
+/**
+ * Presents an accordion interface for a multi-step process,
+ * allowing users to see their progress and navigate back to completed steps.
+ *
+ * @version 8.4.0
+ * @status new
+ *
+ * @slot - Dynamic slots. Use `slot="step-0"`, `slot="step-1"`, etc. for each step.
+ */
+export class NanoStepAccordion {
+    host;
+    nanoDetails;
+    gridWorking = true;
+    /** The currently active step, zero-based index */
+    activeStep = 0;
+    handleActiveStepChange(newValue, oldValue) {
+        if (!this.steps[newValue]?.enabled)
+            this.activeStep = oldValue;
+        else {
+            const event = this.nanoStepActive.emit({
+                index: newValue,
+                step: this.steps[newValue],
+            });
+            if (event.defaultPrevented) {
+                this.activeStep = oldValue;
+            }
+        }
+    }
+    _steps = [];
+    stepProxyHandler = {
+        set: (target, prop, value) => {
+            target[prop] = value;
+            forceUpdate(this.host);
+            return true;
+        },
+    };
+    /** An array of steps, each with a title, completion status, and enabled state */
+    get steps() {
+        return this._steps;
+    }
+    set steps(value) {
+        this._steps = [];
+        // improved devX - use a proxy to re-render when step properties change
+        value.forEach((step) => {
+            const proxyStep = new Proxy(step, this.stepProxyHandler);
+            this._steps.push(proxyStep);
+        });
+    }
+    /** Emitted when the active step changes. Prevent default to cancel the change */
+    nanoStepActive;
+    handleToggle(event) {
+        if (event.detail.index === this.activeStep)
+            return;
+        this.activeStep = event.detail.index;
+    }
+    // A dirty great hack for Firefox - it doesn't support grid layout in `<details>`
+    // so we use this to apply different styles based on whether grid is working or not
+    isDetailsGridWorking(detailsEl) {
+        // Create a test element with explicit grid placement
+        const testEl = document.createElement('div');
+        testEl.style.gridColumn = '2';
+        testEl.style.height = '1px';
+        testEl.style.width = '1px';
+        testEl.style.visibility = 'hidden';
+        detailsEl.appendChild(testEl);
+        const parentX = detailsEl.getBoundingClientRect().x;
+        const testX = testEl.getBoundingClientRect().x;
+        detailsEl.removeChild(testEl);
+        // If testEl moved horizontally, grid is in effect
+        return Math.abs(testX - parentX) > 1;
+    }
+    componentDidLoad() {
+        if (!this.nanoDetails)
+            return;
+        const detailsEl = this.nanoDetails.shadowRoot.querySelector('details');
+        if (detailsEl) {
+            this.gridWorking = this.isDetailsGridWorking(detailsEl);
+        }
+    }
+    render() {
+        return (h("nano-accordion", { key: 'd92d8997c0486e26c132793db92b12e04d46a384', alwaysOpen: true, onNanoToggle: (event) => this.handleToggle(event) }, this.steps.map((step, index) => (h("nano-details", { open: index === this.activeStep, disabled: !step.enabled, class: {
+                step: true,
+                'step--active': index === this.activeStep,
+                'step--complete': step.complete,
+                'step--grid-working': this.gridWorking,
+                'step--grid-not-working': !this.gridWorking,
+                'step--disabled': !step.enabled,
+            }, ref: (el) => (this.nanoDetails = el) }, h("span", { class: "step-icon", slot: "icon-start" }, index + 1), h("div", { class: "step-header", slot: "label" }, h("span", { class: `step-title ${step.complete ? 'complete' : ''}` }, step.title), step.complete && (h(Fragment, null, h("span", null, " - "), h("span", { class: "step-change" }, "Change")))), h("span", { slot: "icon-end" }), h("div", { class: "step-content" }, h("slot", { name: `step-${index}` })))))));
+    }
+    static get is() { return "nano-step-accordion"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["step-accordion.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["step-accordion.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "activeStep": {
+                "type": "number",
+                "attribute": "active-step",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The currently active step, zero-based index"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "steps": {
+                "type": "unknown",
+                "attribute": "steps",
+                "mutable": false,
+                "complexType": {
+                    "original": "Step[]",
+                    "resolved": "Step[]",
+                    "references": {
+                        "Step": {
+                            "location": "global",
+                            "id": "global::Step"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An array of steps, each with a title, completion status, and enabled state"
+                },
+                "getter": true,
+                "setter": true,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "gridWorking": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "nanoStepActive",
+                "name": "nanoStepActive",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the active step changes. Prevent default to cancel the change"
+                },
+                "complexType": {
+                    "original": "{ index: number; step: Step }",
+                    "resolved": "{ index: number; step: Step; }",
+                    "references": {
+                        "Step": {
+                            "location": "global",
+                            "id": "global::Step"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "activeStep",
+                "methodName": "handleActiveStepChange"
+            }];
+    }
+}

package/dist/collection/components/step-breadcrumb/step-breadcrumb.css

@@ -0,0 +1,231 @@
+: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;
+    }
+  }/** Typography */
+:host {
+  /**
+  * @prop --background: the background color of the step breadcrumb. Defaults to var(--nano-color-base-0).
+  */
+  display: block;
+  --background: var(--nano-color-base-0);
+}
+
+.step-wrapper {
+  container-type: inline-size;
+}
+
+.step-list.desktop {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  z-index: 1;
+}
+.step-list.desktop::before {
+  content: "";
+  display: block;
+  flex-grow: 1;
+  block-size: 1px;
+  background-color: var(--nano-color-neutral-300);
+  position: absolute;
+  inset-block-start: 50%;
+  z-index: -1;
+  inset-inline-start: 0;
+  inline-size: 100%;
+}
+
+.step-item-wrapper {
+  flex: 0 1 auto;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+.step-item-wrapper:last-of-type {
+  flex: 0 1 auto;
+}
+.step-item-wrapper:last-of-type .step-item {
+  padding-inline-end: 0;
+}
+.step-item-wrapper:first-of-type::before {
+  display: none;
+}
+.step-item-wrapper:first-of-type .step-item {
+  padding-inline-start: 0;
+}
+.step-item-wrapper::before {
+  content: "";
+  grid-column: 2;
+  grid-row: 1;
+  inline-size: 0.4rem;
+  block-size: 0.4rem;
+  place-self: center end;
+  inset-block-start: 0.5px;
+  position: relative;
+  border-inline-end: 1px solid var(--nano-color-neutral-300);
+  border-block-end: 1px solid var(--nano-color-neutral-300);
+  rotate: -45deg;
+}
+
+:dir(rtl) .step-item-wrapper::after {
+  rotate: 45deg;
+}
+
+.step-item {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--nano-spacing-sm);
+  background-color: var(--background);
+  padding: 0 var(--nano-spacing-sm);
+  position: relative;
+}
+.step-item:focus-visible {
+  outline: var(--nano-focus-ring);
+  outline-offset: var(--nano-focus-ring-offset);
+  z-index: 1;
+}
+.step-item.step-item--disabled {
+  cursor: not-allowed;
+}
+.step-item.step-item--disabled > * {
+  opacity: 0.5;
+}
+
+.step-item-icon {
+  font-size: var(--nano-font-size-xs);
+  line-height: var(--nano-line-height-normal);
+  letter-spacing: var(--nano-letter-spacing-loose);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  border-radius: var(--nano-border-radius-circle);
+  background-color: transparent;
+  color: var(--nano-color-neutral-1400);
+  border: 1px solid var(--nano-color-neutral-300);
+}
+.step-item--complete .step-item-icon {
+  background-color: var(--nano-color-success-1000);
+  color: var(--nano-color-base-0);
+  border: none;
+}
+.step-item--active .step-item-icon {
+  background-color: var(--nano-color-primary-1000);
+  color: var(--nano-color-base-0);
+  border: none;
+}
+
+.step-dropdown {
+  inline-size: 100%;
+  min-inline-size: 300px;
+}
+
+.step-trigger {
+  all: unset;
+  display: inline-flex;
+  gap: var(--nano-spacing-md);
+  align-items: center;
+  inline-size: 100%;
+  cursor: pointer;
+}
+
+.step-trigger-text {
+  display: flex;
+  flex-direction: column;
+}
+
+.step-trigger-now {
+  font-weight: var(--nano-font-weight-normal);
+  font-size: var(--nano-font-size-xl);
+  line-height: var(--nano-line-height-denser);
+  text-wrap: balance;
+  color: var(--nano-color-neutral-1400);
+}
+
+.step-trigger-next {
+  font-size: var(--nano-font-size-2xs);
+  line-height: var(--nano-line-height-normal);
+  letter-spacing: var(--nano-letter-spacing-loose);
+  color: var(--nano-color-neutral-1000);
+}
+
+.step-trigger-icon {
+  margin-inline-start: auto;
+  color: var(--nano-color-primary-1000);
+  transition: var(--nano-transition-x-fast) rotate;
+}
+[open] .step-trigger-icon {
+  rotate: 180deg;
+}
+
+.step-progress-circle {
+  --size: 64px;
+  --thickness: 4px;
+  inline-size: var(--size);
+  min-inline-size: var(--size);
+  aspect-ratio: 1/1;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  position: relative;
+}
+.step-progress-circle::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: conic-gradient(var(--nano-color-success-1000) calc(var(--value) / var(--max) * 360deg), var(--nano-color-neutral-100) 0);
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black 90%);
+          mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black 90%);
+}
+
+.step-progress-title {
+  font-size: var(--nano-font-size-sm);
+  line-height: var(--nano-line-height-normal);
+  font-weight: var(--nano-font-weight-bold);
+  white-space: nowrap;
+  color: var(--nano-color-neutral-1000);
+}
+.step-progress-title strong {
+  color: var(--nano-color-neutral-1400);
+}