@nanoporetech-digital/components 4.1.0 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (91) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/cjs/{local-my-account-a3362993.js → local-my-account-d79ed0a2.js} +1 -1
  3. package/dist/cjs/{local-my-account-a3362993.js.map → local-my-account-d79ed0a2.js.map} +1 -1
  4. package/dist/cjs/nano-checkbox.cjs.entry.js +1 -1
  5. package/dist/cjs/nano-checkbox.cjs.entry.js.map +1 -1
  6. package/dist/cjs/nano-demo.cjs.entry.js +48 -47
  7. package/dist/cjs/nano-demo.cjs.entry.js.map +1 -1
  8. package/dist/cjs/nano-global-nav.cjs.entry.js +3 -2
  9. package/dist/cjs/nano-global-nav.cjs.entry.js.map +1 -1
  10. package/dist/cjs/nano-overflow-nav.cjs.entry.js +2 -0
  11. package/dist/cjs/nano-overflow-nav.cjs.entry.js.map +1 -1
  12. package/dist/cjs/{nano-table-c5b6630a.js → nano-table-d5eb9221.js} +2 -2
  13. package/dist/cjs/nano-table-d5eb9221.js.map +1 -0
  14. package/dist/cjs/nano-table.cjs.entry.js +1 -1
  15. package/dist/cjs/{table.worker-0876611d.js → table.worker-37f25c78.js} +2 -2
  16. package/dist/cjs/table.worker-37f25c78.js.map +1 -0
  17. package/dist/collection/components/checkbox/checkbox.css +18 -12
  18. package/dist/collection/components/demo/demo.js +48 -47
  19. package/dist/collection/components/demo/demo.js.map +1 -1
  20. package/dist/collection/components/global-nav/assets/local-my-account.json +341 -0
  21. package/dist/collection/components/global-nav/global-nav.js +2 -1
  22. package/dist/collection/components/global-nav/global-nav.js.map +1 -1
  23. package/dist/collection/components/global-nav/style/global-nav.css +1 -0
  24. package/dist/collection/components/overflow-nav/overflow-nav.js +2 -0
  25. package/dist/collection/components/overflow-nav/overflow-nav.js.map +1 -1
  26. package/dist/collection/components/table/table-interface.js.map +1 -1
  27. package/dist/collection/components/table/table.js +8 -4
  28. package/dist/collection/components/table/table.js.map +1 -1
  29. package/dist/components/nano-checkbox.js +1 -1
  30. package/dist/components/nano-checkbox.js.map +1 -1
  31. package/dist/components/nano-demo.js +48 -47
  32. package/dist/components/nano-demo.js.map +1 -1
  33. package/dist/components/nano-global-nav.js +2 -1
  34. package/dist/components/nano-global-nav.js.map +1 -1
  35. package/dist/components/nano-overflow-nav.js +2 -0
  36. package/dist/components/nano-overflow-nav.js.map +1 -1
  37. package/dist/components/table.js.map +1 -1
  38. package/dist/esm/{local-my-account-964c8ad7.js → local-my-account-6662da72.js} +1 -1
  39. package/dist/esm/{local-my-account-964c8ad7.js.map → local-my-account-6662da72.js.map} +1 -1
  40. package/dist/esm/nano-checkbox.entry.js +1 -1
  41. package/dist/esm/nano-checkbox.entry.js.map +1 -1
  42. package/dist/esm/nano-demo.entry.js +48 -47
  43. package/dist/esm/nano-demo.entry.js.map +1 -1
  44. package/dist/esm/nano-global-nav.entry.js +3 -2
  45. package/dist/esm/nano-global-nav.entry.js.map +1 -1
  46. package/dist/esm/nano-overflow-nav.entry.js +2 -0
  47. package/dist/esm/nano-overflow-nav.entry.js.map +1 -1
  48. package/dist/esm/{nano-table-ff985e63.js → nano-table-81cc50c7.js} +2 -2
  49. package/dist/esm/nano-table-81cc50c7.js.map +1 -0
  50. package/dist/esm/nano-table.entry.js +1 -1
  51. package/dist/esm/{table.worker-906bc297.js → table.worker-86754436.js} +2 -2
  52. package/dist/esm/table.worker-86754436.js.map +1 -0
  53. package/dist/nano-assets/hash.txt +1 -1
  54. package/dist/nano-assets/local-my-account.json +341 -0
  55. package/dist/nano-components/assets/local-my-account.json +341 -0
  56. package/dist/nano-components/assets/ont-logo.svg +89 -0
  57. package/dist/nano-components/assets/ont-wheel-light.svg +31 -0
  58. package/dist/nano-components/nano-components.esm.js +1 -1
  59. package/dist/nano-components/{p-13dd65c9.js → p-099a573a.js} +2 -2
  60. package/dist/nano-components/{p-13dd65c9.js.map → p-099a573a.js.map} +1 -1
  61. package/dist/nano-components/{p-c38a246f.entry.js → p-1525c97b.entry.js} +2 -2
  62. package/dist/nano-components/{p-c53b232e.js → p-2155fc2c.js} +1 -1
  63. package/dist/nano-components/{p-4b136a65.js → p-6c47fdc2.js} +2 -2
  64. package/dist/nano-components/p-7730ce8e.entry.js +5 -0
  65. package/dist/nano-components/{p-d0e15e46.entry.js.map → p-7730ce8e.entry.js.map} +1 -1
  66. package/dist/nano-components/{p-f93bd976.entry.js → p-b38cabe2.entry.js} +2 -2
  67. package/dist/nano-components/p-b38cabe2.entry.js.map +1 -0
  68. package/dist/nano-components/p-dc8fd62d.entry.js +5 -0
  69. package/dist/nano-components/p-dc8fd62d.entry.js.map +1 -0
  70. package/dist/nano-components/p-fa658659.entry.js +5 -0
  71. package/dist/nano-components/p-fa658659.entry.js.map +1 -0
  72. package/dist/types/components/demo/demo.d.ts +1 -0
  73. package/dist/types/components/table/table-interface.d.ts +5 -2
  74. package/dist/types/components/table/table.d.ts +1 -1
  75. package/dist/types/components.d.ts +2 -2
  76. package/docs-json.json +18 -8
  77. package/hydrate/index.js +53 -49
  78. package/package.json +2 -2
  79. package/dist/cjs/nano-table-c5b6630a.js.map +0 -1
  80. package/dist/cjs/table.worker-0876611d.js.map +0 -1
  81. package/dist/esm/nano-table-ff985e63.js.map +0 -1
  82. package/dist/esm/table.worker-906bc297.js.map +0 -1
  83. package/dist/nano-components/p-583d8d70.entry.js +0 -5
  84. package/dist/nano-components/p-583d8d70.entry.js.map +0 -1
  85. package/dist/nano-components/p-d0e15e46.entry.js +0 -5
  86. package/dist/nano-components/p-f2d89239.entry.js +0 -5
  87. package/dist/nano-components/p-f2d89239.entry.js.map +0 -1
  88. package/dist/nano-components/p-f93bd976.entry.js.map +0 -1
  89. /package/dist/nano-components/{p-4b136a65.js.map → p-1525c97b.entry.js.map} +0 -0
  90. /package/dist/nano-components/{p-c38a246f.entry.js.map → p-2155fc2c.js.map} +0 -0
  91. /package/dist/nano-components/{p-c53b232e.js.map → p-6c47fdc2.js.map} +0 -0
@@ -353,4 +353,4 @@ const localMyAccount = {
353
353
  export default localMyAccount;
354
354
  export { cart, domains, links, notifications, search, urls, user };
355
355
 
356
- //# sourceMappingURL=local-my-account-964c8ad7.js.map
356
+ //# sourceMappingURL=local-my-account-6662da72.js.map
@@ -1 +1 @@
1
- {"file":"local-my-account-964c8ad7.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
1
+ {"file":"local-my-account-6662da72.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, h, a as Host, g as getElement
5
5
  import { f as focusVisible } from './focus-visible-8b2c14da.js';
6
6
  import { c as createColorClasses } from './theme-82feb8cf.js';
7
7
 
8
- const checkboxCss = ".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-style:1px solid #b5aea7;--check-checked-bg-color:#455556;--check-checked-border-color:#455556;--check-checked-higlight-color:#fff;--check-base-size:inherit;--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%;display:inline-block;max-width:100%}.sc-nano-checkbox-h *.sc-nano-checkbox{box-sizing:inherit}[type=tag].sc-nano-checkbox-h{text-transform:uppercase;--control-padding:0.2rem 1rem}[type=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-style:1px solid rgba(181, 174, 167, 0.5);--segment-border-radius:5px;--control-padding:0.7em 1em 0.7em 1em}.nano-color.sc-nano-checkbox-h{--tagbox-rgb:var(--nano-color-base-rgb);--focus-shadow:0 0 0 0.1875rem var(--nano-color-shade)}[checked].sc-nano-checkbox-h:not([checked=false]){--tagbox-border-color:rgb(var(--tagbox-rgb) / 80%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 50%)}[has-focus].sc-nano-checkbox-h:not([has-focus=false]){--cb-border-radius:5px}[disabled].sc-nano-checkbox-h:not([disabled=false]){opacity:0.7;--tagbox-rgb:104 117 118;--check-bg-color:rgba(104, 117, 118, 0.5);--check-checked-bg-color:rgba(104, 117, 118, 0.5);--segment-color:#455556}.nanocb.sc-nano-checkbox{padding:var(--padding);cursor:pointer;display:flex;align-items:center;line-height:1.2;position:relative}.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius, 3px);font-size:var(--check-base-size);position:relative;height:1.5em;width:1.5em;min-width:1.5em;border:var(--check-border-style);box-shadow:0 1px 4px rgba(0, 0, 0, 0.2)}.nanocb__input.sc-nano-checkbox::before{border-radius:var(--cb-border-radius);position:absolute;content:\"\";inset-inline-start:0.625em;inset-block-start:0.625em;width:0;height:0;border:2px solid var(--check-checked-higlight-color);transform:scale(0)}.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox{background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox::after{border-radius:var(--cb-border-radius);position:absolute;content:\"\";inset-inline-start:0.75em;inset-block-start:0.75em;height:0;width:0;border:solid var(--check-checked-higlight-color);border-width:0 0.1875em 0.1875em 0;transform:rotate(0deg) scale(0);opacity:1;transition:all 0.15s ease-out}.nanocb--indeterminate.sc-nano-checkbox .nanocb__input--checkbox.sc-nano-checkbox::after{border-width:0 0 0.1875em}.nanocb__input--segment.sc-nano-checkbox,.nanocb__input--segment-pill.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--segment.sc-nano-checkbox::before,.nanocb__input--segment-pill.sc-nano-checkbox::before{display:none}.nanocb__input--tag.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--tag.sc-nano-checkbox::before{display:none}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow)}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--invalid-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus~.nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow)}.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--focus-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid 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);border-width:0.3125em;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:0.475em;inset-block-start:0.1875em;width:0.375em;height:0.75em;border-radius:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox::after{transform:rotate(45deg)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox{border-radius:var(--input-border-radius, 5px);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-bg-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:scale(1);opacity:1;inset-inline-start:0.3125em;inset-block-start:0;width:0.7em;height:0.7em;border-radius:0}.nanocb__label.sc-nano-checkbox{padding-inline:10px 0;padding-block:0;display:flex;align-items:center;font-stretch:condensed;line-height:1;flex:1;justify-content:space-between}.nanocb__label--segment.sc-nano-checkbox,.nanocb__label--segment-pill.sc-nano-checkbox{border:var(--check-border-style);border-radius:var(--segment-border-radius);box-shadow:var(--segment-shadow);display:inline-flex;padding:var(--control-padding);background:var(--check-bg-color);color:var(--segment-color);align-items:center;width:100%}.sc-nano-checkbox-h:first-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:var(--segment-border-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--segment-border-radius);-webkit-border-end:none;border-inline-end:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0;-webkit-border-end:none;border-inline-end:none}.sc-nano-checkbox-h:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:0;border-start-end-radius:var(--segment-border-radius);border-end-end-radius:var(--segment-border-radius);border-end-start-radius:0}.sc-nano-checkbox-h:first-of-type:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius);border:var(--check-border-style)}.nanocb__label--tag.sc-nano-checkbox{letter-spacing:2px;font-weight:500;font-size:0.65em;line-height:1.4;padding:var(--control-padding);border:2px solid #b5aea7;border-color:var(--tagbox-border-color);background-color:var(--tagbox-bg-color);transition:all 0.2s;border-radius:var(--cb-border-radius);width:100%}.nanocb__label--tag.sc-nano-checkbox::after{content:\"+\";margin-inline:0.3125em 0;margin-block:0;font-weight:200;position:relative;font-family:inherit;font-size:1.8em;display:inline-block;transform:rotate(0deg);transform-origin:center}.nanocb__label--tag.sc-nano-checkbox span.sc-nano-checkbox{display:block}";
8
+ const checkboxCss = ".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;--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%;display:inline-block;max-width:100%}.sc-nano-checkbox-h *.sc-nano-checkbox{box-sizing:inherit}[type=tag].sc-nano-checkbox-h{text-transform:uppercase;--control-padding:0.2rem 1rem}[type=radio][checked].sc-nano-checkbox-h:not([checked=false]){--check-border-size:0.3125em}[type=segment].sc-nano-checkbox-h{--check-border-style:none;--control-padding:0.7em 1em 0.7em 1em}[type=segment-pill].sc-nano-checkbox-h{--check-border-color:rgba(181, 174, 167, 0.5);--segment-border-radius:5px;--control-padding:0.7em 1em 0.7em 1em}.nano-color.sc-nano-checkbox-h{--tagbox-rgb:var(--nano-color-base-rgb);--focus-shadow:0 0 0 0.1875rem var(--nano-color-shade)}[checked].sc-nano-checkbox-h:not([checked=false]){--tagbox-border-color:rgb(var(--tagbox-rgb) / 80%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 50%)}[has-focus].sc-nano-checkbox-h:not([has-focus=false]){--cb-border-radius:5px}[disabled].sc-nano-checkbox-h:not([disabled=false]){opacity:0.7;--tagbox-rgb:104 117 118;--check-bg-color:rgba(104, 117, 118, 0.5);--check-checked-bg-color:rgba(104, 117, 118, 0.5);--segment-color:#455556}.nanocb.sc-nano-checkbox{padding:var(--padding);cursor:pointer;display:flex;align-items:center;line-height:1.2;position:relative}.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius, 3px);font-size:var(--check-base-size);position:relative;height:1.5em;width:1.5em;min-width:1.5em;border:var(--check-border-style);box-shadow:0 1px 4px rgba(0, 0, 0, 0.2)}.nanocb__input.sc-nano-checkbox::before{border-radius:var(--cb-border-radius);position:absolute;content:\"\";inset-inline-start:calc(0.725em - var(--check-border-size));inset-block-start:calc(0.725em - var(--check-border-size));width:0;height:0;border:2px solid var(--check-checked-higlight-color);transform:scale(0)}.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox{background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox::after{border-radius:var(--cb-border-radius);position:absolute;content:\"\";inset-inline-start:calc(0.825em - var(--check-border-size));inset-block-start:calc(0.825em - var(--check-border-size));height:0;width:0;border:solid var(--check-checked-higlight-color);border-width:0 0.1875em 0.1875em 0;transform:rotate(0deg) scale(0);opacity:1;transition:all 0.15s ease-out}.nanocb--indeterminate.sc-nano-checkbox .nanocb__input--checkbox.sc-nano-checkbox::after{border-width:0 0 0.1875em}.nanocb__input--segment.sc-nano-checkbox,.nanocb__input--segment-pill.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--segment.sc-nano-checkbox::before,.nanocb__input--segment-pill.sc-nano-checkbox::before{display:none}.nanocb__input--tag.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--tag.sc-nano-checkbox::before{display:none}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow)}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--invalid-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus~.nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow)}.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--focus-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border-color:var(--check-checked-border-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{color:var(--check-checked-higlight-color);background-color:var(--check-checked-bg-color);box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-checked-higlight-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::after{border:solid var(--check-checked-border-color);border-width:0 0.125em 0.125em 0;opacity:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::before{border-radius:var(--radio-border-radius)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:rotate(45deg) scale(1);opacity:1;inset-inline-start:calc(0.575em - var(--check-border-size));inset-block-start:calc(0.2875em - var(--check-border-size));width:0.375em;height:0.75em;border-radius:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox::after{transform:rotate(45deg)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox{border-radius:var(--input-border-radius, 5px);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-bg-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:scale(1);opacity:1;inset-inline-start:0.3125em;inset-block-start:0;width:0.7em;height:0.7em;border-radius:0}.nanocb__label.sc-nano-checkbox{padding-inline:10px 0;padding-block:0;display:flex;align-items:center;font-stretch:condensed;line-height:1;flex:1;justify-content:space-between}.nanocb__label--segment.sc-nano-checkbox,.nanocb__label--segment-pill.sc-nano-checkbox{border:var(--check-border-style);border-radius:var(--segment-border-radius);box-shadow:var(--segment-shadow);display:inline-flex;padding:var(--control-padding);background:var(--check-bg-color);color:var(--segment-color);align-items:center;width:100%}.sc-nano-checkbox-h:first-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:var(--segment-border-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--segment-border-radius);-webkit-border-end:none;border-inline-end:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0;-webkit-border-end:none;border-inline-end:none}.sc-nano-checkbox-h:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:0;border-start-end-radius:var(--segment-border-radius);border-end-end-radius:var(--segment-border-radius);border-end-start-radius:0}.sc-nano-checkbox-h:first-of-type:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius);border:var(--check-border-style)}.nanocb__label--tag.sc-nano-checkbox{letter-spacing:2px;font-weight:500;font-size:0.65em;line-height:1.4;padding:var(--control-padding);border:2px solid #b5aea7;border-color:var(--tagbox-border-color);background-color:var(--tagbox-bg-color);transition:all 0.2s;border-radius:var(--cb-border-radius);width:100%}.nanocb__label--tag.sc-nano-checkbox::after{content:\"+\";margin-inline:0.3125em 0;margin-block:0;font-weight:200;position:relative;font-family:inherit;font-size:1.8em;display:inline-block;transform:rotate(0deg);transform-origin:center}.nanocb__label--tag.sc-nano-checkbox span.sc-nano-checkbox{display:block}";
9
9
 
10
10
  let checkboxIds = 0;
11
11
  const Checkbox = class {
@@ -1 +1 @@
1
- {"file":"nano-checkbox.entry.js","mappings":"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","names":[],"sources":["./src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n /**\n * @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to #{$control-invalid-style};\n * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{$control-focus-style};\n * @prop --padding: padding around radio and checkbox controls. Defaults to initial;\n * @prop --control-padding: padding around tag and segmented controls text. Various defaults.\n\n * @prop --check-bg-color: Initial Bg color of radio / checkbox controls. Changes for [checked] and [disabled] states. Defaults to #{map.get($colors, white)};\n * @prop --check-border-style: Initial border style. Defaults to 1px solid #{map.get($colors, palegrey)};\n * @prop --check-checked-bg-color: Checked bg of controls (not tag). Defaults to #{map.get($colors, darkgrey)};\n * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{map.get($colors, darkgrey)};\n * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{map.get($colors, white)};\n * @prop --check-base-size: Relative scaling size for check controls. Defaults to to inherit;\n\n * @prop --cb-border-radius: Checkbox border radius. Defaults to to 2px and 5px on [has-focus];\n * @prop --radio-border-radius: Radio border radius. Defaults to to 50%;\n * @prop --tagbox-rgb: an rba list for tags which can be used to generate --tagbox-border-color and --tagbox-bg-color. Defaults to #{color-to-rgb-list(map.get($colors, lightblue))};\n * @prop --tagbox-border-color: Defaults to rgb(var(--tagbox-rgb) / 50%);\n * @prop --tagbox-bg-color: Defaults to rgb(var(--tagbox-rgb) / 10%);\n * @prop --segment-color: Segment, unselected text color. (selected color is --check-checked-higlight-color). Defaults to #{map.get($colors, blue)};\n * @prop --segment-border-radius: Defaults to 3px;\n * @prop --segment-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n */\n\n --focus-shadow: #{$control-focus-style};\n --invalid-shadow: #{$control-focus-size + ' ' map.get($colors, red)};\n --padding: initial;\n --check-bg-color: #{map.get($colors, white)};\n --check-border-style: 1px solid #{map.get($colors, palegrey)};\n --check-checked-bg-color: #{map.get($colors, darkgrey)};\n --check-checked-border-color: #{map.get($colors, darkgrey)};\n --check-checked-higlight-color: #{map.get($colors, white)};\n --check-base-size: inherit;\n\n // type specific\n\n --tagbox-rgb: #{color-to-rgb-list(map.get($colors, lightblue))};\n --tagbox-border-color: rgb(var(--tagbox-rgb) / 50%);\n --tagbox-bg-color: rgb(var(--tagbox-rgb) / 20%);\n --tagbox-border-radius: 0;\n --segment-color: #{map.get($colors, blue)};\n --segment-border-radius: 3px;\n --segment-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n --cb-border-radius: 2px;\n --radio-border-radius: 50%;\n\n display: inline-block;\n max-width: 100%;\n\n * {\n box-sizing: inherit;\n }\n}\n\n:host([type='tag']) {\n text-transform: uppercase;\n\n --control-padding: 0.2rem 1rem;\n}\n\n:host([type='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-style: 1px solid #{rgba(map.get($colors, palegrey), 0.5)};\n --segment-border-radius: 5px;\n --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host(.nano-color) {\n --tagbox-rgb: var(--nano-color-base-rgb);\n --focus-shadow: #{$control-focus-size} var(--nano-color-shade);\n}\n\n:host([checked]:not([checked='false'])) {\n --tagbox-border-color: rgb(var(--tagbox-rgb) / 80%);\n --tagbox-bg-color: rgb(var(--tagbox-rgb) / 50%);\n}\n\n:host([has-focus]:not([has-focus='false'])) {\n --cb-border-radius: 5px;\n}\n\n:host([disabled]:not([disabled='false'])) {\n opacity: 0.7;\n\n --tagbox-rgb: #{color-to-rgb-list(map.get($colors, mediumgrey))};\n --check-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n --check-checked-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n --segment-color: #{map.get($colors, darkgrey)};\n}\n\n.nanocb {\n padding: var(--padding);\n cursor: pointer;\n display: flex;\n align-items: center;\n line-height: 1.2;\n position: relative;\n\n &__input {\n border-radius: var(--cb-border-radius, 3px);\n font-size: var(--check-base-size);\n position: relative;\n height: 1.5em;\n width: 1.5em;\n min-width: 1.5em;\n border: var(--check-border-style);\n box-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n\n &::before {\n border-radius: var(--cb-border-radius);\n position: absolute;\n content: '';\n inset-inline-start: 0.625em;\n inset-block-start: 0.625em;\n width: 0;\n height: 0;\n border: 2px solid var(--check-checked-higlight-color);\n transform: scale(0);\n }\n\n &--radio {\n border-radius: var(--radio-border-radius);\n background-color: var(--check-bg-color);\n }\n\n &--checkbox {\n background-color: var(--check-bg-color);\n\n &::after {\n border-radius: var(--cb-border-radius);\n position: absolute;\n content: '';\n inset-inline-start: 0.75em;\n inset-block-start: 0.75em;\n height: 0;\n width: 0;\n border: solid var(--check-checked-higlight-color);\n border-width: 0 0.1875em 0.1875em 0;\n transform: rotate(0deg) scale(0);\n opacity: 1;\n transition: all 0.15s ease-out;\n\n .nanocb--indeterminate & {\n border-width: 0 0 0.1875em;\n }\n }\n }\n\n &--segment,\n &--segment-pill {\n @include visually-hide();\n\n &::before {\n display: none;\n }\n }\n\n &--tag {\n @include visually-hide();\n\n &::before {\n display: none;\n }\n }\n }\n\n &--invalid:not(.nanocb--focused) {\n .nanocb__input {\n box-shadow: 0 0 15px rgb(0 0 0 / 20%), var(--invalid-shadow);\n\n &--tag + .nanocb__label,\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n box-shadow: var(--invalid-shadow);\n z-index: 1;\n }\n }\n }\n\n input {\n @include visually-hide();\n\n &:focus ~ .nanocb__input {\n box-shadow: 0 0 15px rgb(0 0 0 / 20%), var(--focus-shadow);\n }\n\n &.focus-visible:focus ~ .nanocb__input {\n &--tag + .nanocb__label,\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n box-shadow: var(--focus-shadow);\n z-index: 1;\n }\n }\n\n &:checked ~ .nanocb__input {\n border-radius: var(--cb-border-radius);\n background-color: var(--check-checked-bg-color);\n transform: rotate(0deg) scale(1);\n opacity: 1;\n border: 0.125em solid var(--check-checked-border-color);\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 {\n border-radius: var(--radio-border-radius);\n border-width: 0.3125em;\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 {\n &::after {\n transform: rotate(45deg) scale(1);\n opacity: 1;\n inset-inline-start: 0.475em;\n inset-block-start: 0.1875em;\n width: 0.375em;\n height: 0.75em;\n border-radius: 0;\n }\n }\n\n &--tag + .nanocb__label::after {\n transform: rotate(45deg);\n }\n }\n\n &:indeterminate ~ .nanocb__input--checkbox {\n border-radius: var(--input-border-radius, 5px);\n background-color: var(--check-checked-bg-color);\n transform: rotate(0deg) scale(1);\n opacity: 1;\n border: 0.125em solid var(--check-checked-bg-color);\n\n &::after {\n transform: scale(1);\n opacity: 1;\n inset-inline-start: 0.3125em;\n inset-block-start: 0;\n width: 0.7em;\n height: 0.7em;\n border-radius: 0;\n }\n }\n }\n\n &__label {\n padding-inline: 10px 0;\n padding-block: 0;\n display: flex;\n align-items: center;\n font-stretch: condensed;\n line-height: 1;\n flex: 1;\n justify-content: space-between;\n\n &--segment,\n &--segment-pill {\n border: var(--check-border-style);\n border-radius: var(--segment-border-radius);\n box-shadow: var(--segment-shadow);\n display: inline-flex;\n padding: var(--control-padding);\n background: var(--check-bg-color);\n color: var(--segment-color);\n align-items: center;\n width: 100%;\n }\n\n &--segment-pill {\n // first\n :host(:first-of-type) & {\n border-start-start-radius: var(--segment-border-radius);\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n border-end-start-radius: var(--segment-border-radius);\n border-inline-end: none;\n }\n\n // middle\n :host(:not(:last-of-type):not(:first-of-type)) & {\n border-radius: 0;\n border-inline-end: none;\n }\n\n // last\n :host(:last-of-type) & {\n border-start-start-radius: 0;\n border-start-end-radius: var(--segment-border-radius);\n border-end-end-radius: var(--segment-border-radius);\n border-end-start-radius: 0;\n }\n\n // single\n :host(:first-of-type:last-of-type) & {\n border-radius: var(--segment-border-radius);\n border: var(--check-border-style);\n }\n }\n\n &--tag {\n letter-spacing: 2px;\n font-weight: 500;\n font-size: 0.65em;\n line-height: 1.4;\n padding: var(--control-padding);\n border: 2px solid #b5aea7;\n border-color: var(--tagbox-border-color);\n background-color: var(--tagbox-bg-color);\n transition: all 0.2s;\n border-radius: var(--cb-border-radius);\n width: 100%;\n\n &::after {\n content: '+';\n margin-inline: 0.3125em 0;\n margin-block: 0;\n font-weight: 200;\n position: relative;\n font-family: inherit;\n font-size: 1.8em;\n display: inline-block;\n transform: rotate(0deg);\n transform-origin: center;\n }\n\n span {\n display: block;\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n Event,\n EventEmitter,\n h,\n ComponentInterface,\n State,\n Watch,\n Method,\n Element,\n Host,\n Listen,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport type {\n CheckboxChangeEventDetail,\n ControlValidity,\n Color,\n} from '../../interface';\n\nlet checkboxIds = 0;\n\n/**\n * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n *\n * @slot - if you do not set a label attribute, you can use this slot for more complex markup\n */\n@Component({\n tag: 'nano-checkbox',\n styleUrl: 'checkbox.scss',\n scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n private inputId = `nano-cb-${checkboxIds++}`;\n private input: HTMLInputElement;\n\n @Element() private host: HTMLNanoCheckboxElement;\n @State() inputType: 'checkbox' | 'radio' = 'checkbox';\n\n /** @internal */\n @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n /**\n * checked property that can be used to get/set the value. accepts only boolean values\n */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n @Watch('checked')\n async handleCheckedChange() {\n this.input.checked = this.checked;\n\n if (this.inputType === 'radio' && this.name && this.checked) {\n const form = this.host.closest('form');\n let ctrls: Element[];\n if (form) {\n ctrls = Array.from(\n form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n );\n } else {\n ctrls = Array.from(\n document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n ).filter((radio) => !radio.closest('form'));\n }\n ctrls.map((el: HTMLNanoCheckboxElement) => {\n if (el !== this.host) el.checked = false;\n });\n }\n this.nanoChange.emit({ value: this.value, checked: this.checked });\n }\n\n /**\n * If `true`, the user cannot interact with the checkbox.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n * it's only present when `checked` is true.\n */\n @Prop({ reflect: true }) value: string = 'on';\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop({ reflect: true }) name: string;\n\n /**\n * Set to true to make the field required.\n */\n @Prop({ reflect: true }) required: boolean = false;\n\n /**\n * Controls the underlying field type and style.\n */\n @Prop({ reflect: true }) type:\n | 'radio'\n | 'checkbox'\n | 'tag'\n | 'segment'\n | 'segment-pill' = 'checkbox';\n\n @Watch('type')\n typeChange() {\n if (this.type === 'checkbox' || this.type === 'tag')\n this.inputType = 'checkbox';\n else this.inputType = 'radio';\n }\n\n /**\n * label property that can be used to set the label text. Alternatively you may use a label slot.\n */\n @Prop() label?: string;\n\n /**\n * If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n */\n @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n @Watch('indeterminate')\n handleIndeterminateChange() {\n this.checked = false;\n this.input.indeterminate = this.indeterminate;\n }\n\n /**\n * This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n */\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n @State() _invalid = false;\n\n /**\n * Current validation message - if any. @readonly\n */\n @Prop()\n get validityMessage() {\n if (!this.input) return '';\n return this.input.validationMessage;\n }\n\n /**\n * Color to use from your application's color palette.\n */\n @Prop() color?: Color;\n\n /**\n * The form element to associate the input with (its form owner). Must be the id of a form.\n */\n @Prop() form?: string | null;\n\n /**\n * Emited when the checkbox is toggled\n */\n @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n /**\n * Emited when the checkbox is focused\n */\n @Event() nanoFocus: EventEmitter;\n\n /**\n * Emited when the checkbox is blurred\n */\n @Event() nanoBlur: EventEmitter;\n\n // public methods\n\n /**\n * Returns the native input control\n */\n @Method()\n async getInputElement() {\n if (this.input) return this.input;\n }\n\n /**\n * Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n */\n @Method()\n async reportValidity(\n validateFirst: boolean = false\n ): Promise<ControlValidity> {\n if (validateFirst) this.input.reportValidity();\n this._invalid = !this.input.validity.valid;\n\n return {\n isValid: !this.invalid,\n errorMessage: this.input.validationMessage,\n };\n }\n\n /**\n * Sets a custom validation message.\n * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n */\n @Method()\n async setError(message: string, updateStatus = true) {\n if (!this.input) return;\n if (updateStatus) this._invalid = !!message.length;\n this.input.setCustomValidity(message);\n }\n\n /**\n * Sets focus on the checkbox.\n */\n @Method()\n async setFocus() {\n if (this.input) {\n this.input.focus();\n focusVisible.force(this.input);\n }\n }\n\n /**\n * Removes focus from the checkbox.\n */\n @Method()\n async removeFocus() {\n if (this.input) {\n this.input.blur();\n focusVisible.force(this.input, false);\n }\n }\n\n @Listen('reset', { target: 'body' })\n onReset(e) {\n const form = this.form\n ? document.querySelector('#' + this.form)\n : this.host.closest('form');\n if (!form || e.target !== this.host.closest('form')) return;\n\n this.checked = false;\n }\n\n // private handlers\n\n private handleInvalid = (ev: Event) => {\n this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n };\n\n private handleChange = (ev: InputEvent) => {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.indeterminate = false;\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n /* Although many radio components can be 'checked',\n the underlying control may not be. Check */\n private isRadioChecked() {\n requestAnimationFrame(() => (this.checked = this.input.checked));\n }\n\n // Stencil hooks\n\n componentWillLoad() {\n this.typeChange();\n }\n\n componentDidLoad() {\n this.input.indeterminate = this.indeterminate;\n this.isRadioChecked();\n focusVisible.observe(this.input);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.input);\n }\n\n render() {\n const labelId = this.inputId + '-lbl';\n\n return (\n <Host class={{ ...createColorClasses(this.color) }}>\n <label\n class={{\n nanocb: true,\n 'nanocb--checked': this.checked,\n 'nanocb--invalid': this.invalid,\n 'nanocb--disabled': this.disabled,\n 'nanocb--focused': this.hasFocus,\n 'nanocb--indeterminate': this.indeterminate,\n }}\n htmlFor={this.inputId}\n >\n <input\n type={this.inputType}\n name={this.name}\n form={this.form}\n required={this.required}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-labelledby={labelId}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onChange={this.handleChange}\n ref={(input) => (this.input = input)}\n id={this.inputId}\n onInvalid={this.handleInvalid}\n />\n <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n {this.label && !!this.label.length && <span>{this.label}</span>}\n <span hidden={this.label && !!this.label.length}>\n <slot />\n </span>\n </div>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"nano-checkbox.entry.js","mappings":"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","names":[],"sources":["./src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n /**\n * @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to #{$control-invalid-style};\n * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{$control-focus-style};\n * @prop --padding: padding around radio and checkbox controls. Defaults to initial;\n * @prop --control-padding: padding around tag and segmented controls text. Various defaults.\n * @prop --check-bg-color: Initial Bg color of radio / checkbox controls. Changes for [checked] and [disabled] states. Defaults to #{map.get($colors, white)};\n * @prop --check-border-color: initial border color. Defaults to #{map.get($colors, palegrey)};\n * @prop --check-border-size: initial border size. Default to 1px;\n * @prop --check-border-style: Initial border style. Defaults to var(--check-border-size) solid var(--check-border-color);\n * @prop --check-checked-bg-color: Checked bg of controls (not tag). Defaults to #{map.get($colors, darkgrey)};\n * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{map.get($colors, darkgrey)};\n * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{map.get($colors, white)};\n * @prop --check-base-size: Relative scaling size for check controls. Defaults to to inherit;\n\n * @prop --cb-border-radius: Checkbox border radius. Defaults to to 2px and 5px on [has-focus];\n * @prop --radio-border-radius: Radio border radius. Defaults to to 50%;\n * @prop --tagbox-rgb: an rba list for tags which can be used to generate --tagbox-border-color and --tagbox-bg-color. Defaults to #{color-to-rgb-list(map.get($colors, lightblue))};\n * @prop --tagbox-border-color: Defaults to rgb(var(--tagbox-rgb) / 50%);\n * @prop --tagbox-bg-color: Defaults to rgb(var(--tagbox-rgb) / 10%);\n * @prop --segment-color: Segment, unselected text color. (selected color is --check-checked-higlight-color). Defaults to #{map.get($colors, blue)};\n * @prop --segment-border-radius: Defaults to 3px;\n * @prop --segment-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n */\n\n --focus-shadow: #{$control-focus-style};\n --invalid-shadow: #{$control-focus-size + ' ' map.get($colors, red)};\n --padding: initial;\n --check-bg-color: #{map.get($colors, white)};\n --check-border-color: #{map.get($colors, palegrey)};\n --check-border-size: 1px;\n --check-border-style: var(--check-border-size) solid var(--check-border-color);\n --check-checked-bg-color: #{map.get($colors, darkgrey)};\n --check-checked-border-color: #{map.get($colors, darkgrey)};\n --check-checked-higlight-color: #{map.get($colors, white)};\n --check-base-size: inherit;\n\n // type specific\n\n --tagbox-rgb: #{color-to-rgb-list(map.get($colors, lightblue))};\n --tagbox-border-color: rgb(var(--tagbox-rgb) / 50%);\n --tagbox-bg-color: rgb(var(--tagbox-rgb) / 20%);\n --tagbox-border-radius: 0;\n --segment-color: #{map.get($colors, blue)};\n --segment-border-radius: 3px;\n --segment-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n --cb-border-radius: 2px;\n --radio-border-radius: 50%;\n\n display: inline-block;\n max-width: 100%;\n\n * {\n box-sizing: inherit;\n }\n}\n\n:host([type='tag']) {\n text-transform: uppercase;\n\n --control-padding: 0.2rem 1rem;\n}\n\n:host([type='radio'][checked]):not([checked='false']) {\n --check-border-size: 0.3125em;\n}\n\n:host([type='segment']) {\n --check-border-style: none;\n --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host([type='segment-pill']) {\n --check-border-color: #{rgba(map.get($colors, palegrey), 0.5)};\n --segment-border-radius: 5px;\n --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host(.nano-color) {\n --tagbox-rgb: var(--nano-color-base-rgb);\n --focus-shadow: #{$control-focus-size} var(--nano-color-shade);\n}\n\n:host([checked]:not([checked='false'])) {\n --tagbox-border-color: rgb(var(--tagbox-rgb) / 80%);\n --tagbox-bg-color: rgb(var(--tagbox-rgb) / 50%);\n}\n\n:host([has-focus]:not([has-focus='false'])) {\n --cb-border-radius: 5px;\n}\n\n:host([disabled]:not([disabled='false'])) {\n opacity: 0.7;\n\n --tagbox-rgb: #{color-to-rgb-list(map.get($colors, mediumgrey))};\n --check-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n --check-checked-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n --segment-color: #{map.get($colors, darkgrey)};\n}\n\n.nanocb {\n padding: var(--padding);\n cursor: pointer;\n display: flex;\n align-items: center;\n line-height: 1.2;\n position: relative;\n\n &__input {\n border-radius: var(--cb-border-radius, 3px);\n font-size: var(--check-base-size);\n position: relative;\n height: 1.5em;\n width: 1.5em;\n min-width: 1.5em;\n border: var(--check-border-style);\n box-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n\n &::before {\n border-radius: var(--cb-border-radius);\n position: absolute;\n content: '';\n inset-inline-start: calc(0.725em - var(--check-border-size));\n inset-block-start: calc(0.725em - var(--check-border-size));\n width: 0;\n height: 0;\n border: 2px solid var(--check-checked-higlight-color);\n transform: scale(0);\n }\n\n &--radio {\n border-radius: var(--radio-border-radius);\n background-color: var(--check-bg-color);\n }\n\n &--checkbox {\n background-color: var(--check-bg-color);\n\n &::after {\n border-radius: var(--cb-border-radius);\n position: absolute;\n content: '';\n inset-inline-start: calc(0.825em - var(--check-border-size));\n inset-block-start: calc(0.825em - var(--check-border-size));\n height: 0;\n width: 0;\n border: solid var(--check-checked-higlight-color);\n border-width: 0 0.1875em 0.1875em 0;\n transform: rotate(0deg) scale(0);\n opacity: 1;\n transition: all 0.15s ease-out;\n\n .nanocb--indeterminate & {\n border-width: 0 0 0.1875em;\n }\n }\n }\n\n &--segment,\n &--segment-pill {\n @include visually-hide();\n\n &::before {\n display: none;\n }\n }\n\n &--tag {\n @include visually-hide();\n\n &::before {\n display: none;\n }\n }\n }\n\n &--invalid:not(.nanocb--focused) {\n .nanocb__input {\n box-shadow: 0 0 15px rgb(0 0 0 / 20%), var(--invalid-shadow);\n\n &--tag + .nanocb__label,\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n box-shadow: var(--invalid-shadow);\n z-index: 1;\n }\n }\n }\n\n input {\n @include visually-hide();\n\n &:focus ~ .nanocb__input {\n box-shadow: 0 0 15px rgb(0 0 0 / 20%), var(--focus-shadow);\n }\n\n &.focus-visible:focus ~ .nanocb__input {\n &--tag + .nanocb__label,\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n box-shadow: var(--focus-shadow);\n z-index: 1;\n }\n }\n\n &:checked ~ .nanocb__input {\n border-radius: var(--cb-border-radius);\n background-color: var(--check-checked-bg-color);\n transform: rotate(0deg) scale(1);\n opacity: 1;\n border-color: var(--check-checked-border-color);\n\n &--segment + .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 {\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 {\n &::after {\n transform: rotate(45deg) scale(1);\n opacity: 1;\n inset-inline-start: calc(0.575em - var(--check-border-size));\n inset-block-start: calc(0.2875em - var(--check-border-size));\n width: 0.375em;\n height: 0.75em;\n border-radius: 0;\n }\n }\n\n &--tag + .nanocb__label::after {\n transform: rotate(45deg);\n }\n }\n\n &:indeterminate ~ .nanocb__input--checkbox {\n border-radius: var(--input-border-radius, 5px);\n background-color: var(--check-checked-bg-color);\n transform: rotate(0deg) scale(1);\n opacity: 1;\n border: 0.125em solid var(--check-checked-bg-color);\n\n &::after {\n transform: scale(1);\n opacity: 1;\n inset-inline-start: 0.3125em;\n inset-block-start: 0;\n width: 0.7em;\n height: 0.7em;\n border-radius: 0;\n }\n }\n }\n\n &__label {\n padding-inline: 10px 0;\n padding-block: 0;\n display: flex;\n align-items: center;\n font-stretch: condensed;\n line-height: 1;\n flex: 1;\n justify-content: space-between;\n\n &--segment,\n &--segment-pill {\n border: var(--check-border-style);\n border-radius: var(--segment-border-radius);\n box-shadow: var(--segment-shadow);\n display: inline-flex;\n padding: var(--control-padding);\n background: var(--check-bg-color);\n color: var(--segment-color);\n align-items: center;\n width: 100%;\n }\n\n &--segment-pill {\n // first\n :host(:first-of-type) & {\n border-start-start-radius: var(--segment-border-radius);\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n border-end-start-radius: var(--segment-border-radius);\n border-inline-end: none;\n }\n\n // middle\n :host(:not(:last-of-type):not(:first-of-type)) & {\n border-radius: 0;\n border-inline-end: none;\n }\n\n // last\n :host(:last-of-type) & {\n border-start-start-radius: 0;\n border-start-end-radius: var(--segment-border-radius);\n border-end-end-radius: var(--segment-border-radius);\n border-end-start-radius: 0;\n }\n\n // single\n :host(:first-of-type:last-of-type) & {\n border-radius: var(--segment-border-radius);\n border: var(--check-border-style);\n }\n }\n\n &--tag {\n letter-spacing: 2px;\n font-weight: 500;\n font-size: 0.65em;\n line-height: 1.4;\n padding: var(--control-padding);\n border: 2px solid #b5aea7;\n border-color: var(--tagbox-border-color);\n background-color: var(--tagbox-bg-color);\n transition: all 0.2s;\n border-radius: var(--cb-border-radius);\n width: 100%;\n\n &::after {\n content: '+';\n margin-inline: 0.3125em 0;\n margin-block: 0;\n font-weight: 200;\n position: relative;\n font-family: inherit;\n font-size: 1.8em;\n display: inline-block;\n transform: rotate(0deg);\n transform-origin: center;\n }\n\n span {\n display: block;\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n Event,\n EventEmitter,\n h,\n ComponentInterface,\n State,\n Watch,\n Method,\n Element,\n Host,\n Listen,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport type {\n CheckboxChangeEventDetail,\n ControlValidity,\n Color,\n} from '../../interface';\n\nlet checkboxIds = 0;\n\n/**\n * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n *\n * @slot - if you do not set a label attribute, you can use this slot for more complex markup\n */\n@Component({\n tag: 'nano-checkbox',\n styleUrl: 'checkbox.scss',\n scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n private inputId = `nano-cb-${checkboxIds++}`;\n private input: HTMLInputElement;\n\n @Element() private host: HTMLNanoCheckboxElement;\n @State() inputType: 'checkbox' | 'radio' = 'checkbox';\n\n /** @internal */\n @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n /**\n * checked property that can be used to get/set the value. accepts only boolean values\n */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n @Watch('checked')\n async handleCheckedChange() {\n this.input.checked = this.checked;\n\n if (this.inputType === 'radio' && this.name && this.checked) {\n const form = this.host.closest('form');\n let ctrls: Element[];\n if (form) {\n ctrls = Array.from(\n form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n );\n } else {\n ctrls = Array.from(\n document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n ).filter((radio) => !radio.closest('form'));\n }\n ctrls.map((el: HTMLNanoCheckboxElement) => {\n if (el !== this.host) el.checked = false;\n });\n }\n this.nanoChange.emit({ value: this.value, checked: this.checked });\n }\n\n /**\n * If `true`, the user cannot interact with the checkbox.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n * it's only present when `checked` is true.\n */\n @Prop({ reflect: true }) value: string = 'on';\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop({ reflect: true }) name: string;\n\n /**\n * Set to true to make the field required.\n */\n @Prop({ reflect: true }) required: boolean = false;\n\n /**\n * Controls the underlying field type and style.\n */\n @Prop({ reflect: true }) type:\n | 'radio'\n | 'checkbox'\n | 'tag'\n | 'segment'\n | 'segment-pill' = 'checkbox';\n\n @Watch('type')\n typeChange() {\n if (this.type === 'checkbox' || this.type === 'tag')\n this.inputType = 'checkbox';\n else this.inputType = 'radio';\n }\n\n /**\n * label property that can be used to set the label text. Alternatively you may use a label slot.\n */\n @Prop() label?: string;\n\n /**\n * If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n */\n @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n @Watch('indeterminate')\n handleIndeterminateChange() {\n this.checked = false;\n this.input.indeterminate = this.indeterminate;\n }\n\n /**\n * This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n */\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n @State() _invalid = false;\n\n /**\n * Current validation message - if any. @readonly\n */\n @Prop()\n get validityMessage() {\n if (!this.input) return '';\n return this.input.validationMessage;\n }\n\n /**\n * Color to use from your application's color palette.\n */\n @Prop() color?: Color;\n\n /**\n * The form element to associate the input with (its form owner). Must be the id of a form.\n */\n @Prop() form?: string | null;\n\n /**\n * Emited when the checkbox is toggled\n */\n @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n /**\n * Emited when the checkbox is focused\n */\n @Event() nanoFocus: EventEmitter;\n\n /**\n * Emited when the checkbox is blurred\n */\n @Event() nanoBlur: EventEmitter;\n\n // public methods\n\n /**\n * Returns the native input control\n */\n @Method()\n async getInputElement() {\n if (this.input) return this.input;\n }\n\n /**\n * Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n */\n @Method()\n async reportValidity(\n validateFirst: boolean = false\n ): Promise<ControlValidity> {\n if (validateFirst) this.input.reportValidity();\n this._invalid = !this.input.validity.valid;\n\n return {\n isValid: !this.invalid,\n errorMessage: this.input.validationMessage,\n };\n }\n\n /**\n * Sets a custom validation message.\n * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n */\n @Method()\n async setError(message: string, updateStatus = true) {\n if (!this.input) return;\n if (updateStatus) this._invalid = !!message.length;\n this.input.setCustomValidity(message);\n }\n\n /**\n * Sets focus on the checkbox.\n */\n @Method()\n async setFocus() {\n if (this.input) {\n this.input.focus();\n focusVisible.force(this.input);\n }\n }\n\n /**\n * Removes focus from the checkbox.\n */\n @Method()\n async removeFocus() {\n if (this.input) {\n this.input.blur();\n focusVisible.force(this.input, false);\n }\n }\n\n @Listen('reset', { target: 'body' })\n onReset(e) {\n const form = this.form\n ? document.querySelector('#' + this.form)\n : this.host.closest('form');\n if (!form || e.target !== this.host.closest('form')) return;\n\n this.checked = false;\n }\n\n // private handlers\n\n private handleInvalid = (ev: Event) => {\n this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n };\n\n private handleChange = (ev: InputEvent) => {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.indeterminate = false;\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n /* Although many radio components can be 'checked',\n the underlying control may not be. Check */\n private isRadioChecked() {\n requestAnimationFrame(() => (this.checked = this.input.checked));\n }\n\n // Stencil hooks\n\n componentWillLoad() {\n this.typeChange();\n }\n\n componentDidLoad() {\n this.input.indeterminate = this.indeterminate;\n this.isRadioChecked();\n focusVisible.observe(this.input);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.input);\n }\n\n render() {\n const labelId = this.inputId + '-lbl';\n\n return (\n <Host class={{ ...createColorClasses(this.color) }}>\n <label\n class={{\n nanocb: true,\n 'nanocb--checked': this.checked,\n 'nanocb--invalid': this.invalid,\n 'nanocb--disabled': this.disabled,\n 'nanocb--focused': this.hasFocus,\n 'nanocb--indeterminate': this.indeterminate,\n }}\n htmlFor={this.inputId}\n >\n <input\n type={this.inputType}\n name={this.name}\n form={this.form}\n required={this.required}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-labelledby={labelId}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onChange={this.handleChange}\n ref={(input) => (this.input = input)}\n id={this.inputId}\n onInvalid={this.handleInvalid}\n />\n <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n {this.label && !!this.label.length && <span>{this.label}</span>}\n <span hidden={this.label && !!this.label.length}>\n <slot />\n </span>\n </div>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}
@@ -206,6 +206,53 @@ const Demo = class {
206
206
  ecoOrder: false,
207
207
  revenueOrder: false,
208
208
  };
209
+ this.columns = [
210
+ {
211
+ title: 'Name',
212
+ prop: 'name',
213
+ pinned: 'start',
214
+ rowHeader: true,
215
+ autoTooltip: true,
216
+ },
217
+ {
218
+ title: 'Status',
219
+ prop: 'sku',
220
+ cellTemplate: (_, c) => capitalise(c.cellModel || this.order.status),
221
+ },
222
+ {
223
+ title: 'SKU',
224
+ prop: 'finalSku',
225
+ },
226
+ {
227
+ title: 'Sales tag',
228
+ prop: 'salesTag',
229
+ cellTemplate: (_, c) => c.cellModel || 'None',
230
+ },
231
+ {
232
+ title: 'Requested ship date',
233
+ prop: 'requestedShippingDate',
234
+ cellTemplate: (_, c) => mediumDate(c.cellModel) || 'N/A',
235
+ },
236
+ {
237
+ title: 'Quantity',
238
+ prop: 'quantity',
239
+ },
240
+ {
241
+ title: 'Unit price',
242
+ prop: 'price',
243
+ cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),
244
+ },
245
+ {
246
+ title: 'Discount %',
247
+ prop: 'discountPercentage',
248
+ cellTemplate: (_, c) => c.cellModel || 0,
249
+ },
250
+ {
251
+ title: 'Line value',
252
+ prop: 'total',
253
+ cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),
254
+ },
255
+ ];
209
256
  }
210
257
  lineItemTotal(order) {
211
258
  var _a;
@@ -229,53 +276,7 @@ const Demo = class {
229
276
  })) : (h(Fragment, null)),
230
277
  ].flat(1);
231
278
  },
232
- }, columns: [
233
- {
234
- title: 'Name',
235
- prop: 'name',
236
- pinned: 'start',
237
- rowHeader: true,
238
- autoTooltip: true,
239
- },
240
- {
241
- title: 'Status',
242
- prop: 'status',
243
- cellTemplate: (_, c) => capitalise(c.cellModel || this.order.status),
244
- },
245
- {
246
- title: 'SKU',
247
- prop: 'finalSku',
248
- },
249
- {
250
- title: 'Sales tag',
251
- prop: 'salesTag',
252
- cellTemplate: (_, c) => c.cellModel || 'None',
253
- },
254
- {
255
- title: 'Requested ship date',
256
- prop: 'requestedShippingDate',
257
- cellTemplate: (_, c) => mediumDate(c.cellModel) || 'N/A',
258
- },
259
- {
260
- title: 'Quantity',
261
- prop: 'quantity',
262
- },
263
- {
264
- title: 'Unit price',
265
- prop: 'price',
266
- cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),
267
- },
268
- {
269
- title: 'Discount %',
270
- prop: 'discountPercentage',
271
- cellTemplate: (_, c) => c.cellModel || 0,
272
- },
273
- {
274
- title: 'Line value',
275
- prop: 'total',
276
- cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),
277
- },
278
- ], rows: this.order.shopOrderLines, caption: `List of order line items found within order ${this.order.orderId}`, showFooter: true, footRender: {
279
+ }, columns: this.columns, rows: this.order.shopOrderLines, caption: `List of order line items found within order ${this.order.orderId}`, showFooter: true, footRender: {
279
280
  pinned: 'bottom',
280
281
  template: () => [
281
282
  h("tr", null, h("td", { colSpan: 6 }, "\u00A0"), h("th", { scope: "row", class: "tbl__pin nano-tbl__pin--end", colSpan: 3 }, h("div", { class: "nano-tbl__cell-content order-lines__total" }, h("span", { class: "order-lines__total--label" }, "Sub total:"), h("span", { class: "order-lines__total--num" }, currency(this.lineItemTotal(this.order), this.order.currency))))),
@@ -1 +1 @@
1
- {"file":"nano-demo.entry.js","mappings":"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","names":[],"sources":["./src/components/demo/demo.tsx"],"sourcesContent":["import {\n Component,\n ComponentInterface,\n Fragment,\n h,\n Host,\n} from '@stencil/core';\n\nfunction capitalise(value: string) {\n if (!value) return '';\n return value.charAt(0).toUpperCase() + value.slice(1);\n}\n\nfunction mediumDate(date: Date) {\n if (!date) return undefined;\n return new Date(date).toLocaleDateString(undefined, {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n });\n}\n\nfunction currency(amount: number = 0, currencyCode: string = 'USD') {\n currencyCode = currencyCode?.toLocaleUpperCase() || 'USD';\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: currencyCode,\n }).format(amount);\n}\n\n@Component({\n tag: 'nano-demo',\n shadow: true,\n styles: /* css */ `\n :host {display: block}\n .child-row {\n opacity: .8;\n font-style: italic;\n }\n `,\n})\nexport class Demo implements ComponentInterface {\n private order = {\n checks: [\n {\n name: 'Compliance',\n external_id: 'CO',\n status: 'complete',\n account_info: {\n name: 'Jeongmin Song',\n email: 'js2957@cornell.edu',\n address_line_1: '930 Campus Road',\n address_line_2: 'Veterinary Medical Center C4 109',\n address_postcode: '14853',\n address_city: 'Ithaca',\n address_region: 'New York',\n address_country: 'US',\n },\n individual_name_compliance_information: {\n table: {\n names: [],\n addresses: [],\n match: false,\n false_positive: null,\n },\n },\n organization_compliance_information: {\n table: {\n names: [],\n addresses: [],\n match: false,\n false_positive: null,\n },\n },\n checks: [\n {\n label: 'Compliance check',\n external_id: 'compliance_check',\n item_type: 'pass/fail/escalate',\n answer: 'pass',\n },\n ],\n further_information: [],\n attachments: [],\n notes: [],\n },\n ],\n orderId: '00886434',\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T16:02:29',\n status: 'Processing',\n subStatus: null,\n currency: 'USD',\n customerPaymentMethod: 'CC-USD',\n paymentPlatform: 'Shop',\n dataAreaId: 'OXUS',\n defaultShippingWarehouse: null,\n deliveryContact: 'Jeongmin Song',\n deliveryMode: null,\n deliveryName: 'Cornell University',\n deliveryTerms: null,\n invoiceAccountNumber: 'C038330',\n orderAccountNumber: 'C038330',\n orderAccountName: 'Cornell University',\n originalLeadTime: null,\n salesDate: '2022-12-09T15:57:50',\n salesName: 'Cornell University',\n salesOrigin: 'Shop',\n salesOriginName: 'Main USD Store View',\n customerReference: '',\n purchaseOrder: null,\n additionalDocuments: [],\n total: 860,\n shippingAmount: 50,\n taxAmount: 0,\n projectId: null,\n deliveryPhoneNumber: '+16072533722',\n invoicePhoneNumber: '+16072533722',\n quoteNumber: null,\n customerType: 'N/A',\n invoiceAccountEmail: 'js2957@cornell.edu',\n partnerReference: null,\n sentToD365: false,\n sentToD365Status: 'unsent',\n orderAccountEmail: 'js2957@cornell.edu',\n controllingAccountNumber: 'C038330',\n controllingAccountEmail: 'js2957@cornell.edu',\n deliveryAddress: {\n street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n city: 'Ithaca',\n postcode: '14853',\n region: 'New York',\n regionCode: 'NY',\n countryCode: 'US',\n },\n invoiceAddress: {\n street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n city: 'Ithaca',\n postcode: '14853',\n region: 'New York',\n regionCode: 'NY',\n countryCode: 'US',\n },\n shopOrderLines: [\n {\n name: 'Flongle Flow Cell (R9.4.1)',\n sku: 'FLO-FLG001',\n quantity: 1,\n price: 810,\n total: 810,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: 'FLO-FLG001',\n productType: 'bundle',\n salesTag: 'FLGExpSP',\n requestedShippingDate: null,\n discount: 0,\n discountPercentage: 0,\n get finalSku() {\n return this.maskSku || this.sku;\n },\n includedItems: [\n {\n name: 'Flongle Flow Cell (R9.4.1)',\n sku: 'FLO-FLG001D',\n quantity: 12,\n price: 66,\n total: 792,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: 'FLO-FLG001',\n productType: 'simple',\n salesTag: 'FLGExpSP',\n requestedShippingDate: '2022-12-27T00:00:00',\n discount: 0,\n discountPercentage: 0,\n },\n {\n name: 'Flongle Flow Cell Priming Kit',\n sku: 'EXP-FSE001',\n quantity: 1,\n price: 18,\n total: 18,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: '',\n productType: 'simple',\n salesTag: 'FLGExpSP',\n requestedShippingDate: '2022-12-27T00:00:00',\n discount: 0,\n discountPercentage: 0,\n },\n ],\n },\n {\n name: 'Carriage - Device shipment',\n sku: 'FREIGHT',\n quantity: 1,\n price: 50,\n total: 50,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: '',\n productType: 'virtual',\n salesTag: null,\n requestedShippingDate: '2022-12-27T00:00:00',\n discount: 0,\n discountPercentage: 0,\n get finalSku() {\n return this.maskSku || this.sku;\n },\n },\n ],\n orderLines: [],\n pickedItems: [],\n packedItems: [],\n trackingNumbers: [],\n trackingUpdates: [],\n ecoOrder: false,\n revenueOrder: false,\n };\n\n private lineItemTotal(order) {\n if (!order || !order.shopOrderLines?.length) return;\n let total = 0;\n order.shopOrderLines.forEach((itm) => {\n if (itm.status !== 'cancelled') total += itm.total;\n });\n return total;\n }\n\n render() {\n return (\n <Host>\n <nano-table\n rowRender={{\n template: (_, c, TableCell) =>\n [\n c.renderedRow,\n c.rowModel.includedItems?.length ? (\n c.rowModel.includedItems?.map((item) => {\n return (\n <tr class=\"child-row\">\n <TableCell header={true}>{item.name}</TableCell>\n <TableCell>\n {capitalise(c.rowModel.status || this.order.status)}\n </TableCell>\n <TableCell>{capitalise(item.sku)}</TableCell>\n <TableCell>{capitalise(item.salesTag)}</TableCell>\n <TableCell>\n {mediumDate(item.requestedShippingDate)}\n </TableCell>\n </tr>\n );\n })\n ) : (\n <Fragment />\n ),\n ].flat(1),\n }}\n columns={[\n {\n title: 'Name',\n prop: 'name',\n pinned: 'start',\n rowHeader: true,\n autoTooltip: true,\n },\n {\n title: 'Status',\n prop: 'status',\n cellTemplate: (_, c) =>\n capitalise(c.cellModel || this.order.status),\n },\n {\n title: 'SKU',\n prop: 'finalSku',\n },\n {\n title: 'Sales tag',\n prop: 'salesTag',\n cellTemplate: (_, c) => c.cellModel || 'None',\n },\n {\n title: 'Requested ship date',\n prop: 'requestedShippingDate',\n cellTemplate: (_, c) => mediumDate(c.cellModel) || 'N/A',\n },\n {\n title: 'Quantity',\n prop: 'quantity',\n },\n {\n title: 'Unit price',\n prop: 'price',\n cellTemplate: (_, c) =>\n currency(c.cellModel, this.order.currency),\n },\n {\n title: 'Discount %',\n prop: 'discountPercentage',\n cellTemplate: (_, c) => c.cellModel || 0,\n },\n {\n title: 'Line value',\n prop: 'total',\n cellTemplate: (_, c) =>\n currency(c.cellModel, this.order.currency),\n },\n ]}\n rows={this.order.shopOrderLines}\n caption={`List of order line items found within order ${this.order.orderId}`}\n showFooter={true}\n footRender={{\n pinned: 'bottom',\n template: () => [\n <tr>\n <td colSpan={6}>&nbsp;</td>\n <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n <div class=\"nano-tbl__cell-content order-lines__total\">\n <span class=\"order-lines__total--label\">Sub total:</span>\n <span class=\"order-lines__total--num\">\n {currency(\n this.lineItemTotal(this.order),\n this.order.currency\n )}\n </span>\n </div>\n </th>\n </tr>,\n <tr>\n <td colSpan={6}>&nbsp;</td>\n <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n <div class=\"nano-tbl__cell-content order-lines__total\">\n <span class=\"order-lines__total--label\">\n Total order tax:\n </span>\n <span class=\"order-lines__total--num\">\n {currency(this.order.taxAmount, this.order.currency)}\n </span>\n </div>\n </th>\n </tr>,\n <tr>\n <td colSpan={6}>&nbsp;</td>\n <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n <div class=\"nano-tbl__cell-content order-lines__total\">\n <span class=\"order-lines__total--label\">\n Total on order placement:\n </span>\n <span class=\"order-lines__total--num\">\n {currency(this.order.total, this.order.currency)}\n </span>\n </div>\n </th>\n </tr>,\n ],\n }}\n />\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"nano-demo.entry.js","mappings":"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","names":[],"sources":["./src/components/demo/demo.tsx"],"sourcesContent":["import {\n Component,\n ComponentInterface,\n Fragment,\n h,\n Host,\n} from '@stencil/core';\nimport { TableTypes } from '../table/table-interface';\n\ndeclare module namespace {\n export interface AccountInfo {\n name: string;\n email: string;\n address_line_1: string;\n address_line_2: string;\n address_postcode: string;\n address_city: string;\n address_region: string;\n address_country: string;\n }\n\n export interface Table {\n names: any[];\n addresses: any[];\n match: boolean;\n false_positive?: any;\n }\n\n export interface IndividualNameComplianceInformation {\n table: Table;\n }\n\n export interface Table2 {\n names: any[];\n addresses: any[];\n match: boolean;\n false_positive?: any;\n }\n\n export interface OrganizationComplianceInformation {\n table: Table2;\n }\n\n export interface Check2 {\n label: string;\n external_id: string;\n item_type: string;\n answer: string;\n }\n\n export interface Check {\n name: string;\n external_id: string;\n status: string;\n account_info: AccountInfo;\n individual_name_compliance_information: IndividualNameComplianceInformation;\n organization_compliance_information: OrganizationComplianceInformation;\n checks: Check2[];\n further_information: any[];\n attachments: any[];\n notes: any[];\n }\n\n export interface DeliveryAddress {\n street: string[];\n city: string;\n postcode: string;\n region: string;\n regionCode: string;\n countryCode: string;\n }\n\n export interface InvoiceAddress {\n street: string[];\n city: string;\n postcode: string;\n region: string;\n regionCode: string;\n countryCode: string;\n }\n\n export interface IncludedItem {\n name: string;\n sku: string;\n quantity: number;\n price: number;\n total: number;\n createdAt: string;\n updatedAt: string;\n maskSku: string;\n productType: string;\n salesTag: string;\n requestedShippingDate: string;\n discount: number;\n discountPercentage: number;\n }\n\n export interface ShopOrderLine {\n name: string;\n sku: string;\n quantity: number;\n price: number;\n total: number;\n createdAt: string;\n updatedAt: string;\n maskSku: string;\n productType: string;\n salesTag: string;\n requestedShippingDate?: string;\n discount: number;\n discountPercentage: number;\n includedItems?: IncludedItem[];\n finalSku: string;\n }\n\n export interface RootObject {\n checks: Check[];\n orderId: string;\n createdAt: string;\n updatedAt: string;\n status: string;\n subStatus?: any;\n currency: string;\n customerPaymentMethod: string;\n paymentPlatform: string;\n dataAreaId: string;\n defaultShippingWarehouse?: any;\n deliveryContact: string;\n deliveryMode?: any;\n deliveryName: string;\n deliveryTerms?: any;\n invoiceAccountNumber: string;\n orderAccountNumber: string;\n orderAccountName: string;\n originalLeadTime?: any;\n salesDate: string;\n salesName: string;\n salesOrigin: string;\n salesOriginName: string;\n customerReference: string;\n purchaseOrder?: any;\n additionalDocuments: any[];\n total: number;\n shippingAmount: number;\n taxAmount: number;\n projectId?: any;\n deliveryPhoneNumber: string;\n invoicePhoneNumber: string;\n quoteNumber?: any;\n customerType: string;\n invoiceAccountEmail: string;\n partnerReference?: any;\n sentToD365: boolean;\n sentToD365Status: string;\n orderAccountEmail: string;\n controllingAccountNumber: string;\n controllingAccountEmail: string;\n deliveryAddress: DeliveryAddress;\n invoiceAddress: InvoiceAddress;\n shopOrderLines: ShopOrderLine[];\n orderLines: any[];\n pickedItems: any[];\n packedItems: any[];\n trackingNumbers: any[];\n trackingUpdates: any[];\n ecoOrder: boolean;\n revenueOrder: boolean;\n }\n}\n\nfunction capitalise(value: string) {\n if (!value) return '';\n return value.charAt(0).toUpperCase() + value.slice(1);\n}\n\nfunction mediumDate(date: Date) {\n if (!date) return undefined;\n return new Date(date).toLocaleDateString(undefined, {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n });\n}\n\nfunction currency(amount: number = 0, currencyCode: string = 'USD') {\n currencyCode = currencyCode?.toLocaleUpperCase() || 'USD';\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: currencyCode,\n }).format(amount);\n}\n\n@Component({\n tag: 'nano-demo',\n shadow: true,\n styles: /* css */ `\n :host {display: block}\n .child-row {\n opacity: .8;\n font-style: italic;\n }\n `,\n})\nexport class Demo implements ComponentInterface {\n private order: namespace.RootObject = {\n checks: [\n {\n name: 'Compliance',\n external_id: 'CO',\n status: 'complete',\n account_info: {\n name: 'Jeongmin Song',\n email: 'js2957@cornell.edu',\n address_line_1: '930 Campus Road',\n address_line_2: 'Veterinary Medical Center C4 109',\n address_postcode: '14853',\n address_city: 'Ithaca',\n address_region: 'New York',\n address_country: 'US',\n },\n individual_name_compliance_information: {\n table: {\n names: [],\n addresses: [],\n match: false,\n false_positive: null,\n },\n },\n organization_compliance_information: {\n table: {\n names: [],\n addresses: [],\n match: false,\n false_positive: null,\n },\n },\n checks: [\n {\n label: 'Compliance check',\n external_id: 'compliance_check',\n item_type: 'pass/fail/escalate',\n answer: 'pass',\n },\n ],\n further_information: [],\n attachments: [],\n notes: [],\n },\n ],\n orderId: '00886434',\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T16:02:29',\n status: 'Processing',\n subStatus: null,\n currency: 'USD',\n customerPaymentMethod: 'CC-USD',\n paymentPlatform: 'Shop',\n dataAreaId: 'OXUS',\n defaultShippingWarehouse: null,\n deliveryContact: 'Jeongmin Song',\n deliveryMode: null,\n deliveryName: 'Cornell University',\n deliveryTerms: null,\n invoiceAccountNumber: 'C038330',\n orderAccountNumber: 'C038330',\n orderAccountName: 'Cornell University',\n originalLeadTime: null,\n salesDate: '2022-12-09T15:57:50',\n salesName: 'Cornell University',\n salesOrigin: 'Shop',\n salesOriginName: 'Main USD Store View',\n customerReference: '',\n purchaseOrder: null,\n additionalDocuments: [],\n total: 860,\n shippingAmount: 50,\n taxAmount: 0,\n projectId: null,\n deliveryPhoneNumber: '+16072533722',\n invoicePhoneNumber: '+16072533722',\n quoteNumber: null,\n customerType: 'N/A',\n invoiceAccountEmail: 'js2957@cornell.edu',\n partnerReference: null,\n sentToD365: false,\n sentToD365Status: 'unsent',\n orderAccountEmail: 'js2957@cornell.edu',\n controllingAccountNumber: 'C038330',\n controllingAccountEmail: 'js2957@cornell.edu',\n deliveryAddress: {\n street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n city: 'Ithaca',\n postcode: '14853',\n region: 'New York',\n regionCode: 'NY',\n countryCode: 'US',\n },\n invoiceAddress: {\n street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n city: 'Ithaca',\n postcode: '14853',\n region: 'New York',\n regionCode: 'NY',\n countryCode: 'US',\n },\n shopOrderLines: [\n {\n name: 'Flongle Flow Cell (R9.4.1)',\n sku: 'FLO-FLG001',\n quantity: 1,\n price: 810,\n total: 810,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: 'FLO-FLG001',\n productType: 'bundle',\n salesTag: 'FLGExpSP',\n requestedShippingDate: null,\n discount: 0,\n discountPercentage: 0,\n get finalSku() {\n return this.maskSku || this.sku;\n },\n includedItems: [\n {\n name: 'Flongle Flow Cell (R9.4.1)',\n sku: 'FLO-FLG001D',\n quantity: 12,\n price: 66,\n total: 792,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: 'FLO-FLG001',\n productType: 'simple',\n salesTag: 'FLGExpSP',\n requestedShippingDate: '2022-12-27T00:00:00',\n discount: 0,\n discountPercentage: 0,\n },\n {\n name: 'Flongle Flow Cell Priming Kit',\n sku: 'EXP-FSE001',\n quantity: 1,\n price: 18,\n total: 18,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: '',\n productType: 'simple',\n salesTag: 'FLGExpSP',\n requestedShippingDate: '2022-12-27T00:00:00',\n discount: 0,\n discountPercentage: 0,\n },\n ],\n },\n {\n name: 'Carriage - Device shipment',\n sku: 'FREIGHT',\n quantity: 1,\n price: 50,\n total: 50,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: '',\n productType: 'virtual',\n salesTag: null,\n requestedShippingDate: '2022-12-27T00:00:00',\n discount: 0,\n discountPercentage: 0,\n get finalSku() {\n return this.maskSku || this.sku;\n },\n },\n ],\n orderLines: [],\n pickedItems: [],\n packedItems: [],\n trackingNumbers: [],\n trackingUpdates: [],\n ecoOrder: false,\n revenueOrder: false,\n };\n\n private lineItemTotal(order) {\n if (!order || !order.shopOrderLines?.length) return;\n let total = 0;\n order.shopOrderLines.forEach((itm) => {\n if (itm.status !== 'cancelled') total += itm.total;\n });\n return total;\n }\n\n private columns: TableTypes.NanoTable<namespace.ShopOrderLine>['columns'] = [\n {\n title: 'Name',\n prop: 'name',\n pinned: 'start',\n rowHeader: true,\n autoTooltip: true,\n },\n {\n title: 'Status',\n prop: 'sku',\n cellTemplate: (_, c) => capitalise(c.cellModel || this.order.status),\n },\n {\n title: 'SKU',\n prop: 'finalSku',\n },\n {\n title: 'Sales tag',\n prop: 'salesTag',\n cellTemplate: (_, c) => c.cellModel || 'None',\n },\n {\n title: 'Requested ship date',\n prop: 'requestedShippingDate',\n cellTemplate: (_, c) => mediumDate(c.cellModel) || 'N/A',\n },\n {\n title: 'Quantity',\n prop: 'quantity',\n },\n {\n title: 'Unit price',\n prop: 'price',\n cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),\n },\n {\n title: 'Discount %',\n prop: 'discountPercentage',\n cellTemplate: (_, c) => c.cellModel || 0,\n },\n {\n title: 'Line value',\n prop: 'total',\n cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),\n },\n ];\n\n render() {\n return (\n <Host>\n <nano-table\n rowRender={{\n template: (_, c, TableCell) =>\n [\n c.renderedRow,\n c.rowModel.includedItems?.length ? (\n c.rowModel.includedItems?.map((item) => {\n return (\n <tr class=\"child-row\">\n <TableCell header={true}>{item.name}</TableCell>\n <TableCell>\n {capitalise(c.rowModel.status || this.order.status)}\n </TableCell>\n <TableCell>{capitalise(item.sku)}</TableCell>\n <TableCell>{capitalise(item.salesTag)}</TableCell>\n <TableCell>\n {mediumDate(item.requestedShippingDate)}\n </TableCell>\n </tr>\n );\n })\n ) : (\n <Fragment />\n ),\n ].flat(1),\n }}\n columns={this.columns}\n rows={this.order.shopOrderLines}\n caption={`List of order line items found within order ${this.order.orderId}`}\n showFooter={true}\n footRender={{\n pinned: 'bottom',\n template: () => [\n <tr>\n <td colSpan={6}>&nbsp;</td>\n <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n <div class=\"nano-tbl__cell-content order-lines__total\">\n <span class=\"order-lines__total--label\">Sub total:</span>\n <span class=\"order-lines__total--num\">\n {currency(\n this.lineItemTotal(this.order),\n this.order.currency\n )}\n </span>\n </div>\n </th>\n </tr>,\n <tr>\n <td colSpan={6}>&nbsp;</td>\n <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n <div class=\"nano-tbl__cell-content order-lines__total\">\n <span class=\"order-lines__total--label\">\n Total order tax:\n </span>\n <span class=\"order-lines__total--num\">\n {currency(this.order.taxAmount, this.order.currency)}\n </span>\n </div>\n </th>\n </tr>,\n <tr>\n <td colSpan={6}>&nbsp;</td>\n <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n <div class=\"nano-tbl__cell-content order-lines__total\">\n <span class=\"order-lines__total--label\">\n Total on order placement:\n </span>\n <span class=\"order-lines__total--num\">\n {currency(this.order.total, this.order.currency)}\n </span>\n </div>\n </th>\n </tr>,\n ],\n }}\n />\n </Host>\n );\n }\n}\n"],"version":3}
@@ -49,7 +49,7 @@ async function clientFetch(url, _a = {}) {
49
49
  }
50
50
  }
51
51
 
52
- const globalNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.global-nav{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;z-index:var(--nano-layer-index-menubar, 10)}.global-nav button{background:none;color:inherit;border:none}.global-nav .icon-btn{position:relative;background:none;color:inherit;border:none;align-self:normal;padding:9px 7px;cursor:pointer;display:flex;align-items:center}.global-nav .icon-btn nano-icon{width:18px;height:18px}.global-nav ::slotted(nano-nav-item[slot=icon]){--padding-top:9px;--padding-bottom:9px;--padding-start:7px;--padding-end:7px;--display:flex;font-size:18px}.global-nav a{color:inherit;text-decoration:none;white-space:nowrap}.global-nav .nav-links_title{margin:8px 0 3px}.global-nav .nav-links ul{margin:0;padding:0}.global-nav .nav-links li{list-style:none}.global-nav .login-btn{display:flex;align-items:center}.global-nav .menu-btn{padding:9px var(--bar-item-spacing) 9px var(--bar-item-spacing)}.site-content{display:flex;transition:min-height 0.2s ease;position:relative;z-index:auto;align-items:stretch;flex:1}.mask{opacity:0;background:rgba(0, 0, 0, 0.3);position:fixed;inset-inline:0;inset-block-start:0;height:100vh;z-index:-1;transition:transform 0.2s ease, opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s;visibility:hidden}.mask.open{opacity:1;transition:z-index 0.01s ease, visibility 0.01s ease, transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;z-index:3;visibility:visible}.bars{color:var(--bar-text-color);z-index:var(--nano-layer-index-menubar, 10);position:relative;max-width:100%;min-width:100%;box-shadow:none;transition:0.2s ease box-shadow}[stuck] .bars{box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15)}.bars::before{content:\"\";width:100%;height:100%;z-index:-1;background:var(--bar-background);position:absolute}.main-bar{width:100%;padding-inline:0 var(--bar-item-spacing);padding-block:var(--bar-vertical-padding);display:flex;align-items:center;justify-content:space-between;overflow-x:hidden}.main-bar:focus{outline:none}:host(.ready) .main-bar{overflow-x:visible}.main-bar>*,.main-bar ::slotted(*){transition:opacity 0.2s ease}:host(:not(.ready)) .main-bar>*,:host(:not(.ready)) .main-bar ::slotted(*){opacity:0 !important}:host(.ready) .main-bar>*,:host(.ready) .main-bar ::slotted(*){opacity:1}:host(.resizing) .main-bar>*,:host(.resizing) .main-bar ::slotted(*){opacity:0 !important}.main-bar>*{flex:0 0 auto}.main-bar>* ::slotted(nano-nav-item[slot=icon]){-webkit-margin-start:11px;margin-inline-start:11px}.main-bar>* ::slotted(nano-nav-item),.main-bar>* nano-nav-item{--color-hover:var(--bar-color-focus);--secondary-bg-color:var(--bar-dropdown-bg);--secondary-color:var(--bar-dropdown-text);--bg-color-open:var(--bar-background);--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;text-decoration:none !important}.main-bar .icon-btn{-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:6px;margin-inline-start:6px}:host(.threshold-2) .main-bar .icon-btn{-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:11px;margin-inline-start:11px}.main-bar .menu-btn.icon-btn{margin:0 !important;-webkit-border-end:1.5px solid var(--bar-color-shade);border-inline-end:1.5px solid var(--bar-color-shade)}.main-bar .logo{height:36px;width:200px;min-width:200px}:host(:not(.threshold-1)) .main-bar .logo{height:30px}.main-bar .logo-link{-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:0;margin-inline-start:0;padding-inline:var(--bar-item-spacing);display:flex;align-items:center;border:none}.main-bar .nav-links{flex:0 0 auto;display:flex;justify-content:space-around}.main-bar .nav-links ul{display:flex;justify-content:space-around}.main-bar .nav-links ::slotted(nano-nav-item),.main-bar .nav-links nano-nav-item{--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;--margin:0 var(--bar-item-spacing)}.main-bar .nav-links--main{justify-content:flex-start;letter-spacing:1.5px;font-weight:600;font-stretch:condensed;text-transform:uppercase;font-size:1.065em;-webkit-margin-end:auto;margin-inline-end:auto}.main-bar .nav-links--main ::slotted(nano-nav-item){--color:var(--bar-text-color);--padding-end:3px;--padding-start:0}.main-bar .nav-links--sub{--color:var(--color, #e2e2e2);-webkit-margin-start:6px;margin-inline-start:6px;justify-content:flex-end}.main-bar .login-btn{display:inline-block;border-radius:4px;background-color:var(--login-button-bg);color:var(--login-button-text);padding:3px 10px;position:relative;inset-inline-start:auto;inset-block-end:auto;margin-inline:11px 0}.main-bar .measure-ele{min-width:1px;display:block;margin:0;padding:0}.sticker-trigger{background:var(--bar-background);width:100%;height:1px;z-index:20;position:relative}.sticker-trigger+.sticker-trigger{display:none}.gn-menu{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:-1;display:none;transition:z-index 0.01s ease 0.2s;height:100vh;width:100vw;overflow-y:auto}:host(.threshold-4) .gn-menu{position:absolute;width:calc(100vw - 20px)}.gn-menu.menu-full-screen{width:100vw !important}.gn-menu_wrap{max-width:92vw;width:335px;background:var(--menu-background);color:var(--menu-text-color);padding:calc(var(--bar-vertical-padding) + 1px) 0 0;box-shadow:0 0 36px 0 rgba(0, 0, 0, 0.8);position:relative;pointer-events:all;-webkit-margin-after:36px;margin-block-end:36px;opacity:0;outline:none;transition:transform 0.2s ease, opacity 0.2s ease}.gn-menu_wrap.has-promotion{padding:var(--menu-padding) 0 0}.gn-menu.open{z-index:var(--nano-layer-index-dropdown, 300);transition:z-index 0.01s ease}.gn-menu.open .gn-menu_wrap{opacity:1;transform:translate3d(0, 0, 0) !important;transition:transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s}.gn-menu_actions{-webkit-padding-end:calc(var(--menu-padding) / 2);padding-inline-end:calc(var(--menu-padding) / 2);display:flex;justify-content:space-between}.gn-menu_actions-counter{background:#d0021b;color:var(--menu-text-color);position:absolute;inset-block-end:4px;inset-inline:auto 0;font-size:9px;height:14px;line-height:14px;width:auto;min-width:14px;border-radius:50%;box-sizing:border-box;text-align:center;text-indent:0}.gn-menu .content-wrap{position:relative;overflow:hidden;transition:0.2s ease min-height;min-height:190px}.gn-menu .content--sub{padding:var(--menu-padding) 0 var(--menu-padding) 7px}.gn-menu .menu-btn{-webkit-margin-end:auto;margin-inline-end:auto}.gn-menu .nav-links{display:flex;flex-wrap:wrap}.gn-menu .nav-links ::slotted(nano-nav-item),.gn-menu .nav-links nano-nav-item{--icon-size:14px;--display:inline-block;--secondary-bg-color:#001a21;--padding-top:10px;--padding-bottom:10px;--padding-end:calc(var(--menu-padding) * 2);--padding-start:calc(var(--menu-padding) + 3px);--color:var(--menu-text-color);--color-hover:var(--menu-title-text);--bg-color-hover:transparent;--bg-color-focus:#002530;--focus-outline:none;width:100%}.gn-menu .nav-links .user-nav{--bg-color:var(--menu-user-panel-bg);--padding-top:9px;--padding-bottom:9px;font-weight:bold;margin:5px 0 0}.gn-menu .nav-links .user-nav ::slotted(nano-nav-item),.gn-menu .nav-links .user-nav nano-nav-item{font-weight:500;--bg-color:transparent}.gn-menu .nav-links .user-nav .content{padding:0;background-color:var(--menu-user-panel-bg)}.gn-menu .nav-links .user-nav .content--sub{padding-inline:var(--menu-padding)}.gn-menu .nav-links .user-nav .back-btn{-webkit-padding-start:var(--menu-padding);padding-inline-start:var(--menu-padding)}.gn-menu .nav-links_title{margin:0 var(--menu-padding) 4px;-webkit-border-after:1px solid var(--menu-hint-color);border-block-end:1px solid var(--menu-hint-color);-webkit-padding-after:8px;padding-block-end:8px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:700}.gn-menu .nav-links_title--sites{-webkit-border-after:none;border-block-end:none}.gn-menu .nav-links-wrap{margin:18px 0}.gn-menu .nav-links-wrap:last-child{-webkit-margin-after:0;margin-block-end:0}.gn-menu .nav-links .back-btn{-webkit-border-before:1px solid var(--menu-hint-color);border-block-start:1px solid var(--menu-hint-color);-webkit-border-after:1px solid var(--menu-hint-color);border-block-end:1px solid var(--menu-hint-color);display:flex;align-items:center;padding:10px 11px 10px 0;width:100%;font-size:12px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:700;cursor:pointer;font-stretch:expanded}.gn-menu .nav-links .back-btn:hover{color:var(--menu-text-color)}.gn-menu .nav-links .back-btn nano-icon{-webkit-margin-end:10px;margin-inline-end:10px;font-size:12px;color:var(--menu-icon-color)}.gn-menu .nav-links--sub{display:flex;flex-wrap:wrap}.gn-menu .nav-links--sub ::slotted(nano-nav-item),.gn-menu .nav-links--sub nano-nav-item{--border-bottom:none;--padding-end:var(--menu-padding);--padding-start:var(--menu-padding);--padding-top:8px;--padding-bottom:8px;margin:0;width:50%;line-height:1.8}.gn-menu .nav-links--sites ::slotted(nano-nav-item),.gn-menu .nav-links--sites nano-nav-item{width:100%}.gn-menu .nav-links .content{padding:8px var(--menu-padding)}.gn-menu .login-btn{padding-inline:7px var(--menu-padding);padding-block:var(--menu-padding)}.gn-menu .login-btn nano-icon{-webkit-margin-start:10px;margin-inline-start:10px}.gn-menu .logout-btn{justify-content:flex-end}.gn-menu .logout-btn a{padding:0 5px}.search-btn::before{content:\"\";background-color:#0c5a71;height:9px;inset-inline:0 5px;inset-block-end:-20px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}.search-btn--open::before{transform:translateZ(0) scaleX(1);opacity:0.7}.search-bar{height:0;overflow:hidden;transition:0.2s ease height;padding:0 var(--bar-item-spacing);outline:none;max-width:45em;-webkit-margin-start:auto;margin-inline-start:auto;}.search-bar .search-widget{margin:0;overflow:inherit;max-width:none;max-height:none;min-width:auto;-webkit-padding-end:0;padding-inline-end:0}.search-bar .search-widget .search-icon--search{display:none}.search-bar .search-widget .search-input{--input-border-width:2px 0 0 0;--input-bg-color:#f3f3f3;--nano-input-border-color:transparent;--nano-input-border-color--focus:var(--bar-color-shade);font-size:1.1875em}.search-bar .search-widget nano-select.search-input{--input-border-width:2px 3px 0 0;--input-bg-color:var(--bar-color-shade);--input-bg-color--focus:#f3f3f3;color:#f3f3f3}.search-bar .search-widget nano-select.search-input.has-focus{color:var(--bar-color-shade)}.search-bar .search-widget .select-input__arrow{font-size:0.75em}.search-bar .search-widget .select__mask.sc-nano-select{line-height:2.35em;min-height:2.35em;-webkit-padding-before:2px;padding-block-start:2px}.search-bar .search-inputs{padding:0;margin:0}.search-bar .search-autocomplete{inset-block-start:100%;width:100%}.search-widget{-webkit-padding-end:var(--bar-item-spacing);padding-inline-end:var(--bar-item-spacing);-webkit-margin-start:var(--bar-item-spacing);margin-inline-start:var(--bar-item-spacing);-webkit-margin-end:auto;margin-inline-end:auto;position:relative;flex:1 1 auto;max-width:500px;min-width:350px;max-height:36px;inset-block-start:-1px}.search-inputs{display:flex;margin:0}.search-inputs input[type=submit]{display:none}.search-autocomplete{position:absolute;inset-block-start:calc(100% + 15px);width:calc(100% - var(--bar-item-spacing));inset-inline-start:0;background:white;border:2px solid var(--bar-color-tint);border-radius:0 0 5px 5px;color:#4a4a4a;-webkit-padding-before:calc(var(--bar-vertical-padding) / 2);padding-block-start:calc(var(--bar-vertical-padding) / 2);-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:1px;padding-block-end:1px;-webkit-padding-start:0;padding-inline-start:0;z-index:1}.search-autocomplete-hit{padding-block:calc(var(--bar-vertical-padding) / 4);padding-inline:var(--bar-item-spacing);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:start;line-height:1.5;cursor:pointer}.search-autocomplete-hit-scope{color:#a7b0b3;font-weight:600}.search-autocomplete-hit:hover,.search-autocomplete-hit:focus-visible{background-color:#e4e6e8}.search-autocomplete-hit:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.search-autocomplete-hit:focus{outline:none}.search-autocomplete-hit .search__highlight,.search-autocomplete-hit em{font-weight:bold;font-style:normal}.search-autocomplete-hit--no-result:hover,.search-autocomplete-hit--no-result:focus{background:none !important}.search-autocomplete-foot{margin:7px 0 0}.search-autocomplete-submit{background:none;border:none;align-self:normal;padding:9px var(--bar-item-spacing) !important;cursor:pointer;display:flex;align-items:center;color:#007495;justify-content:flex-end;width:100%;text-decoration:underline;-webkit-border-before:1px solid #e8eaea;border-block-start:1px solid #e8eaea}.search-autocomplete-submit:hover,.search-autocomplete-submit:focus{background-color:#e4e6e8}nano-select.search-input{--input-border-width:0 0 2px 0;--input-text-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--padding-end:var(--bar-item-spacing);--nano-input-border-color--focus:black;font-stretch:condensed;font-weight:600;letter-spacing:1.5px;font-size:1.2em;flex:0 1 auto;width:auto;display:flex;align-items:center;flex-direction:column;position:relative;inset-inline-start:1px;text-transform:uppercase}:host(:not(.ready)) nano-select.search-input{overflow:hidden;max-height:1em}nano-select.search-input .down-arrow{font-size:0.65em}nano-input.search-input{--clear-btn-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--input-border-width:0 0 2px 0;--placeholder-color:var(--bar-text-color);--input-text-color:var(--bar-text-color);--padding-start:21px;--nano-input-border-color--focus:black;font-size:1.2em;width:206px;display:flex;align-items:center;flex-direction:column;flex:1}:host([dir=rtl]) nano-input.search-input{--input-border-radius:5px 0 0 5px}:host(:not(.ready)) nano-input.search-input{overflow:hidden;max-height:1em}nano-input.search-input .search-icon{background:none;padding:0 8px;display:none;font-size:0.9em}nano-input.search-input .search-icon--show{display:flex !important}nano-input.search-input .search-icon--loader{animation:spin 1s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}nano-input.search-input .search-icon nano-icon{height:1.4em}.user-profile{display:flex;justify-content:space-between;align-items:center;padding:2em;background-color:var(--menu-user-profile-bg)}.user-profile .left{display:flex;align-items:center}.user-profile .avatar-container{position:relative}.user-profile .avatar-container img.avatar{border-radius:50px}.user-profile .avatar-container img.logo-small{position:absolute;height:30px;width:30px;inset-block-end:0;inset-inline-end:0;background-color:#27586e;border-radius:10px;padding:5px}.user-profile .user-details{display:flex;flex-direction:column;margin:0 1.25em;color:white}.user-profile .user-details .name{font-size:1.25em}.user-profile .user-details .bio{margin:0.5em 0}.user-profile .user-details .kudos span{background-color:#81c7eb;color:#415958;padding:0.25em;border-radius:0.5em;font-weight:bold}.user-profile .chevron-right{font-size:1.5em;color:white}.user-links{position:relative}.user-links .icon-btn{-webkit-padding-end:0;padding-inline-end:0;font-weight:500}.user-links .icon-btn nano-icon{-webkit-margin-start:5px;margin-inline-start:5px;width:16px;height:16px;transform-origin:center;transition:transform 0.2s ease, color 0.2s ease}.user-links .icon-btn.open nano-icon{transform:rotate(180deg);color:#007495}.user-links-panel{display:none;position:absolute;border-radius:4px 0 4px 4px;box-shadow:0 1px 5px 0 rgba(0, 0, 0, 0.4);background-color:#568c9d;opacity:0;transform:translate3d(0, 30px, 0);transition:transform 0.2s ease, opacity 0.2s ease;inset-inline-end:0;min-width:318px;z-index:2}.user-links-panel:focus{outline:none}.user-links-panel.show{opacity:1;transform:translate3d(0, calc(var(--padding) + 1px), 0)}.user-links-panel-content{padding:0 18px;display:flex;flex-direction:column;color:white}.user-links-panel-content a{padding:11px 0;-webkit-border-after:#669dac 1px solid;border-block-end:#669dac 1px solid}.user-links-panel-content a:hover,.user-links-panel-content a:focus{color:#455556}.user-links-panel-content a:last-child{-webkit-border-after:none;border-block-end:none}.user-links-panel-foot{background-color:#aac5cd;border-radius:0 0 4px 4px;padding:var(--padding);color:#455556;display:flex;align-items:center;font-weight:500;justify-content:space-between}.user-links-panel-foot a:hover{text-decoration:underline}.user-links-panel .user-profile{background-color:var(--bar-user-panel-bg)}:host{--bar-vertical-padding:21px;--bar-item-spacing:13px;--bar-background:white;--bar-text-color:#196c82;--bar-color-shade:rgb(12 90 113);--bar-color-tint:rgb(19 89 111);--bar-color-focus:#99a3a6;--bar-user-panel-bg:#016d86;--bar-dropdown-bg:#196c82;--bar-dropdown-text:white;--menu-background:#001a21;--menu-text-color:white;--menu-user-profile-bg:#001a21;--menu-user-panel-bg:#193037;--menu-padding:12px;--menu-hint-color:#33484d;--menu-title-text:#90c6e7;--menu-icon-color:white;--login-button-bg:#17bb75;--login-button-text:white;--padding:12px;--padding-top:var(--padding);--padding-end:var(--padding);--padding-bottom:var(--padding);--padding-start:var(--padding);display:flex;flex-direction:column;position:relative;line-height:1.5;height:100%;font-size:0.9375em;font-size:clamp(0.77rem, 1vw, 0.9rem)}:host input,:host select,:host button{font-family:inherit;-webkit-appearance:none;appearance:none;font-size:inherit}:host a:focus,:host button:focus{outline:none}:host a:focus-visible,:host button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";
52
+ const globalNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.global-nav{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;z-index:var(--nano-layer-index-menubar, 10)}.global-nav button{background:none;color:inherit;border:none}.global-nav .icon-btn{position:relative;background:none;color:inherit;border:none;align-self:normal;padding:9px 7px;cursor:pointer;display:flex;align-items:center}.global-nav .icon-btn nano-icon{width:18px;height:18px}.global-nav ::slotted(nano-nav-item[slot=icon]){--padding-top:9px;--padding-bottom:9px;--padding-start:7px;--padding-end:7px;--display:flex;font-size:18px}.global-nav a{color:inherit;text-decoration:none;white-space:nowrap}.global-nav .nav-links_title{margin:8px 0 3px}.global-nav .nav-links ul{margin:0;padding:0}.global-nav .nav-links li{list-style:none}.global-nav .login-btn{display:flex;align-items:center}.global-nav .menu-btn{padding:9px var(--bar-item-spacing) 9px var(--bar-item-spacing)}.site-content{display:flex;transition:min-height 0.2s ease;position:relative;z-index:auto;align-items:stretch;flex:1}.mask{opacity:0;background:rgba(0, 0, 0, 0.3);position:fixed;inset-inline:0;inset-block-start:0;height:100vh;z-index:-1;transition:transform 0.2s ease, opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s;visibility:hidden}.mask.open{opacity:1;transition:z-index 0.01s ease, visibility 0.01s ease, transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;z-index:3;visibility:visible}.bars{color:var(--bar-text-color);z-index:var(--nano-layer-index-menubar, 10);position:relative;max-width:100%;min-width:100%;box-shadow:none;transition:0.2s ease box-shadow}[stuck] .bars{box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15)}.bars::before{content:\"\";width:100%;height:100%;z-index:-1;background:var(--bar-background);position:absolute}.main-bar{width:100%;padding-inline:0 var(--bar-item-spacing);padding-block:var(--bar-vertical-padding);display:flex;align-items:center;justify-content:space-between;overflow-x:hidden}.main-bar:focus{outline:none}:host(.ready) .main-bar{overflow-x:visible}.main-bar>*,.main-bar ::slotted(*){transition:opacity 0.2s ease}:host(:not(.ready)) .main-bar>*,:host(:not(.ready)) .main-bar ::slotted(*){opacity:0 !important}:host(.ready) .main-bar>*,:host(.ready) .main-bar ::slotted(*){opacity:1}:host(.resizing) .main-bar>*,:host(.resizing) .main-bar ::slotted(*){opacity:0 !important}.main-bar>*{flex:0 0 auto}.main-bar>* ::slotted(nano-nav-item[slot=icon]){-webkit-margin-start:11px;margin-inline-start:11px}.main-bar>* ::slotted(nano-nav-item),.main-bar>* nano-nav-item{--color-hover:var(--bar-color-focus);--secondary-bg-color:var(--bar-dropdown-bg);--secondary-color:var(--bar-dropdown-text);--bg-color-open:var(--bar-background);--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;text-decoration:none !important}.main-bar .icon-btn{-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:6px;margin-inline-start:6px}:host(.threshold-2) .main-bar .icon-btn{-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:11px;margin-inline-start:11px}.main-bar .menu-btn.icon-btn{margin:0 !important;-webkit-border-end:1.5px solid var(--bar-color-shade);border-inline-end:1.5px solid var(--bar-color-shade)}.main-bar .logo{height:36px;width:200px;min-width:200px}:host(:not(.threshold-1)) .main-bar .logo{height:30px}.main-bar .logo-link{-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:0;margin-inline-start:0;padding-inline:var(--bar-item-spacing);display:flex;align-items:center;border:none}.main-bar .nav-links{flex:0 0 auto;display:flex;justify-content:space-around}.main-bar .nav-links ul{display:flex;justify-content:space-around}.main-bar .nav-links ::slotted(nano-nav-item),.main-bar .nav-links nano-nav-item{--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;--margin:0 var(--bar-item-spacing)}.main-bar .nav-links--main{justify-content:flex-start;letter-spacing:1.5px;font-weight:600;font-stretch:condensed;text-transform:uppercase;font-size:1.065em;-webkit-margin-end:auto;margin-inline-end:auto}.main-bar .nav-links--main ::slotted(nano-nav-item){--color:var(--bar-text-color);--padding-end:3px;--padding-start:0}.main-bar .nav-links--sub{--color:var(--color, #e2e2e2);-webkit-margin-start:6px;margin-inline-start:6px;justify-content:flex-end}.main-bar .login-btn{display:inline-block;border-radius:4px;background-color:var(--login-button-bg);color:var(--login-button-text);padding:3px 10px;position:relative;inset-inline-start:auto;inset-block-end:auto;margin-inline:11px 0}.main-bar .measure-ele{min-width:1px;display:block;margin:0;padding:0}.sticker-trigger{background:var(--bar-background);width:100%;height:1px;z-index:20;position:relative}.sticker-trigger+.sticker-trigger{display:none}.gn-menu{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:-1;display:none;transition:z-index 0.01s ease 0.2s;height:100vh;width:100vw;overflow-y:auto}:host(.threshold-4) .gn-menu{position:absolute;width:calc(100vw - 20px)}.gn-menu.menu-full-screen{width:100vw !important}.gn-menu_wrap{max-width:92vw;width:335px;background:var(--menu-background);color:var(--menu-text-color);padding:calc(var(--bar-vertical-padding) + 1px) 0 0;box-shadow:0 0 36px 0 rgba(0, 0, 0, 0.8);position:relative;pointer-events:all;-webkit-margin-after:36px;margin-block-end:36px;opacity:0;outline:none;transition:transform 0.2s ease, opacity 0.2s ease}.gn-menu_wrap.has-promotion{padding:var(--menu-padding) 0 0}.gn-menu.open{z-index:var(--nano-layer-index-dropdown, 300);transition:z-index 0.01s ease}.gn-menu.open .gn-menu_wrap{opacity:1;transform:translate3d(0, 0, 0) !important;transition:transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s}.gn-menu_actions{-webkit-padding-end:calc(var(--menu-padding) / 2);padding-inline-end:calc(var(--menu-padding) / 2);display:flex;justify-content:space-between}.gn-menu_actions-counter{background:#d0021b;color:var(--menu-text-color);position:absolute;inset-block-end:4px;inset-inline:auto 0;font-size:9px;height:14px;line-height:14px;width:auto;min-width:14px;border-radius:50%;box-sizing:border-box;text-align:center;text-indent:0}.gn-menu .content-wrap{position:relative;overflow:hidden;transition:0.2s ease min-height;min-height:190px}.gn-menu .content--sub{padding:var(--menu-padding) 0 var(--menu-padding) 7px}.gn-menu .menu-btn{-webkit-margin-end:auto;margin-inline-end:auto}.gn-menu .nav-links{display:flex;flex-wrap:wrap}.gn-menu .nav-links ::slotted(nano-nav-item),.gn-menu .nav-links nano-nav-item{--icon-size:14px;--display:inline-block;--secondary-bg-color:#001a21;--padding-top:10px;--padding-bottom:10px;--padding-end:calc(var(--menu-padding) * 2);--padding-start:calc(var(--menu-padding) + 3px);--color:var(--menu-text-color);--color-hover:var(--menu-title-text);--bg-color-hover:transparent;--bg-color-focus:#002530;--focus-outline:none;width:100%}.gn-menu .nav-links .user-nav{--bg-color:var(--menu-user-panel-bg);--padding-top:9px;--padding-bottom:9px;font-weight:bold;margin:5px 0 0}.gn-menu .nav-links .user-nav ::slotted(nano-nav-item),.gn-menu .nav-links .user-nav nano-nav-item{font-weight:500;--bg-color:transparent}.gn-menu .nav-links .user-nav .content{padding:0;background-color:var(--menu-user-panel-bg)}.gn-menu .nav-links .user-nav .content--sub{padding-inline:var(--menu-padding)}.gn-menu .nav-links .user-nav .back-btn{-webkit-padding-start:var(--menu-padding);padding-inline-start:var(--menu-padding)}.gn-menu .nav-links_title{margin:0 var(--menu-padding) 4px;-webkit-border-after:1px solid var(--menu-hint-color);border-block-end:1px solid var(--menu-hint-color);-webkit-padding-after:8px;padding-block-end:8px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:700}.gn-menu .nav-links_title--sites{-webkit-border-after:none;border-block-end:none}.gn-menu .nav-links-wrap{margin:18px 0}.gn-menu .nav-links-wrap:last-child{-webkit-margin-after:0;margin-block-end:0}.gn-menu .nav-links .back-btn{-webkit-border-before:1px solid var(--menu-hint-color);border-block-start:1px solid var(--menu-hint-color);-webkit-border-after:1px solid var(--menu-hint-color);border-block-end:1px solid var(--menu-hint-color);display:flex;align-items:center;padding:10px 11px 10px 0;width:100%;font-size:12px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:700;cursor:pointer;font-stretch:expanded}.gn-menu .nav-links .back-btn:hover{color:var(--menu-text-color)}.gn-menu .nav-links .back-btn nano-icon{-webkit-margin-end:10px;margin-inline-end:10px;font-size:12px;color:var(--menu-icon-color)}.gn-menu .nav-links--sub{display:flex;flex-wrap:wrap}.gn-menu .nav-links--sub ::slotted(nano-nav-item),.gn-menu .nav-links--sub nano-nav-item{--border-bottom:none;--padding-end:var(--menu-padding);--padding-start:var(--menu-padding);--padding-top:8px;--padding-bottom:8px;margin:0;width:50%;line-height:1.8}.gn-menu .nav-links--sites ::slotted(nano-nav-item),.gn-menu .nav-links--sites nano-nav-item{width:100%}.gn-menu .nav-links .content{padding:8px var(--menu-padding)}.gn-menu .login-btn{padding-inline:7px var(--menu-padding);padding-block:var(--menu-padding)}.gn-menu .login-btn nano-icon{-webkit-margin-start:10px;margin-inline-start:10px}.gn-menu .logout-btn{justify-content:flex-end}.gn-menu .logout-btn a{padding:0 5px}.search-btn::before{content:\"\";background-color:#0c5a71;height:9px;inset-inline:0 5px;inset-block-end:-20px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}.search-btn--open::before{transform:translateZ(0) scaleX(1);opacity:0.7}.search-bar{height:0;overflow:hidden;transition:0.2s ease height;padding:0 var(--bar-item-spacing);outline:none;max-width:45em;-webkit-margin-start:auto;margin-inline-start:auto;}.search-bar .search-widget{margin:0;overflow:inherit;max-width:none;max-height:none;min-width:auto;-webkit-padding-end:0;padding-inline-end:0}.search-bar .search-widget .search-icon--search{display:none}.search-bar .search-widget .search-input{--input-border-width:2px 0 0 0;--input-bg-color:#f3f3f3;--nano-input-border-color:transparent;--nano-input-border-color--focus:var(--bar-color-shade);font-size:1.1875em}.search-bar .search-widget nano-select.search-input{--input-border-width:2px 3px 0 0;--input-bg-color:var(--bar-color-shade);--input-bg-color--focus:#f3f3f3;color:#f3f3f3}.search-bar .search-widget nano-select.search-input.has-focus{color:var(--bar-color-shade)}.search-bar .search-widget .select-input__arrow{font-size:0.75em}.search-bar .search-widget .select__mask.sc-nano-select{line-height:2.35em;min-height:2.35em;-webkit-padding-before:2px;padding-block-start:2px}.search-bar .search-inputs{padding:0;margin:0}.search-bar .search-autocomplete{inset-block-start:100%;width:100%}.search-widget{-webkit-padding-end:var(--bar-item-spacing);padding-inline-end:var(--bar-item-spacing);-webkit-margin-start:var(--bar-item-spacing);margin-inline-start:var(--bar-item-spacing);-webkit-margin-end:auto;margin-inline-end:auto;position:relative;flex:1 1 auto;max-width:500px;min-width:350px;max-height:36px;inset-block-start:-1px}.search-inputs{display:flex;margin:0}.search-inputs input[type=submit]{display:none}.search-autocomplete{position:absolute;inset-block-start:calc(100% + 15px);width:calc(100% - var(--bar-item-spacing));inset-inline-start:0;background:white;border:2px solid var(--bar-color-tint);border-radius:0 0 5px 5px;color:#4a4a4a;-webkit-padding-before:calc(var(--bar-vertical-padding) / 2);padding-block-start:calc(var(--bar-vertical-padding) / 2);-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:1px;padding-block-end:1px;-webkit-padding-start:0;padding-inline-start:0;z-index:1}.search-autocomplete-hit{padding-block:calc(var(--bar-vertical-padding) / 4);padding-inline:var(--bar-item-spacing);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:start;line-height:1.5;cursor:pointer}.search-autocomplete-hit-scope{color:#a7b0b3;font-weight:600}.search-autocomplete-hit:hover,.search-autocomplete-hit:focus-visible{background-color:#e4e6e8}.search-autocomplete-hit:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.search-autocomplete-hit:focus{outline:none}.search-autocomplete-hit .search__highlight,.search-autocomplete-hit em{font-weight:bold;font-style:normal}.search-autocomplete-hit--no-result:hover,.search-autocomplete-hit--no-result:focus{background:none !important}.search-autocomplete-foot{margin:7px 0 0}.search-autocomplete-submit{background:none;border:none;align-self:normal;padding:9px var(--bar-item-spacing) !important;cursor:pointer;display:flex;align-items:center;color:#007495;justify-content:flex-end;width:100%;text-decoration:underline;-webkit-border-before:1px solid #e8eaea;border-block-start:1px solid #e8eaea}.search-autocomplete-submit:hover,.search-autocomplete-submit:focus{background-color:#e4e6e8}nano-select.search-input{--input-border-width:0 0 2px 0;--input-text-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--padding-end:var(--bar-item-spacing);--nano-input-border-color--focus:black;font-stretch:condensed;font-weight:600;letter-spacing:1.5px;font-size:1.2em;flex:0 1 auto;width:auto;display:flex;align-items:center;flex-direction:column;position:relative;inset-inline-start:1px;text-transform:uppercase}:host(:not(.ready)) nano-select.search-input{overflow:hidden;max-height:1em}nano-select.search-input .down-arrow{font-size:0.65em}nano-input.search-input{--clear-btn-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--input-border-width:0 0 2px 0;--placeholder-color:var(--bar-text-color);--input-text-color:var(--bar-text-color);--padding-start:21px;--nano-input-border-color--focus:black;font-size:1.2em;width:206px;display:flex;align-items:center;flex-direction:column;flex:1}:host([dir=rtl]) nano-input.search-input{--input-border-radius:5px 0 0 5px}:host(:not(.ready)) nano-input.search-input{overflow:hidden;max-height:1em}nano-input.search-input .search-icon{background:none;padding:0 8px;display:none;font-size:0.9em}nano-input.search-input .search-icon--show{display:flex !important}nano-input.search-input .search-icon--loader{animation:spin 1s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}nano-input.search-input .search-icon nano-icon{height:1.4em}.user-profile{display:flex;justify-content:space-between;align-items:center;padding:2em;background-color:var(--menu-user-profile-bg)}.user-profile .left{display:flex;align-items:center}.user-profile .avatar-container{position:relative}.user-profile .avatar-container img.avatar{border-radius:50px}.user-profile .avatar-container img.logo-small{position:absolute;height:30px;width:30px;inset-block-end:0;inset-inline-end:0;background-color:#27586e;border-radius:10px;padding:5px}.user-profile .user-details{display:flex;flex-direction:column;margin:0 1.25em;color:white}.user-profile .user-details .name{font-size:1.25em}.user-profile .user-details .bio{margin:0.5em 0}.user-profile .user-details .kudos span{background-color:#81c7eb;color:#415958;padding:0.25em;border-radius:0.5em;font-weight:bold}.user-profile .chevron-right{font-size:1.5em;color:white}.user-links{position:relative}.user-links .icon-btn{-webkit-padding-end:0;padding-inline-end:0;font-weight:500;padding:7px}.user-links .icon-btn nano-icon{-webkit-margin-start:5px;margin-inline-start:5px;width:16px;height:16px;transform-origin:center;transition:transform 0.2s ease, color 0.2s ease}.user-links .icon-btn.open nano-icon{transform:rotate(180deg);color:#007495}.user-links-panel{display:none;position:absolute;border-radius:4px 0 4px 4px;box-shadow:0 1px 5px 0 rgba(0, 0, 0, 0.4);background-color:#568c9d;opacity:0;transform:translate3d(0, 30px, 0);transition:transform 0.2s ease, opacity 0.2s ease;inset-inline-end:0;min-width:318px;z-index:2}.user-links-panel:focus{outline:none}.user-links-panel.show{opacity:1;transform:translate3d(0, calc(var(--padding) + 1px), 0)}.user-links-panel-content{padding:0 18px;display:flex;flex-direction:column;color:white}.user-links-panel-content a{padding:11px 0;-webkit-border-after:#669dac 1px solid;border-block-end:#669dac 1px solid}.user-links-panel-content a:hover,.user-links-panel-content a:focus{color:#455556}.user-links-panel-content a:last-child{-webkit-border-after:none;border-block-end:none}.user-links-panel-foot{background-color:#aac5cd;border-radius:0 0 4px 4px;padding:var(--padding);color:#455556;display:flex;align-items:center;font-weight:500;justify-content:space-between}.user-links-panel-foot a:hover{text-decoration:underline}.user-links-panel .user-profile{background-color:var(--bar-user-panel-bg)}:host{--bar-vertical-padding:21px;--bar-item-spacing:13px;--bar-background:white;--bar-text-color:#196c82;--bar-color-shade:rgb(12 90 113);--bar-color-tint:rgb(19 89 111);--bar-color-focus:#99a3a6;--bar-user-panel-bg:#016d86;--bar-dropdown-bg:#196c82;--bar-dropdown-text:white;--menu-background:#001a21;--menu-text-color:white;--menu-user-profile-bg:#001a21;--menu-user-panel-bg:#193037;--menu-padding:12px;--menu-hint-color:#33484d;--menu-title-text:#90c6e7;--menu-icon-color:white;--login-button-bg:#17bb75;--login-button-text:white;--padding:12px;--padding-top:var(--padding);--padding-end:var(--padding);--padding-bottom:var(--padding);--padding-start:var(--padding);display:flex;flex-direction:column;position:relative;line-height:1.5;height:100%;font-size:0.9375em;font-size:clamp(0.77rem, 1vw, 0.9rem)}:host input,:host select,:host button{font-family:inherit;-webkit-appearance:none;appearance:none;font-size:inherit}:host a:focus,:host button:focus{outline:none}:host a:focus-visible,:host button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";
53
53
 
54
54
  // the 'breakpoints' where different segments of content go into or out-of the burger / overflow menu
55
55
  const THRESHOLDBREAKS = {
@@ -502,7 +502,7 @@ const GlobalNav = class {
502
502
  const config = { timeout: 5000 };
503
503
  try {
504
504
  if (this.env === 'local') {
505
- this.myAccData = (await import('./local-my-account-964c8ad7.js'));
505
+ this.myAccData = (await import('./local-my-account-6662da72.js'));
506
506
  }
507
507
  else {
508
508
  this.myAccData = await clientFetch(url + 'nav_bar_data.json', config);
@@ -1094,6 +1094,7 @@ const GlobalNav = class {
1094
1094
  }
1095
1095
  });
1096
1096
  }
1097
+ static get assetsDirs() { return ["assets"]; }
1097
1098
  get el() { return getElement(this); }
1098
1099
  static get watchers() { return {
1099
1100
  "myAccountData": ["handleMyAccountData"],