@nanoporetech-digital/components 4.5.0 → 4.5.2

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-438fd94a.js';
 import './index-dad5627b.js';
 import './math-c02ddfda.js';
 import './throttle-7836544e.js';

package/dist/esm/{slot-c38a2b92.js → slot-a4f6e2af.js}

@@ -17,11 +17,9 @@ function getTextContent(slot) {
   const nodes = slot.assignedNodes({ flatten: true });
   let text = '';
   [...nodes].map((node) => {
-    if (node.nodeType === Node.TEXT_NODE) {
-      text += node.textContent;
-    }
+    text += node.textContent + ' ';
   });
-  return text;
+  return text.trim();
 }
 /**
  * Determines whether an element has a slot. If name is specified, the function will look for a corresponding named
@@ -52,4 +50,4 @@ function hasSlot(el, name) {
 
 export { getTextContent as g, hasSlot as h };
 
-//# sourceMappingURL=slot-c38a2b92.js.map
+//# sourceMappingURL=slot-a4f6e2af.js.map

package/dist/esm/slot-a4f6e2af.js.map

@@ -0,0 +1 @@
+{"file":"slot-a4f6e2af.js","mappings":";;;AAAA;;;;;;AAuBA;;;;;;SAMgB,cAAc,CAAC,IAAqB;EAClD,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;EACpD,IAAI,IAAI,GAAG,EAAE,CAAC;EAEd,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI;IAClB,IAAI,IAAI,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC;GAChC,CAAC,CAAC;EAEH,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;AACrB,CAAC;AAED;;;;;;;SAOgB,OAAO,CAAC,EAAe,EAAE,IAAa;;EAEpD,IAAI,IAAI,EAAE;IACR,OAAO,EAAE,CAAC,aAAa,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC;GACtD;;EAGD,OAAO,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI;IAC9C,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;MACtE,OAAO,IAAI,CAAC;KACb;IAED,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;MACvC,MAAM,EAAE,GAAG,IAAmB,CAAC;MAC/B,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;QAC5B,OAAO,IAAI,CAAC;OACb;KACF;IAED,OAAO,KAAK,CAAC;GACd,CAAC,CAAC;AACL;;;;","names":[],"sources":["./src/utils/slot.ts"],"sourcesContent":["/**\n * Given a slot, this function iterates over all of its assigned elements and text nodes and returns the concatenated\n * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n * @param slot\n * @returns a concatenated string from html and text nodes\n */\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n  const nodes = slot.assignedNodes({ flatten: true });\n  let html = '';\n\n  [...nodes].map((node) => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      html += (node as HTMLElement).outerHTML;\n    }\n\n    if (node.nodeType === Node.TEXT_NODE) {\n      html += node.textContent;\n    }\n  });\n\n  return html;\n}\n\n/**\n * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n * string. This is useful because we can't use slot.textContent as an alternative.\n * @param slot\n * @returns a concatenated string of text\n */\nexport function getTextContent(slot: HTMLSlotElement): string {\n  const nodes = slot.assignedNodes({ flatten: true });\n  let text = '';\n\n  [...nodes].map((node) => {\n    text += node.textContent + ' ';\n  });\n\n  return text.trim();\n}\n\n/**\n * Determines whether an element has a slot. If name is specified, the function will look for a corresponding named\n * slot, otherwise it will look for a \"default\" slot (e.g. a non-empty text node or an element with no slot attribute).\n * @param el\n * @param name\n * @returns boolean\n */\nexport function hasSlot(el: HTMLElement, name?: string) {\n  // Look for a named slot\n  if (name) {\n    return el.querySelector(`[slot=\"${name}\"]`) !== null;\n  }\n\n  // Look for a default slot\n  return [...Array.from(el.childNodes)].some((node) => {\n    if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== '') {\n      return true;\n    }\n\n    if (node.nodeType === node.ELEMENT_NODE) {\n      const el = node as HTMLElement;\n      if (!el.hasAttribute('slot')) {\n        return true;\n      }\n    }\n\n    return false;\n  });\n}\n"],"version":3}

package/dist/esm/{table.worker-5d3c7463.js → table.worker-7c5b7b44.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-438fd94a.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-7c5b7b44.js.map

package/dist/esm/table.worker-7c5b7b44.js.map

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

package/dist/nano-assets/hash.txt

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

package/dist/nano-components/nano-components.css

@@ -1 +1 @@
-:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.nano-toast-stack{position:fixed;z-index:var(--nano-layer-index-modal, 700);inline-size:28rem;max-inline-size:100%;max-block-size:100%;overflow:auto}.nano-toast-stack--tr{inset-block-start:0;inset-inline-end:0}.nano-toast-stack--tl{inset-block-start:0;inset-inline-start:0}.nano-toast-stack--br{inset-block-end:0;inset-inline-end:0}.nano-toast-stack--bl{inset-block-end:0;inset-inline-start:0}nano-resize-observe{visibility:visible !important;display:block}body:not(.nano-eager) nano-algolia-filter,body:not(.nano-eager) nano-algolia-input,body:not(.nano-eager) nano-algolia-pagination,body:not(.nano-eager) nano-algolia-results,body:not(.nano-eager) nano-details,body:not(.nano-eager) nano-drawer,body:not(.nano-eager) nano-grid-item,body:not(.nano-eager) nano-menu,body:not(.nano-eager) nano-range,body:not(.nano-eager) nano-rating,body:not(.nano-eager) nano-slide,body:not(.nano-eager) nano-slides,body:not(.nano-eager) nano-date-input,body:not(.nano-eager) nano-global-nav,body:not(.nano-eager) nano-global-search-results,body:not(.nano-eager) nano-menu-drawer,body:not(.nano-eager) nano-checkbox,body:not(.nano-eager) nano-checkbox-group,body:not(.nano-eager) nano-grid,body:not(.nano-eager) nano-option,body:not(.nano-eager) nano-algolia,body:not(.nano-eager) nano-date-picker,body:not(.nano-eager) nano-select,body:not(.nano-eager) nano-dropdown,body:not(.nano-eager) nano-nav-item,body:not(.nano-eager) nano-input,body:not(.nano-eager) nano-icon,body:not(.nano-eager) nano-tab-content,body:not(.nano-eager) nano-tab,body:not(.nano-eager) nano-alert,body:not(.nano-eager) nano-hero,body:not(.nano-eager) nano-img,body:not(.nano-eager) nano-datalist,body:not(.nano-eager) nano-split-pane,body:not(.nano-eager) nano-file-upload,body:not(.nano-eager) nano-table,body:not(.nano-eager) nano-overflow-nav{visibility:hidden}body:not(.nano-eager) .hydrated{visibility:inherit}body:not(.nano-eager) nano-tooltip:not(.hydrated)>[slot=content]{visibility:hidden}html{block-size:100%}[hidden]{display:none !important}nano-alert:not([showing]),nano-dialog:not([showing]){position:absolute;inline-size:1px;block-size:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}nano-grid:not(.ready),nano-slide:not([ready]),nano-slides:not([ready]){opacity:0}.nano-scroll-lock{overflow:hidden !important}
+:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.nano-toast-stack{position:fixed;z-index:var(--nano-layer-index-modal, 700);inline-size:28rem;max-inline-size:100%;max-block-size:100%;overflow:auto}.nano-toast-stack--tr{inset-block-start:0;inset-inline-end:0}.nano-toast-stack--tl{inset-block-start:0;inset-inline-start:0}.nano-toast-stack--br{inset-block-end:0;inset-inline-end:0}.nano-toast-stack--bl{inset-block-end:0;inset-inline-start:0}nano-resize-observe{visibility:visible !important;display:block}body:not(.nano-eager) nano-algolia-filter,body:not(.nano-eager) nano-algolia-input,body:not(.nano-eager) nano-algolia-pagination,body:not(.nano-eager) nano-algolia-results,body:not(.nano-eager) nano-details,body:not(.nano-eager) nano-drawer,body:not(.nano-eager) nano-grid-item,body:not(.nano-eager) nano-menu,body:not(.nano-eager) nano-range,body:not(.nano-eager) nano-rating,body:not(.nano-eager) nano-slide,body:not(.nano-eager) nano-slides,body:not(.nano-eager) nano-date-input,body:not(.nano-eager) nano-global-nav,body:not(.nano-eager) nano-global-search-results,body:not(.nano-eager) nano-menu-drawer,body:not(.nano-eager) nano-checkbox,body:not(.nano-eager) nano-checkbox-group,body:not(.nano-eager) nano-grid,body:not(.nano-eager) nano-option,body:not(.nano-eager) nano-algolia,body:not(.nano-eager) nano-date-picker,body:not(.nano-eager) nano-select,body:not(.nano-eager) nano-dropdown,body:not(.nano-eager) nano-nav-item,body:not(.nano-eager) nano-input,body:not(.nano-eager) nano-icon,body:not(.nano-eager) nano-tab-content,body:not(.nano-eager) nano-tab,body:not(.nano-eager) nano-alert,body:not(.nano-eager) nano-hero,body:not(.nano-eager) nano-img,body:not(.nano-eager) nano-datalist,body:not(.nano-eager) nano-split-pane,body:not(.nano-eager) nano-file-upload,body:not(.nano-eager) nano-table,body:not(.nano-eager) nano-overflow-nav{visibility:hidden}body:not(.nano-eager) .hydrated{visibility:inherit}body:not(.nano-eager) nano-tooltip:not(.hydrated)>[slot=content]{display:none}html{block-size:100%}[hidden]{display:none !important}nano-alert:not([showing]),nano-dialog:not([showing]){position:absolute;inline-size:1px;block-size:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}nano-grid:not(.ready),nano-slide:not([ready]),nano-slides:not([ready]){opacity:0}.nano-scroll-lock{overflow:hidden !important}

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-053eb1df",[[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-ac0ac58f",[[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-6d068d65",[[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-6f84aa85",[[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-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-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-ddd6b396",[[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)));
 //# 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":";;;mIAAA,MAAMA,EAAc,41UCsBpB,IAAIC,EAAc,E,MAcLC,EAAQ,M,wIACXC,KAAAC,QAAU,WAAWH,MAiNrBE,KAAAE,cAAiBC,IACvBH,KAAKI,UAAaD,EAAGE,OAA4BC,SAASC,KAAK,EAGzDP,KAAAQ,aAAgBL,IACtBH,KAAKS,QAAWN,EAAGE,OAA4BI,QAC/CT,KAAKU,cAAgB,KAAK,EAGpBV,KAAAW,YAAc,KACpBX,KAAKY,SAAW,KAChBZ,KAAKa,UAAUC,MAAM,EAGfd,KAAAe,WAAa,KACnBf,KAAKY,SAAW,MAChBZ,KAAKgB,SAASF,MAAM,E,eA7NqB,W,cAGQ,M,aAKQ,M,cA4Bd,M,WAMJ,K,kCAUI,M,UAWxB,W,wCAiB4C,M,cAgB7C,M,yCArFpBG,4BACEjB,KAAKkB,MAAMT,QAAUT,KAAKS,QAE1B,GAAIT,KAAKmB,YAAc,SAAWnB,KAAKoB,MAAQpB,KAAKS,QAAS,CAC3D,MAAMY,EAAOrB,KAAKsB,KAAKC,QAAQ,QAC/B,IAAIC,EACJ,GAAIH,EAAM,CACRG,EAAQC,MAAMC,KACZL,EAAKM,iBAAiB,uBAAuB3B,KAAKoB,U,KAE/C,CACLI,EAAQC,MAAMC,KACZE,SAASD,iBAAiB,uBAAuB3B,KAAKoB,WACtDS,QAAQC,IAAWA,EAAMP,QAAQ,S,CAErCC,EAAMO,KAAKC,IACT,GAAIA,IAAOhC,KAAKsB,KAAMU,EAAGvB,QAAU,KAAK,G,CAG5CT,KAAKiC,WAAWnB,KAAK,CAAEoB,MAAOlC,KAAKkC,MAAOzB,QAAST,KAAKS,S,CAoC1D0B,aACE,GAAI,CAAC,WAAY,SAAU,OAAOC,SAASpC,KAAKqC,MAC9CrC,KAAKmB,UAAY,gBACdnB,KAAKmB,UAAY,O,CAcxBmB,4BACEtC,KAAKS,QAAU,MACfT,KAAKkB,MAAMR,cAAgBV,KAAKU,a,CAQ9B6B,cACF,OAAOvC,KAAKI,Q,CAQVoC,sBACF,IAAKxC,KAAKkB,MAAO,MAAO,GACxB,OAAOlB,KAAKkB,MAAMuB,iB,CAkCpBxB,wBACE,GAAIjB,KAAKkB,MAAO,OAAOlB,KAAKkB,K,CAS9BD,qBACEyB,EAAyB,OAEzB,GAAIA,EAAe1C,KAAKkB,MAAMyB,iBAC9B3C,KAAKI,UAAYJ,KAAKkB,MAAMZ,SAASC,MAErC,MAAO,CACLqC,SAAU5C,KAAKuC,QACfM,aAAc7C,KAAKkB,MAAMuB,kB,CAS7BxB,eAAe6B,EAAiBC,EAAe,MAC7C,IAAK/C,KAAKkB,MAAO,OACjB,GAAI6B,EAAc/C,KAAKI,WAAa0C,EAAQE,OAC5ChD,KAAKkB,MAAM+B,kBAAkBH,E,CAO/B7B,iBACE,GAAIjB,KAAKkB,MAAO,CACdlB,KAAKkB,MAAMgC,QACXC,EAAaC,MAAMpD,KAAKkB,M,EAQ5BD,oBACE,GAAIjB,KAAKkB,MAAO,CACdlB,KAAKkB,MAAMmC,OACXF,EAAaC,MAAMpD,KAAKkB,MAAO,M,EAKnCoC,QAAQC,GACN,MAAMlC,EAAOrB,KAAKqB,KACdO,SAAS4B,cAAc,IAAMxD,KAAKqB,MAClCrB,KAAKsB,KAAKC,QAAQ,QACtB,IAAKF,GAAQkC,EAAElD,SAAWL,KAAKsB,KAAKC,QAAQ,QAAS,OAErDvB,KAAKS,QAAU,K,CA0BTgD,iBACNC,uBAAsB,IAAO1D,KAAKS,QAAUT,KAAKkB,MAAMT,S,CAKzDkD,oBACE3D,KAAKmC,Y,CAGPyB,mBACE5D,KAAKkB,MAAMR,cAAgBV,KAAKU,cAChCV,KAAKyD,iBACLN,EAAaU,QAAQ7D,KAAKkB,M,CAG5B4C,uBACEX,EAAaY,UAAU/D,KAAKkB,M,CAG9B8C,SACE,MAAMC,EAAUjE,KAAKC,QAAU,OAE/B,OACEiE,EAACC,EAAI,CAACC,MAAKC,OAAAC,OAAA,GAAOC,EAAmBvE,KAAKwE,SACxCN,EAAA,SACEE,MAAO,CACLK,OAAQ,KACR,kBAAmBzE,KAAKS,QACxB,kBAAmBT,KAAKuC,QACxB,mBAAoBvC,KAAK0E,SACzB,kBAAmB1E,KAAKY,SACxB,wBAAyBZ,KAAKU,eAEhCiE,QAAS3E,KAAKC,SAEdiE,EAAA,SACE7B,KAAMrC,KAAKmB,UACXC,KAAMpB,KAAKoB,KACXC,KAAMrB,KAAKqB,KACXuD,SAAU5E,KAAK4E,SACfnE,QAAST,KAAKS,QACdiE,SAAU1E,KAAK0E,SACfxC,MAAOlC,KAAKkC,MAAK,kBACA+B,EACjBY,OAAQ7E,KAAKe,WACb+D,QAAS9E,KAAKW,YACdoE,SAAU/E,KAAKQ,aACfwE,IAAM9D,GAAWlB,KAAKkB,MAAQA,EAC9B+D,GAAIjF,KAAKC,QACTiF,UAAWlF,KAAKE,gBAElBgE,EAAA,QAAME,MAAO,gCAAkCpE,KAAKqC,OAEpD6B,EAAA,OAAKe,GAAIhB,EAASG,MAAO,gCAAkCpE,KAAKqC,MAC7DrC,KAAKmF,SAAWnF,KAAKmF,MAAMnC,QAAUkB,EAAA,YAAOlE,KAAKmF,OAClDjB,EAAA,QAAMkB,OAAQpF,KAAKmF,SAAWnF,KAAKmF,MAAMnC,QACvCkB,EAAA,gB"}
+{"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-6d068d65.entry.js → p-25cb3889.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}';let d=0;const h=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.componentId=`tooltip-${++d}`;this.isVisible=false;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.handleTTSlotChange=()=>{const t=this.host.querySelector(`[id="${this.componentId}"]`)||this.defaultContent;Array.from(this.host.querySelectorAll('[slot="content"]')).filter((o=>o!==t)).forEach((o=>{t.appendChild(o)}))};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-describedby")}t.setAttribute("aria-describedby",this.componentId);this._target=t}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();const t=this.defaultContent;t.slot="content";this.host.appendChild(t);this.handleTTSlotChange();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.handleTTSlotChange},o("div",{ref:t=>this.defaultContent=t,id:this.componentId},this.content)),o("div",{class:"tooltip-arrow","data-popper-arrow":true}))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"]}}};h.style=l;export{p as nano_icon_button,h as nano_tooltip};
-//# sourceMappingURL=p-6d068d65.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();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

package/dist/nano-components/p-25cb3889.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["iconButtonCss","IconButton","async","this","button","focus","componentDidLoad","focusVisible","observe","connectedCallback","disconnectedCallback","unobserve","content","TagType","href","undefined","h","part","ref","el","class","disabled","label","name","value","target","type","iconName","src","iconSrc","lazy","render","showTooltip","tooltipCss","Tooltip","isVisible","handleBlur","hasTrigger","hide","handleClick","open","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","getTarget","_target","newTarget","removeAttribute","setAttribute","setLabel","contentSlotNodes","Array","from","host","querySelectorAll","textContent","map","node","join","trim","handleOpenChange","slShow","nanoShow","emit","defaultPrevented","popover","slHide","nanoHide","children","find","tagName","toLowerCase","getAttribute","Error","triggerType","triggers","trigger","split","includes","syncOptions","setOptions","strategy","hoist","placement","distance","skidding","transitionElement","tooltip","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","Popover","tooltipPositioner","hidden","componentDidUpdate","destroy","Host","onKeyDown","onMouseOver","onMouseOut","onBlur","onFocus","onClick","onSlotchange","role"],"sources":["./src/components/icon-button/icon-button.scss?tag=nano-icon-button&encapsulation=scoped","./src/components/icon-button/icon-button.tsx","./src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n    * @prop --border-radius: defaults to #{$border-radius-medium};\n    * @prop --border-radius: defaults to #{$border-radius-medium};\n    * @prop --color: defaults to #{map.get($colors, palegrey)};\n    * @prop --active-color: defaults to #{map.get($colors, darkblue--faded)};\n    * @prop --hover-color: defaults to #{map.get($colors, blue)};\n    * @prop --background: defaults to transparent;\n    * @prop --padding: defaults to #{$spacing-small};\n    */\n  display: inline-block;\n\n  --border-radius: #{$border-radius-medium};\n  --active-color: #{map.get($colors, darkblue--faded)};\n  --hover-color: #{map.get($colors, blue)};\n  --nano-color-base: var(--color, #{map.get($colors, mediumgrey)});\n  --background: transparent;\n  --padding: #{$spacing-small};\n}\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  border: none;\n  border-radius: var(--border-radius);\n  background: var(--background);\n  font-size: inherit;\n  color: var(--color);\n  padding: var(--padding);\n  cursor: pointer;\n  appearance: none;\n  transition: box-shadow #{$transition-xfast} ease-in-out;\n\n  &:hover:not(.icon-button--disabled),\n  &:focus:not(.icon-button--disabled) {\n    color: var(--hover-color);\n\n    --nano-color-base: var(--hover-color);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--active-color);\n\n    --nano-color-base: var(--active-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.focus-visible.icon-button:focus {\n  box-shadow: #{$control-focus-style};\n}\n","import { Component, Prop, h, ComponentInterface, Method } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n *\n * @part base - the main control (either `<a />` or `<button />`)\n * @part icon - a `<nano-icon />` component\n */\n\n@Component({\n  tag: 'nano-icon-button',\n  styleUrl: 'icon-button.scss',\n  scoped: true,\n})\nexport class IconButton implements ComponentInterface {\n  private button: HTMLButtonElement;\n\n  /** The name of the icon to draw. */\n  @Prop() iconName?: string;\n\n  /** An external URL of an SVG file. */\n  @Prop() iconSrc?: string;\n\n  /** The default behavior of the button. */\n  @Prop({ reflect: true }) type: 'submit' | 'reset' | 'button' = 'button';\n\n  /** The name of the button, submitted as a pair with the button’s value as part of the form data. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** Defines the value associated with the button’s name when it’s submitted with the form data. */\n  @Prop({ reflect: true }) value?: string;\n\n  /** A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does. */\n  @Prop() label!: string;\n\n  /** display the label as a `<nano-tooltip />` */\n  @Prop() showTooltip: boolean = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered. */\n  @Prop() href: string | undefined;\n\n  /** Specifies where to display the linked URL. Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. */\n  @Prop() target: string | undefined;\n\n  /** Sets focus on the internal button */\n  @Method()\n  async setFocus() {\n    this.button.focus();\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.button);\n  }\n\n  connectedCallback() {\n    if (this.button) focusVisible.observe(this.button);\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.button);\n  }\n\n  private content() {\n    const TagType = this.href === undefined ? 'button' : ('a' as any);\n\n    return (\n      <TagType\n        part=\"base\"\n        ref={(el) => (this.button = el)}\n        class={{\n          'icon-button': true,\n          'icon-button--disabled': this.disabled,\n        }}\n        aria-label={this.label}\n        name={this.name}\n        value={this.value}\n        href={this.href || undefined}\n        target={this.href && this.target ? this.target : undefined}\n        type={!this.href && this.type ? this.type : undefined}\n      >\n        <nano-icon\n          name={this.iconName}\n          src={this.iconSrc}\n          aria-hidden=\"true\"\n          lazy={false}\n          part=\"icon\"\n        />\n      </TagType>\n    );\n  }\n\n  render() {\n    if (this.showTooltip) {\n      return <nano-tooltip content={this.label}>{this.content()}</nano-tooltip>;\n    }\n    return this.content();\n  }\n}\n","@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --max-width: 20rem;\n  --hide-delay: 0s;\n  --hide-duration: 0.125s;\n  --hide-timing-function: ease;\n  --show-delay: 0.125s;\n  --show-duration: 0.125s;\n  --show-timing-function: ease;\n\n  /* autoprefixer: ignore next */\n  display: contents;\n}\n\n.tooltip {\n  $self: &;\n\n  max-inline-size: var(--max-width);\n  border-radius: #{$tooltip-border-radius};\n  background-color: black;\n  font-size: #{$tooltip-fontsize};\n  line-height: 1.5;\n  color: white;\n  opacity: 0;\n  padding: #{$tooltip-padding};\n  transform: translateY(10px) translateZ(0);\n  transform-origin: bottom;\n  transition: opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);\n  white-space: normal;\n\n  &-arrow {\n    content: '';\n    position: absolute;\n    inline-size: 0;\n    block-size: 0;\n    color: black;\n    transition: 0.2s ease transform;\n  }\n\n  &-positioner {\n    position: absolute;\n    z-index: #{$layer-index-tooltip};\n\n    &[data-popper-placement^='top'] #{$self} {\n      transform-origin: bottom;\n      transform: translateY(-10px) translateZ(0);\n    }\n\n    &[data-popper-placement^='bottom'] #{$self} {\n      transform-origin: top;\n    }\n\n    &[data-popper-placement^='left'] #{$self} {\n      transform-origin: right;\n    }\n\n    &[data-popper-placement^='right'] #{$self} {\n      transform-origin: left;\n    }\n\n    &.popover-visible #{$self} {\n      opacity: 1;\n      transform: none;\n      transition-delay: var(--show-delay);\n      transition-duration: var(--show-duration);\n      transition-timing-function: var(--show-timing-function);\n    }\n\n    // Arrow + bottom\n    &[data-popper-placement^='bottom'] #{$self}-arrow {\n      inset-block-end: 100%;\n      inset-inline-start: calc(50% - #{$tooltip-arrow-size});\n      border-block-end: #{$tooltip-arrow-size} solid;\n      border-inline-start: #{$tooltip-arrow-size} solid transparent;\n      border-inline-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='bottom-start'] #{$self}-arrow {\n      inset-inline-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='bottom-end'] #{$self}-arrow {\n      inset-inline: auto #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + top\n    &[data-popper-placement^='top'] #{$self}-arrow {\n      inset-block-start: 100%;\n      inset-inline-start: calc(50% - #{$tooltip-arrow-size});\n      border-block-start: #{$tooltip-arrow-size} solid;\n      border-inline-start: #{$tooltip-arrow-size} solid transparent;\n      border-inline-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='top-start'] #{$self}-arrow {\n      inset-inline-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='top-end'] #{$self}-arrow {\n      inset-inline: auto #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + left\n    &[data-popper-placement^='left'] #{$self}-arrow {\n      inset-block-start: calc(50% - #{$tooltip-arrow-size});\n      inset-inline-start: 100%;\n      border-inline-start: #{$tooltip-arrow-size} solid;\n      border-block-start: #{$tooltip-arrow-size} solid transparent;\n      border-block-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='left-start'] #{$self}-arrow {\n      inset-block-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='left-end'] #{$self}-arrow {\n      inset-block: auto #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + right\n    &[data-popper-placement^='right'] #{$self}-arrow {\n      inset-block-start: calc(50% - #{$tooltip-arrow-size});\n      inset-inline-end: 100%;\n      border-inline-end: #{$tooltip-arrow-size} solid;\n      border-block-start: #{$tooltip-arrow-size} solid transparent;\n      border-block-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='right-start'] #{$self}-arrow {\n      inset-block-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='right-end'] #{$self}-arrow {\n      inset-block: auto #{$tooltip-arrow-offset};\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  Watch,\n  h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\n/**\n * Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n */\n@Component({\n  tag: 'nano-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  private isVisible = false;\n  private popover: Popover;\n  private tooltipPositioner: HTMLElement;\n  private tooltip: any;\n\n  private _target: HTMLElement;\n  private get target() {\n    return this._target;\n  }\n  private set target(newTarget) {\n    if (newTarget !== this._target && this._target) {\n      this._target.removeAttribute('aria-label');\n    }\n    newTarget.setAttribute('aria-label', this.label);\n    this._target = newTarget;\n  }\n\n  private label = '';\n\n  @Element() host: HTMLNanoTooltipElement;\n\n  /** The tooltip's content. Alternatively, you can use the content slot. */\n  @Prop() content = '';\n\n  @Watch('content')\n  setLabel() {\n    const contentSlotNodes = Array.from(\n      this.host.querySelectorAll('[slot=\"content\"]')\n    );\n    const textContent = contentSlotNodes\n      .map((node) => node.textContent)\n      .join(' ')\n      .trim();\n\n    this.label = textContent || this.content;\n    this.target.setAttribute('aria-label', this.label);\n  }\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Set to true to disable the tooltip so it won't show when triggered. */\n  @Prop() disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @Prop() distance = 10;\n\n  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover focus';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  // Events\n\n  /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the tooltip has shown and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the tooltip has hidden and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // Public methods\n\n  /** Shows the tooltip. */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible || this.disabled) {\n      return;\n    }\n    const slShow = this.nanoShow.emit();\n    if (slShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n    this.popover.show();\n  }\n\n  /** Hides the tooltip. */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const slHide = this.nanoHide.emit();\n    if (slHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover.hide();\n  }\n\n  // Private methods\n\n  private getTarget() {\n    // Get the first child that isn't a <style> or content slot\n    const target = [...Array.from(this.host.children)].find(\n      (el) =>\n        el.tagName.toLowerCase() !== 'style' &&\n        el.getAttribute('slot') !== 'content'\n    ) as HTMLElement;\n\n    if (!target) {\n      throw new Error('Invalid tooltip target: no child element was found.');\n    }\n\n    return target;\n  }\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  private syncOptions() {\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.tooltip,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n    });\n  }\n\n  // Event Handlers\n\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  };\n\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.open ? this.hide() : this.show();\n    }\n  };\n\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when the target element has focus should dismiss the tooltip\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.show();\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.target = this.getTarget();\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    this.target = this.getTarget();\n    this.popover = new Popover(this.target, this.tooltipPositioner);\n    this.syncOptions();\n    this.setLabel();\n\n    // Show on init if open\n    this.tooltipPositioner.hidden = !this.open;\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  componentDidUpdate() {\n    this.syncOptions();\n  }\n\n  disconnectedCallback() {\n    this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <Host\n        onKeyDown={this.handleKeyDown}\n        onMouseOver={this.handleMouseOver}\n        onMouseOut={this.handleMouseOut}\n        onBlur={this.handleBlur}\n        onFocus={this.handleFocus}\n        onClick={this.handleClick}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n        <div\n          ref={(el) => (this.tooltipPositioner = el)}\n          class=\"tooltip-positioner\"\n        >\n          <div\n            part=\"base\"\n            ref={(el) => (this.tooltip = el)}\n            class={{\n              tooltip: true,\n              'tooltip--open': this.open,\n            }}\n            role=\"tooltip\"\n            aria-hidden={this.open ? 'false' : 'true'}\n          >\n            <slot name=\"content\" onSlotchange={() => this.setLabel()}>\n              {this.content}\n            </slot>\n            <div class=\"tooltip-arrow\" data-popper-arrow></div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}