@nanoporetech-digital/components 7.9.0 → 7.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/dist/cjs/app-globals-3e14cb71.js.map +1 -1
  2. package/dist/cjs/nano-checkbox.cjs.entry.js +8 -4
  3. package/dist/cjs/nano-checkbox.cjs.entry.js.map +1 -1
  4. package/dist/cjs/{nano-table-132f2056.js → nano-table-54523fe5.js} +2 -2
  5. package/dist/cjs/{nano-table-132f2056.js.map → nano-table-54523fe5.js.map} +1 -1
  6. package/dist/cjs/nano-table.cjs.entry.js +1 -1
  7. package/dist/cjs/{table.worker-1a4b9015.js → table.worker-99f69a43.js} +2 -2
  8. package/dist/cjs/table.worker-99f69a43.js.map +1 -0
  9. package/dist/collection/components/checkbox/checkbox.js +8 -4
  10. package/dist/collection/components/checkbox/checkbox.js.map +1 -1
  11. package/dist/components/index.js.map +1 -1
  12. package/dist/components/nano-checkbox.js +8 -4
  13. package/dist/components/nano-checkbox.js.map +1 -1
  14. package/dist/esm/app-globals-f0120bbe.js.map +1 -1
  15. package/dist/esm/nano-checkbox.entry.js +8 -4
  16. package/dist/esm/nano-checkbox.entry.js.map +1 -1
  17. package/dist/esm/{nano-table-5eaf3a0c.js → nano-table-3965ddd0.js} +2 -2
  18. package/dist/esm/{nano-table-5eaf3a0c.js.map → nano-table-3965ddd0.js.map} +1 -1
  19. package/dist/esm/nano-table.entry.js +1 -1
  20. package/dist/esm/{table.worker-94b9c69e.js → table.worker-8e04f768.js} +2 -2
  21. package/dist/esm/table.worker-8e04f768.js.map +1 -0
  22. package/dist/nano-components/app-globals-f0120bbe.js.map +1 -1
  23. package/dist/nano-components/nano-checkbox.entry.js +1 -1
  24. package/dist/nano-components/nano-checkbox.entry.js.map +1 -1
  25. package/dist/nano-components/{nano-table-5eaf3a0c.js → nano-table-3965ddd0.js} +2 -2
  26. package/dist/nano-components/nano-table.entry.js +1 -1
  27. package/dist/nano-components/table.worker-8e04f768.js +5 -0
  28. package/docs-json.json +1 -1
  29. package/hydrate/index.js +8 -4
  30. package/hydrate/index.mjs +8 -4
  31. package/package.json +1 -1
  32. package/dist/cjs/table.worker-1a4b9015.js.map +0 -1
  33. package/dist/esm/table.worker-94b9c69e.js.map +0 -1
  34. package/dist/nano-components/table.worker-94b9c69e.js +0 -5
  35. /package/dist/nano-components/{nano-table-5eaf3a0c.js.map → nano-table-3965ddd0.js.map} +0 -0
  36. /package/dist/nano-components/{table.worker-94b9c69e.js.map → table.worker-8e04f768.js.map} +0 -0
  37. /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/custom-element-doc-generator.d.ts +0 -0
  38. /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/generate-vue-component.d.ts +0 -0
  39. /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/index.d.ts +0 -0
  40. /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/output-vue.d.ts +0 -0
  41. /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/plugin.d.ts +0 -0
  42. /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/types.d.ts +0 -0
  43. /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/utils.d.ts +0 -0
  44. /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/stencil.config.d.ts +0 -0
  45. /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/stencil.config.prod.d.ts +0 -0
  46. /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/testing/mocks/intersection-observer.d.ts +0 -0
  47. /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/wdio.conf.d.ts +0 -0
package/dist/esm/nano-table.entry.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /*!
2
2
  * Web Components for Nanopore digital Web Apps
3
3
  */
4
- export { T as nano_table } from './nano-table-5eaf3a0c.js';
4
+ export { T as nano_table } from './nano-table-3965ddd0.js';
5
5
  import './index-6cc72cd9.js';
6
6
  import './renderer-4bc3e2dc.js';
7
7
  import './math-d160f8a6.js';
package/dist/esm/{table.worker-94b9c69e.js → table.worker-8e04f768.js} RENAMED
@@ -1,7 +1,7 @@
1
1
  /*!
2
2
  * Web Components for Nanopore digital Web Apps
3
3
  */
4
- import { c as createWorker } from './nano-table-5eaf3a0c.js';
4
+ import { c as createWorker } from './nano-table-3965ddd0.js';
5
5
  import './index-6cc72cd9.js';
6
6
  import './renderer-4bc3e2dc.js';
7
7
  import './math-d160f8a6.js';
@@ -26,4 +26,4 @@ try {
26
26
 
27
27
  export { worker, workerMsgId, workerName, workerPath };
28
28
 
29
- //# sourceMappingURL=table.worker-94b9c69e.js.map
29
+ //# sourceMappingURL=table.worker-8e04f768.js.map
package/dist/esm/table.worker-8e04f768.js.map ADDED
@@ -0,0 +1 @@
1
+ {"file":"table.worker-8e04f768.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
package/dist/nano-components/app-globals-f0120bbe.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["appGlobalScript","async","globalThis","window","docEle","document","documentElement","addEventListener","classList","add","docIsReady","contains","dispatchEvent","CustomEvent","mutationO","MutationObserver","_","disconnect","observe","childList","subtree","attributes","globalScripts"],"sources":["src/global/script/global.ts","@stencil/core/internal/app-globals"],"sourcesContent":["export default async () => {\n if (\n globalThis.window &&\n 'MutationObserver' in globalThis.window &&\n globalThis['document']\n ) {\n // fire global 'ready' event when everything is hydrated\n\n const docEle = document.documentElement;\n\n window.addEventListener('appload', () => {\n docEle.classList.add('hydrated');\n });\n\n const docIsReady = () => {\n if (!docEle.classList.contains('hydrated')) return false;\n docEle.dispatchEvent(new CustomEvent('nanoComponentsReady'));\n return true;\n };\n\n if (!docIsReady()) {\n let mutationO = new MutationObserver((_) => {\n if (!docIsReady()) return;\n\n mutationO.disconnect();\n mutationO = null;\n });\n\n mutationO.observe(docEle, {\n childList: false,\n subtree: false,\n attributes: true,\n });\n }\n }\n};\n","import appGlobalScript from '/builds/WUhA-BsM/0/Digital/nano-components/packages/components/src/global/script/global.ts';\nexport const globalScripts = appGlobalScript;\n"],"mappings":";;;AAAA,MAAAA,EAAeC,UACb,GACEC,WAAWC,QACX,qBAAsBD,WAAWC,QACjCD,WAAW,YACX,CAGA,MAAME,EAASC,SAASC,gBAExBH,OAAOI,iBAAiB,WAAW,KACjCH,EAAOI,UAAUC,IAAI,WAAW,IAGlC,MAAMC,EAAa,KACjB,IAAKN,EAAOI,UAAUG,SAAS,YAAa,OAAO,MACnDP,EAAOQ,cAAc,IAAIC,YAAY,wBACrC,OAAO,IAAI,EAGb,IAAKH,IAAc,CACjB,IAAII,EAAY,IAAIC,kBAAkBC,IACpC,IAAKN,IAAc,OAEnBI,EAAUG,aACVH,EAAY,IAAI,IAGlBA,EAAUI,QAAQd,EAAQ,CACxBe,UAAW,MACXC,QAAS,MACTC,WAAY,M,IC9BR,MAACC,EAAgBtB,S","ignoreList":[]}
1
+ {"version":3,"names":["appGlobalScript","async","globalThis","window","docEle","document","documentElement","addEventListener","classList","add","docIsReady","contains","dispatchEvent","CustomEvent","mutationO","MutationObserver","_","disconnect","observe","childList","subtree","attributes","globalScripts"],"sources":["src/global/script/global.ts","@stencil/core/internal/app-globals"],"sourcesContent":["export default async () => {\n if (\n globalThis.window &&\n 'MutationObserver' in globalThis.window &&\n globalThis['document']\n ) {\n // fire global 'ready' event when everything is hydrated\n\n const docEle = document.documentElement;\n\n window.addEventListener('appload', () => {\n docEle.classList.add('hydrated');\n });\n\n const docIsReady = () => {\n if (!docEle.classList.contains('hydrated')) return false;\n docEle.dispatchEvent(new CustomEvent('nanoComponentsReady'));\n return true;\n };\n\n if (!docIsReady()) {\n let mutationO = new MutationObserver((_) => {\n if (!docIsReady()) return;\n\n mutationO.disconnect();\n mutationO = null;\n });\n\n mutationO.observe(docEle, {\n childList: false,\n subtree: false,\n attributes: true,\n });\n }\n }\n};\n","import appGlobalScript from '/builds/6SyqsxUA/0/Digital/nano-components/packages/components/src/global/script/global.ts';\nexport const globalScripts = appGlobalScript;\n"],"mappings":";;;AAAA,MAAAA,EAAeC,UACb,GACEC,WAAWC,QACX,qBAAsBD,WAAWC,QACjCD,WAAW,YACX,CAGA,MAAME,EAASC,SAASC,gBAExBH,OAAOI,iBAAiB,WAAW,KACjCH,EAAOI,UAAUC,IAAI,WAAW,IAGlC,MAAMC,EAAa,KACjB,IAAKN,EAAOI,UAAUG,SAAS,YAAa,OAAO,MACnDP,EAAOQ,cAAc,IAAIC,YAAY,wBACrC,OAAO,IAAI,EAGb,IAAKH,IAAc,CACjB,IAAII,EAAY,IAAIC,kBAAkBC,IACpC,IAAKN,IAAc,OAEnBI,EAAUG,aACVH,EAAY,IAAI,IAGlBA,EAAUI,QAAQd,EAAQ,CACxBe,UAAW,MACXC,QAAS,MACTC,WAAY,M,IC9BR,MAACC,EAAgBtB,S","ignoreList":[]}
package/dist/nano-components/nano-checkbox.entry.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
2
  * Web Components for Nanopore digital Web Apps
3
3
  */
4
- import{r as e,c,g as n,a as o}from"./index-6cc72cd9.js";import{f as a}from"./focus-visible-e5f02c46.js";import{c as s}from"./theme-d553c17a.js";import{t as i,h as r}from"./renderer-4bc3e2dc.js";const t='.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{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-inline-size: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;block-size:1.5em;inline-size:1.5em;min-inline-size: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));inline-size:0;block-size: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));block-size:0;inline-size: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;inline-size:2.4em;block-size: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;block-size:80%;inline-size: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);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);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);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));inline-size:0.375em;block-size: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;inline-size:0.7em;block-size:0.7em;border-radius:0}.nanocb__label.sc-nano-checkbox{padding-inline:var(--label-spacing);padding-block:0;display:flex;align-items:center;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;inline-size: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);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;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);inline-size: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}';const b=t;let h=0;const d=class{constructor(n){e(this,n);this.nanoChange=c(this,"nanoChange",7);this.nanoFocus=c(this,"nanoFocus",7);this.nanoBlur=c(this,"nanoBlur",7)}inputId=`nano-cb-${h++}`;input;get host(){return n(this)}inputType="checkbox";hasFocus=false;checked=false;async handleCheckedChange(){if(!this.input)return;this.input.checked=this.checked;if(this.inputType==="radio"&&this.name&&this.checked){const e=this.host.closest("form");let c;if(e){c=Array.from(e.querySelectorAll(`${i("nano-checkbox")}[name="${this.name}"]`))}else{c=Array.from(document.querySelectorAll(`${i("nano-checkbox")}[name="${this.name}"]`))?.filter((e=>!e.closest("form")))}c.map((e=>{if(e!==this.host)e.checked=false}))}this.nanoChange.emit({value:this.value,checked:this.checked})}disabled=false;value="on";name;required=false;type="checkbox";typeChange(){if(["checkbox","switch","tag"].includes(this.type))this.inputType="checkbox";else this.inputType="radio"}label;indeterminate=false;handleIndeterminateChange(){this.checked=false;this.input.indeterminate=this.indeterminate}get invalid(){return this._invalid}_invalid=false;get validityMessage(){if(!this.input)return"";return this.input.validationMessage}color;form;nanoChange;nanoFocus;nanoBlur;async getInputElement(){if(this.input)return this.input}async reportValidity(e=false){if(e)this.input.reportValidity();this._invalid=!this.input.validity.valid;return{isValid:!this.invalid,errorMessage:this.input.validationMessage}}async setError(e,c=true){if(!this.input)return;if(c)this._invalid=!!e.length;this.input.setCustomValidity(e)}async setFocus(){if(this.input){this.input.focus();a.force(this.input)}}async removeFocus(){if(this.input){this.input.blur();a.force(this.input,false)}}onReset(e){const c=this.form?document.querySelector("#"+this.form):this.host.closest("form");if(!c||e.target!==this.host.closest("form"))return;this.checked=false}handleInvalid=e=>{this._invalid=!e.target.validity.valid};handleChange=e=>{this.checked=e.target.checked;this.indeterminate=false};handleFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};handleBlur=()=>{this.hasFocus=false;this.nanoBlur.emit()};isRadioChecked(){requestAnimationFrame((()=>this.checked=this.input.checked))}componentWillLoad(){this.typeChange()}componentDidLoad(){this.input.indeterminate=this.indeterminate;this.isRadioChecked();a.observe(this.input)}disconnectedCallback(){a.unobserve(this.input)}render(){const e=this.inputId+"-lbl";return r(o,{key:"743ba20f7dc131a5df0dbef97f12682228b3a49d",class:{...s(this.color),"nano-checkbox":true}},r("label",{key:"9b0f1649bcf44a7685c3e1f91da816e7283f41e0",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},r("input",{key:"77bac537123647d224667f66ef9d8a3ea732af9a",type:this.inputType,name:this.name,form:this.form,required:this.required,checked:this.checked,disabled:this.disabled,value:this.value,"aria-labelledby":e,onBlur:this.handleBlur,onFocus:this.handleFocus,onChange:this.handleChange,ref:e=>this.input=e,id:this.inputId,onInvalid:this.handleInvalid}),r("span",{key:"6ee7540510d902daaf303edcc2a677e9819d3b00",class:"nanocb__input nanocb__input--"+this.type}),r("div",{key:"0ea0aea0ca852394ae4a3ccc6eb998e990d61f01",id:e,class:"nanocb__label nanocb__label--"+this.type},this.label&&!!this.label.length&&r("span",{key:"a1b43b59fc067cba5fd22b87add0c5352666ca2f"},this.label),r("span",{key:"e2a1abe3e02c9a3deeda47430b164a0b0f03982b",hidden:this.label&&!!this.label.length},r("slot",{key:"30738b530444fd2051465eb6ff9098ebb06e2e88"})))))}static get watchers(){return{checked:["handleCheckedChange"],type:["typeChange"],indeterminate:["handleIndeterminateChange"]}}};d.style=b;export{d as nano_checkbox};
4
+ import{r as e,c as n,g as c,a as o}from"./index-6cc72cd9.js";import{f as a}from"./focus-visible-e5f02c46.js";import{c as s}from"./theme-d553c17a.js";import{t as i,h as r}from"./renderer-4bc3e2dc.js";const t='.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{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-inline-size: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;block-size:1.5em;inline-size:1.5em;min-inline-size: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));inline-size:0;block-size: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));block-size:0;inline-size: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;inline-size:2.4em;block-size: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;block-size:80%;inline-size: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);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);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);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));inline-size:0.375em;block-size: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;inline-size:0.7em;block-size:0.7em;border-radius:0}.nanocb__label.sc-nano-checkbox{padding-inline:var(--label-spacing);padding-block:0;display:flex;align-items:center;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;inline-size: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);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;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);inline-size: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}';const b=t;let h=0;const d=class{constructor(c){e(this,c);this.nanoChange=n(this,"nanoChange",7);this.nanoFocus=n(this,"nanoFocus",7);this.nanoBlur=n(this,"nanoBlur",7)}inputId=`nano-cb-${h++}`;input;get host(){return c(this)}inputType="checkbox";hasFocus=false;checked=false;async handleCheckedChange(){if(!this.input)return;this.input.checked=this.checked;if(this.inputType==="radio"&&this.name&&this.checked&&this.host.isConnected){const e=this.host.closest("form");const n=this.host.getRootNode();let c;if(e){c=Array.from(e.querySelectorAll(`${i("nano-checkbox")}[name="${this.name}"]`))}else{c=Array.from(n.querySelectorAll(`${i("nano-checkbox")}[name="${this.name}"]`))?.filter((e=>!e.closest("form")))}c.map((e=>{if(e!==this.host)e.checked=false}))}this.nanoChange.emit({value:this.value,checked:this.checked})}disabled=false;value="on";name;required=false;type="checkbox";typeChange(){if(["checkbox","switch","tag"].includes(this.type))this.inputType="checkbox";else this.inputType="radio"}label;indeterminate=false;handleIndeterminateChange(){this.checked=false;this.input.indeterminate=this.indeterminate}get invalid(){return this._invalid}_invalid=false;get validityMessage(){if(!this.input)return"";return this.input.validationMessage}color;form;nanoChange;nanoFocus;nanoBlur;async getInputElement(){if(this.input)return this.input}async reportValidity(e=false){if(e)this.input.reportValidity();this._invalid=!this.input.validity.valid;return{isValid:!this.invalid,errorMessage:this.input.validationMessage}}async setError(e,n=true){if(!this.input)return;if(n)this._invalid=!!e.length;this.input.setCustomValidity(e)}async setFocus(){if(this.input){this.input.focus();a.force(this.input)}}async removeFocus(){if(this.input){this.input.blur();a.force(this.input,false)}}onReset(e){const n=this.form?document.querySelector("#"+this.form):this.host.closest("form");if(!n||e.target!==this.host.closest("form"))return;this.checked=false}handleInvalid=e=>{this._invalid=!e.target.validity.valid};handleChange=e=>{this.checked=e.target.checked;this.indeterminate=false};handleFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};handleBlur=()=>{this.hasFocus=false;this.nanoBlur.emit()};isRadioChecked(){requestAnimationFrame((()=>this.checked=this.input.checked))}componentWillLoad(){this.typeChange()}componentDidLoad(){this.input.indeterminate=this.indeterminate;this.isRadioChecked();a.observe(this.input)}disconnectedCallback(){a.unobserve(this.input)}render(){const e=this.inputId+"-lbl";return r(o,{key:"92eaee0287da5164176c1893add5d48ff518153a",class:{...s(this.color),"nano-checkbox":true}},r("label",{key:"5082a3b8114162d5b52e9f24abe031f8796665e2",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},r("input",{key:"2b91ea2ac18ac260710202040db3f7a4574a1922",type:this.inputType,name:this.name,form:this.form,required:this.required,checked:this.checked,disabled:this.disabled,value:this.value,"aria-labelledby":e,onBlur:this.handleBlur,onFocus:this.handleFocus,onChange:this.handleChange,ref:e=>this.input=e,id:this.inputId,onInvalid:this.handleInvalid}),r("span",{key:"0594a16034577181d4f3b1801b08d1761bd4cfe8",class:"nanocb__input nanocb__input--"+this.type}),r("div",{key:"051e89cbd5aeabad7f6e70369a3f9316f86eb8f8",id:e,class:"nanocb__label nanocb__label--"+this.type},this.label&&!!this.label.length&&r("span",{key:"ddb4067806f185c0d564a0a54c7642a57313e482"},this.label),r("span",{key:"745cbff6863337008827893a7b451c4a31fb1e91",hidden:this.label&&!!this.label.length},r("slot",{key:"023db905814a76b115e2779d717932125c0bff4a"})))))}static get watchers(){return{checked:["handleCheckedChange"],type:["typeChange"],indeterminate:["handleIndeterminateChange"]}}};d.style=b;export{d as nano_checkbox};
5
5
  //# sourceMappingURL=nano-checkbox.entry.js.map
package/dist/nano-components/nano-checkbox.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["checkboxCss","NanoCheckboxStyle0","checkboxIds","Checkbox","inputId","input","inputType","hasFocus","checked","handleCheckedChange","this","name","form","host","closest","ctrls","Array","from","querySelectorAll","transformTag","document","filter","radio","map","el","nanoChange","emit","value","disabled","required","type","typeChange","includes","label","indeterminate","handleIndeterminateChange","invalid","_invalid","validityMessage","validationMessage","color","nanoFocus","nanoBlur","getInputElement","reportValidity","validateFirst","validity","valid","isValid","errorMessage","setError","message","updateStatus","length","setCustomValidity","setFocus","focus","focusVisible","force","removeFocus","blur","onReset","e","querySelector","target","handleInvalid","ev","handleChange","handleFocus","handleBlur","isRadioChecked","requestAnimationFrame","componentWillLoad","componentDidLoad","observe","disconnectedCallback","unobserve","render","labelId","h","Host","key","class","createColorClasses","nanocb","htmlFor","onBlur","onFocus","onChange","ref","id","onInvalid","hidden"],"sources":["src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n /**\n * @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to #{tokens.$control-invalid-style};\n * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{tokens.$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(tokens.$colors, white)};\n * @prop --check-border-color: initial border color. Defaults to #{map.get(tokens.$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(tokens.$colors, darkgrey)};\n * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{map.get(tokens.$colors, darkgrey)};\n * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{map.get(tokens.$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 #{mx.color-to-rgb-list(map.get(tokens.$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(tokens.$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(#{mx.color-to-rgb-list(map.get(tokens.$colors, palegrey))} / 70%);\n * @prop --switch-active-color: Defaults to #{map.get(tokens.$colors, blue)};\n */\n\n --focus-shadow: #{tokens.$control-focus-style};\n --invalid-shadow: #{tokens.$control-focus-size + ' ' map.get(tokens.$colors, red)};\n --padding: initial;\n --check-bg-color: #{map.get(tokens.$colors, white)};\n --check-border-color: #{map.get(tokens.$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(tokens.$colors, darkgrey)};\n --check-checked-border-color: #{map.get(tokens.$colors, darkgrey)};\n --check-checked-higlight-color: #{map.get(tokens.$colors, white)};\n --check-base-size: inherit;\n --label-spacing: 10px 0;\n\n // type specific\n\n // tag\n --tagbox-rgb: #{mx.color-to-rgb-list(map.get(tokens.$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(tokens.$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(#{mx.color-to-rgb-list(map.get(tokens.$colors, palegrey))} / 70%);\n --switch-active-color: #{map.get(tokens.$colors, blue)};\n\n display: inline-block;\n max-inline-size: 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(tokens.$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: #{tokens.$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: #{mx.color-to-rgb-list(map.get(tokens.$colors, mediumgrey))};\n --check-bg-color: #{rgba(map.get(tokens.$colors, mediumgrey), 0.5)};\n --check-checked-bg-color: #{rgba(map.get(tokens.$colors, mediumgrey), 0.5)};\n --segment-color: #{map.get(tokens.$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 block-size: 1.5em;\n inline-size: 1.5em;\n min-inline-size: 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 inline-size: 0;\n block-size: 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 block-size: 0;\n inline-size: 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 inline-size: 2.4em;\n block-size: 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 block-size: 80%;\n inline-size: 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 mx.visually-hide();\n\n &::before {\n display: none;\n }\n }\n\n &--tag {\n @include mx.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 mx.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 inline-size: 0.375em;\n block-size: 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 inline-size: 0.7em;\n block-size: 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 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 inline-size: 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 inline-size: 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 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 { transformTag, h } from '../../utils/renderer';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport type { ControlValidity, Color } from '../../types/shared';\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 if (!this.input) return;\n\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(\n `${transformTag('nano-checkbox')}[name=\"${this.name}\"]`\n )\n );\n } else {\n ctrls = Array.from(\n document.querySelectorAll(\n `${transformTag('nano-checkbox')}[name=\"${this.name}\"]`\n )\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 * @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\n class={{ ...createColorClasses(this.color), 'nano-checkbox': true }}\n >\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":";;;kMAAA,MAAMA,EAAc,s9UACpB,MAAAC,EAAeD,ECkBf,IAAIE,EAAc,E,MAcLC,EAAQ,M,wIACXC,QAAU,WAAWF,MACrBG,M,0BAGCC,UAAkC,WAGHC,SAAW,MAKXC,QAAmB,MAG3D,yBAAMC,GACJ,IAAKC,KAAKL,MAAO,OAEjBK,KAAKL,MAAMG,QAAUE,KAAKF,QAE1B,GAAIE,KAAKJ,YAAc,SAAWI,KAAKC,MAAQD,KAAKF,QAAS,CAC3D,MAAMI,EAAOF,KAAKG,KAAKC,QAAQ,QAC/B,IAAIC,EACJ,GAAIH,EAAM,CACRG,EAAQC,MAAMC,KACZL,EAAKM,iBACH,GAAGC,EAAa,0BAA0BT,KAAKC,U,KAG9C,CACLI,EAAQC,MAAMC,KACZG,SAASF,iBACP,GAAGC,EAAa,0BAA0BT,KAAKC,YAEhDU,QAAQC,IAAWA,EAAMR,QAAQ,S,CAEtCC,EAAMQ,KAAKC,IACT,GAAIA,IAAOd,KAAKG,KAAMW,EAAGhB,QAAU,KAAK,G,CAG5CE,KAAKe,WAAWC,KAAK,CAAEC,MAAOjB,KAAKiB,MAAOnB,QAASE,KAAKF,S,CAMjCoB,SAAoB,MAMpBD,MAAgB,KAKhBhB,KAKAkB,SAAoB,MAKpBC,KAMJ,WAGrB,UAAAC,GACE,GAAI,CAAC,WAAY,SAAU,OAAOC,SAAStB,KAAKoB,MAC9CpB,KAAKJ,UAAY,gBACdI,KAAKJ,UAAY,O,CAMhB2B,MAKgCC,cAAyB,MAGjE,yBAAAC,GACEzB,KAAKF,QAAU,MACfE,KAAKL,MAAM6B,cAAgBxB,KAAKwB,a,CAOlC,WACIE,GACF,OAAO1B,KAAK2B,Q,CAELA,SAAW,MAKpB,mBACIC,GACF,IAAK5B,KAAKL,MAAO,MAAO,GACxB,OAAOK,KAAKL,MAAMkC,iB,CAMZC,MAKA5B,KAKCa,WAKAgB,UAKAC,SAST,qBAAMC,GACJ,GAAIjC,KAAKL,MAAO,OAAOK,KAAKL,K,CAS9B,oBAAMuC,CACJC,EAAyB,OAEzB,GAAIA,EAAenC,KAAKL,MAAMuC,iBAC9BlC,KAAK2B,UAAY3B,KAAKL,MAAMyC,SAASC,MAErC,MAAO,CACLC,SAAUtC,KAAK0B,QACfa,aAAcvC,KAAKL,MAAMkC,kB,CAS7B,cAAMW,CAASC,EAAiBC,EAAe,MAC7C,IAAK1C,KAAKL,MAAO,OACjB,GAAI+C,EAAc1C,KAAK2B,WAAac,EAAQE,OAC5C3C,KAAKL,MAAMiD,kBAAkBH,E,CAO/B,cAAMI,GACJ,GAAI7C,KAAKL,MAAO,CACdK,KAAKL,MAAMmD,QACXC,EAAaC,MAAMhD,KAAKL,M,EAQ5B,iBAAMsD,GACJ,GAAIjD,KAAKL,MAAO,CACdK,KAAKL,MAAMuD,OACXH,EAAaC,MAAMhD,KAAKL,MAAO,M,EAKnC,OAAAwD,CAAQC,GACN,MAAMlD,EAAOF,KAAKE,KACdQ,SAAS2C,cAAc,IAAMrD,KAAKE,MAClCF,KAAKG,KAAKC,QAAQ,QACtB,IAAKF,GAAQkD,EAAEE,SAAWtD,KAAKG,KAAKC,QAAQ,QAAS,OAErDJ,KAAKF,QAAU,K,CAKTyD,cAAiBC,IACvBxD,KAAK2B,UAAa6B,EAAGF,OAA4BlB,SAASC,KAAK,EAGzDoB,aAAgBD,IACtBxD,KAAKF,QAAW0D,EAAGF,OAA4BxD,QAC/CE,KAAKwB,cAAgB,KAAK,EAGpBkC,YAAc,KACpB1D,KAAKH,SAAW,KAChBG,KAAK+B,UAAUf,MAAM,EAGf2C,WAAa,KACnB3D,KAAKH,SAAW,MAChBG,KAAKgC,SAAShB,MAAM,EAKd,cAAA4C,GACNC,uBAAsB,IAAO7D,KAAKF,QAAUE,KAAKL,MAAMG,S,CAKzD,iBAAAgE,GACE9D,KAAKqB,Y,CAGP,gBAAA0C,GACE/D,KAAKL,MAAM6B,cAAgBxB,KAAKwB,cAChCxB,KAAK4D,iBACLb,EAAaiB,QAAQhE,KAAKL,M,CAG5B,oBAAAsE,GACElB,EAAamB,UAAUlE,KAAKL,M,CAG9B,MAAAwE,GACE,MAAMC,EAAUpE,KAAKN,QAAU,OAE/B,OACE2E,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,IAAKC,EAAmBzE,KAAK8B,OAAQ,gBAAiB,OAE7DuC,EAAA,SAAAE,IAAA,2CACEC,MAAO,CACLE,OAAQ,KACR,kBAAmB1E,KAAKF,QACxB,kBAAmBE,KAAK0B,QACxB,mBAAoB1B,KAAKkB,SACzB,kBAAmBlB,KAAKH,SACxB,wBAAyBG,KAAKwB,eAEhCmD,QAAS3E,KAAKN,SAEd2E,EAAA,SAAAE,IAAA,2CACEnD,KAAMpB,KAAKJ,UACXK,KAAMD,KAAKC,KACXC,KAAMF,KAAKE,KACXiB,SAAUnB,KAAKmB,SACfrB,QAASE,KAAKF,QACdoB,SAAUlB,KAAKkB,SACfD,MAAOjB,KAAKiB,MAAK,kBACAmD,EACjBQ,OAAQ5E,KAAK2D,WACbkB,QAAS7E,KAAK0D,YACdoB,SAAU9E,KAAKyD,aACfsB,IAAMpF,GAAWK,KAAKL,MAAQA,EAC9BqF,GAAIhF,KAAKN,QACTuF,UAAWjF,KAAKuD,gBAElBc,EAAA,QAAAE,IAAA,2CAAMC,MAAO,gCAAkCxE,KAAKoB,OAEpDiD,EAAA,OAAAE,IAAA,2CAAKS,GAAIZ,EAASI,MAAO,gCAAkCxE,KAAKoB,MAC7DpB,KAAKuB,SAAWvB,KAAKuB,MAAMoB,QAAU0B,EAAA,QAAAE,IAAA,4CAAOvE,KAAKuB,OAClD8C,EAAA,QAAAE,IAAA,2CAAMW,OAAQlF,KAAKuB,SAAWvB,KAAKuB,MAAMoB,QACvC0B,EAAA,QAAAE,IAAA,gD","ignoreList":[]}
1
+ {"version":3,"names":["checkboxCss","NanoCheckboxStyle0","checkboxIds","Checkbox","inputId","input","inputType","hasFocus","checked","handleCheckedChange","this","name","host","isConnected","form","closest","root","getRootNode","ctrls","Array","from","querySelectorAll","transformTag","filter","radio","map","el","nanoChange","emit","value","disabled","required","type","typeChange","includes","label","indeterminate","handleIndeterminateChange","invalid","_invalid","validityMessage","validationMessage","color","nanoFocus","nanoBlur","getInputElement","reportValidity","validateFirst","validity","valid","isValid","errorMessage","setError","message","updateStatus","length","setCustomValidity","setFocus","focus","focusVisible","force","removeFocus","blur","onReset","e","document","querySelector","target","handleInvalid","ev","handleChange","handleFocus","handleBlur","isRadioChecked","requestAnimationFrame","componentWillLoad","componentDidLoad","observe","disconnectedCallback","unobserve","render","labelId","h","Host","key","class","createColorClasses","nanocb","htmlFor","onBlur","onFocus","onChange","ref","id","onInvalid","hidden"],"sources":["src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n /**\n * @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to #{tokens.$control-invalid-style};\n * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{tokens.$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(tokens.$colors, white)};\n * @prop --check-border-color: initial border color. Defaults to #{map.get(tokens.$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(tokens.$colors, darkgrey)};\n * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{map.get(tokens.$colors, darkgrey)};\n * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{map.get(tokens.$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 #{mx.color-to-rgb-list(map.get(tokens.$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(tokens.$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(#{mx.color-to-rgb-list(map.get(tokens.$colors, palegrey))} / 70%);\n * @prop --switch-active-color: Defaults to #{map.get(tokens.$colors, blue)};\n */\n\n --focus-shadow: #{tokens.$control-focus-style};\n --invalid-shadow: #{tokens.$control-focus-size + ' ' map.get(tokens.$colors, red)};\n --padding: initial;\n --check-bg-color: #{map.get(tokens.$colors, white)};\n --check-border-color: #{map.get(tokens.$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(tokens.$colors, darkgrey)};\n --check-checked-border-color: #{map.get(tokens.$colors, darkgrey)};\n --check-checked-higlight-color: #{map.get(tokens.$colors, white)};\n --check-base-size: inherit;\n --label-spacing: 10px 0;\n\n // type specific\n\n // tag\n --tagbox-rgb: #{mx.color-to-rgb-list(map.get(tokens.$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(tokens.$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(#{mx.color-to-rgb-list(map.get(tokens.$colors, palegrey))} / 70%);\n --switch-active-color: #{map.get(tokens.$colors, blue)};\n\n display: inline-block;\n max-inline-size: 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(tokens.$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: #{tokens.$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: #{mx.color-to-rgb-list(map.get(tokens.$colors, mediumgrey))};\n --check-bg-color: #{rgba(map.get(tokens.$colors, mediumgrey), 0.5)};\n --check-checked-bg-color: #{rgba(map.get(tokens.$colors, mediumgrey), 0.5)};\n --segment-color: #{map.get(tokens.$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 block-size: 1.5em;\n inline-size: 1.5em;\n min-inline-size: 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 inline-size: 0;\n block-size: 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 block-size: 0;\n inline-size: 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 inline-size: 2.4em;\n block-size: 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 block-size: 80%;\n inline-size: 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 mx.visually-hide();\n\n &::before {\n display: none;\n }\n }\n\n &--tag {\n @include mx.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 mx.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 inline-size: 0.375em;\n block-size: 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 inline-size: 0.7em;\n block-size: 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 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 inline-size: 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 inline-size: 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 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 { transformTag, h } from '../../utils/renderer';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport type { ControlValidity, Color } from '../../types/shared';\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 if (!this.input) return;\n\n this.input.checked = this.checked;\n\n if (\n this.inputType === 'radio' &&\n this.name &&\n this.checked &&\n this.host.isConnected\n ) {\n const form = this.host.closest('form');\n const root = this.host.getRootNode() as ShadowRoot | Document;\n let ctrls: Element[];\n\n if (form) {\n ctrls = Array.from(\n form.querySelectorAll(\n `${transformTag('nano-checkbox')}[name=\"${this.name}\"]`\n )\n );\n } else {\n ctrls = Array.from(\n root.querySelectorAll(\n `${transformTag('nano-checkbox')}[name=\"${this.name}\"]`\n )\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 * @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\n class={{ ...createColorClasses(this.color), 'nano-checkbox': true }}\n >\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":";;;uMAAA,MAAMA,EAAc,s9UACpB,MAAAC,EAAeD,ECkBf,IAAIE,EAAc,E,MAcLC,EAAQ,M,wIACXC,QAAU,WAAWF,MACrBG,M,0BAGCC,UAAkC,WAGHC,SAAW,MAKXC,QAAmB,MAG3D,yBAAMC,GACJ,IAAKC,KAAKL,MAAO,OAEjBK,KAAKL,MAAMG,QAAUE,KAAKF,QAE1B,GACEE,KAAKJ,YAAc,SACnBI,KAAKC,MACLD,KAAKF,SACLE,KAAKE,KAAKC,YACV,CACA,MAAMC,EAAOJ,KAAKE,KAAKG,QAAQ,QAC/B,MAAMC,EAAON,KAAKE,KAAKK,cACvB,IAAIC,EAEJ,GAAIJ,EAAM,CACRI,EAAQC,MAAMC,KACZN,EAAKO,iBACH,GAAGC,EAAa,0BAA0BZ,KAAKC,U,KAG9C,CACLO,EAAQC,MAAMC,KACZJ,EAAKK,iBACH,GAAGC,EAAa,0BAA0BZ,KAAKC,YAEhDY,QAAQC,IAAWA,EAAMT,QAAQ,S,CAEtCG,EAAMO,KAAKC,IACT,GAAIA,IAAOhB,KAAKE,KAAMc,EAAGlB,QAAU,KAAK,G,CAG5CE,KAAKiB,WAAWC,KAAK,CAAEC,MAAOnB,KAAKmB,MAAOrB,QAASE,KAAKF,S,CAMjCsB,SAAoB,MAMpBD,MAAgB,KAKhBlB,KAKAoB,SAAoB,MAKpBC,KAMJ,WAGrB,UAAAC,GACE,GAAI,CAAC,WAAY,SAAU,OAAOC,SAASxB,KAAKsB,MAC9CtB,KAAKJ,UAAY,gBACdI,KAAKJ,UAAY,O,CAMhB6B,MAKgCC,cAAyB,MAGjE,yBAAAC,GACE3B,KAAKF,QAAU,MACfE,KAAKL,MAAM+B,cAAgB1B,KAAK0B,a,CAOlC,WACIE,GACF,OAAO5B,KAAK6B,Q,CAELA,SAAW,MAKpB,mBACIC,GACF,IAAK9B,KAAKL,MAAO,MAAO,GACxB,OAAOK,KAAKL,MAAMoC,iB,CAMZC,MAKA5B,KAKCa,WAKAgB,UAKAC,SAST,qBAAMC,GACJ,GAAInC,KAAKL,MAAO,OAAOK,KAAKL,K,CAS9B,oBAAMyC,CACJC,EAAyB,OAEzB,GAAIA,EAAerC,KAAKL,MAAMyC,iBAC9BpC,KAAK6B,UAAY7B,KAAKL,MAAM2C,SAASC,MAErC,MAAO,CACLC,SAAUxC,KAAK4B,QACfa,aAAczC,KAAKL,MAAMoC,kB,CAS7B,cAAMW,CAASC,EAAiBC,EAAe,MAC7C,IAAK5C,KAAKL,MAAO,OACjB,GAAIiD,EAAc5C,KAAK6B,WAAac,EAAQE,OAC5C7C,KAAKL,MAAMmD,kBAAkBH,E,CAO/B,cAAMI,GACJ,GAAI/C,KAAKL,MAAO,CACdK,KAAKL,MAAMqD,QACXC,EAAaC,MAAMlD,KAAKL,M,EAQ5B,iBAAMwD,GACJ,GAAInD,KAAKL,MAAO,CACdK,KAAKL,MAAMyD,OACXH,EAAaC,MAAMlD,KAAKL,MAAO,M,EAKnC,OAAA0D,CAAQC,GACN,MAAMlD,EAAOJ,KAAKI,KACdmD,SAASC,cAAc,IAAMxD,KAAKI,MAClCJ,KAAKE,KAAKG,QAAQ,QACtB,IAAKD,GAAQkD,EAAEG,SAAWzD,KAAKE,KAAKG,QAAQ,QAAS,OAErDL,KAAKF,QAAU,K,CAKT4D,cAAiBC,IACvB3D,KAAK6B,UAAa8B,EAAGF,OAA4BnB,SAASC,KAAK,EAGzDqB,aAAgBD,IACtB3D,KAAKF,QAAW6D,EAAGF,OAA4B3D,QAC/CE,KAAK0B,cAAgB,KAAK,EAGpBmC,YAAc,KACpB7D,KAAKH,SAAW,KAChBG,KAAKiC,UAAUf,MAAM,EAGf4C,WAAa,KACnB9D,KAAKH,SAAW,MAChBG,KAAKkC,SAAShB,MAAM,EAKd,cAAA6C,GACNC,uBAAsB,IAAOhE,KAAKF,QAAUE,KAAKL,MAAMG,S,CAKzD,iBAAAmE,GACEjE,KAAKuB,Y,CAGP,gBAAA2C,GACElE,KAAKL,MAAM+B,cAAgB1B,KAAK0B,cAChC1B,KAAK+D,iBACLd,EAAakB,QAAQnE,KAAKL,M,CAG5B,oBAAAyE,GACEnB,EAAaoB,UAAUrE,KAAKL,M,CAG9B,MAAA2E,GACE,MAAMC,EAAUvE,KAAKN,QAAU,OAE/B,OACE8E,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,IAAKC,EAAmB5E,KAAKgC,OAAQ,gBAAiB,OAE7DwC,EAAA,SAAAE,IAAA,2CACEC,MAAO,CACLE,OAAQ,KACR,kBAAmB7E,KAAKF,QACxB,kBAAmBE,KAAK4B,QACxB,mBAAoB5B,KAAKoB,SACzB,kBAAmBpB,KAAKH,SACxB,wBAAyBG,KAAK0B,eAEhCoD,QAAS9E,KAAKN,SAEd8E,EAAA,SAAAE,IAAA,2CACEpD,KAAMtB,KAAKJ,UACXK,KAAMD,KAAKC,KACXG,KAAMJ,KAAKI,KACXiB,SAAUrB,KAAKqB,SACfvB,QAASE,KAAKF,QACdsB,SAAUpB,KAAKoB,SACfD,MAAOnB,KAAKmB,MAAK,kBACAoD,EACjBQ,OAAQ/E,KAAK8D,WACbkB,QAAShF,KAAK6D,YACdoB,SAAUjF,KAAK4D,aACfsB,IAAMvF,GAAWK,KAAKL,MAAQA,EAC9BwF,GAAInF,KAAKN,QACT0F,UAAWpF,KAAK0D,gBAElBc,EAAA,QAAAE,IAAA,2CAAMC,MAAO,gCAAkC3E,KAAKsB,OAEpDkD,EAAA,OAAAE,IAAA,2CAAKS,GAAIZ,EAASI,MAAO,gCAAkC3E,KAAKsB,MAC7DtB,KAAKyB,SAAWzB,KAAKyB,MAAMoB,QAAU2B,EAAA,QAAAE,IAAA,4CAAO1E,KAAKyB,OAClD+C,EAAA,QAAAE,IAAA,2CAAMW,OAAQrF,KAAKyB,SAAWzB,KAAKyB,MAAMoB,QACvC2B,EAAA,QAAAE,IAAA,gD","ignoreList":[]}
package/dist/nano-components/{nano-table-5eaf3a0c.js → nano-table-3965ddd0.js} RENAMED
@@ -1,5 +1,5 @@
1
1
  /*!
2
2
  * Web Components for Nanopore digital Web Apps
3
3
  */
4
- import{k as t,h as n,F as e,g as o,f as i,d as s,e as r,r as a,c as l,a as c}from"./index-6cc72cd9.js";import{h as d}from"./renderer-4bc3e2dc.js";import{a as h}from"./math-d160f8a6.js";import{d as b}from"./throttle-df960210.js";import{f}from"./scroll-parent-be39fbd0.js";import{c as p}from"./index-f5f7b950.js";const _="nano-tbl";const u=(t,n)=>{const e=globalThis[n];return e!=null&&t instanceof e};const m=t=>{if(t!=null){if(u(t,"ArrayBuffer")||u(t,"MessagePort")||u(t,"ImageBitmap")||u(t,"OffscreenCanvas")){return[t]}if(typeof t==="object"){if(t.constructor===Object){t=Object.values(t)}if(Array.isArray(t)){return t.flatMap(m)}return m(t.buffer)}}return[]};let g=0;let y=0;const w=new Map;const v=new Map;const k=(n,e,o)=>{const i=new Worker(n,{name:e});i.addEventListener("message",(({data:n})=>{if(n){const e=n[0];const i=n[1];const s=n[2];if(e===o){const e=n[3];const[o,r,a]=w.get(i);w.delete(i);if(e){const n=e.isError?Object.assign(new Error(e.value.message),e.value):e.value;t(n);r(n)}else{if(a){a.forEach((t=>v.delete(t)))}o(s)}}else if(e===o+".cb"){try{v.get(i)(...s)}catch(n){t(n)}}}}));return i};const x=(t,n,e)=>(...o)=>new Promise(((i,s)=>{let r=g++;let a=0;let l=o.length;let c=[i,s];w.set(r,c);for(;a<l;a++){if(typeof o[a]==="function"){const t=y++;v.set(t,o[a]);o[a]=[n+".cb",t];(c[2]=c[2]||[]).push(t)}}const d=t=>t.postMessage([n,r,e,o],m(o));if(t.then){t.then(d)}else{d(t)}}));const $=import("./table.worker-94b9c69e.js").then((t=>t.worker));const z=x($,"stencil.table.worker","createWorkerStore");const C=x($,"stencil.table.worker","syncConfigToWorker");const S=x($,"stencil.table.worker","syncDataToWorker");const R=x($,"stencil.table.worker","workerFilter");const T=x($,"stencil.table.worker","workerSearch");const I=x($,"stencil.table.worker","workerSort");function B(t){const n=JSON.parse(JSON.stringify(t));t.forEach((t=>{if(t?.sortCompareFn){const e=n.find((n=>n.prop===t.prop));e.sortCompareFn=t.sortCompareFn.toString()}}));return n}const P=new WeakMap;async function A(t,n,e,o){const i={data:p({rows:[]}),config:p({columns:n}),general:p({workerId:null,scrollParent:e,host:t,isReady:o})};const s=await z(i.data.state.rows,B(i.config.state.columns));i.general.state.workerId=s;P.set(t,i);i.data.use({reset:()=>{if(i.general.state.workerId)S(i.general.state.workerId,null)},dispose:()=>{if(i.general.state.workerId)S(i.general.state.workerId,null)}});i.config.use({reset:()=>{if(i.general.state.workerId)C(i.general.state.workerId,null)},dispose:()=>{if(i.general.state.workerId)C(i.general.state.workerId,null)}});return i}function F(t){return P.get(t)}function E(t){if(t instanceof Date){return"date"}if(["number","string","boolean"].includes(typeof t)){return typeof t}return"unknown"}function M(t,n){const e=P.get(t);if(!e)return;const o=e.config.state.columns;const i=o.filter((t=>t.type==="date")).reduce(((t,n)=>[...t,n.prop]),[]);const s=o.filter((t=>!t.type));n=n.map(((t,n)=>{if(s.length&&n===0){e.config.state.columns=o.map((n=>{if(s.includes(n)&&t[n.prop]&&!n.type){n.type=E(t[n.prop]);if(n.type==="date")i.push(n.prop)}return n}))}i.forEach((n=>{const e=new Date(t[n]);if(!!e&&Number(e))t[n]=Number(e)}));t["__index"]=n;t["__uuid"]=h(o.map((n=>t[n.prop])).join());return t}));e.data.state.rows=n;if(e.general.state.workerId)return S(e.general.state.workerId,n)}function D(t,n){const e=P.get(t);if(!e)return;e.config.state.columns=n;if(e.general.state.workerId)return C(e.general.state.workerId,B(n))}async function N(t,n){const e=P.get(t);if(!e||!e.general.state.workerId)return;try{e.data.state.rows=await T(e.general.state.workerId,n)}catch(t){console.warn(t)}}async function j(t,n){const e=P.get(t);if(!e||!e.general.state.workerId)return;try{e.data.state.rows=await R(e.general.state.workerId,n)}catch(t){console.warn(t)}}async function H(t,n,e){const o=P.get(t);if(!o||!o.general.state.workerId)return;try{o.data.state.rows=await I(o.general.state.workerId,n,e)}catch(t){console.warn(t)}}function O(t,n){const e=Y();const o=e.config.state.columns;const i=e.data.state.rows;const s=o[n];const r=s?.prop;const a=i[t];const l=a?a[o[n].prop]:"";return{prop:r,cellModel:l,column:s,rowIndex:t,rowModel:a}}function W(t){const n=Y();const e=n.data.state.rows;const o=e[t];return{rowModel:o,rowIndex:t}}function L(t,n){if(!n)return t;const e={...n,...t};if(n.class){if(typeof n.class==="object"&&typeof e.class==="object"){e.class={...n.class,...e.class}}else if(typeof n.class==="string"&&typeof e.class==="object"){e.class[n.class]=true}else if(typeof e.class==="string"&&typeof n.class==="string"){e.class+=" "+n.class}}if(n.style){e.style={...n.style,...e.style}}return e}function Y(){return F(o(i()))}function J(t,n,e){const o={...e};const i=Y().config.state.columns[n]?.cellProperties;if(!i)return o;const s=O(t,n);const r=i(s);if(!r)return o;return L(o,r)}function K(t){const o=t?.columnTemplate;return o?o(n,t):n(e,null,t.title)}function X(t,n,e=false){const o={[`${_}__${t}`]:true,[`${_}__pin`]:!!n,[`${_}__pin--top`]:n==="top",[`${_}__pin--bottom`]:n==="bottom"};if(e)return q(o);return o}function q(t){let n="";Object.entries(t).forEach((([t,e])=>{if(e)n+=t+" "}));return n}function U(t,n=100){const e=t.getBoundingClientRect();const o=window.innerHeight||document.documentElement.clientHeight;if(!e.bottom&&!e.top&&!e.left&&!e.right&&!e.height&&!e.width&&!e.x&&!e.y)return false;return!(Math.floor(100-(e.top>=0?0:e.top)/+-e.height*100)<n||Math.floor(100-(e.bottom-o)/e.height*100)<n)}const G=({column:t,onColumnSortClick:n,defaults:o})=>{function i(e){let o;switch(t.order){case"asc":o="desc";break;case"desc":o=null;break;default:o="asc"}n(o,t.prop,e.target.closest("th"))}function s(){return!!o.sortable&&t.sortable!==false||!o.sortable&&t.sortable===true}let r={};if(t.columnProperties){r=t.columnProperties(t)||r}const a={class:{...X("th",t.pinned),[`${_}__pin--start`]:t.pinned==="start",[`${_}__pin--end`]:t.pinned==="end",[`${_}__ordered`]:!!t.order,[`${_}__filtered`]:t.filter!==undefined&&t.filter!==null}};let l=r?L(a,r):a;const c=K(t);if(!c)return d(e,null);l=Number(l.colSpan)>1?{...l,scope:"colgroup"}:{...l,scope:"col"};if(s()){const n=t.order?t.order==="asc"?"ascending":"descending":"none";l={...l,"aria-sort":n}}return d("th",{...l,key:t.prop},s()?d("button",{class:{[`${_}__order-btn`]:true,[`${_}__cell-content`]:true},onClick:i},K(t),t.filter!==undefined&&t.filter!==null&&d("nano-icon",{name:"light/filter"}),!!t.order&&(t.order==="desc"?d("nano-icon",{name:"solid/arrow-down-long"}):d("nano-icon",{name:"solid/arrow-up-long"})),d("div",{class:`${_}__status-icons`},d("nano-icon",{name:"light/chevron-down"}))):d("div",{class:`${_}__cell-content`},K(t),t.filter!==undefined&&t.filter!==null&&d("nano-icon",{name:"light/bars-filter"})))};function Q(t,n){const o=Y();const s=o.config.state.columns;const r=s[n]?.cellTemplate;const a=O(t,n);const l=i();if(!!a.cellModel&&s[n].type==="date"){const t=new Date(a.cellModel);if(t instanceof Date&&!isNaN(t)){a.cellModel=!r?`${new Date(a.cellModel).toLocaleDateString()} ${new Date(a.cellModel).toLocaleTimeString()}`:t}}let c=false;const h=(...t)=>{c=true;return d(...t)};let b=r?r(h,a):undefined;if(b&&l.customRenderer&&b["t"]===undefined&&!(b instanceof Element)&&typeof b!=="string"&&!c){const t=document.createElement("template");const n=l.customRenderer(b,t.content);b=n&&n["then"]?n:t}return b?b:a.cellModel!==undefined&&a.cellModel!==null?d(e,null,a.cellModel?.toString()):""}const V=(t,n=false)=>{const e=Y();const o=e.config.state.columns[t];const i={[`${_}__td`]:true,[`${_}__ordered`]:!!o.order,[`${_}__pin`]:!!o.pinned,[`${_}__pin--start`]:o.pinned==="start",[`${_}__pin--end`]:o.pinned==="end"};if(n)return q(i);return i};const Z=({rowIndex:t,colIndex:n,nestedContent:e})=>{const o=()=>e?e():Q(t,n)||d("span",{class:"placeholder"}," ");let s="td";const r=i();const a=Y();const l=a.config.state.columns[n];let c=J(t,n,{class:V(n)});if(l.rowHeader){c=Number(c.rowSpan)>1?{...c,scope:"rowgroup"}:{...c,scope:"row"};s="th"}const h=t=>{const n=o();return d("div",{ref:t=>{if(!t)return;if(n instanceof Element){t.replaceChildren();t.append(n["content"]||n)}else if(n["then"]){n.then((n=>t.innerHTML=n))}},...t,class:{[`${_}__cell-content`]:true,[`${_}__cell-content--wrap`]:!!l.wrap},innerHTML:typeof n==="string"&&n.includes("<")?n:undefined},(typeof n!=="string"||!n.includes("<"))&&!n["then"]&&!(n instanceof Element)&&n)};return d(s,{role:r.type==="grid"?"gridcell":undefined,...c},l.autoTooltip&&!l.wrap?d("nano-resize-observe",{notifyContentFit:"x",onNanoResizeContentFitChange:t=>t.target.firstElementChild.disabled=t.detail.x},d("nano-tooltip",{disabled:true,placement:"top",onNanoShow:t=>t.target.closest(s).style.zIndex="100",onNanoHide:t=>t.target.closest(s).style.zIndex=""},d(h,null),d("span",{slot:"content"},d(o,null)))):d(h,null))};const tt=(t,n,e)=>{const o=d("div",{...t.wrapperProps,class:{[`${_}__cell-content`]:true,[`${_}__cell-content--wrap`]:t.wrap}},n);return t.header?d("th",{scope:e,...t.cellProps},o):d("td",{...t.cellProps},o)};const nt=({rowRenderer:t,rowIndex:n,rowModel:e},o,i)=>{const s=({header:t,wrap:n,cellProps:e,wrapperProps:o},i)=>tt({header:t,wrap:n,cellProps:e,wrapperProps:o},i,"row");let r={};if(!e){const t=W(n);e=t.rowModel}if(t?.rowProperties){r=t.rowProperties({rowModel:e,rowIndex:n})||r}let a;if(t?.pinned&&typeof t.pinned==="function"){a=t.pinned({rowModel:e,rowIndex:n})}const l=L({class:X("tr",a,true)},r);const c=t?.template;const h=t=>i.map(t,((t,n)=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=L({class:V(n,true)},t.vattrs)}return t}));if(c){let t=c(d,{renderedRow:d("tr",{...l,key:e.__uuid},o),rowModel:e,rowIndex:n},s);if(Array.isArray(t)){t=i.map(t,((t,n)=>{if(t.vtag==="tr"){if(!t.vkey)t.vkey=`${e.__uuid}_${n}`;t.vattrs=L({class:X("tr",a,true)},t.vattrs);if(t.vchildren){t.vchildren=h(t.vchildren)}}return t}))}return t}return d("tr",{...l,key:e.__uuid},h(o))};const et=({rowRenderer:t},n,e)=>{let o={};if(t.rowProperties){o=t.rowProperties()||{}}const i=({header:t,wrap:n,cellProps:e,wrapperProps:o},i)=>tt({header:t,wrap:n,cellProps:e,wrapperProps:o},i,"col");const s=t.pinned||null;const r={class:X("tr",s)};const a=o?L(r,o):r;const l=t?.template;if(l){let t=l(d,{renderedRow:d("tr",{...a},n)},i);if(Array.isArray(t)){t=e.map(t,(t=>{if(t.vtag==="tr"){t.vattrs=L({class:X("tr",s,true)},t.vattrs);if(t.vchildren){t.vchildren=e.map(t.vchildren,(t=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=L({class:X(t.vtag.toString(),s,true)},t.vattrs)}return t}))}}return t}))}return t}return d("tr",{...a},n)};function ot(t,n){const e=document.getElementById(t)||document.createElement("style");e.id=t;e.innerHTML=n;if(!e.isConnected)document.head.append(e)}class it{cachedColMeta=new WeakMap;tableId;tableEle;scrollElement;startColumns;endColumns;topRows;bottomRows;tableDims;constructor(t,n){this.tableEle=t;this.tableId=this.tableEle.id;this.scrollElement=n;this.startColumns=t.querySelector("thead").getElementsByClassName(`${_}__pin--start`);this.endColumns=t.querySelector("thead").getElementsByClassName(`${_}__pin--end`);this.topRows=t.getElementsByClassName(`${_}__pin--top`);this.bottomRows=t.getElementsByClassName(`${_}__pin--bottom`);this.onResize()}get pinnedStart(){return this._pinnedStart}set pinnedStart(t){this._pinnedStart=t;this.handlePinnedStartChange()}_pinnedStart=[];handlePinnedStartChange(){s((()=>{if(this.pinnedStart.length){this.tableEle.classList.add(`${_}__pinned--start`);const t=this.cachedColMeta.get(this.pinnedStart[this.pinnedStart.length-1]);ot(`${this.tableId}-col-start-active-style`,`\n #${this.tableId} tr > :nth-child(${t.idx+1}) {\n --pin-start-active: 1;\n }\n `)}else{this.tableEle.classList.remove(`${_}__pinned--start`);ot(`${this.tableId}-col-start-active-style`,``)}}))}get pinnedEnd(){return this._pinnedEnd}set pinnedEnd(t){this._pinnedEnd=t;this.handlePinnedEndChange()}_pinnedEnd=[];handlePinnedEndChange(){s((()=>{if(this.pinnedEnd.length){this.tableEle.classList.add(`${_}__pinned--end`);const t=this.cachedColMeta.get(this.pinnedEnd[0]);ot(`${this.tableId}-col-end-active-style`,`\n #${this.tableId} tr > :nth-child(${t.idx+1}) { --pin-end-active: 1; }\n `)}else{this.tableEle.classList.remove(`${_}__pinned--end`);ot(`${this.tableId}-col-end-active-style`,``)}}))}get cssColDimensionCacheKey(){return this._cssColDimensionCacheKey}set cssColDimensionCacheKey(t){if(t===this._cssColDimensionCacheKey)return;this._cssColDimensionCacheKey=t;this.createPinnedColDimensionStyles()}_cssColDimensionCacheKey="";generateCssCacheKey(){let t="";for(const n of this.startColumns){const e=this.cachedColMeta.get(n);t+=`${e.idx}-start-${e.width}`}for(const n of this.endColumns){const e=this.cachedColMeta.get(n);t+=`${e.idx}-start-${e.width}`}this.cssColDimensionCacheKey=t}createPinnedColDimensionStyles(){let t=0;let n=0;const e=Array.from(this.startColumns);const o=Array.from(this.endColumns).reverse();const i=`\n ${e.map((n=>{const e=this.cachedColMeta.get(n);t+=e.width-1||-1;return`\n #${this.tableId} tr > :nth-child(${e.idx+1}) ~ td,\n #${this.tableId} tr > :nth-child(${e.idx+1}) ~ th {\n --pin-start: ${t-1}px;\n }\n `})).join("")}\n ${o.map((t=>{const e=this.cachedColMeta.get(t);n+=e.width-1||-1;return`\n #${this.tableId} tr > td:has(~ :nth-child(${e.idx+1})),\n #${this.tableId} tr > th:has(~ :nth-child(${e.idx+1})) {\n --pin-end: ${n-1}px;\n }\n `})).join("")}\n `;ot(`${this.tableId}-dimension-style`,i)}getParentOffsets(){const{x:t,y:n}=this.scrollElement.getBoundingClientRect();let e=t;let o=n;if(this.scrollElement===document.documentElement){e=this.scrollElement.offsetLeft;o=this.scrollElement.offsetTop}return{offsetX:e,offsetY:o}}assessRows(){if(!this.topRows.length&&!this.bottomRows.length)return;if(this.topRows.length){r((async()=>{let t=0;let n;const{offsetY:e}=this.getParentOffsets();for(const o of this.topRows){const{y:i,height:r}=o.getBoundingClientRect();const a=o.parentElement;const l=getComputedStyle(o).getPropertyValue("--pin-top");const c=l!==""?parseFloat(l):t;s((()=>{if(i-e<=c){o.classList.add(`${_}__pinned`,`${_}__pinned--top`)}else{o.classList.remove(`${_}__pinned`,`${_}__pinned--top`)}if(n!==a){a.style.setProperty("--pin-top",`${t-1}px`);t+=r-1;n=a}}))}}))}if(this.bottomRows.length){const t=Array.from(this.bottomRows).reverse();r((async()=>{let n;let e=0;const{offsetY:o}=this.getParentOffsets();for(const i of t){if(!i.isConnected)continue;const{y:t,height:r}=i.getBoundingClientRect();const a=i.parentElement;const l=getComputedStyle(i).getPropertyValue("--pin-bottom");const c=l!==""?parseFloat(l):e;await new Promise((l=>s((()=>{if(this.tableDims.height+o-(t+r)<=c){i.classList.add(`${_}__pinned`,`${_}__pinned--bottom`)}else{i.classList.remove(`${_}__pinned`,`${_}__pinned--bottom`)}if(n!==a){a.style.setProperty("--pin-bottom",`${e-1}px`);e+=r-1;n=a}l()}))))}}))}}async assessCols(){if(!this.startColumns.length&&!this.endColumns.length)return;let t;let n;let e;const o=new Promise((o=>{if(this.startColumns.length){r((()=>{const{offsetX:i}=this.getParentOffsets();let s=i;e=Array.from(this.startColumns[0].parentElement.children);for(const o of this.startColumns){t=o.getBoundingClientRect();this.cachedColMeta.set(o,{width:t.width,idx:e.indexOf(o)});n=this.pinnedStart.find((t=>t===o));if(t.x<s){if(!n)this.pinnedStart=[...this.pinnedStart,o]}else if(n){this.pinnedStart=this.pinnedStart.filter((t=>t!==o))}s+=t.width}if(!this.endColumns.length)o()}))}if(this.endColumns.length){r((()=>{const i=Array.from(this.endColumns).reverse();e=Array.from(this.endColumns[0].parentElement.children);const{offsetX:s}=this.getParentOffsets();let r=0;for(const o of i){t=o.getBoundingClientRect();this.cachedColMeta.set(o,{width:t.width,idx:e.indexOf(o)});n=this.pinnedEnd.find((t=>t===o));if(this.tableDims.width+s-t.right<=r){if(!n)this.pinnedEnd=[o,...this.pinnedEnd]}else if(n){this.pinnedEnd=this.pinnedEnd.filter((t=>t!==o))}r+=t.width}o()}))}}));await o;this.generateCssCacheKey()}cacheX=0;cacheY=0;onScroll(t){if(this.cacheX!==t.x){this.cacheX=t.x;this.assessCols()}if(this.cacheY!==t.y){this.cacheY=t.y;this.assessRows()}}onResize(){const t=this.scrollElement.clientWidth;const n=this.scrollElement.clientHeight;this.tableDims={width:t,height:n};this.assessCols();this.assessRows()}}const st=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.nano-table{display:block;inline-size:100%;--max-col-width:clamp(200px, 500px, 50vw);--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--thead-color:#455560;--tfoot-color:#455560;--border-color:#dddbda;--border-style:thin solid var(--border-color);--border-tint-color:#0084a9;--border-tint-style:3px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:250 250 249;--foot-bg-rgb:var(--head-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding-start:0.625rem;--td-padding-end:0.625rem;--td-padding-top:0.6rem;--td-padding-bottom:0.6125rem;--th-padding-start:0.725rem;--th-padding-end:0.625rem;--th-padding-top:0.875rem;--th-padding-bottom:0.6875rem;--td-padding-v:var(--td-padding-top) var(--td-padding-bottom);--td-padding-h:var(--td-padding-start) var(--td-padding-end);--th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--th-padding-h:var(--th-padding-start) var(--th-padding-end);--foot-th-padding-v:var(--td-padding-top) var(--td-padding-bottom);--foot-th-padding-h:var(--td-padding-start) var(--td-padding-end);--head-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--head-th-padding-h:var(--th-padding-start) var(--th-padding-end);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;inline-size:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));border-inline-end:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-inline-size:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);border-inline-start:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;inline-size:100%}.nano-tbl__order-btn:focus-visible{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;transform:scale(0);inline-size:100%;block-size:0}.nano-tbl__progress-bar--show{transform:scale(1);block-size:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;border-block-start:var(--border-style);max-inline-size:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{border-block-end:var(--border-style)}.md .nano-tbl__td:first-child .nano-tbl__cell-content,.md .nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--bookend-col-padding)}.md .nano-tbl__td:last-child .nano-tbl__cell-content,.md .nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--bookend-col-padding)}@media (max-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--td-padding-start) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgb(var(--head-bg-rgb)/100%);font-size:var(--thead-font-size);border-block-start:none !important}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}thead .nano-tbl__td .nano-sortable__keyboard-handle,thead .nano-tbl__th .nano-sortable__keyboard-handle{position:absolute;inset-inline-end:5px;inset-block-start:50%;transform:translateY(-50%);background:white;z-index:10}tfoot .nano-tbl__td,tfoot .nano-tbl__th{color:var(--tfoot-color);font-weight:800;border-block-start:none;background:rgb(var(--foot-bg-rgb)/100%);font-size:var(--thead-font-size)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--foot-th-padding-v);padding-inline:var(--foot-th-padding-h)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgb(var(--ordered-bg-rgb)/80%) !important}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--td-padding-v);padding-inline:var(--td-padding-h)}.nano-tbl__cell-content--no-result{padding-block:2rem}.nano-tbl__cell-content--wrap{white-space:normal;overflow:visible}.nano-tbl tbody{will-change:scroll-position;opacity:1;transition:0.1s ease opacity}.nano-tbl tbody.nano-tbl__loading{z-index:-1;position:relative}.nano-tbl tbody.nano-tbl__inactive{opacity:0}.nano-tbl tbody .nano-tbl__tr:has(~.nano-tbl__tr--placeholder){display:none}.nano-tbl tbody .nano-tbl__tr--placeholder~.nano-tbl__tr{display:none}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__tr{--base-z:0}.nano-tbl__pin{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin .nano-tbl__th,.nano-tbl__pin .nano-tbl__td{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin--start{position:sticky;inset-inline-start:var(--pin-start, -1px)}.nano-tbl__pin--start::after{content:"";position:absolute;inset:0;box-shadow:5px 0 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-start-active, 0);z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{--z:calc(var(--base-z) + 3) !important}.nano-tbl__pin--end{position:sticky}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline-end:auto !important}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline-end:var(--pin-end, -1px);max-inline-size:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:"";position:absolute;inset:0;box-shadow:-5px 1px 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-end-active, 0);z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end{--z:calc(var(--base-z) + 2) !important}.nano-tbl__pin--top .nano-tbl__th,.nano-tbl__pin--top .nano-tbl__td{position:sticky;inset-block-start:var(--pin-top, -1px)}.nano-tbl__pin--top .nano-tbl__pin--end,.nano-tbl__pin--top .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--top.nano-tbl__pinned--top{--base-z:4}tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th,tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td{box-shadow:1px 3px 4px -1px rgba(0, 0, 0, 0.1)}.nano-tbl__pin--bottom .nano-tbl__th,.nano-tbl__pin--bottom .nano-tbl__td{position:sticky;inset-block-end:var(--pin-bottom, -1px)}.nano-tbl__pin--bottom .nano-tbl__pin--end,.nano-tbl__pin--bottom .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom{--base-z:5}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__pin{--base-z:6}tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th,tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td{box-shadow:1px -3px 4px -1px rgba(0, 0, 0, 0.07)}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th{border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{border-block-start:none}.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{border-block-start:var(--border-style);border-block-end:var(--border-tint-style)}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type th{border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type th{border-block-end:none !important}.nano-tbl .unlimited-width{max-inline-size:none}.nano-tbl__spinner{font-size:1.5rem;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:0}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl .nano-skeleton{line-height:var(--cell-line-height)}';const rt=st;const at=false;function lt(t,n=false){if(!performance||!at)return;if(n){performance?.mark("end"+t);performance?.measure(t,"start"+t,"end"+t);const n=performance?.getEntriesByName(t);console.info(n[n.length?n.length-1:0])}else{performance?.mark("start"+t)}}let ct=0;const dt=class{constructor(t){a(this,t);this.nanoTblReady=l(this,"nanoTblReady",7);this.nanoTblBlockRendered=l(this,"nanoTblBlockRendered",7);this.nanoTblBeforeSort=l(this,"nanoTblBeforeSort",7);this.nanoTblAfterSort=l(this,"nanoTblAfterSort",7);this.nanoTblBeforeFilter=l(this,"nanoTblBeforeFilter",7);this.nanoTblAfterFilter=l(this,"nanoTblAfterFilter",7);this.nanoTblBeforeSearch=l(this,"nanoTblBeforeSearch",7);this.nanoTblAfterSearch=l(this,"nanoTblAfterSearch",7);this.nanoTblBeforeEdit=l(this,"nanoTblBeforeEdit",7);this.debounceSetLoading=b(this.debounceSetLoading.bind(this),50)}customRenderer;type="table";caption;showCaption=false;loading=undefined;get _loading(){return this.loading!==undefined?this.loading:this.internalLoading}set _loading(t){if(this.loading!==undefined)return;this.debounceSetLoading(t)}debounceSetLoading(t){this.internalLoading=t}internalLoading=true;placeholderSize=5;rows;handleRowsChange(){if(!this.rows){this._loading=true;return}this._loading=true;Promise.resolve(this.rows).then((async t=>{await M(this.host,t);this.currentFilters="";this.currentSort="";await this.columnInit();if(!this.isReady)requestAnimationFrame((()=>this.setInitialBlockDimension()));this._loading=false;if(this.tablePinnedService)this.tablePinnedService.assessRows()}))}columns=[];async handleColsChange(){await D(this.host,this.columns);if(this.isReady)this.columnInit()}headRender={pinned:"top"};rowRender;footRender={pinned:"bottom"};showFooter=false;perBlock=50;get blocksLength(){return this.blocks.length}searchTerm;customFilterFn;customSortFn;defaultSort=true;handleSearchTermChange(){this.searchStart()}virtualTotalItems=0;virtualTotalItemsChangeHandler(){this.setBlocks()}get appliedFilters(){return this.filters}nanoTblReady;nanoTblBlockRendered;nanoTblBeforeSort;nanoTblAfterSort;nanoTblBeforeFilter;nanoTblAfterFilter;nanoTblBeforeSearch;nanoTblAfterSearch;nanoTblBeforeEdit;async resetSorting(){const t=this.columns.find((t=>!!t.order));if(!t)return;return this.sortStart(null,t.prop)}async addSort(t,n){const e=this.columns.find((n=>n.prop===t));if(!e)throw new Error("Cannot find column with "+t);return this.sortStart(n,e.prop)}async resetFilters(){this.filters=[];return this.filterStart()}async addFilters(t,n=true){if(!n)this.filters=[];return this.filterStart(t,n)}async removeFilters(t){this.filters=this.filters.filter((n=>!t.includes(n.prop)));return this.filterStart()}async updateRow(t,n){this.rows.splice(n,1,t);this.handleRowsChange()}get host(){return o(this)}renderId="tbl-"+ct++;store;filters=[];currentFilters="[]";currentSort="";tableEle;topAnchorEle;tableWrapperEle;activeWatcherIo;tablePinnedService;blocks=[];activeBlocks=[0,1];measureHeight=0;blockElements;blockHeights=[];set measureEle(t){if(!t)return;const n=t.getBoundingClientRect().height;this.measureHeight=Math.abs(this.measureHeight-n)<5?this.measureHeight:n;this.unitHeight=t.querySelector("tr")?.getBoundingClientRect().height||this.unitHeight}unitHeight=0;get scrollParent(){return this._scrollParent}set scrollParent(t){if(t===this._scrollParent)return;if(this._scrollParent){(this._scrollParent===document.documentElement?document:this._scrollParent).removeEventListener("scroll",this.scrollHandler)}(t===document.documentElement?document:t).addEventListener("scroll",this.scrollHandler);this._scrollParent=t}_scrollParent;get primaryBlockIndex(){return this._primaryBlockIndex}set primaryBlockIndex(t){if(this._primaryBlockIndex===t)return;this._primaryBlockIndex=t;this.nanoTblBlockRendered.emit({block:t,totalBlocks:this.blockElements.length})}_primaryBlockIndex;get isReady(){return this._isReady}set isReady(t){if(t===this._isReady)return;this._isReady=t;if(this.isReady)requestAnimationFrame((()=>this.handleReady()))}_isReady=false;handleReady(){const t=window.location.hash;if(t.length>1){try{const n=document.querySelector(t);if(n)n.scrollIntoView()}catch(t){}}this.nanoTblReady.emit()}sortStart=async(t,n,e)=>{if(this.currentSort===t+":"+n)return;this._loading=true;const o=this.nanoTblBeforeSort.emit({column:n,order:t});if(o.defaultPrevented)return;lt("sort");this.currentSort=t+":"+n;this.scrollToTop(e);if(this.customSortFn){try{const e=await this.customSortFn(n,t);if(e===true){this.sortComplete(t,n);this._loading=false;return}}catch(t){console.warn("custom sort failed",t);this.currentSort="";this._loading=false;return}}try{await H(this.host,n,t);this.sortComplete(t,n)}catch(t){console.warn("sort failed",t);this.currentSort=""}finally{if(this.blocks.length)this._loading=false}};sortComplete(t,n){this.columns=this.columns.map((e=>{if(e.prop===n)return{...e,order:t};return{...e,order:null}}));this.nanoTblAfterSort.emit({column:n,order:t});lt("sort",true)}async searchStart(){this._loading=true;const t=this.nanoTblBeforeSearch.emit({term:this.searchTerm});if(t.defaultPrevented)return;lt("search");this.scrollToTop();try{await N(this.host,this.searchTerm);this.nanoTblAfterSearch.emit({term:this.searchTerm});lt("search",true)}catch(t){console.warn("search failed",t)}finally{this._loading=false}}async filterStart(t,n=true){if(t){if(n){this.filters=[...this.filters.filter((n=>!t.find((t=>t.prop===n.prop)))),...t]}else{this.filters=t}}if(this.currentFilters===JSON.stringify(this.filters))return;this._loading=true;const e=this.nanoTblBeforeFilter.emit({filters:this.filters});if(e.defaultPrevented)return;lt("filter");this.currentFilters=JSON.stringify(this.filters);this.scrollToTop();if(this.customFilterFn){try{const t=await this.customFilterFn(this.filters);if(t===true){await this.filterComplete();this._loading=false;return}}catch(t){console.warn("custom filter failed",t);this.currentFilters="";this._loading=false;return}}try{await this.filterComplete()}catch(t){console.warn("filter failed",t)}finally{this._loading=false}}async filterComplete(){this.columns=this.columns.map((t=>{const n=this.filters.find((n=>n.prop===t.prop));if(n&&(typeof n.filter!=="boolean"&&n.filter.length||typeof n.filter==="boolean"))t.filter=n.filter;else if(t.filter!==null&&t.filter!==undefined||!!t.filter&&typeof t.filter!=="boolean"&&!t.filter.length)t.filter=undefined;return t}));await j(this.host,this.filters);this.nanoTblAfterFilter.emit({filters:this.filters});lt("filter",true)}scrollToTop(t){const n=this.scrollParent.style?.scrollBehavior;const e=this.scrollParent.scrollLeft;this.scrollParent.style.scrollBehavior="auto";if(this.topAnchorEle&&!U(this.topAnchorEle,.1)){this.host.scrollIntoView()}if(t&&!U(t,1))setTimeout((()=>t.scrollIntoView({block:"start"})),500);if(e)this.scrollParent.scrollLeft=e;if(n)this.scrollParent.style.scrollBehavior=n;this.scrollHandler()}setMeasureElement(){return new Promise((t=>{r((()=>{this.measureEle=this.blockElements.find((t=>!t?.classList?.contains(`${_}__inactive`)));t()}))}))}setInitialBlockDimension(){if(!this.blockElements?.length)return;lt("blockDims");const t=async()=>{await this.setMeasureElement();if(this.unitHeight)return true;return false};const n=new Promise((n=>{t().then((async e=>{if(e)n();else{const e=new IntersectionObserver((async()=>{if(await t()){n();e.disconnect()}}),{root:this.scrollParent});e.observe(this.tableEle)}}))}));n.then((()=>{lt("blockDims",true);lt("init",true);requestAnimationFrame((()=>this.isReady=true))}))}async columnInit(){this.filters=this.columns.filter((t=>t.filter!==undefined&&t.filter!==null)).map((t=>{const{filter:n,prop:e}=t;return{prop:e,filter:n}}));if(this.searchTerm){await this.searchStart()}if(this.filters.length){await this.filterStart()}const t=this.columns.find((t=>!!t.order));if(t){await this.sortStart(t.order,t.prop)}if(this.tablePinnedService)this.tablePinnedService.assessCols()}setBlocks(){const t=this.store.data.state.rows;if(!t.length){this.blocks=[];return}lt("setBlocks");let n=1;const e=this.virtualTotalItems>t.length?this.virtualTotalItems:t.length;let o=[];const i=[];for(n;n<=e;n++){o.push(this.store.data.state.rows[n-1]||{__uuid:""});if(n%this.perBlock===0){i.push({rows:o,__uuid:h(o.map((t=>t.__uuid)).join())});o=[]}}if(o.length){i.push({rows:o,__uuid:h(o.map((t=>t.__uuid)).join())})}this.blocks=i;lt("setBlocks",true)}getBlockHeight(t){if(this.blockHeights.length){const n=this.blockHeights.find((n=>n.blockIndex===t));if(n&&n.height)return n.height}const n=this.blocks[t].rows.length;if(n===this.perBlock&&this.measureHeight){return this.measureHeight}return this.unitHeight?this.unitHeight*n:100}setBlockHeight(){this.activeBlocks.forEach((t=>{const n=this.blockElements[t];if(!n)return;r((()=>{if(n.classList.contains(`${_}__inactive`))return;const e=n.getBoundingClientRect().height;const o=this.blockHeights.findIndex((n=>n.blockIndex===t));if(o>-1){this.blockHeights[o]={height:e,blockIndex:t}}else this.blockHeights.push({height:e,blockIndex:t})}))}))}scrollHandler=()=>{let t=0;lt("scrollHandler");if(!this.store?.general.state.isActive||!this.rows)return;if(this.primaryBlockIndex===undefined)this.primaryBlockIndex=0;r((()=>{t=typeof this.scrollParent.scrollTop!=="undefined"?this.scrollParent.scrollTop:window.scrollY;t+=this.host.offsetTop;if(this.tablePinnedService){this.tablePinnedService.onScroll({x:typeof this.scrollParent.scrollLeft!=="undefined"?this.scrollParent.scrollLeft:window.scrollX,y:t})}let n=this.host.offsetTop;let e=0;const o=this.blocks.length;while(e<o&&t>=n){n+=this.getBlockHeight(e);if(t<n){const t=[e,e+1];if(t.toString()!==this.activeBlocks.toString()){this.activeBlocks=t}this.primaryBlockIndex=e}e++}lt("scrollHandler",true)}))};processSlots(){if(!this.caption&&!this.host.querySelector('[slot="caption"]')){console.error("For accessibility you must set a `caption` prop or use the `caption` slot")}}handleResizeChange=t=>{this.tableWrapperEle.className="";let n=[`${_}__wrap`];if(t.target?.className)n=[...t.target.className.split(" "),...n];this.tableWrapperEle.classList.add(...n.filter((t=>!!t)))};setupActiveWatcher(){if(!this.host||!this.scrollParent||!this.store)return;if(this.activeWatcherIo){this.activeWatcherIo.disconnect();this.activeWatcherIo=undefined}const t=this.activeWatcherIo=new IntersectionObserver((([t])=>{if(t.isIntersecting)this.store.general.state.isActive=true;else this.store.general.state.isActive=false}),{root:this.scrollParent,threshold:0});t.observe(this.host)}async componentWillLoad(){lt("init");this.store=await A(this.host,this.columns,this.scrollParent,this.isReady);this.handleRowsChange();this.store.general.onChange("isActive",(()=>{this.scrollHandler()}));this.store.data.onChange("rows",(()=>this.setBlocks()));this.processSlots();this.setBlocks();this.scrollParent=f(this.host);this.setupActiveWatcher()}connectedCallback(){this.scrollParent=f(this.host);this.setupActiveWatcher()}componentDidLoad(){this.setInitialBlockDimension();if(!this.tablePinnedService){this.tablePinnedService=new it(this.tableEle,this.scrollParent)}}componentShouldUpdate(t,n,e){if(["rows","columns"].includes(e))return false}componentWillRender(){lt("render")}componentDidRender(){this.setMeasureElement().then((()=>this.setBlockHeight()));lt("render",true)}disconnectedCallback(){if(!this.activeWatcherIo)return;this.activeWatcherIo.disconnect();this.activeWatcherIo=undefined;(this.scrollParent===document.documentElement?document:this.scrollParent).removeEventListener("scroll",this.scrollHandler)}render(){this.blockElements=[];return d(c,{key:"7d6193dc4b48fa4085ac1029a0c70dcf2f07a6fa",class:"nano-table"},d("div",{key:"acbfb0c4642cbce4dc1b8c9e22be90cbcbec84a9",class:`${_}__top-anchor`,ref:t=>this.topAnchorEle=t}," "),d("nano-resize-observe",{key:"9a38da33f0cfb64329331510f196ef7c42e51ca3",states:"576w sm, 768w md",class:"sm md",onNanoResizeStateChange:this.handleResizeChange,onNanoResize:()=>{if(this.tablePinnedService)this.tablePinnedService.onResize()}}),d("div",{key:"25aad643f108a5e48319a20a70a36066eb099d5d",class:`${_}__wrap sm md`,ref:t=>this.tableWrapperEle=t,"aria-labelledby":"nano-table-caption-"+this.renderId,tabindex:this.type==="grid"?"0":undefined},d("nano-progress-bar",{key:"519fc388c4926af6bd9dfaba2112fa2db1dbc3cd",indeterminate:true,class:{[`${_}__progress-bar`]:true,[`${_}__progress-bar--show`]:this._loading}}),d("table",{key:"b58a665666893b4b15aad6ab7e7a08bd20527cb2",role:this.type==="grid"?"grid":undefined,"aria-rowcount":this.store.data.state.rows.length,"aria-colcount":this.store.config.state.columns.length,class:`${_}`,ref:t=>this.tableEle=t,id:"nano-table-"+this.renderId},d("caption",{key:"5bc653ff3a487546e652cd787996dfde662fdf67",class:{[`${_}__caption`]:true,[`${_}__caption--hide`]:!this.showCaption},id:"nano-table-caption-"+this.renderId},d("slot",{key:"a6c855db5a74c123d08ad4e65954f17573c9ea3a",name:"caption"},this.caption)),d("thead",{key:"743820b2abc85adac1fe4babf918be10a8e62a26"},d(et,{key:"e7a9a7c27033c2ed69bdeb8bfa68af3a3d721036",rowRenderer:this.headRender},this.store.config.state.columns.map((t=>[d(G,{column:t,headRenderer:this.headRender,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort}})])))),this._loading&&!this.blocks.length&&d("tbody",{key:"6c7d553988620e1f3ee9cbf0d2c6bade44c5eefa",class:`${_}__active ${_}__loading`},[...Array(10).keys()].map((t=>d("tr",null,this.store.config.state.columns.map(((n,e)=>d(Z,{rowIndex:t,colIndex:e,nestedContent:()=>d("nano-skeleton",null)}))))))),d("tr",{key:"092f27f8726f12b7fa10d166b560d6df6593bbc1",hidden:!!this._loading||!!this.blocks.length},d("th",{key:"edfbca925f99550897c3b460a6efcb326863a591",class:`${_}__th`,colSpan:this.store.config.state.columns.length},d("div",{key:"5d4b996c3141b6583317a2b28357fe7af3a873bc",class:"nano-tbl__cell-content nano-tbl__cell-content--no-result"},d("slot",{key:"00db3e5649ccdc97062881ff7b3801fb1847c2db",name:"no-results"},"No results found")))),this.blocks.map(((t,n)=>d("tbody",{key:t.__uuid,id:`tbody-${this.renderId}-${n}`,ref:t=>{this.blockElements.push(t)},class:{[`${_}__inactive`]:!this.activeBlocks.includes(n),[`${_}__active`]:this.activeBlocks.includes(n)}},this.activeBlocks.includes(n)?t.rows.map(((t,e)=>{const o=n>0?n*this.perBlock+e:e;return d(nt,{rowRenderer:this.rowRender,rowModel:t,rowIndex:o},this.store.config.state.columns.map(((t,n)=>d(Z,{rowIndex:o,colIndex:n}))))})):d("tr",{class:`${_}__tr--placeholder`},d("td",{colSpan:this.store.config.state.columns.length,style:{height:this.getBlockHeight(n)+"px"}}))))),this.showFooter&&d("tfoot",{key:"15a1a79049ad87f63c87e2d905bc401a7d4bbb60"},d(et,{key:"ee06dea32599c6dae3fcdcabc5a5bd0ea6536aea",rowRenderer:this.footRender},this.store.config.state.columns.map((t=>[d(G,{column:t,headRenderer:this.footRender,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort}})]))))),!!this.blocks.length&&d("nano-spinner",{key:"dd0041a5232a79a9f1882d2b9e5beebd79587a5d",type:"circle",class:{[`${_}__spinner`]:true,[`${_}__spinner--show`]:this._loading}})))}static get watchers(){return{rows:["handleRowsChange"],columns:["handleColsChange"],searchTerm:["handleSearchTermChange"],virtualTotalItems:["virtualTotalItemsChangeHandler"]}}};dt.style=rt;export{dt as T,k as c};
5
- //# sourceMappingURL=nano-table-5eaf3a0c.js.map
4
+ import{k as t,h as n,F as e,g as o,f as i,d as s,e as r,r as a,c as l,a as c}from"./index-6cc72cd9.js";import{h as d}from"./renderer-4bc3e2dc.js";import{a as h}from"./math-d160f8a6.js";import{d as b}from"./throttle-df960210.js";import{f}from"./scroll-parent-be39fbd0.js";import{c as p}from"./index-f5f7b950.js";const _="nano-tbl";const u=(t,n)=>{const e=globalThis[n];return e!=null&&t instanceof e};const m=t=>{if(t!=null){if(u(t,"ArrayBuffer")||u(t,"MessagePort")||u(t,"ImageBitmap")||u(t,"OffscreenCanvas")){return[t]}if(typeof t==="object"){if(t.constructor===Object){t=Object.values(t)}if(Array.isArray(t)){return t.flatMap(m)}return m(t.buffer)}}return[]};let g=0;let y=0;const w=new Map;const v=new Map;const k=(n,e,o)=>{const i=new Worker(n,{name:e});i.addEventListener("message",(({data:n})=>{if(n){const e=n[0];const i=n[1];const s=n[2];if(e===o){const e=n[3];const[o,r,a]=w.get(i);w.delete(i);if(e){const n=e.isError?Object.assign(new Error(e.value.message),e.value):e.value;t(n);r(n)}else{if(a){a.forEach((t=>v.delete(t)))}o(s)}}else if(e===o+".cb"){try{v.get(i)(...s)}catch(n){t(n)}}}}));return i};const x=(t,n,e)=>(...o)=>new Promise(((i,s)=>{let r=g++;let a=0;let l=o.length;let c=[i,s];w.set(r,c);for(;a<l;a++){if(typeof o[a]==="function"){const t=y++;v.set(t,o[a]);o[a]=[n+".cb",t];(c[2]=c[2]||[]).push(t)}}const d=t=>t.postMessage([n,r,e,o],m(o));if(t.then){t.then(d)}else{d(t)}}));const $=import("./table.worker-8e04f768.js").then((t=>t.worker));const z=x($,"stencil.table.worker","createWorkerStore");const C=x($,"stencil.table.worker","syncConfigToWorker");const S=x($,"stencil.table.worker","syncDataToWorker");const R=x($,"stencil.table.worker","workerFilter");const T=x($,"stencil.table.worker","workerSearch");const I=x($,"stencil.table.worker","workerSort");function B(t){const n=JSON.parse(JSON.stringify(t));t.forEach((t=>{if(t?.sortCompareFn){const e=n.find((n=>n.prop===t.prop));e.sortCompareFn=t.sortCompareFn.toString()}}));return n}const P=new WeakMap;async function A(t,n,e,o){const i={data:p({rows:[]}),config:p({columns:n}),general:p({workerId:null,scrollParent:e,host:t,isReady:o})};const s=await z(i.data.state.rows,B(i.config.state.columns));i.general.state.workerId=s;P.set(t,i);i.data.use({reset:()=>{if(i.general.state.workerId)S(i.general.state.workerId,null)},dispose:()=>{if(i.general.state.workerId)S(i.general.state.workerId,null)}});i.config.use({reset:()=>{if(i.general.state.workerId)C(i.general.state.workerId,null)},dispose:()=>{if(i.general.state.workerId)C(i.general.state.workerId,null)}});return i}function F(t){return P.get(t)}function E(t){if(t instanceof Date){return"date"}if(["number","string","boolean"].includes(typeof t)){return typeof t}return"unknown"}function M(t,n){const e=P.get(t);if(!e)return;const o=e.config.state.columns;const i=o.filter((t=>t.type==="date")).reduce(((t,n)=>[...t,n.prop]),[]);const s=o.filter((t=>!t.type));n=n.map(((t,n)=>{if(s.length&&n===0){e.config.state.columns=o.map((n=>{if(s.includes(n)&&t[n.prop]&&!n.type){n.type=E(t[n.prop]);if(n.type==="date")i.push(n.prop)}return n}))}i.forEach((n=>{const e=new Date(t[n]);if(!!e&&Number(e))t[n]=Number(e)}));t["__index"]=n;t["__uuid"]=h(o.map((n=>t[n.prop])).join());return t}));e.data.state.rows=n;if(e.general.state.workerId)return S(e.general.state.workerId,n)}function D(t,n){const e=P.get(t);if(!e)return;e.config.state.columns=n;if(e.general.state.workerId)return C(e.general.state.workerId,B(n))}async function N(t,n){const e=P.get(t);if(!e||!e.general.state.workerId)return;try{e.data.state.rows=await T(e.general.state.workerId,n)}catch(t){console.warn(t)}}async function j(t,n){const e=P.get(t);if(!e||!e.general.state.workerId)return;try{e.data.state.rows=await R(e.general.state.workerId,n)}catch(t){console.warn(t)}}async function H(t,n,e){const o=P.get(t);if(!o||!o.general.state.workerId)return;try{o.data.state.rows=await I(o.general.state.workerId,n,e)}catch(t){console.warn(t)}}function O(t,n){const e=Y();const o=e.config.state.columns;const i=e.data.state.rows;const s=o[n];const r=s?.prop;const a=i[t];const l=a?a[o[n].prop]:"";return{prop:r,cellModel:l,column:s,rowIndex:t,rowModel:a}}function W(t){const n=Y();const e=n.data.state.rows;const o=e[t];return{rowModel:o,rowIndex:t}}function L(t,n){if(!n)return t;const e={...n,...t};if(n.class){if(typeof n.class==="object"&&typeof e.class==="object"){e.class={...n.class,...e.class}}else if(typeof n.class==="string"&&typeof e.class==="object"){e.class[n.class]=true}else if(typeof e.class==="string"&&typeof n.class==="string"){e.class+=" "+n.class}}if(n.style){e.style={...n.style,...e.style}}return e}function Y(){return F(o(i()))}function J(t,n,e){const o={...e};const i=Y().config.state.columns[n]?.cellProperties;if(!i)return o;const s=O(t,n);const r=i(s);if(!r)return o;return L(o,r)}function K(t){const o=t?.columnTemplate;return o?o(n,t):n(e,null,t.title)}function X(t,n,e=false){const o={[`${_}__${t}`]:true,[`${_}__pin`]:!!n,[`${_}__pin--top`]:n==="top",[`${_}__pin--bottom`]:n==="bottom"};if(e)return q(o);return o}function q(t){let n="";Object.entries(t).forEach((([t,e])=>{if(e)n+=t+" "}));return n}function U(t,n=100){const e=t.getBoundingClientRect();const o=window.innerHeight||document.documentElement.clientHeight;if(!e.bottom&&!e.top&&!e.left&&!e.right&&!e.height&&!e.width&&!e.x&&!e.y)return false;return!(Math.floor(100-(e.top>=0?0:e.top)/+-e.height*100)<n||Math.floor(100-(e.bottom-o)/e.height*100)<n)}const G=({column:t,onColumnSortClick:n,defaults:o})=>{function i(e){let o;switch(t.order){case"asc":o="desc";break;case"desc":o=null;break;default:o="asc"}n(o,t.prop,e.target.closest("th"))}function s(){return!!o.sortable&&t.sortable!==false||!o.sortable&&t.sortable===true}let r={};if(t.columnProperties){r=t.columnProperties(t)||r}const a={class:{...X("th",t.pinned),[`${_}__pin--start`]:t.pinned==="start",[`${_}__pin--end`]:t.pinned==="end",[`${_}__ordered`]:!!t.order,[`${_}__filtered`]:t.filter!==undefined&&t.filter!==null}};let l=r?L(a,r):a;const c=K(t);if(!c)return d(e,null);l=Number(l.colSpan)>1?{...l,scope:"colgroup"}:{...l,scope:"col"};if(s()){const n=t.order?t.order==="asc"?"ascending":"descending":"none";l={...l,"aria-sort":n}}return d("th",{...l,key:t.prop},s()?d("button",{class:{[`${_}__order-btn`]:true,[`${_}__cell-content`]:true},onClick:i},K(t),t.filter!==undefined&&t.filter!==null&&d("nano-icon",{name:"light/filter"}),!!t.order&&(t.order==="desc"?d("nano-icon",{name:"solid/arrow-down-long"}):d("nano-icon",{name:"solid/arrow-up-long"})),d("div",{class:`${_}__status-icons`},d("nano-icon",{name:"light/chevron-down"}))):d("div",{class:`${_}__cell-content`},K(t),t.filter!==undefined&&t.filter!==null&&d("nano-icon",{name:"light/bars-filter"})))};function Q(t,n){const o=Y();const s=o.config.state.columns;const r=s[n]?.cellTemplate;const a=O(t,n);const l=i();if(!!a.cellModel&&s[n].type==="date"){const t=new Date(a.cellModel);if(t instanceof Date&&!isNaN(t)){a.cellModel=!r?`${new Date(a.cellModel).toLocaleDateString()} ${new Date(a.cellModel).toLocaleTimeString()}`:t}}let c=false;const h=(...t)=>{c=true;return d(...t)};let b=r?r(h,a):undefined;if(b&&l.customRenderer&&b["t"]===undefined&&!(b instanceof Element)&&typeof b!=="string"&&!c){const t=document.createElement("template");const n=l.customRenderer(b,t.content);b=n&&n["then"]?n:t}return b?b:a.cellModel!==undefined&&a.cellModel!==null?d(e,null,a.cellModel?.toString()):""}const V=(t,n=false)=>{const e=Y();const o=e.config.state.columns[t];const i={[`${_}__td`]:true,[`${_}__ordered`]:!!o.order,[`${_}__pin`]:!!o.pinned,[`${_}__pin--start`]:o.pinned==="start",[`${_}__pin--end`]:o.pinned==="end"};if(n)return q(i);return i};const Z=({rowIndex:t,colIndex:n,nestedContent:e})=>{const o=()=>e?e():Q(t,n)||d("span",{class:"placeholder"}," ");let s="td";const r=i();const a=Y();const l=a.config.state.columns[n];let c=J(t,n,{class:V(n)});if(l.rowHeader){c=Number(c.rowSpan)>1?{...c,scope:"rowgroup"}:{...c,scope:"row"};s="th"}const h=t=>{const n=o();return d("div",{ref:t=>{if(!t)return;if(n instanceof Element){t.replaceChildren();t.append(n["content"]||n)}else if(n["then"]){n.then((n=>t.innerHTML=n))}},...t,class:{[`${_}__cell-content`]:true,[`${_}__cell-content--wrap`]:!!l.wrap},innerHTML:typeof n==="string"&&n.includes("<")?n:undefined},(typeof n!=="string"||!n.includes("<"))&&!n["then"]&&!(n instanceof Element)&&n)};return d(s,{role:r.type==="grid"?"gridcell":undefined,...c},l.autoTooltip&&!l.wrap?d("nano-resize-observe",{notifyContentFit:"x",onNanoResizeContentFitChange:t=>t.target.firstElementChild.disabled=t.detail.x},d("nano-tooltip",{disabled:true,placement:"top",onNanoShow:t=>t.target.closest(s).style.zIndex="100",onNanoHide:t=>t.target.closest(s).style.zIndex=""},d(h,null),d("span",{slot:"content"},d(o,null)))):d(h,null))};const tt=(t,n,e)=>{const o=d("div",{...t.wrapperProps,class:{[`${_}__cell-content`]:true,[`${_}__cell-content--wrap`]:t.wrap}},n);return t.header?d("th",{scope:e,...t.cellProps},o):d("td",{...t.cellProps},o)};const nt=({rowRenderer:t,rowIndex:n,rowModel:e},o,i)=>{const s=({header:t,wrap:n,cellProps:e,wrapperProps:o},i)=>tt({header:t,wrap:n,cellProps:e,wrapperProps:o},i,"row");let r={};if(!e){const t=W(n);e=t.rowModel}if(t?.rowProperties){r=t.rowProperties({rowModel:e,rowIndex:n})||r}let a;if(t?.pinned&&typeof t.pinned==="function"){a=t.pinned({rowModel:e,rowIndex:n})}const l=L({class:X("tr",a,true)},r);const c=t?.template;const h=t=>i.map(t,((t,n)=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=L({class:V(n,true)},t.vattrs)}return t}));if(c){let t=c(d,{renderedRow:d("tr",{...l,key:e.__uuid},o),rowModel:e,rowIndex:n},s);if(Array.isArray(t)){t=i.map(t,((t,n)=>{if(t.vtag==="tr"){if(!t.vkey)t.vkey=`${e.__uuid}_${n}`;t.vattrs=L({class:X("tr",a,true)},t.vattrs);if(t.vchildren){t.vchildren=h(t.vchildren)}}return t}))}return t}return d("tr",{...l,key:e.__uuid},h(o))};const et=({rowRenderer:t},n,e)=>{let o={};if(t.rowProperties){o=t.rowProperties()||{}}const i=({header:t,wrap:n,cellProps:e,wrapperProps:o},i)=>tt({header:t,wrap:n,cellProps:e,wrapperProps:o},i,"col");const s=t.pinned||null;const r={class:X("tr",s)};const a=o?L(r,o):r;const l=t?.template;if(l){let t=l(d,{renderedRow:d("tr",{...a},n)},i);if(Array.isArray(t)){t=e.map(t,(t=>{if(t.vtag==="tr"){t.vattrs=L({class:X("tr",s,true)},t.vattrs);if(t.vchildren){t.vchildren=e.map(t.vchildren,(t=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=L({class:X(t.vtag.toString(),s,true)},t.vattrs)}return t}))}}return t}))}return t}return d("tr",{...a},n)};function ot(t,n){const e=document.getElementById(t)||document.createElement("style");e.id=t;e.innerHTML=n;if(!e.isConnected)document.head.append(e)}class it{cachedColMeta=new WeakMap;tableId;tableEle;scrollElement;startColumns;endColumns;topRows;bottomRows;tableDims;constructor(t,n){this.tableEle=t;this.tableId=this.tableEle.id;this.scrollElement=n;this.startColumns=t.querySelector("thead").getElementsByClassName(`${_}__pin--start`);this.endColumns=t.querySelector("thead").getElementsByClassName(`${_}__pin--end`);this.topRows=t.getElementsByClassName(`${_}__pin--top`);this.bottomRows=t.getElementsByClassName(`${_}__pin--bottom`);this.onResize()}get pinnedStart(){return this._pinnedStart}set pinnedStart(t){this._pinnedStart=t;this.handlePinnedStartChange()}_pinnedStart=[];handlePinnedStartChange(){s((()=>{if(this.pinnedStart.length){this.tableEle.classList.add(`${_}__pinned--start`);const t=this.cachedColMeta.get(this.pinnedStart[this.pinnedStart.length-1]);ot(`${this.tableId}-col-start-active-style`,`\n #${this.tableId} tr > :nth-child(${t.idx+1}) {\n --pin-start-active: 1;\n }\n `)}else{this.tableEle.classList.remove(`${_}__pinned--start`);ot(`${this.tableId}-col-start-active-style`,``)}}))}get pinnedEnd(){return this._pinnedEnd}set pinnedEnd(t){this._pinnedEnd=t;this.handlePinnedEndChange()}_pinnedEnd=[];handlePinnedEndChange(){s((()=>{if(this.pinnedEnd.length){this.tableEle.classList.add(`${_}__pinned--end`);const t=this.cachedColMeta.get(this.pinnedEnd[0]);ot(`${this.tableId}-col-end-active-style`,`\n #${this.tableId} tr > :nth-child(${t.idx+1}) { --pin-end-active: 1; }\n `)}else{this.tableEle.classList.remove(`${_}__pinned--end`);ot(`${this.tableId}-col-end-active-style`,``)}}))}get cssColDimensionCacheKey(){return this._cssColDimensionCacheKey}set cssColDimensionCacheKey(t){if(t===this._cssColDimensionCacheKey)return;this._cssColDimensionCacheKey=t;this.createPinnedColDimensionStyles()}_cssColDimensionCacheKey="";generateCssCacheKey(){let t="";for(const n of this.startColumns){const e=this.cachedColMeta.get(n);t+=`${e.idx}-start-${e.width}`}for(const n of this.endColumns){const e=this.cachedColMeta.get(n);t+=`${e.idx}-start-${e.width}`}this.cssColDimensionCacheKey=t}createPinnedColDimensionStyles(){let t=0;let n=0;const e=Array.from(this.startColumns);const o=Array.from(this.endColumns).reverse();const i=`\n ${e.map((n=>{const e=this.cachedColMeta.get(n);t+=e.width-1||-1;return`\n #${this.tableId} tr > :nth-child(${e.idx+1}) ~ td,\n #${this.tableId} tr > :nth-child(${e.idx+1}) ~ th {\n --pin-start: ${t-1}px;\n }\n `})).join("")}\n ${o.map((t=>{const e=this.cachedColMeta.get(t);n+=e.width-1||-1;return`\n #${this.tableId} tr > td:has(~ :nth-child(${e.idx+1})),\n #${this.tableId} tr > th:has(~ :nth-child(${e.idx+1})) {\n --pin-end: ${n-1}px;\n }\n `})).join("")}\n `;ot(`${this.tableId}-dimension-style`,i)}getParentOffsets(){const{x:t,y:n}=this.scrollElement.getBoundingClientRect();let e=t;let o=n;if(this.scrollElement===document.documentElement){e=this.scrollElement.offsetLeft;o=this.scrollElement.offsetTop}return{offsetX:e,offsetY:o}}assessRows(){if(!this.topRows.length&&!this.bottomRows.length)return;if(this.topRows.length){r((async()=>{let t=0;let n;const{offsetY:e}=this.getParentOffsets();for(const o of this.topRows){const{y:i,height:r}=o.getBoundingClientRect();const a=o.parentElement;const l=getComputedStyle(o).getPropertyValue("--pin-top");const c=l!==""?parseFloat(l):t;s((()=>{if(i-e<=c){o.classList.add(`${_}__pinned`,`${_}__pinned--top`)}else{o.classList.remove(`${_}__pinned`,`${_}__pinned--top`)}if(n!==a){a.style.setProperty("--pin-top",`${t-1}px`);t+=r-1;n=a}}))}}))}if(this.bottomRows.length){const t=Array.from(this.bottomRows).reverse();r((async()=>{let n;let e=0;const{offsetY:o}=this.getParentOffsets();for(const i of t){if(!i.isConnected)continue;const{y:t,height:r}=i.getBoundingClientRect();const a=i.parentElement;const l=getComputedStyle(i).getPropertyValue("--pin-bottom");const c=l!==""?parseFloat(l):e;await new Promise((l=>s((()=>{if(this.tableDims.height+o-(t+r)<=c){i.classList.add(`${_}__pinned`,`${_}__pinned--bottom`)}else{i.classList.remove(`${_}__pinned`,`${_}__pinned--bottom`)}if(n!==a){a.style.setProperty("--pin-bottom",`${e-1}px`);e+=r-1;n=a}l()}))))}}))}}async assessCols(){if(!this.startColumns.length&&!this.endColumns.length)return;let t;let n;let e;const o=new Promise((o=>{if(this.startColumns.length){r((()=>{const{offsetX:i}=this.getParentOffsets();let s=i;e=Array.from(this.startColumns[0].parentElement.children);for(const o of this.startColumns){t=o.getBoundingClientRect();this.cachedColMeta.set(o,{width:t.width,idx:e.indexOf(o)});n=this.pinnedStart.find((t=>t===o));if(t.x<s){if(!n)this.pinnedStart=[...this.pinnedStart,o]}else if(n){this.pinnedStart=this.pinnedStart.filter((t=>t!==o))}s+=t.width}if(!this.endColumns.length)o()}))}if(this.endColumns.length){r((()=>{const i=Array.from(this.endColumns).reverse();e=Array.from(this.endColumns[0].parentElement.children);const{offsetX:s}=this.getParentOffsets();let r=0;for(const o of i){t=o.getBoundingClientRect();this.cachedColMeta.set(o,{width:t.width,idx:e.indexOf(o)});n=this.pinnedEnd.find((t=>t===o));if(this.tableDims.width+s-t.right<=r){if(!n)this.pinnedEnd=[o,...this.pinnedEnd]}else if(n){this.pinnedEnd=this.pinnedEnd.filter((t=>t!==o))}r+=t.width}o()}))}}));await o;this.generateCssCacheKey()}cacheX=0;cacheY=0;onScroll(t){if(this.cacheX!==t.x){this.cacheX=t.x;this.assessCols()}if(this.cacheY!==t.y){this.cacheY=t.y;this.assessRows()}}onResize(){const t=this.scrollElement.clientWidth;const n=this.scrollElement.clientHeight;this.tableDims={width:t,height:n};this.assessCols();this.assessRows()}}const st=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.nano-table{display:block;inline-size:100%;--max-col-width:clamp(200px, 500px, 50vw);--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--thead-color:#455560;--tfoot-color:#455560;--border-color:#dddbda;--border-style:thin solid var(--border-color);--border-tint-color:#0084a9;--border-tint-style:3px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:250 250 249;--foot-bg-rgb:var(--head-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding-start:0.625rem;--td-padding-end:0.625rem;--td-padding-top:0.6rem;--td-padding-bottom:0.6125rem;--th-padding-start:0.725rem;--th-padding-end:0.625rem;--th-padding-top:0.875rem;--th-padding-bottom:0.6875rem;--td-padding-v:var(--td-padding-top) var(--td-padding-bottom);--td-padding-h:var(--td-padding-start) var(--td-padding-end);--th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--th-padding-h:var(--th-padding-start) var(--th-padding-end);--foot-th-padding-v:var(--td-padding-top) var(--td-padding-bottom);--foot-th-padding-h:var(--td-padding-start) var(--td-padding-end);--head-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--head-th-padding-h:var(--th-padding-start) var(--th-padding-end);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;inline-size:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));border-inline-end:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-inline-size:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);border-inline-start:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;inline-size:100%}.nano-tbl__order-btn:focus-visible{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;transform:scale(0);inline-size:100%;block-size:0}.nano-tbl__progress-bar--show{transform:scale(1);block-size:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;border-block-start:var(--border-style);max-inline-size:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{border-block-end:var(--border-style)}.md .nano-tbl__td:first-child .nano-tbl__cell-content,.md .nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--bookend-col-padding)}.md .nano-tbl__td:last-child .nano-tbl__cell-content,.md .nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--bookend-col-padding)}@media (max-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--td-padding-start) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgb(var(--head-bg-rgb)/100%);font-size:var(--thead-font-size);border-block-start:none !important}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}thead .nano-tbl__td .nano-sortable__keyboard-handle,thead .nano-tbl__th .nano-sortable__keyboard-handle{position:absolute;inset-inline-end:5px;inset-block-start:50%;transform:translateY(-50%);background:white;z-index:10}tfoot .nano-tbl__td,tfoot .nano-tbl__th{color:var(--tfoot-color);font-weight:800;border-block-start:none;background:rgb(var(--foot-bg-rgb)/100%);font-size:var(--thead-font-size)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--foot-th-padding-v);padding-inline:var(--foot-th-padding-h)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgb(var(--ordered-bg-rgb)/80%) !important}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--td-padding-v);padding-inline:var(--td-padding-h)}.nano-tbl__cell-content--no-result{padding-block:2rem}.nano-tbl__cell-content--wrap{white-space:normal;overflow:visible}.nano-tbl tbody{will-change:scroll-position;opacity:1;transition:0.1s ease opacity}.nano-tbl tbody.nano-tbl__loading{z-index:-1;position:relative}.nano-tbl tbody.nano-tbl__inactive{opacity:0}.nano-tbl tbody .nano-tbl__tr:has(~.nano-tbl__tr--placeholder){display:none}.nano-tbl tbody .nano-tbl__tr--placeholder~.nano-tbl__tr{display:none}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__tr{--base-z:0}.nano-tbl__pin{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin .nano-tbl__th,.nano-tbl__pin .nano-tbl__td{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin--start{position:sticky;inset-inline-start:var(--pin-start, -1px)}.nano-tbl__pin--start::after{content:"";position:absolute;inset:0;box-shadow:5px 0 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-start-active, 0);z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{--z:calc(var(--base-z) + 3) !important}.nano-tbl__pin--end{position:sticky}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline-end:auto !important}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline-end:var(--pin-end, -1px);max-inline-size:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:"";position:absolute;inset:0;box-shadow:-5px 1px 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-end-active, 0);z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end{--z:calc(var(--base-z) + 2) !important}.nano-tbl__pin--top .nano-tbl__th,.nano-tbl__pin--top .nano-tbl__td{position:sticky;inset-block-start:var(--pin-top, -1px)}.nano-tbl__pin--top .nano-tbl__pin--end,.nano-tbl__pin--top .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--top.nano-tbl__pinned--top{--base-z:4}tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th,tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td{box-shadow:1px 3px 4px -1px rgba(0, 0, 0, 0.1)}.nano-tbl__pin--bottom .nano-tbl__th,.nano-tbl__pin--bottom .nano-tbl__td{position:sticky;inset-block-end:var(--pin-bottom, -1px)}.nano-tbl__pin--bottom .nano-tbl__pin--end,.nano-tbl__pin--bottom .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom{--base-z:5}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__pin{--base-z:6}tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th,tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td{box-shadow:1px -3px 4px -1px rgba(0, 0, 0, 0.07)}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th{border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{border-block-start:none}.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{border-block-start:var(--border-style);border-block-end:var(--border-tint-style)}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type th{border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type th{border-block-end:none !important}.nano-tbl .unlimited-width{max-inline-size:none}.nano-tbl__spinner{font-size:1.5rem;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:0}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl .nano-skeleton{line-height:var(--cell-line-height)}';const rt=st;const at=false;function lt(t,n=false){if(!performance||!at)return;if(n){performance?.mark("end"+t);performance?.measure(t,"start"+t,"end"+t);const n=performance?.getEntriesByName(t);console.info(n[n.length?n.length-1:0])}else{performance?.mark("start"+t)}}let ct=0;const dt=class{constructor(t){a(this,t);this.nanoTblReady=l(this,"nanoTblReady",7);this.nanoTblBlockRendered=l(this,"nanoTblBlockRendered",7);this.nanoTblBeforeSort=l(this,"nanoTblBeforeSort",7);this.nanoTblAfterSort=l(this,"nanoTblAfterSort",7);this.nanoTblBeforeFilter=l(this,"nanoTblBeforeFilter",7);this.nanoTblAfterFilter=l(this,"nanoTblAfterFilter",7);this.nanoTblBeforeSearch=l(this,"nanoTblBeforeSearch",7);this.nanoTblAfterSearch=l(this,"nanoTblAfterSearch",7);this.nanoTblBeforeEdit=l(this,"nanoTblBeforeEdit",7);this.debounceSetLoading=b(this.debounceSetLoading.bind(this),50)}customRenderer;type="table";caption;showCaption=false;loading=undefined;get _loading(){return this.loading!==undefined?this.loading:this.internalLoading}set _loading(t){if(this.loading!==undefined)return;this.debounceSetLoading(t)}debounceSetLoading(t){this.internalLoading=t}internalLoading=true;placeholderSize=5;rows;handleRowsChange(){if(!this.rows){this._loading=true;return}this._loading=true;Promise.resolve(this.rows).then((async t=>{await M(this.host,t);this.currentFilters="";this.currentSort="";await this.columnInit();if(!this.isReady)requestAnimationFrame((()=>this.setInitialBlockDimension()));this._loading=false;if(this.tablePinnedService)this.tablePinnedService.assessRows()}))}columns=[];async handleColsChange(){await D(this.host,this.columns);if(this.isReady)this.columnInit()}headRender={pinned:"top"};rowRender;footRender={pinned:"bottom"};showFooter=false;perBlock=50;get blocksLength(){return this.blocks.length}searchTerm;customFilterFn;customSortFn;defaultSort=true;handleSearchTermChange(){this.searchStart()}virtualTotalItems=0;virtualTotalItemsChangeHandler(){this.setBlocks()}get appliedFilters(){return this.filters}nanoTblReady;nanoTblBlockRendered;nanoTblBeforeSort;nanoTblAfterSort;nanoTblBeforeFilter;nanoTblAfterFilter;nanoTblBeforeSearch;nanoTblAfterSearch;nanoTblBeforeEdit;async resetSorting(){const t=this.columns.find((t=>!!t.order));if(!t)return;return this.sortStart(null,t.prop)}async addSort(t,n){const e=this.columns.find((n=>n.prop===t));if(!e)throw new Error("Cannot find column with "+t);return this.sortStart(n,e.prop)}async resetFilters(){this.filters=[];return this.filterStart()}async addFilters(t,n=true){if(!n)this.filters=[];return this.filterStart(t,n)}async removeFilters(t){this.filters=this.filters.filter((n=>!t.includes(n.prop)));return this.filterStart()}async updateRow(t,n){this.rows.splice(n,1,t);this.handleRowsChange()}get host(){return o(this)}renderId="tbl-"+ct++;store;filters=[];currentFilters="[]";currentSort="";tableEle;topAnchorEle;tableWrapperEle;activeWatcherIo;tablePinnedService;blocks=[];activeBlocks=[0,1];measureHeight=0;blockElements;blockHeights=[];set measureEle(t){if(!t)return;const n=t.getBoundingClientRect().height;this.measureHeight=Math.abs(this.measureHeight-n)<5?this.measureHeight:n;this.unitHeight=t.querySelector("tr")?.getBoundingClientRect().height||this.unitHeight}unitHeight=0;get scrollParent(){return this._scrollParent}set scrollParent(t){if(t===this._scrollParent)return;if(this._scrollParent){(this._scrollParent===document.documentElement?document:this._scrollParent).removeEventListener("scroll",this.scrollHandler)}(t===document.documentElement?document:t).addEventListener("scroll",this.scrollHandler);this._scrollParent=t}_scrollParent;get primaryBlockIndex(){return this._primaryBlockIndex}set primaryBlockIndex(t){if(this._primaryBlockIndex===t)return;this._primaryBlockIndex=t;this.nanoTblBlockRendered.emit({block:t,totalBlocks:this.blockElements.length})}_primaryBlockIndex;get isReady(){return this._isReady}set isReady(t){if(t===this._isReady)return;this._isReady=t;if(this.isReady)requestAnimationFrame((()=>this.handleReady()))}_isReady=false;handleReady(){const t=window.location.hash;if(t.length>1){try{const n=document.querySelector(t);if(n)n.scrollIntoView()}catch(t){}}this.nanoTblReady.emit()}sortStart=async(t,n,e)=>{if(this.currentSort===t+":"+n)return;this._loading=true;const o=this.nanoTblBeforeSort.emit({column:n,order:t});if(o.defaultPrevented)return;lt("sort");this.currentSort=t+":"+n;this.scrollToTop(e);if(this.customSortFn){try{const e=await this.customSortFn(n,t);if(e===true){this.sortComplete(t,n);this._loading=false;return}}catch(t){console.warn("custom sort failed",t);this.currentSort="";this._loading=false;return}}try{await H(this.host,n,t);this.sortComplete(t,n)}catch(t){console.warn("sort failed",t);this.currentSort=""}finally{if(this.blocks.length)this._loading=false}};sortComplete(t,n){this.columns=this.columns.map((e=>{if(e.prop===n)return{...e,order:t};return{...e,order:null}}));this.nanoTblAfterSort.emit({column:n,order:t});lt("sort",true)}async searchStart(){this._loading=true;const t=this.nanoTblBeforeSearch.emit({term:this.searchTerm});if(t.defaultPrevented)return;lt("search");this.scrollToTop();try{await N(this.host,this.searchTerm);this.nanoTblAfterSearch.emit({term:this.searchTerm});lt("search",true)}catch(t){console.warn("search failed",t)}finally{this._loading=false}}async filterStart(t,n=true){if(t){if(n){this.filters=[...this.filters.filter((n=>!t.find((t=>t.prop===n.prop)))),...t]}else{this.filters=t}}if(this.currentFilters===JSON.stringify(this.filters))return;this._loading=true;const e=this.nanoTblBeforeFilter.emit({filters:this.filters});if(e.defaultPrevented)return;lt("filter");this.currentFilters=JSON.stringify(this.filters);this.scrollToTop();if(this.customFilterFn){try{const t=await this.customFilterFn(this.filters);if(t===true){await this.filterComplete();this._loading=false;return}}catch(t){console.warn("custom filter failed",t);this.currentFilters="";this._loading=false;return}}try{await this.filterComplete()}catch(t){console.warn("filter failed",t)}finally{this._loading=false}}async filterComplete(){this.columns=this.columns.map((t=>{const n=this.filters.find((n=>n.prop===t.prop));if(n&&(typeof n.filter!=="boolean"&&n.filter.length||typeof n.filter==="boolean"))t.filter=n.filter;else if(t.filter!==null&&t.filter!==undefined||!!t.filter&&typeof t.filter!=="boolean"&&!t.filter.length)t.filter=undefined;return t}));await j(this.host,this.filters);this.nanoTblAfterFilter.emit({filters:this.filters});lt("filter",true)}scrollToTop(t){const n=this.scrollParent.style?.scrollBehavior;const e=this.scrollParent.scrollLeft;this.scrollParent.style.scrollBehavior="auto";if(this.topAnchorEle&&!U(this.topAnchorEle,.1)){this.host.scrollIntoView()}if(t&&!U(t,1))setTimeout((()=>t.scrollIntoView({block:"start"})),500);if(e)this.scrollParent.scrollLeft=e;if(n)this.scrollParent.style.scrollBehavior=n;this.scrollHandler()}setMeasureElement(){return new Promise((t=>{r((()=>{this.measureEle=this.blockElements.find((t=>!t?.classList?.contains(`${_}__inactive`)));t()}))}))}setInitialBlockDimension(){if(!this.blockElements?.length)return;lt("blockDims");const t=async()=>{await this.setMeasureElement();if(this.unitHeight)return true;return false};const n=new Promise((n=>{t().then((async e=>{if(e)n();else{const e=new IntersectionObserver((async()=>{if(await t()){n();e.disconnect()}}),{root:this.scrollParent});e.observe(this.tableEle)}}))}));n.then((()=>{lt("blockDims",true);lt("init",true);requestAnimationFrame((()=>this.isReady=true))}))}async columnInit(){this.filters=this.columns.filter((t=>t.filter!==undefined&&t.filter!==null)).map((t=>{const{filter:n,prop:e}=t;return{prop:e,filter:n}}));if(this.searchTerm){await this.searchStart()}if(this.filters.length){await this.filterStart()}const t=this.columns.find((t=>!!t.order));if(t){await this.sortStart(t.order,t.prop)}if(this.tablePinnedService)this.tablePinnedService.assessCols()}setBlocks(){const t=this.store.data.state.rows;if(!t.length){this.blocks=[];return}lt("setBlocks");let n=1;const e=this.virtualTotalItems>t.length?this.virtualTotalItems:t.length;let o=[];const i=[];for(n;n<=e;n++){o.push(this.store.data.state.rows[n-1]||{__uuid:""});if(n%this.perBlock===0){i.push({rows:o,__uuid:h(o.map((t=>t.__uuid)).join())});o=[]}}if(o.length){i.push({rows:o,__uuid:h(o.map((t=>t.__uuid)).join())})}this.blocks=i;lt("setBlocks",true)}getBlockHeight(t){if(this.blockHeights.length){const n=this.blockHeights.find((n=>n.blockIndex===t));if(n&&n.height)return n.height}const n=this.blocks[t].rows.length;if(n===this.perBlock&&this.measureHeight){return this.measureHeight}return this.unitHeight?this.unitHeight*n:100}setBlockHeight(){this.activeBlocks.forEach((t=>{const n=this.blockElements[t];if(!n)return;r((()=>{if(n.classList.contains(`${_}__inactive`))return;const e=n.getBoundingClientRect().height;const o=this.blockHeights.findIndex((n=>n.blockIndex===t));if(o>-1){this.blockHeights[o]={height:e,blockIndex:t}}else this.blockHeights.push({height:e,blockIndex:t})}))}))}scrollHandler=()=>{let t=0;lt("scrollHandler");if(!this.store?.general.state.isActive||!this.rows)return;if(this.primaryBlockIndex===undefined)this.primaryBlockIndex=0;r((()=>{t=typeof this.scrollParent.scrollTop!=="undefined"?this.scrollParent.scrollTop:window.scrollY;t+=this.host.offsetTop;if(this.tablePinnedService){this.tablePinnedService.onScroll({x:typeof this.scrollParent.scrollLeft!=="undefined"?this.scrollParent.scrollLeft:window.scrollX,y:t})}let n=this.host.offsetTop;let e=0;const o=this.blocks.length;while(e<o&&t>=n){n+=this.getBlockHeight(e);if(t<n){const t=[e,e+1];if(t.toString()!==this.activeBlocks.toString()){this.activeBlocks=t}this.primaryBlockIndex=e}e++}lt("scrollHandler",true)}))};processSlots(){if(!this.caption&&!this.host.querySelector('[slot="caption"]')){console.error("For accessibility you must set a `caption` prop or use the `caption` slot")}}handleResizeChange=t=>{this.tableWrapperEle.className="";let n=[`${_}__wrap`];if(t.target?.className)n=[...t.target.className.split(" "),...n];this.tableWrapperEle.classList.add(...n.filter((t=>!!t)))};setupActiveWatcher(){if(!this.host||!this.scrollParent||!this.store)return;if(this.activeWatcherIo){this.activeWatcherIo.disconnect();this.activeWatcherIo=undefined}const t=this.activeWatcherIo=new IntersectionObserver((([t])=>{if(t.isIntersecting)this.store.general.state.isActive=true;else this.store.general.state.isActive=false}),{root:this.scrollParent,threshold:0});t.observe(this.host)}async componentWillLoad(){lt("init");this.store=await A(this.host,this.columns,this.scrollParent,this.isReady);this.handleRowsChange();this.store.general.onChange("isActive",(()=>{this.scrollHandler()}));this.store.data.onChange("rows",(()=>this.setBlocks()));this.processSlots();this.setBlocks();this.scrollParent=f(this.host);this.setupActiveWatcher()}connectedCallback(){this.scrollParent=f(this.host);this.setupActiveWatcher()}componentDidLoad(){this.setInitialBlockDimension();if(!this.tablePinnedService){this.tablePinnedService=new it(this.tableEle,this.scrollParent)}}componentShouldUpdate(t,n,e){if(["rows","columns"].includes(e))return false}componentWillRender(){lt("render")}componentDidRender(){this.setMeasureElement().then((()=>this.setBlockHeight()));lt("render",true)}disconnectedCallback(){if(!this.activeWatcherIo)return;this.activeWatcherIo.disconnect();this.activeWatcherIo=undefined;(this.scrollParent===document.documentElement?document:this.scrollParent).removeEventListener("scroll",this.scrollHandler)}render(){this.blockElements=[];return d(c,{key:"7d6193dc4b48fa4085ac1029a0c70dcf2f07a6fa",class:"nano-table"},d("div",{key:"acbfb0c4642cbce4dc1b8c9e22be90cbcbec84a9",class:`${_}__top-anchor`,ref:t=>this.topAnchorEle=t}," "),d("nano-resize-observe",{key:"9a38da33f0cfb64329331510f196ef7c42e51ca3",states:"576w sm, 768w md",class:"sm md",onNanoResizeStateChange:this.handleResizeChange,onNanoResize:()=>{if(this.tablePinnedService)this.tablePinnedService.onResize()}}),d("div",{key:"25aad643f108a5e48319a20a70a36066eb099d5d",class:`${_}__wrap sm md`,ref:t=>this.tableWrapperEle=t,"aria-labelledby":"nano-table-caption-"+this.renderId,tabindex:this.type==="grid"?"0":undefined},d("nano-progress-bar",{key:"519fc388c4926af6bd9dfaba2112fa2db1dbc3cd",indeterminate:true,class:{[`${_}__progress-bar`]:true,[`${_}__progress-bar--show`]:this._loading}}),d("table",{key:"b58a665666893b4b15aad6ab7e7a08bd20527cb2",role:this.type==="grid"?"grid":undefined,"aria-rowcount":this.store.data.state.rows.length,"aria-colcount":this.store.config.state.columns.length,class:`${_}`,ref:t=>this.tableEle=t,id:"nano-table-"+this.renderId},d("caption",{key:"5bc653ff3a487546e652cd787996dfde662fdf67",class:{[`${_}__caption`]:true,[`${_}__caption--hide`]:!this.showCaption},id:"nano-table-caption-"+this.renderId},d("slot",{key:"a6c855db5a74c123d08ad4e65954f17573c9ea3a",name:"caption"},this.caption)),d("thead",{key:"743820b2abc85adac1fe4babf918be10a8e62a26"},d(et,{key:"e7a9a7c27033c2ed69bdeb8bfa68af3a3d721036",rowRenderer:this.headRender},this.store.config.state.columns.map((t=>[d(G,{column:t,headRenderer:this.headRender,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort}})])))),this._loading&&!this.blocks.length&&d("tbody",{key:"6c7d553988620e1f3ee9cbf0d2c6bade44c5eefa",class:`${_}__active ${_}__loading`},[...Array(10).keys()].map((t=>d("tr",null,this.store.config.state.columns.map(((n,e)=>d(Z,{rowIndex:t,colIndex:e,nestedContent:()=>d("nano-skeleton",null)}))))))),d("tr",{key:"092f27f8726f12b7fa10d166b560d6df6593bbc1",hidden:!!this._loading||!!this.blocks.length},d("th",{key:"edfbca925f99550897c3b460a6efcb326863a591",class:`${_}__th`,colSpan:this.store.config.state.columns.length},d("div",{key:"5d4b996c3141b6583317a2b28357fe7af3a873bc",class:"nano-tbl__cell-content nano-tbl__cell-content--no-result"},d("slot",{key:"00db3e5649ccdc97062881ff7b3801fb1847c2db",name:"no-results"},"No results found")))),this.blocks.map(((t,n)=>d("tbody",{key:t.__uuid,id:`tbody-${this.renderId}-${n}`,ref:t=>{this.blockElements.push(t)},class:{[`${_}__inactive`]:!this.activeBlocks.includes(n),[`${_}__active`]:this.activeBlocks.includes(n)}},this.activeBlocks.includes(n)?t.rows.map(((t,e)=>{const o=n>0?n*this.perBlock+e:e;return d(nt,{rowRenderer:this.rowRender,rowModel:t,rowIndex:o},this.store.config.state.columns.map(((t,n)=>d(Z,{rowIndex:o,colIndex:n}))))})):d("tr",{class:`${_}__tr--placeholder`},d("td",{colSpan:this.store.config.state.columns.length,style:{height:this.getBlockHeight(n)+"px"}}))))),this.showFooter&&d("tfoot",{key:"15a1a79049ad87f63c87e2d905bc401a7d4bbb60"},d(et,{key:"ee06dea32599c6dae3fcdcabc5a5bd0ea6536aea",rowRenderer:this.footRender},this.store.config.state.columns.map((t=>[d(G,{column:t,headRenderer:this.footRender,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort}})]))))),!!this.blocks.length&&d("nano-spinner",{key:"dd0041a5232a79a9f1882d2b9e5beebd79587a5d",type:"circle",class:{[`${_}__spinner`]:true,[`${_}__spinner--show`]:this._loading}})))}static get watchers(){return{rows:["handleRowsChange"],columns:["handleColsChange"],searchTerm:["handleSearchTermChange"],virtualTotalItems:["virtualTotalItemsChangeHandler"]}}};dt.style=rt;export{dt as T,k as c};
5
+ //# sourceMappingURL=nano-table-3965ddd0.js.map
package/dist/nano-components/nano-table.entry.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
2
  * Web Components for Nanopore digital Web Apps
3
3
  */
4
- export{T as nano_table}from"./nano-table-5eaf3a0c.js";import"./index-6cc72cd9.js";import"./renderer-4bc3e2dc.js";import"./math-d160f8a6.js";import"./throttle-df960210.js";import"./scroll-parent-be39fbd0.js";import"./index-f5f7b950.js";
4
+ export{T as nano_table}from"./nano-table-3965ddd0.js";import"./index-6cc72cd9.js";import"./renderer-4bc3e2dc.js";import"./math-d160f8a6.js";import"./throttle-df960210.js";import"./scroll-parent-be39fbd0.js";import"./index-f5f7b950.js";
5
5
  //# sourceMappingURL=nano-table.entry.js.map
package/dist/nano-components/table.worker-8e04f768.js ADDED
@@ -0,0 +1,5 @@
1
+ /*!
2
+ * Web Components for Nanopore digital Web Apps
3
+ */
4
+ import{c as t}from"./nano-table-3965ddd0.js";import"./index-6cc72cd9.js";import"./renderer-4bc3e2dc.js";import"./math-d160f8a6.js";import"./throttle-df960210.js";import"./scroll-parent-be39fbd0.js";import"./index-f5f7b950.js";const r="table.worker";const e="stencil.table.worker";const o=new URL("table.worker-da5412ed.js",import.meta.url).href;let s;try{s=t(o,r,e)}catch(c){const a=new Blob(['importScripts("'+o+'")'],{type:"text/javascript"});const i=URL.createObjectURL(a);s=t(i,r,e);URL.revokeObjectURL(i)}export{s as worker,e as workerMsgId,r as workerName,o as workerPath};
5
+ //# sourceMappingURL=table.worker-8e04f768.js.map
package/docs-json.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2025-04-07T10:43:44",
2
+ "timestamp": "2025-04-24T16:09:23",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.27.2",
package/hydrate/index.js CHANGED
@@ -7991,14 +7991,18 @@ class Checkbox {
7991
7991
  if (!this.input)
7992
7992
  return;
7993
7993
  this.input.checked = this.checked;
7994
- if (this.inputType === 'radio' && this.name && this.checked) {
7994
+ if (this.inputType === 'radio' &&
7995
+ this.name &&
7996
+ this.checked &&
7997
+ this.host.isConnected) {
7995
7998
  const form = this.host.closest('form');
7999
+ const root = this.host.getRootNode();
7996
8000
  let ctrls;
7997
8001
  if (form) {
7998
8002
  ctrls = Array.from(form.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`));
7999
8003
  }
8000
8004
  else {
8001
- ctrls = Array.from(document.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`))?.filter((radio) => !radio.closest('form'));
8005
+ ctrls = Array.from(root.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`))?.filter((radio) => !radio.closest('form'));
8002
8006
  }
8003
8007
  ctrls.map((el) => {
8004
8008
  if (el !== this.host)
@@ -8177,14 +8181,14 @@ class Checkbox {
8177
8181
  }
8178
8182
  render() {
8179
8183
  const labelId = this.inputId + '-lbl';
8180
- return (h(Host, { key: '743ba20f7dc131a5df0dbef97f12682228b3a49d', class: { ...createColorClasses(this.color), 'nano-checkbox': true } }, h("label", { key: '9b0f1649bcf44a7685c3e1f91da816e7283f41e0', class: {
8184
+ return (h(Host, { key: '92eaee0287da5164176c1893add5d48ff518153a', class: { ...createColorClasses(this.color), 'nano-checkbox': true } }, h("label", { key: '5082a3b8114162d5b52e9f24abe031f8796665e2', class: {
8181
8185
  nanocb: true,
8182
8186
  'nanocb--checked': this.checked,
8183
8187
  'nanocb--invalid': this.invalid,
8184
8188
  'nanocb--disabled': this.disabled,
8185
8189
  'nanocb--focused': this.hasFocus,
8186
8190
  'nanocb--indeterminate': this.indeterminate,
8187
- }, htmlFor: this.inputId }, h("input", { key: '77bac537123647d224667f66ef9d8a3ea732af9a', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": labelId, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '6ee7540510d902daaf303edcc2a677e9819d3b00', class: 'nanocb__input nanocb__input--' + this.type }), h("div", { key: '0ea0aea0ca852394ae4a3ccc6eb998e990d61f01', id: labelId, class: 'nanocb__label nanocb__label--' + this.type }, this.label && !!this.label.length && h("span", { key: 'a1b43b59fc067cba5fd22b87add0c5352666ca2f' }, this.label), h("span", { key: 'e2a1abe3e02c9a3deeda47430b164a0b0f03982b', hidden: this.label && !!this.label.length }, h("slot", { key: '30738b530444fd2051465eb6ff9098ebb06e2e88' }))))));
8191
+ }, htmlFor: this.inputId }, h("input", { key: '2b91ea2ac18ac260710202040db3f7a4574a1922', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": labelId, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '0594a16034577181d4f3b1801b08d1761bd4cfe8', class: 'nanocb__input nanocb__input--' + this.type }), h("div", { key: '051e89cbd5aeabad7f6e70369a3f9316f86eb8f8', id: labelId, class: 'nanocb__label nanocb__label--' + this.type }, this.label && !!this.label.length && h("span", { key: 'ddb4067806f185c0d564a0a54c7642a57313e482' }, this.label), h("span", { key: '745cbff6863337008827893a7b451c4a31fb1e91', hidden: this.label && !!this.label.length }, h("slot", { key: '023db905814a76b115e2779d717932125c0bff4a' }))))));
8188
8192
  }
8189
8193
  static get watchers() { return {
8190
8194
  "checked": ["handleCheckedChange"],
package/hydrate/index.mjs CHANGED
@@ -7987,14 +7987,18 @@ class Checkbox {
7987
7987
  if (!this.input)
7988
7988
  return;
7989
7989
  this.input.checked = this.checked;
7990
- if (this.inputType === 'radio' && this.name && this.checked) {
7990
+ if (this.inputType === 'radio' &&
7991
+ this.name &&
7992
+ this.checked &&
7993
+ this.host.isConnected) {
7991
7994
  const form = this.host.closest('form');
7995
+ const root = this.host.getRootNode();
7992
7996
  let ctrls;
7993
7997
  if (form) {
7994
7998
  ctrls = Array.from(form.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`));
7995
7999
  }
7996
8000
  else {
7997
- ctrls = Array.from(document.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`))?.filter((radio) => !radio.closest('form'));
8001
+ ctrls = Array.from(root.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`))?.filter((radio) => !radio.closest('form'));
7998
8002
  }
7999
8003
  ctrls.map((el) => {
8000
8004
  if (el !== this.host)
@@ -8173,14 +8177,14 @@ class Checkbox {
8173
8177
  }
8174
8178
  render() {
8175
8179
  const labelId = this.inputId + '-lbl';
8176
- return (h(Host, { key: '743ba20f7dc131a5df0dbef97f12682228b3a49d', class: { ...createColorClasses(this.color), 'nano-checkbox': true } }, h("label", { key: '9b0f1649bcf44a7685c3e1f91da816e7283f41e0', class: {
8180
+ return (h(Host, { key: '92eaee0287da5164176c1893add5d48ff518153a', class: { ...createColorClasses(this.color), 'nano-checkbox': true } }, h("label", { key: '5082a3b8114162d5b52e9f24abe031f8796665e2', class: {
8177
8181
  nanocb: true,
8178
8182
  'nanocb--checked': this.checked,
8179
8183
  'nanocb--invalid': this.invalid,
8180
8184
  'nanocb--disabled': this.disabled,
8181
8185
  'nanocb--focused': this.hasFocus,
8182
8186
  'nanocb--indeterminate': this.indeterminate,
8183
- }, htmlFor: this.inputId }, h("input", { key: '77bac537123647d224667f66ef9d8a3ea732af9a', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": labelId, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '6ee7540510d902daaf303edcc2a677e9819d3b00', class: 'nanocb__input nanocb__input--' + this.type }), h("div", { key: '0ea0aea0ca852394ae4a3ccc6eb998e990d61f01', id: labelId, class: 'nanocb__label nanocb__label--' + this.type }, this.label && !!this.label.length && h("span", { key: 'a1b43b59fc067cba5fd22b87add0c5352666ca2f' }, this.label), h("span", { key: 'e2a1abe3e02c9a3deeda47430b164a0b0f03982b', hidden: this.label && !!this.label.length }, h("slot", { key: '30738b530444fd2051465eb6ff9098ebb06e2e88' }))))));
8187
+ }, htmlFor: this.inputId }, h("input", { key: '2b91ea2ac18ac260710202040db3f7a4574a1922', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": labelId, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '0594a16034577181d4f3b1801b08d1761bd4cfe8', class: 'nanocb__input nanocb__input--' + this.type }), h("div", { key: '051e89cbd5aeabad7f6e70369a3f9316f86eb8f8', id: labelId, class: 'nanocb__label nanocb__label--' + this.type }, this.label && !!this.label.length && h("span", { key: 'ddb4067806f185c0d564a0a54c7642a57313e482' }, this.label), h("span", { key: '745cbff6863337008827893a7b451c4a31fb1e91', hidden: this.label && !!this.label.length }, h("slot", { key: '023db905814a76b115e2779d717932125c0bff4a' }))))));
8184
8188
  }
8185
8189
  static get watchers() { return {
8186
8190
  "checked": ["handleCheckedChange"],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nanoporetech-digital/components",
3
- "version": "7.9.0",
3
+ "version": "7.9.1",
4
4
  "sideEffects": false,
5
5
  "repository": {
6
6
  "type": "git",
package/dist/cjs/table.worker-1a4b9015.js.map DELETED
@@ -1 +0,0 @@
1
- {"file":"table.worker-1a4b9015.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}