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

package/dist/cjs/nano-in-page-nav.cjs.entry.js

@@ -0,0 +1,212 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+'use strict';
+
+var index = require('./index-DYD4xvxr.js');
+var renderer = require('./renderer-SkVn69pT.js');
+var slot = require('./slot-CBvkJee9.js');
+
+const inPageNavCss = ":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 nav{background-color:var(--color-bg);padding:0}:host nav:has(nano-details){padding:0}:host .details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}:host .details-wrapper::part(header),:host .details-wrapper [part~=\"header\"]{font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}:host .details-wrapper[open]::part(header),:host .details-wrapper[open] [part~=\"header\"]{background-color:var(--nano-color-primary-75)}:host .details-wrapper::part(content),:host .details-wrapper [part~=\"content\"]{padding:0}:host .details-wrapper::part(body),:host .details-wrapper [part~=\"body\"]{padding:0}:host .header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}:host .header ::slotted(a[slot=back]),:host .header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}:host .header ::slotted(a[slot=back])::before,:host .header::slotted(a[slot=back])::before{content:\"\";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}:host nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}:host .details-wrapper.sticky.stuck[open]::part(header),:host .details-wrapper.sticky.stuck[open] [part~=\"header\"]{z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}";
+
+const NanoInPageNav = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** The breakpoint (in px) at which the nav will switch from large to small screen styles. Defaults to 767 */
+    breakpoint = 767;
+    /** Whether the headers should be sticky (small screen only). Defaults to true */
+    stickyHeaders = true;
+    get el() { return index.getElement(this); }
+    isMobile = window.innerWidth <= this.breakpoint;
+    stickyClass = 'sticky';
+    stuckClass = 'stuck';
+    stickyObserver;
+    slotCtrl = new slot.HasSlotController(this, '[default]', 'mobile', 'back', 'accessory');
+    componentDidLoad() {
+        this.updateNavForBreakpoint();
+        window.addEventListener('resize', this.updateNavForBreakpoint);
+    }
+    /**
+     * Checks if the current screen width is less than or equal to the breakpoint.
+     * If it is, it transforms the desktop navigation into a mobile one.
+     * If not, it transforms the mobile navigation back into a desktop one.
+     */
+    updateNavForBreakpoint = () => {
+        this.isMobile = window.innerWidth <= this.breakpoint;
+        if (this.isMobile) {
+            // if the mobile slot is not there, we need to transform the desktop nav into a mobile one
+            if (!this.slotCtrl.has('mobile'))
+                this.transformToMobile();
+        }
+        else {
+            this.transformToDesktop();
+        }
+        // always init stickiness if the headers are sticky and we're on a small screen
+        if (this.isMobile && this.stickyHeaders) {
+            this.initStickiness();
+        }
+    };
+    // make nano-details headers sticky
+    initStickiness() {
+        let lastScrollTop = 0;
+        // shadowRoot for mobile slot, light DOM for default nav
+        const nanoDetails = this.isMobile && this.slotCtrl.has('mobile')
+            ? this.el.shadowRoot?.querySelectorAll('.details-wrapper')
+            : this.el.querySelectorAll('.details-wrapper');
+        if (!nanoDetails?.length)
+            return;
+        nanoDetails.forEach((details) => {
+            details.classList.add(this.stickyClass);
+        });
+        this.stickyObserver = new IntersectionObserver((entries) => {
+            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+            entries.forEach((entry) => {
+                const target = entry.target;
+                if (entry.intersectionRatio < 1) {
+                    if (scrollTop > lastScrollTop) {
+                        // User is scrolling down
+                        target.classList.add(this.stuckClass);
+                        target.classList.remove('hidden');
+                    }
+                    else {
+                        // User is scrolling up
+                        target.classList.add('hidden');
+                    }
+                }
+                else {
+                    target.classList.remove(this.stuckClass);
+                    target.classList.remove('hidden');
+                }
+            });
+            // Prevent negative scroll values
+            lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
+        }, {
+            threshold: [1.0],
+            root: this.el.closest('nav'),
+            rootMargin: '0px 0px 0px 0px',
+        });
+        nanoDetails.forEach((details) => {
+            this.stickyObserver.observe(details);
+        });
+    }
+    disconnectedCallback() {
+        if (this.stickyObserver) {
+            this.stickyObserver.disconnect();
+        }
+        if (this.updateNavForBreakpoint) {
+            window.removeEventListener('resize', this.updateNavForBreakpoint);
+        }
+    }
+    /**
+     * Transforms the desktop navigation into a mobile one by wrapping the <ul> elements in collapsible nano-details elements.
+     * Maintains the original attributes of the <a> elements.
+     */
+    transformToMobile() {
+        const slot = this.el.shadowRoot?.querySelector('slot:not([name])');
+        const nodes = slot
+            ?.assignedElements({ flatten: true })
+            ?.filter((x) => x.tagName === 'UL') || [];
+        nodes.forEach((ul) => {
+            if (!(ul instanceof HTMLUListElement))
+                return;
+            // Transform individual list items
+            ul.querySelectorAll(':scope > li').forEach((li) => {
+                const link = li.querySelector(':scope > a');
+                const submenu = li.querySelector(':scope > ul');
+                if (link && submenu && !li.querySelector(':scope > nano-details')) {
+                    // Create the nano-details element
+                    const details = this.createDetails(link.textContent?.trim() || '', submenu, link.attributes);
+                    // Clean up and replace
+                    link.remove();
+                    li.prepend(details);
+                }
+            });
+            // Detach the <ul> from the DOM
+            const parent = ul.parentElement;
+            if (!parent)
+                return;
+            parent.removeChild(ul);
+            // Create the nano-details wrapper
+            const menuWrapper = this.createDetails('Menu', ul);
+            menuWrapper.classList.add('details-wrapper');
+            // Append the <ul> to the nano-details wrapper
+            menuWrapper.appendChild(ul);
+            // Replace the original <ul> with the nano-details wrapper
+            parent.appendChild(menuWrapper);
+        });
+    }
+    /**
+     * Creates a nano-details element with the given label and submenu.
+     * Optionally, a href can be provided to set the data-href attribute,
+     * so we can use it to reinstate the link on desktop.
+     */
+    createDetails(label, submenu, attributes) {
+        const node = document.createElement('nano-details');
+        node.setAttribute('label', label);
+        if (attributes) {
+            // Copy all attributes from the original link to the nano-details element
+            Array.from(attributes).forEach((attr) => {
+                node.setAttribute(`data-link-${attr.name}`, attr.value);
+            });
+        }
+        node.appendChild(submenu);
+        return node;
+    }
+    /**
+     * Transforms the mobile navigation back into a desktop one by removing the nano-details wrappers
+     * and restoring the original <ul> elements, maintains the original attributes.
+     */
+    transformToDesktop() {
+        const slot = this.el.shadowRoot?.querySelector('slot:not([name])');
+        const nodes = slot
+            ?.assignedElements({ flatten: true })
+            ?.filter((x) => x.tagName.toLowerCase() === 'nano-details') || [];
+        nodes.forEach((detail) => {
+            if (!(detail instanceof HTMLElement))
+                return;
+            const ul = detail.querySelector('ul');
+            ul.querySelectorAll(':scope > li').forEach((li) => {
+                const details = li.querySelector('nano-details');
+                if (!details)
+                    return;
+                const submenu = details.querySelector('ul');
+                const label = details?.getAttribute('label');
+                const href = details?.getAttribute('data-href') || '#';
+                if (submenu && label) {
+                    // Create the <a> element
+                    const link = document.createElement('a');
+                    link.textContent = label;
+                    link.href = href;
+                    // Restore all attributes from the nano-details element to the <a> element
+                    Array.from(details.attributes).forEach((attr) => {
+                        if (attr.name.startsWith('data-link-')) {
+                            link.setAttribute(attr.name.replace('data-link-', ''), attr.value);
+                        }
+                    });
+                    li.prepend(link);
+                    li.appendChild(submenu);
+                    details.remove();
+                }
+            });
+            // Clean up the nano-details wrapper
+            const parent = detail.parentElement;
+            if (!parent)
+                return;
+            parent.removeChild(detail);
+            const ulElement = detail.querySelector('ul');
+            if (!ulElement)
+                return;
+            parent.appendChild(ulElement);
+            detail.remove();
+        });
+    }
+    render() {
+        return (renderer.h(index.Host, { key: '92552373d8a09fb223e32246547a8d134cb09da2', class: "nano-in-page-nav" }, renderer.h("nav", { key: '6fa0d66432e09b4a3e744f2d9e6c90d2d589f1b2', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (renderer.h("div", { key: '1c596d58e78b17a8ba5e408a5156a6be59cf1765', class: "header" }, renderer.h("slot", { key: '9d6b924c2a24e85681564744a3667eb23692ae07', name: "back" }), renderer.h("slot", { key: 'c3f9a3a6f2879054df7b50074872a3341d02f0f5', name: "accessory" }))), this.slotCtrl.has('mobile') && this.isMobile ? (renderer.h("nano-details", { label: "Menu", class: this.stickyHeaders
+                ? `details-wrapper ${this.stickyClass}`
+                : 'details-wrapper' }, renderer.h("slot", { name: "mobile" }))) : (renderer.h("slot", null)))));
+    }
+};
+NanoInPageNav.style = inPageNavCss;
+
+exports.nano_in_page_nav = NanoInPageNav;

package/dist/cjs/nano-intersection-observe.cjs.entry.js

@@ -1,13 +1,12 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-615cdb64.js');
-const renderer = require('./renderer-cd8b6098.js');
-const scrollParent = require('./scroll-parent-798d9651.js');
+var index = require('./index-DYD4xvxr.js');
+var renderer = require('./renderer-SkVn69pT.js');
+var scroll = require('./scroll-DXjC771e.js');
+require('./dom-a3wgHxbn.js');
 
 const IntersectionObserve = class {
     constructor(hostRef) {
@@ -53,11 +52,19 @@ const IntersectionObserve = class {
         let newRoot;
         if (this.root === 'auto') {
             // try to find nearest scrolling parent
-            newRoot = scrollParent.findScrollParent(this.host);
+            newRoot = scroll.findScrollParent(this.host);
         }
         else if (this.root === 'root') {
             newRoot = undefined;
         }
+        else if (typeof this.root === 'string') {
+            // try to find element by selector
+            newRoot = this.host.closest(this.root);
+            if (!newRoot) {
+                console.warn(`nano-intersection-observe: root element "${this.root}" not found.`);
+                newRoot = undefined;
+            }
+        }
         else {
             // root is set explicitly
             newRoot = this.root;
@@ -141,7 +148,7 @@ const IntersectionObserve = class {
         this.root = this._root = undefined;
     }
     render() {
-        return (renderer.h(index.Host, { key: 'a6ac2318115344404b0d91677eac05466c547939', class: "nano-intersection-observe" }, renderer.h("slot", { key: 'a215889a8c84c513aabea882ac3e3c27879a435f', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
+        return (renderer.h(index.Host, { key: '4bd6cf4cc8888421ec7879e22fc24886838bd091', class: "nano-intersection-observe" }, renderer.h("slot", { key: 'afc52867f75d9f3679470f016c49eb9c4af6f6db', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
     }
     static get watchers() { return {
         "root": ["handleRootChange"],
@@ -152,5 +159,3 @@ const IntersectionObserve = class {
 IntersectionObserve.style = "nano-intersection-observe { display: contents }";
 
 exports.nano_intersection_observe = IntersectionObserve;
-
-//# sourceMappingURL=nano-intersection-observe.cjs.entry.js.map

package/dist/cjs/nano-masked-overflow.cjs.entry.js

@@ -0,0 +1,351 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+'use strict';
+
+var index = require('./index-DYD4xvxr.js');
+var renderer = require('./renderer-SkVn69pT.js');
+var dom = require('./dom-a3wgHxbn.js');
+var throttle = require('./throttle-CrRDOkln.js');
+var scroll = require('./scroll-DXjC771e.js');
+
+const maskedOverflowCss = ":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{--indicator-transition:var(--nano-transition-fast);--indicator-color:var(--nano-color-primary-1000);--indicator-size:3px;--indicator-track-color:var(--nano-color-neutral-300);--indicator-track-size:var(--indicator-size);--scroll-btn-color:var(--nano-color-primary-1200);--scroll-btn-size:1rem;--fade-size:100px;position:relative;z-index:var(--nano-z-index-raised)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__nav:has(.onav__scroller:focus-visible){outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.onav__scroller{scrollbar-width:thin;overflow:auto;display:flex;transition:var(--nano-transition-fast) ease}.onav__scroller:focus{outline:none}.onnav--hide-scrollbars .onav__scroller{scrollbar-width:none;-ms-overflow-style:none}.onnav--hide-scrollbars .onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__items{flex:1 1 auto;position:relative;inline-size:auto;flex-wrap:nowrap;display:flex}.onnav--has-indicator .onav__items::before{content:\"\";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.nano-icon-button.onav__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast) ease opacity;opacity:0;color:var(--scroll-btn-color);font-size:var(--scroll-btn-size);pointer-events:none}.nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav--horizontal.onav--has-scroll-controls .onav__scroller{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%);mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%)}.onav--horizontal.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--horizontal.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -2) 0;mask-position:calc(var(--fade-size) * -2) 0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--horizontal.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100%;mask-size:100%}.onav--horizontal .onav__items{flex-direction:row}.onnav--has-indicator .onav--horizontal .onav__items::before{content:\"\";inline-size:100%;block-size:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{--fade-size:70px;inline-size:100%;display:flex}.onav--vertical .onav__nav{max-block-size:100%;display:flex}.onav--vertical .onav__scroller{inline-size:100%;flex-direction:column}.onav--vertical.onav--has-scroll-controls .onav__scroller{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%);mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%)}.onav--vertical.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% calc(100% + var(--fade-size) * 2);mask-size:100% calc(100% + var(--fade-size) * 2)}.onav--vertical.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 calc(var(--fade-size) * -2);mask-position:0 calc(var(--fade-size) * -2);-webkit-mask-size:100% calc(100% + var(--fade-size) * 2);mask-size:100% calc(100% + var(--fade-size) * 2)}.onav--vertical.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% 100%;mask-size:100% 100%}.onav--vertical .onav__items{flex-direction:column;inline-size:fit-content}.onnav--has-indicator .onav--vertical .onav__items::before{content:\"\";block-size:100%;inline-size:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}";
+
+const MaskedOverflow = class {
+    // public surface
+    /** Used to appropriately label the scrolling element for screen-readers */
+    label;
+    /** Disables the scroll arrow buttons that appear when content overflows */
+    scrollControls = true;
+    /** The flex direction of the element */
+    orientation = 'horizontal';
+    /** Shows a track and a highlight line that automatically moves the currently active item. */
+    showIndicator = false;
+    /** Show or hide the browser's default scrollbars. Defaults to `true` on vertical orientation and `false` on `horizontal` orientation */
+    hideScrollbars;
+    watchHideScrollbars() {
+        if (this.hideScrollbars === undefined || this.hideScrollbars === null) {
+            this.hideScrollbars = this.orientation !== 'vertical';
+        }
+    }
+    /**
+     * A function called when an item becomes 'active' (via click or keyboard)
+     * @param item - html element currently being assessed
+     * @param _index - the index of the html element currently being assessed
+     * @returns void */
+    activeHandler = (item, _index) => item.classList.add('active');
+    /**
+     * A function called when an item becomes 'inactive'
+     * (because another item was made active)
+     * @param item - html element currently being assessed
+     * @param _index - the index of the html element currently being assessed
+     * @returns void */
+    inactiveHandler = (item, _index) => item.classList.remove('active');
+    /**
+     * A function called to assess an initial, active item
+     * @param item - html element currently being assessed
+     * @param _index - the index of the html element currently being assessed
+     * @returns void */
+    isActiveHandler = (item, _index) => item.classList.contains('active');
+    watchIsActiveHandler() {
+        this.instantReCalc = true;
+        this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
+        setTimeout(() => (this.instantReCalc = false), 300);
+    }
+    /**
+     * Sync up the view to the active item.
+     * Use this when the active item changes outside of this component.
+     */
+    async syncActiveItem() {
+        this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
+    }
+    // private state
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.recalculatePositions = throttle.debounce(this.recalculatePositions.bind(this), 80);
+    }
+    ro;
+    nav;
+    itemContainer;
+    isRtl;
+    endBtn;
+    startBtn;
+    activeIndicator;
+    mutationObservers = new WeakMap();
+    get scrollProp() {
+        return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';
+    }
+    get clientDimensionProp() {
+        return this.orientation === 'horizontal' ? 'clientWidth' : 'clientHeight';
+    }
+    get scrollOffset() {
+        return this.orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop';
+    }
+    get host() { return index.getElement(this); }
+    instantReCalc = false;
+    hasScrollControls = false;
+    watchScrollControls() {
+        if (this.hasScrollControls)
+            this.handleScroll();
+        else
+            this.hideControlStart = this.hideControlEnd = true;
+    }
+    hideControlEnd = true;
+    hideEndBtn() {
+        if (!this.endBtn)
+            return;
+        this.activateBtn(this.endBtn, !this.hideControlEnd);
+    }
+    hideControlStart = true;
+    hideStartBtn() {
+        if (!this.startBtn)
+            return;
+        this.activateBtn(this.startBtn, !this.hideControlStart);
+    }
+    // private logic
+    activateBtn(btn, activate = true) {
+        if (!activate) {
+            btn.tabIndex = -1;
+            btn.disabled = true;
+            btn.classList.remove('is-shown');
+            return;
+        }
+        btn.removeAttribute('tabindex');
+        btn.disabled = false;
+        btn.classList.add('is-shown');
+    }
+    get allActiveItems() {
+        return this.allItems.filter((el) => !el.disabled || el.classList.contains('disabled'));
+    }
+    get allItems() {
+        return dom.getDirectChildren(this.host, '*', 'slot');
+    }
+    get activeItem() {
+        return this._activeItem;
+    }
+    set activeItem(item) {
+        if (!item ||
+            item === this.activeItem ||
+            item.disabled ||
+            !this.allActiveItems.includes(item)) {
+            return;
+        }
+        this._activeItem = item;
+        this.allActiveItems.forEach((el, i) => {
+            if (el === this._activeItem)
+                this.activeHandler(el, i);
+            else
+                this.inactiveHandler(el, i);
+        });
+        this.recalculatePositions();
+    }
+    _activeItem;
+    get navDim() {
+        if (!this.nav)
+            return 0;
+        const computedStyle = getComputedStyle(this.nav);
+        let clientDim = this.nav[this.clientDimensionProp];
+        if (this.orientation === 'horizontal') {
+            return (clientDim -=
+                parseFloat(computedStyle.paddingLeft) +
+                    parseFloat(computedStyle.paddingRight));
+        }
+        else {
+            return (clientDim -=
+                parseFloat(computedStyle.paddingTop) +
+                    parseFloat(computedStyle.paddingBottom));
+        }
+    }
+    scrollToActiveItem() {
+        if (!this.nav || !this.activeItem || !this.hasScrollControls)
+            return;
+        scroll.scrollIntoView(this.activeItem, this.nav, this.orientation, 'center');
+    }
+    syncActiveItemIndicator() {
+        if (!this.activeItem || !this.showIndicator)
+            return;
+        const item = this.activeItem;
+        const width = item.clientWidth || 0;
+        const height = item.clientHeight + 2 || 0;
+        const offset = dom.getOffset(item, this.itemContainer);
+        if (!this.activeIndicator)
+            return;
+        const offsetTop = offset.top;
+        const offsetLeft = offset.left;
+        if (this.instantReCalc)
+            this.activeIndicator.style.transition = 'none';
+        switch (this.orientation) {
+            case 'horizontal':
+                this.activeIndicator.style.width = `${width}px`;
+                this.activeIndicator.style.height = null;
+                this.activeIndicator.style.transform = `translateX(${offsetLeft}px)`;
+                break;
+            case 'vertical':
+                this.activeIndicator.style.width = null;
+                this.activeIndicator.style.height = `${height}px`;
+                this.activeIndicator.style.transform = `translateY(${offsetTop}px)`;
+                break;
+        }
+        setTimeout(() => (this.activeIndicator.style.transition = null), 400);
+    }
+    updateScrollControls = () => {
+        if (!this.nav)
+            return;
+        this.hasScrollControls =
+            this.nav[this.scrollProp] > this.nav[this.clientDimensionProp] &&
+                this.nav[this.scrollProp] >= this.itemContainer[this.clientDimensionProp];
+        this.handleScroll();
+    };
+    handleScroll = () => {
+        if (!this.hasScrollControls) {
+            this.hideControlStart = this.hideControlEnd = true;
+            return;
+        }
+        const finishEnd = this.isRtl
+            ? this.nav[this.scrollOffset] === 0
+            : Math.abs(this.nav[this.clientDimensionProp] -
+                (this.nav[this.scrollProp] - this.nav[this.scrollOffset])) < 2;
+        const finishStart = this.isRtl
+            ? Math.abs(this.nav[this.scrollProp] +
+                this.nav[this.scrollOffset] -
+                this.nav[this.clientDimensionProp]) < 2
+            : this.nav[this.scrollOffset] === 0;
+        if (finishStart) {
+            this.hideControlStart = true;
+            this.hideControlEnd = false;
+        }
+        else if (finishEnd) {
+            this.hideControlStart = false;
+            this.hideControlEnd = true;
+        }
+        else {
+            this.hideControlEnd = false;
+            this.hideControlStart = false;
+        }
+    };
+    handleBtnClick = (goEnd = false) => {
+        const navDim = this.navDim;
+        let scrollAmt;
+        if (goEnd)
+            scrollAmt = this.nav[this.scrollOffset] + navDim - 20;
+        else
+            scrollAmt = this.nav[this.scrollOffset] - navDim + 20;
+        try {
+            this.nav.scroll({
+                left: this.orientation === 'horizontal' ? scrollAmt : 0,
+                top: this.orientation === 'vertical' ? scrollAmt : 0,
+                behavior: 'smooth',
+            });
+        }
+        catch (_e) {
+            this.nav[this.scrollOffset] = scrollAmt;
+        }
+    };
+    slotChangeHandler = () => {
+        if (this.allActiveItems.length < 2)
+            return;
+        const item = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
+        if (item)
+            this.activeItem = item;
+        this.recalculatePositions();
+        if (!this.showIndicator)
+            return;
+        /** maintain a weakmap of mutation observers to maintain item / indicator position on all changes. */
+        this.allActiveItems.forEach((item) => {
+            if (this.mutationObservers.get(item))
+                return;
+            const mo = new MutationObserver(() => this.syncActiveItemIndicator());
+            mo.observe(item, {
+                characterData: true,
+                childList: true,
+                subtree: true,
+            });
+            this.mutationObservers.set(item, mo);
+        });
+    };
+    handleClick = (event) => {
+        if (this.allActiveItems.length < 2)
+            return;
+        const foundItem = event
+            .composedPath()
+            .find((e) => this.allActiveItems.includes(e));
+        if (foundItem)
+            this.activeItem = foundItem;
+    };
+    handleKeyDown = (event) => {
+        // Activate a tab
+        if (['Enter', ' '].includes(event.key)) {
+            const foundItem = event
+                .composedPath()
+                .find((e) => this.allActiveItems.includes(e));
+            if (foundItem)
+                this.activeItem = foundItem;
+        }
+    };
+    recalculatePositions = () => {
+        this.updateScrollControls();
+        this.syncActiveItemIndicator();
+        this.scrollToActiveItem();
+    };
+    // lifecycle
+    connectedCallback() {
+        this.instantReCalc = true;
+        this.isRtl =
+            this.orientation === 'horizontal' && !!this.host.closest('[dir="rtl"]');
+        if (window['MutationObserver'])
+            this.slotChangeHandler();
+        if (!window['ResizeObserver'])
+            return;
+        if (this.ro) {
+            this.ro.disconnect();
+            this.ro = undefined;
+        }
+        const mo = (this.ro = new ResizeObserver(this.recalculatePositions));
+        mo.observe(this.host);
+    }
+    componentWillLoad() {
+        this.watchHideScrollbars();
+    }
+    componentDidLoad() {
+        this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
+        requestAnimationFrame(() => (this.instantReCalc = false));
+    }
+    disconnectedCallback() {
+        if (this.ro) {
+            this.ro.disconnect();
+            this.ro = undefined;
+        }
+    }
+    render() {
+        return (renderer.h(index.Host, { key: '95eee57fdc7f8527fbbe4b6d9fbf6f48d5764ac8', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, renderer.h("div", { key: 'fb8fb3b5946a4ce7b8b144df89541012c44d9aff', part: "base", class: {
+                onav: true,
+                [`onav--${this.orientation}`]: true,
+                'onav--has-scroll-controls': this.hasScrollControls,
+                'onav--has-scroll-controls-start': !this.hideControlStart,
+                'onav--has-scroll-controls-end': !this.hideControlEnd,
+                'onav--no-transitions': this.instantReCalc,
+                'onnav--has-indicator': this.showIndicator,
+                'onnav--hide-scrollbars': this.hideScrollbars,
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, renderer.h("div", { key: '23da0af8abf895a7bb2b158965f9ef955e798e0c', class: "onav__nav" }, this.scrollControls && (renderer.h("nano-icon-button", { key: '28573455243fe42c090dbcdb569d376a7f9d5eb3', part: "scroll-button scroll-button-prev", class: {
+                'onav__scroll-button': true,
+                'onav__scroll-button--start': true,
+            }, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
+                ? 'light/chevron-left'
+                : 'light/chevron-up' })), renderer.h("div", { key: 'b1c4626550336c2723ef68df1f4b5a3034c383d5', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, renderer.h("div", { key: 'c751fd48b83e957c156448841939df286dff0c37', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (renderer.h("div", { key: '059962178e1c122d95ebbcfb8b98114b0507d3df', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), renderer.h("slot", { key: '6cc5fe32c97aa75700feea39cd6d77d18c968c80', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (renderer.h("nano-icon-button", { key: 'fe8b6ee6f86a8d96a2ed8a79f2ebd292a6432e95', part: "scroll-button scroll-button-next", class: {
+                'onav__scroll-button': true,
+                'onav__scroll-button--end': true,
+            }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'
+                ? 'light/chevron-right'
+                : 'light/chevron-down' }))))));
+    }
+    static get watchers() { return {
+        "hideScrollbars": ["watchHideScrollbars"],
+        "isActiveHandler": ["watchIsActiveHandler"],
+        "hasScrollControls": ["watchScrollControls"],
+        "hideControlEnd": ["hideEndBtn"],
+        "hideControlStart": ["hideStartBtn"]
+    }; }
+};
+MaskedOverflow.style = maskedOverflowCss;
+
+exports.nano_masked_overflow = MaskedOverflow;