npm - @nanoporetech-digital/components - Versions diffs - 4.3.2 → 4.4.0 - Mend

@nanoporetech-digital/components 4.3.2 → 4.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/dist/esm/nano-components.js CHANGED Viewed

@@ -41,7 +41,7 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
 };
 patchBrowser().then(options => {
-  return bootstrapLazy(JSON.parse("[[\"nano-global-nav\",[[1,\"nano-global-nav\",{\"env\":[1],\"ssoDataUrl\":[1,\"sso-data-url\"],\"myAccountData\":[16],\"ssoRedirect\":[1,\"sso-redirect\"],\"getMyAccountData\":[4,\"get-my-account-data\"],\"activeMyAccountSections\":[16],\"showSearch\":[4,\"show-search\"],\"showLogo\":[4,\"show-logo\"],\"logoUrl\":[1,\"logo-url\"],\"searchIndeces\":[16],\"myAccountUser\":[1040],\"searchAppId\":[1025,\"search-app-id\"],\"searchApiKey\":[1025,\"search-api-key\"],\"searchValue\":[1025,\"search-value\"],\"searchIndex\":[1025,\"search-index\"],\"cartCount\":[1026,\"cart-count\"],\"msgCount\":[1026,\"msg-count\"],\"cartUrl\":[1025,\"cart-url\"],\"msgUrl\":[1025,\"msg-url\"],\"userProfileUrl\":[32],\"hasLoggedinSlot\":[32],\"hasSiteSlot\":[32],\"hasPromotionSlot\":[32],\"aboutSlotLen\":[32],\"iconSlotLen\":[32],\"mainSlotLen\":[32],\"overflowSlotLen\":[32],\"searchSlotLen\":[32],\"internalSearchIndeces\":[32],\"thresholdReady\":[32],\"remoteDataReady\":[32],\"ready\":[32],\"isResizing\":[32],\"intersectRatio\":[32],\"threshold\":[32],\"modalOpen\":[32],\"modalIsOpen\":[32],\"searchBarShown\":[32],\"scrollingUp\":[32],\"searchLoading\":[32],\"showAutocomplete\":[32],\"secondaryMenuOpen\":[32],\"userMenuOpen\":[32],\"menuFullScreen\":[32],\"searchValInternal\":[32],\"submitSearch\":[64],\"toggleOverflowMenu\":[64]},[[0,\"nanoOpen\",\"secondaryOpen\"],[0,\"nanoClose\",\"secondaryClose\"],[16,\"click\",\"menuClose\"]]]]],[\"nano-demo\",[[1,\"nano-demo\"]]],[\"nano-hero\",[[1,\"nano-hero\",{\"imgSrc\":[1,\"img-src\"],\"imgSrcSet\":[1,\"img-src-set\"],\"largeScreenBP\":[2,\"large-screen-b-p\"],\"theme\":[1],\"level\":[1],\"gridSizes\":[32],\"hasIconBox\":[32],\"hasScrim\":[32],\"hasSecondaryContent\":[32],\"hasQuote\":[32],\"hasBg\":[32],\"hasBackBtn\":[32],\"hasCtas\":[32],\"breadCrumbs\":[32],\"iconBoxItems\":[32]}]]],[\"nano-date-input\",[[6,\"nano-date-input\",{\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"helperText\":[4,\"helper-text\"],\"helperTextFormat\":[16],\"floatLabel\":[4,\"float-label\"],\"name\":[1],\"readonly\":[4],\"size\":[2],\"form\":[1],\"firstDayOfWeek\":[2,\"first-day-of-week\"],\"localization\":[16],\"disabled\":[4],\"color\":[1],\"autofocus\":[4],\"clearInput\":[4,\"clear-input\"],\"label\":[1],\"placeholder\":[1025],\"value\":[1537],\"validateOn\":[1,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"dateOrder\":[1,\"date-order\"],\"required\":[4],\"min\":[1],\"max\":[1],\"hideLabel\":[4,\"hide-label\"],\"picker\":[4],\"initialPickerDate\":[1,\"initial-picker-date\"],\"pickerOpen\":[1540,\"picker-open\"],\"closeAfterPicked\":[4,\"close-after-picked\"],\"dropDownConfig\":[6160],\"dateValue\":[2064],\"isDateDisabled\":[16],\"pattern\":[32],\"inputValue\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getInputElement\":[64],\"showError\":[64]}]]],[\"nano-dialog\",[[1,\"nano-dialog\",{\"showRibbon\":[4,\"show-ribbon\"],\"open\":[1540],\"label\":[1],\"noHeader\":[4,\"no-header\"],\"noFooter\":[4,\"no-footer\"],\"noUserDismiss\":[4,\"no-user-dismiss\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"hoist\":[4],\"isVisible\":[32],\"noDismiss\":[32],\"hasFooter\":[32],\"show\":[64],\"hide\":[64]}]]],[\"nano-file-upload\",[[6,\"nano-file-upload\",{\"name\":[1],\"accept\":[1],\"capture\":[1],\"maxFileSize\":[2,\"max-file-size\"],\"maxFiles\":[2,\"max-files\"],\"label\":[1],\"placeholder\":[1],\"hideLabel\":[4,\"hide-label\"],\"required\":[4],\"disabled\":[516],\"clearInput\":[4,\"clear-input\"],\"showInlineError\":[516,\"show-inline-error\"],\"validateOn\":[1025,\"validate-on\"],\"form\":[1],\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"files\":[6160],\"value\":[6145],\"hasHelperSlot\":[32],\"hasLabelSlot\":[32],\"errorMessage\":[32],\"isDragging\":[32],\"fileList\":[32],\"hasFocus\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getInputElement\":[64],\"showError\":[64]},[[8,\"click\",\"globalClickHandler\"],[8,\"keydown\",\"globalKeydownHandler\"],[16,\"reset\",\"onReset\"]]]]],[\"nano-alert\",[[1,\"nano-alert\",{\"open\":[1540],\"closable\":[516],\"color\":[513],\"duration\":[2],\"isModal\":[32],\"isToast\":[32],\"isShowing\":[32],\"label\":[32],\"show\":[64],\"hide\":[64],\"toast\":[64],\"alert\":[64]}]]],[\"nano-global-search-results\",[[1,\"nano-global-search-results\",{\"algoliaEle\":[32],\"currentWidth\":[32],\"apiKey\":[32],\"appId\":[32],\"index\":[32]},[[16,\"nanoSearchReset\",\"handleGlobalNavReset\"],[16,\"nanoSearchResult\",\"handleGlobalNavSearch\"],[0,\"nanoChange\",\"handleReorder\"],[0,\"nanoResultsShown\",\"attachListeners\"],[16,\"nanoNewResults\",\"attachResultListeners\"]]]]],[\"nano-overflow-nav\",[[1,\"nano-overflow-nav\",{\"scrollControls\":[4,\"scroll-controls\"],\"orientation\":[513],\"activeHandler\":[16],\"inActiveHandler\":[16],\"isActiveHandler\":[16],\"hasScrollControls\":[32],\"hideControlEnd\":[32],\"hideControlStart\":[32]}]]],[\"nano-tab\",[[1,\"nano-tab\",{\"panel\":[513],\"active\":[516],\"disabled\":[516],\"closable\":[4],\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"nano-menu-drawer\",[[1,\"nano-menu-drawer\",{\"open\":[1028],\"saveState\":[4,\"save-state\"],\"hideWidth\":[2,\"hide-width\"],\"hideHeight\":[4,\"hide-height\"],\"reset\":[32],\"widthOk\":[32],\"heightOk\":[32],\"isLoading\":[32],\"hide\":[32]},[[0,\"nanoOpen\",\"cancelNavItemEvents\"],[0,\"nanoClose\",\"cancelNavItemEvents\"],[16,\"nanoIsReady\",\"handleGlobalNavReady\"]]]]],[\"nano-split-pane\",[[1,\"nano-split-pane\",{\"position\":[6146],\"positionInPixels\":[1026,\"position-in-pixels\"],\"vertical\":[516],\"disabled\":[516],\"primary\":[1],\"snap\":[1],\"snapThreshold\":[2,\"snap-threshold\"],\"animationDuration\":[2,\"animation-duration\"],\"getPercentageToPixels\":[64],\"getPixelsToPercentage\":[64]}]]],[\"nano-tab-group\",[[1,\"nano-tab-group\",{\"placement\":[1],\"noScrollControls\":[4,\"no-scroll-controls\"],\"color\":[1],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"disableSwipe\":[4,\"disable-swipe\"],\"hasScrollControls\":[32],\"hideControlRight\":[32],\"hideControlLeft\":[32],\"tab\":[32],\"show\":[64]},[[0,\"nanoTabClose\",\"handleTabClose\"]]]]],[\"nano-accordion\",[[1,\"nano-accordion\",{\"color\":[1],\"itemOpened\":[32]},[[0,\"nanoOpened\",\"onToggleHandler\"],[0,\"nanoClosed\",\"onClosedHandler\"]]]]],[\"nano-algolia-filter\",[[1,\"nano-algolia-filter\",{\"filterName\":[1,\"filter-name\"],\"value\":[1025],\"operator\":[1],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"changeEvent\":[32],\"internalValue\":[32],\"showFilter\":[32],\"indexResults\":[32],\"filterChanged\":[32],\"facets\":[32],\"tplRenderFn\":[32],\"globalStoreMethod\":[32]},[[0,\"nanoChange\",\"handleChangeEvent\"],[0,\"change\",\"handleChangeEvent\"]]]]],[\"nano-algolia-input\",[[1,\"nano-algolia-input\",{\"appId\":[1,\"app-id\"],\"apiKey\":[1,\"api-key\"],\"searchIndex\":[1040],\"searchIndexName\":[1,\"search-index-name\"],\"minChars\":[2,\"min-chars\"],\"autoEmit\":[4,\"auto-emit\"],\"browseIndex\":[1028,\"browse-index\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"searchStr\":[32],\"algoliaIndex\":[32],\"currentResults\":[32],\"search\":[64]},[[0,\"nanoChange\",\"searchSubmit\"]]]]],[\"nano-algolia-pagination\",[[1,\"nano-algolia-pagination\",{\"maxToShow\":[2,\"max-to-show\"],\"currentPage\":[32],\"canGoPrev\":[32],\"canGoNext\":[32],\"show\":[32],\"tplRenderFn\":[32],\"indexResults\":[32],\"infiniteScroll\":[32],\"nextPage\":[64],\"prevPage\":[64],\"goToPage\":[64]}]]],[\"nano-algolia-results\",[[1,\"nano-algolia-results\",{\"infiniteScroll\":[4,\"infinite-scroll\"],\"appendPages\":[4,\"append-pages\"],\"showResults\":[32],\"tplRenderFn\":[32],\"results\":[32],\"indexResults\":[32],\"resultsPage\":[32],\"changeEvent\":[32],\"facets\":[32],\"isLoading\":[32]}]]],[\"nano-aspect-ratio\",[[1,\"nano-aspect-ratio\",{\"aspectRatio\":[1,\"aspect-ratio\"],\"fit\":[1]}]]],[\"nano-checkbox\",[[6,\"nano-checkbox\",{\"hasFocus\":[1540,\"has-focus\"],\"checked\":[1540],\"disabled\":[516],\"value\":[513],\"name\":[513],\"required\":[516],\"type\":[513],\"label\":[1],\"indeterminate\":[1540],\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"color\":[1],\"form\":[1],\"inputType\":[32],\"_invalid\":[32],\"getInputElement\":[64],\"reportValidity\":[64],\"setError\":[64],\"setFocus\":[64],\"removeFocus\":[64]},[[16,\"reset\",\"onReset\"]]]]],[\"nano-checkbox-group\",[[6,\"nano-checkbox-group\",{\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[4,\"show-inline-error\"],\"min\":[2],\"max\":[2],\"disabled\":[516],\"legend\":[1],\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"value\":[1025],\"checkboxes\":[32],\"nativeCbs\":[32],\"errorMessage\":[32],\"showErrorMsg\":[32],\"hasHelperSlot\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"showError\":[64]},[[0,\"nanoChange\",\"handleValueChange\"],[0,\"nanoChange\",\"handleCbChange\"]]]]],[\"nano-details\",[[1,\"nano-details\",{\"label\":[1],\"open\":[1540],\"noHandle\":[4,\"no-handle\"],\"iconRotation\":[2,\"icon-rotation\"],\"color\":[1],\"isLoading\":[32]}]]],[\"nano-drawer\",[[1,\"nano-drawer\",{\"open\":[1540],\"label\":[1],\"placement\":[1],\"contained\":[4],\"noHeader\":[4,\"no-header\"],\"type\":[1],\"contentSelector\":[1,\"content-selector\"],\"hasFooter\":[32],\"isVisible\":[32],\"show\":[64],\"hide\":[64]}]]],[\"nano-field-validator\",[[4,\"nano-field-validator\",{\"validateOn\":[1025,\"validate-on\"],\"scrollToInvalid\":[4,\"scroll-to-invalid\"],\"dirty\":[2564],\"valid\":[2564],\"store\":[2064],\"payload\":[2064],\"showValidation\":[2052,\"show-validation\"],\"validationState\":[2064],\"extraFieldSelector\":[1,\"extra-field-selector\"],\"validation\":[16],\"submitted\":[32],\"userForm\":[32],\"_dirty\":[32],\"_valid\":[32],\"_store\":[32],\"setStore\":[64],\"setCustomValidity\":[64],\"resetValidity\":[64]}]]],[\"nano-range\",[[6,\"nano-range\",{\"color\":[1],\"debounce\":[2],\"name\":[1],\"dualKnobs\":[4,\"dual-knobs\"],\"min\":[2],\"max\":[2],\"pin\":[4],\"snaps\":[4],\"step\":[2],\"ticks\":[4],\"disabled\":[4],\"value\":[1026],\"ratioA\":[32],\"ratioB\":[32],\"pressedKnob\":[32]}]]],[\"nano-rating\",[[2,\"nano-rating\",{\"value\":[1538],\"max\":[2],\"precision\":[2],\"readonly\":[4],\"disabled\":[4],\"name\":[1],\"symbolName\":[1,\"symbol-name\"],\"symbol\":[16],\"hoverValue\":[32],\"isHovering\":[32],\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"nano-slide\",[[1,\"nano-slide\",{\"ready\":[1540]}]]],[\"nano-slides\",[[1,\"nano-slides\",{\"options\":[1040],\"navbtns\":[4],\"pager\":[4],\"fullscreenbtn\":[4],\"fullscreen\":[1540],\"animation\":[513],\"currentSlide\":[1538,\"current-slide\"],\"autoplay\":[8],\"ready\":[1540],\"iCurrentSlide\":[32],\"slidesReady\":[32],\"didInit\":[32],\"update\":[64],\"updateAutoHeight\":[64],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"getActiveIndex\":[64],\"length\":[64],\"isEnd\":[64],\"isBeginning\":[64],\"startAutoplay\":[64],\"stopAutoplay\":[64],\"lockSwipes\":[64],\"getflickity\":[64],\"reload\":[64]}]]],[\"nano-tab-content\",[[1,\"nano-tab-content\",{\"name\":[513],\"active\":[516],\"ready\":[32]}]]],[\"nano-spinner\",[[1,\"nano-spinner\",{\"type\":[1],\"overlay\":[516],\"hasText\":[32]}]]],[\"nano-table\",[[4,\"nano-table\",{\"type\":[1],\"caption\":[1],\"showCaption\":[4,\"show-caption\"],\"loading\":[4],\"placeholderSize\":[2,\"placeholder-size\"],\"rows\":[1040],\"columns\":[1040],\"headRender\":[16],\"rowRender\":[16],\"footRender\":[16],\"showFooter\":[4,\"show-footer\"],\"perBlock\":[2,\"per-block\"],\"blocksLength\":[2050,\"blocks-length\"],\"searchTerm\":[1,\"search-term\"],\"customFilterFn\":[16],\"customSortFn\":[16],\"defaultSort\":[4,\"default-sort\"],\"defaultColDraggable\":[4,\"default-col-draggable\"],\"virtualTotalItems\":[2,\"virtual-total-items\"],\"internalLoading\":[32],\"blocks\":[32],\"activeBlocks\":[32],\"resetSorting\":[64],\"addSort\":[64],\"resetFilters\":[64],\"addFilters\":[64],\"removeFilters\":[64],\"updateRow\":[64]}]]],[\"nano-algolia\",[[1,\"nano-algolia\",{\"showResults\":[1028,\"show-results\"],\"resultsPage\":[1026,\"results-page\"],\"appId\":[1025,\"app-id\"],\"apiKey\":[1025,\"api-key\"],\"searchIndex\":[1040],\"searchIndexName\":[1025,\"search-index-name\"],\"listenTo\":[1,\"listen-to\"],\"query\":[1025],\"operator\":[1],\"filters\":[16],\"tplEngine\":[16],\"tplRenderFn\":[16],\"replicaIndex\":[1025,\"replica-index\"],\"browseIndex\":[1028,\"browse-index\"],\"minChars\":[2,\"min-chars\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"_dynFacetFilters\":[32],\"inputField\":[32],\"algoliaIndex\":[32],\"indeces\":[32],\"resultsEmitterEle\":[32],\"indexResults\":[32],\"filterChanged\":[32],\"currentHits\":[32],\"changeEvent\":[32],\"isLoading\":[32],\"wormholeState\":[32],\"removeFilters\":[64]},[[0,\"nanoTplUpdated\",\"onAllTplUpdate\"],[0,\"nanoPageChanged\",\"onPageChange\"],[0,\"nanoFilterChanged\",\"onFilterChange\"],[16,\"nanoChange\",\"handleInputChange\"],[16,\"change\",\"handleInputChange\"]]]]],[\"nano-icon\",[[1,\"nano-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"flipRtl\":[4,\"flip-rtl\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"lazy\":[4],\"svgContent\":[32],\"isVisible\":[32],\"isLoading\":[32]}]]],[\"nano-date-picker\",[[1,\"nano-date-picker\",{\"selectedDate\":[1025,\"selected-date\"],\"min\":[1],\"max\":[1],\"firstDayOfWeek\":[2,\"first-day-of-week\"],\"localization\":[16],\"color\":[1],\"isDateDisabled\":[16],\"isModal\":[4,\"is-modal\"],\"firstFocusEle\":[16],\"activeFocus\":[32],\"focusedDay\":[32],\"setFocus\":[64]}]]],[\"nano-input\",[[6,\"nano-input\",{\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"color\":[1],\"accept\":[1],\"autocapitalise\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"clearInput\":[4,\"clear-input\"],\"clearOnEdit\":[4,\"clear-on-edit\"],\"debounce\":[2],\"disabled\":[516],\"inputmode\":[1],\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"floatLabel\":[4,\"float-label\"],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"multiple\":[4],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[4],\"spellcheck\":[4],\"step\":[1],\"size\":[2],\"type\":[513],\"form\":[1],\"value\":[1025],\"resize\":[1],\"rows\":[2],\"showCharCount\":[4,\"show-char-count\"],\"hasFocus\":[32],\"hasLabelSlot\":[32],\"hasHelperSlot\":[32],\"hasHelperEndSlot\":[32],\"errorMessage\":[32],\"datalist\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"select\":[64],\"getInputElement\":[64],\"showError\":[64]},[[16,\"reset\",\"onReset\"],[17,\"mousedown\",\"handleBlur\"],[0,\"keydown\",\"handleBlur\"]]]]],[\"nano-sticker\",[[1,\"nano-sticker\",{\"autoResize\":[4,\"auto-resize\"],\"isSticky\":[1028,\"is-sticky\"],\"offset\":[1026],\"position\":[1],\"quietMode\":[1,\"quiet-mode\"],\"hideOnNewStickers\":[4,\"hide-on-new-stickers\"],\"breakPointMax\":[2,\"break-point-max\"],\"breakPointMin\":[2,\"break-point-min\"],\"scrollParent\":[1040],\"stickTo\":[1,\"stick-to\"],\"isStuck\":[32],\"isRootSticker\":[32],\"hide\":[32],\"scrollHide\":[32],\"multiStickerHide\":[32],\"scrollingTo\":[32],\"quietModeIsOn\":[32],\"stuckCounter\":[32],\"stickerIndex\":[32],\"stickToEle\":[32],\"triggerPos\":[32],\"trigger\":[32],\"_offset\":[32],\"isHiding\":[64],\"isSticking\":[64],\"setTriggerPos\":[64],\"getTriggerPos\":[64],\"pauseHiding\":[64]}]]],[\"nano-dropdown\",[[1,\"nano-dropdown\",{\"autoOpen\":[4,\"auto-open\"],\"open\":[1540],\"closeOnSelect\":[4,\"close-on-select\"],\"containingElement\":[1040],\"tetherTo\":[16],\"placement\":[1],\"distance\":[2],\"skidding\":[2],\"hoist\":[4],\"dialogTitle\":[1,\"dialog-title\"],\"eventType\":[16],\"show\":[64],\"hide\":[64]},[[0,\"nanoOpen\",\"secondaryOpen\"],[0,\"nanoClose\",\"secondaryClose\"],[0,\"nanoSelect\",\"handlePanelSelect\"]]]]],[\"nano-icon-button\",[[2,\"nano-icon-button\",{\"iconName\":[1,\"icon-name\"],\"iconSrc\":[1,\"icon-src\"],\"type\":[513],\"name\":[513],\"value\":[513],\"label\":[1],\"disabled\":[516],\"href\":[1],\"target\":[1],\"setFocus\":[64]}]]],[\"nano-datalist_3\",[[1,\"nano-datalist\",{\"selected\":[1040],\"dropDownConfig\":[6160],\"options\":[16],\"input\":[1],\"type\":[1],\"activeOptions\":[2064],\"open\":[1028],\"disableFilter\":[4,\"disable-filter\"],\"disabled\":[4],\"actvOptEles\":[32],\"connectedInput\":[32],\"inputLabel\":[32],\"hasNoResult\":[32],\"shouldOpen\":[32],\"canOpen\":[32],\"optionIds\":[32]}],[1,\"nano-option\",{\"value\":[1537],\"label\":[1537],\"selected\":[516],\"disabled\":[516],\"filterMeta\":[1,\"filter-meta\"],\"hasFocus\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]],[1,\"nano-menu\",{\"hasFocus\":[2052,\"has-focus\"],\"type\":[1],\"label\":[1],\"setFocus\":[64],\"removeFocus\":[64],\"showActiveElement\":[64],\"resetActiveItem\":[64]},[[17,\"mousedown\",\"handleBlur\"],[0,\"keydown\",\"handleBlur\"]]]]],[\"nano-global-nav-user-profile_3\",[[6,\"nano-select\",{\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"color\":[1],\"autofocus\":[4],\"disabled\":[516],\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"floatLabel\":[4,\"float-label\"],\"multiple\":[4],\"name\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[4],\"size\":[2],\"max\":[2],\"min\":[2],\"form\":[1],\"allowCustomValues\":[4,\"allow-custom-values\"],\"value\":[6145],\"options\":[6160],\"clearSelect\":[4,\"clear-select\"],\"mask\":[4],\"debounce\":[2],\"dropDownConfig\":[1040],\"currInsertIndex\":[32],\"showErrorMsg\":[32],\"errorMessage\":[32],\"hasFocus\":[32],\"hasLabelSlot\":[32],\"hasHelperSlot\":[32],\"hasHelperEndSlot\":[32],\"inputSearchVal\":[32],\"_invalid\":[32],\"_eOptions\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getSelectElement\":[64],\"showError\":[64]},[[16,\"reset\",\"onReset\"],[17,\"mousedown\",\"handleBlur\"],[0,\"keydown\",\"handleBlur\"]]],[0,\"nano-global-nav-user-profile\",{\"myAccountUser\":[16],\"userProfileUrl\":[1,\"user-profile-url\"]}],[1,\"nano-nav-item\",{\"href\":[1025],\"target\":[1],\"disabled\":[4],\"open\":[1540],\"selected\":[516],\"secondaryActiveWidth\":[2,\"secondary-active-width\"],\"secondaryFallback\":[16],\"closeOnBlur\":[4,\"close-on-blur\"],\"notification\":[4],\"hasAnchorEle\":[32],\"didOpen\":[32],\"isInGlobalNav\":[32],\"isInMenuDrawer\":[32],\"isInMenu\":[32],\"hasFocus\":[32],\"setFocus\":[64]},[[16,\"click\",\"handleClose\"],[16,\"keyup\",\"handleClose\"]]]]],[\"nano-resize-observe_2\",[[1,\"nano-resize-observe\",{\"notifyContentFit\":[1,\"notify-content-fit\"],\"states\":[1],\"currentWidth\":[32],\"currentHeight\":[32],\"classNames\":[32],\"contentFitX\":[32],\"contentFitY\":[32]}],[1,\"nano-skeleton\",{\"animated\":[4]}]]],[\"nano-grid_3\",[[1,\"nano-img\",{\"alt\":[1],\"src\":[1],\"srcSet\":[1,\"src-set\"],\"lazy\":[4],\"background\":[4],\"autoHeight\":[1,\"auto-height\"],\"loadSrc\":[32],\"loadError\":[32],\"hasLoaded\":[32],\"imgStates\":[32],\"_src\":[32]}],[1,\"nano-grid\",{\"sSize\":[2,\"s-size\"],\"mSize\":[2,\"m-size\"],\"lSize\":[2,\"l-size\"],\"xlSize\":[2,\"xl-size\"],\"sCols\":[2,\"s-cols\"],\"mCols\":[2,\"m-cols\"],\"lCols\":[2,\"l-cols\"],\"xlCols\":[2,\"xl-cols\"],\"xxlCols\":[2,\"xxl-cols\"],\"showHelper\":[516,\"show-helper\"],\"contentPanel\":[516,\"content-panel\"],\"fullHeight\":[516,\"full-height\"],\"ready\":[32],\"isSmall\":[32],\"isMedium\":[32],\"isLarge\":[32],\"isXL\":[32],\"isXXL\":[32]}],[1,\"nano-grid-item\",{\"gridStates\":[1,\"grid-states\"],\"changeBP\":[64]}]]],[\"nano-progress-bar_2\",[[1,\"nano-progress-bar\",{\"value\":[2],\"indeterminate\":[4],\"showPercent\":[4,\"show-percent\"]}],[1,\"nano-tooltip\",{\"content\":[1],\"placement\":[1],\"disabled\":[4],\"distance\":[2],\"open\":[1540],\"skidding\":[2],\"hoist\":[4],\"trigger\":[1],\"show\":[64],\"hide\":[64]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"nano-global-nav\",[[1,\"nano-global-nav\",{\"env\":[1],\"ssoDataUrl\":[1,\"sso-data-url\"],\"myAccountData\":[16],\"ssoRedirect\":[1,\"sso-redirect\"],\"getMyAccountData\":[4,\"get-my-account-data\"],\"activeMyAccountSections\":[16],\"showSearch\":[4,\"show-search\"],\"showLogo\":[4,\"show-logo\"],\"logoUrl\":[1,\"logo-url\"],\"searchIndeces\":[16],\"myAccountUser\":[1040],\"searchAppId\":[1025,\"search-app-id\"],\"searchApiKey\":[1025,\"search-api-key\"],\"searchValue\":[1025,\"search-value\"],\"searchIndex\":[1025,\"search-index\"],\"cartCount\":[1026,\"cart-count\"],\"msgCount\":[1026,\"msg-count\"],\"cartUrl\":[1025,\"cart-url\"],\"msgUrl\":[1025,\"msg-url\"],\"userProfileUrl\":[32],\"hasLoggedinSlot\":[32],\"hasSiteSlot\":[32],\"hasPromotionSlot\":[32],\"aboutSlotLen\":[32],\"iconSlotLen\":[32],\"mainSlotLen\":[32],\"overflowSlotLen\":[32],\"searchSlotLen\":[32],\"internalSearchIndeces\":[32],\"thresholdReady\":[32],\"remoteDataReady\":[32],\"ready\":[32],\"isResizing\":[32],\"intersectRatio\":[32],\"threshold\":[32],\"modalOpen\":[32],\"modalIsOpen\":[32],\"searchBarShown\":[32],\"scrollingUp\":[32],\"searchLoading\":[32],\"showAutocomplete\":[32],\"secondaryMenuOpen\":[32],\"userMenuOpen\":[32],\"menuFullScreen\":[32],\"searchValInternal\":[32],\"submitSearch\":[64],\"toggleOverflowMenu\":[64]},[[0,\"nanoOpen\",\"secondaryOpen\"],[0,\"nanoClose\",\"secondaryClose\"],[16,\"click\",\"menuClose\"]]]]],[\"nano-demo\",[[1,\"nano-demo\"]]],[\"nano-hero\",[[1,\"nano-hero\",{\"imgSrc\":[1,\"img-src\"],\"imgSrcSet\":[1,\"img-src-set\"],\"largeScreenBP\":[2,\"large-screen-b-p\"],\"theme\":[1],\"level\":[1],\"gridSizes\":[32],\"hasIconBox\":[32],\"hasScrim\":[32],\"hasSecondaryContent\":[32],\"hasQuote\":[32],\"hasBg\":[32],\"hasBackBtn\":[32],\"hasCtas\":[32],\"breadCrumbs\":[32],\"iconBoxItems\":[32]}]]],[\"nano-date-input\",[[6,\"nano-date-input\",{\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"helperText\":[4,\"helper-text\"],\"helperTextFormat\":[16],\"floatLabel\":[4,\"float-label\"],\"name\":[1],\"readonly\":[4],\"size\":[2],\"form\":[1],\"firstDayOfWeek\":[2,\"first-day-of-week\"],\"localization\":[16],\"disabled\":[4],\"color\":[1],\"autofocus\":[4],\"clearInput\":[4,\"clear-input\"],\"label\":[1],\"placeholder\":[1025],\"value\":[1537],\"validateOn\":[1,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"dateOrder\":[1,\"date-order\"],\"required\":[4],\"min\":[1],\"max\":[1],\"hideLabel\":[4,\"hide-label\"],\"picker\":[4],\"initialPickerDate\":[1,\"initial-picker-date\"],\"pickerOpen\":[1540,\"picker-open\"],\"closeAfterPicked\":[4,\"close-after-picked\"],\"dropDownConfig\":[6160],\"dateValue\":[2064],\"isDateDisabled\":[16],\"pattern\":[32],\"inputValue\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getInputElement\":[64],\"showError\":[64]}]]],[\"nano-dialog\",[[1,\"nano-dialog\",{\"showRibbon\":[4,\"show-ribbon\"],\"open\":[1540],\"label\":[1],\"noHeader\":[4,\"no-header\"],\"noFooter\":[4,\"no-footer\"],\"noUserDismiss\":[4,\"no-user-dismiss\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"hoist\":[4],\"isVisible\":[32],\"noDismiss\":[32],\"hasFooter\":[32],\"show\":[64],\"hide\":[64]}]]],[\"nano-file-upload\",[[6,\"nano-file-upload\",{\"name\":[1],\"accept\":[1],\"capture\":[1],\"maxFileSize\":[2,\"max-file-size\"],\"maxFiles\":[2,\"max-files\"],\"label\":[1],\"placeholder\":[1],\"hideLabel\":[4,\"hide-label\"],\"required\":[4],\"disabled\":[516],\"clearInput\":[4,\"clear-input\"],\"showInlineError\":[516,\"show-inline-error\"],\"validateOn\":[1025,\"validate-on\"],\"form\":[1],\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"files\":[6160],\"value\":[6145],\"hasHelperSlot\":[32],\"hasLabelSlot\":[32],\"errorMessage\":[32],\"isDragging\":[32],\"fileList\":[32],\"hasFocus\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getInputElement\":[64],\"showError\":[64]},[[8,\"click\",\"globalClickHandler\"],[8,\"keydown\",\"globalKeydownHandler\"],[16,\"reset\",\"onReset\"]]]]],[\"nano-alert\",[[1,\"nano-alert\",{\"open\":[1540],\"closable\":[516],\"color\":[513],\"duration\":[2],\"isModal\":[32],\"isToast\":[32],\"isShowing\":[32],\"label\":[32],\"show\":[64],\"hide\":[64],\"toast\":[64],\"alert\":[64]}]]],[\"nano-global-search-results\",[[1,\"nano-global-search-results\",{\"algoliaEle\":[32],\"currentWidth\":[32],\"apiKey\":[32],\"appId\":[32],\"index\":[32]},[[16,\"nanoSearchReset\",\"handleGlobalNavReset\"],[16,\"nanoSearchResult\",\"handleGlobalNavSearch\"],[0,\"nanoChange\",\"handleReorder\"],[0,\"nanoResultsShown\",\"attachListeners\"],[16,\"nanoNewResults\",\"attachResultListeners\"]]]]],[\"nano-overflow-nav\",[[1,\"nano-overflow-nav\",{\"scrollControls\":[4,\"scroll-controls\"],\"orientation\":[513],\"activeHandler\":[16],\"inActiveHandler\":[16],\"isActiveHandler\":[16],\"instantReCalc\":[32],\"hasScrollControls\":[32],\"hideControlEnd\":[32],\"hideControlStart\":[32],\"syncActiveItem\":[64]}]]],[\"nano-tab\",[[1,\"nano-tab\",{\"panel\":[513],\"active\":[516],\"disabled\":[516],\"closable\":[4],\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"nano-menu-drawer\",[[1,\"nano-menu-drawer\",{\"open\":[1028],\"saveState\":[4,\"save-state\"],\"hideWidth\":[2,\"hide-width\"],\"hideHeight\":[4,\"hide-height\"],\"reset\":[32],\"widthOk\":[32],\"heightOk\":[32],\"isLoading\":[32],\"hide\":[32]},[[0,\"nanoOpen\",\"cancelNavItemEvents\"],[0,\"nanoClose\",\"cancelNavItemEvents\"],[16,\"nanoIsReady\",\"handleGlobalNavReady\"]]]]],[\"nano-split-pane\",[[1,\"nano-split-pane\",{\"position\":[6146],\"positionInPixels\":[1026,\"position-in-pixels\"],\"vertical\":[516],\"disabled\":[516],\"primary\":[1],\"snap\":[1],\"snapThreshold\":[2,\"snap-threshold\"],\"animationDuration\":[2,\"animation-duration\"],\"getPercentageToPixels\":[64],\"getPixelsToPercentage\":[64]}]]],[\"nano-tab-group\",[[1,\"nano-tab-group\",{\"placement\":[1],\"noScrollControls\":[4,\"no-scroll-controls\"],\"color\":[1],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"disableSwipe\":[4,\"disable-swipe\"],\"hasScrollControls\":[32],\"hideControlRight\":[32],\"hideControlLeft\":[32],\"tab\":[32],\"show\":[64]},[[0,\"nanoTabClose\",\"handleTabClose\"]]]]],[\"nano-accordion\",[[1,\"nano-accordion\",{\"color\":[1],\"itemOpened\":[32]},[[0,\"nanoOpened\",\"onToggleHandler\"],[0,\"nanoClosed\",\"onClosedHandler\"]]]]],[\"nano-algolia-filter\",[[1,\"nano-algolia-filter\",{\"filterName\":[1,\"filter-name\"],\"value\":[1025],\"operator\":[1],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"changeEvent\":[32],\"internalValue\":[32],\"showFilter\":[32],\"indexResults\":[32],\"filterChanged\":[32],\"facets\":[32],\"tplRenderFn\":[32],\"globalStoreMethod\":[32]},[[0,\"nanoChange\",\"handleChangeEvent\"],[0,\"change\",\"handleChangeEvent\"]]]]],[\"nano-algolia-input\",[[1,\"nano-algolia-input\",{\"appId\":[1,\"app-id\"],\"apiKey\":[1,\"api-key\"],\"searchIndex\":[1040],\"searchIndexName\":[1,\"search-index-name\"],\"minChars\":[2,\"min-chars\"],\"autoEmit\":[4,\"auto-emit\"],\"browseIndex\":[1028,\"browse-index\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"searchStr\":[32],\"algoliaIndex\":[32],\"currentResults\":[32],\"search\":[64]},[[0,\"nanoChange\",\"searchSubmit\"]]]]],[\"nano-algolia-pagination\",[[1,\"nano-algolia-pagination\",{\"maxToShow\":[2,\"max-to-show\"],\"currentPage\":[32],\"canGoPrev\":[32],\"canGoNext\":[32],\"show\":[32],\"tplRenderFn\":[32],\"indexResults\":[32],\"infiniteScroll\":[32],\"nextPage\":[64],\"prevPage\":[64],\"goToPage\":[64]}]]],[\"nano-algolia-results\",[[1,\"nano-algolia-results\",{\"infiniteScroll\":[4,\"infinite-scroll\"],\"appendPages\":[4,\"append-pages\"],\"showResults\":[32],\"tplRenderFn\":[32],\"results\":[32],\"indexResults\":[32],\"resultsPage\":[32],\"changeEvent\":[32],\"facets\":[32],\"isLoading\":[32]}]]],[\"nano-aspect-ratio\",[[1,\"nano-aspect-ratio\",{\"aspectRatio\":[1,\"aspect-ratio\"],\"fit\":[1]}]]],[\"nano-checkbox\",[[6,\"nano-checkbox\",{\"hasFocus\":[1540,\"has-focus\"],\"checked\":[1540],\"disabled\":[516],\"value\":[513],\"name\":[513],\"required\":[516],\"type\":[513],\"label\":[1],\"indeterminate\":[1540],\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"color\":[1],\"form\":[1],\"inputType\":[32],\"_invalid\":[32],\"getInputElement\":[64],\"reportValidity\":[64],\"setError\":[64],\"setFocus\":[64],\"removeFocus\":[64]},[[16,\"reset\",\"onReset\"]]]]],[\"nano-checkbox-group\",[[6,\"nano-checkbox-group\",{\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[4,\"show-inline-error\"],\"min\":[2],\"max\":[2],\"disabled\":[516],\"legend\":[1],\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"value\":[1025],\"checkboxes\":[32],\"nativeCbs\":[32],\"errorMessage\":[32],\"showErrorMsg\":[32],\"hasHelperSlot\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"showError\":[64]},[[0,\"nanoChange\",\"handleValueChange\"],[0,\"nanoChange\",\"handleCbChange\"]]]]],[\"nano-details\",[[1,\"nano-details\",{\"label\":[1],\"open\":[1540],\"noHandle\":[4,\"no-handle\"],\"iconRotation\":[2,\"icon-rotation\"],\"color\":[1],\"isLoading\":[32]}]]],[\"nano-drawer\",[[1,\"nano-drawer\",{\"open\":[1540],\"label\":[1],\"placement\":[1],\"contained\":[4],\"noHeader\":[4,\"no-header\"],\"type\":[1],\"contentSelector\":[1,\"content-selector\"],\"hasFooter\":[32],\"isVisible\":[32],\"show\":[64],\"hide\":[64]}]]],[\"nano-field-validator\",[[4,\"nano-field-validator\",{\"validateOn\":[1025,\"validate-on\"],\"scrollToInvalid\":[4,\"scroll-to-invalid\"],\"dirty\":[2564],\"valid\":[2564],\"store\":[2064],\"payload\":[2064],\"showValidation\":[2052,\"show-validation\"],\"validationState\":[2064],\"extraFieldSelector\":[1,\"extra-field-selector\"],\"validation\":[16],\"submitted\":[32],\"userForm\":[32],\"_dirty\":[32],\"_valid\":[32],\"_store\":[32],\"setStore\":[64],\"setCustomValidity\":[64],\"resetValidity\":[64]}]]],[\"nano-range\",[[6,\"nano-range\",{\"color\":[1],\"debounce\":[2],\"name\":[1],\"dualKnobs\":[4,\"dual-knobs\"],\"min\":[2],\"max\":[2],\"pin\":[4],\"snaps\":[4],\"step\":[2],\"ticks\":[4],\"disabled\":[4],\"value\":[1026],\"ratioA\":[32],\"ratioB\":[32],\"pressedKnob\":[32]}]]],[\"nano-rating\",[[2,\"nano-rating\",{\"value\":[1538],\"max\":[2],\"precision\":[2],\"readonly\":[4],\"disabled\":[4],\"name\":[1],\"symbolName\":[1,\"symbol-name\"],\"symbol\":[16],\"hoverValue\":[32],\"isHovering\":[32],\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"nano-slide\",[[1,\"nano-slide\",{\"ready\":[1540]}]]],[\"nano-slides\",[[1,\"nano-slides\",{\"options\":[1040],\"navbtns\":[4],\"pager\":[4],\"fullscreenbtn\":[4],\"fullscreen\":[1540],\"animation\":[513],\"currentSlide\":[1538,\"current-slide\"],\"autoplay\":[8],\"ready\":[1540],\"iCurrentSlide\":[32],\"slidesReady\":[32],\"didInit\":[32],\"update\":[64],\"updateAutoHeight\":[64],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"getActiveIndex\":[64],\"length\":[64],\"isEnd\":[64],\"isBeginning\":[64],\"startAutoplay\":[64],\"stopAutoplay\":[64],\"lockSwipes\":[64],\"getflickity\":[64],\"reload\":[64]}]]],[\"nano-tab-content\",[[1,\"nano-tab-content\",{\"name\":[513],\"active\":[516],\"ready\":[32]}]]],[\"nano-spinner\",[[1,\"nano-spinner\",{\"type\":[1],\"overlay\":[516],\"hasText\":[32]}]]],[\"nano-table\",[[4,\"nano-table\",{\"type\":[1],\"caption\":[1],\"showCaption\":[4,\"show-caption\"],\"loading\":[4],\"placeholderSize\":[2,\"placeholder-size\"],\"rows\":[1040],\"columns\":[1040],\"headRender\":[16],\"rowRender\":[16],\"footRender\":[16],\"showFooter\":[4,\"show-footer\"],\"perBlock\":[2,\"per-block\"],\"blocksLength\":[2050,\"blocks-length\"],\"searchTerm\":[1,\"search-term\"],\"customFilterFn\":[16],\"customSortFn\":[16],\"defaultSort\":[4,\"default-sort\"],\"defaultColDraggable\":[4,\"default-col-draggable\"],\"virtualTotalItems\":[2,\"virtual-total-items\"],\"internalLoading\":[32],\"blocks\":[32],\"activeBlocks\":[32],\"resetSorting\":[64],\"addSort\":[64],\"resetFilters\":[64],\"addFilters\":[64],\"removeFilters\":[64],\"updateRow\":[64]}]]],[\"nano-algolia\",[[1,\"nano-algolia\",{\"showResults\":[1028,\"show-results\"],\"resultsPage\":[1026,\"results-page\"],\"appId\":[1025,\"app-id\"],\"apiKey\":[1025,\"api-key\"],\"searchIndex\":[1040],\"searchIndexName\":[1025,\"search-index-name\"],\"listenTo\":[1,\"listen-to\"],\"query\":[1025],\"operator\":[1],\"filters\":[16],\"tplEngine\":[16],\"tplRenderFn\":[16],\"replicaIndex\":[1025,\"replica-index\"],\"browseIndex\":[1028,\"browse-index\"],\"minChars\":[2,\"min-chars\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"_dynFacetFilters\":[32],\"inputField\":[32],\"algoliaIndex\":[32],\"indeces\":[32],\"resultsEmitterEle\":[32],\"indexResults\":[32],\"filterChanged\":[32],\"currentHits\":[32],\"changeEvent\":[32],\"isLoading\":[32],\"wormholeState\":[32],\"removeFilters\":[64]},[[0,\"nanoTplUpdated\",\"onAllTplUpdate\"],[0,\"nanoPageChanged\",\"onPageChange\"],[0,\"nanoFilterChanged\",\"onFilterChange\"],[16,\"nanoChange\",\"handleInputChange\"],[16,\"change\",\"handleInputChange\"]]]]],[\"nano-icon\",[[1,\"nano-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"flipRtl\":[4,\"flip-rtl\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"lazy\":[4],\"svgContent\":[32],\"isVisible\":[32],\"isLoading\":[32]}]]],[\"nano-date-picker\",[[1,\"nano-date-picker\",{\"selectedDate\":[1025,\"selected-date\"],\"min\":[1],\"max\":[1],\"firstDayOfWeek\":[2,\"first-day-of-week\"],\"localization\":[16],\"color\":[1],\"isDateDisabled\":[16],\"isModal\":[4,\"is-modal\"],\"firstFocusEle\":[16],\"activeFocus\":[32],\"focusedDay\":[32],\"setFocus\":[64]}]]],[\"nano-input\",[[6,\"nano-input\",{\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"color\":[1],\"accept\":[1],\"autocapitalise\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"clearInput\":[4,\"clear-input\"],\"clearOnEdit\":[4,\"clear-on-edit\"],\"debounce\":[2],\"disabled\":[516],\"inputmode\":[1],\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"floatLabel\":[4,\"float-label\"],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"multiple\":[4],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[4],\"spellcheck\":[4],\"step\":[1],\"size\":[2],\"type\":[513],\"form\":[1],\"value\":[1025],\"resize\":[1],\"rows\":[2],\"showCharCount\":[4,\"show-char-count\"],\"hasFocus\":[32],\"hasLabelSlot\":[32],\"hasHelperSlot\":[32],\"hasHelperEndSlot\":[32],\"errorMessage\":[32],\"datalist\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"select\":[64],\"getInputElement\":[64],\"showError\":[64]},[[16,\"reset\",\"onReset\"],[17,\"mousedown\",\"handleBlur\"],[0,\"keydown\",\"handleBlur\"]]]]],[\"nano-sticker\",[[1,\"nano-sticker\",{\"autoResize\":[4,\"auto-resize\"],\"isSticky\":[1028,\"is-sticky\"],\"offset\":[1026],\"position\":[1],\"quietMode\":[1,\"quiet-mode\"],\"hideOnNewStickers\":[4,\"hide-on-new-stickers\"],\"breakPointMax\":[2,\"break-point-max\"],\"breakPointMin\":[2,\"break-point-min\"],\"scrollParent\":[1040],\"stickTo\":[1,\"stick-to\"],\"isStuck\":[32],\"isRootSticker\":[32],\"hide\":[32],\"scrollHide\":[32],\"multiStickerHide\":[32],\"scrollingTo\":[32],\"quietModeIsOn\":[32],\"stuckCounter\":[32],\"stickerIndex\":[32],\"stickToEle\":[32],\"triggerPos\":[32],\"trigger\":[32],\"_offset\":[32],\"isHiding\":[64],\"isSticking\":[64],\"setTriggerPos\":[64],\"getTriggerPos\":[64],\"pauseHiding\":[64]}]]],[\"nano-dropdown\",[[1,\"nano-dropdown\",{\"autoOpen\":[4,\"auto-open\"],\"open\":[1540],\"closeOnSelect\":[4,\"close-on-select\"],\"containingElement\":[1040],\"tetherTo\":[16],\"placement\":[1],\"distance\":[2],\"skidding\":[2],\"hoist\":[4],\"dialogTitle\":[1,\"dialog-title\"],\"eventType\":[16],\"show\":[64],\"hide\":[64]},[[0,\"nanoOpen\",\"secondaryOpen\"],[0,\"nanoClose\",\"secondaryClose\"],[0,\"nanoSelect\",\"handlePanelSelect\"]]]]],[\"nano-icon-button\",[[2,\"nano-icon-button\",{\"iconName\":[1,\"icon-name\"],\"iconSrc\":[1,\"icon-src\"],\"type\":[513],\"name\":[513],\"value\":[513],\"label\":[1],\"disabled\":[516],\"href\":[1],\"target\":[1],\"setFocus\":[64]}]]],[\"nano-datalist_3\",[[1,\"nano-datalist\",{\"selected\":[1040],\"dropDownConfig\":[6160],\"options\":[16],\"input\":[1],\"type\":[1],\"activeOptions\":[2064],\"open\":[1028],\"disableFilter\":[4,\"disable-filter\"],\"disabled\":[4],\"actvOptEles\":[32],\"connectedInput\":[32],\"inputLabel\":[32],\"hasNoResult\":[32],\"shouldOpen\":[32],\"canOpen\":[32],\"optionIds\":[32]}],[1,\"nano-option\",{\"value\":[1537],\"label\":[1537],\"selected\":[516],\"disabled\":[516],\"filterMeta\":[1,\"filter-meta\"],\"hasFocus\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]],[1,\"nano-menu\",{\"hasFocus\":[2052,\"has-focus\"],\"type\":[1],\"label\":[1],\"setFocus\":[64],\"removeFocus\":[64],\"showActiveElement\":[64],\"resetActiveItem\":[64]},[[17,\"mousedown\",\"handleBlur\"],[0,\"keydown\",\"handleBlur\"]]]]],[\"nano-global-nav-user-profile_3\",[[6,\"nano-select\",{\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"color\":[1],\"autofocus\":[4],\"disabled\":[516],\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"floatLabel\":[4,\"float-label\"],\"multiple\":[4],\"name\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[4],\"size\":[2],\"max\":[2],\"min\":[2],\"form\":[1],\"allowCustomValues\":[4,\"allow-custom-values\"],\"value\":[6145],\"options\":[6160],\"clearSelect\":[4,\"clear-select\"],\"mask\":[4],\"debounce\":[2],\"dropDownConfig\":[1040],\"currInsertIndex\":[32],\"showErrorMsg\":[32],\"errorMessage\":[32],\"hasFocus\":[32],\"hasLabelSlot\":[32],\"hasHelperSlot\":[32],\"hasHelperEndSlot\":[32],\"inputSearchVal\":[32],\"_invalid\":[32],\"_eOptions\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getSelectElement\":[64],\"showError\":[64]},[[16,\"reset\",\"onReset\"],[17,\"mousedown\",\"handleBlur\"],[0,\"keydown\",\"handleBlur\"]]],[0,\"nano-global-nav-user-profile\",{\"myAccountUser\":[16],\"userProfileUrl\":[1,\"user-profile-url\"]}],[1,\"nano-nav-item\",{\"href\":[1025],\"target\":[1],\"disabled\":[4],\"open\":[1540],\"selected\":[516],\"secondaryActiveWidth\":[2,\"secondary-active-width\"],\"secondaryFallback\":[16],\"closeOnBlur\":[4,\"close-on-blur\"],\"notification\":[4],\"hasAnchorEle\":[32],\"didOpen\":[32],\"isInGlobalNav\":[32],\"isInMenuDrawer\":[32],\"isInMenu\":[32],\"hasFocus\":[32],\"setFocus\":[64]},[[16,\"click\",\"handleClose\"],[16,\"keyup\",\"handleClose\"]]]]],[\"nano-resize-observe_2\",[[1,\"nano-resize-observe\",{\"notifyContentFit\":[1,\"notify-content-fit\"],\"states\":[1],\"currentWidth\":[32],\"currentHeight\":[32],\"classNames\":[32],\"contentFitX\":[32],\"contentFitY\":[32]}],[1,\"nano-skeleton\",{\"animated\":[4]}]]],[\"nano-grid_3\",[[1,\"nano-img\",{\"alt\":[1],\"src\":[1],\"srcSet\":[1,\"src-set\"],\"lazy\":[4],\"background\":[4],\"autoHeight\":[1,\"auto-height\"],\"loadSrc\":[32],\"loadError\":[32],\"hasLoaded\":[32],\"imgStates\":[32],\"_src\":[32]}],[1,\"nano-grid\",{\"sSize\":[2,\"s-size\"],\"mSize\":[2,\"m-size\"],\"lSize\":[2,\"l-size\"],\"xlSize\":[2,\"xl-size\"],\"sCols\":[2,\"s-cols\"],\"mCols\":[2,\"m-cols\"],\"lCols\":[2,\"l-cols\"],\"xlCols\":[2,\"xl-cols\"],\"xxlCols\":[2,\"xxl-cols\"],\"showHelper\":[516,\"show-helper\"],\"contentPanel\":[516,\"content-panel\"],\"fullHeight\":[516,\"full-height\"],\"ready\":[32],\"isSmall\":[32],\"isMedium\":[32],\"isLarge\":[32],\"isXL\":[32],\"isXXL\":[32]}],[1,\"nano-grid-item\",{\"gridStates\":[1,\"grid-states\"],\"changeBP\":[64]}]]],[\"nano-progress-bar_2\",[[1,\"nano-progress-bar\",{\"value\":[2],\"indeterminate\":[4],\"showPercent\":[4,\"show-percent\"]}],[1,\"nano-tooltip\",{\"content\":[1],\"placement\":[1],\"disabled\":[4],\"distance\":[2],\"open\":[1540],\"skidding\":[2],\"hoist\":[4],\"trigger\":[1],\"show\":[64],\"hide\":[64]}]]]]"), options);
 });
 //# sourceMappingURL=nano-components.js.map

package/dist/esm/nano-overflow-nav.entry.js CHANGED Viewed

@@ -5,12 +5,20 @@ import { r as registerInstance, h, a as Host, g as getElement } from './index-da
 import { g as getDirectChildren, a as getOffset } from './dom-311c9e1e.js';
 import { d as debounce } from './throttle-7836544e.js';
-const overflowNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-size:0;--indicator-track-color:#e4e6e8;--indicator-track-size:var(--indicator-size);--scroll-btn-color:\"currentColor\";--fade-size:1.75rem;--fade-transparency:0;--padding:var(--fade-size);position:relative;z-index:var(--nano-layer-index-raised, 5)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav__scroller{scrollbar-width:none;-ms-overflow-style:none;display:flex;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\");-webkit-mask-size:calc(100% + var(--fade-size) * 4);mask-size:calc(100% + var(--fade-size) * 4);-webkit-mask-position:calc(var(--fade-size) * -2);mask-position:calc(var(--fade-size) * -2)}.onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__scroller::after{content:\" \";line-height:1;flex:0 0 auto;display:block}.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -1);mask-position:calc(var(--fade-size) * -1);-webkit-mask-size:calc(100% + var(--fade-size));mask-size:calc(100% + var(--fade-size))}.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.onav__items{flex:1 1 auto;position:relative;width:auto;flex-wrap:nowrap;display:flex}.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}.onav nano-icon-button.onav__scroll-button{--nano-color-base:var(--scroll-btn-color);display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color);pointer-events:none}.onav nano-icon-button.onav__scroll-button:focus{outline:none}.onav nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav nano-icon-button.onav__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.onav--horizontal .onav__scroller{overflow-x:auto;overflow-y:hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-inline:var(--padding);-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)))}.onav--horizontal .onav__scroller::after{padding-inline:0 var(--fade-size);padding-block:0 0}.onav--horizontal.onav--has-scroll-controls .onav__scroller{padding-inline:var(--fade-size) 0;-webkit-padding-before:0;padding-block-start:0;-webkit-padding-after:0;padding-block-end:0}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{content:\"\";width:100%;height:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;-webkit-border-after:solid var(--indicator-size) var(--indicator-color);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{width:100%}.onav--vertical .onav__nav{max-height:100%;display:flex}.onav--vertical .onav__scroller{width:100%;overflow-y:auto;overflow-x:hidden;flex-direction:column;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-block:var(--padding);-webkit-mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));padding-inline:0 0;-webkit-padding-before:calc(var(--fade-size) + 12px);padding-block-start:calc(var(--fade-size) + 12px);-webkit-padding-after:var(--fade-size);padding-block-end:var(--fade-size)}.onav--vertical .onav__scroller::after{padding-inline:0 0;padding-block:0 var(--fade-size)}.onav--vertical .onav__items{flex-direction:column;width:-moz-fit-content;width:fit-content}.onav--vertical .onav__items::before{content:\"\";height:100%;width:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;-webkit-border-start:solid var(--indicator-size) var(--indicator-color);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 overflowNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-size:0;--indicator-track-color:#e4e6e8;--indicator-track-size:var(--indicator-size);--scroll-btn-color:\"currentColor\";--fade-size:1.75rem;--fade-transparency:0;--padding:var(--fade-size);position:relative;z-index:var(--nano-layer-index-raised, 5)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__scroller{scrollbar-width:none;-ms-overflow-style:none;display:flex;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\");-webkit-mask-size:calc(100% + var(--fade-size) * 4);mask-size:calc(100% + var(--fade-size) * 4);-webkit-mask-position:calc(var(--fade-size) * -2);mask-position:calc(var(--fade-size) * -2)}.onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__scroller::after{content:\" \";line-height:1;flex:0 0 auto;display:block}.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -1);mask-position:calc(var(--fade-size) * -1);-webkit-mask-size:calc(100% + var(--fade-size));mask-size:calc(100% + var(--fade-size))}.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.onav__items{flex:1 1 auto;position:relative;width:auto;flex-wrap:nowrap;display:flex}.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}.onav nano-icon-button.onav__scroll-button{--nano-color-base:var(--scroll-btn-color);display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color);pointer-events:none}.onav nano-icon-button.onav__scroll-button:focus{outline:none}.onav nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav nano-icon-button.onav__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.onav--horizontal .onav__scroller{overflow-x:auto;overflow-y:hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-inline:var(--padding);-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)))}.onav--horizontal .onav__scroller::after{padding-inline:0 var(--fade-size);padding-block:0 0}.onav--horizontal.onav--has-scroll-controls .onav__scroller{padding-inline:var(--fade-size) 0;-webkit-padding-before:0;padding-block-start:0;-webkit-padding-after:0;padding-block-end:0}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{content:\"\";width:100%;height:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;-webkit-border-after:solid var(--indicator-size) var(--indicator-color);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{width:100%}.onav--vertical .onav__nav{max-height:100%;display:flex}.onav--vertical .onav__scroller{width:100%;overflow-y:auto;overflow-x:hidden;flex-direction:column;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-block:var(--padding);-webkit-mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));padding-inline:0 0;-webkit-padding-before:calc(var(--fade-size) + 12px);padding-block-start:calc(var(--fade-size) + 12px);-webkit-padding-after:var(--fade-size);padding-block-end:var(--fade-size)}.onav--vertical .onav__scroller::after{padding-inline:0 0;padding-block:0 var(--fade-size)}.onav--vertical .onav__items{flex-direction:column;width:-moz-fit-content;width:fit-content}.onav--vertical .onav__items::before{content:\"\";height:100%;width:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;-webkit-border-start:solid var(--indicator-size) var(--indicator-color);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 OverflowNav = class {
   watchIsActiveHandler() {
-    this.activeItem = this.allActiveItems.find((el) => this.isActiveHandler(el));
-    this.recalculatePositions(true);
+    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) {
@@ -69,38 +77,24 @@ const OverflowNav = class {
         this.nav[this.scrollOffset] = scrollAmt;
       }
     };
-    this.slotChangeHandler = (ev) => {
+    this.slotChangeHandler = () => {
       if (this.allActiveItems.length < 2)
         return;
-      const item = this.allActiveItems.find((el) => this.isActiveHandler(el));
+      const item = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
       if (item)
         this.activeItem = item;
       this.recalculatePositions();
       /** maintain a weakmap of mutation observers to maintain item / indicator position on all changes. */
-      const nodes = ev.target.assignedElements({ flatten: true });
-      nodes.forEach((node) => {
-        if (!this.mutationObservers.get(node)) {
-          const mo = new MutationObserver((records) => {
-            records.forEach((record) => {
-              if (record.type === 'attributes') {
-                const foundItem = this.allActiveItems.find((el) => this.isActiveHandler(el));
-                if (foundItem && foundItem !== this.activeItem) {
-                  this.activeItem = foundItem;
-                }
-              }
-              else {
-                this.syncActiveItemIndicator();
-              }
-            });
-          });
-          this.mutationObservers.set(node, mo);
-          mo.observe(node, {
-            characterData: true,
-            childList: true,
-            subtree: true,
-            attributes: true,
-          });
-        }
+      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);
       });
     };
     this.handleClick = (event) => {
@@ -122,20 +116,21 @@ const OverflowNav = class {
           this.activeItem = foundItem;
       }
     };
-    this.recalculatePositions = (init) => {
+    this.recalculatePositions = () => {
       this.updateScrollControls();
-      this.syncActiveItemIndicator(init);
-      this.scrollToActiveItem(init);
+      this.syncActiveItemIndicator();
+      this.scrollToActiveItem();
     };
     this.scrollControls = true;
     this.orientation = 'horizontal';
-    this.activeHandler = (item) => item.classList.add('active');
-    this.inActiveHandler = (item) => item.classList.remove('active');
-    this.isActiveHandler = (item) => item.classList.contains('active');
+    this.activeHandler = (item, _index) => item.classList.add('active');
+    this.inActiveHandler = (item, _index) => item.classList.remove('active');
+    this.isActiveHandler = (item, _index) => item.classList.contains('active');
+    this.instantReCalc = false;
     this.hasScrollControls = false;
     this.hideControlEnd = true;
     this.hideControlStart = true;
-    this.recalculatePositions = debounce(this.recalculatePositions, 80);
+    this.recalculatePositions = debounce(this.recalculatePositions.bind(this), 80);
   }
   get scrollProp() {
     return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';
@@ -191,14 +186,13 @@ const OverflowNav = class {
       return;
     }
     this._activeItem = item;
-    this.allActiveItems.forEach((el) => {
+    this.allActiveItems.forEach((el, i) => {
       if (el === this._activeItem)
-        this.activeHandler(el);
+        this.activeHandler(el, i);
       else
-        this.inActiveHandler(el);
+        this.inActiveHandler(el, i);
     });
-    this.syncActiveItemIndicator();
-    this.scrollToActiveItem();
+    this.recalculatePositions();
   }
   get navDim() {
     if (!this.nav)
@@ -216,18 +210,18 @@ const OverflowNav = class {
           parseFloat(computedStyle.paddingBottom));
     }
   }
-  scrollToActiveItem(instant) {
+  scrollToActiveItem() {
     if (!this.nav || !this.activeItem)
       return;
-    requestAnimationFrame(() => {
+    setTimeout(() => {
       this.activeItem.scrollIntoView({
-        behavior: instant ? 'auto' : 'smooth',
+        behavior: this.instantReCalc ? 'auto' : 'smooth',
         block: 'center',
         inline: 'center',
       });
-    });
+    }, 100);
   }
-  syncActiveItemIndicator(instant) {
+  syncActiveItemIndicator() {
     if (!this.activeItem)
       return;
     const item = this.activeItem;
@@ -238,7 +232,7 @@ const OverflowNav = class {
       return;
     const offsetTop = offset.top;
     const offsetLeft = offset.left;
-    if (instant)
+    if (this.instantReCalc)
       this.activeIndicator.style.transition = 'none';
     switch (this.orientation) {
       case 'horizontal':
@@ -256,8 +250,11 @@ const OverflowNav = class {
   }
   // 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) {
@@ -268,8 +265,8 @@ const OverflowNav = class {
     mo.observe(this.host);
   }
   componentDidLoad() {
-    this.activeItem = this.allActiveItems.find((el) => this.isActiveHandler(el));
-    this.recalculatePositions(true);
+    this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
+    this.instantReCalc = false;
   }
   disconnectedCallback() {
     if (this.ro) {
@@ -284,6 +281,7 @@ const OverflowNav = class {
         '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,
       }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { part: "scroll-button scroll-button-prev", class: {
         'onav__scroll-button': true,
         'onav__scroll-button--start': true,

package/dist/esm/nano-overflow-nav.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-overflow-nav.entry.js","mappings":"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","names":[],"sources":["./src/components/overflow-nav/overflow-nav.scss?tag=nano-overflow-nav&encapsulation=shadow","./src/components/overflow-nav/overflow-nav.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /*\n @prop --indicator-transition: Defaults to #{$transition-fast}\n * @prop --indicator-color: Defaults to #{map.get($colors, lightblue)};\n * @prop --indicator-size: Defaults to 0;\n * @prop --indicator-track-color: Defaults to #{map.get($colors, lightgrey)};\n * @prop --indicator-track-size: Defaults to var(--indicator-size);\n\n * @prop --scroll-btn-color: Defaults to 'currentColor';\n * @prop --fade-size: The size of the fade areas (when items do not fit). Defaults to 1.75rem;\n * @prop --fade-transparency: Defaults to 0;\n \n @prop --padding: Padding that matches the fade size will stop items shifting if fade areas are added (i.e when items do not fit). Defaults to var(--fade-size);\n /\n\n --indicator-transition: #{$transition-fast};\n --indicator-color: #{map.get($colors, lightblue)};\n --indicator-size: 0;\n --indicator-track-color: #{map.get($colors, lightgrey)};\n --indicator-track-size: var(--indicator-size);\n --scroll-btn-color: 'currentColor';\n --fade-size: 1.75rem;\n --fade-transparency: 0;\n --padding: var(--fade-size);\n\n position: relative;\n z-index: #{$layer-index-raised};\n}\n\n:host([orientation=\"horizontal\"]) {\n display: block;\n}\n\n:host([orientation=\"vertical\"]) {\n display: flex;\n}\n\n.onav {\n $root: &;\n\n &__scroller {\n @include hide-scrollbar();\n\n display: flex;\n transition: #{$transition-medium} ease;\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');\n mask-size: calc(100% + calc(var(--fade-size) 4));\n mask-position: calc(var(--fade-size) * -2);\n\n &::after {\n content: ' ';\n line-height: 1;\n flex: 0 0 auto;\n display: block;\n }\n\n #{$root}--has-scroll-controls-start & {\n mask-position: 0;\n mask-size: calc(100% + (var(--fade-size) * 2));\n }\n\n #{$root}--has-scroll-controls-end & {\n mask-position: calc(var(--fade-size) * -1);\n mask-size: calc(100% + var(--fade-size));\n }\n\n #{$root}--has-scroll-controls-start#{$root}--has-scroll-controls-end & {\n mask-size: 100%;\n mask-position: 0;\n }\n }\n\n &__items {\n flex: 1 1 auto;\n position: relative;\n width: auto;\n flex-wrap: nowrap;\n display: flex;\n\n &::before {\n content: '';\n background: var(--indicator-track-color);\n display: block;\n position: absolute;\n z-index: 1;\n }\n }\n\n &__active-indicator {\n position: absolute;\n z-index: 10;\n transition:\n var(--indicator-transition) transform ease,\n var(--indicator-transition) width ease,\n var(--indicator-transition) height ease;\n }\n\n nano-icon-button.onav__scroll-button {\n --nano-color-base: var(--scroll-btn-color);\n\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n border: unset;\n z-index: 2;\n transition: #{$transition-fast} ease opacity;\n opacity: 0;\n color: var(--scroll-btn-color);\n pointer-events: none;\n\n &:focus {\n outline: none;\n }\n\n &.is-shown {\n opacity: 1;\n pointer-events: all;\n }\n\n &:focus-visible {\n box-shadow: #{$control-focus-style} inset;\n }\n }\n\n ///////////// HORIZONTAL ///////////////\n\n &--horizontal {\n\n #{$root}__scroller {\n overflow-x: auto;\n overflow-y: hidden;\n mask-repeat: no-repeat;\n padding-inline: var(--padding);\n mask-image:\n linear-gradient(\n to left,\n rgb(0 0 0 / var(--fade-transparency)) 0,\n rgb(0 0 0 / var(--fade-transparency)) var(--fade-size),\n rgb(0 0 0 / 100%) calc(var(--fade-size) * 2),\n rgb(0 0 0 / 100%) calc(100% - (var(--fade-size) * 2)),\n rgb(0 0 0 / var(--fade-transparency))\n calc(100% - var(--fade-size)),\n rgb(0 0 0 / var(--fade-transparency))\n );\n\n &::after {\n padding-inline: 0 var(--fade-size);\n padding-block: 0 0;\n }\n }\n\n &#{$root}--has-scroll-controls #{$root}__scroller {\n padding-inline: var(--fade-size) 0;\n padding-block-start: 0;\n padding-block-end: 0;\n }\n\n #{$root}__items {\n flex-direction: row;\n\n &::before {\n content: '';\n width: 100%;\n height: var(--indicator-track-size);\n inset-block-end: 0;\n }\n }\n\n #{$root}__active-indicator {\n inset-block-end: 0;\n border-block-end: solid var(--indicator-size) var(--indicator-color);\n }\n\n #{$root}__scroll-button {\n inset-block: 0;\n\n &--start {\n inset-inline-start: 0;\n }\n\n &--end {\n inset-inline-end: 0;\n }\n }\n }\n\n ///////////// VERTICAL ///////////////\n\n &--vertical {\n width: 100%;\n\n #{$root}__nav {\n max-height: 100%;\n display: flex;\n }\n\n #{$root}__scroller {\n width: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n flex-direction: column;\n mask-repeat: no-repeat;\n padding-block: var(--padding);\n mask-image:\n linear-gradient(\n to top,\n rgb(0 0 0 / var(--fade-transparency)) 0,\n rgb(0 0 0 / var(--fade-transparency)) var(--fade-size),\n rgb(0 0 0 / 100%) calc(var(--fade-size) * 2),\n rgb(0 0 0 / 100%) calc(100% - (var(--fade-size) * 2)),\n rgb(0 0 0 / var(--fade-transparency))\n calc(100% - var(--fade-size)),\n rgb(0 0 0 / var(--fade-transparency))\n );\n padding-inline: 0 0;\n padding-block-start: calc(var(--fade-size) + 12px);\n padding-block-end: var(--fade-size);\n\n &::after {\n padding-inline: 0 0;\n padding-block: 0 var(--fade-size);\n }\n }\n\n #{$root}__items {\n flex-direction: column;\n width: fit-content;\n\n &::before {\n content: '';\n height: 100%;\n width: var(--indicator-track-size);\n inset-inline-start: 0;\n }\n }\n\n #{$root}__active-indicator {\n inset-inline-start: 0;\n border-inline-start: solid var(--indicator-size) var(--indicator-color);\n }\n\n #{$root}__scroll-button {\n inset-inline: 0;\n\n &--start {\n inset-block-start: 0;\n }\n\n &--end {\n inset-block-end: 0;\n }\n }\n }\n}\n","import {\n Component,\n ComponentInterface,\n Host,\n h,\n Element,\n Prop,\n Watch,\n State,\n} from '@stencil/core';\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\n\n/*\n Primarily used to display navigational items that may not fit on smaller screens.\n \n - Accepts any collection of elements\n * - Gives visual cues of 'more' with auto display fade effect and scroll buttons\n * - Auto scrolls to the active item onload\n \n @slot - Default slot to place items.\n \n @part base - root, wrapper element\n * @part scroller - the scrolling element\n * @part items - the item wrapper element\n * @part indicator - the animated, indicator element\n * @part scroll-button - The buttons shown at either side of the scrolling area\n * @part scroll-button-prev - The button shown at the start of the scrolling area\n * @part scroll-button-next - The button shown at the end of the scrolling area\n /\n\n@Component({\n tag: 'nano-overflow-nav',\n styleUrl: 'overflow-nav.scss',\n shadow: true,\n})\nexport class OverflowNav implements ComponentInterface {\n // public surface\n\n /* Disables the scroll arrow buttons that appear when content overflows /\n @Prop() scrollControls = true;\n\n /* The flex direction of the element /\n @Prop({ reflect: true }) orientation: 'horizontal' \| 'vertical' =\n 'horizontal';\n\n /\n A function called when an item becomes 'active' (via click or keyboard)\n * @param item\n * @returns void /\n @Prop() activeHandler = (item: HTMLElement) => item.classList.add('active');\n\n /\n A function called when an item becomes 'inactive'\n * (because another item was made active)\n * @param item\n * @returns void /\n @Prop() inActiveHandler = (item: HTMLElement) =>\n item.classList.remove('active');\n\n /\n A function called to assess an initial, active item\n * @param item\n * @returns void /\n @Prop() isActiveHandler = (item: HTMLElement) =>\n item.classList.contains('active');\n\n @Watch('isActiveHandler')\n watchIsActiveHandler() {\n this.activeItem = this.allActiveItems.find((el) =>\n this.isActiveHandler(el)\n );\n this.recalculatePositions(true);\n }\n\n // private state\n\n constructor() {\n this.recalculatePositions = debounce(this.recalculatePositions, 80);\n }\n\n private ro?: ResizeObserver;\n private nav?: HTMLElement;\n private itemContainer?: HTMLElement;\n private isRtl?: boolean;\n private endBtn: HTMLNanoIconButtonElement;\n private startBtn: HTMLNanoIconButtonElement;\n private activeIndicator: HTMLElement;\n private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n get scrollProp() {\n return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';\n }\n\n get clientDimProp() {\n return this.orientation === 'horizontal' ? 'clientWidth' : 'clientHeight';\n }\n\n get scrollOffset() {\n return this.orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop';\n }\n\n @Element() host: HTMLNanoOverflowNavElement;\n\n @State() hasScrollControls = false;\n\n @Watch('hasScrollControls')\n watchScrollControls() {\n if (this.hasScrollControls) this.handleScroll();\n else this.hideControlStart = this.hideControlEnd = true;\n }\n\n @State() hideControlEnd = true;\n\n @Watch('hideControlEnd')\n hideEndBtn() {\n if (!this.endBtn) return;\n this.activateBtn(this.endBtn, !this.hideControlEnd);\n }\n\n @State() hideControlStart = true;\n\n @Watch('hideControlStart')\n hideStartBtn() {\n if (!this.startBtn) return;\n this.activateBtn(this.startBtn, !this.hideControlStart);\n }\n\n // private logic\n\n private activateBtn(btn: HTMLNanoIconButtonElement, activate = true) {\n if (!activate) {\n btn.tabIndex = -1;\n btn.disabled = true;\n btn.classList.remove('is-shown');\n return;\n }\n btn.tabIndex = 0;\n btn.disabled = false;\n btn.classList.add('is-shown');\n }\n\n get allActiveItems() {\n return this.allItems.filter(\n (el: any) => !el.disabled \|\| el.classList.contains('disabled')\n );\n }\n\n get allItems() {\n return getDirectChildren<HTMLElement>(this.host, '', true);\n }\n\n get activeItem() {\n return this._activeItem;\n }\n\n set activeItem(item: HTMLElement) {\n if (\n !item \|\|\n item === this.activeItem \|\|\n (item as any).disabled \|\|\n !this.allActiveItems.includes(item)\n ) {\n return;\n }\n\n this._activeItem = item;\n this.allActiveItems.forEach((el) => {\n if (el === this._activeItem) this.activeHandler(el);\n else this.inActiveHandler(el);\n });\n this.syncActiveItemIndicator();\n this.scrollToActiveItem();\n }\n private _activeItem: HTMLElement;\n\n get navDim() {\n if (!this.nav) return 0;\n\n const computedStyle = getComputedStyle(this.nav);\n let clientDim = this.nav[this.clientDimProp];\n\n if (this.orientation === 'horizontal') {\n return (clientDim -=\n parseFloat(computedStyle.paddingLeft) +\n parseFloat(computedStyle.paddingRight));\n } else {\n return (clientDim -=\n parseFloat(computedStyle.paddingTop) +\n parseFloat(computedStyle.paddingBottom));\n }\n }\n\n private scrollToActiveItem(instant?: boolean) {\n if (!this.nav \|\| !this.activeItem) return;\n requestAnimationFrame(() => {\n this.activeItem.scrollIntoView({\n behavior: instant ? 'auto' : 'smooth',\n block: 'center',\n inline: 'center',\n });\n });\n }\n\n private syncActiveItemIndicator(instant?: boolean) {\n if (!this.activeItem) return;\n\n const item = this.activeItem;\n const width = item.clientWidth \|\| 0;\n const height = item.clientHeight + 2 \|\| 0;\n const offset = getOffset(item, this.itemContainer);\n\n if (!this.activeIndicator) return;\n\n const offsetTop = offset.top;\n const offsetLeft = offset.left;\n\n if (instant) this.activeIndicator.style.transition = 'none';\n\n switch (this.orientation) {\n case 'horizontal':\n this.activeIndicator.style.width = `${width}px`;\n this.activeIndicator.style.height = null;\n this.activeIndicator.style.transform = `translateX(${offsetLeft}px)`;\n break;\n\n case 'vertical':\n this.activeIndicator.style.width = null;\n this.activeIndicator.style.height = `${height}px`;\n this.activeIndicator.style.transform = `translateY(${offsetTop}px)`;\n break;\n }\n setTimeout(() => (this.activeIndicator.style.transition = null), 400);\n }\n\n private updateScrollControls = () => {\n if (!this.nav) return;\n\n this.hasScrollControls =\n this.nav[this.scrollProp] > this.nav[this.clientDimProp] &&\n this.nav[this.scrollProp] > this.itemContainer[this.clientDimProp];\n this.handleScroll();\n };\n\n private handleScroll = () => {\n if (!this.hasScrollControls) {\n this.hideControlStart = this.hideControlEnd = true;\n return;\n }\n const finishEnd = this.isRtl\n ? this.nav[this.scrollOffset] === 0\n : Math.abs(\n this.nav[this.clientDimProp] -\n (this.nav[this.scrollProp] - this.nav[this.scrollOffset])\n ) < 2;\n\n const finishStart = this.isRtl\n ? Math.abs(\n this.nav[this.scrollProp] +\n this.nav[this.scrollOffset] -\n this.nav[this.clientDimProp]\n ) < 2\n : this.nav[this.scrollOffset] === 0;\n\n if (finishStart) {\n this.hideControlStart = true;\n this.hideControlEnd = false;\n } else if (finishEnd) {\n this.hideControlStart = false;\n this.hideControlEnd = true;\n } else {\n this.hideControlEnd = false;\n this.hideControlStart = false;\n }\n };\n\n private handleBtnClick = (goEnd: boolean = false) => {\n const navDim = this.navDim;\n let scrollAmt;\n if (goEnd) scrollAmt = this.nav[this.scrollOffset] + navDim - 20;\n else scrollAmt = this.nav[this.scrollOffset] - navDim + 20;\n\n try {\n this.nav.scroll({\n left: this.orientation === 'horizontal' ? scrollAmt : 0,\n top: this.orientation === 'vertical' ? scrollAmt : 0,\n behavior: 'smooth',\n });\n } catch (e) {\n this.nav[this.scrollOffset] = scrollAmt;\n }\n };\n\n private slotChangeHandler = (ev: Event & { target: HTMLSlotElement }) => {\n if (this.allActiveItems.length < 2) return;\n const item = this.allActiveItems.find((el) => this.isActiveHandler(el));\n if (item) this.activeItem = item;\n this.recalculatePositions();\n\n /** maintain a weakmap of mutation observers to maintain item / indicator position on all changes. */\n const nodes = ev.target.assignedElements({ flatten: true });\n nodes.forEach((node) => {\n if (!this.mutationObservers.get(node)) {\n const mo = new MutationObserver((records) => {\n records.forEach((record) => {\n if (record.type === 'attributes') {\n const foundItem = this.allActiveItems.find((el) =>\n this.isActiveHandler(el)\n );\n if (foundItem && foundItem !== this.activeItem) {\n this.activeItem = foundItem;\n }\n } else {\n this.syncActiveItemIndicator();\n }\n });\n });\n this.mutationObservers.set(node, mo);\n\n mo.observe(node, {\n characterData: true,\n childList: true,\n subtree: true,\n attributes: true,\n });\n }\n });\n };\n\n private handleClick = (event: MouseEvent) => {\n if (this.allActiveItems.length < 2) return;\n const foundItem = event\n .composedPath()\n .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n if (foundItem) this.activeItem = foundItem;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n const foundItem = event\n .composedPath()\n .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n if (foundItem) this.activeItem = foundItem;\n }\n };\n\n private recalculatePositions = (init?: any) => {\n this.updateScrollControls();\n this.syncActiveItemIndicator(init);\n this.scrollToActiveItem(init);\n };\n\n // lifecycle\n\n connectedCallback(): void {\n this.isRtl =\n this.orientation === 'horizontal' && !!this.host.closest('[dir=\"rtl\"]');\n\n if (!window['ResizeObserver']) return;\n\n if (this.ro) {\n this.ro.disconnect();\n this.ro = undefined;\n }\n const mo = (this.ro = new ResizeObserver(this.recalculatePositions));\n mo.observe(this.host);\n }\n\n componentDidLoad(): void {\n this.activeItem = this.allActiveItems.find((el) =>\n this.isActiveHandler(el)\n );\n this.recalculatePositions(true);\n }\n\n disconnectedCallback(): void {\n if (this.ro) {\n this.ro.disconnect();\n this.ro = undefined;\n }\n }\n\n render() {\n return (\n <Host dir={this.isRtl ? 'rtl' : null}>\n <div\n part=\"base\"\n class={{\n onav: true,\n [`onav--${this.orientation}`]: true,\n 'onav--has-scroll-controls': this.hasScrollControls,\n 'onav--has-scroll-controls-start': !this.hideControlStart,\n 'onav--has-scroll-controls-end': !this.hideControlEnd,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"onav__nav\">\n {this.scrollControls && (\n <nano-icon-button\n part=\"scroll-button scroll-button-prev\"\n class={{\n 'onav__scroll-button': true,\n 'onav__scroll-button--start': true,\n }}\n ref={(btn) => (this.startBtn = btn)}\n onClick={() => this.handleBtnClick(false)}\n label=\"Click to scroll\"\n iconName={\n this.orientation === 'horizontal'\n ? 'light/chevron-left'\n : 'light/chevron-up'\n }\n />\n )}\n\n <div\n part=\"scroller\"\n ref={(el) => (this.nav = el)}\n class=\"onav__scroller\"\n onScroll={this.handleScroll}\n >\n <div\n part=\"items\"\n ref={(el) => (this.itemContainer = el)}\n class=\"onav__items\"\n >\n <div\n part=\"indicator\"\n ref={(el) => (this.activeIndicator = el)}\n class=\"onav__active-indicator\"\n />\n <slot onSlotchange={this.slotChangeHandler} />\n </div>\n </div>\n\n {this.scrollControls && (\n <nano-icon-button\n part=\"scroll-button scroll-button-next\"\n class={{\n 'onav__scroll-button': true,\n 'onav__scroll-button--end': true,\n }}\n ref={(btn) => (this.endBtn = btn)}\n onClick={() => this.handleBtnClick(true)}\n label=\"Click to scroll\"\n iconName={\n this.orientation === 'horizontal'\n ? 'light/chevron-right'\n : 'light/chevron-down'\n }\n />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-overflow-nav.entry.js","mappings":"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","names":[],"sources":["./src/components/overflow-nav/overflow-nav.scss?tag=nano-overflow-nav&encapsulation=shadow","./src/components/overflow-nav/overflow-nav.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /*\n @prop --indicator-transition: Defaults to #{$transition-fast}\n * @prop --indicator-color: Defaults to #{map.get($colors, lightblue)};\n * @prop --indicator-size: Defaults to 0;\n * @prop --indicator-track-color: Defaults to #{map.get($colors, lightgrey)};\n * @prop --indicator-track-size: Defaults to var(--indicator-size);\n\n * @prop --scroll-btn-color: Defaults to 'currentColor';\n * @prop --fade-size: The size of the fade areas (when items do not fit). Defaults to 1.75rem;\n * @prop --fade-transparency: Defaults to 0;\n \n @prop --padding: Padding that matches the fade size will stop items shifting if fade areas are added (i.e when items do not fit). Defaults to var(--fade-size);\n /\n\n --indicator-transition: #{$transition-fast};\n --indicator-color: #{map.get($colors, lightblue)};\n --indicator-size: 0;\n --indicator-track-color: #{map.get($colors, lightgrey)};\n --indicator-track-size: var(--indicator-size);\n --scroll-btn-color: 'currentColor';\n --fade-size: 1.75rem;\n --fade-transparency: 0;\n --padding: var(--fade-size);\n\n position: relative;\n z-index: #{$layer-index-raised};\n}\n\n:host([orientation=\"horizontal\"]) {\n display: block;\n}\n\n:host([orientation=\"vertical\"]) {\n display: flex;\n}\n\n.onav {\n $root: &;\n\n &--no-transitions {\n transition-duration: 0s !important;\n }\n\n &__scroller {\n @include hide-scrollbar();\n\n display: flex;\n transition: #{$transition-medium} ease;\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');\n mask-size: calc(100% + calc(var(--fade-size) * 4));\n mask-position: calc(var(--fade-size) * -2);\n\n &::after {\n content: ' ';\n line-height: 1;\n flex: 0 0 auto;\n display: block;\n }\n\n #{$root}--has-scroll-controls-start & {\n mask-position: 0;\n mask-size: calc(100% + (var(--fade-size) * 2));\n }\n\n #{$root}--has-scroll-controls-end & {\n mask-position: calc(var(--fade-size) * -1);\n mask-size: calc(100% + var(--fade-size));\n }\n\n #{$root}--has-scroll-controls-start#{$root}--has-scroll-controls-end & {\n mask-size: 100%;\n mask-position: 0;\n }\n }\n\n &__items {\n flex: 1 1 auto;\n position: relative;\n width: auto;\n flex-wrap: nowrap;\n display: flex;\n\n &::before {\n content: '';\n background: var(--indicator-track-color);\n display: block;\n position: absolute;\n z-index: 1;\n }\n }\n\n &__active-indicator {\n position: absolute;\n z-index: 10;\n transition:\n var(--indicator-transition) transform ease,\n var(--indicator-transition) width ease,\n var(--indicator-transition) height ease;\n }\n\n nano-icon-button.onav__scroll-button {\n --nano-color-base: var(--scroll-btn-color);\n\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n border: unset;\n z-index: 2;\n transition: #{$transition-fast} ease opacity;\n opacity: 0;\n color: var(--scroll-btn-color);\n pointer-events: none;\n\n &:focus {\n outline: none;\n }\n\n &.is-shown {\n opacity: 1;\n pointer-events: all;\n }\n\n &:focus-visible {\n box-shadow: #{$control-focus-style} inset;\n }\n }\n\n ///////////// HORIZONTAL ///////////////\n\n &--horizontal {\n\n #{$root}__scroller {\n overflow-x: auto;\n overflow-y: hidden;\n mask-repeat: no-repeat;\n padding-inline: var(--padding);\n mask-image:\n linear-gradient(\n to left,\n rgb(0 0 0 / var(--fade-transparency)) 0,\n rgb(0 0 0 / var(--fade-transparency)) var(--fade-size),\n rgb(0 0 0 / 100%) calc(var(--fade-size) * 2),\n rgb(0 0 0 / 100%) calc(100% - (var(--fade-size) * 2)),\n rgb(0 0 0 / var(--fade-transparency))\n calc(100% - var(--fade-size)),\n rgb(0 0 0 / var(--fade-transparency))\n );\n\n &::after {\n padding-inline: 0 var(--fade-size);\n padding-block: 0 0;\n }\n }\n\n &#{$root}--has-scroll-controls #{$root}__scroller {\n padding-inline: var(--fade-size) 0;\n padding-block-start: 0;\n padding-block-end: 0;\n }\n\n #{$root}__items {\n flex-direction: row;\n\n &::before {\n content: '';\n width: 100%;\n height: var(--indicator-track-size);\n inset-block-end: 0;\n }\n }\n\n #{$root}__active-indicator {\n inset-block-end: 0;\n border-block-end: solid var(--indicator-size) var(--indicator-color);\n }\n\n #{$root}__scroll-button {\n inset-block: 0;\n\n &--start {\n inset-inline-start: 0;\n }\n\n &--end {\n inset-inline-end: 0;\n }\n }\n }\n\n ///////////// VERTICAL ///////////////\n\n &--vertical {\n width: 100%;\n\n #{$root}__nav {\n max-height: 100%;\n display: flex;\n }\n\n #{$root}__scroller {\n width: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n flex-direction: column;\n mask-repeat: no-repeat;\n padding-block: var(--padding);\n mask-image:\n linear-gradient(\n to top,\n rgb(0 0 0 / var(--fade-transparency)) 0,\n rgb(0 0 0 / var(--fade-transparency)) var(--fade-size),\n rgb(0 0 0 / 100%) calc(var(--fade-size) * 2),\n rgb(0 0 0 / 100%) calc(100% - (var(--fade-size) * 2)),\n rgb(0 0 0 / var(--fade-transparency))\n calc(100% - var(--fade-size)),\n rgb(0 0 0 / var(--fade-transparency))\n );\n padding-inline: 0 0;\n padding-block-start: calc(var(--fade-size) + 12px);\n padding-block-end: var(--fade-size);\n\n &::after {\n padding-inline: 0 0;\n padding-block: 0 var(--fade-size);\n }\n }\n\n #{$root}__items {\n flex-direction: column;\n width: fit-content;\n\n &::before {\n content: '';\n height: 100%;\n width: var(--indicator-track-size);\n inset-inline-start: 0;\n }\n }\n\n #{$root}__active-indicator {\n inset-inline-start: 0;\n border-inline-start: solid var(--indicator-size) var(--indicator-color);\n }\n\n #{$root}__scroll-button {\n inset-inline: 0;\n\n &--start {\n inset-block-start: 0;\n }\n\n &--end {\n inset-block-end: 0;\n }\n }\n }\n}\n","import {\n Component,\n ComponentInterface,\n Host,\n h,\n Element,\n Prop,\n Watch,\n State,\n Method,\n} from '@stencil/core';\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\n\n/*\n Primarily used to display navigational items that may not fit on smaller screens.\n \n - Accepts any collection of elements\n * - Gives visual cues of 'more' with auto display fade effect and scroll buttons\n * - Auto scrolls to the active item onload\n \n @slot - Default slot to place items.\n \n @part base - root, wrapper element\n * @part scroller - the scrolling element\n * @part items - the item wrapper element\n * @part indicator - the animated, indicator element\n * @part scroll-button - The buttons shown at either side of the scrolling area\n * @part scroll-button-prev - The button shown at the start of the scrolling area\n * @part scroll-button-next - The button shown at the end of the scrolling area\n /\n\n@Component({\n tag: 'nano-overflow-nav',\n styleUrl: 'overflow-nav.scss',\n shadow: true,\n})\nexport class OverflowNav implements ComponentInterface {\n // public surface\n\n /* Disables the scroll arrow buttons that appear when content overflows /\n @Prop() scrollControls = true;\n\n /* The flex direction of the element /\n @Prop({ reflect: true }) orientation: 'horizontal' \| 'vertical' =\n 'horizontal';\n\n /\n A function called when an item becomes 'active' (via click or keyboard)\n * @param item - html element currently being assessed\n * @param _index - the index of the html element currently being assessed\n * @returns void /\n @Prop() activeHandler = (item: HTMLElement, _index: number) =>\n item.classList.add('active');\n\n /\n A function called when an item becomes 'inactive'\n * (because another item was made active)\n * @param item - html element currently being assessed\n * @param _index - the index of the html element currently being assessed\n * @returns void /\n @Prop() inActiveHandler = (item: HTMLElement, _index: number) =>\n item.classList.remove('active');\n\n /\n A function called to assess an initial, active item\n * @param item - html element currently being assessed\n * @param _index - the index of the html element currently being assessed\n * @returns void /\n @Prop() isActiveHandler = (item: HTMLElement, _index: number) =>\n item.classList.contains('active');\n\n @Watch('isActiveHandler')\n watchIsActiveHandler() {\n this.instantReCalc = true;\n this.activeItem = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n setTimeout(() => (this.instantReCalc = false), 300);\n }\n\n /\n Sync up the view to the active item.\n * Use this when the active item changes outside of this component.\n /\n @Method()\n async syncActiveItem() {\n this.activeItem = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n }\n\n // private state\n\n constructor() {\n this.recalculatePositions = debounce(\n this.recalculatePositions.bind(this),\n 80\n );\n }\n\n private ro?: ResizeObserver;\n private nav?: HTMLElement;\n private itemContainer?: HTMLElement;\n private isRtl?: boolean;\n private endBtn: HTMLNanoIconButtonElement;\n private startBtn: HTMLNanoIconButtonElement;\n private activeIndicator: HTMLElement;\n private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n get scrollProp() {\n return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';\n }\n\n get clientDimProp() {\n return this.orientation === 'horizontal' ? 'clientWidth' : 'clientHeight';\n }\n\n get scrollOffset() {\n return this.orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop';\n }\n\n @Element() host: HTMLNanoOverflowNavElement;\n\n @State() instantReCalc = false;\n @State() hasScrollControls = false;\n\n @Watch('hasScrollControls')\n watchScrollControls() {\n if (this.hasScrollControls) this.handleScroll();\n else this.hideControlStart = this.hideControlEnd = true;\n }\n\n @State() hideControlEnd = true;\n\n @Watch('hideControlEnd')\n hideEndBtn() {\n if (!this.endBtn) return;\n this.activateBtn(this.endBtn, !this.hideControlEnd);\n }\n\n @State() hideControlStart = true;\n\n @Watch('hideControlStart')\n hideStartBtn() {\n if (!this.startBtn) return;\n this.activateBtn(this.startBtn, !this.hideControlStart);\n }\n\n // private logic\n\n private activateBtn(btn: HTMLNanoIconButtonElement, activate = true) {\n if (!activate) {\n btn.tabIndex = -1;\n btn.disabled = true;\n btn.classList.remove('is-shown');\n return;\n }\n btn.tabIndex = 0;\n btn.disabled = false;\n btn.classList.add('is-shown');\n }\n\n get allActiveItems() {\n return this.allItems.filter(\n (el: any) => !el.disabled \|\| el.classList.contains('disabled')\n );\n }\n\n get allItems() {\n return getDirectChildren<HTMLElement>(this.host, '', true);\n }\n\n get activeItem() {\n return this._activeItem;\n }\n\n set activeItem(item: HTMLElement) {\n if (\n !item \|\|\n item === this.activeItem \|\|\n (item as any).disabled \|\|\n !this.allActiveItems.includes(item)\n ) {\n return;\n }\n\n this._activeItem = item;\n this.allActiveItems.forEach((el, i) => {\n if (el === this._activeItem) this.activeHandler(el, i);\n else this.inActiveHandler(el, i);\n });\n\n this.recalculatePositions();\n }\n private _activeItem: HTMLElement;\n\n get navDim() {\n if (!this.nav) return 0;\n\n const computedStyle = getComputedStyle(this.nav);\n let clientDim = this.nav[this.clientDimProp];\n\n if (this.orientation === 'horizontal') {\n return (clientDim -=\n parseFloat(computedStyle.paddingLeft) +\n parseFloat(computedStyle.paddingRight));\n } else {\n return (clientDim -=\n parseFloat(computedStyle.paddingTop) +\n parseFloat(computedStyle.paddingBottom));\n }\n }\n\n private scrollToActiveItem() {\n if (!this.nav \|\| !this.activeItem) return;\n setTimeout(() => {\n this.activeItem.scrollIntoView({\n behavior: this.instantReCalc ? 'auto' : 'smooth',\n block: 'center',\n inline: 'center',\n });\n }, 100);\n }\n\n private syncActiveItemIndicator() {\n if (!this.activeItem) return;\n\n const item = this.activeItem;\n const width = item.clientWidth \|\| 0;\n const height = item.clientHeight + 2 \|\| 0;\n const offset = getOffset(item, this.itemContainer);\n\n if (!this.activeIndicator) return;\n\n const offsetTop = offset.top;\n const offsetLeft = offset.left;\n\n if (this.instantReCalc) this.activeIndicator.style.transition = 'none';\n\n switch (this.orientation) {\n case 'horizontal':\n this.activeIndicator.style.width = `${width}px`;\n this.activeIndicator.style.height = null;\n this.activeIndicator.style.transform = `translateX(${offsetLeft}px)`;\n break;\n\n case 'vertical':\n this.activeIndicator.style.width = null;\n this.activeIndicator.style.height = `${height}px`;\n this.activeIndicator.style.transform = `translateY(${offsetTop}px)`;\n break;\n }\n setTimeout(() => (this.activeIndicator.style.transition = null), 400);\n }\n\n private updateScrollControls = () => {\n if (!this.nav) return;\n\n this.hasScrollControls =\n this.nav[this.scrollProp] > this.nav[this.clientDimProp] &&\n this.nav[this.scrollProp] > this.itemContainer[this.clientDimProp];\n this.handleScroll();\n };\n\n private handleScroll = () => {\n if (!this.hasScrollControls) {\n this.hideControlStart = this.hideControlEnd = true;\n return;\n }\n const finishEnd = this.isRtl\n ? this.nav[this.scrollOffset] === 0\n : Math.abs(\n this.nav[this.clientDimProp] -\n (this.nav[this.scrollProp] - this.nav[this.scrollOffset])\n ) < 2;\n\n const finishStart = this.isRtl\n ? Math.abs(\n this.nav[this.scrollProp] +\n this.nav[this.scrollOffset] -\n this.nav[this.clientDimProp]\n ) < 2\n : this.nav[this.scrollOffset] === 0;\n\n if (finishStart) {\n this.hideControlStart = true;\n this.hideControlEnd = false;\n } else if (finishEnd) {\n this.hideControlStart = false;\n this.hideControlEnd = true;\n } else {\n this.hideControlEnd = false;\n this.hideControlStart = false;\n }\n };\n\n private handleBtnClick = (goEnd: boolean = false) => {\n const navDim = this.navDim;\n let scrollAmt;\n if (goEnd) scrollAmt = this.nav[this.scrollOffset] + navDim - 20;\n else scrollAmt = this.nav[this.scrollOffset] - navDim + 20;\n\n try {\n this.nav.scroll({\n left: this.orientation === 'horizontal' ? scrollAmt : 0,\n top: this.orientation === 'vertical' ? scrollAmt : 0,\n behavior: 'smooth',\n });\n } catch (e) {\n this.nav[this.scrollOffset] = scrollAmt;\n }\n };\n\n private slotChangeHandler = () => {\n if (this.allActiveItems.length < 2) return;\n const item = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n if (item) this.activeItem = item;\n this.recalculatePositions();\n\n /** maintain a weakmap of mutation observers to maintain item / indicator position on all changes. */\n this.allActiveItems.forEach((item) => {\n if (this.mutationObservers.get(item)) return;\n\n const mo = new MutationObserver(() => this.syncActiveItemIndicator());\n mo.observe(item, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n\n this.mutationObservers.set(item, mo);\n });\n };\n\n private handleClick = (event: MouseEvent) => {\n if (this.allActiveItems.length < 2) return;\n const foundItem = event\n .composedPath()\n .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n if (foundItem) this.activeItem = foundItem;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n const foundItem = event\n .composedPath()\n .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n if (foundItem) this.activeItem = foundItem;\n }\n };\n\n private recalculatePositions = () => {\n this.updateScrollControls();\n this.syncActiveItemIndicator();\n this.scrollToActiveItem();\n };\n\n // lifecycle\n\n connectedCallback(): void {\n this.instantReCalc = true;\n this.isRtl =\n this.orientation === 'horizontal' && !!this.host.closest('[dir=\"rtl\"]');\n\n if (window['MutationObserver']) this.slotChangeHandler();\n\n if (!window['ResizeObserver']) return;\n\n if (this.ro) {\n this.ro.disconnect();\n this.ro = undefined;\n }\n const mo = (this.ro = new ResizeObserver(this.recalculatePositions));\n mo.observe(this.host);\n }\n\n componentDidLoad(): void {\n this.activeItem = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n this.instantReCalc = false;\n }\n\n disconnectedCallback(): void {\n if (this.ro) {\n this.ro.disconnect();\n this.ro = undefined;\n }\n }\n\n render() {\n return (\n <Host dir={this.isRtl ? 'rtl' : null}>\n <div\n part=\"base\"\n class={{\n onav: true,\n [`onav--${this.orientation}`]: true,\n 'onav--has-scroll-controls': this.hasScrollControls,\n 'onav--has-scroll-controls-start': !this.hideControlStart,\n 'onav--has-scroll-controls-end': !this.hideControlEnd,\n 'onav--no-transitions': this.instantReCalc,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"onav__nav\">\n {this.scrollControls && (\n <nano-icon-button\n part=\"scroll-button scroll-button-prev\"\n class={{\n 'onav__scroll-button': true,\n 'onav__scroll-button--start': true,\n }}\n ref={(btn) => (this.startBtn = btn)}\n onClick={() => this.handleBtnClick(false)}\n label=\"Click to scroll\"\n iconName={\n this.orientation === 'horizontal'\n ? 'light/chevron-left'\n : 'light/chevron-up'\n }\n />\n )}\n\n <div\n part=\"scroller\"\n ref={(el) => (this.nav = el)}\n class=\"onav__scroller\"\n onScroll={this.handleScroll}\n >\n <div\n part=\"items\"\n ref={(el) => (this.itemContainer = el)}\n class=\"onav__items\"\n >\n <div\n part=\"indicator\"\n ref={(el) => (this.activeIndicator = el)}\n class=\"onav__active-indicator\"\n />\n <slot onSlotchange={this.slotChangeHandler} />\n </div>\n </div>\n\n {this.scrollControls && (\n <nano-icon-button\n part=\"scroll-button scroll-button-next\"\n class={{\n 'onav__scroll-button': true,\n 'onav__scroll-button--end': true,\n }}\n ref={(btn) => (this.endBtn = btn)}\n onClick={() => this.handleBtnClick(true)}\n label=\"Click to scroll\"\n iconName={\n this.orientation === 'horizontal'\n ? 'light/chevron-right'\n : 'light/chevron-down'\n }\n />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/{nano-table-75d755ae.js → nano-table-fda0efef.js} RENAMED Viewed

@@ -110,7 +110,7 @@ const createWorkerProxy = (worker, workerMsgId, exportedMethod) => (
   })
 );
-const workerPromise = import('./table.worker-d60d6df4.js').then(m => m.worker);
+const workerPromise = import('./table.worker-2fd6f263.js').then(m => m.worker);
 const createWorkerStore = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'createWorkerStore');
 const syncConfigToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncConfigToWorker');
 const syncDataToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncDataToWorker');
@@ -1486,4 +1486,4 @@ Table.style = tableCss;
 export { Table as T, createWorker as c };
-//# sourceMappingURL=nano-table-75d755ae.js.map
+//# sourceMappingURL=nano-table-fda0efef.js.map