@nanoporetech-digital/components 4.5.1 → 4.5.3

package/dist/esm/nano-table.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-export { T as nano_table } from './nano-table-94a6e169.js';
+export { T as nano_table } from './nano-table-7d22e310.js';
 import './index-dad5627b.js';
 import './math-c02ddfda.js';
 import './throttle-7836544e.js';

package/dist/esm/{table.worker-5d3c7463.js → table.worker-55bb0326.js}

@@ -1,7 +1,7 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { c as createWorker } from './nano-table-94a6e169.js';
+import { c as createWorker } from './nano-table-7d22e310.js';
 import './index-dad5627b.js';
 import './math-c02ddfda.js';
 import './throttle-7836544e.js';
@@ -17,4 +17,4 @@ URL.revokeObjectURL(url);
 
 export { worker, workerMsgId, workerName, workerPath };
 
-//# sourceMappingURL=table.worker-5d3c7463.js.map
+//# sourceMappingURL=table.worker-55bb0326.js.map

package/dist/esm/table.worker-55bb0326.js.map

@@ -0,0 +1 @@
+{"file":"table.worker-55bb0326.js","mappings":";;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/nano-assets/hash.txt

@@ -1 +1 @@
-OphJIgULT5VnrV8QPtqGr0JyWfc=
+LvS4dQF3RorvenLeXKKWA8roQYA=

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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{p as e,H as a,b as o}from"./p-f6a8467a.js";export{s as setNonce}from"./p-f6a8467a.js";import"./p-d4f6ec9f.js";const n=()=>{{t(a.prototype)}const o=import.meta.url;const n={};if(o!==""){n.resourcesUrl=new URL(".",o).href}return e(n)};const t=e=>{const a=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return a.call(this,e)}const o=a.call(this,false);const n=this.childNodes;if(e){for(let e=0;e<n.length;e++){if(n[e].nodeType!==2){o.appendChild(n[e].cloneNode(true))}}}return o}};n().then((e=>o(JSON.parse('[["p-95651bcb",[[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],"thresholdReady":[32],"remoteDataReady":[32],"ready":[32],"isResizing":[32],"intersectRatio":[32],"threshold":[32],"modalOpen":[32],"modalIsOpen":[32],"searchBarShown":[32],"scrollingUp":[32],"showAutocomplete":[32],"secondaryMenuOpen":[32],"userMenuOpen":[32],"menuFullScreen":[32],"searchLoading":[32],"searchValInternal":[32],"internalSearchIndeces":[32],"submitSearch":[64],"toggleOverflowMenu":[64]},[[0,"nanoOpen","secondaryOpen"],[0,"nanoClose","secondaryClose"],[16,"click","menuClose"]]]]],["p-b38cabe2",[[1,"nano-demo"]]],["p-107d4549",[[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]}]]],["p-fecb72b9",[[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]}]]],["p-27eb26ef",[[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]}]]],["p-125d4ca8",[[1,"nano-alert",{"open":[1540],"closable":[516],"color":[513],"duration":[2],"hoist":[4],"isModal":[32],"isToast":[32],"isShowing":[32],"label":[32],"show":[64],"hide":[64],"toast":[64],"alert":[64]}]]],["p-e43f76c8",[[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"]]]]],["p-3a761d77",[[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]}]]],["p-a761ac89",[[1,"nano-tab",{"panel":[513],"active":[516],"disabled":[516],"closable":[4],"setFocus":[64],"removeFocus":[64]}]]],["p-30d55046",[[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"]]]]],["p-5d466a58",[[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"]]]]],["p-068bdd89",[[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]}]]],["p-a5a560e7",[[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"]]]]],["p-207a1fbc",[[1,"nano-accordion",{"color":[1],"itemOpened":[32]},[[0,"nanoOpened","onToggleHandler"],[0,"nanoClosed","onClosedHandler"]]]]],["p-935aef3d",[[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"]]]]],["p-1c6c94cb",[[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"]]]]],["p-93cfbdb6",[[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]}]]],["p-288dbe6b",[[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]}]]],["p-fe7a0158",[[1,"nano-aspect-ratio",{"aspectRatio":[1,"aspect-ratio"],"fit":[1]}]]],["p-119d8899",[[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"]]]]],["p-0d1ca590",[[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"]]]]],["p-76a650b1",[[1,"nano-details",{"label":[1],"open":[1540],"noHandle":[4,"no-handle"],"iconRotation":[2,"icon-rotation"],"color":[1],"isLoading":[32]}]]],["p-b6306aff",[[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]}]]],["p-357a0a3f",[[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]},[[0,"nanoChange","handleFieldChange"],[0,"input","handlePlainFieldChange"],[0,"change","handlePlainFieldChange"],[0,"submit","handleSubmit"]]]]],["p-d792f692",[[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]}]]],["p-57085052",[[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]}]]],["p-cd2f5e97",[[1,"nano-slide",{"ready":[1540]}]]],["p-db370094",[[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]}]]],["p-cba50c3e",[[1,"nano-tab-content",{"name":[513],"active":[516],"ready":[32]}]]],["p-68928c59",[[1,"nano-spinner",{"type":[1],"overlay":[516],"hasText":[32]}]]],["p-6b232629",[[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]}]]],["p-a1c0afb6",[[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"]]]]],["p-173cc842",[[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]}]]],["p-5984ae16",[[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]}]]],["p-7304107c",[[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"]]]]],["p-20038e9c",[[1,"nano-progress-bar",{"value":[2],"indeterminate":[4],"showPercent":[4,"show-percent"]}]]],["p-7d6065c6",[[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]}]]],["p-578f5e8d",[[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"]]]]],["p-2ad0d9a3",[[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"]]]]],["p-0c077605",[[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"]]]]],["p-15217442",[[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]}]]],["p-239d343a",[[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]}]]],["p-25cb3889",[[2,"nano-icon-button",{"iconName":[1,"icon-name"],"iconSrc":[1,"icon-src"],"type":[513],"name":[513],"value":[513],"label":[1],"showTooltip":[4,"show-tooltip"],"disabled":[516],"href":[1],"target":[1],"setFocus":[64]}],[1,"nano-tooltip",{"content":[1],"placement":[1],"disabled":[4],"distance":[2],"open":[1540],"skidding":[2],"hoist":[4],"trigger":[1],"show":[64],"hide":[64]}]]]]'),e)));
+import{p as e,H as a,b as o}from"./p-f6a8467a.js";export{s as setNonce}from"./p-f6a8467a.js";import"./p-d4f6ec9f.js";const n=()=>{{t(a.prototype)}const o=import.meta.url;const n={};if(o!==""){n.resourcesUrl=new URL(".",o).href}return e(n)};const t=e=>{const a=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return a.call(this,e)}const o=a.call(this,false);const n=this.childNodes;if(e){for(let e=0;e<n.length;e++){if(n[e].nodeType!==2){o.appendChild(n[e].cloneNode(true))}}}return o}};n().then((e=>o(JSON.parse('[["p-d5b63150",[[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],"thresholdReady":[32],"remoteDataReady":[32],"ready":[32],"isResizing":[32],"intersectRatio":[32],"threshold":[32],"modalOpen":[32],"modalIsOpen":[32],"searchBarShown":[32],"scrollingUp":[32],"showAutocomplete":[32],"secondaryMenuOpen":[32],"userMenuOpen":[32],"menuFullScreen":[32],"searchLoading":[32],"searchValInternal":[32],"internalSearchIndeces":[32],"submitSearch":[64],"toggleOverflowMenu":[64]},[[0,"nanoOpen","secondaryOpen"],[0,"nanoClose","secondaryClose"],[16,"click","menuClose"]]]]],["p-b38cabe2",[[1,"nano-demo"]]],["p-107d4549",[[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]}]]],["p-fecb72b9",[[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]}]]],["p-27eb26ef",[[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]}]]],["p-dc2c37d5",[[1,"nano-alert",{"open":[1540],"closable":[516],"color":[513],"duration":[2],"hoist":[4],"isModal":[32],"isToast":[32],"isShowing":[32],"label":[32],"show":[64],"hide":[64],"toast":[64],"alert":[64]}]]],["p-7ed03b91",[[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"]]]]],["p-3a761d77",[[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]}]]],["p-a761ac89",[[1,"nano-tab",{"panel":[513],"active":[516],"disabled":[516],"closable":[4],"setFocus":[64],"removeFocus":[64]}]]],["p-30d55046",[[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"]]]]],["p-5d466a58",[[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"]]]]],["p-068bdd89",[[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]}]]],["p-a5a560e7",[[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"]]]]],["p-207a1fbc",[[1,"nano-accordion",{"color":[1],"itemOpened":[32]},[[0,"nanoOpened","onToggleHandler"],[0,"nanoClosed","onClosedHandler"]]]]],["p-935aef3d",[[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"]]]]],["p-1c6c94cb",[[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"]]]]],["p-93cfbdb6",[[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]}]]],["p-288dbe6b",[[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]}]]],["p-fe7a0158",[[1,"nano-aspect-ratio",{"aspectRatio":[1,"aspect-ratio"],"fit":[1]}]]],["p-20383b2e",[[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"]]]]],["p-2d43a82b",[[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"]]]]],["p-76a650b1",[[1,"nano-details",{"label":[1],"open":[1540],"noHandle":[4,"no-handle"],"iconRotation":[2,"icon-rotation"],"color":[1],"isLoading":[32]}]]],["p-b6306aff",[[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]}]]],["p-357a0a3f",[[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]},[[0,"nanoChange","handleFieldChange"],[0,"input","handlePlainFieldChange"],[0,"change","handlePlainFieldChange"],[0,"submit","handleSubmit"]]]]],["p-d792f692",[[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]}]]],["p-57085052",[[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]}]]],["p-cd2f5e97",[[1,"nano-slide",{"ready":[1540]}]]],["p-db370094",[[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]}]]],["p-cba50c3e",[[1,"nano-tab-content",{"name":[513],"active":[516],"ready":[32]}]]],["p-68928c59",[[1,"nano-spinner",{"type":[1],"overlay":[516],"hasText":[32]}]]],["p-27b5e10c",[[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]}]]],["p-a1c0afb6",[[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"]]]]],["p-173cc842",[[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]}]]],["p-5984ae16",[[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]}]]],["p-7304107c",[[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"]]]]],["p-20038e9c",[[1,"nano-progress-bar",{"value":[2],"indeterminate":[4],"showPercent":[4,"show-percent"]}]]],["p-7d6065c6",[[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]}]]],["p-578f5e8d",[[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"]]]]],["p-2ad0d9a3",[[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"]]]]],["p-0c077605",[[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"]]]]],["p-15217442",[[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]}]]],["p-239d343a",[[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]}]]],["p-691c4268",[[2,"nano-icon-button",{"iconName":[1,"icon-name"],"iconSrc":[1,"icon-src"],"type":[513],"name":[513],"value":[513],"label":[1],"showTooltip":[4,"show-tooltip"],"disabled":[516],"href":[1],"target":[1],"setFocus":[64]}],[1,"nano-tooltip",{"content":[1],"placement":[1],"disabled":[4],"distance":[2],"open":[1540],"skidding":[2],"hoist":[4],"trigger":[1],"show":[64],"hide":[64]}]]]]'),e)));
 //# sourceMappingURL=nano-components.esm.js.map

package/dist/nano-components/{p-119d8899.entry.js → p-20383b2e.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as n,c,h as e,a as o,g as a}from"./p-f6a8467a.js";import{f as s}from"./p-f8f89998.js";import{c as i}from"./p-411bb8f1.js";const r='.sc-nano-checkbox-h{box-sizing:border-box}*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}.sc-nano-checkbox-h{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--invalid-shadow:0 0 0 0.1875rem  #ef4135;--padding:initial;--check-bg-color:#fff;--check-border-color:#b5aea7;--check-border-size:1px;--check-border-style:var(--check-border-size) solid var(--check-border-color);--check-checked-bg-color:#455556;--check-checked-border-color:#455556;--check-checked-higlight-color:#fff;--check-base-size:inherit;--label-spacing:10px 0;--tagbox-rgb:144 198 231;--tagbox-border-color:rgb(var(--tagbox-rgb) / 50%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 20%);--tagbox-border-radius:0;--segment-color:#007495;--segment-border-radius:3px;--segment-shadow:0 1px 4px rgb(0 0 0 / 20%);--cb-border-radius:2px;--radio-border-radius:50%;--switch-inactive-color:rgb(181 174 167 / 70%);--switch-active-color:#007495;display:inline-block;max-width:100%}.sc-nano-checkbox-h *.sc-nano-checkbox{box-sizing:inherit}[type=tag].sc-nano-checkbox-h{text-transform:uppercase;--control-padding:0.2rem 1rem}[type=radio][checked].sc-nano-checkbox-h:not([checked=false]){--check-border-size:0.3125em}[type=segment].sc-nano-checkbox-h{--check-border-style:none;--control-padding:0.7em 1em 0.7em 1em}[type=segment-pill].sc-nano-checkbox-h{--check-border-color:rgba(181, 174, 167, 0.5);--segment-border-radius:5px;--control-padding:0.7em 1em 0.7em 1em}.nano-color.sc-nano-checkbox-h{--tagbox-rgb:var(--nano-color-base-rgb);--focus-shadow:0 0 0 0.1875rem var(--nano-color-shade)}[checked].sc-nano-checkbox-h:not([checked=false]){--tagbox-border-color:rgb(var(--tagbox-rgb) / 80%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 50%)}[has-focus].sc-nano-checkbox-h:not([has-focus=false]){--cb-border-radius:5px}[disabled].sc-nano-checkbox-h:not([disabled=false]){opacity:0.7;--tagbox-rgb:104 117 118;--check-bg-color:rgba(104, 117, 118, 0.5);--check-checked-bg-color:rgba(104, 117, 118, 0.5);--segment-color:#455556}.nanocb.sc-nano-checkbox{padding:var(--padding);cursor:pointer;display:flex;align-items:center;line-height:1.2;position:relative}.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius, 3px);font-size:var(--check-base-size);position:relative;height:1.5em;width:1.5em;min-width:1.5em;border:var(--check-border-style);box-shadow:0 1px 4px rgba(0, 0, 0, 0.2)}.nanocb__input.sc-nano-checkbox::before{border-radius:var(--cb-border-radius);position:absolute;content:"";inset-inline-start:calc(0.725em - var(--check-border-size));inset-block-start:calc(0.725em - var(--check-border-size));width:0;height:0;border:2px solid var(--check-checked-higlight-color);transform:scale(0)}.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox{background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox::after{border-radius:var(--cb-border-radius);position:absolute;content:"";inset-inline-start:calc(0.825em - var(--check-border-size));inset-block-start:calc(0.825em - var(--check-border-size));height:0;width:0;border:solid var(--check-checked-higlight-color);border-width:0 0.1875em 0.1875em 0;transform:rotate(0deg) scale(0);opacity:1;transition:all 0.15s ease-out}.nanocb--indeterminate.sc-nano-checkbox .nanocb__input--checkbox.sc-nano-checkbox::after{border-width:0 0 0.1875em}.nanocb__input--switch.sc-nano-checkbox{border-radius:1em !important;width:2.4em;height:1.3em;background:var(--switch-inactive-color)}[type=switch].sc-nano-checkbox-h:not([disabled]) .nanocb__input--switch.sc-nano-checkbox:hover::after{scale:1.1 1}.nanocb__input--switch.sc-nano-checkbox::after{position:relative;content:"";display:block;border-radius:inherit;height:80%;width:40%;background:var(--check-checked-higlight-color);transform-origin:left;inset-inline-start:6%;inset-block-start:10%;transition:0.1s ease scale, 0.15s ease left}.nanocb__input--segment.sc-nano-checkbox,.nanocb__input--segment-pill.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--segment.sc-nano-checkbox::before,.nanocb__input--segment-pill.sc-nano-checkbox::before{display:none}.nanocb__input--tag.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--tag.sc-nano-checkbox::before{display:none}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow)}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--invalid-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus~.nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow)}.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--focus-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border-color:var(--check-checked-border-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{color:var(--check-checked-higlight-color);background-color:var(--check-checked-bg-color);box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-checked-higlight-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::after{border:solid var(--check-checked-border-color);border-width:0 0.125em 0.125em 0;opacity:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::before{border-radius:var(--radio-border-radius)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:rotate(45deg) scale(1);opacity:1;inset-inline-start:calc(0.575em - var(--check-border-size));inset-block-start:calc(0.2875em - var(--check-border-size));width:0.375em;height:0.75em;border-radius:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox::after{transform:rotate(45deg)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--switch.sc-nano-checkbox{background:var(--switch-active-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--switch.sc-nano-checkbox::after{inset-inline-start:56%;transform-origin:right}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox{border-radius:var(--input-border-radius, 5px);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-bg-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:scale(1);opacity:1;inset-inline-start:0.3125em;inset-block-start:0;width:0.7em;height:0.7em;border-radius:0}.nanocb__label.sc-nano-checkbox{padding-inline:var(--label-spacing);padding-block:0;display:flex;align-items:center;font-stretch:condensed;line-height:1;flex:1;justify-content:space-between}.nanocb__label--segment.sc-nano-checkbox,.nanocb__label--segment-pill.sc-nano-checkbox{border:var(--check-border-style);border-radius:var(--segment-border-radius);box-shadow:var(--segment-shadow);display:inline-flex;padding:var(--control-padding);background:var(--check-bg-color);color:var(--segment-color);align-items:center;width:100%}.sc-nano-checkbox-h:first-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:var(--segment-border-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--segment-border-radius);-webkit-border-end:none;border-inline-end:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0;-webkit-border-end:none;border-inline-end:none}.sc-nano-checkbox-h:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:0;border-start-end-radius:var(--segment-border-radius);border-end-end-radius:var(--segment-border-radius);border-end-start-radius:0}.sc-nano-checkbox-h:first-of-type:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius);border:var(--check-border-style)}.nanocb__label--tag.sc-nano-checkbox{letter-spacing:2px;font-weight:500;font-size:0.65em;line-height:1.4;padding:var(--control-padding);border:2px solid #b5aea7;border-color:var(--tagbox-border-color);background-color:var(--tagbox-bg-color);transition:all 0.2s;border-radius:var(--cb-border-radius);width:100%}.nanocb__label--tag.sc-nano-checkbox::after{content:"+";margin-inline:0.3125em 0;margin-block:0;font-weight:200;position:relative;font-family:inherit;font-size:1.8em;display:inline-block;transform:rotate(0deg);transform-origin:center}.nanocb__label--tag.sc-nano-checkbox span.sc-nano-checkbox{display:block}';let t=0;const b=class{constructor(e){n(this,e);this.nanoChange=c(this,"nanoChange",7);this.nanoFocus=c(this,"nanoFocus",7);this.nanoBlur=c(this,"nanoBlur",7);this.inputId=`nano-cb-${t++}`;this.handleInvalid=n=>{this._invalid=!n.target.validity.valid};this.handleChange=n=>{this.checked=n.target.checked;this.indeterminate=false};this.handleFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.handleBlur=()=>{this.hasFocus=false;this.nanoBlur.emit()};this.inputType="checkbox";this.hasFocus=false;this.checked=false;this.disabled=false;this.value="on";this.name=undefined;this.required=false;this.type="checkbox";this.label=undefined;this.indeterminate=false;this._invalid=false;this.color=undefined;this.form=undefined}async handleCheckedChange(){this.input.checked=this.checked;if(this.inputType==="radio"&&this.name&&this.checked){const n=this.host.closest("form");let c;if(n){c=Array.from(n.querySelectorAll(`nano-checkbox[name="${this.name}"]`))}else{c=Array.from(document.querySelectorAll(`nano-checkbox[name="${this.name}"]`)).filter((n=>!n.closest("form")))}c.map((n=>{if(n!==this.host)n.checked=false}))}this.nanoChange.emit({value:this.value,checked:this.checked})}typeChange(){if(["checkbox","switch","tag"].includes(this.type))this.inputType="checkbox";else this.inputType="radio"}handleIndeterminateChange(){this.checked=false;this.input.indeterminate=this.indeterminate}get invalid(){return this._invalid}get validityMessage(){if(!this.input)return"";return this.input.validationMessage}async getInputElement(){if(this.input)return this.input}async reportValidity(n=false){if(n)this.input.reportValidity();this._invalid=!this.input.validity.valid;return{isValid:!this.invalid,errorMessage:this.input.validationMessage}}async setError(n,c=true){if(!this.input)return;if(c)this._invalid=!!n.length;this.input.setCustomValidity(n)}async setFocus(){if(this.input){this.input.focus();s.force(this.input)}}async removeFocus(){if(this.input){this.input.blur();s.force(this.input,false)}}onReset(n){const c=this.form?document.querySelector("#"+this.form):this.host.closest("form");if(!c||n.target!==this.host.closest("form"))return;this.checked=false}isRadioChecked(){requestAnimationFrame((()=>this.checked=this.input.checked))}componentWillLoad(){this.typeChange()}componentDidLoad(){this.input.indeterminate=this.indeterminate;this.isRadioChecked();s.observe(this.input)}disconnectedCallback(){s.unobserve(this.input)}render(){const n=this.inputId+"-lbl";return e(o,{class:Object.assign({},i(this.color))},e("label",{class:{nanocb:true,"nanocb--checked":this.checked,"nanocb--invalid":this.invalid,"nanocb--disabled":this.disabled,"nanocb--focused":this.hasFocus,"nanocb--indeterminate":this.indeterminate},htmlFor:this.inputId},e("input",{type:this.inputType,name:this.name,form:this.form,required:this.required,checked:this.checked,disabled:this.disabled,value:this.value,"aria-labelledby":n,onBlur:this.handleBlur,onFocus:this.handleFocus,onChange:this.handleChange,ref:n=>this.input=n,id:this.inputId,onInvalid:this.handleInvalid}),e("span",{class:"nanocb__input nanocb__input--"+this.type}),e("div",{id:n,class:"nanocb__label nanocb__label--"+this.type},this.label&&!!this.label.length&&e("span",null,this.label),e("span",{hidden:this.label&&!!this.label.length},e("slot",null)))))}get host(){return a(this)}static get watchers(){return{checked:["handleCheckedChange"],type:["typeChange"],indeterminate:["handleIndeterminateChange"]}}};b.style=r;export{b as nano_checkbox};
-//# sourceMappingURL=p-119d8899.entry.js.map
+import{r as n,c,h as e,a as o,g as a}from"./p-f6a8467a.js";import{f as s}from"./p-f8f89998.js";import{c as i}from"./p-411bb8f1.js";const r='.sc-nano-checkbox-h{box-sizing:border-box}*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}.sc-nano-checkbox-h{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--invalid-shadow:0 0 0 0.1875rem  #ef4135;--padding:initial;--check-bg-color:#fff;--check-border-color:#b5aea7;--check-border-size:1px;--check-border-style:var(--check-border-size) solid var(--check-border-color);--check-checked-bg-color:#455556;--check-checked-border-color:#455556;--check-checked-higlight-color:#fff;--check-base-size:inherit;--label-spacing:10px 0;--tagbox-rgb:144 198 231;--tagbox-border-color:rgb(var(--tagbox-rgb) / 50%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 20%);--tagbox-border-radius:0;--segment-color:#007495;--segment-border-radius:3px;--segment-shadow:0 1px 4px rgb(0 0 0 / 20%);--cb-border-radius:2px;--radio-border-radius:50%;--switch-inactive-color:rgb(181 174 167 / 70%);--switch-active-color:#007495;display:inline-block;max-width:100%}.sc-nano-checkbox-h *.sc-nano-checkbox{box-sizing:inherit}[type=tag].sc-nano-checkbox-h{text-transform:uppercase;--control-padding:0.2rem 1rem}[type=radio][checked].sc-nano-checkbox-h:not([checked=false]){--check-border-size:0.3125em}[type=segment].sc-nano-checkbox-h{--check-border-style:none;--control-padding:0.7em 1em 0.7em 1em}[type=segment-pill].sc-nano-checkbox-h{--check-border-color:rgba(181, 174, 167, 0.5);--segment-border-radius:5px;--control-padding:0.7em 1em 0.7em 1em}.nano-color.sc-nano-checkbox-h{--tagbox-rgb:var(--nano-color-base-rgb);--focus-shadow:0 0 0 0.1875rem var(--nano-color-shade)}[checked].sc-nano-checkbox-h:not([checked=false]){--tagbox-border-color:rgb(var(--tagbox-rgb) / 80%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 50%)}[has-focus].sc-nano-checkbox-h:not([has-focus=false]){--cb-border-radius:5px}[disabled].sc-nano-checkbox-h:not([disabled=false]){opacity:0.7;--tagbox-rgb:104 117 118;--check-bg-color:rgba(104, 117, 118, 0.5);--check-checked-bg-color:rgba(104, 117, 118, 0.5);--segment-color:#455556}.nanocb.sc-nano-checkbox{padding:var(--padding);cursor:pointer;display:flex;align-items:center;line-height:1.2;position:relative}.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius, 3px);font-size:var(--check-base-size);position:relative;height:1.5em;width:1.5em;min-width:1.5em;border:var(--check-border-style);box-shadow:0 1px 4px rgba(0, 0, 0, 0.2)}.nanocb__input.sc-nano-checkbox::before{border-radius:var(--cb-border-radius);position:absolute;content:"";inset-inline-start:calc(0.725em - var(--check-border-size));inset-block-start:calc(0.725em - var(--check-border-size));width:0;height:0;border:2px solid var(--check-checked-higlight-color);transform:scale(0)}.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox{background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox::after{border-radius:var(--cb-border-radius);position:absolute;content:"";inset-inline-start:calc(0.825em - var(--check-border-size));inset-block-start:calc(0.825em - var(--check-border-size));height:0;width:0;border:solid var(--check-checked-higlight-color);border-width:0 0.1875em 0.1875em 0;transform:rotate(0deg) scale(0);opacity:1;transition:all 0.15s ease-out}.nanocb--indeterminate.sc-nano-checkbox .nanocb__input--checkbox.sc-nano-checkbox::after{border-width:0 0 0.1875em}.nanocb__input--switch.sc-nano-checkbox{border-radius:1em !important;width:2.4em;height:1.3em;background:var(--switch-inactive-color)}[type=switch].sc-nano-checkbox-h:not([disabled]) .nanocb__input--switch.sc-nano-checkbox:hover::after{scale:1.1 1}.nanocb__input--switch.sc-nano-checkbox::after{position:relative;content:"";display:block;border-radius:inherit;height:80%;width:40%;background:var(--check-checked-higlight-color);transform-origin:left;inset-inline-start:6%;inset-block-start:10%;transition:0.1s ease scale, 0.15s ease left}.nanocb__input--segment.sc-nano-checkbox,.nanocb__input--segment-pill.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--segment.sc-nano-checkbox::before,.nanocb__input--segment-pill.sc-nano-checkbox::before{display:none}.nanocb__input--tag.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--tag.sc-nano-checkbox::before{display:none}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow)}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--invalid-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus~.nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow)}.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--focus-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border-color:var(--check-checked-border-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{color:var(--check-checked-higlight-color);background-color:var(--check-checked-bg-color);box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-checked-higlight-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::after{border:solid var(--check-checked-border-color);border-width:0 0.125em 0.125em 0;opacity:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::before{border-radius:var(--radio-border-radius)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:rotate(45deg) scale(1);opacity:1;inset-inline-start:calc(0.575em - var(--check-border-size));inset-block-start:calc(0.2875em - var(--check-border-size));width:0.375em;height:0.75em;border-radius:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox::after{transform:rotate(45deg)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--switch.sc-nano-checkbox{background:var(--switch-active-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--switch.sc-nano-checkbox::after{inset-inline-start:56%;transform-origin:right}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox{border-radius:var(--input-border-radius, 5px);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-bg-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:scale(1);opacity:1;inset-inline-start:0.3125em;inset-block-start:0;width:0.7em;height:0.7em;border-radius:0}.nanocb__label.sc-nano-checkbox{padding-inline:var(--label-spacing);padding-block:0;display:flex;align-items:center;font-stretch:condensed;line-height:1;flex:1;justify-content:space-between}.nanocb__label--segment.sc-nano-checkbox,.nanocb__label--segment-pill.sc-nano-checkbox{border:var(--check-border-style);border-radius:var(--segment-border-radius);box-shadow:var(--segment-shadow);display:inline-flex;padding:var(--control-padding);background:var(--check-bg-color);color:var(--segment-color);align-items:center;width:100%}.sc-nano-checkbox-h:first-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:var(--segment-border-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--segment-border-radius);-webkit-border-end:none;border-inline-end:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0;-webkit-border-end:none;border-inline-end:none}.sc-nano-checkbox-h:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:0;border-start-end-radius:var(--segment-border-radius);border-end-end-radius:var(--segment-border-radius);border-end-start-radius:0}.sc-nano-checkbox-h:first-of-type:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius);border:var(--check-border-style)}.nanocb__label--tag.sc-nano-checkbox{letter-spacing:2px;font-weight:400;font-size:0.65em;line-height:1.4;padding:var(--control-padding);border:2px solid #b5aea7;border-color:var(--tagbox-border-color);background-color:var(--tagbox-bg-color);transition:all 0.2s;border-radius:var(--cb-border-radius);width:100%}.nanocb__label--tag.sc-nano-checkbox::after{content:"+";margin-inline:0.3125em 0;margin-block:0;font-weight:200;position:relative;font-family:inherit;font-size:1.8em;display:inline-block;transform:rotate(0deg);transform-origin:center}.nanocb__label--tag.sc-nano-checkbox span.sc-nano-checkbox{display:block}';let t=0;const b=class{constructor(e){n(this,e);this.nanoChange=c(this,"nanoChange",7);this.nanoFocus=c(this,"nanoFocus",7);this.nanoBlur=c(this,"nanoBlur",7);this.inputId=`nano-cb-${t++}`;this.handleInvalid=n=>{this._invalid=!n.target.validity.valid};this.handleChange=n=>{this.checked=n.target.checked;this.indeterminate=false};this.handleFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.handleBlur=()=>{this.hasFocus=false;this.nanoBlur.emit()};this.inputType="checkbox";this.hasFocus=false;this.checked=false;this.disabled=false;this.value="on";this.name=undefined;this.required=false;this.type="checkbox";this.label=undefined;this.indeterminate=false;this._invalid=false;this.color=undefined;this.form=undefined}async handleCheckedChange(){this.input.checked=this.checked;if(this.inputType==="radio"&&this.name&&this.checked){const n=this.host.closest("form");let c;if(n){c=Array.from(n.querySelectorAll(`nano-checkbox[name="${this.name}"]`))}else{c=Array.from(document.querySelectorAll(`nano-checkbox[name="${this.name}"]`)).filter((n=>!n.closest("form")))}c.map((n=>{if(n!==this.host)n.checked=false}))}this.nanoChange.emit({value:this.value,checked:this.checked})}typeChange(){if(["checkbox","switch","tag"].includes(this.type))this.inputType="checkbox";else this.inputType="radio"}handleIndeterminateChange(){this.checked=false;this.input.indeterminate=this.indeterminate}get invalid(){return this._invalid}get validityMessage(){if(!this.input)return"";return this.input.validationMessage}async getInputElement(){if(this.input)return this.input}async reportValidity(n=false){if(n)this.input.reportValidity();this._invalid=!this.input.validity.valid;return{isValid:!this.invalid,errorMessage:this.input.validationMessage}}async setError(n,c=true){if(!this.input)return;if(c)this._invalid=!!n.length;this.input.setCustomValidity(n)}async setFocus(){if(this.input){this.input.focus();s.force(this.input)}}async removeFocus(){if(this.input){this.input.blur();s.force(this.input,false)}}onReset(n){const c=this.form?document.querySelector("#"+this.form):this.host.closest("form");if(!c||n.target!==this.host.closest("form"))return;this.checked=false}isRadioChecked(){requestAnimationFrame((()=>this.checked=this.input.checked))}componentWillLoad(){this.typeChange()}componentDidLoad(){this.input.indeterminate=this.indeterminate;this.isRadioChecked();s.observe(this.input)}disconnectedCallback(){s.unobserve(this.input)}render(){const n=this.inputId+"-lbl";return e(o,{class:Object.assign({},i(this.color))},e("label",{class:{nanocb:true,"nanocb--checked":this.checked,"nanocb--invalid":this.invalid,"nanocb--disabled":this.disabled,"nanocb--focused":this.hasFocus,"nanocb--indeterminate":this.indeterminate},htmlFor:this.inputId},e("input",{type:this.inputType,name:this.name,form:this.form,required:this.required,checked:this.checked,disabled:this.disabled,value:this.value,"aria-labelledby":n,onBlur:this.handleBlur,onFocus:this.handleFocus,onChange:this.handleChange,ref:n=>this.input=n,id:this.inputId,onInvalid:this.handleInvalid}),e("span",{class:"nanocb__input nanocb__input--"+this.type}),e("div",{id:n,class:"nanocb__label nanocb__label--"+this.type},this.label&&!!this.label.length&&e("span",null,this.label),e("span",{hidden:this.label&&!!this.label.length},e("slot",null)))))}get host(){return a(this)}static get watchers(){return{checked:["handleCheckedChange"],type:["typeChange"],indeterminate:["handleIndeterminateChange"]}}};b.style=r;export{b as nano_checkbox};
+//# sourceMappingURL=p-20383b2e.entry.js.map

package/dist/nano-components/{p-119d8899.entry.js.map → p-20383b2e.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["checkboxCss","checkboxIds","Checkbox","this","inputId","handleInvalid","ev","_invalid","target","validity","valid","handleChange","checked","indeterminate","handleFocus","hasFocus","nanoFocus","emit","handleBlur","nanoBlur","async","input","inputType","name","form","host","closest","ctrls","Array","from","querySelectorAll","document","filter","radio","map","el","nanoChange","value","typeChange","includes","type","handleIndeterminateChange","invalid","validityMessage","validationMessage","validateFirst","reportValidity","isValid","errorMessage","message","updateStatus","length","setCustomValidity","focus","focusVisible","force","blur","onReset","e","querySelector","isRadioChecked","requestAnimationFrame","componentWillLoad","componentDidLoad","observe","disconnectedCallback","unobserve","render","labelId","h","Host","class","Object","assign","createColorClasses","color","nanocb","disabled","htmlFor","required","onBlur","onFocus","onChange","ref","id","onInvalid","label","hidden"],"sources":["./src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","./src/components/checkbox/checkbox.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\n:host {\n  /**\n   * @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to #{$control-invalid-style};\n   * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{$control-focus-style};\n   * @prop --padding: padding around radio and checkbox controls. Defaults to initial;\n   * @prop --control-padding: padding around tag and segmented controls text. Various defaults.\n   * @prop --check-bg-color: Initial Bg color of radio / checkbox controls. Changes for [checked] and [disabled] states. Defaults to #{map.get($colors, white)};\n   * @prop --check-border-color: initial border color. Defaults  to #{map.get($colors, palegrey)};\n   * @prop --check-border-size: initial border size. Default to 1px;\n   * @prop --check-border-style: Initial border style. Defaults to var(--check-border-size) solid var(--check-border-color);\n   * @prop --check-checked-bg-color: Checked bg of controls (not tag). Defaults to #{map.get($colors, darkgrey)};\n   * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{map.get($colors, darkgrey)};\n   * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{map.get($colors, white)};\n   * @prop --check-base-size: Relative scaling size for check controls. Defaults to to inherit;\n\n   * @prop --cb-border-radius: Checkbox border radius. Defaults to to 2px and 5px on [has-focus];\n   * @prop --radio-border-radius: Radio border radius. Defaults to to 50%;\n   * @prop --tagbox-rgb: an rba list for tags which can be used to generate --tagbox-border-color and --tagbox-bg-color. Defaults to #{color-to-rgb-list(map.get($colors, lightblue))};\n   * @prop --tagbox-border-color: Defaults to rgb(var(--tagbox-rgb) / 50%);\n   * @prop --tagbox-bg-color: Defaults to rgb(var(--tagbox-rgb) / 10%);\n   * @prop --segment-color: Segment, unselected text color. (selected color is --check-checked-higlight-color). Defaults to #{map.get($colors, blue)};\n   * @prop --segment-border-radius: Defaults to 3px;\n   * @prop --segment-shadow: Defaults to 0 1px 4px rgb(0 0 0 / 20%);\n   * @prop --switch-inactive-color: Defaults to rgb(#{color-to-rgb-list(map.get($colors, palegrey))} / 70%);\n   * @prop --switch-active-color: Defaults to #{map.get($colors, blue)};\n  */\n\n  --focus-shadow: #{$control-focus-style};\n  --invalid-shadow: #{$control-focus-size + ' ' map.get($colors, red)};\n  --padding: initial;\n  --check-bg-color: #{map.get($colors, white)};\n  --check-border-color: #{map.get($colors, palegrey)};\n  --check-border-size: 1px;\n  --check-border-style: var(--check-border-size) solid var(--check-border-color);\n  --check-checked-bg-color: #{map.get($colors, darkgrey)};\n  --check-checked-border-color: #{map.get($colors, darkgrey)};\n  --check-checked-higlight-color: #{map.get($colors, white)};\n  --check-base-size: inherit;\n  --label-spacing: 10px 0;\n\n  // type specific\n\n  // tag\n  --tagbox-rgb: #{color-to-rgb-list(map.get($colors, lightblue))};\n  --tagbox-border-color: rgb(var(--tagbox-rgb) / 50%);\n  --tagbox-bg-color: rgb(var(--tagbox-rgb) / 20%);\n  --tagbox-border-radius: 0;\n\n  // segment\n  --segment-color: #{map.get($colors, blue)};\n  --segment-border-radius: 3px;\n  --segment-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n\n  // cb / radio\n  --cb-border-radius: 2px;\n  --radio-border-radius: 50%;\n\n  // switch\n  --switch-inactive-color: rgb(#{color-to-rgb-list(map.get($colors, palegrey))} / 70%);\n  --switch-active-color: #{map.get($colors, blue)};\n\n  display: inline-block;\n  max-width: 100%;\n\n  * {\n    box-sizing: inherit;\n  }\n}\n\n:host([type='tag']) {\n  text-transform: uppercase;\n\n  --control-padding: 0.2rem 1rem;\n}\n\n:host([type='radio'][checked]):not([checked='false']) {\n  --check-border-size: 0.3125em;\n}\n\n:host([type='segment']) {\n  --check-border-style: none;\n  --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host([type='segment-pill']) {\n  --check-border-color: #{rgba(map.get($colors, palegrey), 0.5)};\n  --segment-border-radius: 5px;\n  --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host(.nano-color) {\n  --tagbox-rgb: var(--nano-color-base-rgb);\n  --focus-shadow: #{$control-focus-size} var(--nano-color-shade);\n}\n\n:host([checked]:not([checked='false'])) {\n  --tagbox-border-color: rgb(var(--tagbox-rgb) / 80%);\n  --tagbox-bg-color: rgb(var(--tagbox-rgb) / 50%);\n}\n\n:host([has-focus]:not([has-focus='false'])) {\n  --cb-border-radius: 5px;\n}\n\n:host([disabled]:not([disabled='false'])) {\n  opacity: 0.7;\n\n  --tagbox-rgb: #{color-to-rgb-list(map.get($colors, mediumgrey))};\n  --check-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n  --check-checked-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n  --segment-color: #{map.get($colors, darkgrey)};\n}\n\n.nanocb {\n  padding: var(--padding);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  line-height: 1.2;\n  position: relative;\n\n  // The mock, viewable 'input' control. Only relevant for controls where the label\n  // is outside / separate from the UI control (e.g. checkbox, radio, switch).\n\n  &__input {\n    border-radius: var(--cb-border-radius, 3px);\n    font-size: var(--check-base-size);\n    position: relative;\n    height: 1.5em;\n    width: 1.5em;\n    min-width: 1.5em;\n    border: var(--check-border-style);\n    box-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n\n    &::before {\n      border-radius: var(--cb-border-radius);\n      position: absolute;\n      content: '';\n      inset-inline-start: calc(0.725em - var(--check-border-size));\n      inset-block-start: calc(0.725em - var(--check-border-size));\n      width: 0;\n      height: 0;\n      border: 2px solid var(--check-checked-higlight-color);\n      transform: scale(0);\n    }\n\n    &--radio {\n      border-radius: var(--radio-border-radius);\n      background-color: var(--check-bg-color);\n    }\n\n    &--checkbox {\n      background-color: var(--check-bg-color);\n\n      &::after {\n        border-radius: var(--cb-border-radius);\n        position: absolute;\n        content: '';\n        inset-inline-start: calc(0.825em - var(--check-border-size));\n        inset-block-start: calc(0.825em - var(--check-border-size));\n        height: 0;\n        width: 0;\n        border: solid var(--check-checked-higlight-color);\n        border-width: 0 0.1875em 0.1875em 0;\n        transform: rotate(0deg) scale(0);\n        opacity: 1;\n        transition: all 0.15s ease-out;\n\n        .nanocb--indeterminate & {\n          border-width: 0 0 0.1875em;\n        }\n      }\n    }\n\n    &--switch {\n      border-radius: 1em !important;\n      width: 2.4em;\n      height: 1.3em;\n      background: var(--switch-inactive-color);\n\n      :host([type=\"switch\"]:not([disabled])) & {\n        &:hover::after {\n          scale: 1.1 1;\n        }\n      }\n\n      &::after {\n        position: relative;\n        content: '';\n        display: block;\n        border-radius: inherit;\n        height: 80%;\n        width: 40%;\n        background: var(--check-checked-higlight-color);\n        transform-origin: left;\n        inset-inline-start: 6%;\n        inset-block-start: 10%;\n        transition: .1s ease scale, .15s ease left;\n      }\n    }\n\n    &--segment,\n    &--segment-pill {\n      @include visually-hide();\n\n      &::before {\n        display: none;\n      }\n    }\n\n    &--tag {\n      @include visually-hide();\n\n      &::before {\n        display: none;\n      }\n    }\n  }\n\n  &--invalid:not(.nanocb--focused) {\n    .nanocb__input {\n      box-shadow: 0 0 15px rgb(0 0 0 / 20%), var(--invalid-shadow);\n\n      &--tag + .nanocb__label,\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        box-shadow: var(--invalid-shadow);\n        z-index: 1;\n      }\n    }\n  }\n\n  // The 'real' input control which we hide but use it's state for display\n  input {\n    @include visually-hide();\n\n    &:focus ~ .nanocb__input {\n      box-shadow: 0 0 15px rgb(0 0 0 / 20%), var(--focus-shadow);\n    }\n\n    &.focus-visible:focus ~ .nanocb__input {\n      &--tag + .nanocb__label,\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        box-shadow: var(--focus-shadow);\n        z-index: 1;\n      }\n    }\n\n    &:checked ~ .nanocb__input {\n      border-radius: var(--cb-border-radius);\n      background-color: var(--check-checked-bg-color);\n      transform: rotate(0deg) scale(1);\n      opacity: 1;\n      border-color: var(--check-checked-border-color);\n\n      // segment / segment-pill active\n\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        color: var(--check-checked-higlight-color);\n        background-color: var(--check-checked-bg-color);\n        box-shadow: inset 0 3px 4px rgb(0 0 0 / 20%);\n      }\n\n      // radio active\n\n      &--radio {\n        border-radius: var(--radio-border-radius);\n        background-color: var(--check-checked-higlight-color);\n\n        &::after {\n          border: solid var(--check-checked-border-color);\n          border-width: 0 0.125em 0.125em 0;\n          opacity: 0;\n        }\n\n        &::before {\n          border-radius: var(--radio-border-radius);\n        }\n      }\n\n      // checkbox active\n\n      &--checkbox {\n        &::after {\n          transform: rotate(45deg) scale(1);\n          opacity: 1;\n          inset-inline-start: calc(0.575em - var(--check-border-size));\n          inset-block-start: calc(0.2875em - var(--check-border-size));\n          width: 0.375em;\n          height: 0.75em;\n          border-radius: 0;\n        }\n      }\n\n      // tag active\n\n      &--tag + .nanocb__label::after {\n        transform: rotate(45deg);\n      }\n\n      // switch active\n\n      &--switch {\n        background: var(--switch-active-color);\n\n        &::after {\n          inset-inline-start: 56%;\n          transform-origin: right;\n        }\n      }\n    }\n\n    // indeterminate (only checkbox?)\n\n    &:indeterminate ~ .nanocb__input--checkbox {\n      border-radius: var(--input-border-radius, 5px);\n      background-color: var(--check-checked-bg-color);\n      transform: rotate(0deg) scale(1);\n      opacity: 1;\n      border: 0.125em solid var(--check-checked-bg-color);\n\n      &::after {\n        transform: scale(1);\n        opacity: 1;\n        inset-inline-start: 0.3125em;\n        inset-block-start: 0;\n        width: 0.7em;\n        height: 0.7em;\n        border-radius: 0;\n      }\n    }\n  }\n\n  // The label\n  &__label {\n    padding-inline: var(--label-spacing);\n    padding-block: 0;\n    display: flex;\n    align-items: center;\n    font-stretch: condensed;\n    line-height: 1;\n    flex: 1;\n    justify-content: space-between;\n\n    &--segment,\n    &--segment-pill {\n      border: var(--check-border-style);\n      border-radius: var(--segment-border-radius);\n      box-shadow: var(--segment-shadow);\n      display: inline-flex;\n      padding: var(--control-padding);\n      background: var(--check-bg-color);\n      color: var(--segment-color);\n      align-items: center;\n      width: 100%;\n    }\n\n    &--segment-pill {\n      // first\n      :host(:first-of-type) & {\n        border-start-start-radius: var(--segment-border-radius);\n        border-start-end-radius: 0;\n        border-end-end-radius: 0;\n        border-end-start-radius: var(--segment-border-radius);\n        border-inline-end: none;\n      }\n\n      // middle\n      :host(:not(:last-of-type):not(:first-of-type)) & {\n        border-radius: 0;\n        border-inline-end: none;\n      }\n\n      // last\n      :host(:last-of-type) & {\n        border-start-start-radius: 0;\n        border-start-end-radius: var(--segment-border-radius);\n        border-end-end-radius: var(--segment-border-radius);\n        border-end-start-radius: 0;\n      }\n\n      // single\n      :host(:first-of-type:last-of-type) & {\n        border-radius: var(--segment-border-radius);\n        border: var(--check-border-style);\n      }\n    }\n\n    &--tag {\n      letter-spacing: 2px;\n      font-weight: 500;\n      font-size: 0.65em;\n      line-height: 1.4;\n      padding: var(--control-padding);\n      border: 2px solid #b5aea7;\n      border-color: var(--tagbox-border-color);\n      background-color: var(--tagbox-bg-color);\n      transition: all 0.2s;\n      border-radius: var(--cb-border-radius);\n      width: 100%;\n\n      &::after {\n        content: '+';\n        margin-inline: 0.3125em 0;\n        margin-block: 0;\n        font-weight: 200;\n        position: relative;\n        font-family: inherit;\n        font-size: 1.8em;\n        display: inline-block;\n        transform: rotate(0deg);\n        transform-origin: center;\n      }\n\n      span {\n        display: block;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n  ComponentInterface,\n  State,\n  Watch,\n  Method,\n  Element,\n  Host,\n  Listen,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport type {\n  CheckboxChangeEventDetail,\n  ControlValidity,\n  Color,\n} from '../../interface';\n\nlet checkboxIds = 0;\n\n/**\n * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n *\n * @slot - if you do not set a label attribute, you can use this slot for more complex markup\n */\n@Component({\n  tag: 'nano-checkbox',\n  styleUrl: 'checkbox.scss',\n  scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n  private inputId = `nano-cb-${checkboxIds++}`;\n  private input: HTMLInputElement;\n\n  @Element() private host: HTMLNanoCheckboxElement;\n  @State() inputType: 'checkbox' | 'radio' = 'checkbox';\n\n  /** @internal */\n  @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n  /**\n   * checked property that can be used to get/set the value. accepts only boolean values\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  @Watch('checked')\n  async handleCheckedChange() {\n    this.input.checked = this.checked;\n\n    if (this.inputType === 'radio' && this.name && this.checked) {\n      const form = this.host.closest('form');\n      let ctrls: Element[];\n      if (form) {\n        ctrls = Array.from(\n          form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        );\n      } else {\n        ctrls = Array.from(\n          document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        ).filter((radio) => !radio.closest('form'));\n      }\n      ctrls.map((el: HTMLNanoCheckboxElement) => {\n        if (el !== this.host) el.checked = false;\n      });\n    }\n    this.nanoChange.emit({ value: this.value, checked: this.checked });\n  }\n\n  /**\n   * If `true`, the user cannot interact with the checkbox.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n   * it's only present when `checked` is true.\n   */\n  @Prop({ reflect: true }) value: string = 'on';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Set to true to make the field required.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Controls the underlying field type and style.\n   */\n  @Prop({ reflect: true }) type:\n    | 'radio'\n    | 'checkbox'\n    | 'tag'\n    | 'segment'\n    | 'switch'\n    | 'segment-pill' = 'checkbox';\n\n  @Watch('type')\n  typeChange() {\n    if (['checkbox', 'switch', 'tag'].includes(this.type))\n      this.inputType = 'checkbox';\n    else this.inputType = 'radio';\n  }\n\n  /**\n   * label property that can be used to set the label text. Alternatively you may use a label slot.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n   */\n  @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n  @Watch('indeterminate')\n  handleIndeterminateChange() {\n    this.checked = false;\n    this.input.indeterminate = this.indeterminate;\n  }\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.input) return '';\n    return this.input.validationMessage;\n  }\n\n  /**\n   * Color to use from your application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * The form element to associate the input with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * Emited when the checkbox is toggled\n   */\n  @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  /**\n   * Emited when the checkbox is focused\n   */\n  @Event() nanoFocus: EventEmitter;\n\n  /**\n   * Emited when the checkbox is blurred\n   */\n  @Event() nanoBlur: EventEmitter;\n\n  // public methods\n\n  /**\n   * Returns the native input control\n   */\n  @Method()\n  async getInputElement() {\n    if (this.input) return this.input;\n  }\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n   */\n  @Method()\n  async reportValidity(\n    validateFirst: boolean = false\n  ): Promise<ControlValidity> {\n    if (validateFirst) this.input.reportValidity();\n    this._invalid = !this.input.validity.valid;\n\n    return {\n      isValid: !this.invalid,\n      errorMessage: this.input.validationMessage,\n    };\n  }\n\n  /**\n   * Sets a custom validation message.\n   * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n   */\n  @Method()\n  async setError(message: string, updateStatus = true) {\n    if (!this.input) return;\n    if (updateStatus) this._invalid = !!message.length;\n    this.input.setCustomValidity(message);\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus() {\n    if (this.input) {\n      this.input.focus();\n      focusVisible.force(this.input);\n    }\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  @Method()\n  async removeFocus() {\n    if (this.input) {\n      this.input.blur();\n      focusVisible.force(this.input, false);\n    }\n  }\n\n  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.host.closest('form');\n    if (!form || e.target !== this.host.closest('form')) return;\n\n    this.checked = false;\n  }\n\n  // private handlers\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n  };\n\n  private handleChange = (ev: InputEvent) => {\n    this.checked = (ev.target as HTMLInputElement).checked;\n    this.indeterminate = false;\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  /* Although many radio components can be 'checked',\n  the underlying control may not be. Check */\n  private isRadioChecked() {\n    requestAnimationFrame(() => (this.checked = this.input.checked));\n  }\n\n  // Stencil hooks\n\n  componentWillLoad() {\n    this.typeChange();\n  }\n\n  componentDidLoad() {\n    this.input.indeterminate = this.indeterminate;\n    this.isRadioChecked();\n    focusVisible.observe(this.input);\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.input);\n  }\n\n  render() {\n    const labelId = this.inputId + '-lbl';\n\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <label\n          class={{\n            nanocb: true,\n            'nanocb--checked': this.checked,\n            'nanocb--invalid': this.invalid,\n            'nanocb--disabled': this.disabled,\n            'nanocb--focused': this.hasFocus,\n            'nanocb--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n        >\n          <input\n            type={this.inputType}\n            name={this.name}\n            form={this.form}\n            required={this.required}\n            checked={this.checked}\n            disabled={this.disabled}\n            value={this.value}\n            aria-labelledby={labelId}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n            onChange={this.handleChange}\n            ref={(input) => (this.input = input)}\n            id={this.inputId}\n            onInvalid={this.handleInvalid}\n          />\n          <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n          <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n            {this.label && !!this.label.length && <span>{this.label}</span>}\n            <span hidden={this.label && !!this.label.length}>\n              <slot />\n            </span>\n          </div>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["checkboxCss","checkboxIds","Checkbox","this","inputId","handleInvalid","ev","_invalid","target","validity","valid","handleChange","checked","indeterminate","handleFocus","hasFocus","nanoFocus","emit","handleBlur","nanoBlur","async","input","inputType","name","form","host","closest","ctrls","Array","from","querySelectorAll","document","filter","radio","map","el","nanoChange","value","typeChange","includes","type","handleIndeterminateChange","invalid","validityMessage","validationMessage","validateFirst","reportValidity","isValid","errorMessage","message","updateStatus","length","setCustomValidity","focus","focusVisible","force","blur","onReset","e","querySelector","isRadioChecked","requestAnimationFrame","componentWillLoad","componentDidLoad","observe","disconnectedCallback","unobserve","render","labelId","h","Host","class","Object","assign","createColorClasses","color","nanocb","disabled","htmlFor","required","onBlur","onFocus","onChange","ref","id","onInvalid","label","hidden"],"sources":["./src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","./src/components/checkbox/checkbox.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\n:host {\n  /**\n   * @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to #{$control-invalid-style};\n   * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{$control-focus-style};\n   * @prop --padding: padding around radio and checkbox controls. Defaults to initial;\n   * @prop --control-padding: padding around tag and segmented controls text. Various defaults.\n   * @prop --check-bg-color: Initial Bg color of radio / checkbox controls. Changes for [checked] and [disabled] states. Defaults to #{map.get($colors, white)};\n   * @prop --check-border-color: initial border color. Defaults  to #{map.get($colors, palegrey)};\n   * @prop --check-border-size: initial border size. Default to 1px;\n   * @prop --check-border-style: Initial border style. Defaults to var(--check-border-size) solid var(--check-border-color);\n   * @prop --check-checked-bg-color: Checked bg of controls (not tag). Defaults to #{map.get($colors, darkgrey)};\n   * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{map.get($colors, darkgrey)};\n   * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{map.get($colors, white)};\n   * @prop --check-base-size: Relative scaling size for check controls. Defaults to to inherit;\n\n   * @prop --cb-border-radius: Checkbox border radius. Defaults to to 2px and 5px on [has-focus];\n   * @prop --radio-border-radius: Radio border radius. Defaults to to 50%;\n   * @prop --tagbox-rgb: an rba list for tags which can be used to generate --tagbox-border-color and --tagbox-bg-color. Defaults to #{color-to-rgb-list(map.get($colors, lightblue))};\n   * @prop --tagbox-border-color: Defaults to rgb(var(--tagbox-rgb) / 50%);\n   * @prop --tagbox-bg-color: Defaults to rgb(var(--tagbox-rgb) / 10%);\n   * @prop --segment-color: Segment, unselected text color. (selected color is --check-checked-higlight-color). Defaults to #{map.get($colors, blue)};\n   * @prop --segment-border-radius: Defaults to 3px;\n   * @prop --segment-shadow: Defaults to 0 1px 4px rgb(0 0 0 / 20%);\n   * @prop --switch-inactive-color: Defaults to rgb(#{color-to-rgb-list(map.get($colors, palegrey))} / 70%);\n   * @prop --switch-active-color: Defaults to #{map.get($colors, blue)};\n  */\n\n  --focus-shadow: #{$control-focus-style};\n  --invalid-shadow: #{$control-focus-size + ' ' map.get($colors, red)};\n  --padding: initial;\n  --check-bg-color: #{map.get($colors, white)};\n  --check-border-color: #{map.get($colors, palegrey)};\n  --check-border-size: 1px;\n  --check-border-style: var(--check-border-size) solid var(--check-border-color);\n  --check-checked-bg-color: #{map.get($colors, darkgrey)};\n  --check-checked-border-color: #{map.get($colors, darkgrey)};\n  --check-checked-higlight-color: #{map.get($colors, white)};\n  --check-base-size: inherit;\n  --label-spacing: 10px 0;\n\n  // type specific\n\n  // tag\n  --tagbox-rgb: #{color-to-rgb-list(map.get($colors, lightblue))};\n  --tagbox-border-color: rgb(var(--tagbox-rgb) / 50%);\n  --tagbox-bg-color: rgb(var(--tagbox-rgb) / 20%);\n  --tagbox-border-radius: 0;\n\n  // segment\n  --segment-color: #{map.get($colors, blue)};\n  --segment-border-radius: 3px;\n  --segment-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n\n  // cb / radio\n  --cb-border-radius: 2px;\n  --radio-border-radius: 50%;\n\n  // switch\n  --switch-inactive-color: rgb(#{color-to-rgb-list(map.get($colors, palegrey))} / 70%);\n  --switch-active-color: #{map.get($colors, blue)};\n\n  display: inline-block;\n  max-width: 100%;\n\n  * {\n    box-sizing: inherit;\n  }\n}\n\n:host([type='tag']) {\n  text-transform: uppercase;\n\n  --control-padding: 0.2rem 1rem;\n}\n\n:host([type='radio'][checked]):not([checked='false']) {\n  --check-border-size: 0.3125em;\n}\n\n:host([type='segment']) {\n  --check-border-style: none;\n  --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host([type='segment-pill']) {\n  --check-border-color: #{rgba(map.get($colors, palegrey), 0.5)};\n  --segment-border-radius: 5px;\n  --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host(.nano-color) {\n  --tagbox-rgb: var(--nano-color-base-rgb);\n  --focus-shadow: #{$control-focus-size} var(--nano-color-shade);\n}\n\n:host([checked]:not([checked='false'])) {\n  --tagbox-border-color: rgb(var(--tagbox-rgb) / 80%);\n  --tagbox-bg-color: rgb(var(--tagbox-rgb) / 50%);\n}\n\n:host([has-focus]:not([has-focus='false'])) {\n  --cb-border-radius: 5px;\n}\n\n:host([disabled]:not([disabled='false'])) {\n  opacity: 0.7;\n\n  --tagbox-rgb: #{color-to-rgb-list(map.get($colors, mediumgrey))};\n  --check-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n  --check-checked-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n  --segment-color: #{map.get($colors, darkgrey)};\n}\n\n.nanocb {\n  padding: var(--padding);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  line-height: 1.2;\n  position: relative;\n\n  // The mock, viewable 'input' control. Only relevant for controls where the label\n  // is outside / separate from the UI control (e.g. checkbox, radio, switch).\n\n  &__input {\n    border-radius: var(--cb-border-radius, 3px);\n    font-size: var(--check-base-size);\n    position: relative;\n    height: 1.5em;\n    width: 1.5em;\n    min-width: 1.5em;\n    border: var(--check-border-style);\n    box-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n\n    &::before {\n      border-radius: var(--cb-border-radius);\n      position: absolute;\n      content: '';\n      inset-inline-start: calc(0.725em - var(--check-border-size));\n      inset-block-start: calc(0.725em - var(--check-border-size));\n      width: 0;\n      height: 0;\n      border: 2px solid var(--check-checked-higlight-color);\n      transform: scale(0);\n    }\n\n    &--radio {\n      border-radius: var(--radio-border-radius);\n      background-color: var(--check-bg-color);\n    }\n\n    &--checkbox {\n      background-color: var(--check-bg-color);\n\n      &::after {\n        border-radius: var(--cb-border-radius);\n        position: absolute;\n        content: '';\n        inset-inline-start: calc(0.825em - var(--check-border-size));\n        inset-block-start: calc(0.825em - var(--check-border-size));\n        height: 0;\n        width: 0;\n        border: solid var(--check-checked-higlight-color);\n        border-width: 0 0.1875em 0.1875em 0;\n        transform: rotate(0deg) scale(0);\n        opacity: 1;\n        transition: all 0.15s ease-out;\n\n        .nanocb--indeterminate & {\n          border-width: 0 0 0.1875em;\n        }\n      }\n    }\n\n    &--switch {\n      border-radius: 1em !important;\n      width: 2.4em;\n      height: 1.3em;\n      background: var(--switch-inactive-color);\n\n      :host([type=\"switch\"]:not([disabled])) & {\n        &:hover::after {\n          scale: 1.1 1;\n        }\n      }\n\n      &::after {\n        position: relative;\n        content: '';\n        display: block;\n        border-radius: inherit;\n        height: 80%;\n        width: 40%;\n        background: var(--check-checked-higlight-color);\n        transform-origin: left;\n        inset-inline-start: 6%;\n        inset-block-start: 10%;\n        transition: .1s ease scale, .15s ease left;\n      }\n    }\n\n    &--segment,\n    &--segment-pill {\n      @include visually-hide();\n\n      &::before {\n        display: none;\n      }\n    }\n\n    &--tag {\n      @include visually-hide();\n\n      &::before {\n        display: none;\n      }\n    }\n  }\n\n  &--invalid:not(.nanocb--focused) {\n    .nanocb__input {\n      box-shadow: 0 0 15px rgb(0 0 0 / 20%), var(--invalid-shadow);\n\n      &--tag + .nanocb__label,\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        box-shadow: var(--invalid-shadow);\n        z-index: 1;\n      }\n    }\n  }\n\n  // The 'real' input control which we hide but use it's state for display\n  input {\n    @include visually-hide();\n\n    &:focus ~ .nanocb__input {\n      box-shadow: 0 0 15px rgb(0 0 0 / 20%), var(--focus-shadow);\n    }\n\n    &.focus-visible:focus ~ .nanocb__input {\n      &--tag + .nanocb__label,\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        box-shadow: var(--focus-shadow);\n        z-index: 1;\n      }\n    }\n\n    &:checked ~ .nanocb__input {\n      border-radius: var(--cb-border-radius);\n      background-color: var(--check-checked-bg-color);\n      transform: rotate(0deg) scale(1);\n      opacity: 1;\n      border-color: var(--check-checked-border-color);\n\n      // segment / segment-pill active\n\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        color: var(--check-checked-higlight-color);\n        background-color: var(--check-checked-bg-color);\n        box-shadow: inset 0 3px 4px rgb(0 0 0 / 20%);\n      }\n\n      // radio active\n\n      &--radio {\n        border-radius: var(--radio-border-radius);\n        background-color: var(--check-checked-higlight-color);\n\n        &::after {\n          border: solid var(--check-checked-border-color);\n          border-width: 0 0.125em 0.125em 0;\n          opacity: 0;\n        }\n\n        &::before {\n          border-radius: var(--radio-border-radius);\n        }\n      }\n\n      // checkbox active\n\n      &--checkbox {\n        &::after {\n          transform: rotate(45deg) scale(1);\n          opacity: 1;\n          inset-inline-start: calc(0.575em - var(--check-border-size));\n          inset-block-start: calc(0.2875em - var(--check-border-size));\n          width: 0.375em;\n          height: 0.75em;\n          border-radius: 0;\n        }\n      }\n\n      // tag active\n\n      &--tag + .nanocb__label::after {\n        transform: rotate(45deg);\n      }\n\n      // switch active\n\n      &--switch {\n        background: var(--switch-active-color);\n\n        &::after {\n          inset-inline-start: 56%;\n          transform-origin: right;\n        }\n      }\n    }\n\n    // indeterminate (only checkbox?)\n\n    &:indeterminate ~ .nanocb__input--checkbox {\n      border-radius: var(--input-border-radius, 5px);\n      background-color: var(--check-checked-bg-color);\n      transform: rotate(0deg) scale(1);\n      opacity: 1;\n      border: 0.125em solid var(--check-checked-bg-color);\n\n      &::after {\n        transform: scale(1);\n        opacity: 1;\n        inset-inline-start: 0.3125em;\n        inset-block-start: 0;\n        width: 0.7em;\n        height: 0.7em;\n        border-radius: 0;\n      }\n    }\n  }\n\n  // The label\n  &__label {\n    padding-inline: var(--label-spacing);\n    padding-block: 0;\n    display: flex;\n    align-items: center;\n    font-stretch: condensed;\n    line-height: 1;\n    flex: 1;\n    justify-content: space-between;\n\n    &--segment,\n    &--segment-pill {\n      border: var(--check-border-style);\n      border-radius: var(--segment-border-radius);\n      box-shadow: var(--segment-shadow);\n      display: inline-flex;\n      padding: var(--control-padding);\n      background: var(--check-bg-color);\n      color: var(--segment-color);\n      align-items: center;\n      width: 100%;\n    }\n\n    &--segment-pill {\n      // first\n      :host(:first-of-type) & {\n        border-start-start-radius: var(--segment-border-radius);\n        border-start-end-radius: 0;\n        border-end-end-radius: 0;\n        border-end-start-radius: var(--segment-border-radius);\n        border-inline-end: none;\n      }\n\n      // middle\n      :host(:not(:last-of-type):not(:first-of-type)) & {\n        border-radius: 0;\n        border-inline-end: none;\n      }\n\n      // last\n      :host(:last-of-type) & {\n        border-start-start-radius: 0;\n        border-start-end-radius: var(--segment-border-radius);\n        border-end-end-radius: var(--segment-border-radius);\n        border-end-start-radius: 0;\n      }\n\n      // single\n      :host(:first-of-type:last-of-type) & {\n        border-radius: var(--segment-border-radius);\n        border: var(--check-border-style);\n      }\n    }\n\n    &--tag {\n      letter-spacing: 2px;\n      font-weight: 400;\n      font-size: 0.65em;\n      line-height: 1.4;\n      padding: var(--control-padding);\n      border: 2px solid #b5aea7;\n      border-color: var(--tagbox-border-color);\n      background-color: var(--tagbox-bg-color);\n      transition: all 0.2s;\n      border-radius: var(--cb-border-radius);\n      width: 100%;\n\n      &::after {\n        content: '+';\n        margin-inline: 0.3125em 0;\n        margin-block: 0;\n        font-weight: 200;\n        position: relative;\n        font-family: inherit;\n        font-size: 1.8em;\n        display: inline-block;\n        transform: rotate(0deg);\n        transform-origin: center;\n      }\n\n      span {\n        display: block;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n  ComponentInterface,\n  State,\n  Watch,\n  Method,\n  Element,\n  Host,\n  Listen,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport type {\n  CheckboxChangeEventDetail,\n  ControlValidity,\n  Color,\n} from '../../interface';\n\nlet checkboxIds = 0;\n\n/**\n * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n *\n * @slot - if you do not set a label attribute, you can use this slot for more complex markup\n */\n@Component({\n  tag: 'nano-checkbox',\n  styleUrl: 'checkbox.scss',\n  scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n  private inputId = `nano-cb-${checkboxIds++}`;\n  private input: HTMLInputElement;\n\n  @Element() private host: HTMLNanoCheckboxElement;\n  @State() inputType: 'checkbox' | 'radio' = 'checkbox';\n\n  /** @internal */\n  @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n  /**\n   * checked property that can be used to get/set the value. accepts only boolean values\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  @Watch('checked')\n  async handleCheckedChange() {\n    this.input.checked = this.checked;\n\n    if (this.inputType === 'radio' && this.name && this.checked) {\n      const form = this.host.closest('form');\n      let ctrls: Element[];\n      if (form) {\n        ctrls = Array.from(\n          form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        );\n      } else {\n        ctrls = Array.from(\n          document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        ).filter((radio) => !radio.closest('form'));\n      }\n      ctrls.map((el: HTMLNanoCheckboxElement) => {\n        if (el !== this.host) el.checked = false;\n      });\n    }\n    this.nanoChange.emit({ value: this.value, checked: this.checked });\n  }\n\n  /**\n   * If `true`, the user cannot interact with the checkbox.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n   * it's only present when `checked` is true.\n   */\n  @Prop({ reflect: true }) value: string = 'on';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Set to true to make the field required.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Controls the underlying field type and style.\n   */\n  @Prop({ reflect: true }) type:\n    | 'radio'\n    | 'checkbox'\n    | 'tag'\n    | 'segment'\n    | 'switch'\n    | 'segment-pill' = 'checkbox';\n\n  @Watch('type')\n  typeChange() {\n    if (['checkbox', 'switch', 'tag'].includes(this.type))\n      this.inputType = 'checkbox';\n    else this.inputType = 'radio';\n  }\n\n  /**\n   * label property that can be used to set the label text. Alternatively you may use a label slot.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n   */\n  @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n  @Watch('indeterminate')\n  handleIndeterminateChange() {\n    this.checked = false;\n    this.input.indeterminate = this.indeterminate;\n  }\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.input) return '';\n    return this.input.validationMessage;\n  }\n\n  /**\n   * Color to use from your application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * The form element to associate the input with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * Emited when the checkbox is toggled\n   */\n  @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  /**\n   * Emited when the checkbox is focused\n   */\n  @Event() nanoFocus: EventEmitter;\n\n  /**\n   * Emited when the checkbox is blurred\n   */\n  @Event() nanoBlur: EventEmitter;\n\n  // public methods\n\n  /**\n   * Returns the native input control\n   */\n  @Method()\n  async getInputElement() {\n    if (this.input) return this.input;\n  }\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n   */\n  @Method()\n  async reportValidity(\n    validateFirst: boolean = false\n  ): Promise<ControlValidity> {\n    if (validateFirst) this.input.reportValidity();\n    this._invalid = !this.input.validity.valid;\n\n    return {\n      isValid: !this.invalid,\n      errorMessage: this.input.validationMessage,\n    };\n  }\n\n  /**\n   * Sets a custom validation message.\n   * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n   */\n  @Method()\n  async setError(message: string, updateStatus = true) {\n    if (!this.input) return;\n    if (updateStatus) this._invalid = !!message.length;\n    this.input.setCustomValidity(message);\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus() {\n    if (this.input) {\n      this.input.focus();\n      focusVisible.force(this.input);\n    }\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  @Method()\n  async removeFocus() {\n    if (this.input) {\n      this.input.blur();\n      focusVisible.force(this.input, false);\n    }\n  }\n\n  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.host.closest('form');\n    if (!form || e.target !== this.host.closest('form')) return;\n\n    this.checked = false;\n  }\n\n  // private handlers\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n  };\n\n  private handleChange = (ev: InputEvent) => {\n    this.checked = (ev.target as HTMLInputElement).checked;\n    this.indeterminate = false;\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  /* Although many radio components can be 'checked',\n  the underlying control may not be. Check */\n  private isRadioChecked() {\n    requestAnimationFrame(() => (this.checked = this.input.checked));\n  }\n\n  // Stencil hooks\n\n  componentWillLoad() {\n    this.typeChange();\n  }\n\n  componentDidLoad() {\n    this.input.indeterminate = this.indeterminate;\n    this.isRadioChecked();\n    focusVisible.observe(this.input);\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.input);\n  }\n\n  render() {\n    const labelId = this.inputId + '-lbl';\n\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <label\n          class={{\n            nanocb: true,\n            'nanocb--checked': this.checked,\n            'nanocb--invalid': this.invalid,\n            'nanocb--disabled': this.disabled,\n            'nanocb--focused': this.hasFocus,\n            'nanocb--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n        >\n          <input\n            type={this.inputType}\n            name={this.name}\n            form={this.form}\n            required={this.required}\n            checked={this.checked}\n            disabled={this.disabled}\n            value={this.value}\n            aria-labelledby={labelId}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n            onChange={this.handleChange}\n            ref={(input) => (this.input = input)}\n            id={this.inputId}\n            onInvalid={this.handleInvalid}\n          />\n          <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n          <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n            {this.label && !!this.label.length && <span>{this.label}</span>}\n            <span hidden={this.label && !!this.label.length}>\n              <slot />\n            </span>\n          </div>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/{p-6b232629.entry.js → p-27b5e10c.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-export{T as nano_table}from"./p-b2b29eaf.js";import"./p-f6a8467a.js";import"./p-ee045579.js";import"./p-9746b0a5.js";import"./p-9ebbb814.js";
-//# sourceMappingURL=p-6b232629.entry.js.map
+export{T as nano_table}from"./p-ffb57a0d.js";import"./p-f6a8467a.js";import"./p-ee045579.js";import"./p-9746b0a5.js";import"./p-9ebbb814.js";
+//# sourceMappingURL=p-27b5e10c.entry.js.map

package/dist/nano-components/{p-0d1ca590.entry.js → p-2d43a82b.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as o,c as n,h as t,a as i,g as r}from"./p-f6a8467a.js";import{g as e}from"./p-411bb8f1.js";import{d as s}from"./p-9746b0a5.js";const a='.sc-nano-checkbox-group-h{box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:0;--control-margin-bottom:0;--control-margin-start:0;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, "currentcolor");--label-color--invalid:var(--nano-input-label-color-invalid, "currentcolor");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));display:block}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{box-sizing:inherit}[types-tag].sc-nano-checkbox-group-h,[types-segment].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:8px;--control-margin-bottom:6px;--control-margin-start:0}[types-checkbox].sc-nano-checkbox-group-h,[types-radio].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:10px;--control-margin-bottom:6px;--control-margin-start:0}.nanogroupcb.sc-nano-checkbox-group{border:none;margin:0;padding:0}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group,.nanogroupcb__more.sc-nano-checkbox-group{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nanogroupcb__legend.sc-nano-checkbox-group{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1.5;white-space:normal;display:block;width:100%}[invalid].sc-nano-checkbox-group-h:not([invalid=false]) .nanogroupcb__legend.sc-nano-checkbox-group{color:var(--label-color--invalid)}.nanogroupcb__more.sc-nano-checkbox-group{height:1em;-webkit-margin-before:calc(var(--label-padding) - var(--control-margin-bottom));margin-block-start:calc(var(--label-padding) - var(--control-margin-bottom));-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-after:var(--label-padding);margin-block-end:var(--label-padding);-webkit-margin-start:3px;margin-inline-start:3px;position:relative}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:1}.nanogroupcb__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group{opacity:1}.nanogroupcb__help.sc-nano-checkbox-group{font-style:italic;opacity:1;color:var(--help-msg-color)}.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:0}.nanogroupcb__cbs.sc-nano-checkbox-group{margin:0;padding:0;line-height:1;display:flex;flex-wrap:wrap}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]),.nanogroupcb__cbs .sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]){--check-base-size:1.2em;font-size:0.85em}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-inline:var(--control-margin-start) var(--control-margin-end);margin-block:var(--control-margin-top) var(--control-margin-bottom)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{-webkit-margin-start:var(--control-margin-start);margin-inline-start:var(--control-margin-start);-webkit-margin-end:var(--control-margin-end);margin-inline-end:var(--control-margin-end)}}';const c=class{constructor(t){o(this,t);this.nanoChange=n(this,"nanoChange",7);this.nanoValidate=n(this,"nanoValidate",7);this.grpId=`nano-checkbox-group-${h++}`;this.ignoreValueSet=false;this.handleInvalid=o=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(!!this.showInlineError)o.preventDefault();this.showInlineValidation(o)};this.showInlineValidation=o=>{if(!this.nativeCbs||!this.nativeCbs.length)return;if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.showErrorMsg=false;this._invalid=false;this.nativeCbs.forEach(((o,n)=>{if(!o.validity.valid){this.errorMessage=o.validationMessage;this.showErrorMsg=true;this._invalid=true}}));this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:o})};this.checkboxes=undefined;this.nativeCbs=undefined;this.errorMessage="";this.showErrorMsg=false;this.hasHelperSlot=false;this.validateOn="submitThenDirty";this.showInlineError=true;this.min=0;this.max=null;this.disabled=null;this.legend="";this._invalid=false;this.value=undefined}get invalid(){return this._invalid}get validityMessage(){return this.errorMessage}handleValuePropChange(){this.nanoChange.emit(this.value);if(this.ignoreValueSet)return;this.setCbValue()}async reportValidity(o){return new Promise((n=>{if(o){this.customValidate();this.showInlineValidation()}setTimeout((()=>{n({isValid:!this.invalid,errorMessage:this.errorMessage})}),50)}))}async showError(o,n){let t;if(n)t=this.checkboxes.find((o=>o.value===n));if(!t)t=this.checkboxes[0];if(!t)return;this.errorMessage=o;await t.setError(o);if(!!this.showInlineError)this.showInlineValidation()}handleValueChange(o){if(o.target===this.host)return;this.setInteralValue()}handleCbChange(){if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}customValidate(){if(!this.nativeCbs||!this.nativeCbs.length||!this.checkboxes)return;const o=this.nativeCbs.filter((o=>(o===null||o===void 0?void 0:o.type)==="radio"));if(o&&o.length&&(this.showErrorMsg||this.validateOn==="dirty")){const n=o.find((o=>o.required));const t=o.filter((o=>o.checked));if(n&&t){this.checkboxes.forEach((o=>o.reportValidity(false)));return false}else if(n&&!t)return true}const n=this.nativeCbs.filter((o=>(o===null||o===void 0?void 0:o.type)==="checkbox"));if(!n||!n.length)return;const t=n.filter((o=>o.checked));const i=n.find((o=>o.required));let r=false;if(i&&!t.find((o=>o===i)))return true;this.checkboxes.forEach(((o,n)=>{const i=this.nativeCbs[n];o.setError("");i.setCustomValidity("");if(this.min&&t.length<this.min){this.errorMessage=`You must select a minimum of ${this.min} values.`;r=true}if(this.max&&t.length>this.max){this.errorMessage=`Only up to ${this.max} values are allowed.`;r=true}if(r){o.setError(this.errorMessage,this.showErrorMsg);i.setCustomValidity(this.errorMessage)}}));return r}handleComponentChange(){if(!this.checkboxes.length)return;this.checkboxTypes=e(this.checkboxes.map((o=>"types-"+o.type)))}handleDisabledChange(){if(this.disabled===null)return;this.checkboxes.map((o=>o.disabled=this.disabled))}setInteralValue(){var o;this.ignoreValueSet=true;const n=this.nativeCbs.filter((o=>(o===null||o===void 0?void 0:o.type)==="radio"));if(n===null||n===void 0?void 0:n.length){this.value=((o=n.find((o=>o.checked)))===null||o===void 0?void 0:o.value)||null;return}this.value=this.checkboxes.flatMap((o=>o.checked?[o.value]:[]));requestAnimationFrame((()=>this.ignoreValueSet=false))}setCbValue(){this.checkboxes.forEach((o=>{if(o.value===this.value||Array.isArray(this.value)&&this.value.includes(o.value)){o.checked=true}}))}attachSlotObserver(){if(!!this.mo||!window["MutationObserver"])return;const o=this.mo=new MutationObserver((()=>this.handleSlotChange()));o.observe(this.host,{childList:true})}async handleSlotChange(){this.checkboxes=Array.from(this.host.querySelectorAll("nano-checkbox"));this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]');this.nativeCbs=await Promise.all(this.checkboxes.reduce(((o,n)=>{o.push(n.getInputElement());return o}),[]));this.nativeCbs.forEach((o=>{if(o)o.addEventListener("invalid",this.handleInvalid)}))}componentWillLoad(){this.showInlineValidation=s(this.showInlineValidation,50);this.customValidate=this.customValidate.bind(this);this.handleDisabledChange();this.handleSlotChange()}connectedCallback(){this.attachSlotObserver()}disconnectedCallback(){if(this.mo)this.mo.disconnect()}componentDidLoad(){this.handleComponentChange()}render(){const o=this.grpId+"-lbl";const n=this.showInlineError||this.hasHelperSlot?this.grpId+"-more":"";return t(i,Object.assign({},this.checkboxTypes),t("fieldset",{disabled:this.disabled,class:{nanogroupcb:true,"show-error":this.showErrorMsg}},t("legend",{class:"nanogroupcb__legend",id:o},this.legend),t("div",{class:"nanogroupcb__cbs",role:"group","aria-labelledby":o+" "+n},t("slot",null)),(this.showInlineError||this.hasHelperSlot)&&t("div",{class:"nanogroupcb__more",id:n},!!this.showInlineError?t("div",{class:"nanogroupcb__error"},this.errorMessage):"",t("div",{class:"nanogroupcb__help"},t("slot",{name:"helper"})))))}get host(){return r(this)}static get watchers(){return{value:["handleValuePropChange"],min:["handleCbChange"],max:["handleCbChange"],nativeCbs:["customValidate"],checkboxes:["handleComponentChange","handleDisabledChange"],disabled:["handleDisabledChange"]}}};let h=0;c.style=a;export{c as nano_checkbox_group};
-//# sourceMappingURL=p-0d1ca590.entry.js.map
+import{r as o,c as n,h as t,a as i,g as r}from"./p-f6a8467a.js";import{g as e}from"./p-411bb8f1.js";import{d as s}from"./p-9746b0a5.js";const a='.sc-nano-checkbox-group-h{box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:0;--control-margin-bottom:0;--control-margin-start:0;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, "currentcolor");--label-color--invalid:var(--nano-input-label-color-invalid, "currentcolor");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));display:block}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{box-sizing:inherit}[types-tag].sc-nano-checkbox-group-h,[types-segment].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:8px;--control-margin-bottom:6px;--control-margin-start:0}[types-checkbox].sc-nano-checkbox-group-h,[types-radio].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:10px;--control-margin-bottom:6px;--control-margin-start:0}.nanogroupcb.sc-nano-checkbox-group{border:none;margin:0;padding:0}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group,.nanogroupcb__more.sc-nano-checkbox-group{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nanogroupcb__legend.sc-nano-checkbox-group{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1.5;white-space:normal;display:block;width:100%}[invalid].sc-nano-checkbox-group-h:not([invalid=false]) .nanogroupcb__legend.sc-nano-checkbox-group{color:var(--label-color--invalid)}.nanogroupcb__more.sc-nano-checkbox-group{height:1em;-webkit-margin-before:calc(var(--label-padding) - var(--control-margin-bottom));margin-block-start:calc(var(--label-padding) - var(--control-margin-bottom));-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-after:var(--label-padding);margin-block-end:var(--label-padding);-webkit-margin-start:3px;margin-inline-start:3px;position:relative}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:1}.nanogroupcb__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group{opacity:1}.nanogroupcb__help.sc-nano-checkbox-group{font-style:italic;opacity:1;color:var(--help-msg-color)}.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:0}.nanogroupcb__cbs.sc-nano-checkbox-group{margin:0;padding:0;line-height:1;display:flex;flex-wrap:wrap}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]),.nanogroupcb__cbs .sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]){--check-base-size:1.2em;font-size:0.85em}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-inline:var(--control-margin-start) var(--control-margin-end);margin-block:var(--control-margin-top) var(--control-margin-bottom)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{-webkit-margin-start:var(--control-margin-start);margin-inline-start:var(--control-margin-start);-webkit-margin-end:var(--control-margin-end);margin-inline-end:var(--control-margin-end)}}';const c=class{constructor(t){o(this,t);this.nanoChange=n(this,"nanoChange",7);this.nanoValidate=n(this,"nanoValidate",7);this.grpId=`nano-checkbox-group-${h++}`;this.ignoreValueSet=false;this.handleInvalid=o=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(!!this.showInlineError)o.preventDefault();this.showInlineValidation(o)};this.showInlineValidation=o=>{if(!this.nativeCbs||!this.nativeCbs.length)return;if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.showErrorMsg=false;this._invalid=false;this.nativeCbs.forEach(((o,n)=>{if(!o.validity.valid){this.errorMessage=o.validationMessage;this.showErrorMsg=true;this._invalid=true}}));this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:o})};this.checkboxes=undefined;this.nativeCbs=undefined;this.errorMessage="";this.showErrorMsg=false;this.hasHelperSlot=false;this.validateOn="submitThenDirty";this.showInlineError=true;this.min=0;this.max=null;this.disabled=null;this.legend="";this._invalid=false;this.value=undefined}get invalid(){return this._invalid}get validityMessage(){return this.errorMessage}handleValuePropChange(){this.nanoChange.emit(this.value);if(this.ignoreValueSet)return;this.setCbValue()}async reportValidity(o){return new Promise((n=>{if(o){this.customValidate();this.showInlineValidation()}setTimeout((()=>{n({isValid:!this.invalid,errorMessage:this.errorMessage})}),50)}))}async showError(o,n){let t;if(!this.checkboxes)return;if(n)t=this.checkboxes.find((o=>o.value===n));if(!t)t=this.checkboxes[0];if(!t)return;this.errorMessage=o;await t.setError(o);if(!!this.showInlineError)this.showInlineValidation()}handleValueChange(o){if(o.target===this.host)return;this.setInteralValue()}handleCbChange(){if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}customValidate(){if(!this.nativeCbs||!this.nativeCbs.length||!this.checkboxes)return;const o=this.nativeCbs.filter((o=>(o===null||o===void 0?void 0:o.type)==="radio"));if(o&&o.length&&(this.showErrorMsg||this.validateOn==="dirty")){const n=o.find((o=>o.required));const t=o.filter((o=>o.checked));if(n&&t){this.checkboxes.forEach((o=>o.reportValidity(false)));return false}else if(n&&!t)return true}const n=this.nativeCbs.filter((o=>(o===null||o===void 0?void 0:o.type)==="checkbox"));if(!n||!n.length)return;const t=n.filter((o=>o.checked));const i=n.find((o=>o.required));let r=false;if(i&&!t.find((o=>o===i)))return true;this.checkboxes.forEach(((o,n)=>{const i=this.nativeCbs[n];o.setError("");i.setCustomValidity("");if(this.min&&t.length<this.min){this.errorMessage=`You must select a minimum of ${this.min} values.`;r=true}if(this.max&&t.length>this.max){this.errorMessage=`Only up to ${this.max} values are allowed.`;r=true}if(r){o.setError(this.errorMessage,this.showErrorMsg);i.setCustomValidity(this.errorMessage)}}));return r}handleComponentChange(){var o;if(!((o=this.checkboxes)===null||o===void 0?void 0:o.length))return;this.checkboxTypes=e(this.checkboxes.map((o=>"types-"+o.type)))}handleDisabledChange(){var o;if(this.disabled===null||!((o=this.checkboxes)===null||o===void 0?void 0:o.length))return;this.checkboxes.map((o=>o.disabled=this.disabled))}setInteralValue(){var o;this.ignoreValueSet=true;const n=this.nativeCbs.filter((o=>(o===null||o===void 0?void 0:o.type)==="radio"));if(n===null||n===void 0?void 0:n.length){this.value=((o=n.find((o=>o.checked)))===null||o===void 0?void 0:o.value)||null;return}this.value=this.checkboxes.flatMap((o=>o.checked?[o.value]:[]));requestAnimationFrame((()=>this.ignoreValueSet=false))}setCbValue(){this.checkboxes.forEach((o=>{if(o.value===this.value||Array.isArray(this.value)&&this.value.includes(o.value)){o.checked=true}}))}attachSlotObserver(){if(!!this.mo||!window["MutationObserver"])return;const o=this.mo=new MutationObserver((()=>this.handleSlotChange()));o.observe(this.host,{childList:true})}async handleSlotChange(){this.checkboxes=Array.from(this.host.querySelectorAll("nano-checkbox"));this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]');this.nativeCbs=await Promise.all(this.checkboxes.reduce(((o,n)=>{o.push(n.getInputElement());return o}),[]));this.nativeCbs.forEach((o=>{if(o)o.addEventListener("invalid",this.handleInvalid)}))}componentWillLoad(){this.showInlineValidation=s(this.showInlineValidation,50);this.customValidate=this.customValidate.bind(this);this.handleDisabledChange();this.handleSlotChange()}connectedCallback(){this.attachSlotObserver()}disconnectedCallback(){if(this.mo)this.mo.disconnect()}componentDidLoad(){this.handleComponentChange()}render(){const o=this.grpId+"-lbl";const n=this.showInlineError||this.hasHelperSlot?this.grpId+"-more":"";return t(i,Object.assign({},this.checkboxTypes),t("fieldset",{disabled:this.disabled,class:{nanogroupcb:true,"show-error":this.showErrorMsg}},t("legend",{class:"nanogroupcb__legend",id:o},this.legend),t("div",{class:"nanogroupcb__cbs",role:"group","aria-labelledby":o+" "+n},t("slot",null)),(this.showInlineError||this.hasHelperSlot)&&t("div",{class:"nanogroupcb__more",id:n},!!this.showInlineError?t("div",{class:"nanogroupcb__error"},this.errorMessage):"",t("div",{class:"nanogroupcb__help"},t("slot",{name:"helper"})))))}get host(){return r(this)}static get watchers(){return{value:["handleValuePropChange"],min:["handleCbChange"],max:["handleCbChange"],nativeCbs:["customValidate"],checkboxes:["handleComponentChange","handleDisabledChange"],disabled:["handleDisabledChange"]}}};let h=0;c.style=a;export{c as nano_checkbox_group};
+//# sourceMappingURL=p-2d43a82b.entry.js.map

package/dist/nano-components/p-2d43a82b.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["checkboxGroupCss","CheckboxGroup","this","grpId","grpIds","ignoreValueSet","handleInvalid","ev","_invalid","validateOn","showErrorMsg","customValidate","showInlineError","preventDefault","showInlineValidation","nativeCbs","length","forEach","cb","_i","validity","valid","errorMessage","validationMessage","nanoValidate","emit","isValid","invalid","originalEvent","validityMessage","handleValuePropChange","nanoChange","value","setCbValue","async","validateFirst","Promise","resolve","setTimeout","message","optVal","checkboxes","find","c","setError","handleValueChange","target","host","setInteralValue","handleCbChange","onlyRadios","filter","type","required","checked","rd","reportValidity","onlyCbs","i","nativeCb","setCustomValidity","min","max","handleComponentChange","_a","checkboxTypes","getClassMap","map","handleDisabledChange","disabled","radios","flatMap","requestAnimationFrame","Array","isArray","includes","attachSlotObserver","mo","window","MutationObserver","handleSlotChange","observe","childList","from","querySelectorAll","hasHelperSlot","querySelector","all","reduce","acc","push","getInputElement","addEventListener","componentWillLoad","debounce","bind","connectedCallback","disconnectedCallback","disconnect","componentDidLoad","render","legendId","moreId","h","Host","Object","assign","class","nanogroupcb","id","legend","role","name"],"sources":["./src/components/checkbox/checkbox-group.scss?tag=nano-checkbox-group&encapsulation=scoped","./src/components/checkbox/checkbox-group.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n  /**\n   * @prop --control-margin-top: Margin between controls. Default depends on control type;\n   * @prop --control-margin-end: Margin between controls. Default depends on control type;\n   * @prop --control-margin-bottom: Margin between controls. Default depends on control type;\n   * @prop --control-margin-start: Margin between controls. Default depends on control type;\n\n   * @prop --invalid-msg-color: Default #{nano-color(danger, base)};\n   * @prop --invalid-msg-font-size: Default #{$input-help-font-size};\n\n   * @prop --help-msg-color: Font color applied to slot=\"helper\". Default #{$input-help-color};\n\n   * @prop --label-color: Default #{$label-color};\n   * @prop --label-color--invalid: Default #{$label-color-invalid};\n   * @prop --label-font-size: Default #{$label-font-size};\n   * @prop --label-padding: space between legend and control. Default #{$input-padding-bottom};\n  */\n\n  --control-margin-top: 0;\n  --control-margin-end: 0;\n  --control-margin-bottom: 0;\n  --control-margin-start: 0;\n  --invalid-msg-color: #{nano-color(danger, base)};\n  --invalid-msg-font-size: #{$input-help-font-size};\n  --help-msg-color: #{$input-help-color};\n  --label-color: #{$label-color};\n  --label-color--invalid: #{$label-color-invalid};\n  --label-font-size: #{$label-font-size};\n  --label-padding: #{$input-padding-bottom};\n\n  display: block;\n\n  * {\n    box-sizing: inherit;\n  }\n}\n\n:host([types-tag]),\n:host([types-segment]) {\n  --control-margin-top: 0;\n  --control-margin-end: 8px;\n  --control-margin-bottom: 6px;\n  --control-margin-start: 0;\n}\n\n:host([types-checkbox]),\n:host([types-radio]) {\n  --control-margin-top: 0;\n  --control-margin-end: 10px;\n  --control-margin-bottom: 6px;\n  --control-margin-start: 0;\n}\n\n.nanogroupcb {\n  border: none;\n  margin: 0;\n  padding: 0;\n\n  &__error,\n  &__help,\n  &__more {\n    display: block;\n    width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  &__legend {\n    font-size: var(--label-font-size);\n    padding: 0 0 var(--label-padding);\n    margin: 0;\n    line-height: 1.5;\n    white-space: normal;\n    display: block;\n    width: 100%;\n\n    :host([invalid]:not([invalid='false'])) & {\n      color: var(--label-color--invalid);\n    }\n  }\n\n  &__more {\n    height: 1em;\n    margin-block-start:\n      calc(\n        var(--label-padding) - var(--control-margin-bottom)\n      );\n    margin-inline-end: 0;\n    margin-block-end: var(--label-padding);\n    margin-inline-start: 3px;\n    position: relative;\n  }\n\n  &__error,\n  &__help {\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    position: absolute;\n    font-size: var(--invalid-msg-font-size);\n    line-height: 1.2;\n    transition: 0.3s ease-out opacity;\n\n    .show-error & {\n      opacity: 1;\n    }\n  }\n\n  &__error {\n    color: var(--invalid-msg-color);\n    font-stretch: condensed;\n    opacity: 0;\n\n    .show-error & {\n      opacity: 1;\n    }\n  }\n\n  &__help {\n    font-style: italic;\n    opacity: 1;\n    color: var(--help-msg-color);\n\n    .show-error & {\n      opacity: 0;\n    }\n  }\n\n  &__cbs {\n    margin: 0;\n    padding: 0;\n    line-height: 1;\n    display: flex;\n    flex-wrap: wrap;\n\n    ::slotted(*:not([type='tag']):not([type='segment']):not([type='segment-pill'])) {\n      --check-base-size: 1.2em;\n\n      font-size: 0.85em;\n    }\n\n    ::slotted(*) {\n      margin-inline: var(--control-margin-start) var(--control-margin-end);\n      margin-block: var(--control-margin-top) var(--control-margin-bottom);\n    }\n  }\n}\n\n/* autoprefixer: ignore next */\n@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {\n  .nanogroupcb__cbs {\n    &::slotted(*),\n    ::slotted(*) {\n      margin-inline-start: var(--control-margin-start);\n      margin-inline-end: var(--control-margin-end);\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  h,\n  ComponentInterface,\n  State,\n  Listen,\n  Watch,\n  Host,\n  Method,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { getClassMap } from '../../utils/theme';\nimport { debounce } from '../../utils/throttle';\nimport type {\n  CssClassMap,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\n\n/**\n * `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\n * It provides a convenient place to anchor a collective label and any validation issues.\n *\n * @slot - Used for grouping checkboxes inside the group wrapper\n * @slot helper - helper text to accompany the form field underneath.\n */\n@Component({\n  tag: 'nano-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  scoped: true,\n})\nexport class CheckboxGroup implements ComponentInterface {\n  private mo?: MutationObserver;\n  private checkboxTypes: CssClassMap;\n  private grpId = `nano-checkbox-group-${grpIds++}`;\n  private ignoreValueSet = false;\n\n  @Element() host: HTMLNanoCheckboxGroupElement;\n\n  // internal state\n\n  @State() checkboxes?: HTMLNanoCheckboxElement[];\n  @State() nativeCbs: HTMLInputElement[];\n  @State() errorMessage: string = '';\n  @State() showErrorMsg = false;\n  @State() hasHelperSlot = false;\n\n  // public properties\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop() showInlineError = true;\n\n  /**\n   * The minimum number of checkboxes required to be valid. Only relevant for checkbox type controls.\n   * A validation error will be thrown if not enough controls are checked.\n   */\n  @Prop() min: number = 0;\n\n  /**\n   * The maximum number of checkboxes allowed. Only relevant for checkbox type controls.\n   * Other controls will automatically be disabled upon reaching this number.\n   */\n  @Prop() max: number = null;\n\n  /**\n   * Disable all the nested form controls\n   */\n  @Prop({ reflect: true }) disabled: boolean | null = null;\n\n  /**\n   * A common label for children controls\n   */\n  @Prop() legend: string = '';\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    return this.errorMessage;\n  }\n\n  /** The current, collective checkbox value */\n  @Prop({ mutable: true }) value: string[] | string;\n\n  @Watch('value')\n  handleValuePropChange() {\n    this.nanoChange.emit(this.value);\n\n    // this change is coming from a checkbox being checked\n    // so don't then change the checkbox state\n    // (would cause an infinite loop)\n    if (this.ignoreValueSet) return;\n\n    // value has changed via prop directly, so update the checkbox's state\n    this.setCbValue();\n  }\n\n  // Public methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    return new Promise((resolve) => {\n      if (validateFirst) {\n        this.customValidate();\n        this.showInlineValidation();\n      }\n      setTimeout(() => {\n        resolve({\n          isValid: !this.invalid,\n          errorMessage: this.errorMessage,\n        });\n      }, 50);\n    });\n  }\n\n  /**\n   * Invalidate the field and show a custom error message.\n   * To clear the error you will need to re-call this method with an empty string.\n   * @param message - the error message to show\n   * @param optVal - optionally supply an option value to target which checkbox to show invalidate against (default is the first)\n   */\n  @Method()\n  async showError(message: string, optVal?: string) {\n    let cb: HTMLNanoCheckboxElement;\n    if (!this.checkboxes) return;\n    if (optVal) cb = this.checkboxes.find((c) => c.value === optVal);\n    if (!cb) cb = this.checkboxes[0];\n    if (!cb) return;\n\n    this.errorMessage = message;\n    await cb.setError(message);\n    if (!!this.showInlineError) this.showInlineValidation();\n  }\n\n  // Events\n\n  /**\n   * Called when a nested checkbox changes\n   */\n  @Event() nanoChange: EventEmitter<string | string[]>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // listeners & watchers\n\n  @Listen('nanoChange')\n  handleValueChange(ev: CustomEvent) {\n    if (ev.target === this.host) return;\n    this.setInteralValue();\n  }\n\n  /**\n   * Notes on validation... custom validation messages should be set\n   * no matter whether we show inline messages or native html5.\n   * this will mean forms cannot submit when there are pending validation issues.\n   */\n  @Listen('nanoChange')\n  @Watch('min')\n  @Watch('max')\n  handleCbChange() {\n    if (this.invalid) this.showErrorMsg = this._invalid = false;\n    this.customValidate();\n\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  @Watch('nativeCbs')\n  customValidate() {\n    if (!this.nativeCbs || !this.nativeCbs.length || !this.checkboxes) return;\n\n    const onlyRadios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n\n    if (\n      onlyRadios &&\n      onlyRadios.length &&\n      (this.showErrorMsg || this.validateOn === 'dirty')\n    ) {\n      const required = onlyRadios.find((cb) => cb.required);\n      const checked = onlyRadios.filter((cb) => cb.checked);\n\n      if (required && checked) {\n        this.checkboxes.forEach((rd) => rd.reportValidity(false));\n        return false;\n      } else if (required && !checked) return true;\n    }\n\n    // we only care about checkbox controls.\n    const onlyCbs = this.nativeCbs.filter((cb) => cb?.type === 'checkbox');\n    if (!onlyCbs || !onlyCbs.length) return;\n\n    const checked = onlyCbs.filter((cb) => cb.checked);\n    const required = onlyCbs.find((cb) => cb.required);\n    let invalid = false;\n\n    if (required && !checked.find((cb) => cb === required)) return true;\n\n    this.checkboxes.forEach((cb, i) => {\n      const nativeCb = this.nativeCbs[i];\n      cb.setError('');\n      nativeCb.setCustomValidity('');\n\n      if (this.min && checked.length < this.min) {\n        this.errorMessage = `You must select a minimum of ${this.min} values.`;\n        invalid = true;\n      }\n      if (this.max && checked.length > this.max) {\n        this.errorMessage = `Only up to ${this.max} values are allowed.`;\n        invalid = true;\n      }\n\n      if (invalid) {\n        cb.setError(this.errorMessage, this.showErrorMsg);\n        // bit fugly. We're just doing this 'cos stencil\n        // methods are async and we want the validity message\n        // asap to keep things in sync\n        nativeCb.setCustomValidity(this.errorMessage);\n      }\n    });\n    return invalid;\n  }\n\n  @Watch('checkboxes')\n  handleComponentChange() {\n    if (!this.checkboxes?.length) return;\n\n    this.checkboxTypes = getClassMap(\n      this.checkboxes.map((cb) => 'types-' + cb.type)\n    );\n  }\n\n  @Watch('disabled')\n  @Watch('checkboxes')\n  handleDisabledChange() {\n    if (this.disabled === null || !this.checkboxes?.length) return;\n    this.checkboxes.map((cb) => (cb.disabled = this.disabled));\n  }\n\n  // private methods\n\n  private setInteralValue() {\n    this.ignoreValueSet = true;\n    const radios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n    if (radios?.length) {\n      this.value = radios.find((cb) => cb.checked)?.value || null;\n      return;\n    }\n    this.value = this.checkboxes.flatMap((cb) =>\n      cb.checked ? [cb.value] : []\n    );\n    requestAnimationFrame(() => (this.ignoreValueSet = false));\n  }\n\n  private setCbValue() {\n    this.checkboxes.forEach((cb) => {\n      if (\n        cb.value === this.value ||\n        (Array.isArray(this.value) && this.value.includes(cb.value))\n      ) {\n        cb.checked = true;\n      }\n    });\n  }\n\n  private attachSlotObserver() {\n    if (!!this.mo || !window['MutationObserver']) return;\n    const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));\n    mo.observe(this.host, { childList: true });\n  }\n\n  private async handleSlotChange() {\n    this.checkboxes = Array.from(this.host.querySelectorAll('nano-checkbox'));\n    this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n    this.nativeCbs = await Promise.all(\n      this.checkboxes.reduce((acc: Array<Promise<HTMLInputElement>>, cb) => {\n        acc.push(cb.getInputElement());\n        return acc;\n      }, [])\n    );\n\n    this.nativeCbs.forEach((cb) => {\n      if (cb) cb.addEventListener('invalid', this.handleInvalid);\n    });\n  }\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = true;\n\n    if (this.validateOn === 'submit') {\n      this._invalid = this.showErrorMsg = this.customValidate();\n    }\n    if (!!this.showInlineError) ev.preventDefault();\n\n    this.showInlineValidation(ev);\n  };\n\n  private showInlineValidation = (ev?: Event) => {\n    if (!this.nativeCbs || !this.nativeCbs.length) return;\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.showErrorMsg = false;\n    this._invalid = false;\n\n    this.nativeCbs.forEach((cb, _i) => {\n      if (!cb.validity.valid) {\n        this.errorMessage = cb.validationMessage;\n        this.showErrorMsg = true;\n        this._invalid = true;\n      }\n    });\n\n    this.nanoValidate.emit({\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n      originalEvent: ev,\n    });\n  };\n\n  // stencil hooks\n\n  componentWillLoad() {\n    this.showInlineValidation = debounce(this.showInlineValidation, 50);\n    this.customValidate = this.customValidate.bind(this);\n    this.handleDisabledChange();\n    this.handleSlotChange();\n  }\n\n  connectedCallback() {\n    this.attachSlotObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.handleComponentChange();\n  }\n\n  render() {\n    const legendId = this.grpId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';\n\n    return (\n      <Host {...this.checkboxTypes}>\n        <fieldset\n          disabled={this.disabled}\n          class={{ nanogroupcb: true, 'show-error': this.showErrorMsg }}\n        >\n          <legend class=\"nanogroupcb__legend\" id={legendId}>\n            {this.legend}\n          </legend>\n          <div\n            class=\"nanogroupcb__cbs\"\n            role=\"group\"\n            aria-labelledby={legendId + ' ' + moreId}\n          >\n            <slot />\n          </div>\n          {(this.showInlineError || this.hasHelperSlot) && (\n            <div class=\"nanogroupcb__more\" id={moreId}>\n              {!!this.showInlineError ? (\n                <div class=\"nanogroupcb__error\">{this.errorMessage}</div>\n              ) : (\n                ''\n              )}\n              <div class=\"nanogroupcb__help\">\n                <slot name=\"helper\" />\n              </div>\n            </div>\n          )}\n        </fieldset>\n      </Host>\n    );\n  }\n}\n\nlet grpIds = 0;\n"],"mappings":"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"}

package/dist/nano-components/{p-25cb3889.entry.js → p-691c4268.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,h as o,c as i,a as n,g as e}from"./p-f6a8467a.js";import{f as s}from"./p-f8f89998.js";import{P as r}from"./p-51bc8b59.js";const a=".sc-nano-icon-button-h{box-sizing:border-box}*.sc-nano-icon-button,*.sc-nano-icon-button::before,*.sc-nano-icon-button::after{box-sizing:border-box}[hidden].sc-nano-icon-button{display:none !important}.sc-nano-icon-button-h{display:inline-block;--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#007495;--nano-color-base:var(--color, #687576);--background:transparent;--padding:var(--nano-spacing-small, 8px)}.icon-button.sc-nano-icon-button{flex:0 0 auto;display:flex;align-items:center;border:none;border-radius:var(--border-radius);background:var(--background);font-size:inherit;color:var(--color);padding:var(--padding);cursor:pointer;-webkit-appearance:none;appearance:none;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out}.icon-button.sc-nano-icon-button:hover:not(.icon-button--disabled),.icon-button.sc-nano-icon-button:focus:not(.icon-button--disabled){color:var(--hover-color);--nano-color-base:var(--hover-color)}.icon-button.sc-nano-icon-button:active:not(.icon-button--disabled){color:var(--active-color);--nano-color-base:var(--active-color)}.icon-button.sc-nano-icon-button:focus{outline:none}.icon-button--disabled.sc-nano-icon-button{opacity:0.5;cursor:not-allowed;pointer-events:none}.focus-visible.icon-button.sc-nano-icon-button:focus{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";const p=class{constructor(o){t(this,o);this.iconName=undefined;this.iconSrc=undefined;this.type="button";this.name=undefined;this.value=undefined;this.label=undefined;this.showTooltip=false;this.disabled=false;this.href=undefined;this.target=undefined}async setFocus(){this.button.focus()}componentDidLoad(){s.observe(this.button)}connectedCallback(){if(this.button)s.observe(this.button)}disconnectedCallback(){s.unobserve(this.button)}content(){const t=this.href===undefined?"button":"a";return o(t,{part:"base",ref:t=>this.button=t,class:{"icon-button":true,"icon-button--disabled":this.disabled},"aria-label":this.label,name:this.name,value:this.value,href:this.href||undefined,target:this.href&&this.target?this.target:undefined,type:!this.href&&this.type?this.type:undefined},o("nano-icon",{name:this.iconName,src:this.iconSrc,"aria-hidden":"true",lazy:false,part:"icon"}))}render(){if(this.showTooltip){return o("nano-tooltip",{content:this.label},this.content())}return this.content()}};p.style=a;const l=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip{max-inline-size:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:black;font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:white;opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));transform:translateY(10px) translateZ(0);transform-origin:bottom;transition:opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);white-space:normal}.tooltip-arrow{content:"";position:absolute;inline-size:0;block-size:0;color:black;transition:0.2s ease transform}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000)}.tooltip-positioner[data-popper-placement^=top] .tooltip{transform-origin:bottom;transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;transform:none;transition-delay:var(--show-delay);transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{inset-block-end:100%;inset-inline-start:calc(50% - 5px);-webkit-border-after:5px solid;border-block-end:5px solid;-webkit-border-start:5px solid transparent;border-inline-start:5px solid transparent;-webkit-border-end:5px solid transparent;border-inline-end:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{inset-inline-start:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{inset-inline:auto 5px}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{inset-block-start:100%;inset-inline-start:calc(50% - 5px);-webkit-border-before:5px solid;border-block-start:5px solid;-webkit-border-start:5px solid transparent;border-inline-start:5px solid transparent;-webkit-border-end:5px solid transparent;border-inline-end:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{inset-inline-start:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{inset-inline:auto 5px}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{inset-block-start:calc(50% - 5px);inset-inline-start:100%;-webkit-border-start:5px solid;border-inline-start:5px solid;-webkit-border-before:5px solid transparent;border-block-start:5px solid transparent;-webkit-border-after:5px solid transparent;border-block-end:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{inset-block-start:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{inset-block:auto 5px}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{inset-block-start:calc(50% - 5px);inset-inline-end:100%;-webkit-border-end:5px solid;border-inline-end:5px solid;-webkit-border-before:5px solid transparent;border-block-start:5px solid transparent;-webkit-border-after:5px solid transparent;border-block-end:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{inset-block-start:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{inset-block:auto 5px}';const d=class{constructor(o){t(this,o);this.nanoShow=i(this,"nanoShow",7);this.nanoAfterShow=i(this,"nanoAfterShow",7);this.nanoHide=i(this,"nanoHide",7);this.nanoAfterHide=i(this,"nanoAfterHide",7);this.isVisible=false;this.label="";this.handleBlur=()=>{if(this.hasTrigger("focus")){this.hide()}};this.handleClick=()=>{if(this.hasTrigger("click")){this.open?this.hide():this.show()}};this.handleFocus=()=>{if(this.hasTrigger("focus")){this.show()}};this.handleKeyDown=t=>{if(this.open&&t.key==="Escape"){t.stopPropagation();this.hide()}};this.handleMouseOver=()=>{if(this.hasTrigger("hover")){this.show()}};this.handleMouseOut=()=>{if(this.hasTrigger("hover")){this.hide()}};this.handleSlotChange=()=>{this.target=this.getTarget()};this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.hoist=false;this.trigger="hover focus"}get target(){return this._target}set target(t){if(t!==this._target&&this._target){this._target.removeAttribute("aria-label")}t.setAttribute("aria-label",this.label);this._target=t}setLabel(){const t=Array.from(this.host.querySelectorAll('[slot="content"]'));const o=t.map((t=>t.textContent)).join(" ").trim();this.label=o||this.content;this.target.setAttribute("aria-label",this.label)}handleOpenChange(){this.open?this.show():this.hide()}async show(){if(this.isVisible||this.disabled){return}const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;this.popover.show()}async hide(){if(!this.isVisible){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return}this.isVisible=false;this.open=false;this.popover.hide()}getTarget(){const t=[...Array.from(this.host.children)].find((t=>t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"));if(!t){throw new Error("Invalid tooltip target: no child element was found.")}return t}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}syncOptions(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit()})}componentDidLoad(){this.target=this.getTarget();this.popover=new r(this.target,this.tooltipPositioner);this.syncOptions();this.setLabel();this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){this.popover.destroy()}render(){return o(n,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick},o("slot",{onSlotchange:this.handleSlotChange}),o("div",{ref:t=>this.tooltipPositioner=t,class:"tooltip-positioner"},o("div",{part:"base",ref:t=>this.tooltip=t,class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},o("slot",{name:"content",onSlotchange:()=>this.setLabel()},this.content),o("div",{class:"tooltip-arrow","data-popper-arrow":true}))))}get host(){return e(this)}static get watchers(){return{content:["setLabel"],open:["handleOpenChange"]}}};d.style=l;export{p as nano_icon_button,d as nano_tooltip};
-//# sourceMappingURL=p-25cb3889.entry.js.map
+import{r as t,h as o,c as i,a as n,g as e}from"./p-f6a8467a.js";import{f as s}from"./p-f8f89998.js";import{P as r}from"./p-51bc8b59.js";const a=".sc-nano-icon-button-h{box-sizing:border-box}*.sc-nano-icon-button,*.sc-nano-icon-button::before,*.sc-nano-icon-button::after{box-sizing:border-box}[hidden].sc-nano-icon-button{display:none !important}.sc-nano-icon-button-h{display:inline-block;--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#007495;--nano-color-base:var(--color, #687576);--background:transparent;--padding:var(--nano-spacing-small, 8px)}.icon-button.sc-nano-icon-button{flex:0 0 auto;display:flex;align-items:center;border:none;border-radius:var(--border-radius);background:var(--background);font-size:inherit;color:var(--color);padding:var(--padding);cursor:pointer;-webkit-appearance:none;appearance:none;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out}.icon-button.sc-nano-icon-button:hover:not(.icon-button--disabled),.icon-button.sc-nano-icon-button:focus:not(.icon-button--disabled){color:var(--hover-color);--nano-color-base:var(--hover-color)}.icon-button.sc-nano-icon-button:active:not(.icon-button--disabled){color:var(--active-color);--nano-color-base:var(--active-color)}.icon-button.sc-nano-icon-button:focus{outline:none}.icon-button--disabled.sc-nano-icon-button{opacity:0.5;cursor:not-allowed;pointer-events:none}.focus-visible.icon-button.sc-nano-icon-button:focus{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";const p=class{constructor(o){t(this,o);this.iconName=undefined;this.iconSrc=undefined;this.type="button";this.name=undefined;this.value=undefined;this.label=undefined;this.showTooltip=false;this.disabled=false;this.href=undefined;this.target=undefined}async setFocus(){this.button.focus()}componentDidLoad(){s.observe(this.button)}connectedCallback(){if(this.button)s.observe(this.button)}disconnectedCallback(){s.unobserve(this.button)}content(){const t=this.href===undefined?"button":"a";return o(t,{part:"base",ref:t=>this.button=t,class:{"icon-button":true,"icon-button--disabled":this.disabled},"aria-label":this.label,name:this.name,value:this.value,href:this.href||undefined,target:this.href&&this.target?this.target:undefined,type:!this.href&&this.type?this.type:undefined},o("nano-icon",{name:this.iconName,src:this.iconSrc,"aria-hidden":"true",lazy:false,part:"icon"}))}render(){if(this.showTooltip){return o("nano-tooltip",{content:this.label},this.content())}return this.content()}};p.style=a;const l=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip{max-inline-size:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:black;font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:white;opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));transform:translateY(10px) translateZ(0);transform-origin:bottom;transition:opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);white-space:normal}.tooltip-arrow{content:"";position:absolute;inline-size:0;block-size:0;color:black;transition:0.2s ease transform}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000)}.tooltip-positioner[data-popper-placement^=top] .tooltip{transform-origin:bottom;transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;transform:none;transition-delay:var(--show-delay);transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{inset-block-end:100%;inset-inline-start:calc(50% - 5px);-webkit-border-after:5px solid;border-block-end:5px solid;-webkit-border-start:5px solid transparent;border-inline-start:5px solid transparent;-webkit-border-end:5px solid transparent;border-inline-end:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{inset-inline-start:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{inset-inline:auto 5px}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{inset-block-start:100%;inset-inline-start:calc(50% - 5px);-webkit-border-before:5px solid;border-block-start:5px solid;-webkit-border-start:5px solid transparent;border-inline-start:5px solid transparent;-webkit-border-end:5px solid transparent;border-inline-end:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{inset-inline-start:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{inset-inline:auto 5px}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{inset-block-start:calc(50% - 5px);inset-inline-start:100%;-webkit-border-start:5px solid;border-inline-start:5px solid;-webkit-border-before:5px solid transparent;border-block-start:5px solid transparent;-webkit-border-after:5px solid transparent;border-block-end:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{inset-block-start:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{inset-block:auto 5px}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{inset-block-start:calc(50% - 5px);inset-inline-end:100%;-webkit-border-end:5px solid;border-inline-end:5px solid;-webkit-border-before:5px solid transparent;border-block-start:5px solid transparent;-webkit-border-after:5px solid transparent;border-block-end:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{inset-block-start:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{inset-block:auto 5px}';const d=class{constructor(o){t(this,o);this.nanoShow=i(this,"nanoShow",7);this.nanoAfterShow=i(this,"nanoAfterShow",7);this.nanoHide=i(this,"nanoHide",7);this.nanoAfterHide=i(this,"nanoAfterHide",7);this.isVisible=false;this.label="";this.handleBlur=()=>{if(this.hasTrigger("focus")){this.hide()}};this.handleClick=()=>{if(this.hasTrigger("click")){this.open?this.hide():this.show()}};this.handleFocus=()=>{if(this.hasTrigger("focus")){this.show()}};this.handleKeyDown=t=>{if(this.open&&t.key==="Escape"){t.stopPropagation();this.hide()}};this.handleMouseOver=()=>{if(this.hasTrigger("hover")){this.show()}};this.handleMouseOut=()=>{if(this.hasTrigger("hover")){this.hide()}};this.handleSlotChange=()=>{this.target=this.getTarget()};this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.hoist=false;this.trigger="hover focus"}get target(){return this._target}set target(t){if(t!==this._target&&this._target){this._target.removeAttribute("aria-label")}t.setAttribute("aria-label",this.label);this._target=t}setLabel(){const t=Array.from(this.host.querySelectorAll('[slot="content"]'));const o=t.map((t=>t.textContent)).join(" ").trim();if(!this.target){this.target=this.getTarget();if(!this.target)return}this.label=o||this.content;this.target.setAttribute("aria-label",this.label)}handleOpenChange(){this.open?this.show():this.hide()}async show(){if(this.isVisible||this.disabled){return}const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;this.popover.show()}async hide(){if(!this.isVisible){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return}this.isVisible=false;this.open=false;this.popover.hide()}getTarget(){const t=[...Array.from(this.host.children)].find((t=>t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"));if(!t){throw new Error("Invalid tooltip target: no child element was found.")}return t}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}syncOptions(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit()})}componentDidLoad(){this.target=this.getTarget();this.popover=new r(this.target,this.tooltipPositioner);this.syncOptions();this.setLabel();this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){this.popover.destroy()}render(){return o(n,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick},o("slot",{onSlotchange:this.handleSlotChange}),o("div",{ref:t=>this.tooltipPositioner=t,class:"tooltip-positioner"},o("div",{part:"base",ref:t=>this.tooltip=t,class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},o("slot",{name:"content",onSlotchange:()=>this.setLabel()},this.content),o("div",{class:"tooltip-arrow","data-popper-arrow":true}))))}get host(){return e(this)}static get watchers(){return{content:["setLabel"],open:["handleOpenChange"]}}};d.style=l;export{p as nano_icon_button,d as nano_tooltip};
+//# sourceMappingURL=p-691c4268.entry.js.map