@nanoporetech-digital/components 9.1.1 → 9.1.2

package/dist/esm/nano-step-breadcrumb.entry.js

@@ -4,7 +4,7 @@
 import { r as registerInstance, c as createEvent, a as getElement, k as forceUpdate, d as Host } from './index-RXFO3HxS.js';
 import { h } from './renderer-B_wACs4w.js';
 import { C as ConstructibleStyle } from './constructible-style-BKXXXS9X.js';
-import { a as addGlobalStylesheetToShadow } from './style-Ds52s5za.js';
+import { a as addGlobalStylesheetToShadow } from './style-BVRinbua.js';
 
 const stepBreadcrumbCss = ":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{display:block;--background:var(--nano-color-background-default)}.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-fill-neutral-weak);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-fill-neutral-weak);border-block-end:1px solid var(--nano-color-fill-neutral-weak);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-text-default);border:1px solid var(--nano-color-fill-neutral-weak)}.step-item--complete .step-item-icon{background-color:var(--nano-color-fill-success);color:var(--nano-color-basic-white);border:none}.step-item--active .step-item-icon{background-color:var(--nano-color-fill-primary);color:var(--nano-color-basic-white);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-text-default)}.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-fill-neutral)}.step-trigger-icon{margin-inline-start:auto;color:var(--nano-color-fill-primary);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-fill-success) calc(var(--value) / var(--max) * 360deg), var(--nano-color-surface-neutral) 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-fill-neutral)}.step-progress-title strong{color:var(--nano-color-text-default)}";
 

package/dist/esm/style-BVRinbua.js

@@ -0,0 +1,139 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+let cachedCSStylesheet;
+// de-dupes the async fetch fallback so we only build the stylesheet once even
+// if several components request it before the fetch resolves
+let pendingCSStylesheet = null;
+// arbitrary pieces of text that appear early in the `nano-components` stylesheet
+// this is a bit fragile but does the job
+const NANO_STYLESHEET_MARKERS = ['.nano-toast-stack', '.nano-theme'];
+function cssTextContainsNanoMarker(cssText) {
+    return NANO_STYLESHEET_MARKERS.some((marker) => cssText.indexOf(marker) > -1);
+}
+// only cross-origin sheets whose href looks like the nano stylesheet are worth
+// fetching as a fallback - this avoids pulling unrelated third-party sheets over
+// the network (and into shadow roots). The `@nanoporetech-digital/style` package
+// serves bundles such as `core.css` / `nano.css`.
+const NANO_STYLESHEET_HREF_PATTERNS = [
+    '@nanoporetech-digital/style',
+    '/core.css',
+    '/nano.css',
+];
+function isLikelyNanoStylesheetHref(href) {
+    return NANO_STYLESHEET_HREF_PATTERNS.some((pattern) => href.indexOf(pattern) > -1);
+}
+/**
+ * Adds the global nano-components stylesheets as a constructable stylesheet to a shadow root.
+ * This is useful when shadow DOM enabled components:
+ * - use css-only components
+ * - use themed sections within their markup (i.e. `<div class="nano-theme-darK">Always dark themed section</div>`)
+ *
+ * @param shadowRoot - The shadow root to add the stylesheet to
+ */
+function addGlobalStylesheetToShadow(shadowRoot) {
+    if (!shadowRoot)
+        return;
+    if (cachedCSStylesheet) {
+        // we've already constructed the stylesheet
+        shadowRoot.adoptedStyleSheets.push(cachedCSStylesheet);
+        return;
+    }
+    const globalStylesheets = document.styleSheets;
+    let stylesheet = null;
+    let rule = null;
+    const globalStylesheet = [];
+    // stylesheets we couldn't read directly (typically CORS-restricted, e.g.
+    // served from a CDN without a `crossorigin` attribute on the `<link>`)
+    const inaccessibleHrefs = [];
+    for (stylesheet of globalStylesheets) {
+        if (!(stylesheet instanceof CSSStyleSheet)) {
+            continue;
+        }
+        let cssRules;
+        try {
+            // Attempt to access the cssRules of the stylesheet
+            cssRules = stylesheet?.cssRules;
+            // no cssRules? skip it
+            if (!cssRules)
+                continue;
+        }
+        catch {
+            // some stylesheets may not be accessible due to CORS or other restrictions.
+            // if the href looks like the nano stylesheet, remember it so we can try to
+            // fetch it as a fallback below - ignore unrelated third-party sheets.
+            if (stylesheet.href && isLikelyNanoStylesheetHref(stylesheet.href)) {
+                inaccessibleHrefs.push(stylesheet.href);
+            }
+            continue;
+        }
+        for (rule of cssRules) {
+            if (rule instanceof CSSLayerBlockRule &&
+                cssTextContainsNanoMarker(rule.cssText)) {
+                globalStylesheet.push(stylesheet);
+            }
+        }
+    }
+    if (globalStylesheet.length) {
+        // if we found the global stylesheet, add it to the shadow root
+        const sheet = new CSSStyleSheet();
+        for (const globalSheet of globalStylesheet) {
+            for (const rule of globalSheet.cssRules) {
+                sheet.insertRule(rule.cssText);
+            }
+        }
+        cachedCSStylesheet = sheet;
+        shadowRoot.adoptedStyleSheets.push(sheet);
+        return;
+    }
+    // We couldn't find the global stylesheet via the CSSOM. If there are
+    // CORS-restricted stylesheets (e.g. served from a CDN), fall back to
+    // fetching their raw text and constructing the stylesheet asynchronously.
+    if (inaccessibleHrefs.length) {
+        void adoptGlobalStylesheetFromHrefs(inaccessibleHrefs, shadowRoot);
+        return;
+    }
+    console.warn('No global stylesheet found');
+}
+/**
+ * Fallback for cross-origin (e.g. CDN-served) stylesheets whose rules cannot be
+ * read via the CSSOM. Fetches the raw CSS text and, once the nano stylesheet is
+ * found and constructed, adopts it into the given shadow root.
+ */
+async function adoptGlobalStylesheetFromHrefs(hrefs, shadowRoot) {
+    if (!pendingCSStylesheet) {
+        pendingCSStylesheet = buildGlobalStylesheetFromHrefs(hrefs);
+    }
+    const sheet = await pendingCSStylesheet;
+    if (sheet && shadowRoot) {
+        shadowRoot.adoptedStyleSheets.push(sheet);
+    }
+}
+async function buildGlobalStylesheetFromHrefs(hrefs) {
+    // fetch all candidate stylesheets in parallel rather than one-by-one, so we
+    // don't serialise the network latency across multiple cross-origin sheets
+    const cssTexts = await Promise.all(hrefs.map(async (href) => {
+        try {
+            const response = await fetch(href);
+            if (!response.ok)
+                return null;
+            return await response.text();
+        }
+        catch (e) {
+            console.warn('Unable to fetch stylesheet:', href, e);
+            return null;
+        }
+    }));
+    // keep the original document order when picking the matching stylesheet
+    const cssText = cssTexts.find((text) => !!text && cssTextContainsNanoMarker(text));
+    if (cssText) {
+        const sheet = new CSSStyleSheet();
+        await sheet.replace(cssText);
+        cachedCSStylesheet = sheet;
+        return sheet;
+    }
+    console.warn('No global stylesheet found');
+    return null;
+}
+
+export { addGlobalStylesheetToShadow as a };