@nanoporetech-digital/components 2.0.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/nano-datalist_3.cjs.entry.js +31 -17
  3. package/dist/cjs/nano-datalist_3.cjs.entry.js.map +1 -1
  4. package/dist/cjs/nano-nav-item_2.cjs.entry.js +4 -1
  5. package/dist/cjs/nano-nav-item_2.cjs.entry.js.map +1 -1
  6. package/dist/collection/components/accordion/accordion.js +1 -1
  7. package/dist/collection/components/alert/alert.js +1 -1
  8. package/dist/collection/components/algolia/algolia-filter.js +2 -2
  9. package/dist/collection/components/algolia/algolia-input.js +5 -5
  10. package/dist/collection/components/algolia/algolia-results.js +1 -1
  11. package/dist/collection/components/algolia/algolia.js +6 -6
  12. package/dist/collection/components/checkbox/checkbox-group.js +2 -2
  13. package/dist/collection/components/checkbox/checkbox.js +3 -3
  14. package/dist/collection/components/datalist/datalist.js +33 -19
  15. package/dist/collection/components/datalist/datalist.js.map +1 -1
  16. package/dist/collection/components/date-input/date-input.js +7 -7
  17. package/dist/collection/components/date-picker/date-picker.js +5 -5
  18. package/dist/collection/components/details/details.js +1 -1
  19. package/dist/collection/components/dialog/dialog.js +1 -1
  20. package/dist/collection/components/file-upload/file-upload.js +4 -4
  21. package/dist/collection/components/global-nav/global-nav.js +4 -4
  22. package/dist/collection/components/grid/grid-item.js +1 -1
  23. package/dist/collection/components/icon/icon.js +1 -1
  24. package/dist/collection/components/input/input.js +5 -5
  25. package/dist/collection/components/nav-item/nav-item.js +4 -4
  26. package/dist/collection/components/range/range.js +4 -4
  27. package/dist/collection/components/resize-observe/resize-observe.js +1 -1
  28. package/dist/collection/components/select/select.js +11 -8
  29. package/dist/collection/components/select/select.js.map +1 -1
  30. package/dist/collection/components/slides/slides.js +7 -7
  31. package/dist/collection/components/tabs/tab-group.js +2 -2
  32. package/dist/components/datalist.js +32 -18
  33. package/dist/components/datalist.js.map +1 -1
  34. package/dist/components/select.js +4 -1
  35. package/dist/components/select.js.map +1 -1
  36. package/dist/custom-elements/index.js +35 -18
  37. package/dist/custom-elements/index.js.map +1 -1
  38. package/dist/esm/nano-datalist_3.entry.js +32 -18
  39. package/dist/esm/nano-datalist_3.entry.js.map +1 -1
  40. package/dist/esm/nano-nav-item_2.entry.js +4 -1
  41. package/dist/esm/nano-nav-item_2.entry.js.map +1 -1
  42. package/dist/esm-es5/nano-datalist_3.entry.js +1 -1
  43. package/dist/esm-es5/nano-datalist_3.entry.js.map +1 -1
  44. package/dist/esm-es5/nano-nav-item_2.entry.js +1 -1
  45. package/dist/esm-es5/nano-nav-item_2.entry.js.map +1 -1
  46. package/dist/nano-components/nano-components.css +1 -1
  47. package/dist/nano-components/nano-components.esm.js +1 -1
  48. package/dist/nano-components/p-096682d9.system.js +1 -1
  49. package/dist/nano-components/p-5a476bba.system.entry.js +5 -0
  50. package/dist/nano-components/p-5a476bba.system.entry.js.map +1 -0
  51. package/dist/nano-components/p-71c26ace.entry.js +5 -0
  52. package/dist/nano-components/p-71c26ace.entry.js.map +1 -0
  53. package/dist/nano-components/{p-239cc7ff.system.entry.js → p-b19e0775.system.entry.js} +2 -2
  54. package/dist/nano-components/p-b19e0775.system.entry.js.map +1 -0
  55. package/dist/nano-components/{p-d857f3ed.entry.js → p-c954c040.entry.js} +2 -2
  56. package/dist/nano-components/p-c954c040.entry.js.map +1 -0
  57. package/dist/types/components/datalist/datalist.d.ts +1 -1
  58. package/docs-json.json +9 -9
  59. package/package.json +2 -2
  60. package/dist/nano-components/p-14402794.entry.js +0 -5
  61. package/dist/nano-components/p-14402794.entry.js.map +0 -1
  62. package/dist/nano-components/p-239cc7ff.system.entry.js.map +0 -1
  63. package/dist/nano-components/p-d857f3ed.entry.js.map +0 -1
  64. package/dist/nano-components/p-f84998c9.system.entry.js +0 -5
  65. package/dist/nano-components/p-f84998c9.system.entry.js.map +0 -1
package/dist/nano-components/{p-d857f3ed.entry.js → p-c954c040.entry.js} RENAMED
@@ -1,5 +1,5 @@
1
1
  /*!
2
2
  * Web Components for Nanopore digital Web Apps
3
3
  */
4
- import{r as t,c as n,h as e,e as i,g as a}from"./p-ab5813a7.js";import{d as s,r as o}from"./p-289aa03f.js";import{b as r,g as l,c as d}from"./p-b619500f.js";import{F as c,a as h}from"./p-672e5547.js";import{a as p}from"./p-1da5f8df.js";import{c as g}from"./p-d99437a6.js";import{g as u}from"./p-74a7fc4f.js";const b=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin)}:host ::slotted(*),:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size: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;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host ::slotted(nano-icon[slot=icon-start]){padding-right:var(--padding-end)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host ::slotted(nano-icon[slot=icon-start]){padding-right:unset;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host ::slotted(nano-icon[slot=icon-end]){padding-left:var(--padding-start)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host ::slotted(nano-icon[slot=icon-end]){padding-left:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);}}:host .link::slotted(nano-icon[slot=icon-start]),:host .link ::slotted(nano-icon[slot=icon-start]){padding-left:var(--padding-start);padding-right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .link::slotted(nano-icon[slot=icon-start]),:host .link ::slotted(nano-icon[slot=icon-start]){padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}}:host .link::slotted(nano-icon[slot=icon-end]),:host .link ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:var(--padding-end)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .link::slotted(nano-icon[slot=icon-end]),:host .link ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host .link,:host button,:host a{border-bottom:var(--border-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host .secondary-menu{display:none}:host ::slotted(a:hover),:host ::slotted(button:hover),:host .link:hover,:host button:hover,:host a:hover{text-decoration:inherit !important}:host button:focus,:host a:focus{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, none)}:host ::slotted(a:focus),:host ::slotted(button:focus){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:none}.nav-item.selected .link,.nav-item.selected button,.nav-item.selected a{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}.nav-item.secondary-open button,.nav-item.secondary-open a{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}.nav-item.disabled{opacity:0.6}.nav-item.disabled button,.nav-item.disabled a{color:var(--color-disabled, var(--color)) !important}.nav-item:not(.nano-menu) ::slotted(a:hover),.nav-item:not(.nano-menu) ::slotted(button:hover),.nav-item:not(.nano-menu) .link:hover,.nav-item:not(.nano-menu) button:hover,.nav-item:not(.nano-menu) a:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}:host(.has-focus) .link{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}:host(.nano-global-nav-menu) a,:host(.nano-global-nav-menu) a:visited,:host(.nano-global-nav-menu) button,:host(.nano-global-nav-menu) .link,:host(.nano-menu) a,:host(.nano-menu) a:visited,:host(.nano-menu) button,:host(.nano-menu) .link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:"currentColor";text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;width:100%}:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{padding-left:0;padding-right:var(--padding-end);-webkit-box-flex:1;-ms-flex:1;flex:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){-webkit-box-flex:1;-ms-flex:1;flex:1}:host(.nano-global-nav-menu) ::slotted(a:focus),:host(.nano-global-nav-menu) ::slotted(button:focus),:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){-webkit-box-shadow:none;box-shadow:none}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, "currentColor");min-height:100%;top:0;left:0;width:100%;z-index:1;opacity:0;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, transform 0.3s ease;transition:opacity 0.2s ease, transform 0.3s ease, -webkit-transform 0.3s ease;background-color:var(--secondary-bg-color, white);-webkit-transform:translateX(100%);transform:translateX(100%)}:host(.nano-global-nav-menu) .secondary-menu:focus,:host(.nano-menu) .secondary-menu:focus{outline:none}:host(.nano-global-nav-menu) .secondary-menu.open,:host(.nano-menu) .secondary-menu.open{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:opacity 0.3s ease, -webkit-transform 0.2s ease;transition:opacity 0.3s ease, -webkit-transform 0.2s ease;transition:opacity 0.3s ease, transform 0.2s ease;transition:opacity 0.3s ease, transform 0.2s ease, -webkit-transform 0.2s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-size:10px;-webkit-box-flex:0;-ms-flex:0 0 10px;flex:0 0 10px;pointer-events:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end]){padding:0}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,:host(.nano-menu[dir=rtl]) .secondary-menu{left:auto;right:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{-webkit-transform:translateX(0);transform:translateX(0)}:host(.nano-menu) .secondary-menu-content{padding-left:var(--secondary-padding-start);padding-right:var(--secondary-padding-end);padding-top:var(--secondary-padding-top);padding-bottom:var(--secondary-padding-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu) .secondary-menu-content{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--secondary-padding-start);padding-inline-start:var(--secondary-padding-start);-webkit-padding-end:var(--secondary-padding-end);padding-inline-end:var(--secondary-padding-end)}}:host(.nano-global-nav-bar.legacy){margin:0 11px}:host(.nano-global-nav-bar.legacy) ::slotted(a){padding-left:6px;padding-right:6px;padding-top:7px;padding-bottom:7px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-bar.legacy) ::slotted(a){padding-left:unset;padding-right:unset;-webkit-padding-start:6px;padding-inline-start:6px;-webkit-padding-end:6px;padding-inline-end:6px}}:host(.nano-global-nav-menu.legacy) ::slotted(a){padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu.legacy) ::slotted(a){padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-left:var(--padding-end);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-left:unset;margin-right:unset;-webkit-margin-start:var(--padding-end);margin-inline-start:var(--padding-end);-webkit-margin-end:0;margin-inline-end:0}}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-left:0;margin-right:var(--padding-start);margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--padding-start);margin-inline-end:var(--padding-start)}}:host(.nano-global-nav-bar.has-secondary) button{position:relative}:host(.nano-global-nav-bar.has-secondary) button::before{content:"";background:#86bee2;height:3px;left:5px;bottom:-14px;right:5px;position:absolute;-webkit-transform:translateZ(0) scaleX(0);transform:translateZ(0) scaleX(0);-webkit-transform-origin:0;transform-origin:0;-webkit-transition:0.2s ease transform;transition:0.2s ease transform}:host(.nano-global-nav-bar.has-secondary) .selected button::before,:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{-webkit-transform:translateZ(0) scaleX(1);transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.5}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease;-webkit-transform:translateY(-100%) translateZ(0);transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;-webkit-box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);left:0;right:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{-webkit-transform:translateY(12px) translateZ(0);transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-left:var(--padding-start);padding-right:0;padding-top:calc(var(--padding-top) / 2);padding-bottom:calc(var(--padding-bottom) / 2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:currentColor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;width:100%}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}}:host(.nano-menu-drawer) .text{padding-left:0;padding-right:var(--padding-end);text-align:left;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;min-width:130px;width:130px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) .text{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-size:var(--icon-size);width:var(--icon-size);-webkit-box-flex:0;-ms-flex:0 0 var(--icon-size);flex:0 0 var(--icon-size)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-size:10px;-webkit-box-flex:0;-ms-flex:0 0 20px;flex:0 0 20px;min-width:20px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);height:100vh;top:0;right:0;left:auto;bottom:0;-webkit-transform:translateX(0);transform:translateX(0);z-index:-1;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:transform 0.3s ease, opacity 0.2s ease;transition:transform 0.3s ease, opacity 0.2s ease, -webkit-transform 0.3s ease;overflow-y:auto;width:var(--secondary-width, 400px);max-width:62vw;opacity:1;padding-left:var(--secondary-padding-start, var(--padding-start));padding-right:var(--secondary-padding-end, var(--padding-end));padding-top:var(--secondary-padding-top, var(--padding-top));padding-bottom:var(--secondary-padding-bottom, var(--padding-bottom))}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) .secondary-menu{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--secondary-padding-start, var(--padding-start));padding-inline-start:var(--secondary-padding-start, var(--padding-start));-webkit-padding-end:var(--secondary-padding-end, var(--padding-end));padding-inline-end:var(--secondary-padding-end, var(--padding-end))}}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{-webkit-transform:translateX(100%);transform:translateX(100%)}:host(.nano-menu-drawer.legacy) .link,:host(.nano-menu-drawer.legacy) a,:host(.nano-menu-drawer.legacy) button{width:auto}:host(.nano-menu-drawer.legacy) ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:calc(var(--padding-end) * 2);padding-top:0;padding-bottom:0;font-size:10px;-webkit-box-flex:0;-ms-flex:0 0 20px;flex:0 0 20px;min-width:20px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer.legacy) ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:calc(var(--padding-end) * 2);padding-inline-end:calc(var(--padding-end) * 2)}}:host(.nano-menu-drawer[dir=rtl]) .text{text-align:right}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{right:auto;left:0;-webkit-transform:translateX(0%);transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:1}';let m=class{constructor(e){t(this,e);this.nanoClose=n(this,"nanoClose",7);this.nanoOpen=n(this,"nanoOpen",7);this.nanoOpening=n(this,"nanoOpening",7);this.nanoClosing=n(this,"nanoClosing",7);this.nanoBlur=n(this,"nanoBlur",7);this.nanoFocus=n(this,"nanoFocus",7);this.hasSecondarySlot=false;this.hasAnchorEle=false;this.didBlur=false;this.animating=false;this.didOpen=false;this.isInGlobalNav=false;this.isInMenuDrawer=false;this.isInMenu=false;this.isLegacy=!document.head.attachShadow;this.hasFocus=false;this.href=null;this.target="_self";this.disabled=false;this.open=false;this.selected=false;this.secondaryActiveWidth=0;this.secondaryFallback=()=>{};this.closeOnBlur=true;this.closeSecondary=async()=>{this.open=false;if(!this.hasSecondarySlot||!this.didOpen)return;this.nanoClosing.emit({secondaryMenu:this.secondaryDiv});let t=await s(this.secondaryDiv,"open",false);this.didOpen=t!=="hidden"};this.openSecondary=async()=>{if(window.innerWidth<this.secondaryActiveWidth){this.secondaryFallback.call(this);return}this.open=true;if(!this.hasSecondarySlot||this.didOpen)return;this.nanoOpening.emit({secondaryMenu:this.secondaryDiv});let t=await s(this.secondaryDiv,"open",true);this.didOpen=t==="shown"};this.toggleSecondary=()=>{if(!this.hasSecondarySlot)return;if(this.didOpen)this.closeSecondary();else this.openSecondary()};this.handleFocus=()=>{this.hasFocus=true;if(this.href&&!this.animating&&this.hasSecondarySlot)this.openSecondary();this.nanoFocus.emit()};this.handleHostBlur=()=>{if(this.animating)return;this.el.removeAttribute("tabindex");this.hasFocus=false;this.nanoBlur.emit()};this.handleHostClick=t=>{if(!this.hasAnchorEle)return;let n=t.target.closest("a, button");if(!n)this.btn.click()};this.handleMouseEnter=async()=>{if(!this.href||this.animating||!this.hasSecondarySlot||this.globalNavEle&&!this.globalNavEle.classList.contains("ready"))return;let t=0;if(r(this.el,".secondary-open.has-secondary").length)t=300;clearTimeout(this.waitHide);this.fromHover=true;this.animating=true;this.waitShow=window.setTimeout((async()=>await this.openSecondary()),t);this.animating=false};this.handleMouseLeave=()=>{if(!this.href)return;clearTimeout(this.waitShow);this.fromHover=true;this.animating=true;this.waitHide=window.setTimeout((async()=>await this.closeSecondary()),300);this.animating=false};this.handleClick=()=>{var t;this.fromHover=false;if(this.hasSecondarySlot)this.toggleSecondary();else(t=this.el.querySelector("*"))===null||t===void 0?void 0:t.click()};this.blur=t=>{if(!this.didOpen||this.animating)return;if(!this.closeOnBlur)return;if(t&&t.relatedTarget){if(t.relatedTarget===this.el||t.relatedTarget===this.btn||this.foundThisNavEle(t.relatedTarget)){this.secondaryDiv.focus({preventScroll:true});return}}this.btn.removeEventListener("focusout",this.blur);this.secondaryDiv.removeEventListener("focusout",this.blur);window.removeEventListener("blur",this.blur);this.didBlur=true;this.open=false;if(!t.relatedTarget)setTimeout((()=>{this.el.focus({preventScroll:true})}),50)}}async setFocus(){if(!this.btn)return;this.btn.focus()}openChange(){this.open?this.openSecondary():this.closeSecondary()}didOpenChange(){if(!this.hasSecondarySlot)return;if(!this.didOpen){if(!this.fromHover){this.btn.removeEventListener("focusout",this.blur);this.secondaryDiv.removeEventListener("focusout",this.blur)}setTimeout((()=>{if(!this.fromHover&&!this.didBlur)this.btn.focus({preventScroll:true});this.nanoClose.emit({secondaryMenu:this.secondaryDiv})}),50)}else{this.didBlur=false;if(!this.fromHover){const t=new window.IntersectionObserver((n=>{if(n[0].boundingClientRect.top<0){this.secondaryDiv.scrollIntoView({behavior:"smooth"})}t.disconnect()}),{threshold:1});t.observe(this.secondaryDiv);this.secondaryDiv.focus({preventScroll:true});this.btn.addEventListener("focusout",this.blur);this.secondaryDiv.addEventListener("focusout",this.blur);window.addEventListener("blur",this.blur);this.el.tabIndex=-1;this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}}}foundThisNavEle(t){let n=t.closest("nano-nav-item");n=n===t?t.parentElement.closest("nano-nav-item"):n;if(!n)return false;if(n===this.el)return true;return this.foundThisNavEle(n)}componentWillLoad(){let t=this.el.querySelector('[slot="secondary"]');this.hasSecondarySlot=!!t;let n=l(this.el,"a, button")[0];this.hasAnchorEle=!!n;if(n){this.href=n.href?n.href:null;this.btn=n;if(this.hasSecondarySlot)this.btn.addEventListener("click",this.toggleSecondary);this.btn.addEventListener("focus",this.handleFocus);this.btn.addEventListener("blur",this.handleHostBlur)}}connectedCallback(){this.isInGlobalNav=false;this.isInMenuDrawer=false;this.globalNavEle=this.el.closest("nano-global-nav");this.isInMenuDrawer=!!this.el.closest("nano-menu-drawer");this.isInMenu=!!this.el.closest("nano-menu");this.isInGlobalNav=this.el.parentElement===this.globalNavEle||!!this.el.closest(".global-nav")}render(){return e(i,{class:{"has-secondary":this.hasSecondarySlot,"secondary-open":this.open,selected:this.selected,"has-focus":this.hasFocus,disabled:this.disabled,"nano-global-nav":this.isInGlobalNav,"nano-menu-drawer":this.isInMenuDrawer,"nano-menu":this.isInMenu,legacy:this.isLegacy},onBlur:this.handleHostBlur,dir:this.el.ownerDocument.dir==="rtl"?"rtl":null,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onClick:this.handleHostClick,role:"menuitem"},e("div",{class:{"nav-item":true,"secondary-open":this.open,selected:this.selected}},this.href&&!this.hasAnchorEle&&!this.disabled&&e("a",{target:this.target,ref:t=>this.btn=t,href:this.href,onFocus:this.handleFocus},e("slot",{name:"icon-start"}),e("span",{class:"text"},e("slot",null)),e("slot",{name:"icon-end"})),(!this.hasAnchorEle&&!this.href||this.disabled)&&e("button",{ref:t=>this.btn=t,onClick:this.handleClick,onFocus:this.handleFocus,disabled:this.disabled},e("slot",{name:"icon-start"}),e("span",{class:"text"},e("slot",null)),e("slot",{name:"icon-end"})),this.hasAnchorEle&&!this.disabled&&e("div",{class:"link"},e("slot",{name:"icon-start"}),e("slot",null),e("slot",{name:"icon-end"})),this.hasSecondarySlot&&!this.disabled&&e("div",{class:"secondary-menu",ref:t=>this.secondaryDiv=t,tabindex:"-1"},e("div",{class:"secondary-menu-content"},e("slot",{name:"secondary"})),e("div",{class:"secondary-menu-mask",onClick:this.closeSecondary}))))}get el(){return a(this)}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};m.style=b;const f='.sc-nano-select-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-select,*.sc-nano-select::before,*.sc-nano-select::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-select{display:none !important}label.sc-nano-select,.more.sc-nano-select,.error.sc-nano-select,.helper.sc-nano-select{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-select,.more.visually-hide.sc-nano-select,.error.visually-hide.sc-nano-select,.helper.visually-hide.sc-nano-select{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.placeholder-as-label.sc-nano-select{padding-left:var(--padding-start);padding-right:0;padding-top:0;padding-bottom:0;color:var(--label-color);position:absolute;font-size:1.4em;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:top left;transform-origin:top left;top:50%;-webkit-transition:0.125s ease-in;transition:0.125s ease-in;opacity:0.7}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.placeholder-as-label.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}}.is-invalid.sc-nano-select-h .placeholder-as-label.sc-nano-select{color:var(--invalid-msg-color)}.has-value.sc-nano-select-h .placeholder-as-label.sc-nano-select{-webkit-transform:translateY(-120%);transform:translateY(-120%);font-size:0.9em}.textarea.sc-nano-select .placeholder-as-label.sc-nano-select{top:50%}.has-focus.sc-nano-select-h .textarea.sc-nano-select .placeholder-as-label.sc-nano-select{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.has-value.sc-nano-select-h .textarea.sc-nano-select .placeholder-as-label.sc-nano-select{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.label.sc-nano-select{color:var(--label-color);font-size:var(--label-font-size);padding-bottom:var(--padding-bottom);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex}.label.sc-nano-select .label-placeholder.sc-nano-select{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.label.sc-nano-select .placeholder.sc-nano-select{margin-left:0;margin-right:5px;margin-top:0;margin-bottom:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.label.sc-nano-select .placeholder.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}.label.sc-nano-select .charcount.sc-nano-select{margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0;font-size:0.9em;opacity:0.5}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.label.sc-nano-select .charcount.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}.has-value.sc-nano-select-h .label.sc-nano-select .placeholder.sc-nano-select{opacity:0.5}.has-focus.sc-nano-select-h .label.sc-nano-select{color:var(--label-color--focus)}.is-invalid.sc-nano-select-h .label.sc-nano-select{color:var(--label-color--invalid)}.more.sc-nano-select{height:1em;margin-left:3px;margin-right:0;margin-top:4px;margin-bottom:var(--padding-bottom);position:relative}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.more.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:0;margin-inline-end:0}}.helper.sc-nano-select,.error.sc-nano-select{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.helper.sc-nano-select{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-select-h:not([show-inline-error=false]).is-invalid .helper.sc-nano-select{opacity:0}.error.sc-nano-select{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-select-h .error.sc-nano-select{opacity:1}.input.sc-nano-select{font-family:inherit;font-size: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;border-radius:var(--input-border-radius);width:100%;padding:0 !important;position:relative;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size)}.has-focus.sc-nano-select-h .input.sc-nano-select{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width)}.is-invalid.sc-nano-select-h .input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width)}.is-invalid.has-focus.sc-nano-select-h .input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width)}.native-input-wrap.sc-nano-select{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex:1;flex:1}.input-clear-icon.sc-nano-select,.end.sc-nano-select,.start.sc-nano-select,.value-end.sc-nano-select{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;--nano-icon-size:1.4em;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:auto}.has-float-label.sc-nano-select .start.sc-nano-select{display:none}.start.sc-nano-select-s>*,.start .sc-nano-select-s>*,.end.sc-nano-select-s>*,.end .sc-nano-select-s>*,.value-end.sc-nano-select-s>*,.value-end .sc-nano-select-s>*,.value-end.sc-nano-select *.sc-nano-select{--nano-icon-size:1.4em;font-size:1em;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.start.sc-nano-select-s>*,.start .sc-nano-select-s>*,.end.sc-nano-select-s>*,.end .sc-nano-select-s>*,.value-end.sc-nano-select-s>*,.value-end .sc-nano-select-s>*,.value-end.sc-nano-select *.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.sc-nano-select-h[disabled]:not([disabled=false]) .start.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .start .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .end .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .value-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .value-end .sc-nano-select-s>*,[disabled].sc-nano-select-h:not([disabled=false]) .value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.value-end.sc-nano-select-s>*,.value-end .sc-nano-select-s>*,.value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.input-clear-icon.sc-nano-select{color:var(--clear-btn-color);padding:0;opacity:0;width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.is-invalid.sc-nano-select-h .input-clear-icon.sc-nano-select{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-select-h .input-clear-icon.sc-nano-select{padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;opacity:1;width:auto}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.has-value.sc-nano-select-h .input-clear-icon.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.input-clear-icon.sc-nano-select:hover{color:var(--clear-btn-color--hover)}.sc-nano-select-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n --nano-color-base-rgb,\n var(--nano-color-primary-rgb, 0, 116, 149)\n );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--input-border-width-sh, var(--nano-input-border-width, 2px));--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #fac6c3);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, #fee8de);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, "currentColor");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #90c6e7);position:relative;width:100%;padding:0 !important;font-family:var(--nano-font-family, inherit);display:inline-block}.nano-color.sc-nano-select-h{--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--multi-input-value-bg:var(--nano-color-tint-rgb);--multi-input-value-border:var(--nano-color-shade);--multi-input-value-text-color:var(--nano-color-contrast);color:var(--nano-color-base)}nano-item.sc-nano-select-h:not(.item-label),nano-item:not(.item-label) .sc-nano-select-h{--padding-start:0}[disabled].sc-nano-select-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select{pointer-events:none !important}select.sc-nano-select{display:none}.native-input.sc-nano-select{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size: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;text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:2.5em;min-height:2.5em;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;overflow:hidden;cursor:default}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.native-input.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.native-input.sc-nano-select::-moz-selection{background:transparent}.native-input.sc-nano-select::selection{background:transparent}.native-input.sc-nano-select::-moz-selection{background:transparent}.native-input[disabled].sc-nano-select{opacity:0.4}.native-input.sc-nano-select::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.native-input.sc-nano-select:-webkit-autofill{background-color:transparent}.native-input.sc-nano-select::-webkit-search-decoration,.native-input.sc-nano-select::-webkit-search-cancel-button,.native-input.sc-nano-select::-webkit-search-results-button,.native-input.sc-nano-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.native-input.sc-nano-select:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input.sc-nano-select::-ms-clear,.native-input.sc-nano-select::-ms-reveal{display:none}.native-input.resizable.sc-nano-select{resize:vertical;overflow:auto}.textarea.sc-nano-select .native-input.sc-nano-select{line-height:1.5em;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);white-space:pre-wrap}.textarea.sc-nano-select .native-input.sc-nano-select::-webkit-input-placeholder{line-height:1.5em}.textarea.sc-nano-select .native-input.sc-nano-select::-moz-placeholder{line-height:1.5em}.textarea.sc-nano-select .native-input.sc-nano-select:-ms-input-placeholder{line-height:1.5em}.textarea.sc-nano-select .native-input.sc-nano-select::-ms-input-placeholder{line-height:1.5em}.textarea.sc-nano-select .native-input.sc-nano-select::placeholder{line-height:1.5em}.has-float-label.sc-nano-select .native-input.sc-nano-select{padding-top:1.4em}.has-float-label.textarea.sc-nano-select .native-input.sc-nano-select{padding-top:1.8em}.legacy.sc-nano-select .native-input.sc-nano-select{-webkit-box-sizing:content-box;box-sizing:content-box}.masked.sc-nano-select-h .native-input.sc-nano-select{opacity:0;position:absolute;left:0;top:0}.select-mask.sc-nano-select{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size: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;pointer-events:none;line-height:2.5em;min-height:2.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select-mask.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.multi-wrap.sc-nano-select{padding-left:0;padding-right:0;padding-top:0;padding-bottom:calc(var(--padding-bottom) / 2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%}.has-float-label.sc-nano-select-h .multi-wrap.sc-nano-select{padding-top:1.3em}.multi-input.sc-nano-select{font-family:inherit;font-size: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;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:calc(var(--padding-top) / 2);padding-bottom:0;min-width:50px;max-width:100%;max-height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;outline:none;display:inline-block;background:transparent;-webkit-box-flex:0;-ms-flex:0;flex:0;position:relative;min-height:calc(2.78em - var(--padding-top));-webkit-box-sizing:border-box;box-sizing:border-box}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-input.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.legacy.sc-nano-select-h .multi-input.sc-nano-select{-webkit-box-sizing:content-box;box-sizing:content-box}.multi-input.sc-nano-select:last-child{-webkit-box-flex:1;-ms-flex:1;flex:1}.multi-value.sc-nano-select{margin-left:4px;margin-right:0;margin-top:4px;margin-bottom:0;background:rgba(var(--multi-input-value-bg), 0.8);color:var(--multi-input-value-text-color);border:1px solid;border-color:var(--multi-input-value-border);padding:0.3em 0.5em;border-radius:3px;line-height:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--input-font-size);font-weight:600;letter-spacing:1px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-value.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:0;margin-inline-end:0}}.multi-value.sc-nano-select span.sc-nano-select{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1.4}.multi-value-remove.sc-nano-select{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;padding-left:0.5em;padding-right:0;padding-top:0;padding-bottom:0;color:inherit;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;top:0;font-size:1em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-value-remove.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:0.5em;padding-inline-start:0.5em;-webkit-padding-end:0;padding-inline-end:0}}.multi-value-remove.sc-nano-select nano-icon.sc-nano-select{--color:var(--multi-input-value-text-color)}.has-focus.has-multiple.sc-nano-select-h .placeholder-as-label.sc-nano-select{-webkit-transform:translateY(-120%);transform:translateY(-120%);font-size:0.9em}.has-focus.sc-nano-select-h select.sc-nano-select,.has-focus.sc-nano-select-h a.sc-nano-select,.has-focus.sc-nano-select-h button.sc-nano-select{pointer-events:auto}';let v=0;let w=class{constructor(e){t(this,e);this.nanoChange=n(this,"nanoChange",7);this.nanoBlur=n(this,"nanoBlur",7);this.nanoFocus=n(this,"nanoFocus",7);this.nanoDidLoad=n(this,"nanoDidLoad",7);this.nanoDidUnload=n(this,"nanoDidUnload",7);this.nanoSearchChange=n(this,"nanoSearchChange",7);this.nanoValidate=n(this,"nanoValidate",7);this.valueItems=[];this.selectId=`nano-select-${v++}`;this.rtl=false;this.onInit=true;this.isLegacy="registerElement"in document;this.currInsertIndex=-1;this.showErrorMsg=false;this.errorMessage="";this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.inputSearchVal="";this._invalid=false;this.autofocus=false;this.disabled=false;this.validateOn="submit";this.showInlineError=true;this.hideLabel=false;this.floatLabel=false;this.multiple=false;this.name=this.selectId+"-name";this.readonly=false;this.required=false;this.allowCustomValues=false;this._value=this.multiple?[]:"";this._options=[];this._eOptions=[];this.clearSelect=false;this.mask=false;this.debounce=0;this.dropDownConfig={};this.customValidate=()=>{this.nativeSelect.setCustomValidity("");if(this.required&&!this.valArray.length){this.nativeSelect.setCustomValidity("Please fill in this field.");return true}if(this.valArray.length&&!this.allowCustomValues&&!this.isValidValues()){this.nativeSelect.setCustomValidity("Please choose an item from this field.");return true}if(this.max&&this.valArray.length>this.max){this.nativeSelect.setCustomValidity(`Only up to ${this.max} values are allowed.`);return true}if(this.min&&this.valArray.length<this.min){this.nativeSelect.setCustomValidity(`You must select a minimum of ${this.min} values.`);return true}return false};this.showInlineValidation=t=>{if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this._invalid=false;this.showErrorMsg=false;this.errorMessage="";if(!this.nativeSelect.validity.valid){this.errorMessage=this.nativeSelect.validationMessage;this._invalid=true;this.showErrorMsg=true}this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:t})};this.handleInvalid=t=>{this._invalid=true;if(this.validateOn==="submit")this._invalid=this.showErrorMsg=this.customValidate();if(this.showInlineError)t.preventDefault();setTimeout((n=>this.showInlineValidation(t)),20)};this.setValue=t=>{t.preventDefault();if(!this.multiple){this.value=t.detail.value;this.inputCtrl.focus();return}if(this.value&&this.value.length&&this.value.includes(t.detail.value))return;if(this.max&&this.value.length===this.max)return;this.currInsertIndex++;this.value=[...this.value.slice(0,this.currInsertIndex),t.detail.value,...this.value.slice(this.currInsertIndex)];this.inputSearchVal=""};this.removeValue=t=>{if(!this.multiple||!this.value.length)return;if(!t)t=this.value[this.value.length-1];this.value=this.value.filter((n=>n!==t));this.currInsertIndex--;this.setFocus()};this.setOptions=()=>{if(!this.datalist||!this.datalist.activeOptions||!this.datalist.activeOptions.length)return;this._eOptions=this.datalist.activeOptions.map((t=>{const{value:n,selected:e,label:i,filterMeta:a}=t;return{value:n,selected:e,label:i,filterMeta:a}}))};this.handleDocumentKeyDown=t=>{if(!this.multiple||!this.hasFocus)return;if(!this.inputSearchVal){let n;switch(t.key){case"Backspace":if(this.inputCtrl.previousElementSibling)n=this.inputCtrl.previousElementSibling;else break;this.removeValue(n.dataset.value||null);break;case"Delete":if(this.inputCtrl.nextElementSibling)n=this.inputCtrl.nextElementSibling;else break;this.removeValue(n.dataset.value||null);break;case"ArrowLeft":case"ArrowRight":if(!this.value.length)break;if(t.key==="ArrowLeft"&&this.inputCtrl.previousSibling)this.currInsertIndex--;if(t.key==="ArrowRight"&&this.inputCtrl.nextSibling)this.currInsertIndex++;setTimeout((()=>{this.inputCtrl.focus()}),20);t.preventDefault();break}}};this.onBlur=()=>{this.hasFocus=false;setTimeout((()=>{if(this.validateOn==="dirty"&&!this.hasFocus)this.showInlineValidation()}),20);this.nanoBlur.emit();if(!this.allowCustomValues&&this.multiple)this.inputSearchVal=""};this.onFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.clearSelectValue=t=>{if(this.clearSelect&&!this.readonly&&!this.disabled&&t){t.preventDefault();t.stopPropagation()}if(this.multiple){this.value=[];this.currInsertIndex=-1}else this.value="";this.inputCtrl.value="";const n=new window.Event("change");this.inputCtrl.dispatchEvent(n)};this.onClick=()=>{this.setFocus()};this.onDragStart=t=>{let n=t.target;this.dragVal=n.dataset.value};this.onDragEnd=t=>{this.dragVal=null;t.preventDefault()};this.onDragLeave=t=>{let n=t.target;let e=n.dataset&&n.dataset.value?n.dataset.value:null;if(!e||this.dragVal===e||!this.value.includes(this.dragVal)){t.preventDefault();return}let i=this.value.indexOf(e);let a=this.value.indexOf(this.dragVal);let s=this.value;let o=s[i];s[i]=s[a];s[a]=o;this.value=[...s]};this.onMultiInput=t=>{this.inputSearchVal=t.target.value.trim();this.nanoSearchChange.emit({value:t.target.value.trim()})}}get selectWrap(){return this._selectWrap}set selectWrap(t){if(this._selectWrap===t)return;this._selectWrap=t;this.setDataListOpts()}get datalist(){return this._datalist}set datalist(t){if(this._datalist===t)return;this._datalist=t;this.setDataListOpts()}get invalid(){return this._invalid}get value(){return this._value}set value(t){if(typeof t==="string"){if(this.multiple)this._value=t.split(",");else this._value=t}else if(Array.isArray(t)){if(this.multiple)this._value=t;else this._value=t[0]}}get options(){if(this._options.length)return this._options;if(!this.datalist||!this.datalist.activeOptions)return[];return this._eOptions.map((t=>{const{value:n,selected:e,label:i,filterMeta:a}=t;return{value:n,selected:e,label:i,filterMeta:a}}))}set options(t){this._options=t.map((t=>{if(typeof t==="string")return{value:t,label:t};else return t}))}debounceChanged(){this.nanoSearchChange=p(this.nanoSearchChange,this.debounce)}shouldValidate(){if(this.onInit)return;if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}valueChanged(){if(this.onInit){if(this.multiple)this.currInsertIndex=this.value.length-1;return}setTimeout((t=>this.shouldValidate()),20);this.nanoChange.emit({value:this.value})}setDataListOpts(){if(!this.datalist||!this.selectWrap)return;const t=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig=Object.assign(Object.assign(Object.assign({},t),this.dropDownConfig),{tetherTo:this.selectWrap});this.datalist.input=this.inputCtrl}async reportValidity(t){if(t)this.showInlineValidation();return{isValid:!this.invalid,errorMessage:this.errorMessage}}async setFocus(){this.inputCtrl.focus();setTimeout((()=>this.inputCtrl.click()),50)}getSelectElement(){return Promise.resolve(this.nativeSelect)}async showError(t){if(this.nativeSelect){this.nativeSelect.setCustomValidity(t);this.showInlineValidation()}}get valArray(){return typeof this.value==="string"?this.value.length?[this.value]:[]:this.value}isValidValues(){return this.valArray.find((t=>this.options.find((n=>n.value===t))))}slotChangeObserver(){const t=this.mo=new MutationObserver((()=>this.processSlottedContent()));t.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]').length;this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');if(!!this.el.querySelector('select:not([class*="sc-nano-select"]) option')){console.warn("nesting `<option>` elements was removed in v2. Please update your code to use `<nano-option>` elements instead.",this.el)}if(!!this.el.querySelector('[slot="legacy"]')){console.warn("The `legacy` slot has been removed. Please update your code",this.el)}}getLabel(t){let n=this.options.find((n=>{var e;return!n.disabled&&((e=n.value)===null||e===void 0?void 0:e.length)&&n.value===t}));return n&&n.label?n.label:t}handleBlur(t){if(!this.hasFocus)return;const n=t;let e;o((()=>{if(n.key){if(n.key!=="Tab")return;e=u()}else e=t.target;if(d(this.el.tagName.toLowerCase(),e)!==this.el){this.onBlur()}}))}connectedCallback(){this.debounceChanged();this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}disconnectedCallback(){document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}));if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver();this.customValidate();this.setDataListOpts();o((()=>this.onInit=false))}componentWillLoad(){this.processSlottedContent()}render(){const t=this.selectId+"-lbl";const n=this.showInlineError||this.hasHelperSlot?this.selectId+"-moreId":"";this.rtl=this.el.ownerDocument.dir==="rtl";this.valueItems=[];const a=(({el:t,floatLabel:n,label:e,errorMessage:i,showInlineError:a,hasHelperSlot:s,hasLabelSlot:o,hideLabel:r,placeholder:l,rtl:d})=>({el:t,floatLabel:n,label:e,errorMessage:i,showInlineError:a,hasHelperSlot:s,hasLabelSlot:o,hideLabel:r,placeholder:l,rtl:d}))(this);const s=Object.assign(Object.assign({},a),{labelId:t,moreId:n,hasValue:!!this.value.length||!!this.inputSearchVal.length,controlId:this.selectId});const o=(({readonly:t,disabled:n})=>({readonly:t,disabled:n,clearControl:this.clearSelect}))(this);return e(i,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:Object.assign(Object.assign({},g(this.color)),{"has-value":!!this.value.length||!!this.inputSearchVal.length,"has-focus":this.hasFocus,"is-invalid":this.invalid,"has-label":this.label!==null&&!this.floatLabel,"has-float-label":this.label!==null&&this.floatLabel,rtl:this.rtl,"has-multiple":this.multiple,"has-clr-btn":this.clearSelect,masked:this.mask,legacy:this.isLegacy})},e(c,Object.assign({},s),e(h,Object.assign({},o,{onClearText:this.clearSelectValue,control:this.el,ref:t=>this.selectWrap=t,endValueSlot:e("slot",{name:"down-arrow"},e("nano-icon",{slot:"value-end",name:"light/chevron-down"}))}),this.multiple&&e("div",{class:"multi-wrap"},this.multipleValues(t,n)),!this.multiple&&[this.mask&&e("div",{class:"select-mask"},this.getLabel(this.value)),e("input",{id:this.selectId,class:"native-input",ref:t=>this.inputCtrl=t,"aria-labelledby":t+" "+n,disabled:this.disabled,form:this.form,placeholder:!this.floatLabel&&this.placeholder?this.placeholder:"",readOnly:true,required:this.required,value:this.getLabel(this.value),onFocus:this.onFocus})])),!this.readonly&&!this.disabled&&e("nano-datalist",{onNanoOptionsUpdated:this.setOptions,ref:t=>this.datalist=t,selected:this.valArray,type:this.multiple?"selctMulti":"select",onNanoSelect:this.setValue,onNanoDeselect:t=>{t.preventDefault();this.removeValue(t.detail.value)},options:this._options.length?this._options:undefined},this.allowCustomValues&&this.multiple&&!!this.inputSearchVal&&e("nano-option",{slot:"list-top",value:this.inputSearchVal,selected:false,label:this.inputSearchVal,onNanoSelect:()=>this.inputCtrl.focus()},e("span",{slot:"check-icon"}),"Add '",this.inputSearchVal,"'"),e("slot",null)),e("select",{id:this.selectId+"-hidden",class:"native-select",ref:t=>this.nativeSelect=t,"aria-labelledby":t+" "+n,disabled:this.disabled,form:this.form,multiple:this.multiple,name:this.name,required:this.required,onInvalid:this.handleInvalid},this.allowCustomValues&&this.valArray.map((t=>e("option",{value:t,selected:true},t))),!this.allowCustomValues&&this.options.map((t=>e("option",{value:t.value,selected:this.valArray.includes(t.value),disabled:t.disabled,label:t.label},this.valArray.includes(t.value))))))}multipleValues(t,n){let i=e("input",{class:"multi-input",id:this.selectId,ref:t=>this.inputCtrl=t,readOnly:this.readonly,disabled:this.disabled,autoFocus:this.autofocus,autocomplete:"off",onKeyDown:this.handleDocumentKeyDown,onInput:this.onMultiInput,value:this.inputSearchVal,onTouchStart:this.onClick,onMouseDown:this.onClick,onFocus:this.onFocus,placeholder:this.placeholder&&!this.floatLabel&&!this.value.length?this.placeholder:"","aria-labelledby":t+" "+n});if(!this.value.length)return i;return this.value.map(((t,n)=>{let a=e("span",{onDragStart:this.onDragStart,onDragLeave:this.onDragLeave,onDragEnd:this.onDragEnd,onDragOver:t=>t.preventDefault(),draggable:true,"data-value":t,ref:t=>this.valueItems.push(t),class:"multi-value"},e("span",null,this.getLabel(t)),e("button",{class:"multi-value-remove",type:"button",tabindex:"-1",onTouchEnd:()=>{this.removeValue(t)},onMouseUp:()=>{this.removeValue(t)}},e("nano-icon",{name:"light/times"})));if(n===0&&this.currInsertIndex<0)a=[i,a];else if(n===this.currInsertIndex)a=[a,i];return a}))}get el(){return a(this)}static get watchers(){return{debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],validateOn:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],dropDownConfig:["setDataListOpts"]}}};w.style=f;export{m as nano_nav_item,w as nano_select};
5
- //# sourceMappingURL=p-d857f3ed.entry.js.map
4
+ import{r as t,c as n,h as e,e as i,g as a}from"./p-ab5813a7.js";import{d as s,r as o}from"./p-289aa03f.js";import{b as r,g as l,c as d}from"./p-b619500f.js";import{F as c,a as h}from"./p-672e5547.js";import{a as p}from"./p-1da5f8df.js";import{c as g}from"./p-d99437a6.js";import{g as u}from"./p-74a7fc4f.js";const b=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin)}:host ::slotted(*),:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size: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;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host ::slotted(nano-icon[slot=icon-start]){padding-right:var(--padding-end)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host ::slotted(nano-icon[slot=icon-start]){padding-right:unset;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host ::slotted(nano-icon[slot=icon-end]){padding-left:var(--padding-start)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host ::slotted(nano-icon[slot=icon-end]){padding-left:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);}}:host .link::slotted(nano-icon[slot=icon-start]),:host .link ::slotted(nano-icon[slot=icon-start]){padding-left:var(--padding-start);padding-right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .link::slotted(nano-icon[slot=icon-start]),:host .link ::slotted(nano-icon[slot=icon-start]){padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}}:host .link::slotted(nano-icon[slot=icon-end]),:host .link ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:var(--padding-end)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .link::slotted(nano-icon[slot=icon-end]),:host .link ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host .link,:host button,:host a{border-bottom:var(--border-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host .secondary-menu{display:none}:host ::slotted(a:hover),:host ::slotted(button:hover),:host .link:hover,:host button:hover,:host a:hover{text-decoration:inherit !important}:host button:focus,:host a:focus{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, none)}:host ::slotted(a:focus),:host ::slotted(button:focus){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:none}.nav-item.selected .link,.nav-item.selected button,.nav-item.selected a{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}.nav-item.secondary-open button,.nav-item.secondary-open a{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}.nav-item.disabled{opacity:0.6}.nav-item.disabled button,.nav-item.disabled a{color:var(--color-disabled, var(--color)) !important}.nav-item:not(.nano-menu) ::slotted(a:hover),.nav-item:not(.nano-menu) ::slotted(button:hover),.nav-item:not(.nano-menu) .link:hover,.nav-item:not(.nano-menu) button:hover,.nav-item:not(.nano-menu) a:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}:host(.has-focus) .link{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}:host(.nano-global-nav-menu) a,:host(.nano-global-nav-menu) a:visited,:host(.nano-global-nav-menu) button,:host(.nano-global-nav-menu) .link,:host(.nano-menu) a,:host(.nano-menu) a:visited,:host(.nano-menu) button,:host(.nano-menu) .link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:"currentColor";text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;width:100%}:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{padding-left:0;padding-right:var(--padding-end);-webkit-box-flex:1;-ms-flex:1;flex:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){-webkit-box-flex:1;-ms-flex:1;flex:1}:host(.nano-global-nav-menu) ::slotted(a:focus),:host(.nano-global-nav-menu) ::slotted(button:focus),:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){-webkit-box-shadow:none;box-shadow:none}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, "currentColor");min-height:100%;top:0;left:0;width:100%;z-index:1;opacity:0;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, transform 0.3s ease;transition:opacity 0.2s ease, transform 0.3s ease, -webkit-transform 0.3s ease;background-color:var(--secondary-bg-color, white);-webkit-transform:translateX(100%);transform:translateX(100%)}:host(.nano-global-nav-menu) .secondary-menu:focus,:host(.nano-menu) .secondary-menu:focus{outline:none}:host(.nano-global-nav-menu) .secondary-menu.open,:host(.nano-menu) .secondary-menu.open{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:opacity 0.3s ease, -webkit-transform 0.2s ease;transition:opacity 0.3s ease, -webkit-transform 0.2s ease;transition:opacity 0.3s ease, transform 0.2s ease;transition:opacity 0.3s ease, transform 0.2s ease, -webkit-transform 0.2s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-size:10px;-webkit-box-flex:0;-ms-flex:0 0 10px;flex:0 0 10px;pointer-events:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end]){padding:0}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,:host(.nano-menu[dir=rtl]) .secondary-menu{left:auto;right:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{-webkit-transform:translateX(0);transform:translateX(0)}:host(.nano-menu) .secondary-menu-content{padding-left:var(--secondary-padding-start);padding-right:var(--secondary-padding-end);padding-top:var(--secondary-padding-top);padding-bottom:var(--secondary-padding-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu) .secondary-menu-content{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--secondary-padding-start);padding-inline-start:var(--secondary-padding-start);-webkit-padding-end:var(--secondary-padding-end);padding-inline-end:var(--secondary-padding-end)}}:host(.nano-global-nav-bar.legacy){margin:0 11px}:host(.nano-global-nav-bar.legacy) ::slotted(a){padding-left:6px;padding-right:6px;padding-top:7px;padding-bottom:7px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-bar.legacy) ::slotted(a){padding-left:unset;padding-right:unset;-webkit-padding-start:6px;padding-inline-start:6px;-webkit-padding-end:6px;padding-inline-end:6px}}:host(.nano-global-nav-menu.legacy) ::slotted(a){padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu.legacy) ::slotted(a){padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-left:var(--padding-end);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-left:unset;margin-right:unset;-webkit-margin-start:var(--padding-end);margin-inline-start:var(--padding-end);-webkit-margin-end:0;margin-inline-end:0}}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-left:0;margin-right:var(--padding-start);margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--padding-start);margin-inline-end:var(--padding-start)}}:host(.nano-global-nav-bar.has-secondary) button{position:relative}:host(.nano-global-nav-bar.has-secondary) button::before{content:"";background:#86bee2;height:3px;left:5px;bottom:-14px;right:5px;position:absolute;-webkit-transform:translateZ(0) scaleX(0);transform:translateZ(0) scaleX(0);-webkit-transform-origin:0;transform-origin:0;-webkit-transition:0.2s ease transform;transition:0.2s ease transform}:host(.nano-global-nav-bar.has-secondary) .selected button::before,:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{-webkit-transform:translateZ(0) scaleX(1);transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.5}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease;-webkit-transform:translateY(-100%) translateZ(0);transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;-webkit-box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);left:0;right:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{-webkit-transform:translateY(12px) translateZ(0);transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-left:var(--padding-start);padding-right:0;padding-top:calc(var(--padding-top) / 2);padding-bottom:calc(var(--padding-bottom) / 2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:currentColor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;width:100%}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}}:host(.nano-menu-drawer) .text{padding-left:0;padding-right:var(--padding-end);text-align:left;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;min-width:130px;width:130px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) .text{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-size:var(--icon-size);width:var(--icon-size);-webkit-box-flex:0;-ms-flex:0 0 var(--icon-size);flex:0 0 var(--icon-size)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-size:10px;-webkit-box-flex:0;-ms-flex:0 0 20px;flex:0 0 20px;min-width:20px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);height:100vh;top:0;right:0;left:auto;bottom:0;-webkit-transform:translateX(0);transform:translateX(0);z-index:-1;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:transform 0.3s ease, opacity 0.2s ease;transition:transform 0.3s ease, opacity 0.2s ease, -webkit-transform 0.3s ease;overflow-y:auto;width:var(--secondary-width, 400px);max-width:62vw;opacity:1;padding-left:var(--secondary-padding-start, var(--padding-start));padding-right:var(--secondary-padding-end, var(--padding-end));padding-top:var(--secondary-padding-top, var(--padding-top));padding-bottom:var(--secondary-padding-bottom, var(--padding-bottom))}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) .secondary-menu{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--secondary-padding-start, var(--padding-start));padding-inline-start:var(--secondary-padding-start, var(--padding-start));-webkit-padding-end:var(--secondary-padding-end, var(--padding-end));padding-inline-end:var(--secondary-padding-end, var(--padding-end))}}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{-webkit-transform:translateX(100%);transform:translateX(100%)}:host(.nano-menu-drawer.legacy) .link,:host(.nano-menu-drawer.legacy) a,:host(.nano-menu-drawer.legacy) button{width:auto}:host(.nano-menu-drawer.legacy) ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:calc(var(--padding-end) * 2);padding-top:0;padding-bottom:0;font-size:10px;-webkit-box-flex:0;-ms-flex:0 0 20px;flex:0 0 20px;min-width:20px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer.legacy) ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:calc(var(--padding-end) * 2);padding-inline-end:calc(var(--padding-end) * 2)}}:host(.nano-menu-drawer[dir=rtl]) .text{text-align:right}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{right:auto;left:0;-webkit-transform:translateX(0%);transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:1}';let m=class{constructor(e){t(this,e);this.nanoClose=n(this,"nanoClose",7);this.nanoOpen=n(this,"nanoOpen",7);this.nanoOpening=n(this,"nanoOpening",7);this.nanoClosing=n(this,"nanoClosing",7);this.nanoBlur=n(this,"nanoBlur",7);this.nanoFocus=n(this,"nanoFocus",7);this.hasSecondarySlot=false;this.hasAnchorEle=false;this.didBlur=false;this.animating=false;this.didOpen=false;this.isInGlobalNav=false;this.isInMenuDrawer=false;this.isInMenu=false;this.isLegacy=!document.head.attachShadow;this.hasFocus=false;this.href=null;this.target="_self";this.disabled=false;this.open=false;this.selected=false;this.secondaryActiveWidth=0;this.secondaryFallback=()=>{};this.closeOnBlur=true;this.closeSecondary=async()=>{this.open=false;if(!this.hasSecondarySlot||!this.didOpen)return;this.nanoClosing.emit({secondaryMenu:this.secondaryDiv});let t=await s(this.secondaryDiv,"open",false);this.didOpen=t!=="hidden"};this.openSecondary=async()=>{if(window.innerWidth<this.secondaryActiveWidth){this.secondaryFallback.call(this);return}this.open=true;if(!this.hasSecondarySlot||this.didOpen)return;this.nanoOpening.emit({secondaryMenu:this.secondaryDiv});let t=await s(this.secondaryDiv,"open",true);this.didOpen=t==="shown"};this.toggleSecondary=()=>{if(!this.hasSecondarySlot)return;if(this.didOpen)this.closeSecondary();else this.openSecondary()};this.handleFocus=()=>{this.hasFocus=true;if(this.href&&!this.animating&&this.hasSecondarySlot)this.openSecondary();this.nanoFocus.emit()};this.handleHostBlur=()=>{if(this.animating)return;this.el.removeAttribute("tabindex");this.hasFocus=false;this.nanoBlur.emit()};this.handleHostClick=t=>{if(!this.hasAnchorEle)return;let n=t.target.closest("a, button");if(!n)this.btn.click()};this.handleMouseEnter=async()=>{if(!this.href||this.animating||!this.hasSecondarySlot||this.globalNavEle&&!this.globalNavEle.classList.contains("ready"))return;let t=0;if(r(this.el,".secondary-open.has-secondary").length)t=300;clearTimeout(this.waitHide);this.fromHover=true;this.animating=true;this.waitShow=window.setTimeout((async()=>await this.openSecondary()),t);this.animating=false};this.handleMouseLeave=()=>{if(!this.href)return;clearTimeout(this.waitShow);this.fromHover=true;this.animating=true;this.waitHide=window.setTimeout((async()=>await this.closeSecondary()),300);this.animating=false};this.handleClick=()=>{var t;this.fromHover=false;if(this.hasSecondarySlot)this.toggleSecondary();else(t=this.el.querySelector("*"))===null||t===void 0?void 0:t.click()};this.blur=t=>{if(!this.didOpen||this.animating)return;if(!this.closeOnBlur)return;if(t&&t.relatedTarget){if(t.relatedTarget===this.el||t.relatedTarget===this.btn||this.foundThisNavEle(t.relatedTarget)){this.secondaryDiv.focus({preventScroll:true});return}}this.btn.removeEventListener("focusout",this.blur);this.secondaryDiv.removeEventListener("focusout",this.blur);window.removeEventListener("blur",this.blur);this.didBlur=true;this.open=false;if(!t.relatedTarget)setTimeout((()=>{this.el.focus({preventScroll:true})}),50)}}async setFocus(){if(!this.btn)return;this.btn.focus()}openChange(){this.open?this.openSecondary():this.closeSecondary()}didOpenChange(){if(!this.hasSecondarySlot)return;if(!this.didOpen){if(!this.fromHover){this.btn.removeEventListener("focusout",this.blur);this.secondaryDiv.removeEventListener("focusout",this.blur)}setTimeout((()=>{if(!this.fromHover&&!this.didBlur)this.btn.focus({preventScroll:true});this.nanoClose.emit({secondaryMenu:this.secondaryDiv})}),50)}else{this.didBlur=false;if(!this.fromHover){const t=new window.IntersectionObserver((n=>{if(n[0].boundingClientRect.top<0){this.secondaryDiv.scrollIntoView({behavior:"smooth"})}t.disconnect()}),{threshold:1});t.observe(this.secondaryDiv);this.secondaryDiv.focus({preventScroll:true});this.btn.addEventListener("focusout",this.blur);this.secondaryDiv.addEventListener("focusout",this.blur);window.addEventListener("blur",this.blur);this.el.tabIndex=-1;this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}}}foundThisNavEle(t){let n=t.closest("nano-nav-item");n=n===t?t.parentElement.closest("nano-nav-item"):n;if(!n)return false;if(n===this.el)return true;return this.foundThisNavEle(n)}componentWillLoad(){let t=this.el.querySelector('[slot="secondary"]');this.hasSecondarySlot=!!t;let n=l(this.el,"a, button")[0];this.hasAnchorEle=!!n;if(n){this.href=n.href?n.href:null;this.btn=n;if(this.hasSecondarySlot)this.btn.addEventListener("click",this.toggleSecondary);this.btn.addEventListener("focus",this.handleFocus);this.btn.addEventListener("blur",this.handleHostBlur)}}connectedCallback(){this.isInGlobalNav=false;this.isInMenuDrawer=false;this.globalNavEle=this.el.closest("nano-global-nav");this.isInMenuDrawer=!!this.el.closest("nano-menu-drawer");this.isInMenu=!!this.el.closest("nano-menu");this.isInGlobalNav=this.el.parentElement===this.globalNavEle||!!this.el.closest(".global-nav")}render(){return e(i,{class:{"has-secondary":this.hasSecondarySlot,"secondary-open":this.open,selected:this.selected,"has-focus":this.hasFocus,disabled:this.disabled,"nano-global-nav":this.isInGlobalNav,"nano-menu-drawer":this.isInMenuDrawer,"nano-menu":this.isInMenu,legacy:this.isLegacy},onBlur:this.handleHostBlur,dir:this.el.ownerDocument.dir==="rtl"?"rtl":null,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onClick:this.handleHostClick,role:"menuitem"},e("div",{class:{"nav-item":true,"secondary-open":this.open,selected:this.selected}},this.href&&!this.hasAnchorEle&&!this.disabled&&e("a",{target:this.target,ref:t=>this.btn=t,href:this.href,onFocus:this.handleFocus},e("slot",{name:"icon-start"}),e("span",{class:"text"},e("slot",null)),e("slot",{name:"icon-end"})),(!this.hasAnchorEle&&!this.href||this.disabled)&&e("button",{ref:t=>this.btn=t,onClick:this.handleClick,onFocus:this.handleFocus,disabled:this.disabled},e("slot",{name:"icon-start"}),e("span",{class:"text"},e("slot",null)),e("slot",{name:"icon-end"})),this.hasAnchorEle&&!this.disabled&&e("div",{class:"link"},e("slot",{name:"icon-start"}),e("slot",null),e("slot",{name:"icon-end"})),this.hasSecondarySlot&&!this.disabled&&e("div",{class:"secondary-menu",ref:t=>this.secondaryDiv=t,tabindex:"-1"},e("div",{class:"secondary-menu-content"},e("slot",{name:"secondary"})),e("div",{class:"secondary-menu-mask",onClick:this.closeSecondary}))))}get el(){return a(this)}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};m.style=b;const f='.sc-nano-select-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-select,*.sc-nano-select::before,*.sc-nano-select::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-select{display:none !important}label.sc-nano-select,.more.sc-nano-select,.error.sc-nano-select,.helper.sc-nano-select{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-select,.more.visually-hide.sc-nano-select,.error.visually-hide.sc-nano-select,.helper.visually-hide.sc-nano-select{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.placeholder-as-label.sc-nano-select{padding-left:var(--padding-start);padding-right:0;padding-top:0;padding-bottom:0;color:var(--label-color);position:absolute;font-size:1.4em;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:top left;transform-origin:top left;top:50%;-webkit-transition:0.125s ease-in;transition:0.125s ease-in;opacity:0.7}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.placeholder-as-label.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}}.is-invalid.sc-nano-select-h .placeholder-as-label.sc-nano-select{color:var(--invalid-msg-color)}.has-value.sc-nano-select-h .placeholder-as-label.sc-nano-select{-webkit-transform:translateY(-120%);transform:translateY(-120%);font-size:0.9em}.textarea.sc-nano-select .placeholder-as-label.sc-nano-select{top:50%}.has-focus.sc-nano-select-h .textarea.sc-nano-select .placeholder-as-label.sc-nano-select{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.has-value.sc-nano-select-h .textarea.sc-nano-select .placeholder-as-label.sc-nano-select{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.label.sc-nano-select{color:var(--label-color);font-size:var(--label-font-size);padding-bottom:var(--padding-bottom);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex}.label.sc-nano-select .label-placeholder.sc-nano-select{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.label.sc-nano-select .placeholder.sc-nano-select{margin-left:0;margin-right:5px;margin-top:0;margin-bottom:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.label.sc-nano-select .placeholder.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}.label.sc-nano-select .charcount.sc-nano-select{margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0;font-size:0.9em;opacity:0.5}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.label.sc-nano-select .charcount.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}.has-value.sc-nano-select-h .label.sc-nano-select .placeholder.sc-nano-select{opacity:0.5}.has-focus.sc-nano-select-h .label.sc-nano-select{color:var(--label-color--focus)}.is-invalid.sc-nano-select-h .label.sc-nano-select{color:var(--label-color--invalid)}.more.sc-nano-select{height:1em;margin-left:3px;margin-right:0;margin-top:4px;margin-bottom:var(--padding-bottom);position:relative}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.more.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:0;margin-inline-end:0}}.helper.sc-nano-select,.error.sc-nano-select{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.helper.sc-nano-select{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-select-h:not([show-inline-error=false]).is-invalid .helper.sc-nano-select{opacity:0}.error.sc-nano-select{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-select-h .error.sc-nano-select{opacity:1}.input.sc-nano-select{font-family:inherit;font-size: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;border-radius:var(--input-border-radius);width:100%;padding:0 !important;position:relative;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size)}.has-focus.sc-nano-select-h .input.sc-nano-select{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width)}.is-invalid.sc-nano-select-h .input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width)}.is-invalid.has-focus.sc-nano-select-h .input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width)}.native-input-wrap.sc-nano-select{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex:1;flex:1}.input-clear-icon.sc-nano-select,.end.sc-nano-select,.start.sc-nano-select,.value-end.sc-nano-select{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;--nano-icon-size:1.4em;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:auto}.has-float-label.sc-nano-select .start.sc-nano-select{display:none}.start.sc-nano-select-s>*,.start .sc-nano-select-s>*,.end.sc-nano-select-s>*,.end .sc-nano-select-s>*,.value-end.sc-nano-select-s>*,.value-end .sc-nano-select-s>*,.value-end.sc-nano-select *.sc-nano-select{--nano-icon-size:1.4em;font-size:1em;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.start.sc-nano-select-s>*,.start .sc-nano-select-s>*,.end.sc-nano-select-s>*,.end .sc-nano-select-s>*,.value-end.sc-nano-select-s>*,.value-end .sc-nano-select-s>*,.value-end.sc-nano-select *.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.sc-nano-select-h[disabled]:not([disabled=false]) .start.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .start .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .end .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .value-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .value-end .sc-nano-select-s>*,[disabled].sc-nano-select-h:not([disabled=false]) .value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.value-end.sc-nano-select-s>*,.value-end .sc-nano-select-s>*,.value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.input-clear-icon.sc-nano-select{color:var(--clear-btn-color);padding:0;opacity:0;width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.is-invalid.sc-nano-select-h .input-clear-icon.sc-nano-select{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-select-h .input-clear-icon.sc-nano-select{padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;opacity:1;width:auto}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.has-value.sc-nano-select-h .input-clear-icon.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.input-clear-icon.sc-nano-select:hover{color:var(--clear-btn-color--hover)}.sc-nano-select-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n --nano-color-base-rgb,\n var(--nano-color-primary-rgb, 0, 116, 149)\n );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--input-border-width-sh, var(--nano-input-border-width, 2px));--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #fac6c3);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, #fee8de);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, "currentColor");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #90c6e7);position:relative;width:100%;padding:0 !important;font-family:var(--nano-font-family, inherit);display:inline-block}.nano-color.sc-nano-select-h{--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--multi-input-value-bg:var(--nano-color-tint-rgb);--multi-input-value-border:var(--nano-color-shade);--multi-input-value-text-color:var(--nano-color-contrast);color:var(--nano-color-base)}nano-item.sc-nano-select-h:not(.item-label),nano-item:not(.item-label) .sc-nano-select-h{--padding-start:0}[disabled].sc-nano-select-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select{pointer-events:none !important}select.sc-nano-select{display:none}.native-input.sc-nano-select{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size: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;text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:2.5em;min-height:2.5em;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;overflow:hidden;cursor:default}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.native-input.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.native-input.sc-nano-select::-moz-selection{background:transparent}.native-input.sc-nano-select::selection{background:transparent}.native-input.sc-nano-select::-moz-selection{background:transparent}.native-input[disabled].sc-nano-select{opacity:0.4}.native-input.sc-nano-select::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.native-input.sc-nano-select:-webkit-autofill{background-color:transparent}.native-input.sc-nano-select::-webkit-search-decoration,.native-input.sc-nano-select::-webkit-search-cancel-button,.native-input.sc-nano-select::-webkit-search-results-button,.native-input.sc-nano-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.native-input.sc-nano-select:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input.sc-nano-select::-ms-clear,.native-input.sc-nano-select::-ms-reveal{display:none}.native-input.resizable.sc-nano-select{resize:vertical;overflow:auto}.textarea.sc-nano-select .native-input.sc-nano-select{line-height:1.5em;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);white-space:pre-wrap}.textarea.sc-nano-select .native-input.sc-nano-select::-webkit-input-placeholder{line-height:1.5em}.textarea.sc-nano-select .native-input.sc-nano-select::-moz-placeholder{line-height:1.5em}.textarea.sc-nano-select .native-input.sc-nano-select:-ms-input-placeholder{line-height:1.5em}.textarea.sc-nano-select .native-input.sc-nano-select::-ms-input-placeholder{line-height:1.5em}.textarea.sc-nano-select .native-input.sc-nano-select::placeholder{line-height:1.5em}.has-float-label.sc-nano-select .native-input.sc-nano-select{padding-top:1.4em}.has-float-label.textarea.sc-nano-select .native-input.sc-nano-select{padding-top:1.8em}.legacy.sc-nano-select .native-input.sc-nano-select{-webkit-box-sizing:content-box;box-sizing:content-box}.masked.sc-nano-select-h .native-input.sc-nano-select{opacity:0;position:absolute;left:0;top:0}.select-mask.sc-nano-select{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size: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;pointer-events:none;line-height:2.5em;min-height:2.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select-mask.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.multi-wrap.sc-nano-select{padding-left:0;padding-right:0;padding-top:0;padding-bottom:calc(var(--padding-bottom) / 2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%}.has-float-label.sc-nano-select-h .multi-wrap.sc-nano-select{padding-top:1.3em}.multi-input.sc-nano-select{font-family:inherit;font-size: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;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:calc(var(--padding-top) / 2);padding-bottom:0;min-width:50px;max-width:100%;max-height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;outline:none;display:inline-block;background:transparent;-webkit-box-flex:0;-ms-flex:0;flex:0;position:relative;min-height:calc(2.78em - var(--padding-top));-webkit-box-sizing:border-box;box-sizing:border-box}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-input.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.legacy.sc-nano-select-h .multi-input.sc-nano-select{-webkit-box-sizing:content-box;box-sizing:content-box}.multi-input.sc-nano-select:last-child{-webkit-box-flex:1;-ms-flex:1;flex:1}.multi-value.sc-nano-select{margin-left:4px;margin-right:0;margin-top:4px;margin-bottom:0;background:rgba(var(--multi-input-value-bg), 0.8);color:var(--multi-input-value-text-color);border:1px solid;border-color:var(--multi-input-value-border);padding:0.3em 0.5em;border-radius:3px;line-height:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--input-font-size);font-weight:600;letter-spacing:1px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-value.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:0;margin-inline-end:0}}.multi-value.sc-nano-select span.sc-nano-select{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1.4}.multi-value-remove.sc-nano-select{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;padding-left:0.5em;padding-right:0;padding-top:0;padding-bottom:0;color:inherit;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;top:0;font-size:1em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-value-remove.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:0.5em;padding-inline-start:0.5em;-webkit-padding-end:0;padding-inline-end:0}}.multi-value-remove.sc-nano-select nano-icon.sc-nano-select{--color:var(--multi-input-value-text-color)}.has-focus.has-multiple.sc-nano-select-h .placeholder-as-label.sc-nano-select{-webkit-transform:translateY(-120%);transform:translateY(-120%);font-size:0.9em}.has-focus.sc-nano-select-h select.sc-nano-select,.has-focus.sc-nano-select-h a.sc-nano-select,.has-focus.sc-nano-select-h button.sc-nano-select{pointer-events:auto}';let v=0;let w=class{constructor(e){t(this,e);this.nanoChange=n(this,"nanoChange",7);this.nanoBlur=n(this,"nanoBlur",7);this.nanoFocus=n(this,"nanoFocus",7);this.nanoDidLoad=n(this,"nanoDidLoad",7);this.nanoDidUnload=n(this,"nanoDidUnload",7);this.nanoSearchChange=n(this,"nanoSearchChange",7);this.nanoValidate=n(this,"nanoValidate",7);this.valueItems=[];this.selectId=`nano-select-${v++}`;this.rtl=false;this.onInit=true;this.isLegacy="registerElement"in document;this.currInsertIndex=-1;this.showErrorMsg=false;this.errorMessage="";this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.inputSearchVal="";this._invalid=false;this.autofocus=false;this.disabled=false;this.validateOn="submit";this.showInlineError=true;this.hideLabel=false;this.floatLabel=false;this.multiple=false;this.name=this.selectId+"-name";this.readonly=false;this.required=false;this.allowCustomValues=false;this._value=this.multiple?[]:"";this._options=[];this._eOptions=[];this.clearSelect=false;this.mask=false;this.debounce=0;this.dropDownConfig={};this.customValidate=()=>{this.nativeSelect.setCustomValidity("");if(this.required&&!this.valArray.length){this.nativeSelect.setCustomValidity("Please fill in this field.");return true}if(this.valArray.length&&!this.allowCustomValues&&!this.isValidValues()){this.nativeSelect.setCustomValidity("Please choose an item from this field.");return true}if(this.max&&this.valArray.length>this.max){this.nativeSelect.setCustomValidity(`Only up to ${this.max} values are allowed.`);return true}if(this.min&&this.valArray.length<this.min){this.nativeSelect.setCustomValidity(`You must select a minimum of ${this.min} values.`);return true}return false};this.showInlineValidation=t=>{if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this._invalid=false;this.showErrorMsg=false;this.errorMessage="";if(!this.nativeSelect.validity.valid){this.errorMessage=this.nativeSelect.validationMessage;this._invalid=true;this.showErrorMsg=true}this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:t})};this.handleInvalid=t=>{this._invalid=true;if(this.validateOn==="submit")this._invalid=this.showErrorMsg=this.customValidate();if(this.showInlineError)t.preventDefault();setTimeout((n=>this.showInlineValidation(t)),20)};this.setValue=t=>{t.preventDefault();if(!this.multiple){this.value=t.detail.value;this.inputCtrl.focus();return}if(this.value&&this.value.length&&this.value.includes(t.detail.value))return;if(this.max&&this.value.length===this.max)return;this.currInsertIndex++;this.value=[...this.value.slice(0,this.currInsertIndex),t.detail.value,...this.value.slice(this.currInsertIndex)];this.inputSearchVal=""};this.removeValue=t=>{if(!this.multiple||!this.value.length)return;if(!t)t=this.value[this.value.length-1];this.value=this.value.filter((n=>n!==t));this.currInsertIndex--;this.setFocus()};this.setOptions=()=>{if(!this.datalist||!this.datalist.activeOptions||!this.datalist.activeOptions.length)return;this._eOptions=this.datalist.activeOptions.map((t=>{const{value:n,selected:e,label:i,filterMeta:a}=t;return{value:n,selected:e,label:i,filterMeta:a}}))};this.handleDocumentKeyDown=t=>{if(!this.multiple||!this.hasFocus)return;if(!this.inputSearchVal){let n;switch(t.key){case"Backspace":if(this.inputCtrl.previousElementSibling)n=this.inputCtrl.previousElementSibling;else break;this.removeValue(n.dataset.value||null);break;case"Delete":if(this.inputCtrl.nextElementSibling)n=this.inputCtrl.nextElementSibling;else break;this.removeValue(n.dataset.value||null);break;case"ArrowLeft":case"ArrowRight":if(!this.value.length)break;if(t.key==="ArrowLeft"&&this.inputCtrl.previousSibling)this.currInsertIndex--;if(t.key==="ArrowRight"&&this.inputCtrl.nextSibling)this.currInsertIndex++;setTimeout((()=>{this.inputCtrl.focus()}),20);t.preventDefault();break}}};this.onBlur=()=>{this.hasFocus=false;setTimeout((()=>{if(this.validateOn==="dirty"&&!this.hasFocus)this.showInlineValidation()}),20);this.nanoBlur.emit();if(!this.allowCustomValues&&this.multiple){this.inputSearchVal="";const t=new window.Event("change");this.inputCtrl.dispatchEvent(t)}};this.onFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.clearSelectValue=t=>{if(this.clearSelect&&!this.readonly&&!this.disabled&&t){t.preventDefault();t.stopPropagation()}if(this.multiple){this.value=[];this.currInsertIndex=-1}else this.value="";this.inputCtrl.value="";const n=new window.Event("change");this.inputCtrl.dispatchEvent(n)};this.onClick=()=>{this.setFocus()};this.onDragStart=t=>{let n=t.target;this.dragVal=n.dataset.value};this.onDragEnd=t=>{this.dragVal=null;t.preventDefault()};this.onDragLeave=t=>{let n=t.target;let e=n.dataset&&n.dataset.value?n.dataset.value:null;if(!e||this.dragVal===e||!this.value.includes(this.dragVal)){t.preventDefault();return}let i=this.value.indexOf(e);let a=this.value.indexOf(this.dragVal);let s=this.value;let o=s[i];s[i]=s[a];s[a]=o;this.value=[...s]};this.onMultiInput=t=>{this.inputSearchVal=t.target.value.trim();this.nanoSearchChange.emit({value:t.target.value.trim()})}}get selectWrap(){return this._selectWrap}set selectWrap(t){if(this._selectWrap===t)return;this._selectWrap=t;this.setDataListOpts()}get datalist(){return this._datalist}set datalist(t){if(this._datalist===t)return;this._datalist=t;this.setDataListOpts()}get invalid(){return this._invalid}get value(){return this._value}set value(t){if(typeof t==="string"){if(this.multiple)this._value=t.split(",");else this._value=t}else if(Array.isArray(t)){if(this.multiple)this._value=t;else this._value=t[0]}}get options(){if(this._options.length)return this._options;if(!this.datalist||!this.datalist.activeOptions)return[];return this._eOptions.map((t=>{const{value:n,selected:e,label:i,filterMeta:a}=t;return{value:n,selected:e,label:i,filterMeta:a}}))}set options(t){this._options=t.map((t=>{if(typeof t==="string")return{value:t,label:t};else return t}))}debounceChanged(){this.nanoSearchChange=p(this.nanoSearchChange,this.debounce)}shouldValidate(){if(this.onInit)return;if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}valueChanged(){if(this.onInit){if(this.multiple)this.currInsertIndex=this.value.length-1;return}setTimeout((t=>this.shouldValidate()),20);this.nanoChange.emit({value:this.value})}setDataListOpts(){if(!this.datalist||!this.selectWrap)return;const t=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig=Object.assign(Object.assign(Object.assign({},t),this.dropDownConfig),{tetherTo:this.selectWrap});this.datalist.input=this.inputCtrl}async reportValidity(t){if(t)this.showInlineValidation();return{isValid:!this.invalid,errorMessage:this.errorMessage}}async setFocus(){this.inputCtrl.focus();setTimeout((()=>this.inputCtrl.click()),50)}getSelectElement(){return Promise.resolve(this.nativeSelect)}async showError(t){if(this.nativeSelect){this.nativeSelect.setCustomValidity(t);this.showInlineValidation()}}get valArray(){return typeof this.value==="string"?this.value.length?[this.value]:[]:this.value}isValidValues(){return this.valArray.find((t=>this.options.find((n=>n.value===t))))}slotChangeObserver(){const t=this.mo=new MutationObserver((()=>this.processSlottedContent()));t.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]').length;this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');if(!!this.el.querySelector('select:not([class*="sc-nano-select"]) option')){console.warn("nesting `<option>` elements was removed in v2. Please update your code to use `<nano-option>` elements instead.",this.el)}if(!!this.el.querySelector('[slot="legacy"]')){console.warn("The `legacy` slot has been removed. Please update your code",this.el)}}getLabel(t){let n=this.options.find((n=>{var e;return!n.disabled&&((e=n.value)===null||e===void 0?void 0:e.length)&&n.value===t}));return n&&n.label?n.label:t}handleBlur(t){if(!this.hasFocus)return;const n=t;let e;o((()=>{if(n.key){if(n.key!=="Tab")return;e=u()}else e=t.target;if(d(this.el.tagName.toLowerCase(),e)!==this.el){this.onBlur()}}))}connectedCallback(){this.debounceChanged();this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}disconnectedCallback(){document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}));if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver();this.customValidate();this.setDataListOpts();o((()=>this.onInit=false))}componentWillLoad(){this.processSlottedContent()}render(){const t=this.selectId+"-lbl";const n=this.showInlineError||this.hasHelperSlot?this.selectId+"-moreId":"";this.rtl=this.el.ownerDocument.dir==="rtl";this.valueItems=[];const a=(({el:t,floatLabel:n,label:e,errorMessage:i,showInlineError:a,hasHelperSlot:s,hasLabelSlot:o,hideLabel:r,placeholder:l,rtl:d})=>({el:t,floatLabel:n,label:e,errorMessage:i,showInlineError:a,hasHelperSlot:s,hasLabelSlot:o,hideLabel:r,placeholder:l,rtl:d}))(this);const s=Object.assign(Object.assign({},a),{labelId:t,moreId:n,hasValue:!!this.value.length||!!this.inputSearchVal.length,controlId:this.selectId});const o=(({readonly:t,disabled:n})=>({readonly:t,disabled:n,clearControl:this.clearSelect}))(this);return e(i,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:Object.assign(Object.assign({},g(this.color)),{"has-value":!!this.value.length||!!this.inputSearchVal.length,"has-focus":this.hasFocus,"is-invalid":this.invalid,"has-label":this.label!==null&&!this.floatLabel,"has-float-label":this.label!==null&&this.floatLabel,rtl:this.rtl,"has-multiple":this.multiple,"has-clr-btn":this.clearSelect,masked:this.mask,legacy:this.isLegacy})},e(c,Object.assign({},s),e(h,Object.assign({},o,{onClearText:this.clearSelectValue,control:this.el,ref:t=>this.selectWrap=t,endValueSlot:e("slot",{name:"down-arrow"},e("nano-icon",{slot:"value-end",name:"light/chevron-down"}))}),this.multiple&&e("div",{class:"multi-wrap"},this.multipleValues(t,n)),!this.multiple&&[this.mask&&e("div",{class:"select-mask"},this.getLabel(this.value)),e("input",{id:this.selectId,class:"native-input",ref:t=>this.inputCtrl=t,"aria-labelledby":t+" "+n,disabled:this.disabled,form:this.form,placeholder:!this.floatLabel&&this.placeholder?this.placeholder:"",readOnly:true,required:this.required,value:this.getLabel(this.value),onFocus:this.onFocus})])),!this.readonly&&!this.disabled&&e("nano-datalist",{onNanoOptionsUpdated:this.setOptions,ref:t=>this.datalist=t,selected:this.valArray,type:this.multiple?"selctMulti":"select",onNanoSelect:this.setValue,onNanoDeselect:t=>{t.preventDefault();this.removeValue(t.detail.value)},options:this._options.length?this._options:undefined},this.allowCustomValues&&this.multiple&&!!this.inputSearchVal&&e("nano-option",{slot:"list-top",value:this.inputSearchVal,selected:false,label:this.inputSearchVal,onNanoSelect:()=>this.inputCtrl.focus()},e("span",{slot:"check-icon"}),"Add '",this.inputSearchVal,"'"),e("slot",null)),e("select",{id:this.selectId+"-hidden",class:"native-select",ref:t=>this.nativeSelect=t,"aria-labelledby":t+" "+n,disabled:this.disabled,form:this.form,multiple:this.multiple,name:this.name,required:this.required,onInvalid:this.handleInvalid},this.allowCustomValues&&this.valArray.map((t=>e("option",{value:t,selected:true},t))),!this.allowCustomValues&&this.options.map((t=>e("option",{value:t.value,selected:this.valArray.includes(t.value),disabled:t.disabled,label:t.label},this.valArray.includes(t.value))))))}multipleValues(t,n){let i=e("input",{class:"multi-input",id:this.selectId,ref:t=>this.inputCtrl=t,readOnly:this.readonly,disabled:this.disabled,autoFocus:this.autofocus,autocomplete:"off",onKeyDown:this.handleDocumentKeyDown,onInput:this.onMultiInput,value:this.inputSearchVal,onTouchStart:this.onClick,onMouseDown:this.onClick,onFocus:this.onFocus,placeholder:this.placeholder&&!this.floatLabel&&!this.value.length?this.placeholder:"","aria-labelledby":t+" "+n});if(!this.value.length)return i;return this.value.map(((t,n)=>{let a=e("span",{onDragStart:this.onDragStart,onDragLeave:this.onDragLeave,onDragEnd:this.onDragEnd,onDragOver:t=>t.preventDefault(),draggable:true,"data-value":t,ref:t=>this.valueItems.push(t),class:"multi-value"},e("span",null,this.getLabel(t)),e("button",{class:"multi-value-remove",type:"button",tabindex:"-1",onTouchEnd:()=>{this.removeValue(t)},onMouseUp:()=>{this.removeValue(t)}},e("nano-icon",{name:"light/times"})));if(n===0&&this.currInsertIndex<0)a=[i,a];else if(n===this.currInsertIndex)a=[a,i];return a}))}get el(){return a(this)}static get watchers(){return{debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],validateOn:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],dropDownConfig:["setDataListOpts"]}}};w.style=f;export{m as nano_nav_item,w as nano_select};
5
+ //# sourceMappingURL=p-c954c040.entry.js.map
package/dist/nano-components/p-c954c040.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","src/components/nav-item/nav-item.tsx","src/components/select/select.scss?tag=nano-select&encapsulation=scoped","src/components/select/select.tsx"],"names":["navItemCss","NavItem","[object Object]","hostRef","this","hasSecondarySlot","hasAnchorEle","didBlur","animating","didOpen","isInGlobalNav","isInMenuDrawer","isInMenu","isLegacy","document","head","attachShadow","hasFocus","href","target","disabled","open","selected","secondaryActiveWidth","secondaryFallback","closeOnBlur","closeSecondary","async","nanoClosing","emit","secondaryMenu","secondaryDiv","status","displayTransition","openSecondary","window","innerWidth","call","nanoOpening","toggleSecondary","handleFocus","nanoFocus","handleHostBlur","el","removeAttribute","nanoBlur","handleHostClick","ev","foundlink","closest","btn","click","handleMouseEnter","globalNavEle","classList","contains","timeToWait","getSiblings","length","clearTimeout","waitHide","fromHover","waitShow","setTimeout","handleMouseLeave","handleClick","_a","querySelector","blur","relatedTarget","foundThisNavEle","focus","preventScroll","removeEventListener","nanoClose","panelio","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","addEventListener","tabIndex","nanoOpen","found","parentElement","secondaryEle","link","getDirectChildren","h","Host","class","has-secondary","secondary-open","has-focus","nano-global-nav","nano-menu-drawer","nano-menu","legacy","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","role","nav-item","ref","a","onFocus","name","div","tabindex","selectCss","selectIds","Select","valueItems","selectId","rtl","onInit","currInsertIndex","showErrorMsg","errorMessage","hasLabelSlot","hasHelperSlot","inputSearchVal","_invalid","autofocus","validateOn","showInlineError","hideLabel","floatLabel","multiple","readonly","required","allowCustomValues","_value","_options","_eOptions","clearSelect","mask","debounce","dropDownConfig","customValidate","nativeSelect","setCustomValidity","valArray","isValidValues","max","min","showInlineValidation","validity","valid","validationMessage","nanoValidate","isValid","invalid","originalEvent","handleInvalid","preventDefault","_","setValue","e","value","detail","inputCtrl","includes","slice","removeValue","toFind","filter","val","setFocus","setOptions","datalist","activeOptions","map","ao","label","filterMeta","handleDocumentKeyDown","rm","key","previousElementSibling","dataset","nextElementSibling","previousSibling","nextSibling","event","Event","dispatchEvent","clearSelectValue","stopPropagation","onDragStart","ele","dragVal","onDragEnd","onDragLeave","spanVal","to","indexOf","from","tmpArr","tmpVal","onMultiInput","trim","nanoSearchChange","selectWrap","_selectWrap","setDataListOpts","_datalist","split","Array","isArray","options","opts","opt","debounceEvent","shouldValidate","nanoChange","currDWConfig","Object","assign","tetherTo","input","validateFirst","Promise","resolve","message","find","mo","MutationObserver","processSlottedContent","childList","subtree","querySelectorAll","console","warn","kev","raf","getActiveElement","closestElement","tagName","toLowerCase","debounceChanged","CustomEvent","slotChangeObserver","labelId","moreId","compWrapOptions","placeholder","wrapOptions","hasValue","controlId","controlOptions","clearControl","type","aria-disabled","createColorClasses","color","has-value","is-invalid","has-label","has-float-label","has-multiple","has-clr-btn","masked","FormControlWrap","FormControl","onClearText","control","endValueSlot","slot","multipleValues","getLabel","id","aria-labelledby","form","readOnly","onNanoOptionsUpdated","onNanoSelect","onNanoDeselect","undefined","select","onInvalid","autoFocus","autocomplete","onKeyDown","onInput","onTouchStart","onMouseDown","i","toReturn","onDragOver","draggable","data-value","span","push","onTouchEnd","onMouseUp"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n // These can be overwritten, but are autatically set from context components\n\n // --padding-top: inherit;\n // --padding-bottom: inherit;\n // --padding-start: inherit;\n // --padding-end: inherit;\n // --margin: inherit;\n\n // --secondary-padding-top: inherit;\n // --secondary-padding-bottom: inherit;\n // --secondary-padding-start: inherit;\n // --secondary-padding-end: inherit;\n\n // --border-bottom: inherit;\n // --icon-size: inherit;\n\n // --color: inherit;\n // --color-hover: inherit;\n // --color-focus: inherit;\n // --color-selected: inherit;\n // --color-open: inherit;\n\n // --bg-color: inherit;\n // --bg-color-hover: inherit;\n // --bg-color-selected: inherit;\n // --bg-color-open: inherit;\n // --bg-color-focus: inherit;\n\n // --secondary-bg-color: inherit;\n // --secondary-color: inherit;\n\n opacity: inherit;\n display: block;\n color: var(--color) !important;\n margin: var(--margin);\n\n ::slotted(*),\n * {\n box-sizing: border-box;\n }\n\n ::slotted(button),\n button {\n background: none;\n border: none;\n }\n\n ::slotted(button),\n ::slotted(a),\n ::slotted(a:visited),\n button,\n a,\n a:visited {\n @include text-inherit();\n @include padding(\n var(--padding-top),\n var(--padding-end),\n var(--padding-bottom),\n var(--padding-start)\n );\n\n display: var(--display, block);\n white-space: nowrap;\n color: var(--color) !important;\n background-color: var(--bg-color);\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n @include padding(null, var(--padding-end), null, null);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n @include padding(null, null, null, var(--padding-start));\n }\n\n .link {\n &::slotted(nano-icon[slot='icon-start']),\n ::slotted(nano-icon[slot='icon-start']) {\n @include padding(null, 0, null, var(--padding-start));\n }\n\n &::slotted(nano-icon[slot='icon-end']),\n ::slotted(nano-icon[slot='icon-end']) {\n @include padding(null, var(--padding-end), null, 0);\n }\n }\n\n .link,\n button,\n a {\n border-bottom: var(--border-bottom);\n display: flex;\n align-items: center;\n }\n\n .secondary-menu {\n display: none;\n }\n\n ::slotted(a:hover),\n ::slotted(button:hover),\n .link:hover,\n button:hover,\n a:hover {\n text-decoration: inherit !important;\n }\n\n button:focus,\n a:focus {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: var(--focus-outline, none);\n }\n\n ::slotted(a:focus),\n ::slotted(button:focus) {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: none;\n }\n}\n\n.nav-item {\n &.selected {\n .link,\n button,\n a {\n color: var(--color-selected, var(--color-open, var(--color))) !important;\n background-color:\n var(\n --bg-color-selected,\n var(--bg-color-open, var(--bg-color))\n );\n }\n }\n\n &.secondary-open {\n button,\n a {\n color: var(--color-open, var(--color-selected, var(--color))) !important;\n background-color:\n var(\n --bg-color-open,\n var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n );\n }\n }\n\n &.disabled {\n opacity: 0.6;\n\n button,\n a {\n color: var(--color-disabled, var(--color)) !important;\n }\n }\n\n &:not(.nano-menu) {\n ::slotted(a:hover),\n ::slotted(button:hover),\n .link:hover,\n button:hover,\n a:hover {\n color: var(--color-hover, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-hover,\n var(--bg-color-focus, var(--bg-color))\n );\n }\n }\n}\n\n:host(.has-focus) {\n .link {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n a,\n a:visited,\n button,\n .link {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n color: 'currentColor';\n text-decoration: inherit;\n white-space: normal;\n cursor: pointer;\n line-height: 1.2;\n width: 100%;\n }\n\n .text {\n @include padding(null, var(--padding-end), null, 0);\n\n flex: 1;\n }\n\n ::slotted(a),\n ::slotted(button) {\n flex: 1;\n }\n\n ::slotted(a:focus),\n ::slotted(button:focus) {\n box-shadow: none;\n }\n\n .secondary-menu {\n display: none;\n position: absolute;\n color: var(--secondary-color, 'currentColor');\n min-height: 100%;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 1;\n opacity: 0;\n transition: opacity 0.2s ease, transform 0.3s ease;\n background-color: var(--secondary-bg-color, white);\n transform: translateX(100%);\n\n &:focus {\n outline: none;\n }\n\n &.open {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 0.3s ease, transform 0.2s ease;\n }\n }\n}\n\n:host(.nano-global-nav-menu) {\n ::slotted(nano-icon[slot='icon-start']) {\n @include padding(0, var(--padding-end), 0, 0);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n @include padding(0, var(--padding-end), 0, 0);\n\n font-size: 10px;\n flex: 0 0 10px;\n pointer-events: none;\n }\n\n button,\n a {\n ::slotted(nano-icon[slot='icon-end']) {\n padding: 0;\n }\n }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n .secondary-menu {\n left: auto;\n right: 0;\n transform: translateX(-100%);\n\n &.open {\n transform: translateX(0);\n }\n }\n}\n\n:host(.nano-menu) {\n .secondary-menu-content {\n @include padding(\n var(--secondary-padding-top),\n var(--secondary-padding-end),\n var(--secondary-padding-bottom),\n var(--secondary-padding-start)\n );\n }\n}\n\n// I'm sorry. Horrible IE fixes for collapsing stuff :/\n:host(.nano-global-nav-bar.legacy) {\n margin: 0 11px;\n\n ::slotted(a) {\n @include padding(7px, 6px, 7px, 6px);\n }\n}\n\n:host(.nano-global-nav-menu.legacy) {\n ::slotted(a) {\n @include padding(8px, 12px, 8px, 12px);\n }\n}\n\n:host(.nano-global-nav-bar) {\n .link,\n a,\n button {\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n\n .text {\n flex: 1 0 auto;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n @include margin(0, 0, 0, var(--padding-end));\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n @include margin(0, var(--padding-start), 0, 0);\n }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n button {\n position: relative;\n\n &::before {\n content: '';\n background: rgb(134, 190, 226);\n height: 3px;\n left: 5px;\n bottom: -14px;\n right: 5px;\n position: absolute;\n transform: translateZ(0) scaleX(0);\n transform-origin: 0;\n transition: 0.2s ease transform;\n }\n }\n\n .selected button::before,\n .secondary-open button::before {\n transform: translateZ(0) scaleX(1);\n }\n\n .secondary-open button::before {\n opacity: 0.5;\n }\n\n .secondary-menu {\n display: none;\n transition: transform 0.3s ease;\n transform: translateY(-100%) translateZ(0);\n background-color: var(--secondary-bg-color, #196c82);\n color: var(--secondary-color);\n position: absolute;\n box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);\n left: 0;\n right: 0;\n z-index: -2;\n outline: none;\n\n &.open {\n transform: translateY(12px) translateZ(0);\n }\n }\n}\n\n:host(.nano-menu-drawer) {\n .link,\n a,\n button {\n @include padding(\n calc(var(--padding-top) / 2),\n 0,\n calc(var(--padding-bottom) / 2),\n var(--padding-start)\n );\n\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n color: currentColor;\n text-decoration: inherit;\n white-space: normal;\n border: none;\n cursor: pointer;\n line-height: 1.2;\n width: 100%;\n }\n\n .text {\n @include padding(null, var(--padding-end), null, 0);\n\n text-align: left;\n flex: 0 1 auto;\n min-width: 130px;\n width: 130px;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n @include padding(0, var(--padding-end), 0, 0);\n\n font-size: var(--icon-size);\n width: var(--icon-size);\n flex: 0 0 var(--icon-size);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n @include padding(0, var(--padding-end), 0, 0);\n\n font-size: 10px;\n flex: 0 0 20px;\n min-width: 20px;\n }\n\n .secondary-menu {\n display: none;\n position: absolute;\n background-color: var(--secondary-bg-color);\n color: var(--secondary-color);\n height: 100vh;\n top: 0;\n right: 0;\n left: auto;\n bottom: 0;\n transform: translateX(0);\n z-index: -1;\n transition: transform 0.3s ease, opacity 0.2s ease;\n overflow-y: auto;\n width: var(--secondary-width, 400px);\n max-width: 62vw;\n opacity: 1;\n\n @include padding(\n var(--secondary-padding-top, var(--padding-top)),\n var(--secondary-padding-end, var(--padding-end)),\n var(--secondary-padding-bottom, var(--padding-bottom)),\n var(--secondary-padding-start, var(--padding-start))\n );\n\n &:focus {\n outline: none;\n }\n\n &.open {\n transform: translateX(100%);\n // opacity: 1;\n }\n }\n}\n\n:host(.nano-menu-drawer.legacy) {\n .link,\n a,\n button {\n width: auto;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n @include padding(0, calc(var(--padding-end) * 2), 0, 0);\n\n font-size: 10px;\n flex: 0 0 20px;\n min-width: 20px;\n }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n .text {\n text-align: right;\n }\n\n .secondary-menu {\n right: auto;\n left: 0;\n transform: translateX(0%);\n\n &.open {\n transform: translateX(-100%);\n opacity: 1;\n }\n }\n}\n","import {\n Component,\n h,\n Host,\n Element,\n Prop,\n Watch,\n EventEmitter,\n Event,\n State,\n Method,\n ComponentInterface,\n} from '@stencil/core';\nimport { displayTransition, getDirectChildren, getSiblings } from '../../utils';\nimport { NavItemEventDetail } from '../../interface';\n\n/**\n * Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n */\n@Component({\n tag: 'nano-nav-item',\n styleUrl: 'nav-item.scss',\n shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n private hasSecondarySlot: boolean = false;\n private hasAnchorEle: boolean = false;\n private secondaryDiv: HTMLDivElement;\n private btn: HTMLButtonElement | HTMLAnchorElement;\n private didBlur: boolean = false;\n private fromHover: boolean;\n private animating: boolean = false;\n private waitHide: number;\n private waitShow: number;\n private globalNavEle?: HTMLNanoGlobalNavElement;\n\n @State() didOpen: boolean = false;\n @State() isInGlobalNav: boolean = false;\n @State() isInMenuDrawer: boolean = false;\n @State() isInMenu: boolean = false;\n @State() isLegacy: boolean = !document.head.attachShadow;\n @State() hasFocus: boolean = false;\n @Element() private el: HTMLNanoNavItemElement;\n\n /**\n * Href to link to\n */\n @Prop({ mutable: true }) href: string = null;\n\n /**\n * Target to use for links\n */\n @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n /**\n * Disable the nav item\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Whether a secondary menu should be or is currently open\n */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /**\n * Whether this menu item is currently 'selected'\n */\n @Prop({ reflect: true }) selected: boolean = false;\n\n /**\n * Screen pixel width to activate the secondary menu\n */\n @Prop() secondaryActiveWidth: number = 0;\n\n /**\n * Secondary fallback function for when the secondary menu is no longer active.\n */\n @Prop() secondaryFallback = () => {};\n\n /**\n * Whether secondary menus should close on blur\n */\n @Prop() closeOnBlur: boolean = true;\n\n /**\n * Emitted when the nav item closes it's secondary navigation.\n */\n @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n /**\n * Emitted when the nav item opens it's secondary navigation.\n */\n @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n /**\n * Emitted when the nav item is about to open it's secondary navigation.\n */\n @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n /**\n * Emitted when the nav item is about to close it's secondary navigation.\n */\n @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n /**\n * Emitted when the nav item loses focus.\n */\n @Event() nanoBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the nav item has focus.\n */\n @Event() nanoFocus!: EventEmitter<void>;\n\n /**\n * Sets focus on the first button or anchor present. Use this method instead of the global\n * `element.focus()`.\n */\n @Method()\n async setFocus() {\n if (!this.btn) return;\n this.btn.focus();\n }\n\n /**\n * Public open watcher\n */\n @Watch('open')\n openChange() {\n this.open ? this.openSecondary() : this.closeSecondary();\n }\n\n /**\n * Internal open watcher\n */\n @Watch('didOpen')\n didOpenChange() {\n if (!this.hasSecondarySlot) return;\n\n if (!this.didOpen) {\n /* the secondadry panel is not closing via hover,\n remove blur events, add focus back to originating button */\n if (!this.fromHover) {\n this.btn.removeEventListener('focusout', this.blur);\n this.secondaryDiv.removeEventListener('focusout', this.blur);\n }\n setTimeout(() => {\n if (!this.fromHover && !this.didBlur)\n this.btn.focus({ preventScroll: true });\n this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n }, 50);\n } else {\n this.didBlur = false;\n\n /* the secondadry panel is not opening via hover,\n scroll content into view, focus on it and add blur events */\n if (!this.fromHover) {\n const panelio = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].boundingClientRect.top < 0) {\n this.secondaryDiv.scrollIntoView({\n behavior: 'smooth',\n });\n }\n panelio.disconnect();\n },\n { threshold: 1 }\n );\n panelio.observe(this.secondaryDiv);\n this.secondaryDiv.focus({ preventScroll: true });\n\n this.btn.addEventListener('focusout', this.blur);\n this.secondaryDiv.addEventListener('focusout', this.blur);\n window.addEventListener('blur', this.blur);\n\n this.el.tabIndex = -1;\n this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n }\n }\n }\n\n private closeSecondary = async () => {\n this.open = false;\n if (!this.hasSecondarySlot || !this.didOpen) return;\n\n this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n let status = await displayTransition(this.secondaryDiv, 'open', false);\n this.didOpen = status !== 'hidden';\n };\n\n private openSecondary = async () => {\n if (window.innerWidth < this.secondaryActiveWidth) {\n this.secondaryFallback.call(this);\n return;\n }\n this.open = true;\n if (!this.hasSecondarySlot || this.didOpen) return;\n\n this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n let status = await displayTransition(this.secondaryDiv, 'open', true);\n this.didOpen = status === 'shown';\n };\n\n private toggleSecondary = () => {\n if (!this.hasSecondarySlot) return;\n if (this.didOpen) this.closeSecondary();\n else this.openSecondary();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n // opens secondary panel when activated via hover\n if (this.href && !this.animating && this.hasSecondarySlot)\n this.openSecondary();\n this.nanoFocus.emit();\n };\n\n private handleHostBlur = () => {\n if (this.animating) return;\n\n // tab index is added to host when secondary panel opens\n // to return focus after secondary panel closes. Remove now if it was added\n this.el.removeAttribute('tabindex');\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n // direct host clicks to internal button\n private handleHostClick = (ev: MouseEvent) => {\n if (!this.hasAnchorEle) return;\n let foundlink = (ev.target as HTMLElement).closest('a, button');\n if (!foundlink) this.btn.click();\n };\n\n // handles secondary menu hover behaviour.\n private handleMouseEnter = async () => {\n if (\n !this.href ||\n this.animating ||\n !this.hasSecondarySlot ||\n (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n )\n return;\n\n // if there are sibling secondary panels currently open,\n // we need to wait before opening otherwise we get unwanted overlapping\n let timeToWait = 0;\n if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n timeToWait = 300;\n\n clearTimeout(this.waitHide);\n this.fromHover = true;\n this.animating = true;\n this.waitShow = window.setTimeout(\n async () => await this.openSecondary(),\n timeToWait\n );\n this.animating = false;\n };\n\n // handles secondary menu hover-out behaviour.\n private handleMouseLeave = () => {\n if (!this.href) return;\n clearTimeout(this.waitShow);\n this.fromHover = true;\n this.animating = true;\n\n // prevent closing immediately - makes navigating to items within more forgiving\n this.waitHide = window.setTimeout(\n async () => await this.closeSecondary(),\n 300\n );\n this.animating = false;\n };\n\n private handleClick = () => {\n this.fromHover = false;\n if (this.hasSecondarySlot) this.toggleSecondary();\n else this.el.querySelector<HTMLElement>('*')?.click();\n };\n\n // utility to traverse up, to see if element is nested within current nav-item\n private foundThisNavEle(el: HTMLElement): boolean {\n let found = el.closest('nano-nav-item');\n found = found === el ? el.parentElement.closest('nano-nav-item') : found;\n\n if (!found) return false;\n if (found === this.el) return true;\n return this.foundThisNavEle(found);\n }\n\n private blur = (ev: FocusEvent) => {\n if (!this.didOpen || this.animating) return;\n if (!this.closeOnBlur) return;\n\n // if event is associated with this element don't close\n if (ev && ev.relatedTarget) {\n if (\n ev.relatedTarget === this.el ||\n ev.relatedTarget === this.btn ||\n this.foundThisNavEle(ev.relatedTarget as HTMLElement)\n ) {\n this.secondaryDiv.focus({ preventScroll: true });\n return;\n }\n }\n\n this.btn.removeEventListener('focusout', this.blur);\n this.secondaryDiv.removeEventListener('focusout', this.blur);\n window.removeEventListener('blur', this.blur);\n\n this.didBlur = true;\n\n this.open = false;\n if (!ev.relatedTarget)\n setTimeout(() => {\n this.el.focus({ preventScroll: true });\n }, 50);\n };\n\n componentWillLoad() {\n let secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n this.hasSecondarySlot = !!secondaryEle;\n\n let link = getDirectChildren(this.el, 'a, button')[0] as\n | HTMLAnchorElement\n | HTMLButtonElement;\n this.hasAnchorEle = !!link;\n\n if (link) {\n this.href = (link as HTMLAnchorElement).href\n ? (link as HTMLAnchorElement).href\n : null;\n this.btn = link;\n if (this.hasSecondarySlot)\n this.btn.addEventListener('click', this.toggleSecondary);\n\n this.btn.addEventListener('focus', this.handleFocus);\n this.btn.addEventListener('blur', this.handleHostBlur);\n }\n }\n\n connectedCallback() {\n this.isInGlobalNav = false;\n this.isInMenuDrawer = false;\n this.globalNavEle = this.el.closest('nano-global-nav');\n\n this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n this.isInMenu = !!this.el.closest('nano-menu');\n this.isInGlobalNav =\n this.el.parentElement === this.globalNavEle ||\n !!this.el.closest('.global-nav');\n }\n\n render() {\n return (\n <Host\n class={{\n 'has-secondary': this.hasSecondarySlot,\n 'secondary-open': this.open,\n selected: this.selected,\n 'has-focus': this.hasFocus,\n disabled: this.disabled,\n 'nano-global-nav': this.isInGlobalNav,\n 'nano-menu-drawer': this.isInMenuDrawer,\n 'nano-menu': this.isInMenu,\n legacy: this.isLegacy,\n }}\n onBlur={this.handleHostBlur}\n dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onClick={this.handleHostClick}\n role=\"menuitem\"\n >\n <div\n class={{\n 'nav-item': true,\n 'secondary-open': this.open,\n selected: this.selected,\n }}\n >\n {this.href && !this.hasAnchorEle && !this.disabled && (\n <a\n target={this.target}\n ref={(a) => (this.btn = a)}\n href={this.href}\n onFocus={this.handleFocus}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </a>\n )}\n {((!this.hasAnchorEle && !this.href) || this.disabled) && (\n <button\n ref={(btn) => (this.btn = btn)}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n disabled={this.disabled}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </button>\n )}\n {this.hasAnchorEle && !this.disabled && (\n <div class=\"link\">\n <slot name=\"icon-start\" />\n <slot />\n <slot name=\"icon-end\" />\n </div>\n )}\n {this.hasSecondarySlot && !this.disabled && (\n <div\n class=\"secondary-menu\"\n ref={(div) => (this.secondaryDiv = div)}\n tabindex=\"-1\"\n >\n <div class=\"secondary-menu-content\">\n <slot name=\"secondary\" />\n </div>\n <div\n class=\"secondary-menu-mask\"\n onClick={this.closeSecondary}\n ></div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n@import '../form-control/form-control';\n@import '../form-control/form-control-vars';\n\n:host {\n @include formControlVars;\n\n position: relative;\n width: 100%;\n padding: 0 !important;\n font-family: $font-family-base;\n display: inline-block;\n}\n\n:host(.nano-color) {\n --input-border-style--focus: #{$input-border-style} var(--nano-color-tint, #{nano-color(primary, tint)});\n --multi-input-value-bg: var(--nano-color-tint-rgb);\n --multi-input-value-border: var(--nano-color-shade);\n --multi-input-value-text-color: var(--nano-color-contrast);\n\n color: current-color(base);\n}\n\n:host-context(nano-item:not(.item-label)) {\n --padding-start: 0;\n}\n\n:host([disabled]:not([disabled='false'])) {\n opacity: 0.7;\n\n * {\n pointer-events: none !important;\n }\n}\n\nselect {\n display: none;\n}\n\n.native-input {\n @include border-radius(var(--input-border-radius));\n @include padding(0, var(--padding-end), 0, var(--padding-start));\n @include text-inherit();\n\n text-overflow: ellipsis;\n color: var(--input-text-color);\n display: inline-block;\n flex: 1;\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n border: 0;\n outline: none;\n background: transparent;\n appearance: none;\n line-height: 2.5em;\n min-height: 2.5em;\n margin: 0;\n box-sizing: border-box;\n resize: none;\n overflow: hidden;\n cursor: default;\n\n &::selection {\n background: transparent;\n }\n\n &::-moz-selection {\n background: transparent;\n }\n\n &[disabled] {\n opacity: 0.4;\n }\n\n &::placeholder {\n color: var(--placeholder-color);\n font-family: inherit;\n font-style: var(--placeholder-font-style);\n font-weight: var(--placeholder-font-weight);\n opacity: var(--placeholder-opacity);\n line-height: 2.5em;\n min-height: 2.5em;\n // text-overflow: ellipsis;\n }\n\n &::-moz-placeholder {\n line-height: 2.8em;\n text-overflow: ellipsis;\n }\n\n &:-webkit-autofill {\n background-color: transparent;\n }\n\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n appearance: none;\n }\n\n &:invalid {\n box-shadow: none;\n }\n\n &::-ms-clear,\n &::-ms-reveal {\n display: none;\n }\n\n &.resizable {\n resize: vertical;\n overflow: auto;\n }\n\n .textarea & {\n line-height: 1.5em;\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n white-space: pre-wrap;\n\n &::placeholder {\n line-height: 1.5em;\n }\n }\n\n .has-float-label & {\n padding-top: 1.4em;\n }\n\n .has-float-label.textarea & {\n padding-top: 1.8em;\n }\n\n .legacy & {\n box-sizing: content-box;\n }\n\n :host(.masked) & {\n opacity: 0;\n position: absolute;\n left: 0;\n top: 0;\n }\n}\n\n.select-mask {\n @include border-radius(var(--input-border-radius));\n @include padding(0, var(--padding-end), 0, var(--padding-start));\n @include text-inherit();\n\n pointer-events: none;\n line-height: 2.5em;\n min-height: 2.5em;\n}\n\n// multi stuff\n\n.multi {\n &-wrap {\n @include padding(\n 0,\n 0,\n calc(var(--padding-bottom) / 2),\n 0\n );\n\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n max-width: 100%;\n\n :host(.has-float-label) & {\n padding-top: 1.3em;\n }\n }\n\n &-input {\n @include text-inherit();\n @include padding(\n calc(var(--padding-top) / 2),\n var(--padding-end),\n 0,\n var(--padding-start)\n );\n\n min-width: 50px;\n max-width: 100%;\n max-height: 100%;\n appearance: none;\n border: 0;\n outline: none;\n display: inline-block;\n background: transparent;\n flex: 0;\n position: relative;\n min-height: calc(2.78em - var(--padding-top));\n box-sizing: border-box;\n\n :host(.legacy) & {\n box-sizing: content-box;\n }\n\n &:last-child {\n flex: 1;\n }\n }\n\n &-value {\n @include margin(4px, 0, 0, 4px);\n\n background: rgba(var(--multi-input-value-bg), 0.8);\n color: var(--multi-input-value-text-color);\n border: 1px solid;\n border-color: var(--multi-input-value-border);\n padding: 0.3em 0.5em;\n border-radius: 3px;\n line-height: 1;\n max-width: 100%;\n display: flex;\n align-items: center;\n font-size: var(--input-font-size);\n font-weight: 600;\n letter-spacing: 1px;\n\n span {\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n overflow: hidden;\n line-height: 1.4;\n }\n }\n\n &-value-remove {\n @include margin(0);\n @include background-position(center);\n @include padding(0, 0, 0, 0.5em);\n\n color: inherit;\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n appearance: none;\n display: flex;\n align-items: center;\n top: 0;\n font-size: 1em;\n\n nano-icon {\n --color: var(--multi-input-value-text-color);\n }\n }\n}\n\n.placeholder-as-label {\n :host(.has-focus.has-multiple) & {\n transform: translateY(-120%);\n font-size: 0.9em;\n }\n}\n\n:host(.has-focus) select,\n:host(.has-focus) a,\n:host(.has-focus) button {\n pointer-events: auto;\n}\n","import {\n Build,\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n State,\n Watch,\n h,\n VNode,\n Listen,\n} from '@stencil/core';\n\nimport {\n Color,\n SelectChangeEventDetail,\n InputChangeEventDetail,\n ControlValidityEventDetail,\n ControlValidity,\n} from '../../interface';\nimport {\n debounceEvent,\n createColorClasses,\n closestElement,\n raf,\n getActiveElement,\n} from '../../utils';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport { FormControl, FormControlWrap } from '../form-control/form-control';\nimport { OptionInterface } from '../option/option-interface';\n\nlet selectIds = 0;\n\n/**\n * The select component is a wrapper to the HTML select element with custom styling and additional functionality.\n * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).\n * It's multi selection functionality is vastly improved from the native solution. It allows for the control of\n * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.\n *\n * @slot start - suitable for inline action buttons or icons that may add extra contextual information\n * @slot end - suitable for inline action buttons or icons that may add extra contextual information\n * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot down-arrow - use this to replace the default down arrow\n * @slot - default slot; nest `nano-option` elements\n */\n@Component({\n tag: 'nano-select',\n styleUrl: 'select.scss',\n scoped: true,\n})\nexport class Select implements ComponentInterface {\n private nativeSelect?: HTMLSelectElement;\n private inputCtrl?: HTMLInputElement;\n private valueItems: Array<HTMLSpanElement> = [];\n private dragVal: string;\n private mo?: MutationObserver;\n private selectId = `nano-select-${selectIds++}`;\n private rtl: boolean = false;\n private onInit: boolean = true;\n private isLegacy: boolean = 'registerElement' in document;\n\n // we don't want these rendered eles decorated with @State\n // because that will cause re-renders. User get/set to set datalist options\n private _selectWrap: HTMLElement;\n private get selectWrap() {\n return this._selectWrap;\n }\n private set selectWrap(ele: HTMLElement) {\n if (this._selectWrap === ele) return;\n this._selectWrap = ele;\n this.setDataListOpts();\n }\n\n private _datalist: HTMLNanoDatalistElement;\n private get datalist() {\n return this._datalist;\n }\n private set datalist(ele: HTMLNanoDatalistElement) {\n if (this._datalist === ele) return;\n this._datalist = ele;\n this.setDataListOpts();\n }\n\n @State() currInsertIndex: number = -1;\n @State() showErrorMsg = false;\n @State() errorMessage: string = '';\n @State() hasFocus = false;\n @State() hasLabelSlot: boolean = false;\n @State() hasHelperSlot: boolean = false;\n @State() inputSearchVal: string = '';\n\n @Element() el!: HTMLNanoSelectElement;\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.\n */\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n private _invalid = false;\n\n /**\n * The color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n */\n @Prop() color?: Color;\n\n /**\n * This Boolean attribute lets you specify that a form control should have select focus when the page loads.\n */\n @Prop() autofocus = false;\n\n /**\n * If `true`, the user cannot interact with the select.\n */\n @Prop({ reflect: true }) disabled = false;\n\n /**\n * When should the field perform validation\n */\n @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n 'submit';\n\n /**\n * Whether to show validation errors underneath input\n */\n @Prop({ reflect: true }) showInlineError = true;\n\n /**\n * String to place within a label element. Alternatively use the 'label' slot\n */\n @Prop() label!: string;\n\n /**\n * Visually hide the label - but make it accessible.\n */\n @Prop() hideLabel?: boolean = false;\n\n /**\n * Enable floating label behaviour. Will disable placeholder if set.\n */\n @Prop() floatLabel: boolean = false;\n\n /**\n * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n */\n @Prop() multiple?: boolean = false;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.selectId + '-name';\n\n /**\n * Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value.\n */\n @Prop() placeholder?: string | null;\n\n /**\n * If `true`, the user cannot modify the value.\n */\n @Prop({ reflect: true }) readonly = false;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required = false;\n\n /**\n * The initial size of the control.\n */\n @Prop() size?: number;\n\n /**\n * Maximum number of options that can be selected when multiple is true\n */\n @Prop() max?: number;\n\n /**\n * Minimum number of options that can be selected when multiple is true\n */\n @Prop() min?: number;\n\n /**\n * The form element to associate the select with (its form owner). Must be the id of a form.\n */\n @Prop() form?: string | null;\n\n /**\n * in multiple mode, allow users to enter their own values\n */\n @Prop() allowCustomValues: boolean = false;\n\n /**\n * The value of the select.\n */\n @Prop()\n get value() {\n return this._value;\n }\n set value(val: string | string[]) {\n if (typeof val === 'string') {\n if (this.multiple) this._value = val.split(',');\n else this._value = val;\n } else if (Array.isArray(val)) {\n if (this.multiple) this._value = val;\n else this._value = val[0];\n }\n }\n private _value: Array<string> | string = this.multiple ? [] : '';\n\n /**\n * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or\n * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.\n * Alternatively, you can nest `<nano-option>` elements within a `<nano-select>`\n * Regardless - reading `options` will return the current component options - slotted or otherwise\n */\n @Prop()\n get options(): Array<OptionInterface | string> {\n if (this._options.length) return this._options;\n\n if (!this.datalist || !this.datalist.activeOptions) return [];\n\n return this._eOptions.map((ao) => {\n const { value, selected, label, filterMeta } = ao;\n return { value, selected, label, filterMeta };\n });\n }\n set options(opts: Array<OptionInterface | string>) {\n this._options = opts.map((opt) => {\n if (typeof opt === 'string') return { value: opt, label: opt };\n else return opt;\n });\n }\n private _options: OptionInterface[] = [];\n @State() _eOptions: OptionInterface[] = [];\n\n /**\n * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.\n */\n @Prop() clearSelect = false;\n\n /**\n * Hide the native select element and cover with a value 'mask'.\n * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple=\"true\".\n */\n @Prop() mask = false;\n\n /**\n * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.\n */\n @Prop() debounce = 0;\n\n @Watch('debounce')\n protected debounceChanged() {\n this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);\n }\n\n @Watch('required')\n @Watch('disabled')\n @Watch('min')\n @Watch('max')\n @Watch('validateOn')\n @Watch('readonly')\n protected shouldValidate() {\n if (this.onInit) return;\n if (this.invalid) this.showErrorMsg = this._invalid = false;\n\n this.customValidate();\n if (this.validateOn !== 'dirty') return;\n this.showInlineValidation();\n }\n\n /**\n * Update the native select element when the value changes\n */\n // eslint-disable-next-line @stencil/no-unused-watch\n @Watch('value')\n valueChanged() {\n if (this.onInit) {\n if (this.multiple) this.currInsertIndex = this.value.length - 1;\n return;\n }\n setTimeout((_) => this.shouldValidate(), 20);\n this.nanoChange.emit({ value: this.value });\n }\n\n /** nano-dropdown config options you can pass to the nested dropdown component */\n @Prop({ mutable: true }) dropDownConfig?: Partial<Dropdown> = {};\n\n @Watch('dropDownConfig')\n setDataListOpts() {\n if (!this.datalist || !this.selectWrap) return;\n const currDWConfig = this.datalist.dropDownConfig || {};\n this.datalist.dropDownConfig = {\n ...currDWConfig,\n ...this.dropDownConfig,\n tetherTo: this.selectWrap,\n };\n this.datalist.input = this.inputCtrl;\n }\n\n // Custom Events\n\n /**\n * Emitted when the value has changed.\n */\n @Event() nanoChange!: EventEmitter<SelectChangeEventDetail>;\n\n /**\n * Emitted when the select loses focus.\n */\n @Event() nanoBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the select has focus.\n */\n @Event() nanoFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the select has been created.\n * @internal\n */\n @Event() nanoDidLoad!: EventEmitter<void>;\n\n /**\n * Emitted when the select has been removed.\n * @internal\n */\n @Event() nanoDidUnload!: EventEmitter<void>;\n\n /**\n * Emitted when a keyboard input occurred on a multiple=\"true\" input\n */\n @Event() nanoSearchChange!: EventEmitter<InputChangeEventDetail>;\n\n /**\n * Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n */\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n // Public Methods\n\n /**\n * Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }`\n */\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n if (validateFirst) this.showInlineValidation();\n return {\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n };\n }\n\n /**\n * Sets focus on the specified `nano-select`. Use this method instead of the global\n * `select.focus()`.\n */\n @Method()\n async setFocus() {\n this.inputCtrl.focus();\n setTimeout(() => this.inputCtrl.click(), 50);\n }\n\n /**\n * Returns the native `<select>` element used under the hood.\n */\n @Method()\n getSelectElement(): Promise<HTMLSelectElement> {\n return Promise.resolve(this.nativeSelect!);\n }\n\n /**\n * Invalidate the field and show a custom error message.\n * To clear the error you will need to re-call this method with an empty string.\n */\n @Method()\n async showError(message: string) {\n if (this.nativeSelect) {\n this.nativeSelect.setCustomValidity(message);\n this.showInlineValidation();\n }\n }\n\n /* Logic */\n\n private get valArray() {\n return typeof this.value === 'string'\n ? this.value.length\n ? [this.value]\n : []\n : this.value;\n }\n\n private isValidValues() {\n return this.valArray.find((val) =>\n (this.options as OptionInterface[]).find((opt) => opt.value === val)\n );\n }\n\n private customValidate = () => {\n this.nativeSelect.setCustomValidity('');\n\n // add custom validations 'cos html5 validations are a bit rubbish on selects\n if (this.required && !this.valArray.length) {\n this.nativeSelect.setCustomValidity('Please fill in this field.');\n return true;\n }\n if (\n this.valArray.length &&\n !this.allowCustomValues &&\n !this.isValidValues()\n ) {\n this.nativeSelect.setCustomValidity(\n 'Please choose an item from this field.'\n );\n return true;\n }\n if (this.max && this.valArray.length > this.max) {\n this.nativeSelect.setCustomValidity(\n `Only up to ${this.max} values are allowed.`\n );\n return true;\n }\n if (this.min && this.valArray.length < this.min) {\n this.nativeSelect.setCustomValidity(\n `You must select a minimum of ${this.min} values.`\n );\n return true;\n }\n return false;\n };\n\n private showInlineValidation = (ev?: Event) => {\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n this._invalid = false;\n this.showErrorMsg = false;\n this.errorMessage = '';\n\n if (!this.nativeSelect.validity.valid) {\n this.errorMessage = this.nativeSelect.validationMessage;\n this._invalid = true;\n this.showErrorMsg = true;\n }\n this.nanoValidate.emit({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n originalEvent: ev,\n });\n };\n\n private handleInvalid = (ev: Event) => {\n this._invalid = true;\n\n if (this.validateOn === 'submit')\n this._invalid = this.showErrorMsg = this.customValidate();\n if (this.showInlineError) ev.preventDefault();\n\n setTimeout((_) => this.showInlineValidation(ev), 20);\n };\n\n private setValue = (e: CustomEvent<HTMLNanoOptionElement>) => {\n e.preventDefault();\n\n if (!this.multiple) {\n this.value = e.detail.value;\n this.selectWrap.clientWidth; // force reflow\n this.inputCtrl.focus();\n return;\n }\n if (this.value && this.value.length && this.value.includes(e.detail.value))\n return;\n if (this.max && this.value.length === this.max) return;\n\n this.currInsertIndex++;\n this.value = [\n ...this.value.slice(0, this.currInsertIndex),\n e.detail.value,\n ...this.value.slice(this.currInsertIndex),\n ];\n this.inputSearchVal = '';\n // this.selectWrap.clientWidth; // force reflow\n };\n\n private removeValue = (toFind?: string) => {\n if (!this.multiple || !this.value.length) return;\n\n if (!toFind) toFind = this.value[this.value.length - 1];\n this.value = (this.value as Array<string>).filter((val) => val !== toFind);\n\n this.currInsertIndex--;\n // this.selectWrap.clientWidth; // force reflow\n this.setFocus();\n };\n\n private slotChangeObserver() {\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.el, { childList: true, subtree: true });\n }\n\n private processSlottedContent() {\n // see if we have label / helper content\n this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]').length;\n this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n\n // breaking change introduced in v2. Rm in v3\n if (\n !!this.el.querySelector('select:not([class*=\"sc-nano-select\"]) option')\n ) {\n console.warn(\n 'nesting `<option>` elements was removed in v2. Please update your code to use `<nano-option>` elements instead.',\n this.el\n );\n }\n\n // breaking change introduced in v2. Rm in v3\n if (!!this.el.querySelector('[slot=\"legacy\"]')) {\n console.warn(\n 'The `legacy` slot has been removed. Please update your code',\n this.el\n );\n }\n }\n\n private getLabel(toFind: string) {\n let label = (this.options as OptionInterface[]).find((opt) => {\n return !opt.disabled && opt.value?.length && opt.value === toFind;\n });\n return label && label.label ? label.label : toFind;\n }\n\n /* Event handling */\n\n @Listen('mousedown', { target: 'body' })\n @Listen('keydown')\n handleBlur(e: KeyboardEvent | MouseEvent) {\n if (!this.hasFocus) return;\n\n const kev = e as KeyboardEvent;\n let target: Element;\n\n raf(() => {\n if (kev.key) {\n if (kev.key !== 'Tab') return;\n target = getActiveElement();\n } else target = e.target as Element;\n\n if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n this.onBlur();\n }\n });\n }\n\n private setOptions = () => {\n if (\n !this.datalist ||\n !this.datalist.activeOptions ||\n !this.datalist.activeOptions.length\n )\n return;\n\n this._eOptions = this.datalist.activeOptions.map((ao) => {\n const { value, selected, label, filterMeta } = ao;\n return { value, selected, label, filterMeta };\n });\n };\n\n private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n if (!this.multiple || !this.hasFocus) return;\n\n if (!this.inputSearchVal) {\n let rm: HTMLSpanElement;\n\n switch (ev.key) {\n case 'Backspace':\n if (this.inputCtrl.previousElementSibling)\n rm = this.inputCtrl.previousElementSibling as HTMLSpanElement;\n else break;\n\n this.removeValue(rm.dataset.value || null);\n break;\n\n case 'Delete':\n if (this.inputCtrl.nextElementSibling)\n rm = this.inputCtrl.nextElementSibling as HTMLSpanElement;\n else break;\n\n this.removeValue(rm.dataset.value || null);\n break;\n\n case 'ArrowLeft':\n case 'ArrowRight':\n if (!this.value.length) break;\n\n if (ev.key === 'ArrowLeft' && this.inputCtrl.previousSibling)\n this.currInsertIndex--;\n if (ev.key === 'ArrowRight' && this.inputCtrl.nextSibling)\n this.currInsertIndex++;\n\n setTimeout(() => {\n this.inputCtrl.focus();\n }, 20);\n ev.preventDefault();\n break;\n }\n }\n };\n\n private onBlur = () => {\n this.hasFocus = false;\n\n setTimeout(() => {\n if (this.validateOn === 'dirty' && !this.hasFocus)\n this.showInlineValidation();\n }, 20);\n this.nanoBlur.emit();\n\n if (!this.allowCustomValues && this.multiple) {\n this.inputSearchVal = '';\n const event = new window.Event('change');\n this.inputCtrl.dispatchEvent(event);\n }\n };\n\n private onFocus = () => {\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private clearSelectValue = (ev?: Event) => {\n if (this.clearSelect && !this.readonly && !this.disabled && ev) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n\n if (this.multiple) {\n this.value = [];\n this.currInsertIndex = -1;\n } else this.value = '';\n\n this.inputCtrl.value = '';\n const event = new window.Event('change');\n this.inputCtrl.dispatchEvent(event);\n };\n\n private onClick = () => {\n this.setFocus();\n };\n\n /* Multi event handlers */\n\n private onDragStart = (ev: MouseEvent) => {\n let ele = ev.target as HTMLSpanElement;\n this.dragVal = ele.dataset.value;\n };\n\n private onDragEnd = (ev) => {\n this.dragVal = null;\n ev.preventDefault();\n };\n\n private onDragLeave = (ev: MouseEvent) => {\n let ele = ev.target as HTMLSpanElement;\n let spanVal: string =\n ele.dataset && ele.dataset.value ? ele.dataset.value : null;\n\n if (\n !spanVal ||\n this.dragVal === spanVal ||\n !this.value.includes(this.dragVal)\n ) {\n ev.preventDefault();\n return;\n }\n\n let to = this.value.indexOf(spanVal);\n let from = this.value.indexOf(this.dragVal);\n let tmpArr = this.value as Array<string>;\n let tmpVal = tmpArr[to];\n\n tmpArr[to] = tmpArr[from];\n tmpArr[from] = tmpVal;\n this.value = [...tmpArr];\n };\n\n private onMultiInput = (ev) => {\n this.inputSearchVal = ev.target.value.trim();\n this.nanoSearchChange.emit({ value: ev.target.value.trim() });\n };\n\n /* Stencil Component lifecycle hooks */\n\n connectedCallback() {\n this.debounceChanged();\n\n if (!Build.isBrowser) return;\n\n this.el.dispatchEvent(\n new CustomEvent('nanoDidLoad', {\n detail: this.el,\n })\n );\n }\n\n disconnectedCallback() {\n document.dispatchEvent(\n new CustomEvent('nanoDidUnload', {\n detail: this.el,\n })\n );\n\n if (!Build.isBrowser) return;\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n this.customValidate();\n this.setDataListOpts();\n raf(() => (this.onInit = false));\n }\n\n componentWillLoad() {\n this.processSlottedContent();\n }\n\n render() {\n const labelId = this.selectId + '-lbl';\n const moreId =\n this.showInlineError || this.hasHelperSlot\n ? this.selectId + '-moreId'\n : '';\n\n this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n this.valueItems = [];\n\n const compWrapOptions = (({\n el,\n floatLabel,\n label,\n errorMessage,\n showInlineError,\n hasHelperSlot,\n hasLabelSlot,\n hideLabel,\n placeholder,\n rtl,\n }) => ({\n el,\n floatLabel,\n label,\n errorMessage,\n showInlineError,\n hasHelperSlot,\n hasLabelSlot,\n hideLabel,\n placeholder,\n rtl,\n }))(this);\n const wrapOptions = {\n ...compWrapOptions,\n labelId,\n moreId,\n hasValue: !!this.value.length || !!this.inputSearchVal.length,\n controlId: this.selectId,\n };\n\n const controlOptions = (({ readonly, disabled }) => ({\n readonly,\n disabled,\n clearControl: this.clearSelect,\n }))(this);\n\n return (\n <Host\n type={this.multiple ? 'select-multiple' : 'select-one'}\n aria-disabled={this.disabled ? 'true' : null}\n class={{\n ...createColorClasses(this.color),\n 'has-value': !!this.value.length || !!this.inputSearchVal.length,\n 'has-focus': this.hasFocus,\n 'is-invalid': this.invalid,\n 'has-label': this.label !== null && !this.floatLabel,\n 'has-float-label': this.label !== null && this.floatLabel,\n rtl: this.rtl,\n 'has-multiple': this.multiple,\n 'has-clr-btn': this.clearSelect,\n masked: this.mask,\n legacy: this.isLegacy,\n }}\n >\n <FormControlWrap {...wrapOptions}>\n <FormControl\n {...controlOptions}\n onClearText={this.clearSelectValue}\n control={this.el}\n ref={(el) => (this.selectWrap = el)}\n endValueSlot={\n <slot name=\"down-arrow\">\n <nano-icon slot=\"value-end\" name=\"light/chevron-down\" />\n </slot>\n }\n >\n {this.multiple && (\n <div class=\"multi-wrap\">\n {this.multipleValues(labelId, moreId)}\n </div>\n )}\n {!this.multiple && [\n this.mask && (\n <div class=\"select-mask\">\n {this.getLabel(this.value as string)}\n </div>\n ),\n <input\n id={this.selectId}\n class=\"native-input\"\n ref={(input) => (this.inputCtrl = input)}\n aria-labelledby={labelId + ' ' + moreId}\n disabled={this.disabled}\n form={this.form}\n placeholder={\n !this.floatLabel && this.placeholder ? this.placeholder : ''\n }\n readOnly={true}\n required={this.required}\n value={this.getLabel(this.value as string)}\n onFocus={this.onFocus}\n />,\n ]}\n </FormControl>\n </FormControlWrap>\n {!this.readonly && !this.disabled && (\n <nano-datalist\n onNanoOptionsUpdated={this.setOptions}\n ref={(el) => (this.datalist = el)}\n selected={this.valArray}\n type={this.multiple ? 'selctMulti' : 'select'}\n onNanoSelect={this.setValue}\n onNanoDeselect={(e) => {\n e.preventDefault();\n this.removeValue(e.detail.value);\n }}\n options={this._options.length ? this._options : undefined}\n >\n {this.allowCustomValues && this.multiple && !!this.inputSearchVal && (\n <nano-option\n slot=\"list-top\"\n value={this.inputSearchVal}\n selected={false}\n label={this.inputSearchVal}\n onNanoSelect={() => this.inputCtrl.focus()}\n >\n <span slot=\"check-icon\"></span>\n Add '{this.inputSearchVal}'\n </nano-option>\n )}\n <slot />\n </nano-datalist>\n )}\n\n <select\n id={this.selectId + '-hidden'}\n class=\"native-select\"\n ref={(select) => (this.nativeSelect = select)}\n aria-labelledby={labelId + ' ' + moreId}\n disabled={this.disabled}\n form={this.form}\n multiple={this.multiple}\n name={this.name}\n required={this.required}\n onInvalid={this.handleInvalid}\n >\n {this.allowCustomValues &&\n this.valArray.map((val) => {\n return (\n <option value={val} selected={true}>\n {val}\n </option>\n );\n })}\n {!this.allowCustomValues &&\n this.options.map((opt: OptionInterface) => {\n return (\n <option\n value={opt.value}\n selected={this.valArray.includes(opt.value)}\n disabled={opt.disabled}\n label={opt.label}\n >\n {this.valArray.includes(opt.value)}\n </option>\n );\n })}\n </select>\n </Host>\n );\n }\n\n private multipleValues(\n labelId: string,\n moreId: string\n ): VNode | (VNode | VNode[])[] {\n let input: VNode = (\n <input\n class=\"multi-input\"\n id={this.selectId}\n ref={(input) => (this.inputCtrl = input)}\n readOnly={this.readonly}\n disabled={this.disabled}\n autoFocus={this.autofocus}\n autocomplete=\"off\"\n onKeyDown={this.handleDocumentKeyDown}\n onInput={this.onMultiInput}\n value={this.inputSearchVal}\n onTouchStart={this.onClick}\n onMouseDown={this.onClick}\n onFocus={this.onFocus}\n placeholder={\n this.placeholder && !this.floatLabel && !this.value.length\n ? this.placeholder\n : ''\n }\n aria-labelledby={labelId + ' ' + moreId}\n />\n );\n if (!this.value.length) return input;\n\n return (this.value as Array<string>).map((val, i) => {\n let toReturn: VNode | VNode[] = (\n <span\n onDragStart={this.onDragStart}\n onDragLeave={this.onDragLeave}\n onDragEnd={this.onDragEnd}\n onDragOver={(e) => e.preventDefault()}\n draggable\n data-value={val}\n ref={(span) => this.valueItems.push(span)}\n class=\"multi-value\"\n >\n <span>{this.getLabel(val)}</span>\n <button\n class=\"multi-value-remove\"\n type=\"button\"\n tabindex=\"-1\"\n onTouchEnd={() => {\n this.removeValue(val);\n }}\n onMouseUp={() => {\n this.removeValue(val);\n }}\n >\n <nano-icon name=\"light/times\"></nano-icon>\n </button>\n </span>\n );\n if (i === 0 && this.currInsertIndex < 0)\n toReturn = [input, toReturn as VNode];\n else if (i === this.currInsertIndex)\n toReturn = [toReturn as VNode, input];\n return toReturn;\n });\n }\n}\n"]}
package/dist/types/components/datalist/datalist.d.ts CHANGED
@@ -16,12 +16,12 @@ export declare class DataList implements ComponentInterface {
16
16
  private isNanoInput;
17
17
  private typeToSelect;
18
18
  private typeToSelectTimeout;
19
- private optionEles;
20
19
  private nanoDropdown;
21
20
  private listBox;
22
21
  private mo?;
23
22
  private listId;
24
23
  private isFiltered;
24
+ private shouldFocus;
25
25
  private get allOptEles();
26
26
  private set allOptEles(value);
27
27
  private _allOptEles;
package/docs-json.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2022-02-08T22:13:48",
2
+ "timestamp": "2022-02-10T11:41:32",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "2.12.2",
@@ -2699,15 +2699,15 @@
2699
2699
  "nano-select"
2700
2700
  ],
2701
2701
  "dependencies": [
2702
+ "nano-option",
2702
2703
  "nano-dropdown",
2703
- "nano-menu",
2704
- "nano-option"
2704
+ "nano-menu"
2705
2705
  ],
2706
2706
  "dependencyGraph": {
2707
2707
  "nano-datalist": [
2708
+ "nano-option",
2708
2709
  "nano-dropdown",
2709
- "nano-menu",
2710
- "nano-option"
2710
+ "nano-menu"
2711
2711
  ],
2712
2712
  "nano-option": [
2713
2713
  "nano-icon"
@@ -6315,9 +6315,9 @@
6315
6315
  "nano-option"
6316
6316
  ],
6317
6317
  "nano-datalist": [
6318
+ "nano-option",
6318
6319
  "nano-dropdown",
6319
- "nano-menu",
6320
- "nano-option"
6320
+ "nano-menu"
6321
6321
  ],
6322
6322
  "nano-option": [
6323
6323
  "nano-icon"
@@ -11465,9 +11465,9 @@
11465
11465
  "nano-option"
11466
11466
  ],
11467
11467
  "nano-datalist": [
11468
+ "nano-option",
11468
11469
  "nano-dropdown",
11469
- "nano-menu",
11470
- "nano-option"
11470
+ "nano-menu"
11471
11471
  ],
11472
11472
  "nano-option": [
11473
11473
  "nano-icon"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nanoporetech-digital/components",
3
- "version": "2.0.0",
3
+ "version": "2.0.1",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -124,5 +124,5 @@
124
124
  "peerDependencies": {
125
125
  "@stencil/core": "^2.5.0"
126
126
  },
127
- "gitHead": "63ad5263a45cdb8aab03cad158932760b836d767"
127
+ "gitHead": "cd185dd380c9f9e742761edd507af3a266527558"
128
128
  }