@nanoporetech-digital/components 5.9.4 → 5.9.5
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.
- package/CHANGELOG.md +12 -0
- package/dist/cjs/{dom-7acf7afd.js → dom-1d35ea4d.js} +2 -2
- package/dist/cjs/{dom-7acf7afd.js.map → dom-1d35ea4d.js.map} +1 -1
- package/dist/cjs/nano-accordion.cjs.entry.js +1 -1
- package/dist/cjs/nano-alert.cjs.entry.js +2 -2
- package/dist/cjs/nano-algolia-pagination.cjs.entry.js +1 -1
- package/dist/cjs/nano-algolia-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-algolia.cjs.entry.js +1 -1
- package/dist/cjs/nano-datalist_3.cjs.entry.js +1 -1
- package/dist/cjs/nano-details.cjs.entry.js +1 -1
- package/dist/cjs/nano-dialog.cjs.entry.js +2 -2
- package/dist/cjs/nano-drawer.cjs.entry.js +2 -2
- package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js +2 -2
- package/dist/cjs/nano-global-nav.cjs.entry.js +3 -3
- package/dist/cjs/nano-global-nav.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-input.cjs.entry.js +1 -1
- package/dist/cjs/nano-menu-drawer.cjs.entry.js +1 -1
- package/dist/cjs/nano-overflow-nav.cjs.entry.js +1 -1
- package/dist/cjs/nano-sticker.cjs.entry.js +1 -1
- package/dist/cjs/nano-tab-group.cjs.entry.js +12 -6
- package/dist/cjs/nano-tab-group.cjs.entry.js.map +1 -1
- package/dist/cjs/{nano-table-9bd1168f.js → nano-table-be63f3e1.js} +3 -3
- package/dist/cjs/{nano-table-9bd1168f.js.map → nano-table-be63f3e1.js.map} +1 -1
- package/dist/cjs/nano-table.cjs.entry.js +1 -1
- package/dist/cjs/{scroll-6a9bedb4.js → scroll-fc1b8387.js} +2 -2
- package/dist/cjs/{scroll-6a9bedb4.js.map → scroll-fc1b8387.js.map} +1 -1
- package/dist/cjs/{table.worker-894a0418.js → table.worker-b05ffc52.js} +2 -2
- package/dist/cjs/table.worker-b05ffc52.js.map +1 -0
- package/dist/cjs/{transitions-c985e9a9.js → transitions-8c57ddb1.js} +1 -2
- package/dist/cjs/transitions-8c57ddb1.js.map +1 -0
- package/dist/collection/components/algolia/algolia-pagination.js +1 -1
- package/dist/collection/components/algolia/algolia-pagination.js.map +1 -1
- package/dist/collection/components/global-nav/global-nav.js +2 -2
- package/dist/collection/components/global-nav/global-nav.js.map +1 -1
- package/dist/collection/components/table/table.js +2 -2
- package/dist/collection/components/table/table.js.map +1 -1
- package/dist/collection/components/tabs/tab-group.js +9 -3
- package/dist/collection/components/tabs/tab-group.js.map +1 -1
- package/dist/collection/utils/dom.js +1 -1
- package/dist/collection/utils/dom.js.map +1 -1
- package/dist/collection/utils/transitions.js +0 -1
- package/dist/collection/utils/transitions.js.map +1 -1
- package/dist/components/dom.js +1 -1
- package/dist/components/dom.js.map +1 -1
- package/dist/components/nano-algolia-pagination.js +1 -1
- package/dist/components/nano-algolia-pagination.js.map +1 -1
- package/dist/components/nano-global-nav.js +2 -2
- package/dist/components/nano-global-nav.js.map +1 -1
- package/dist/components/nano-tab-group.js +9 -3
- package/dist/components/nano-tab-group.js.map +1 -1
- package/dist/components/table.js +1 -1
- package/dist/components/table.js.map +1 -1
- package/dist/components/transitions.js +0 -1
- package/dist/components/transitions.js.map +1 -1
- package/dist/esm/{dom-311c9e1e.js → dom-8599fac1.js} +2 -2
- package/dist/esm/{dom-311c9e1e.js.map → dom-8599fac1.js.map} +1 -1
- package/dist/esm/nano-accordion.entry.js +1 -1
- package/dist/esm/nano-alert.entry.js +2 -2
- package/dist/esm/nano-algolia-pagination.entry.js +1 -1
- package/dist/esm/nano-algolia-pagination.entry.js.map +1 -1
- package/dist/esm/nano-algolia.entry.js +1 -1
- package/dist/esm/nano-datalist_3.entry.js +1 -1
- package/dist/esm/nano-details.entry.js +1 -1
- package/dist/esm/nano-dialog.entry.js +2 -2
- package/dist/esm/nano-drawer.entry.js +2 -2
- package/dist/esm/nano-global-nav-user-profile_3.entry.js +2 -2
- package/dist/esm/nano-global-nav.entry.js +3 -3
- package/dist/esm/nano-global-nav.entry.js.map +1 -1
- package/dist/esm/nano-input.entry.js +1 -1
- package/dist/esm/nano-menu-drawer.entry.js +1 -1
- package/dist/esm/nano-overflow-nav.entry.js +1 -1
- package/dist/esm/nano-sticker.entry.js +1 -1
- package/dist/esm/nano-tab-group.entry.js +12 -6
- package/dist/esm/nano-tab-group.entry.js.map +1 -1
- package/dist/esm/{nano-table-baba1696.js → nano-table-8ac79667.js} +3 -3
- package/dist/esm/{nano-table-baba1696.js.map → nano-table-8ac79667.js.map} +1 -1
- package/dist/esm/nano-table.entry.js +1 -1
- package/dist/esm/{scroll-952d292a.js → scroll-ec7ac257.js} +2 -2
- package/dist/esm/{scroll-952d292a.js.map → scroll-ec7ac257.js.map} +1 -1
- package/dist/esm/{table.worker-ae46bca0.js → table.worker-822b1223.js} +2 -2
- package/dist/esm/table.worker-822b1223.js.map +1 -0
- package/dist/esm/{transitions-732f45a2.js → transitions-b4657201.js} +1 -2
- package/dist/esm/transitions-b4657201.js.map +1 -0
- package/dist/nano-components/nano-components.esm.js +1 -1
- package/dist/nano-components/{p-6bdbcaa6.entry.js → p-191352c4.entry.js} +2 -2
- package/dist/nano-components/{p-03f8b115.entry.js → p-24dcd788.entry.js} +2 -2
- package/dist/nano-components/p-2db8bb0b.js +5 -0
- package/dist/nano-components/p-2db8bb0b.js.map +1 -0
- package/dist/nano-components/{p-4a79eafe.entry.js → p-359b7cd2.entry.js} +2 -2
- package/dist/nano-components/{p-760d80d2.entry.js → p-51133e62.entry.js} +2 -2
- package/dist/nano-components/{p-8a72d576.entry.js → p-5e3f928c.entry.js} +2 -2
- package/dist/nano-components/p-5e3f928c.entry.js.map +1 -0
- package/dist/nano-components/p-67ab5a5f.entry.js +5 -0
- package/dist/nano-components/p-67ab5a5f.entry.js.map +1 -0
- package/dist/nano-components/{p-ac7953e0.entry.js → p-7670058b.entry.js} +2 -2
- package/dist/nano-components/{p-f0226ce2.js → p-78323d6e.js} +2 -2
- package/dist/nano-components/p-78323d6e.js.map +1 -0
- package/dist/nano-components/{p-f073ee84.entry.js → p-783de955.entry.js} +2 -2
- package/dist/nano-components/{p-04d5c9ea.entry.js → p-79fff4fd.entry.js} +2 -2
- package/dist/nano-components/{p-a1ead0a7.entry.js → p-7da12234.entry.js} +2 -2
- package/dist/nano-components/{p-800c4260.entry.js → p-9f60ff14.entry.js} +2 -2
- package/dist/nano-components/{p-73312f19.entry.js → p-a225e976.entry.js} +2 -2
- package/dist/nano-components/p-b27b56d3.js +5 -0
- package/dist/nano-components/{p-18e0d957.entry.js → p-c80336b2.entry.js} +2 -2
- package/dist/nano-components/p-cdfc507e.js +5 -0
- package/dist/nano-components/p-cdfc507e.js.map +1 -0
- package/dist/nano-components/{p-587d3e3d.js → p-f49f57ed.js} +2 -2
- package/dist/nano-components/{p-a2b73d79.entry.js → p-f57cea20.entry.js} +2 -2
- package/dist/nano-components/{p-fcd8df14.entry.js → p-f73f52ed.entry.js} +2 -2
- package/dist/nano-components/p-f8dd8c20.entry.js +5 -0
- package/dist/nano-components/p-f8dd8c20.entry.js.map +1 -0
- package/dist/types/components/tabs/tab-group.d.ts +1 -0
- package/docs-json.json +1 -1
- package/hydrate/index.js +17 -12
- package/package.json +2 -2
- package/dist/cjs/table.worker-894a0418.js.map +0 -1
- package/dist/cjs/transitions-c985e9a9.js.map +0 -1
- package/dist/esm/table.worker-ae46bca0.js.map +0 -1
- package/dist/esm/transitions-732f45a2.js.map +0 -1
- package/dist/nano-components/p-186e8559.js +0 -5
- package/dist/nano-components/p-186e8559.js.map +0 -1
- package/dist/nano-components/p-257432ff.js +0 -5
- package/dist/nano-components/p-257432ff.js.map +0 -1
- package/dist/nano-components/p-4d0c0873.entry.js +0 -5
- package/dist/nano-components/p-4d0c0873.entry.js.map +0 -1
- package/dist/nano-components/p-8a72d576.entry.js.map +0 -1
- package/dist/nano-components/p-c876624c.entry.js +0 -5
- package/dist/nano-components/p-c876624c.entry.js.map +0 -1
- package/dist/nano-components/p-d7c34990.js +0 -5
- package/dist/nano-components/p-f0226ce2.js.map +0 -1
- /package/dist/nano-components/{p-6bdbcaa6.entry.js.map → p-191352c4.entry.js.map} +0 -0
- /package/dist/nano-components/{p-03f8b115.entry.js.map → p-24dcd788.entry.js.map} +0 -0
- /package/dist/nano-components/{p-4a79eafe.entry.js.map → p-359b7cd2.entry.js.map} +0 -0
- /package/dist/nano-components/{p-760d80d2.entry.js.map → p-51133e62.entry.js.map} +0 -0
- /package/dist/nano-components/{p-ac7953e0.entry.js.map → p-7670058b.entry.js.map} +0 -0
- /package/dist/nano-components/{p-f073ee84.entry.js.map → p-783de955.entry.js.map} +0 -0
- /package/dist/nano-components/{p-04d5c9ea.entry.js.map → p-79fff4fd.entry.js.map} +0 -0
- /package/dist/nano-components/{p-587d3e3d.js.map → p-7da12234.entry.js.map} +0 -0
- /package/dist/nano-components/{p-800c4260.entry.js.map → p-9f60ff14.entry.js.map} +0 -0
- /package/dist/nano-components/{p-73312f19.entry.js.map → p-a225e976.entry.js.map} +0 -0
- /package/dist/nano-components/{p-d7c34990.js.map → p-b27b56d3.js.map} +0 -0
- /package/dist/nano-components/{p-18e0d957.entry.js.map → p-c80336b2.entry.js.map} +0 -0
- /package/dist/nano-components/{p-a1ead0a7.entry.js.map → p-f49f57ed.js.map} +0 -0
- /package/dist/nano-components/{p-a2b73d79.entry.js.map → p-f57cea20.entry.js.map} +0 -0
- /package/dist/nano-components/{p-fcd8df14.entry.js.map → p-f73f52ed.entry.js.map} +0 -0
@@ -1,5 +1,5 @@
|
|
1
1
|
/*!
|
2
2
|
* Web Components for Nanopore digital Web Apps
|
3
3
|
*/
|
4
|
-
import{r as n,h as t,i as e,c as i,a as s,g as a}from"./p-d6a04b3a.js";import{b as o,g as r,c as l}from"./p-257432ff.js";import{d as c}from"./p-186e8559.js";import{g as h}from"./p-f88fa15c.js";import{g as d}from"./p-74a7fc4f.js";import{c as p}from"./p-411bb8f1.js";import{d as u,a as b}from"./p-7bff5224.js";import{F as f,a as v}from"./p-dc805ecc.js";const m=class{constructor(t){n(this,t);this.myAccountUser=undefined;this.userProfileUrl=undefined}render(){var n;return!!this.myAccountUser&&t("a",{href:this.userProfileUrl,class:"user-profile"},t("div",{class:"left"},t("div",{class:"avatar-container"},t("img",{class:"avatar",src:(n=this.myAccountUser)===null||n===void 0?void 0:n.small_avatar_url,alt:"User Avatar",height:75,width:75}),this.myAccountUser.is_nanopore_user&&t("img",{class:"logo-small",src:e(`../nano-assets/ont-wheel-light.svg`),alt:"Nanopore Logo"})),t("div",{class:"user-details"},t("span",{class:"name"},this.myAccountUser.name),t("span",{class:"bio"},this.myAccountUser.job_title," at ",this.myAccountUser.company))),t("div",{class:"right"},t("div",{class:"chevron-right"},t("nano-icon",{slot:"icon-end",name:"light/chevron-right","aria-label":"navigate to ..."}))))}};const g=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}:host .nav-item,:host .link{outline:none !important;border-radius:inherit}:host ::slotted(*),:host *{box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none;margin:0}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}:host ::slotted(nano-icon[slot=icon-start]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}:host ::slotted(nano-icon[slot=icon-end]){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start)}:host .link ::slotted(nano-icon[slot=icon-start]){-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]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0}:host .link,:host button,:host a{-webkit-border-after:var(--border-bottom);border-block-end:var(--border-bottom);display:flex;align-items:center;border-radius:inherit}: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-visible,:host a:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.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:flex;justify-content:flex-start;flex-direction:row;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{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);flex:1}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){flex:1}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, currentcolor);min-height:100%;inset-block-start:0;inset-inline-start:0;width:100%;z-index:1;opacity:0;transition:opacity 0.2s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);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;transform:translateX(0);transition:opacity 0.3s ease, transform 0.2s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}: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{transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{transform:translateX(0)}:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){box-shadow:none}:host(.nano-menu) .secondary-menu-content{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:flex;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-inline:var(--padding-end) 0;margin-block:0}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-inline:0 var(--padding-start);margin-block:0}:host(.nano-global-nav-bar) ::slotted(a),:host(.nano-global-nav-bar) button{position:relative}:host(.nano-global-nav-bar) ::slotted(a)::before,:host(.nano-global-nav-bar) button::before{content:"";background-color:#0c5a71;height:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}:host(.nano-global-nav-bar) .selected button::before,:host(.nano-global-nav-bar) .secondary-open button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.selected) ::slotted(a)::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.7}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{-webkit-padding-before:calc(var(--padding-top) / 2);padding-block-start:calc(var(--padding-top) / 2);-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:calc(var(--padding-bottom) / 2);padding-block-end:calc(var(--padding-bottom) / 2);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;width:100%}:host(.nano-menu-drawer) .text{-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0;text-align:start;flex:0 1 auto;min-width:130px;width:130px}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);width:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-width:20px}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);height:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;width:var(--secondary-width, 400px);max-width:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:"";display:block;position:absolute;width:6px;height:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (min-width: 52em){:host(.nano-menu-drawer) .notification::after{width:7px;height:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{transform:translateX(-100%);opacity:1}';const _=class{constructor(t){n(this,t);this.nanoClose=i(this,"nanoClose",7);this.nanoOpen=i(this,"nanoOpen",7);this.nanoOpening=i(this,"nanoOpening",7);this.nanoClosing=i(this,"nanoClosing",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoFocus=i(this,"nanoFocus",7);this.hasSecondarySlot=false;this.animating=false;this.closeSecondary=async()=>{if(!this.hasSecondarySlot||!this.didOpen)return;this.open=false;await c(this.secondaryDiv,{className:"open",show:false});this.nanoClosing.emit({secondaryMenu:this.secondaryDiv});this.didOpen=false};this.openSecondary=async()=>{if(window.innerWidth<this.secondaryActiveWidth){this.secondaryFallback.call(this);return}if(!this.hasSecondarySlot||this.didOpen)return;this.open=true;await c(this.secondaryDiv,{className:"open",show:true});this.nanoOpening.emit({secondaryMenu:this.secondaryDiv});this.didOpen=true};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=n=>{if(!this.hasAnchorEle)return;const t=n.target.closest("a, button");if(!t)this.btn.click()};this.handleMouseEnter=async()=>{if(!this.href||this.animating||!this.hasSecondarySlot||this.globalNavEle&&!this.globalNavEle.classList.contains("ready"))return;let n=0;if(o(this.el,".secondary-open.has-secondary").length)n=300;clearTimeout(this.waitHide);this.fromHover=true;this.animating=true;this.waitShow=window.setTimeout((async()=>await this.openSecondary()),n);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=()=>{this.fromHover=false;if(this.hasSecondarySlot)this.toggleSecondary()};this.hasAnchorEle=false;this.didOpen=false;this.isInGlobalNav=false;this.isInMenuDrawer=false;this.isInMenu=false;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.notification=false}async setFocus(){if(!this.btn)return;this.btn.focus()}openChange(){this.open?this.openSecondary():this.closeSecondary()}didOpenChange(){if(!this.hasSecondarySlot)return;if(!this.didOpen){setTimeout((()=>{if(!this.fromHover&&(!document.activeElement||document.activeElement===document.body))this.btn.focus({preventScroll:true});this.el.tabIndex=null;this.nanoClose.emit({secondaryMenu:this.secondaryDiv})}),50)}else{if(!this.fromHover){const n=new window.IntersectionObserver((t=>{if(t[0].boundingClientRect.top<0){this.secondaryDiv.scrollIntoView({behavior:"smooth"})}n.disconnect()}),{threshold:1});n.observe(this.secondaryDiv);this.secondaryDiv.focus({preventScroll:true});const t=h(this.secondaryDiv,true);if(t[0])t[0].focus();this.el.tabIndex=-1;this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}}}handleClose(n){if(!this.didOpen||!this.hasSecondarySlot||!this.closeOnBlur)return;if(!n.composedPath().some((n=>n===this.secondaryDiv)))this.toggleSecondary()}connectedCallback(){const n=this.el.querySelector('[slot="secondary"]');this.hasSecondarySlot=!!n;const t=r(this.el,"a, button")[0];this.hasAnchorEle=!!t;if(t){this.href=t.href?t.href:null;this.btn=t;if(this.hasSecondarySlot)this.btn.addEventListener("click",this.toggleSecondary);this.btn.addEventListener("focus",this.handleFocus);this.btn.addEventListener("blur",this.handleHostBlur)}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")}componentDidLoad(){this.openChange()}disconnectedCallback(){this.btn.removeEventListener("click",this.toggleSecondary);this.btn.removeEventListener("focus",this.handleFocus);this.btn.removeEventListener("blur",this.handleHostBlur)}render(){return t(s,{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},onBlur:this.handleHostBlur,dir:this.el.ownerDocument.dir==="rtl"?"rtl":null,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onClick:this.handleHostClick,role:this.el.closest('[role="menu"]')?"menuitem":undefined},t("div",{class:{"nav-item":true,"secondary-open":this.open,selected:this.selected},part:"ctrl-wrapper"},this.href&&!this.hasAnchorEle&&!this.disabled&&t("a",{part:"ctrl ctrl--anchor",target:this.target,ref:n=>this.btn=n,href:this.href,onFocus:this.handleFocus,class:{notification:this.notification}},t("slot",{name:"icon-start"}),t("span",{class:"text"},t("slot",null)),t("slot",{name:"icon-end"})),(!this.hasAnchorEle&&!this.href||this.disabled)&&t("button",{part:"ctrl ctrl--button",ref:n=>this.btn=n,onClick:this.handleClick,onFocus:this.handleFocus,disabled:this.disabled,class:{notification:this.notification}},t("slot",{name:"icon-start"}),t("span",{class:"text"},t("slot",null)),t("slot",{name:"icon-end"})),this.hasAnchorEle&&!this.disabled&&t("div",{class:"link"},t("slot",{name:"icon-start"}),t("slot",null),t("slot",{name:"icon-end"})),this.hasSecondarySlot&&!this.disabled&&t("div",{class:"secondary-menu",ref:n=>this.secondaryDiv=n,tabIndex:-1},t("div",{class:"secondary-menu-content",part:"secondary-wrapper"},t("slot",{name:"secondary"})),t("div",{class:"secondary-menu-mask",onClick:this.closeSecondary,part:"secondary-mask"}))))}get el(){return a(this)}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};_.style=g;const w='.sc-nano-select-h {\n box-sizing: border-box;\n}\n\n*.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n display: none !important;\n}\n[disabled].sc-nano-select-h:not([disabled=false]) {\n opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-select {\n min-inline-size: 100%;\n display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-select {\n display: flex;\n gap: 1rem;\n container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select {\n flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select {\n display: none;\n}\n@container (min-width: 350px) {\n .form-ctrl.has-helper-end .form-ctrl__helper-end {\n display: block !important;\n }\n .form-ctrl.has-helper-end .form-ctrl__helper {\n display: none !important;\n }\n}\n\n.form-ctrl__wrapper.sc-nano-select {\n display: block;\n}\n\nlabel.sc-nano-select, .form-ctrl__more.sc-nano-select, .form-ctrl__error.sc-nano-select, .form-ctrl__helper.sc-nano-select {\n display: block;\n inline-size: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-select, .form-ctrl__more.visually-hide.sc-nano-select, .form-ctrl__error.visually-hide.sc-nano-select, .form-ctrl__helper.visually-hide.sc-nano-select {\n clip: rect(1px, 1px, 1px, 1px);\n -webkit-clip-path: inset(50%);\n clip-path: inset(50%);\n block-size: 1px;\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n padding-block: 0;\n -webkit-padding-end: 0;\n padding-inline-end: 0;\n -webkit-padding-start: var(--padding-start);\n padding-inline-start: var(--padding-start);\n color: var(--label-color);\n position: absolute;\n font-size: 1.15em;\n transform: translateY(-50%);\n transform-origin: top left;\n inset-block-start: 50%;\n transition: all 0.125s ease-in;\n opacity: 1;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n transform: translateY(-110%);\n font-size: 0.8em;\n opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n opacity: 0;\n transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n inset-block-start: 50%;\n}\n.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n inset-block-start: 0;\n transform: translateY(38%);\n}\n.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n inset-block-start: 0;\n transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-select {\n color: var(--label-color);\n font-size: var(--label-font-size);\n -webkit-padding-after: var(--padding-bottom);\n padding-block-end: var(--padding-bottom);\n line-height: 1;\n display: flex;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n margin-block: unset;\n -webkit-margin-end: 5px;\n margin-inline-end: 5px;\n -webkit-margin-start: 0;\n margin-inline-start: 0;\n opacity: 0;\n -webkit-appearance: none;\n appearance: none;\n transition: 0.3s ease opacity;\n font-size: 0.9em;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n margin-block: unset;\n -webkit-margin-end: 0;\n margin-inline-end: 0;\n -webkit-margin-start: auto;\n margin-inline-start: auto;\n font-size: 0.9em;\n opacity: 0.5;\n}\n.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n opacity: 0.5;\n}\n.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select {\n color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__label.sc-nano-select {\n color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n opacity: 0;\n transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-select {\n block-size: 1em;\n position: relative;\n margin-block: 4px var(--padding-bottom);\n margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-select, .form-ctrl__error.sc-nano-select {\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-select {\n font-style: italic;\n color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-select-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-select {\n opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-select {\n flex: 1 1 30%;\n min-inline-size: 150px;\n font-size: var(--invalid-msg-font-size);\n color: var(--help-msg-color);\n font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-select {\n opacity: 0;\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__error.sc-nano-select {\n opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n border-radius: var(--input-border-radius);\n inline-size: 100%;\n padding: 0 !important;\n position: relative;\n flex: 1 0 auto;\n display: flex;\n background: var(--input-bg-color);\n border: var(--input-border-style);\n border-width: var(--input-border-width);\n font-size: var(--input-font-size);\n -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select {\n background: var(--input-bg-color--focus);\n border: var(--input-border-style--focus);\n border-width: var(--input-border-width);\n -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid);\n border-width: var(--input-border-width);\n -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n -webkit-padding-start: 0 !important;\n padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid-focus);\n border-width: var(--input-border-width);\n -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n -webkit-padding-start: 0 !important;\n padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-select {\n display: flex;\n align-items: stretch;\n flex: 1;\n max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-select, .form-ctrl__slot-end.sc-nano-select, .form-ctrl__slot-start.sc-nano-select, .form-ctrl__slot-value-end.sc-nano-select {\n --nano-icon-size: 1.4em;\n margin-block: 0;\n margin-inline: 0;\n font-size: 1em;\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n display: flex;\n align-items: stretch;\n inline-size: auto;\n}\n\n.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select {\n display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n --nano-icon-size: 1.4em;\n padding-inline: unset;\n -webkit-padding-start: var(--padding-start);\n padding-inline-start: var(--padding-start);\n -webkit-padding-end: var(--padding-end);\n padding-inline-end: var(--padding-end);\n font-size: 1em;\n align-items: center;\n display: flex;\n block-size: 100%;\n z-index: 1;\n}\n.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s > *, [disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-select {\n color: var(--clear-btn-color);\n padding: 0;\n opacity: 0;\n inline-size: 0;\n -webkit-appearance: none;\n appearance: none;\n align-items: center;\n overflow: hidden;\n}\n.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n padding-block: 0;\n padding-inline: var(--padding-start) var(--padding-end);\n opacity: 1;\n inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-select:hover {\n color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-select-h {\n \n --placeholder-color: var(--nano-input-placeholder-color, initial);\n --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n --color-invalid: var(--nano-color-danger-rgb, 239 65 53);\n --color--focus-rgb:\n var(\n --nano-color-base-rgb,\n var(--nano-color-primary-rgb, 0 116 149)\n );\n --input-font-size: var(--nano-input-font-size, 0.87em);\n --input-text-color: var(--nano-input-text-color, #4a4a4a);\n --input-border-width: var(--nano-input-border-width, 1px);\n --input-border-hint-width: 3px;\n --input-border-color: var(--nano-input-border-color, #e4e6e8);\n --input-border-radius: var(--nano-input-border-radius, 0);\n --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n --input-bg-color: var(--nano-input-background-color, #fff);\n --input-bg-color--focus: var(--input-bg-color);\n --input-bg-color--invalid: var(--nano-input-background-color, white);\n --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n --help-msg-color: var(--nano-input-help-color, #616d6e);\n --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n --label-color: var(--nano-input-label-color, "currentcolor");\n --label-color--focus: var(--label-color);\n --label-color--invalid: var(--nano-input-label-color-invalid, "currentcolor");\n --label-font-size: var(--nano-input-label-color, 1em);\n --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n \n position: relative;\n width: 100%;\n padding: 0 !important;\n font-family: var(--nano-font-family, inherit);\n display: block;\n}\n\n.nano-color.sc-nano-select-h {\n --input-border-style--focus:\n var(--nano-input-border-style, solid) var(\n --nano-color-tint,\n var(--nano-color-primary-tint, #2689a5)\n );\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 color: var(--nano-color-base);\n}\n\nnano-item.sc-nano-select-h:not(.item-label), nano-item:not(.item-label) .sc-nano-select-h {\n --padding-start: 0;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select {\n pointer-events: none !important;\n}\n\nselect.sc-nano-select {\n display: none;\n}\n\n.select__native-input.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n padding: unset;\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: 0;\n border-radius: var(--input-border-radius);\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 -webkit-appearance: none;\n appearance: none;\n margin: 0;\n box-sizing: border-box;\n resize: none;\n overflow: hidden;\n cursor: default;\n line-height: 2.5em;\n \n \n}\n.has-float-label.sc-nano-select .select__native-input.sc-nano-select {\n line-height: 2.1em;\n min-height: 2.1em;\n -webkit-padding-before: 1.4em;\n padding-block-start: 1.4em;\n}\n.select__native-input.sc-nano-select::selection {\n background: transparent;\n}\n.select__native-input.sc-nano-select::-moz-selection {\n background: transparent;\n}\n.select__native-input.sc-nano-select::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: inherit;\n min-height: initial;\n}\n.select__native-input.sc-nano-select::-moz-placeholder {\n line-height: 2.8em;\n text-overflow: ellipsis;\n}\n.select__native-input.sc-nano-select:-webkit-autofill {\n background-color: transparent;\n}\n.select__native-input.sc-nano-select::-webkit-search-decoration, .select__native-input.sc-nano-select::-webkit-search-cancel-button, .select__native-input.sc-nano-select::-webkit-search-results-button, .select__native-input.sc-nano-select::-webkit-search-results-decoration {\n -webkit-appearance: none;\n appearance: none;\n}\n.select__native-input.sc-nano-select:invalid {\n box-shadow: none;\n}\n.select__native-input.sc-nano-select::-ms-clear, .select__native-input.sc-nano-select::-ms-reveal {\n display: none;\n}\n.select__native-input.resizable.sc-nano-select {\n resize: vertical;\n overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select {\n line-height: 1.5em;\n padding-block: var(--padding-top) var(--padding-bottom);\n white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder {\n line-height: 1.5em;\n}\n.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select {\n -webkit-padding-before: 1.8em;\n padding-block-start: 1.8em;\n}\n.masked.sc-nano-select-h .select__native-input.sc-nano-select {\n opacity: 0;\n position: absolute;\n inset-inline-start: 0;\n inset-block-start: 0;\n}\n\n.select__mask.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: 0;\n border-radius: var(--input-border-radius);\n pointer-events: none;\n line-height: 2.5em;\n min-height: 2.5em;\n}\n\n.select__multi-wrap.sc-nano-select {\n padding-block: 0 var(--padding-bottom);\n padding-inline: 0 0;\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n overflow: hidden;\n align-items: flex-start;\n}\n.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select {\n -webkit-padding-before: 1em;\n padding-block-start: 1em;\n}\n.select__multi-input.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: var(--padding-bottom) 0;\n min-width: 50px;\n width: 100%;\n max-height: 100%;\n -webkit-appearance: none;\n appearance: none;\n border: 0;\n outline: none;\n display: inline-block;\n background: transparent;\n flex: 0;\n position: relative;\n box-sizing: border-box;\n line-height: calc(2.5em - var(--padding-bottom));\n height: calc(2.5em - var(--padding-bottom));\n}\n.select__multi-input.sc-nano-select:last-child {\n flex: 1;\n}\n.select__multi-value.sc-nano-select {\n margin-block: var(--padding-bottom) 0;\n margin-inline: var(--padding-start) -3px;\n background: rgb(var(--multi-input-value-bg)/80%);\n color: var(--multi-input-value-text-color);\n border: 1px solid;\n border-color: var(--multi-input-value-border);\n padding: 0.35em 0.5em;\n max-width: 100%;\n display: flex;\n align-items: center;\n font-size: var(--input-font-size);\n letter-spacing: 1px;\n max-height: calc(2.5em - 8px);\n}\n.select__multi-value.sc-nano-select span.sc-nano-select {\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n overflow: hidden;\n}\n.select__multi-value-remove.sc-nano-select {\n background-position: center;\n -webkit-padding-start: 0.5em;\n padding-inline-start: 0.5em;\n margin: 0;\n color: inherit;\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n -webkit-appearance: none;\n appearance: none;\n display: flex;\n align-items: center;\n inset-block-start: 0;\n font-size: 1em;\n}\n.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select {\n --color: var(--multi-input-value-text-color);\n}\n\n.form-ctrl__float-label.sc-nano-select {\n width: calc(100% - (1em + var(--padding-start) * 2));\n}\n.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n transform: translateY(-110%);\n font-size: 0.8em;\n}\n.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n transform: translateY(21%);\n inset-block-start: 0;\n}\n\n.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 {\n pointer-events: auto;\n}';let y=0;const x=class{get inputCtrl(){return this._inputCtrl}set inputCtrl(n){if(n===this._inputCtrl)return;this._inputCtrl=n;this.setDataListOpts()}get selectWrap(){return this._selectWrap}set selectWrap(n){if(this._selectWrap===n)return;this._selectWrap=n;this.setDataListOpts()}get datalist(){return this._datalist}set datalist(n){if(this._datalist===n)return;this._datalist=n;this.setDataListOpts()}constructor(t){n(this,t);this.nanoChange=i(this,"nanoChange",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoFocus=i(this,"nanoFocus",7);this.nanoDidLoad=i(this,"nanoDidLoad",7);this.nanoDidUnload=i(this,"nanoDidUnload",7);this.nanoSearchChange=i(this,"nanoSearchChange",7);this.nanoValidate=i(this,"nanoValidate",7);this.valueItems=[];this.selectId=`nano-select-${y++}`;this.rtl=false;this.onInit=true;this.customError="";this._value=this.multiple?[]:"";this._options=[];this.customValidate=()=>{if(!this.nativeSelect||!!this.customError||!this.nativeSelect["setCustomValidity"])return;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=n=>{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:n})};this.handleInvalid=n=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(this.showInlineError)n.preventDefault();requestAnimationFrame((()=>this.showInlineValidation(n)))};this.setValue=n=>{n.preventDefault();if(!this.multiple){this.value=n.detail.value;return}if(this.value&&this.value.length&&this.value.includes(n.detail.value))return;if(this.max&&this.value.length===this.max)return;this.currInsertIndex++;this.value=[...this.value.slice(0,this.currInsertIndex),n.detail.value,...this.value.slice(this.currInsertIndex)];this.inputSearchVal=""};this.removeValue=n=>{if(!this.multiple||!this.value.length)return;if(!n)n=this.value[this.value.length-1];this.value=this.value.filter((t=>t!==n));this.currInsertIndex--;this.setFocus()};this.setOptions=()=>{if(!this.datalist||!this.datalist.activeOptions||!this.datalist.activeOptions.length)return;this._eOptions=this.datalist.activeOptions.map((n=>{const{value:t,selected:e,label:i,filterMeta:s}=n;return{value:t,selected:e,label:i,filterMeta:s}}));this.customValidate()};this.handleDocumentKeyDown=n=>{if(!this.multiple||!this.hasFocus)return;if(!this.inputSearchVal){let t;switch(n.key){case"Backspace":if(this.inputCtrl.previousElementSibling)t=this.inputCtrl.previousElementSibling;else break;this.removeValue(t.dataset.value||null);break;case"Delete":if(this.inputCtrl.nextElementSibling)t=this.inputCtrl.nextElementSibling;else break;this.removeValue(t.dataset.value||null);break;case"ArrowLeft":case"ArrowRight":if(!this.value.length)break;if(n.key==="ArrowLeft"&&this.inputCtrl.previousSibling)this.currInsertIndex--;if(n.key==="ArrowRight"&&this.inputCtrl.nextSibling)this.currInsertIndex++;setTimeout((()=>{this.inputCtrl.focus()}),20);n.preventDefault();break}}};this.onBlur=()=>{this.hasFocus=false;requestAnimationFrame((()=>{if(this.validateOn==="dirty"&&!this.hasFocus)this.showInlineValidation()}));this.nanoBlur.emit();if(!this.allowCustomValues&&this.multiple){this.inputSearchVal="";const n=new window.Event("change");this.inputCtrl.dispatchEvent(n)}};this.onFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.clearSelectValue=n=>{if(this.clearSelect&&!this.readonly&&!this.disabled&&n){n.preventDefault();n.stopPropagation()}if(this.multiple){this.value=[];this.currInsertIndex=-1}else this.value="";this.inputCtrl.value="";const t=new window.Event("change");this.inputCtrl.dispatchEvent(t)};this.onClick=()=>{this.setFocus()};this.onDragStart=n=>{const t=n.target;this.dragVal=t.dataset.value};this.onDragEnd=n=>{this.dragVal=null;n.preventDefault()};this.onDragLeave=n=>{const t=n.target;const e=t.dataset&&t.dataset.value?t.dataset.value:null;if(!e||this.dragVal===e||!this.value.includes(this.dragVal)){n.preventDefault();return}const i=this.value.indexOf(e);const s=this.value.indexOf(this.dragVal);const a=this.value;const o=a[i];a[i]=a[s];a[s]=o;this.value=[...a]};this.onMultiInput=n=>{this.inputSearchVal=n.target.value.trim();this.nanoSearchChange.emit({value:n.target.value.trim()})};this.currInsertIndex=-1;this.showErrorMsg=false;this.errorMessage="";this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.hasHelperEndSlot=false;this.inputSearchVal="";this._invalid=false;this.color=undefined;this.autofocus=false;this.disabled=false;this.validateOn="submitThenDirty";this.showInlineError=true;this.label=undefined;this.hideLabel=false;this.floatLabel=false;this.multiple=false;this.name=this.selectId+"-name";this.placeholder=undefined;this.readonly=false;this.required=false;this.size=undefined;this.max=undefined;this.min=undefined;this.form=undefined;this.allowCustomValues=false;this._eOptions=[];this.clearSelect=false;this.mask=false;this.debounce=0;this.dropDownConfig={};this.showInlineValidation=u(this.showInlineValidation,50)}get invalid(){return this._invalid}get validityMessage(){if(!this.nativeSelect)return"";return this.nativeSelect.validationMessage}get value(){return this._value}set value(n){if(typeof n==="string"){if(this.multiple)this._value=n.split(",");else this._value=n}else if(Array.isArray(n)){if(this.multiple)this._value=n;else this._value=n[0]}}get options(){if(this._options.length)return this._options;if(!this.datalist||!this.datalist.activeOptions)return[];return this._eOptions.map((n=>{const{value:t,selected:e,label:i,filterMeta:s}=n;return{value:t,selected:e,label:i,filterMeta:s}}))}set options(n){this._options=n.map((n=>{if(typeof n==="string")return{value:n,label:n};else return n}))}debounceChanged(){this.nanoSearchChange=b(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(){this.customValidate();if(this.onInit){if(this.multiple)this.currInsertIndex=this.value.length-1;return}requestAnimationFrame((()=>{this.shouldValidate();this.nanoChange.emit({value:this.value})}))}setDataListOpts(){if(!this.datalist||!this.selectWrap)return;this.datalist.input=this.inputCtrl;const n=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig=Object.assign(Object.assign(Object.assign({},n),this.dropDownConfig),{tetherTo:this.selectWrap})}async reportValidity(n){return new Promise((t=>{if(n){this.customValidate();this.showInlineValidation()}setTimeout((()=>{t({isValid:!this._invalid,errorMessage:this.nativeSelect.validationMessage})}),50)}))}async setFocus(){if(!this.inputCtrl)return;this.inputCtrl.focus();setTimeout((()=>this.inputCtrl.click()),50)}getSelectElement(){return Promise.resolve(this.nativeSelect)}async showError(n){if(this.nativeSelect){this.customError=n;this.nativeSelect.setCustomValidity(n);this.showInlineValidation()}}get valArray(){return typeof this.value==="string"?this.value.length?[this.value]:[]:this.value}isValidValues(){return this.valArray.find((n=>this.options.find((t=>t.value===n))))}slotChangeObserver(){if(!window["MutationObserver"])return;const n=this.mo=new MutationObserver((()=>this.processSlottedContent()));n.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]').length;this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]')}getLabel(n){const t=this.options.find((t=>{var e;return!t.disabled&&((e=t.value)===null||e===void 0?void 0:e.length)&&t.value===n}));return t&&t.label?t.label:n}onReset(n){const t=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!t||n.target!==this.el.closest("form"))return;this.clearSelectValue()}handleBlur(n){if(!this.hasFocus)return;const t=n;let e;requestAnimationFrame((()=>{if(t.key){if(t.key!=="Tab")return;e=d()}else e=n.target;if(l(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();requestAnimationFrame((()=>this.onInit=false))}componentWillLoad(){this.processSlottedContent()}render(){const n=this.selectId+"-lbl";const e=this.showInlineError||this.hasHelperSlot?this.selectId+"-moreId":"";const i=this.hasHelperEndSlot?this.selectId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";this.valueItems=[];const a=(({el:n,floatLabel:t,label:e,errorMessage:i,showInlineError:s,hasHelperSlot:a,hasHelperEndSlot:o,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h})=>({el:n,floatLabel:t,label:e,errorMessage:i,showInlineError:s,hasHelperSlot:a,hasHelperEndSlot:o,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h}))(this);const o=Object.assign(Object.assign({},a),{labelId:n,moreId:e,helperEndId:i,hasValue:!!this.value.length||!!this.inputSearchVal.length,controlId:this.selectId});const r=(({readonly:n,disabled:t})=>({readonly:n,disabled:t,clearControl:this.clearSelect}))(this);return t(s,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:Object.assign(Object.assign({},p(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})},t(f,Object.assign({},o),t(v,Object.assign({},r,{onClearText:this.clearSelectValue,control:this.el,ref:n=>this.selectWrap=n,endValueSlot:t("slot",{name:"down-arrow"},t("nano-icon",{slot:"value-end",name:"light/chevron-down"}))}),this.multiple&&t("div",{class:"select__multi-wrap select"},this.multipleValues(n,e,i)),!this.multiple&&[this.mask&&t("div",{class:"select__mask"},this.getLabel(this.value)),t("input",{id:this.selectId,class:"select__native-input",ref:n=>this.inputCtrl=n,"aria-labelledby":n+" "+e+" "+i,disabled:this.disabled,form:this.form,placeholder:this.placeholder,readOnly:true,required:this.required,value:this.getLabel(this.value),onFocus:this.onFocus})])),!this.readonly&&!this.disabled&&t("nano-datalist",{onNanoOptionsUpdated:this.setOptions,ref:n=>this.datalist=n,selected:this.valArray,type:this.multiple?"selctMulti":"select",onNanoSelect:this.setValue,onNanoDeselect:n=>{n.preventDefault();this.removeValue(n.detail.value)},options:this._options.length?this._options:undefined},this.allowCustomValues&&this.multiple&&!!this.inputSearchVal&&t("nano-option",{slot:"list-top",value:this.inputSearchVal,selected:false,label:this.inputSearchVal,onNanoSelect:()=>this.inputCtrl.focus()},t("span",{slot:"check-icon"}),"Add '",this.inputSearchVal,"'"),t("slot",null)),t("select",{id:this.selectId+"-hidden",class:"select__native-ctrl",ref:n=>this.nativeSelect=n,"aria-labelledby":n+" "+e+" "+i,disabled:this.disabled,form:this.form,multiple:this.multiple,name:this.name,required:this.required,onInvalid:this.handleInvalid},this.allowCustomValues&&this.valArray.map((n=>t("option",{value:n,selected:true},n))),!this.allowCustomValues&&this.options.map((n=>t("option",{value:n.value,selected:this.valArray.includes(n.value),disabled:n.disabled,label:n.label},this.valArray.includes(n.value))))))}multipleValues(n,e,i){const s=t("input",{class:"select__multi-input",id:this.selectId,ref:n=>this.inputCtrl=n,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.value.length?this.placeholder:"","aria-labelledby":n+" "+e+" "+i});if(!this.value.length)return s;return this.value.map(((n,e)=>{let i=t("span",{onDragStart:this.onDragStart,onDragLeave:this.onDragLeave,onDragEnd:this.onDragEnd,onDragOver:n=>n.preventDefault(),draggable:true,"data-value":n,ref:n=>this.valueItems.push(n),class:"select__multi-value"},t("span",null,this.getLabel(n)),t("button",{class:"select__multi-value-remove",type:"button",tabindex:"-1",onTouchEnd:()=>{this.removeValue(n)},onMouseUp:()=>{this.removeValue(n)}},t("nano-icon",{name:"light/times"})));if(e===0&&this.currInsertIndex<0)i=[s,i];else if(e===this.currInsertIndex)i=[i,s];return i}))}get el(){return a(this)}static get watchers(){return{debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],dropDownConfig:["setDataListOpts"]}}};x.style=w;export{m as nano_global_nav_user_profile,_ as nano_nav_item,x as nano_select};
|
5
|
-
//# sourceMappingURL=p-
|
4
|
+
import{r as n,h as t,i as e,c as i,a as s,g as a}from"./p-d6a04b3a.js";import{b as o,g as r,c as l}from"./p-cdfc507e.js";import{d as c}from"./p-2db8bb0b.js";import{g as h}from"./p-f88fa15c.js";import{g as d}from"./p-74a7fc4f.js";import{c as p}from"./p-411bb8f1.js";import{d as u,a as b}from"./p-7bff5224.js";import{F as f,a as v}from"./p-dc805ecc.js";const m=class{constructor(t){n(this,t);this.myAccountUser=undefined;this.userProfileUrl=undefined}render(){var n;return!!this.myAccountUser&&t("a",{href:this.userProfileUrl,class:"user-profile"},t("div",{class:"left"},t("div",{class:"avatar-container"},t("img",{class:"avatar",src:(n=this.myAccountUser)===null||n===void 0?void 0:n.small_avatar_url,alt:"User Avatar",height:75,width:75}),this.myAccountUser.is_nanopore_user&&t("img",{class:"logo-small",src:e(`../nano-assets/ont-wheel-light.svg`),alt:"Nanopore Logo"})),t("div",{class:"user-details"},t("span",{class:"name"},this.myAccountUser.name),t("span",{class:"bio"},this.myAccountUser.job_title," at ",this.myAccountUser.company))),t("div",{class:"right"},t("div",{class:"chevron-right"},t("nano-icon",{slot:"icon-end",name:"light/chevron-right","aria-label":"navigate to ..."}))))}};const g=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}:host .nav-item,:host .link{outline:none !important;border-radius:inherit}:host ::slotted(*),:host *{box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none;margin:0}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}:host ::slotted(nano-icon[slot=icon-start]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}:host ::slotted(nano-icon[slot=icon-end]){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start)}:host .link ::slotted(nano-icon[slot=icon-start]){-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]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0}:host .link,:host button,:host a{-webkit-border-after:var(--border-bottom);border-block-end:var(--border-bottom);display:flex;align-items:center;border-radius:inherit}: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-visible,:host a:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.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:flex;justify-content:flex-start;flex-direction:row;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{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);flex:1}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){flex:1}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, currentcolor);min-height:100%;inset-block-start:0;inset-inline-start:0;width:100%;z-index:1;opacity:0;transition:opacity 0.2s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);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;transform:translateX(0);transition:opacity 0.3s ease, transform 0.2s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}: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{transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{transform:translateX(0)}:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){box-shadow:none}:host(.nano-menu) .secondary-menu-content{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:flex;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-inline:var(--padding-end) 0;margin-block:0}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-inline:0 var(--padding-start);margin-block:0}:host(.nano-global-nav-bar) ::slotted(a),:host(.nano-global-nav-bar) button{position:relative}:host(.nano-global-nav-bar) ::slotted(a)::before,:host(.nano-global-nav-bar) button::before{content:"";background-color:#0c5a71;height:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}:host(.nano-global-nav-bar) .selected button::before,:host(.nano-global-nav-bar) .secondary-open button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.selected) ::slotted(a)::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.7}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{-webkit-padding-before:calc(var(--padding-top) / 2);padding-block-start:calc(var(--padding-top) / 2);-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:calc(var(--padding-bottom) / 2);padding-block-end:calc(var(--padding-bottom) / 2);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;width:100%}:host(.nano-menu-drawer) .text{-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0;text-align:start;flex:0 1 auto;min-width:130px;width:130px}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);width:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-width:20px}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);height:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;width:var(--secondary-width, 400px);max-width:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:"";display:block;position:absolute;width:6px;height:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (min-width: 52em){:host(.nano-menu-drawer) .notification::after{width:7px;height:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{transform:translateX(-100%);opacity:1}';const _=class{constructor(t){n(this,t);this.nanoClose=i(this,"nanoClose",7);this.nanoOpen=i(this,"nanoOpen",7);this.nanoOpening=i(this,"nanoOpening",7);this.nanoClosing=i(this,"nanoClosing",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoFocus=i(this,"nanoFocus",7);this.hasSecondarySlot=false;this.animating=false;this.closeSecondary=async()=>{if(!this.hasSecondarySlot||!this.didOpen)return;this.open=false;await c(this.secondaryDiv,{className:"open",show:false});this.nanoClosing.emit({secondaryMenu:this.secondaryDiv});this.didOpen=false};this.openSecondary=async()=>{if(window.innerWidth<this.secondaryActiveWidth){this.secondaryFallback.call(this);return}if(!this.hasSecondarySlot||this.didOpen)return;this.open=true;await c(this.secondaryDiv,{className:"open",show:true});this.nanoOpening.emit({secondaryMenu:this.secondaryDiv});this.didOpen=true};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=n=>{if(!this.hasAnchorEle)return;const t=n.target.closest("a, button");if(!t)this.btn.click()};this.handleMouseEnter=async()=>{if(!this.href||this.animating||!this.hasSecondarySlot||this.globalNavEle&&!this.globalNavEle.classList.contains("ready"))return;let n=0;if(o(this.el,".secondary-open.has-secondary").length)n=300;clearTimeout(this.waitHide);this.fromHover=true;this.animating=true;this.waitShow=window.setTimeout((async()=>await this.openSecondary()),n);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=()=>{this.fromHover=false;if(this.hasSecondarySlot)this.toggleSecondary()};this.hasAnchorEle=false;this.didOpen=false;this.isInGlobalNav=false;this.isInMenuDrawer=false;this.isInMenu=false;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.notification=false}async setFocus(){if(!this.btn)return;this.btn.focus()}openChange(){this.open?this.openSecondary():this.closeSecondary()}didOpenChange(){if(!this.hasSecondarySlot)return;if(!this.didOpen){setTimeout((()=>{if(!this.fromHover&&(!document.activeElement||document.activeElement===document.body))this.btn.focus({preventScroll:true});this.el.tabIndex=null;this.nanoClose.emit({secondaryMenu:this.secondaryDiv})}),50)}else{if(!this.fromHover){const n=new window.IntersectionObserver((t=>{if(t[0].boundingClientRect.top<0){this.secondaryDiv.scrollIntoView({behavior:"smooth"})}n.disconnect()}),{threshold:1});n.observe(this.secondaryDiv);this.secondaryDiv.focus({preventScroll:true});const t=h(this.secondaryDiv,true);if(t[0])t[0].focus();this.el.tabIndex=-1;this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}}}handleClose(n){if(!this.didOpen||!this.hasSecondarySlot||!this.closeOnBlur)return;if(!n.composedPath().some((n=>n===this.secondaryDiv)))this.toggleSecondary()}connectedCallback(){const n=this.el.querySelector('[slot="secondary"]');this.hasSecondarySlot=!!n;const t=r(this.el,"a, button")[0];this.hasAnchorEle=!!t;if(t){this.href=t.href?t.href:null;this.btn=t;if(this.hasSecondarySlot)this.btn.addEventListener("click",this.toggleSecondary);this.btn.addEventListener("focus",this.handleFocus);this.btn.addEventListener("blur",this.handleHostBlur)}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")}componentDidLoad(){this.openChange()}disconnectedCallback(){this.btn.removeEventListener("click",this.toggleSecondary);this.btn.removeEventListener("focus",this.handleFocus);this.btn.removeEventListener("blur",this.handleHostBlur)}render(){return t(s,{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},onBlur:this.handleHostBlur,dir:this.el.ownerDocument.dir==="rtl"?"rtl":null,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onClick:this.handleHostClick,role:this.el.closest('[role="menu"]')?"menuitem":undefined},t("div",{class:{"nav-item":true,"secondary-open":this.open,selected:this.selected},part:"ctrl-wrapper"},this.href&&!this.hasAnchorEle&&!this.disabled&&t("a",{part:"ctrl ctrl--anchor",target:this.target,ref:n=>this.btn=n,href:this.href,onFocus:this.handleFocus,class:{notification:this.notification}},t("slot",{name:"icon-start"}),t("span",{class:"text"},t("slot",null)),t("slot",{name:"icon-end"})),(!this.hasAnchorEle&&!this.href||this.disabled)&&t("button",{part:"ctrl ctrl--button",ref:n=>this.btn=n,onClick:this.handleClick,onFocus:this.handleFocus,disabled:this.disabled,class:{notification:this.notification}},t("slot",{name:"icon-start"}),t("span",{class:"text"},t("slot",null)),t("slot",{name:"icon-end"})),this.hasAnchorEle&&!this.disabled&&t("div",{class:"link"},t("slot",{name:"icon-start"}),t("slot",null),t("slot",{name:"icon-end"})),this.hasSecondarySlot&&!this.disabled&&t("div",{class:"secondary-menu",ref:n=>this.secondaryDiv=n,tabIndex:-1},t("div",{class:"secondary-menu-content",part:"secondary-wrapper"},t("slot",{name:"secondary"})),t("div",{class:"secondary-menu-mask",onClick:this.closeSecondary,part:"secondary-mask"}))))}get el(){return a(this)}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};_.style=g;const w='.sc-nano-select-h {\n box-sizing: border-box;\n}\n\n*.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n display: none !important;\n}\n[disabled].sc-nano-select-h:not([disabled=false]) {\n opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-select {\n min-inline-size: 100%;\n display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-select {\n display: flex;\n gap: 1rem;\n container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select {\n flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select {\n display: none;\n}\n@container (min-width: 350px) {\n .form-ctrl.has-helper-end .form-ctrl__helper-end {\n display: block !important;\n }\n .form-ctrl.has-helper-end .form-ctrl__helper {\n display: none !important;\n }\n}\n\n.form-ctrl__wrapper.sc-nano-select {\n display: block;\n}\n\nlabel.sc-nano-select, .form-ctrl__more.sc-nano-select, .form-ctrl__error.sc-nano-select, .form-ctrl__helper.sc-nano-select {\n display: block;\n inline-size: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-select, .form-ctrl__more.visually-hide.sc-nano-select, .form-ctrl__error.visually-hide.sc-nano-select, .form-ctrl__helper.visually-hide.sc-nano-select {\n clip: rect(1px, 1px, 1px, 1px);\n -webkit-clip-path: inset(50%);\n clip-path: inset(50%);\n block-size: 1px;\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n padding-block: 0;\n -webkit-padding-end: 0;\n padding-inline-end: 0;\n -webkit-padding-start: var(--padding-start);\n padding-inline-start: var(--padding-start);\n color: var(--label-color);\n position: absolute;\n font-size: 1.15em;\n transform: translateY(-50%);\n transform-origin: top left;\n inset-block-start: 50%;\n transition: all 0.125s ease-in;\n opacity: 1;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n transform: translateY(-110%);\n font-size: 0.8em;\n opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n opacity: 0;\n transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n inset-block-start: 50%;\n}\n.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n inset-block-start: 0;\n transform: translateY(38%);\n}\n.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n inset-block-start: 0;\n transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-select {\n color: var(--label-color);\n font-size: var(--label-font-size);\n -webkit-padding-after: var(--padding-bottom);\n padding-block-end: var(--padding-bottom);\n line-height: 1;\n display: flex;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n margin-block: unset;\n -webkit-margin-end: 5px;\n margin-inline-end: 5px;\n -webkit-margin-start: 0;\n margin-inline-start: 0;\n opacity: 0;\n -webkit-appearance: none;\n appearance: none;\n transition: 0.3s ease opacity;\n font-size: 0.9em;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n margin-block: unset;\n -webkit-margin-end: 0;\n margin-inline-end: 0;\n -webkit-margin-start: auto;\n margin-inline-start: auto;\n font-size: 0.9em;\n opacity: 0.5;\n}\n.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n opacity: 0.5;\n}\n.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select {\n color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__label.sc-nano-select {\n color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n opacity: 0;\n transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-select {\n block-size: 1em;\n position: relative;\n margin-block: 4px var(--padding-bottom);\n margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-select, .form-ctrl__error.sc-nano-select {\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-select {\n font-style: italic;\n color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-select-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-select {\n opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-select {\n flex: 1 1 30%;\n min-inline-size: 150px;\n font-size: var(--invalid-msg-font-size);\n color: var(--help-msg-color);\n font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-select {\n opacity: 0;\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__error.sc-nano-select {\n opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n border-radius: var(--input-border-radius);\n inline-size: 100%;\n padding: 0 !important;\n position: relative;\n flex: 1 0 auto;\n display: flex;\n background: var(--input-bg-color);\n border: var(--input-border-style);\n border-width: var(--input-border-width);\n font-size: var(--input-font-size);\n -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select {\n background: var(--input-bg-color--focus);\n border: var(--input-border-style--focus);\n border-width: var(--input-border-width);\n -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid);\n border-width: var(--input-border-width);\n -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n -webkit-padding-start: 0 !important;\n padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid-focus);\n border-width: var(--input-border-width);\n -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n -webkit-padding-start: 0 !important;\n padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-select {\n display: flex;\n align-items: stretch;\n flex: 1;\n max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-select, .form-ctrl__slot-end.sc-nano-select, .form-ctrl__slot-start.sc-nano-select, .form-ctrl__slot-value-end.sc-nano-select {\n --nano-icon-size: 1.4em;\n margin-block: 0;\n margin-inline: 0;\n font-size: 1em;\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n display: flex;\n align-items: stretch;\n inline-size: auto;\n}\n\n.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select {\n display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n --nano-icon-size: 1.4em;\n padding-inline: unset;\n -webkit-padding-start: var(--padding-start);\n padding-inline-start: var(--padding-start);\n -webkit-padding-end: var(--padding-end);\n padding-inline-end: var(--padding-end);\n font-size: 1em;\n align-items: center;\n display: flex;\n block-size: 100%;\n z-index: 1;\n}\n.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s > *, [disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-select {\n color: var(--clear-btn-color);\n padding: 0;\n opacity: 0;\n inline-size: 0;\n -webkit-appearance: none;\n appearance: none;\n align-items: center;\n overflow: hidden;\n}\n.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n padding-block: 0;\n padding-inline: var(--padding-start) var(--padding-end);\n opacity: 1;\n inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-select:hover {\n color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-select-h {\n \n --placeholder-color: var(--nano-input-placeholder-color, initial);\n --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n --color-invalid: var(--nano-color-danger-rgb, 239 65 53);\n --color--focus-rgb:\n var(\n --nano-color-base-rgb,\n var(--nano-color-primary-rgb, 0 116 149)\n );\n --input-font-size: var(--nano-input-font-size, 0.87em);\n --input-text-color: var(--nano-input-text-color, #4a4a4a);\n --input-border-width: var(--nano-input-border-width, 1px);\n --input-border-hint-width: 3px;\n --input-border-color: var(--nano-input-border-color, #e4e6e8);\n --input-border-radius: var(--nano-input-border-radius, 0);\n --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n --input-bg-color: var(--nano-input-background-color, #fff);\n --input-bg-color--focus: var(--input-bg-color);\n --input-bg-color--invalid: var(--nano-input-background-color, white);\n --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n --help-msg-color: var(--nano-input-help-color, #616d6e);\n --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n --label-color: var(--nano-input-label-color, "currentcolor");\n --label-color--focus: var(--label-color);\n --label-color--invalid: var(--nano-input-label-color-invalid, "currentcolor");\n --label-font-size: var(--nano-input-label-color, 1em);\n --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n \n position: relative;\n width: 100%;\n padding: 0 !important;\n font-family: var(--nano-font-family, inherit);\n display: block;\n}\n\n.nano-color.sc-nano-select-h {\n --input-border-style--focus:\n var(--nano-input-border-style, solid) var(\n --nano-color-tint,\n var(--nano-color-primary-tint, #2689a5)\n );\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 color: var(--nano-color-base);\n}\n\nnano-item.sc-nano-select-h:not(.item-label), nano-item:not(.item-label) .sc-nano-select-h {\n --padding-start: 0;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select {\n pointer-events: none !important;\n}\n\nselect.sc-nano-select {\n display: none;\n}\n\n.select__native-input.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n padding: unset;\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: 0;\n border-radius: var(--input-border-radius);\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 -webkit-appearance: none;\n appearance: none;\n margin: 0;\n box-sizing: border-box;\n resize: none;\n overflow: hidden;\n cursor: default;\n line-height: 2.5em;\n \n \n}\n.has-float-label.sc-nano-select .select__native-input.sc-nano-select {\n line-height: 2.1em;\n min-height: 2.1em;\n -webkit-padding-before: 1.4em;\n padding-block-start: 1.4em;\n}\n.select__native-input.sc-nano-select::selection {\n background: transparent;\n}\n.select__native-input.sc-nano-select::-moz-selection {\n background: transparent;\n}\n.select__native-input.sc-nano-select::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: inherit;\n min-height: initial;\n}\n.select__native-input.sc-nano-select::-moz-placeholder {\n line-height: 2.8em;\n text-overflow: ellipsis;\n}\n.select__native-input.sc-nano-select:-webkit-autofill {\n background-color: transparent;\n}\n.select__native-input.sc-nano-select::-webkit-search-decoration, .select__native-input.sc-nano-select::-webkit-search-cancel-button, .select__native-input.sc-nano-select::-webkit-search-results-button, .select__native-input.sc-nano-select::-webkit-search-results-decoration {\n -webkit-appearance: none;\n appearance: none;\n}\n.select__native-input.sc-nano-select:invalid {\n box-shadow: none;\n}\n.select__native-input.sc-nano-select::-ms-clear, .select__native-input.sc-nano-select::-ms-reveal {\n display: none;\n}\n.select__native-input.resizable.sc-nano-select {\n resize: vertical;\n overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select {\n line-height: 1.5em;\n padding-block: var(--padding-top) var(--padding-bottom);\n white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder {\n line-height: 1.5em;\n}\n.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select {\n -webkit-padding-before: 1.8em;\n padding-block-start: 1.8em;\n}\n.masked.sc-nano-select-h .select__native-input.sc-nano-select {\n opacity: 0;\n position: absolute;\n inset-inline-start: 0;\n inset-block-start: 0;\n}\n\n.select__mask.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: 0;\n border-radius: var(--input-border-radius);\n pointer-events: none;\n line-height: 2.5em;\n min-height: 2.5em;\n}\n\n.select__multi-wrap.sc-nano-select {\n padding-block: 0 var(--padding-bottom);\n padding-inline: 0 0;\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n overflow: hidden;\n align-items: flex-start;\n}\n.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select {\n -webkit-padding-before: 1em;\n padding-block-start: 1em;\n}\n.select__multi-input.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: var(--padding-bottom) 0;\n min-width: 50px;\n width: 100%;\n max-height: 100%;\n -webkit-appearance: none;\n appearance: none;\n border: 0;\n outline: none;\n display: inline-block;\n background: transparent;\n flex: 0;\n position: relative;\n box-sizing: border-box;\n line-height: calc(2.5em - var(--padding-bottom));\n height: calc(2.5em - var(--padding-bottom));\n}\n.select__multi-input.sc-nano-select:last-child {\n flex: 1;\n}\n.select__multi-value.sc-nano-select {\n margin-block: var(--padding-bottom) 0;\n margin-inline: var(--padding-start) -3px;\n background: rgb(var(--multi-input-value-bg)/80%);\n color: var(--multi-input-value-text-color);\n border: 1px solid;\n border-color: var(--multi-input-value-border);\n padding: 0.35em 0.5em;\n max-width: 100%;\n display: flex;\n align-items: center;\n font-size: var(--input-font-size);\n letter-spacing: 1px;\n max-height: calc(2.5em - 8px);\n}\n.select__multi-value.sc-nano-select span.sc-nano-select {\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n overflow: hidden;\n}\n.select__multi-value-remove.sc-nano-select {\n background-position: center;\n -webkit-padding-start: 0.5em;\n padding-inline-start: 0.5em;\n margin: 0;\n color: inherit;\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n -webkit-appearance: none;\n appearance: none;\n display: flex;\n align-items: center;\n inset-block-start: 0;\n font-size: 1em;\n}\n.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select {\n --color: var(--multi-input-value-text-color);\n}\n\n.form-ctrl__float-label.sc-nano-select {\n width: calc(100% - (1em + var(--padding-start) * 2));\n}\n.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n transform: translateY(-110%);\n font-size: 0.8em;\n}\n.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n transform: translateY(21%);\n inset-block-start: 0;\n}\n\n.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 {\n pointer-events: auto;\n}';let y=0;const x=class{get inputCtrl(){return this._inputCtrl}set inputCtrl(n){if(n===this._inputCtrl)return;this._inputCtrl=n;this.setDataListOpts()}get selectWrap(){return this._selectWrap}set selectWrap(n){if(this._selectWrap===n)return;this._selectWrap=n;this.setDataListOpts()}get datalist(){return this._datalist}set datalist(n){if(this._datalist===n)return;this._datalist=n;this.setDataListOpts()}constructor(t){n(this,t);this.nanoChange=i(this,"nanoChange",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoFocus=i(this,"nanoFocus",7);this.nanoDidLoad=i(this,"nanoDidLoad",7);this.nanoDidUnload=i(this,"nanoDidUnload",7);this.nanoSearchChange=i(this,"nanoSearchChange",7);this.nanoValidate=i(this,"nanoValidate",7);this.valueItems=[];this.selectId=`nano-select-${y++}`;this.rtl=false;this.onInit=true;this.customError="";this._value=this.multiple?[]:"";this._options=[];this.customValidate=()=>{if(!this.nativeSelect||!!this.customError||!this.nativeSelect["setCustomValidity"])return;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=n=>{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:n})};this.handleInvalid=n=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(this.showInlineError)n.preventDefault();requestAnimationFrame((()=>this.showInlineValidation(n)))};this.setValue=n=>{n.preventDefault();if(!this.multiple){this.value=n.detail.value;return}if(this.value&&this.value.length&&this.value.includes(n.detail.value))return;if(this.max&&this.value.length===this.max)return;this.currInsertIndex++;this.value=[...this.value.slice(0,this.currInsertIndex),n.detail.value,...this.value.slice(this.currInsertIndex)];this.inputSearchVal=""};this.removeValue=n=>{if(!this.multiple||!this.value.length)return;if(!n)n=this.value[this.value.length-1];this.value=this.value.filter((t=>t!==n));this.currInsertIndex--;this.setFocus()};this.setOptions=()=>{if(!this.datalist||!this.datalist.activeOptions||!this.datalist.activeOptions.length)return;this._eOptions=this.datalist.activeOptions.map((n=>{const{value:t,selected:e,label:i,filterMeta:s}=n;return{value:t,selected:e,label:i,filterMeta:s}}));this.customValidate()};this.handleDocumentKeyDown=n=>{if(!this.multiple||!this.hasFocus)return;if(!this.inputSearchVal){let t;switch(n.key){case"Backspace":if(this.inputCtrl.previousElementSibling)t=this.inputCtrl.previousElementSibling;else break;this.removeValue(t.dataset.value||null);break;case"Delete":if(this.inputCtrl.nextElementSibling)t=this.inputCtrl.nextElementSibling;else break;this.removeValue(t.dataset.value||null);break;case"ArrowLeft":case"ArrowRight":if(!this.value.length)break;if(n.key==="ArrowLeft"&&this.inputCtrl.previousSibling)this.currInsertIndex--;if(n.key==="ArrowRight"&&this.inputCtrl.nextSibling)this.currInsertIndex++;setTimeout((()=>{this.inputCtrl.focus()}),20);n.preventDefault();break}}};this.onBlur=()=>{this.hasFocus=false;requestAnimationFrame((()=>{if(this.validateOn==="dirty"&&!this.hasFocus)this.showInlineValidation()}));this.nanoBlur.emit();if(!this.allowCustomValues&&this.multiple){this.inputSearchVal="";const n=new window.Event("change");this.inputCtrl.dispatchEvent(n)}};this.onFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.clearSelectValue=n=>{if(this.clearSelect&&!this.readonly&&!this.disabled&&n){n.preventDefault();n.stopPropagation()}if(this.multiple){this.value=[];this.currInsertIndex=-1}else this.value="";this.inputCtrl.value="";const t=new window.Event("change");this.inputCtrl.dispatchEvent(t)};this.onClick=()=>{this.setFocus()};this.onDragStart=n=>{const t=n.target;this.dragVal=t.dataset.value};this.onDragEnd=n=>{this.dragVal=null;n.preventDefault()};this.onDragLeave=n=>{const t=n.target;const e=t.dataset&&t.dataset.value?t.dataset.value:null;if(!e||this.dragVal===e||!this.value.includes(this.dragVal)){n.preventDefault();return}const i=this.value.indexOf(e);const s=this.value.indexOf(this.dragVal);const a=this.value;const o=a[i];a[i]=a[s];a[s]=o;this.value=[...a]};this.onMultiInput=n=>{this.inputSearchVal=n.target.value.trim();this.nanoSearchChange.emit({value:n.target.value.trim()})};this.currInsertIndex=-1;this.showErrorMsg=false;this.errorMessage="";this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.hasHelperEndSlot=false;this.inputSearchVal="";this._invalid=false;this.color=undefined;this.autofocus=false;this.disabled=false;this.validateOn="submitThenDirty";this.showInlineError=true;this.label=undefined;this.hideLabel=false;this.floatLabel=false;this.multiple=false;this.name=this.selectId+"-name";this.placeholder=undefined;this.readonly=false;this.required=false;this.size=undefined;this.max=undefined;this.min=undefined;this.form=undefined;this.allowCustomValues=false;this._eOptions=[];this.clearSelect=false;this.mask=false;this.debounce=0;this.dropDownConfig={};this.showInlineValidation=u(this.showInlineValidation,50)}get invalid(){return this._invalid}get validityMessage(){if(!this.nativeSelect)return"";return this.nativeSelect.validationMessage}get value(){return this._value}set value(n){if(typeof n==="string"){if(this.multiple)this._value=n.split(",");else this._value=n}else if(Array.isArray(n)){if(this.multiple)this._value=n;else this._value=n[0]}}get options(){if(this._options.length)return this._options;if(!this.datalist||!this.datalist.activeOptions)return[];return this._eOptions.map((n=>{const{value:t,selected:e,label:i,filterMeta:s}=n;return{value:t,selected:e,label:i,filterMeta:s}}))}set options(n){this._options=n.map((n=>{if(typeof n==="string")return{value:n,label:n};else return n}))}debounceChanged(){this.nanoSearchChange=b(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(){this.customValidate();if(this.onInit){if(this.multiple)this.currInsertIndex=this.value.length-1;return}requestAnimationFrame((()=>{this.shouldValidate();this.nanoChange.emit({value:this.value})}))}setDataListOpts(){if(!this.datalist||!this.selectWrap)return;this.datalist.input=this.inputCtrl;const n=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig=Object.assign(Object.assign(Object.assign({},n),this.dropDownConfig),{tetherTo:this.selectWrap})}async reportValidity(n){return new Promise((t=>{if(n){this.customValidate();this.showInlineValidation()}setTimeout((()=>{t({isValid:!this._invalid,errorMessage:this.nativeSelect.validationMessage})}),50)}))}async setFocus(){if(!this.inputCtrl)return;this.inputCtrl.focus();setTimeout((()=>this.inputCtrl.click()),50)}getSelectElement(){return Promise.resolve(this.nativeSelect)}async showError(n){if(this.nativeSelect){this.customError=n;this.nativeSelect.setCustomValidity(n);this.showInlineValidation()}}get valArray(){return typeof this.value==="string"?this.value.length?[this.value]:[]:this.value}isValidValues(){return this.valArray.find((n=>this.options.find((t=>t.value===n))))}slotChangeObserver(){if(!window["MutationObserver"])return;const n=this.mo=new MutationObserver((()=>this.processSlottedContent()));n.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]').length;this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]')}getLabel(n){const t=this.options.find((t=>{var e;return!t.disabled&&((e=t.value)===null||e===void 0?void 0:e.length)&&t.value===n}));return t&&t.label?t.label:n}onReset(n){const t=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!t||n.target!==this.el.closest("form"))return;this.clearSelectValue()}handleBlur(n){if(!this.hasFocus)return;const t=n;let e;requestAnimationFrame((()=>{if(t.key){if(t.key!=="Tab")return;e=d()}else e=n.target;if(l(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();requestAnimationFrame((()=>this.onInit=false))}componentWillLoad(){this.processSlottedContent()}render(){const n=this.selectId+"-lbl";const e=this.showInlineError||this.hasHelperSlot?this.selectId+"-moreId":"";const i=this.hasHelperEndSlot?this.selectId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";this.valueItems=[];const a=(({el:n,floatLabel:t,label:e,errorMessage:i,showInlineError:s,hasHelperSlot:a,hasHelperEndSlot:o,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h})=>({el:n,floatLabel:t,label:e,errorMessage:i,showInlineError:s,hasHelperSlot:a,hasHelperEndSlot:o,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h}))(this);const o=Object.assign(Object.assign({},a),{labelId:n,moreId:e,helperEndId:i,hasValue:!!this.value.length||!!this.inputSearchVal.length,controlId:this.selectId});const r=(({readonly:n,disabled:t})=>({readonly:n,disabled:t,clearControl:this.clearSelect}))(this);return t(s,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:Object.assign(Object.assign({},p(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})},t(f,Object.assign({},o),t(v,Object.assign({},r,{onClearText:this.clearSelectValue,control:this.el,ref:n=>this.selectWrap=n,endValueSlot:t("slot",{name:"down-arrow"},t("nano-icon",{slot:"value-end",name:"light/chevron-down"}))}),this.multiple&&t("div",{class:"select__multi-wrap select"},this.multipleValues(n,e,i)),!this.multiple&&[this.mask&&t("div",{class:"select__mask"},this.getLabel(this.value)),t("input",{id:this.selectId,class:"select__native-input",ref:n=>this.inputCtrl=n,"aria-labelledby":n+" "+e+" "+i,disabled:this.disabled,form:this.form,placeholder:this.placeholder,readOnly:true,required:this.required,value:this.getLabel(this.value),onFocus:this.onFocus})])),!this.readonly&&!this.disabled&&t("nano-datalist",{onNanoOptionsUpdated:this.setOptions,ref:n=>this.datalist=n,selected:this.valArray,type:this.multiple?"selctMulti":"select",onNanoSelect:this.setValue,onNanoDeselect:n=>{n.preventDefault();this.removeValue(n.detail.value)},options:this._options.length?this._options:undefined},this.allowCustomValues&&this.multiple&&!!this.inputSearchVal&&t("nano-option",{slot:"list-top",value:this.inputSearchVal,selected:false,label:this.inputSearchVal,onNanoSelect:()=>this.inputCtrl.focus()},t("span",{slot:"check-icon"}),"Add '",this.inputSearchVal,"'"),t("slot",null)),t("select",{id:this.selectId+"-hidden",class:"select__native-ctrl",ref:n=>this.nativeSelect=n,"aria-labelledby":n+" "+e+" "+i,disabled:this.disabled,form:this.form,multiple:this.multiple,name:this.name,required:this.required,onInvalid:this.handleInvalid},this.allowCustomValues&&this.valArray.map((n=>t("option",{value:n,selected:true},n))),!this.allowCustomValues&&this.options.map((n=>t("option",{value:n.value,selected:this.valArray.includes(n.value),disabled:n.disabled,label:n.label},this.valArray.includes(n.value))))))}multipleValues(n,e,i){const s=t("input",{class:"select__multi-input",id:this.selectId,ref:n=>this.inputCtrl=n,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.value.length?this.placeholder:"","aria-labelledby":n+" "+e+" "+i});if(!this.value.length)return s;return this.value.map(((n,e)=>{let i=t("span",{onDragStart:this.onDragStart,onDragLeave:this.onDragLeave,onDragEnd:this.onDragEnd,onDragOver:n=>n.preventDefault(),draggable:true,"data-value":n,ref:n=>this.valueItems.push(n),class:"select__multi-value"},t("span",null,this.getLabel(n)),t("button",{class:"select__multi-value-remove",type:"button",tabindex:"-1",onTouchEnd:()=>{this.removeValue(n)},onMouseUp:()=>{this.removeValue(n)}},t("nano-icon",{name:"light/times"})));if(e===0&&this.currInsertIndex<0)i=[s,i];else if(e===this.currInsertIndex)i=[i,s];return i}))}get el(){return a(this)}static get watchers(){return{debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],dropDownConfig:["setDataListOpts"]}}};x.style=w;export{m as nano_global_nav_user_profile,_ as nano_nav_item,x as nano_select};
|
5
|
+
//# sourceMappingURL=p-783de955.entry.js.map
|
@@ -1,5 +1,5 @@
|
|
1
1
|
/*!
|
2
2
|
* Web Components for Nanopore digital Web Apps
|
3
3
|
*/
|
4
|
-
import{r as i,c as a,h as o,a as t,g as s}from"./p-d6a04b3a.js";import{M as e}from"./p-2234694a.js";import{l as n,u as r}from"./p-
|
5
|
-
//# sourceMappingURL=p-
|
4
|
+
import{r as i,c as a,h as o,a as t,g as s}from"./p-d6a04b3a.js";import{M as e}from"./p-2234694a.js";import{l as n,u as r}from"./p-b27b56d3.js";import{h as d}from"./p-dc565459.js";import{C as l}from"./p-dd5687db.js";import"./p-f88fa15c.js";import"./p-cdfc507e.js";import"./p-7bff5224.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--content-background:#fafafa;--footer-content:#e4e6e8;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--close-button-color:#b5aea7;--width:60rem;--tint-color:#00607b;--body-padding-v:var(--nano-spacing-large, 20px);--body-padding-h:var(--nano-spacing-large, 20px);--header-padding-v:var(--nano-spacing-medium, 16px);--header-padding-h:var(--nano-spacing-large, 20px);--footer-padding-v:var(--nano-spacing-medium, 16px);--footer-padding-h:var(--nano-spacing-large, 20px)}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-layer-index-modal, 700)}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);max-inline-size:calc(100% - var(--nano-spacing-xlarge, 24px));max-block-size:calc(92% - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform}.dialog__panel:focus{outline:none}.dialog--with-ribbon .dialog__panel{-webkit-border-before:5px solid var(--tint-color);border-block-start:5px solid var(--tint-color)}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-fast, 0.1s) box-shadow;min-inline-size:auto}[stuck] .dialog__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.dialog__title{flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}.dialog .dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding-block:0;padding-inline:var(--header-padding-h);--color:var(--close-button-color)}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{-webkit-padding-before:var(--body-padding-v);padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-radius:0 0 inherit inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-radius:inherit inherit 0 0}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto}.dialog__footer ::slotted(button){-webkit-margin-end:var(--nano-spacing-small, 8px) !important;margin-inline-end:var(--nano-spacing-small, 8px) !important}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__close-txt{color:var(--tint-color);border:none;text-decoration:underline;margin:0;text-underline-offset:4px;background-color:transparent;font:inherit;-webkit-box-align:center;cursor:pointer;font-size:var(--nano-fontsize-small, 0.875rem);padding:0.5rem;border-radius:var(--nano-border-radius-small, 2px);transition:box-shadow 100ms ease-in-out}.dialog__close-txt:focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.dialog__overlay{position:fixed;inset:0;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.dialog--open .dialog__overlay{opacity:1}";let c=0;const p=class{constructor(o){i(this,o);this.nanoShow=a(this,"nanoShow",7);this.nanoAfterShow=a(this,"nanoAfterShow",7);this.nanoHide=a(this,"nanoHide",7);this.nanoAfterHide=a(this,"nanoAfterHide",7);this.nanoInitialFocus=a(this,"nanoInitialFocus",7);this.nanoRequestClose=a(this,"nanoRequestClose",7);this.componentId=`dialog-${++c}`;this.willShow=false;this.willHide=false;this.handleKeyDown=i=>{if(i.key==="Escape"){this.requestClose()}};this.requestClose=()=>{const i=this.nanoRequestClose.emit();if(!i.defaultPrevented&&!this.noUserDismiss){this.hide()}else{this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250)}};this.handleTransitionEnd=i=>{if(i.propertyName==="opacity"&&i.composedPath().find((i=>i===this.panel||i===this.overlay))){this.willShow=false;this.willHide=false;this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit();if(!this.open)this.dialog.hidden=true}};this.handleSlotChange=()=>{this.hasFooter=d(this.host,"footer")};this.noDismiss=false;this.hasFooter=false;this.showRibbon=true;this.open=false;this.label=undefined;this.noHeader=false;this.noFooter=false;this.noUserDismiss=false;this.storeId=undefined;this.storeMethod="url-hash";this.hoist=false}get panel(){return this._panel}set panel(i){if(this._panel){this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}i.addEventListener("transitionend",this.handleTransitionEnd);this._panel=i}handleOpenChange(){this.open?this.show():this.hide()}handleHoistChange(){if(!this.hoist||Array.from(document.body.children).includes(this.host))return;document.body.prepend(this.host)}async show(){if(this.willShow){return}const i=this.nanoShow.emit();if(i.defaultPrevented){this.open=false;return}if(this.dialog)this.dialog.hidden=false;this.originalTrigger=document.activeElement;this.willShow=true;this.open=true;this.modal.activate();n(this.host);if(this.open){this.host.addEventListener("nanoAfterShow",(()=>{const i=this.nanoInitialFocus.emit();if(!i.defaultPrevented){this.panel.focus({preventScroll:true})}}),{once:true})}}async hide(){if(this.willHide){return}const i=this.nanoHide.emit();if(i.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();r(this.host);this.stopVideos();const a=this.originalTrigger;if(a&&typeof a.focus==="function"){setTimeout((()=>a.focus()))}}stopVideos(){const i=Array.from(this.host.querySelectorAll("iframe,video"));i.forEach((i=>{if(i.tagName.toLowerCase()==="video")i.pause();else{const a=i.src;i.src=a}}))}connectedCallback(){this.handleHoistChange();this.modal=new e(this.host)}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)l.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.dialog.hidden=!this.open}disconnectedCallback(){r(this.host);if(!this.panel)return;this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return o(t,null,o("div",{part:"base",class:{dialog:true,"dialog--open":this.open,"dialog--has-footer":!this.noFooter,"dialog--has-header":!this.noHeader,"dialog--nodismiss":this.noDismiss,"dialog--with-ribbon":this.showRibbon},onKeyDown:this.handleKeyDown,ref:i=>this.dialog=i},o("div",{part:"overlay",class:"dialog__overlay",ref:i=>this.overlay=i,onClick:this.requestClose}),o("div",{ref:i=>this.panel=i,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:0},o("div",{class:"dialog__body-wrap"},!this.noHeader&&o("nano-sticker",null,o("header",{part:"header",class:"dialog__header"},o("span",{part:"title",class:"dialog__title",id:`${this.componentId}-title`},o("slot",{name:"label"},this.label||String.fromCharCode(65279))),!this.noUserDismiss&&o("nano-icon-button",{part:"close-button",exportparts:"base:close-button__base",class:"dialog__close-icon",label:"close dialog",onClick:this.requestClose,iconName:"light/times"}))),o("div",{part:"body",class:"dialog__body"},o("slot",null)),!this.noFooter&&(this.hasFooter||!this.noUserDismiss)&&o("nano-sticker",{position:"bottom"},o("footer",{part:"footer",class:"dialog__footer"},o("slot",{name:"footer",onSlotchange:this.handleSlotChange}),!this.noUserDismiss&&o("button",{class:"dialog__close-txt",onClick:this.requestClose},"Close")))))))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"],hoist:["handleHoistChange"]}}};p.style=h;export{p as nano_dialog};
|
5
|
+
//# sourceMappingURL=p-79fff4fd.entry.js.map
|
@@ -1,5 +1,5 @@
|
|
1
1
|
/*!
|
2
2
|
* Web Components for Nanopore digital Web Apps
|
3
3
|
*/
|
4
|
-
export{T as nano_table}from"./p-
|
5
|
-
//# sourceMappingURL=p-
|
4
|
+
export{T as nano_table}from"./p-78323d6e.js";import"./p-d6a04b3a.js";import"./p-ee045579.js";import"./p-7bff5224.js";import"./p-70747f20.js";
|
5
|
+
//# sourceMappingURL=p-7da12234.entry.js.map
|
@@ -1,5 +1,5 @@
|
|
1
1
|
/*!
|
2
2
|
* Web Components for Nanopore digital Web Apps
|
3
3
|
*/
|
4
|
-
import{r as s,c as o,h as t,a as n,g as e}from"./p-d6a04b3a.js";import{g as i}from"./p-
|
5
|
-
//# sourceMappingURL=p-
|
4
|
+
import{r as s,c as o,h as t,a as n,g as e}from"./p-d6a04b3a.js";import{g as i}from"./p-cdfc507e.js";import{c as r}from"./p-411bb8f1.js";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:block}";const l=class{constructor(t){s(this,t);this.nanoToggle=o(this,"nanoToggle",7);this.itemOpened=undefined;this.color=undefined}onToggleHandler(s){s.stopPropagation();const o=i(this.el,"nano-details")||this.el.querySelectorAll("nano-details");o.forEach(((o,t)=>{if(o!==s.target)o.open=false;else this.itemOpened=t}));this.nanoToggle.emit()}onClosedHandler(s){s.stopPropagation();this.itemOpened=null;this.nanoToggle.emit()}render(){return t(n,{class:Object.assign(Object.assign({},r(this.color)),{[`nano-color-${this.itemOpened}`]:typeof this.itemOpened==="number"})},t("slot",null))}get el(){return e(this)}};l.style=a;export{l as nano_accordion};
|
5
|
+
//# sourceMappingURL=p-9f60ff14.entry.js.map
|
@@ -1,5 +1,5 @@
|
|
1
1
|
/*!
|
2
2
|
* Web Components for Nanopore digital Web Apps
|
3
3
|
*/
|
4
|
-
import{r as t,h as i,a,g as s}from"./p-d6a04b3a.js";import{g as e,a as o}from"./p-257432ff.js";import{d as r}from"./p-7bff5224.js";const n=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-size:0;--indicator-track-color:#e4e6e8;--indicator-track-size:var(--indicator-size);--scroll-btn-color:"currentColor";--fade-size:1.75rem;--fade-transparency:0;--padding:var(--fade-size);position:relative;z-index:var(--nano-layer-index-raised, 5)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__scroller{scrollbar-width:none;-ms-overflow-style:none;display:flex;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");-webkit-mask-size:calc(100% + var(--fade-size) * 4);mask-size:calc(100% + var(--fade-size) * 4);-webkit-mask-position:calc(var(--fade-size) * -2);mask-position:calc(var(--fade-size) * -2)}.onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__scroller::after{content:" ";line-height:1;flex:0 0 auto;display:block}.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -1);mask-position:calc(var(--fade-size) * -1);-webkit-mask-size:calc(100% + var(--fade-size));mask-size:calc(100% + var(--fade-size))}.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.onav__items{flex:1 1 auto;position:relative;width:auto;flex-wrap:nowrap;display:flex}.onav__items::before{content:"";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.onav nano-icon-button.onav__scroll-button{--nano-color-base:var(--scroll-btn-color);display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color);pointer-events:none}.onav nano-icon-button.onav__scroll-button:focus{outline:none}.onav nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav nano-icon-button.onav__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.onav--horizontal .onav__scroller{overflow-x:auto;overflow-y:hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-inline:var(--padding);-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)))}.onav--horizontal .onav__scroller::after{padding-inline:0 var(--fade-size);padding-block:0 0}.onav--horizontal.onav--has-scroll-controls .onav__scroller{padding-inline:var(--fade-size) 0;-webkit-padding-before:0;padding-block-start:0;-webkit-padding-after:0;padding-block-end:0}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{content:"";width:100%;height:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;-webkit-border-after:solid var(--indicator-size) var(--indicator-color);border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{width:100%}.onav--vertical .onav__nav{max-height:100%;display:flex}.onav--vertical .onav__scroller{width:100%;overflow-y:auto;overflow-x:hidden;flex-direction:column;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-block:var(--padding);-webkit-mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));padding-inline:0 0;-webkit-padding-before:calc(var(--fade-size) + 12px);padding-block-start:calc(var(--fade-size) + 12px);-webkit-padding-after:var(--fade-size);padding-block-end:var(--fade-size)}.onav--vertical .onav__scroller::after{padding-inline:0 0;padding-block:0 var(--fade-size)}.onav--vertical .onav__items{flex-direction:column;width:-moz-fit-content;width:fit-content}.onav--vertical .onav__items::before{content:"";height:100%;width:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;-webkit-border-start:solid var(--indicator-size) var(--indicator-color);border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}';const l=class{watchIsActiveHandler(){this.instantReCalc=true;this.activeItem=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)));setTimeout((()=>this.instantReCalc=false),300)}async syncActiveItem(){this.activeItem=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)))}constructor(i){t(this,i);this.mutationObservers=new WeakMap;this.updateScrollControls=()=>{if(!this.nav)return;this.hasScrollControls=this.nav[this.scrollProp]>this.nav[this.clientDimProp]&&this.nav[this.scrollProp]>this.itemContainer[this.clientDimProp];this.handleScroll()};this.handleScroll=()=>{if(!this.hasScrollControls){this.hideControlStart=this.hideControlEnd=true;return}const t=this.isRtl?this.nav[this.scrollOffset]===0:Math.abs(this.nav[this.clientDimProp]-(this.nav[this.scrollProp]-this.nav[this.scrollOffset]))<2;const i=this.isRtl?Math.abs(this.nav[this.scrollProp]+this.nav[this.scrollOffset]-this.nav[this.clientDimProp])<2:this.nav[this.scrollOffset]===0;if(i){this.hideControlStart=true;this.hideControlEnd=false}else if(t){this.hideControlStart=false;this.hideControlEnd=true}else{this.hideControlEnd=false;this.hideControlStart=false}};this.handleBtnClick=(t=false)=>{const i=this.navDim;let a;if(t)a=this.nav[this.scrollOffset]+i-20;else a=this.nav[this.scrollOffset]-i+20;try{this.nav.scroll({left:this.orientation==="horizontal"?a:0,top:this.orientation==="vertical"?a:0,behavior:"smooth"})}catch(t){this.nav[this.scrollOffset]=a}};this.slotChangeHandler=()=>{if(this.allActiveItems.length<2)return;const t=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)));if(t)this.activeItem=t;this.recalculatePositions();this.allActiveItems.forEach((t=>{if(this.mutationObservers.get(t))return;const i=new MutationObserver((()=>this.syncActiveItemIndicator()));i.observe(t,{characterData:true,childList:true,subtree:true});this.mutationObservers.set(t,i)}))};this.handleClick=t=>{if(this.allActiveItems.length<2)return;const i=t.composedPath().find((t=>this.allActiveItems.includes(t)));if(i)this.activeItem=i};this.handleKeyDown=t=>{if(["Enter"," "].includes(t.key)){const i=t.composedPath().find((t=>this.allActiveItems.includes(t)));if(i)this.activeItem=i}};this.recalculatePositions=()=>{this.updateScrollControls();this.syncActiveItemIndicator();this.scrollToActiveItem()};this.scrollControls=true;this.orientation="horizontal";this.activeHandler=(t,i)=>t.classList.add("active");this.inActiveHandler=(t,i)=>t.classList.remove("active");this.isActiveHandler=(t,i)=>t.classList.contains("active");this.instantReCalc=false;this.hasScrollControls=false;this.hideControlEnd=true;this.hideControlStart=true;this.recalculatePositions=r(this.recalculatePositions.bind(this),80)}get scrollProp(){return this.orientation==="horizontal"?"scrollWidth":"scrollHeight"}get clientDimProp(){return this.orientation==="horizontal"?"clientWidth":"clientHeight"}get scrollOffset(){return this.orientation==="horizontal"?"scrollLeft":"scrollTop"}watchScrollControls(){if(this.hasScrollControls)this.handleScroll();else this.hideControlStart=this.hideControlEnd=true}hideEndBtn(){if(!this.endBtn)return;this.activateBtn(this.endBtn,!this.hideControlEnd)}hideStartBtn(){if(!this.startBtn)return;this.activateBtn(this.startBtn,!this.hideControlStart)}activateBtn(t,i=true){if(!i){t.tabIndex=-1;t.disabled=true;t.classList.remove("is-shown");return}t.tabIndex=0;t.disabled=false;t.classList.add("is-shown")}get allActiveItems(){return this.allItems.filter((t=>!t.disabled||t.classList.contains("disabled")))}get allItems(){return e(this.host,"*",true)}get activeItem(){return this._activeItem}set activeItem(t){if(!t||t===this.activeItem||t.disabled||!this.allActiveItems.includes(t)){return}this._activeItem=t;this.allActiveItems.forEach(((t,i)=>{if(t===this._activeItem)this.activeHandler(t,i);else this.inActiveHandler(t,i)}));this.recalculatePositions()}get navDim(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let i=this.nav[this.clientDimProp];if(this.orientation==="horizontal"){return i-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}else{return i-=parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)}}scrollToActiveItem(){if(!this.nav||!this.activeItem)return;setTimeout((()=>{this.activeItem.scrollIntoView({behavior:this.instantReCalc?"auto":"smooth",block:"center",inline:"center"})}),100)}syncActiveItemIndicator(){if(!this.activeItem)return;const t=this.activeItem;const i=t.clientWidth||0;const a=t.clientHeight+2||0;const s=o(t,this.itemContainer);if(!this.activeIndicator)return;const e=s.top;const r=s.left;if(this.instantReCalc)this.activeIndicator.style.transition="none";switch(this.orientation){case"horizontal":this.activeIndicator.style.width=`${i}px`;this.activeIndicator.style.height=null;this.activeIndicator.style.transform=`translateX(${r}px)`;break;case"vertical":this.activeIndicator.style.width=null;this.activeIndicator.style.height=`${a}px`;this.activeIndicator.style.transform=`translateY(${e}px)`;break}setTimeout((()=>this.activeIndicator.style.transition=null),400)}connectedCallback(){this.instantReCalc=true;this.isRtl=this.orientation==="horizontal"&&!!this.host.closest('[dir="rtl"]');if(window["MutationObserver"])this.slotChangeHandler();if(!window["ResizeObserver"])return;if(this.ro){this.ro.disconnect();this.ro=undefined}const t=this.ro=new ResizeObserver(this.recalculatePositions);t.observe(this.host)}componentDidLoad(){this.activeItem=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)));this.instantReCalc=false}disconnectedCallback(){if(this.ro){this.ro.disconnect();this.ro=undefined}}render(){return i(a,{dir:this.isRtl?"rtl":null},i("div",{part:"base",class:{onav:true,[`onav--${this.orientation}`]:true,"onav--has-scroll-controls":this.hasScrollControls,"onav--has-scroll-controls-start":!this.hideControlStart,"onav--has-scroll-controls-end":!this.hideControlEnd,"onav--no-transitions":this.instantReCalc},onClick:this.handleClick,onKeyDown:this.handleKeyDown},i("div",{class:"onav__nav"},this.scrollControls&&i("nano-icon-button",{part:"scroll-button scroll-button-prev",class:{"onav__scroll-button":true,"onav__scroll-button--start":true},ref:t=>this.startBtn=t,onClick:()=>this.handleBtnClick(false),label:"Click to scroll",iconName:this.orientation==="horizontal"?"light/chevron-left":"light/chevron-up"}),i("div",{part:"scroller",ref:t=>this.nav=t,class:"onav__scroller",onScroll:this.handleScroll},i("div",{part:"items",ref:t=>this.itemContainer=t,class:"onav__items"},i("div",{part:"indicator",ref:t=>this.activeIndicator=t,class:"onav__active-indicator"}),i("slot",{onSlotchange:this.slotChangeHandler}))),this.scrollControls&&i("nano-icon-button",{part:"scroll-button scroll-button-next",class:{"onav__scroll-button":true,"onav__scroll-button--end":true},ref:t=>this.endBtn=t,onClick:()=>this.handleBtnClick(true),label:"Click to scroll",iconName:this.orientation==="horizontal"?"light/chevron-right":"light/chevron-down"}))))}get host(){return s(this)}static get watchers(){return{isActiveHandler:["watchIsActiveHandler"],hasScrollControls:["watchScrollControls"],hideControlEnd:["hideEndBtn"],hideControlStart:["hideStartBtn"]}}};l.style=n;export{l as nano_overflow_nav};
|
5
|
-
//# sourceMappingURL=p-
|
4
|
+
import{r as t,h as i,a,g as s}from"./p-d6a04b3a.js";import{g as e,a as o}from"./p-cdfc507e.js";import{d as r}from"./p-7bff5224.js";const n=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-size:0;--indicator-track-color:#e4e6e8;--indicator-track-size:var(--indicator-size);--scroll-btn-color:"currentColor";--fade-size:1.75rem;--fade-transparency:0;--padding:var(--fade-size);position:relative;z-index:var(--nano-layer-index-raised, 5)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__scroller{scrollbar-width:none;-ms-overflow-style:none;display:flex;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");-webkit-mask-size:calc(100% + var(--fade-size) * 4);mask-size:calc(100% + var(--fade-size) * 4);-webkit-mask-position:calc(var(--fade-size) * -2);mask-position:calc(var(--fade-size) * -2)}.onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__scroller::after{content:" ";line-height:1;flex:0 0 auto;display:block}.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -1);mask-position:calc(var(--fade-size) * -1);-webkit-mask-size:calc(100% + var(--fade-size));mask-size:calc(100% + var(--fade-size))}.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.onav__items{flex:1 1 auto;position:relative;width:auto;flex-wrap:nowrap;display:flex}.onav__items::before{content:"";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.onav nano-icon-button.onav__scroll-button{--nano-color-base:var(--scroll-btn-color);display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color);pointer-events:none}.onav nano-icon-button.onav__scroll-button:focus{outline:none}.onav nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav nano-icon-button.onav__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.onav--horizontal .onav__scroller{overflow-x:auto;overflow-y:hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-inline:var(--padding);-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)))}.onav--horizontal .onav__scroller::after{padding-inline:0 var(--fade-size);padding-block:0 0}.onav--horizontal.onav--has-scroll-controls .onav__scroller{padding-inline:var(--fade-size) 0;-webkit-padding-before:0;padding-block-start:0;-webkit-padding-after:0;padding-block-end:0}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{content:"";width:100%;height:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;-webkit-border-after:solid var(--indicator-size) var(--indicator-color);border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{width:100%}.onav--vertical .onav__nav{max-height:100%;display:flex}.onav--vertical .onav__scroller{width:100%;overflow-y:auto;overflow-x:hidden;flex-direction:column;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-block:var(--padding);-webkit-mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));padding-inline:0 0;-webkit-padding-before:calc(var(--fade-size) + 12px);padding-block-start:calc(var(--fade-size) + 12px);-webkit-padding-after:var(--fade-size);padding-block-end:var(--fade-size)}.onav--vertical .onav__scroller::after{padding-inline:0 0;padding-block:0 var(--fade-size)}.onav--vertical .onav__items{flex-direction:column;width:-moz-fit-content;width:fit-content}.onav--vertical .onav__items::before{content:"";height:100%;width:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;-webkit-border-start:solid var(--indicator-size) var(--indicator-color);border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}';const l=class{watchIsActiveHandler(){this.instantReCalc=true;this.activeItem=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)));setTimeout((()=>this.instantReCalc=false),300)}async syncActiveItem(){this.activeItem=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)))}constructor(i){t(this,i);this.mutationObservers=new WeakMap;this.updateScrollControls=()=>{if(!this.nav)return;this.hasScrollControls=this.nav[this.scrollProp]>this.nav[this.clientDimProp]&&this.nav[this.scrollProp]>this.itemContainer[this.clientDimProp];this.handleScroll()};this.handleScroll=()=>{if(!this.hasScrollControls){this.hideControlStart=this.hideControlEnd=true;return}const t=this.isRtl?this.nav[this.scrollOffset]===0:Math.abs(this.nav[this.clientDimProp]-(this.nav[this.scrollProp]-this.nav[this.scrollOffset]))<2;const i=this.isRtl?Math.abs(this.nav[this.scrollProp]+this.nav[this.scrollOffset]-this.nav[this.clientDimProp])<2:this.nav[this.scrollOffset]===0;if(i){this.hideControlStart=true;this.hideControlEnd=false}else if(t){this.hideControlStart=false;this.hideControlEnd=true}else{this.hideControlEnd=false;this.hideControlStart=false}};this.handleBtnClick=(t=false)=>{const i=this.navDim;let a;if(t)a=this.nav[this.scrollOffset]+i-20;else a=this.nav[this.scrollOffset]-i+20;try{this.nav.scroll({left:this.orientation==="horizontal"?a:0,top:this.orientation==="vertical"?a:0,behavior:"smooth"})}catch(t){this.nav[this.scrollOffset]=a}};this.slotChangeHandler=()=>{if(this.allActiveItems.length<2)return;const t=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)));if(t)this.activeItem=t;this.recalculatePositions();this.allActiveItems.forEach((t=>{if(this.mutationObservers.get(t))return;const i=new MutationObserver((()=>this.syncActiveItemIndicator()));i.observe(t,{characterData:true,childList:true,subtree:true});this.mutationObservers.set(t,i)}))};this.handleClick=t=>{if(this.allActiveItems.length<2)return;const i=t.composedPath().find((t=>this.allActiveItems.includes(t)));if(i)this.activeItem=i};this.handleKeyDown=t=>{if(["Enter"," "].includes(t.key)){const i=t.composedPath().find((t=>this.allActiveItems.includes(t)));if(i)this.activeItem=i}};this.recalculatePositions=()=>{this.updateScrollControls();this.syncActiveItemIndicator();this.scrollToActiveItem()};this.scrollControls=true;this.orientation="horizontal";this.activeHandler=(t,i)=>t.classList.add("active");this.inActiveHandler=(t,i)=>t.classList.remove("active");this.isActiveHandler=(t,i)=>t.classList.contains("active");this.instantReCalc=false;this.hasScrollControls=false;this.hideControlEnd=true;this.hideControlStart=true;this.recalculatePositions=r(this.recalculatePositions.bind(this),80)}get scrollProp(){return this.orientation==="horizontal"?"scrollWidth":"scrollHeight"}get clientDimProp(){return this.orientation==="horizontal"?"clientWidth":"clientHeight"}get scrollOffset(){return this.orientation==="horizontal"?"scrollLeft":"scrollTop"}watchScrollControls(){if(this.hasScrollControls)this.handleScroll();else this.hideControlStart=this.hideControlEnd=true}hideEndBtn(){if(!this.endBtn)return;this.activateBtn(this.endBtn,!this.hideControlEnd)}hideStartBtn(){if(!this.startBtn)return;this.activateBtn(this.startBtn,!this.hideControlStart)}activateBtn(t,i=true){if(!i){t.tabIndex=-1;t.disabled=true;t.classList.remove("is-shown");return}t.tabIndex=0;t.disabled=false;t.classList.add("is-shown")}get allActiveItems(){return this.allItems.filter((t=>!t.disabled||t.classList.contains("disabled")))}get allItems(){return e(this.host,"*",true)}get activeItem(){return this._activeItem}set activeItem(t){if(!t||t===this.activeItem||t.disabled||!this.allActiveItems.includes(t)){return}this._activeItem=t;this.allActiveItems.forEach(((t,i)=>{if(t===this._activeItem)this.activeHandler(t,i);else this.inActiveHandler(t,i)}));this.recalculatePositions()}get navDim(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let i=this.nav[this.clientDimProp];if(this.orientation==="horizontal"){return i-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}else{return i-=parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)}}scrollToActiveItem(){if(!this.nav||!this.activeItem)return;setTimeout((()=>{this.activeItem.scrollIntoView({behavior:this.instantReCalc?"auto":"smooth",block:"center",inline:"center"})}),100)}syncActiveItemIndicator(){if(!this.activeItem)return;const t=this.activeItem;const i=t.clientWidth||0;const a=t.clientHeight+2||0;const s=o(t,this.itemContainer);if(!this.activeIndicator)return;const e=s.top;const r=s.left;if(this.instantReCalc)this.activeIndicator.style.transition="none";switch(this.orientation){case"horizontal":this.activeIndicator.style.width=`${i}px`;this.activeIndicator.style.height=null;this.activeIndicator.style.transform=`translateX(${r}px)`;break;case"vertical":this.activeIndicator.style.width=null;this.activeIndicator.style.height=`${a}px`;this.activeIndicator.style.transform=`translateY(${e}px)`;break}setTimeout((()=>this.activeIndicator.style.transition=null),400)}connectedCallback(){this.instantReCalc=true;this.isRtl=this.orientation==="horizontal"&&!!this.host.closest('[dir="rtl"]');if(window["MutationObserver"])this.slotChangeHandler();if(!window["ResizeObserver"])return;if(this.ro){this.ro.disconnect();this.ro=undefined}const t=this.ro=new ResizeObserver(this.recalculatePositions);t.observe(this.host)}componentDidLoad(){this.activeItem=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)));this.instantReCalc=false}disconnectedCallback(){if(this.ro){this.ro.disconnect();this.ro=undefined}}render(){return i(a,{dir:this.isRtl?"rtl":null},i("div",{part:"base",class:{onav:true,[`onav--${this.orientation}`]:true,"onav--has-scroll-controls":this.hasScrollControls,"onav--has-scroll-controls-start":!this.hideControlStart,"onav--has-scroll-controls-end":!this.hideControlEnd,"onav--no-transitions":this.instantReCalc},onClick:this.handleClick,onKeyDown:this.handleKeyDown},i("div",{class:"onav__nav"},this.scrollControls&&i("nano-icon-button",{part:"scroll-button scroll-button-prev",class:{"onav__scroll-button":true,"onav__scroll-button--start":true},ref:t=>this.startBtn=t,onClick:()=>this.handleBtnClick(false),label:"Click to scroll",iconName:this.orientation==="horizontal"?"light/chevron-left":"light/chevron-up"}),i("div",{part:"scroller",ref:t=>this.nav=t,class:"onav__scroller",onScroll:this.handleScroll},i("div",{part:"items",ref:t=>this.itemContainer=t,class:"onav__items"},i("div",{part:"indicator",ref:t=>this.activeIndicator=t,class:"onav__active-indicator"}),i("slot",{onSlotchange:this.slotChangeHandler}))),this.scrollControls&&i("nano-icon-button",{part:"scroll-button scroll-button-next",class:{"onav__scroll-button":true,"onav__scroll-button--end":true},ref:t=>this.endBtn=t,onClick:()=>this.handleBtnClick(true),label:"Click to scroll",iconName:this.orientation==="horizontal"?"light/chevron-right":"light/chevron-down"}))))}get host(){return s(this)}static get watchers(){return{isActiveHandler:["watchIsActiveHandler"],hasScrollControls:["watchScrollControls"],hideControlEnd:["hideEndBtn"],hideControlStart:["hideStartBtn"]}}};l.style=n;export{l as nano_overflow_nav};
|
5
|
+
//# sourceMappingURL=p-a225e976.entry.js.map
|
@@ -0,0 +1,5 @@
|
|
1
|
+
/*!
|
2
|
+
* Web Components for Nanopore digital Web Apps
|
3
|
+
*/
|
4
|
+
import{a as t}from"./p-cdfc507e.js";const o=new Set;function c(t){o.add(t);document.body.classList.add("nano-scroll-lock")}function s(t){o.delete(t);if(o.size===0){document.body.classList.remove("nano-scroll-lock")}}function n(t,o,c=false){if(!c){try{t.scrollTo({left:o,behavior:"smooth"})}catch(c){t.scrollLeft=o}return}try{t.scrollTo({top:o,behavior:"smooth"})}catch(c){t.scrollTop=o}}function e(o,c,s="vertical",e="start"){const i=t(o,c);const r=i.top+c.scrollTop;const a=i.left+c.scrollLeft;const f=c.scrollLeft;const l=c.scrollLeft+c.offsetWidth;const u=c.scrollTop;const h=c.scrollTop+c.offsetHeight;if(s==="horizontal"||s==="both"){if(e==="start"){if(a<f)n(c,a);else if(a+o.clientWidth>l)n(c,a-c.offsetWidth+o.clientWidth)}else{n(c,c.scrollLeft+i.left-(c.offsetWidth/2+o.offsetWidth/2))}}if(s==="vertical"||s==="both"){if(e==="start"){if(r<u)n(c,r,true);else if(r+o.clientHeight>h){n(c,r-c.offsetHeight+o.clientHeight,true)}}else{n(c,c.scrollTop+i.top-(c.offsetHeight/2+o.offsetHeight/2),true)}}}export{c as l,e as s,s as u};
|
5
|
+
//# sourceMappingURL=p-b27b56d3.js.map
|
@@ -1,5 +1,5 @@
|
|
1
1
|
/*!
|
2
2
|
* Web Components for Nanopore digital Web Apps
|
3
3
|
*/
|
4
|
-
import{r as t,c as i,w as s,h as e,a as n,g as o}from"./p-d6a04b3a.js";import{g as a}from"./p-74a7fc4f.js";import{d as h}from"./p-7bff5224.js";import{g as r}from"./p-257432ff.js";import{g as l}from"./p-dc565459.js";const c=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--padding-start:var(--nano-spacing-xlarge, 24px);--padding-end:var(--nano-spacing-xlarge, 24px);--font-size:0.8em;--color:#b5aea7;color:var(--color)}.dlist--isfiltered ::slotted(*:not(nano-option):not([slot=no-result]):not([slot=list-top]):not([slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto}.dlist__status{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit}";function d(t){let i;if(t.id){i=document.querySelector(`label[for='${t.id}']`)}if(!i){i=t.closest("label")}return i}let p=0;const u=class{get allOptEles(){return this._allOptEles}set allOptEles(t){var i;this._allOptEles=t;if((i=this.connectedInput)===null||i===void 0?void 0:i.value)return;t.forEach((t=>{if(t.selected&&!this.selected.includes(t.value)){this.changeInputValue(t)}}))}constructor(s){t(this,s);this.nanoSelect=i(this,"nanoSelect",7);this.nanoDeselect=i(this,"nanoDeselect",7);this.nanoOptionsUpdated=i(this,"nanoOptionsUpdated",7);this.isNanoInput=false;this.typeToSelect="";this.listId=`nano-datalist-${p++}`;this.isFiltered=false;this.shouldFocus=false;this._allOptEles=[];this._dropDownConfig={skidding:-1};this.optSelected=t=>{t.stopPropagation();this.changeInputValue(t.detail);requestAnimationFrame((()=>this.inputChange()));if(this.type!=="selctMulti")this.shouldOpen=false};this.handleShow=async()=>{if(this.shouldFocus){this.shouldFocus=false;this.listBox.setFocus()}else if(this.type==="select")this.listBox.showActiveElement()};this.handleHide=()=>{this.open=false;const t=a();if(t.closest(this.host.tagName.toLowerCase())){this.connectedInput.select()}};this.inputClick=()=>{this.shouldOpen=true;this.manageDropdownDisplay()};this.inputKeydown=t=>{const i=["Shift","ArrowRight","ArrowLeft","Escape","Enter","Tab"];if(i.includes(t.key)){if(t.key==="Tab")this.shouldOpen=false;return}if(this.type==="select"&&!["ArrowDown","ArrowUp"].includes(t.key)&&(t.key!==" "||this.typeToSelectTimeout)){if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=window.setTimeout((()=>{this.typeToSelect="";this.typeToSelectTimeout=0}),750);this.typeToSelect+=t.key;this.setOptStartsWith()}return}this.shouldOpen=true;this.manageDropdownDisplay();if(["ArrowDown","ArrowUp"].includes(t.key)){t.preventDefault();this.shouldFocus=true}};this.optionKeyDown=t=>{const i=["Shift","ArrowUp","ArrowDown","Escape","Enter","Tab","Space","PageUp","PageDown","Home","End"," "];if(i.includes(t.key)){if(t.key==="Escape")this.connectedInput.focus();return}const s=["Delete","Backspace"];if(this.type!=="select"&&(!this.exactMatch||s.includes(t.key))){this.connectedInput.focus()}};this.actvOptEles=[];this.connectedInput=undefined;this.inputLabel=undefined;this.hasNoResult=undefined;this.shouldOpen=undefined;this.canOpen=true;this.optionIds=[];this.selected=[];this.options=[];this.input=undefined;this.type="input";this.open=false;this.disableFilter=false;this.disabled=false;this.inputChange=h(this.inputChange.bind(this),50)}get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(t){this._dropDownConfig=Object.assign(Object.assign({},this._dropDownConfig),t)}get activeOptions(){return this.allOptEles}openWatcher(){s((()=>{this.nanoDropdown.open=this.open;if(this.connectedInput)this.connectedInput.setAttribute("aria-expanded",this.open.toString())}))}async watchInputChange(){let t;if(t=this.host.closest("nano-input")){this.isNanoInput=true;this.connectedInput=await t.getInputElement()}else if(this.input&&typeof this.input==="string"&&(t=document.querySelector(this.input))){this.isNanoInput=false;this.connectedInput=t}else if(typeof this.input==="object"){this.connectedInput=this.input}}manageSlotChangeListener(){var t;if(!this.host)return;if((!this.options||!this.options.length)&&!this.mo){{const t=this.mo=new MutationObserver((()=>this.processSlottedContent()));t.observe(this.host,{childList:true,subtree:true})}this.processSlottedContent();return}if((t=this.options)===null||t===void 0?void 0:t.length){if(!!this.mo){this.mo.disconnect();this.mo=undefined}const t=this.host.querySelectorAll('[slot="internal-opts"]');s((()=>{var i;if(t===null||t===void 0?void 0:t.length)t.forEach((t=>t.remove()));this.allOptEles=this.options.flatMap(((t,i)=>{if(t.value||t.label){const s=Object.assign(document.createElement("nano-option"),{label:t.label,value:t.value,ariaPosinset:i,ariaSetsize:this.options.length,selected:t.selected,id:this.listId+"-option-"+i,textContent:t.label?t.label:t.value,slot:"internal-opts"});this.host.append(s);return s}}));if(((i=this.connectedInput)===null||i===void 0?void 0:i.value.length)&&this.type!=="select"){this.inputChange()}else{this.actvOptEles=[...this.allOptEles]}}))}}watchTypeChange(){if(!this.connectedInput)return;let t={closeOnSelect:false};let i="both";let s=false;switch(this.type){case"input":t={closeOnSelect:true};break;case"select":i="list";s=true;t={closeOnSelect:true,placement:"center"};break}if(!this.isNanoInput){t.tetherTo=this.connectedInput}this.dropDownConfig=Object.assign(Object.assign({},this.dropDownConfig),t);this.connectedInput.setAttribute("aria-autocomplete",i);this.connectedInput.readOnly=s}manageInputEvents(t,i){var e;if(!!i){const t=i.closest("nano-input");if(t){t.removeEventListener("nanoChange",this.inputChange)}this.removeEventListeners(i);this.inputLabel=null;s((()=>{i.removeAttribute("role");i.removeAttribute("aria-expanded");i.removeAttribute("aria-controls");i.removeAttribute("aria-owns");i.removeAttribute("aria-haspopup");i.removeAttribute("aria-autocomplete");i.removeAttribute("autocomplete")}))}if(!!t){const i=t.closest("nano-input");if(i){i.addEventListener("nanoChange",this.inputChange)}t.addEventListener("change",this.inputChange);t.addEventListener("click",this.inputClick);t.addEventListener("keydown",this.inputKeydown);t.addEventListener("input",this.inputChange);this.listId=this.host.id||this.listId;this.inputLabel=((e=t===null||t===void 0?void 0:t.labels)===null||e===void 0?void 0:e.item(0))||d(t);s((()=>{this.host.id=this.listId;t.setAttribute("role","combobox");t.setAttribute("aria-expanded","false");t.setAttribute("aria-controls",this.listId);t.setAttribute("aria-owns",this.listId);t.setAttribute("aria-haspopup","listbox");t.setAttribute("autocomplete","off")}))}}watchActvOptChange(){var t;let i=0;const e=((t=this.connectedInput)===null||t===void 0?void 0:t.value)||"";const n=[];s((()=>{this.allOptEles.forEach(((t,s)=>{if(this.actvOptEles.includes(t)){i++;t.setAttribute("aria-posinset",i+"");t.setAttribute("aria-setsize",this.actvOptEles.length+"");t.hidden=false;this.isSelected(t,e)}else{t.removeAttribute("aria-posinset");t.removeAttribute("aria-setsize");t.hidden=true;t.selected=false}t.id=this.listId+"-option-"+s;n.push(t.id)}));this.optionIds=n}))}manageCanOpen(){if(this.actvOptEles.length||this.hasNoResult)this.canOpen=true;else this.canOpen=false}manageDropdownDisplay(){if(this.shouldOpen&&this.canOpen&&!this.disabled)this.open=true;if(!this.shouldOpen||!this.canOpen)this.open=false;this.openWatcher()}fireActiveOptsEvent(){this.nanoOptionsUpdated.emit(this.actvOptEles)}isSelected(t,i){if(i===t.value||this.selected.includes(t.value)){t.selected=true}else t.selected=false}get dropwdownOpen(){if(!this.nanoDropdown||!this.open)return false;return true}get exactMatch(){return this.allOptEles.find((t=>this.connectedInput.value===t.value))}changeInputValue(t){var i;let s;if(this.selected.includes(t.value)){this.selected=this.selected.filter((i=>i!==t.value));s=this.nanoDeselect.emit(t)}else{this.selected=[...this.selected];s=this.nanoSelect.emit(t)}if(!s.defaultPrevented){if(this.connectedInput)this.connectedInput.value=t.value;const s=new window.Event("change");(i=this.connectedInput)===null||i===void 0?void 0:i.dispatchEvent(s)}}setOptStartsWith(){const t=t=>t.toLowerCase().substring(0,this.typeToSelect.length)===this.typeToSelect;const i=this.allOptEles.find((i=>i.value.trim().length>0&&!i.disabled&&(t(i.textContent)||t(i.value)||t(i.label)||t(i.filterMeta))));if(i)this.changeInputValue(i)}removeEventListeners(t){const i=t.closest("nano-input");if(i){i.removeEventListener("nanoChange",this.inputChange)}t.removeEventListener("change",this.inputChange);t.removeEventListener("click",this.inputClick);t.removeEventListener("keydown",this.inputKeydown);t.removeEventListener("input",this.inputChange)}processSlottedContent(){requestAnimationFrame((()=>{var t;this.allOptEles=Array.from(this.host.querySelectorAll("nano-option"));this.hasNoResult=!!this.host.querySelector('[slot="no-result"]');if(((t=this.connectedInput)===null||t===void 0?void 0:t.value.length)&&this.type!=="select"){this.inputChange()}else this.actvOptEles=this.allOptEles}))}inputChange(){if(this.disableFilter){this.actvOptEles=this.allOptEles;return}const t=this.connectedInput.value;const i=t.trim().toLowerCase();let s=false;const e=[];const n=t=>t.toLowerCase().indexOf(i)>-1;this.allOptEles.forEach((i=>{if((t===i.value||t===i.label)&&this.type!=="selctMulti"){i.selected=true;s=true}else this.isSelected(i,t)}));this.allOptEles.forEach((t=>{if(!i.length||s){e.push(t)}else if(t.value.trim().length>0&&!t.disabled&&(n(t.textContent)||n(t.value)||n(t.label)||n(t.filterMeta))){e.push(t)}}));this.isFiltered=i.length&&!s;this.actvOptEles=e}connectedCallback(){this.watchInputChange()}componentDidLoad(){this.manageSlotChangeListener();this.openWatcher()}componentDidRender(){setTimeout((()=>{if(!this.connectedInput)console.warn("no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop",this.host)}),500)}disconnectedCallback(){if(!!this.mo){this.mo.disconnect();this.mo=undefined}if(this.connectedInput)this.removeEventListeners(this.connectedInput)}render(){return e(n,{role:this.actvOptEles.length?"listbox":undefined,"aria-owns":this.optionIds.length?this.optionIds.join(" "):undefined,"aria-label":this.optionIds.length?"Select options from the list below":undefined},e("nano-dropdown",Object.assign({},this.dropDownConfig,{ref:t=>this.nanoDropdown=t,dialogTitle:"Select options from the list below",class:{dlist__dropdown:true,"dlist--isfiltered":this.isFiltered},onNanoAfterShow:this.handleShow,onNanoAfterHide:this.handleHide,role:"group"}),e("nano-menu",{hidden:!this.actvOptEles.length,type:"listbox",label:this.inputLabel?this.inputLabel.textContent:undefined,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen},tabIndex:-1,onNanoSelect:this.optSelected,onKeyDown:this.optionKeyDown,ref:t=>this.listBox=t,role:"list"},e("slot",{name:"list-top"}),!this.options.length&&e("slot",null),!!this.options.length&&e("slot",{name:"internal-opts"}),e("slot",{name:"list-bottom"})),e("nano-menu",{type:"listbox",label:"No results found",hidden:!!this.actvOptEles.length,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen}},e("slot",{name:"no-result"})),!!this.actvOptEles&&e("div",{class:"dlist__status"},this.actvOptEles.length," result",this.actvOptEles.length>1?"s":""," available.")))}get host(){return o(this)}static get watchers(){return{open:["openWatcher"],input:["watchInputChange"],options:["manageSlotChangeListener"],type:["watchTypeChange"],connectedInput:["watchTypeChange","manageInputEvents"],selected:["watchActvOptChange"],actvOptEles:["watchActvOptChange","manageCanOpen","fireActiveOptsEvent"],hasNoResult:["manageCanOpen"],shouldOpen:["manageDropdownDisplay"],canOpen:["manageDropdownDisplay"]}}};u.style=c;const f=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-start:var(--nano-spacing-medium, 16px);--padding-end:var(--nano-spacing-medium, 16px);--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;--font-size:0.9em;display:block}.menu{font-size:var(--font-size, 0.9em);overscroll-behavior:none;min-width:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)){padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:block}";const g=class{constructor(s){t(this,s);this.nanoFocus=i(this,"nanoFocus",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoSelect=i(this,"nanoSelect",7);this.ignoreMouseEvents=false;this.typeToSelect="";this._hasFocus=false;this.handleFocus=()=>{this.setActiveFocusItem(this.selectedItem||this.getItems[0]);this._hasFocus=true;this.nanoFocus.emit()};this.handleClick=t=>{const i=t.target;const s=i.closest("nano-nav-item");if(s&&!s.disabled){this.nanoSelect.emit(s)}};this.handleKeyDown=t=>{clearTimeout(this.ignoreMouseTimeout);this.ignoreMouseTimeout=setTimeout((()=>this.ignoreMouseEvents=false),500);this.ignoreMouseEvents=true;switch(t.key){case" ":if(this.activeItem)this.activeItem.click();break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":const i=this.getItems;const s=this.activeItem;let e=i.indexOf(s);if(i.length){t.preventDefault();if(t.key==="ArrowDown"){e++}else if(t.key==="ArrowUp"){e--}else if(t.key==="Home"||t.key==="PageUp"){e=0}else if(t.key==="End"||t.key==="PageDown"){e=i.length-1}if(e<0)e=i.length-1;if(e>i.length-1)e=0;this.setActiveFocusItem(i[e]);if(i[e])i[e].scrollIntoView({block:"nearest"});return}break}if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=setTimeout((()=>this.typeToSelect=""),750);this.typeToSelect+=t.key;const i=this.getItems;for(const t of i){const i=t.shadowRoot.querySelector("slot:not([name])");const s=l(i).toLowerCase().trim();if(s.substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}}};this.handleMouseOver=t=>{const i=t.target;const s=i.closest("nano-nav-item")||i.closest("nano-option");if(s&&!this.ignoreMouseEvents){this.setActiveFocusItem(s)}};this.type="menu";this.label=undefined}get hasFocus(){return this._hasFocus}async setFocus(){var t;if((t=this.menu)===null||t===void 0?void 0:t.focus)this.menu.focus({preventScroll:true})}async removeFocus(){var t;if((t=this.menu)===null||t===void 0?void 0:t.blur)this.menu.blur()}async showActiveElement(){if(this.selectedItem)this.selectedItem.scrollIntoView({block:"nearest"})}async resetActiveItem(){this.getItems.filter((t=>t.tagName.toLowerCase()==="nano-option")).map((t=>t.setAttribute("tabindex","-1")))}get getItems(){let t;const i=this.el.querySelectorAll("nano-nav-item.secondary-open");if(i.length){const s=i[i.length-1];t=Array.from(s.querySelectorAll("nano-nav-item, nano-option"))}else{t=r(this.el,"nano-nav-item, nano-option","slot")}return t.filter((t=>!t.disabled&&!t.hidden))}get activeItem(){const t=a();return this.getItems.find((i=>i.getAttribute("tabindex")==="0"||i===t||i.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,i=true){const s=this.getItems;const e=!t||t.disabled?s.find((t=>t.selected))||s[0]:t;s.filter((t=>t.tagName.toLowerCase()==="nano-option")).map((t=>t.setAttribute("tabindex",t===e?"0":"-1")));if(!i)return;if(e){e.setFocus?e.setFocus():e.focus()}else this.menu.focus()}handleBlur(t){if(!this.hasFocus)return;const i=t;let s;if(i.key){if(i.key!=="Tab")return;s=a()&&a().closest(this.el.tagName.toLowerCase())===this.el}else s=!!t.composedPath().find((t=>t===this.el));if(!s){this.resetActiveItem();this._hasFocus=false;this.nanoBlur.emit()}}componentDidLoad(){{r(this.el,":not(nano-nav-item):not(nano-option):not([role])",true).forEach((t=>t.setAttribute("role","none")))}}render(){return e(n,{role:this.type==="menu"?"menu":"group"},e("div",{onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:undefined,ref:t=>this.menu=t,part:"base",class:{menu:true,["menu--"+this.type]:true,"menu--has-focus":this.hasFocus},tabIndex:-1,role:"group"},e("slot",null)))}get el(){return o(this)}};g.style=f;const m=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;width:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){-webkit-margin-end:0.5em;margin-inline-end:0.5em}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){-webkit-margin-start:0.5em;margin-inline-start:0.5em}.option__check{visibility:hidden;display:flex;position:absolute;inset-inline-start:0.6em;inset-block-start:calc(50% - 0.6em);align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";let b=0;const v=class{constructor(s){t(this,s);this.nanoSelect=i(this,"nanoSelect",7);this.optId=`nano-option-${b++}`;this.hasFocus=false;this.value="";this.label="";this.selected=false;this.disabled=false;this.filterMeta="";this.handleClick=h(this.handleClick.bind(this),5)}valueChanged(){if(!this.value||!this.value.length)this.value=this.labelContent}labelChanged(){if(!this.label||!this.label.length)this.label=this.labelContent.length?this.labelContent:this.value}handleKeyDown(t){if(t.key!==" "&&t.key!=="Enter")return;t.preventDefault();this.nanoSelect.emit(this.host)}handleClick(){if(this.disabled)return;this.nanoSelect.emit(this.host)}get labelContent(){return r(this.host,"*:not([slot])",false).map((t=>t.textContent)).join(" ").trim()}componentWillLoad(){this.valueChanged();this.labelChanged()}render(){return e(n,{role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},e("div",{onMouseDown:this.handleClick,id:this.optId,class:{option:true,"option--selected":this.selected,"option--disabled":this.disabled,"option--novalue":!this.value}},e("div",{part:"check-icon",class:"option__check"},e("slot",{name:"check-icon"},e("nano-icon",{name:"light/check","aria-hidden":"true"}))),e("div",{part:"start",class:"option__start"},e("slot",{name:"start"})),e("div",{part:"label",class:"option__label"},e("slot",null,this.label||this.value)),e("div",{part:"end",class:"option__end"},e("slot",{name:"end"}))))}get host(){return o(this)}static get watchers(){return{value:["valueChanged"],label:["labelChanged"]}}};v.style=m;export{u as nano_datalist,g as nano_menu,v as nano_option};
|
5
|
-
//# sourceMappingURL=p-
|
4
|
+
import{r as t,c as i,w as s,h as e,a as n,g as o}from"./p-d6a04b3a.js";import{g as a}from"./p-74a7fc4f.js";import{d as h}from"./p-7bff5224.js";import{g as r}from"./p-cdfc507e.js";import{g as l}from"./p-dc565459.js";const c=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--padding-start:var(--nano-spacing-xlarge, 24px);--padding-end:var(--nano-spacing-xlarge, 24px);--font-size:0.8em;--color:#b5aea7;color:var(--color)}.dlist--isfiltered ::slotted(*:not(nano-option):not([slot=no-result]):not([slot=list-top]):not([slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto}.dlist__status{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit}";function d(t){let i;if(t.id){i=document.querySelector(`label[for='${t.id}']`)}if(!i){i=t.closest("label")}return i}let p=0;const u=class{get allOptEles(){return this._allOptEles}set allOptEles(t){var i;this._allOptEles=t;if((i=this.connectedInput)===null||i===void 0?void 0:i.value)return;t.forEach((t=>{if(t.selected&&!this.selected.includes(t.value)){this.changeInputValue(t)}}))}constructor(s){t(this,s);this.nanoSelect=i(this,"nanoSelect",7);this.nanoDeselect=i(this,"nanoDeselect",7);this.nanoOptionsUpdated=i(this,"nanoOptionsUpdated",7);this.isNanoInput=false;this.typeToSelect="";this.listId=`nano-datalist-${p++}`;this.isFiltered=false;this.shouldFocus=false;this._allOptEles=[];this._dropDownConfig={skidding:-1};this.optSelected=t=>{t.stopPropagation();this.changeInputValue(t.detail);requestAnimationFrame((()=>this.inputChange()));if(this.type!=="selctMulti")this.shouldOpen=false};this.handleShow=async()=>{if(this.shouldFocus){this.shouldFocus=false;this.listBox.setFocus()}else if(this.type==="select")this.listBox.showActiveElement()};this.handleHide=()=>{this.open=false;const t=a();if(t.closest(this.host.tagName.toLowerCase())){this.connectedInput.select()}};this.inputClick=()=>{this.shouldOpen=true;this.manageDropdownDisplay()};this.inputKeydown=t=>{const i=["Shift","ArrowRight","ArrowLeft","Escape","Enter","Tab"];if(i.includes(t.key)){if(t.key==="Tab")this.shouldOpen=false;return}if(this.type==="select"&&!["ArrowDown","ArrowUp"].includes(t.key)&&(t.key!==" "||this.typeToSelectTimeout)){if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=window.setTimeout((()=>{this.typeToSelect="";this.typeToSelectTimeout=0}),750);this.typeToSelect+=t.key;this.setOptStartsWith()}return}this.shouldOpen=true;this.manageDropdownDisplay();if(["ArrowDown","ArrowUp"].includes(t.key)){t.preventDefault();this.shouldFocus=true}};this.optionKeyDown=t=>{const i=["Shift","ArrowUp","ArrowDown","Escape","Enter","Tab","Space","PageUp","PageDown","Home","End"," "];if(i.includes(t.key)){if(t.key==="Escape")this.connectedInput.focus();return}const s=["Delete","Backspace"];if(this.type!=="select"&&(!this.exactMatch||s.includes(t.key))){this.connectedInput.focus()}};this.actvOptEles=[];this.connectedInput=undefined;this.inputLabel=undefined;this.hasNoResult=undefined;this.shouldOpen=undefined;this.canOpen=true;this.optionIds=[];this.selected=[];this.options=[];this.input=undefined;this.type="input";this.open=false;this.disableFilter=false;this.disabled=false;this.inputChange=h(this.inputChange.bind(this),50)}get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(t){this._dropDownConfig=Object.assign(Object.assign({},this._dropDownConfig),t)}get activeOptions(){return this.allOptEles}openWatcher(){s((()=>{this.nanoDropdown.open=this.open;if(this.connectedInput)this.connectedInput.setAttribute("aria-expanded",this.open.toString())}))}async watchInputChange(){let t;if(t=this.host.closest("nano-input")){this.isNanoInput=true;this.connectedInput=await t.getInputElement()}else if(this.input&&typeof this.input==="string"&&(t=document.querySelector(this.input))){this.isNanoInput=false;this.connectedInput=t}else if(typeof this.input==="object"){this.connectedInput=this.input}}manageSlotChangeListener(){var t;if(!this.host)return;if((!this.options||!this.options.length)&&!this.mo){{const t=this.mo=new MutationObserver((()=>this.processSlottedContent()));t.observe(this.host,{childList:true,subtree:true})}this.processSlottedContent();return}if((t=this.options)===null||t===void 0?void 0:t.length){if(!!this.mo){this.mo.disconnect();this.mo=undefined}const t=this.host.querySelectorAll('[slot="internal-opts"]');s((()=>{var i;if(t===null||t===void 0?void 0:t.length)t.forEach((t=>t.remove()));this.allOptEles=this.options.flatMap(((t,i)=>{if(t.value||t.label){const s=Object.assign(document.createElement("nano-option"),{label:t.label,value:t.value,ariaPosinset:i,ariaSetsize:this.options.length,selected:t.selected,id:this.listId+"-option-"+i,textContent:t.label?t.label:t.value,slot:"internal-opts"});this.host.append(s);return s}}));if(((i=this.connectedInput)===null||i===void 0?void 0:i.value.length)&&this.type!=="select"){this.inputChange()}else{this.actvOptEles=[...this.allOptEles]}}))}}watchTypeChange(){if(!this.connectedInput)return;let t={closeOnSelect:false};let i="both";let s=false;switch(this.type){case"input":t={closeOnSelect:true};break;case"select":i="list";s=true;t={closeOnSelect:true,placement:"center"};break}if(!this.isNanoInput){t.tetherTo=this.connectedInput}this.dropDownConfig=Object.assign(Object.assign({},this.dropDownConfig),t);this.connectedInput.setAttribute("aria-autocomplete",i);this.connectedInput.readOnly=s}manageInputEvents(t,i){var e;if(!!i){const t=i.closest("nano-input");if(t){t.removeEventListener("nanoChange",this.inputChange)}this.removeEventListeners(i);this.inputLabel=null;s((()=>{i.removeAttribute("role");i.removeAttribute("aria-expanded");i.removeAttribute("aria-controls");i.removeAttribute("aria-owns");i.removeAttribute("aria-haspopup");i.removeAttribute("aria-autocomplete");i.removeAttribute("autocomplete")}))}if(!!t){const i=t.closest("nano-input");if(i){i.addEventListener("nanoChange",this.inputChange)}t.addEventListener("change",this.inputChange);t.addEventListener("click",this.inputClick);t.addEventListener("keydown",this.inputKeydown);t.addEventListener("input",this.inputChange);this.listId=this.host.id||this.listId;this.inputLabel=((e=t===null||t===void 0?void 0:t.labels)===null||e===void 0?void 0:e.item(0))||d(t);s((()=>{this.host.id=this.listId;t.setAttribute("role","combobox");t.setAttribute("aria-expanded","false");t.setAttribute("aria-controls",this.listId);t.setAttribute("aria-owns",this.listId);t.setAttribute("aria-haspopup","listbox");t.setAttribute("autocomplete","off")}))}}watchActvOptChange(){var t;let i=0;const e=((t=this.connectedInput)===null||t===void 0?void 0:t.value)||"";const n=[];s((()=>{this.allOptEles.forEach(((t,s)=>{if(this.actvOptEles.includes(t)){i++;t.setAttribute("aria-posinset",i+"");t.setAttribute("aria-setsize",this.actvOptEles.length+"");t.hidden=false;this.isSelected(t,e)}else{t.removeAttribute("aria-posinset");t.removeAttribute("aria-setsize");t.hidden=true;t.selected=false}t.id=this.listId+"-option-"+s;n.push(t.id)}));this.optionIds=n}))}manageCanOpen(){if(this.actvOptEles.length||this.hasNoResult)this.canOpen=true;else this.canOpen=false}manageDropdownDisplay(){if(this.shouldOpen&&this.canOpen&&!this.disabled)this.open=true;if(!this.shouldOpen||!this.canOpen)this.open=false;this.openWatcher()}fireActiveOptsEvent(){this.nanoOptionsUpdated.emit(this.actvOptEles)}isSelected(t,i){if(i===t.value||this.selected.includes(t.value)){t.selected=true}else t.selected=false}get dropwdownOpen(){if(!this.nanoDropdown||!this.open)return false;return true}get exactMatch(){return this.allOptEles.find((t=>this.connectedInput.value===t.value))}changeInputValue(t){var i;let s;if(this.selected.includes(t.value)){this.selected=this.selected.filter((i=>i!==t.value));s=this.nanoDeselect.emit(t)}else{this.selected=[...this.selected];s=this.nanoSelect.emit(t)}if(!s.defaultPrevented){if(this.connectedInput)this.connectedInput.value=t.value;const s=new window.Event("change");(i=this.connectedInput)===null||i===void 0?void 0:i.dispatchEvent(s)}}setOptStartsWith(){const t=t=>t.toLowerCase().substring(0,this.typeToSelect.length)===this.typeToSelect;const i=this.allOptEles.find((i=>i.value.trim().length>0&&!i.disabled&&(t(i.textContent)||t(i.value)||t(i.label)||t(i.filterMeta))));if(i)this.changeInputValue(i)}removeEventListeners(t){const i=t.closest("nano-input");if(i){i.removeEventListener("nanoChange",this.inputChange)}t.removeEventListener("change",this.inputChange);t.removeEventListener("click",this.inputClick);t.removeEventListener("keydown",this.inputKeydown);t.removeEventListener("input",this.inputChange)}processSlottedContent(){requestAnimationFrame((()=>{var t;this.allOptEles=Array.from(this.host.querySelectorAll("nano-option"));this.hasNoResult=!!this.host.querySelector('[slot="no-result"]');if(((t=this.connectedInput)===null||t===void 0?void 0:t.value.length)&&this.type!=="select"){this.inputChange()}else this.actvOptEles=this.allOptEles}))}inputChange(){if(this.disableFilter){this.actvOptEles=this.allOptEles;return}const t=this.connectedInput.value;const i=t.trim().toLowerCase();let s=false;const e=[];const n=t=>t.toLowerCase().indexOf(i)>-1;this.allOptEles.forEach((i=>{if((t===i.value||t===i.label)&&this.type!=="selctMulti"){i.selected=true;s=true}else this.isSelected(i,t)}));this.allOptEles.forEach((t=>{if(!i.length||s){e.push(t)}else if(t.value.trim().length>0&&!t.disabled&&(n(t.textContent)||n(t.value)||n(t.label)||n(t.filterMeta))){e.push(t)}}));this.isFiltered=i.length&&!s;this.actvOptEles=e}connectedCallback(){this.watchInputChange()}componentDidLoad(){this.manageSlotChangeListener();this.openWatcher()}componentDidRender(){setTimeout((()=>{if(!this.connectedInput)console.warn("no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop",this.host)}),500)}disconnectedCallback(){if(!!this.mo){this.mo.disconnect();this.mo=undefined}if(this.connectedInput)this.removeEventListeners(this.connectedInput)}render(){return e(n,{role:this.actvOptEles.length?"listbox":undefined,"aria-owns":this.optionIds.length?this.optionIds.join(" "):undefined,"aria-label":this.optionIds.length?"Select options from the list below":undefined},e("nano-dropdown",Object.assign({},this.dropDownConfig,{ref:t=>this.nanoDropdown=t,dialogTitle:"Select options from the list below",class:{dlist__dropdown:true,"dlist--isfiltered":this.isFiltered},onNanoAfterShow:this.handleShow,onNanoAfterHide:this.handleHide,role:"group"}),e("nano-menu",{hidden:!this.actvOptEles.length,type:"listbox",label:this.inputLabel?this.inputLabel.textContent:undefined,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen},tabIndex:-1,onNanoSelect:this.optSelected,onKeyDown:this.optionKeyDown,ref:t=>this.listBox=t,role:"list"},e("slot",{name:"list-top"}),!this.options.length&&e("slot",null),!!this.options.length&&e("slot",{name:"internal-opts"}),e("slot",{name:"list-bottom"})),e("nano-menu",{type:"listbox",label:"No results found",hidden:!!this.actvOptEles.length,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen}},e("slot",{name:"no-result"})),!!this.actvOptEles&&e("div",{class:"dlist__status"},this.actvOptEles.length," result",this.actvOptEles.length>1?"s":""," available.")))}get host(){return o(this)}static get watchers(){return{open:["openWatcher"],input:["watchInputChange"],options:["manageSlotChangeListener"],type:["watchTypeChange"],connectedInput:["watchTypeChange","manageInputEvents"],selected:["watchActvOptChange"],actvOptEles:["watchActvOptChange","manageCanOpen","fireActiveOptsEvent"],hasNoResult:["manageCanOpen"],shouldOpen:["manageDropdownDisplay"],canOpen:["manageDropdownDisplay"]}}};u.style=c;const f=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-start:var(--nano-spacing-medium, 16px);--padding-end:var(--nano-spacing-medium, 16px);--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;--font-size:0.9em;display:block}.menu{font-size:var(--font-size, 0.9em);overscroll-behavior:none;min-width:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)){padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:block}";const g=class{constructor(s){t(this,s);this.nanoFocus=i(this,"nanoFocus",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoSelect=i(this,"nanoSelect",7);this.ignoreMouseEvents=false;this.typeToSelect="";this._hasFocus=false;this.handleFocus=()=>{this.setActiveFocusItem(this.selectedItem||this.getItems[0]);this._hasFocus=true;this.nanoFocus.emit()};this.handleClick=t=>{const i=t.target;const s=i.closest("nano-nav-item");if(s&&!s.disabled){this.nanoSelect.emit(s)}};this.handleKeyDown=t=>{clearTimeout(this.ignoreMouseTimeout);this.ignoreMouseTimeout=setTimeout((()=>this.ignoreMouseEvents=false),500);this.ignoreMouseEvents=true;switch(t.key){case" ":if(this.activeItem)this.activeItem.click();break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":const i=this.getItems;const s=this.activeItem;let e=i.indexOf(s);if(i.length){t.preventDefault();if(t.key==="ArrowDown"){e++}else if(t.key==="ArrowUp"){e--}else if(t.key==="Home"||t.key==="PageUp"){e=0}else if(t.key==="End"||t.key==="PageDown"){e=i.length-1}if(e<0)e=i.length-1;if(e>i.length-1)e=0;this.setActiveFocusItem(i[e]);if(i[e])i[e].scrollIntoView({block:"nearest"});return}break}if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=setTimeout((()=>this.typeToSelect=""),750);this.typeToSelect+=t.key;const i=this.getItems;for(const t of i){const i=t.shadowRoot.querySelector("slot:not([name])");const s=l(i).toLowerCase().trim();if(s.substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}}};this.handleMouseOver=t=>{const i=t.target;const s=i.closest("nano-nav-item")||i.closest("nano-option");if(s&&!this.ignoreMouseEvents){this.setActiveFocusItem(s)}};this.type="menu";this.label=undefined}get hasFocus(){return this._hasFocus}async setFocus(){var t;if((t=this.menu)===null||t===void 0?void 0:t.focus)this.menu.focus({preventScroll:true})}async removeFocus(){var t;if((t=this.menu)===null||t===void 0?void 0:t.blur)this.menu.blur()}async showActiveElement(){if(this.selectedItem)this.selectedItem.scrollIntoView({block:"nearest"})}async resetActiveItem(){this.getItems.filter((t=>t.tagName.toLowerCase()==="nano-option")).map((t=>t.setAttribute("tabindex","-1")))}get getItems(){let t;const i=this.el.querySelectorAll("nano-nav-item.secondary-open");if(i.length){const s=i[i.length-1];t=Array.from(s.querySelectorAll("nano-nav-item, nano-option"))}else{t=r(this.el,"nano-nav-item, nano-option","slot")}return t.filter((t=>!t.disabled&&!t.hidden))}get activeItem(){const t=a();return this.getItems.find((i=>i.getAttribute("tabindex")==="0"||i===t||i.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,i=true){const s=this.getItems;const e=!t||t.disabled?s.find((t=>t.selected))||s[0]:t;s.filter((t=>t.tagName.toLowerCase()==="nano-option")).map((t=>t.setAttribute("tabindex",t===e?"0":"-1")));if(!i)return;if(e){e.setFocus?e.setFocus():e.focus()}else this.menu.focus()}handleBlur(t){if(!this.hasFocus)return;const i=t;let s;if(i.key){if(i.key!=="Tab")return;s=a()&&a().closest(this.el.tagName.toLowerCase())===this.el}else s=!!t.composedPath().find((t=>t===this.el));if(!s){this.resetActiveItem();this._hasFocus=false;this.nanoBlur.emit()}}componentDidLoad(){{r(this.el,":not(nano-nav-item):not(nano-option):not([role])",true).forEach((t=>t.setAttribute("role","none")))}}render(){return e(n,{role:this.type==="menu"?"menu":"group"},e("div",{onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:undefined,ref:t=>this.menu=t,part:"base",class:{menu:true,["menu--"+this.type]:true,"menu--has-focus":this.hasFocus},tabIndex:-1,role:"group"},e("slot",null)))}get el(){return o(this)}};g.style=f;const m=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;width:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){-webkit-margin-end:0.5em;margin-inline-end:0.5em}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){-webkit-margin-start:0.5em;margin-inline-start:0.5em}.option__check{visibility:hidden;display:flex;position:absolute;inset-inline-start:0.6em;inset-block-start:calc(50% - 0.6em);align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";let b=0;const v=class{constructor(s){t(this,s);this.nanoSelect=i(this,"nanoSelect",7);this.optId=`nano-option-${b++}`;this.hasFocus=false;this.value="";this.label="";this.selected=false;this.disabled=false;this.filterMeta="";this.handleClick=h(this.handleClick.bind(this),5)}valueChanged(){if(!this.value||!this.value.length)this.value=this.labelContent}labelChanged(){if(!this.label||!this.label.length)this.label=this.labelContent.length?this.labelContent:this.value}handleKeyDown(t){if(t.key!==" "&&t.key!=="Enter")return;t.preventDefault();this.nanoSelect.emit(this.host)}handleClick(){if(this.disabled)return;this.nanoSelect.emit(this.host)}get labelContent(){return r(this.host,"*:not([slot])",false).map((t=>t.textContent)).join(" ").trim()}componentWillLoad(){this.valueChanged();this.labelChanged()}render(){return e(n,{role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},e("div",{onMouseDown:this.handleClick,id:this.optId,class:{option:true,"option--selected":this.selected,"option--disabled":this.disabled,"option--novalue":!this.value}},e("div",{part:"check-icon",class:"option__check"},e("slot",{name:"check-icon"},e("nano-icon",{name:"light/check","aria-hidden":"true"}))),e("div",{part:"start",class:"option__start"},e("slot",{name:"start"})),e("div",{part:"label",class:"option__label"},e("slot",null,this.label||this.value)),e("div",{part:"end",class:"option__end"},e("slot",{name:"end"}))))}get host(){return o(this)}static get watchers(){return{value:["valueChanged"],label:["labelChanged"]}}};v.style=m;export{u as nano_datalist,g as nano_menu,v as nano_option};
|
5
|
+
//# sourceMappingURL=p-c80336b2.entry.js.map
|
@@ -0,0 +1,5 @@
|
|
1
|
+
/*!
|
2
|
+
* Web Components for Nanopore digital Web Apps
|
3
|
+
*/
|
4
|
+
var e;(function(e){e[e["ElementNode"]=1]="ElementNode";e[e["TextNode"]=3]="TextNode";e[e["CommentNode"]=8]="CommentNode";e[e["DocumentNode"]=9]="DocumentNode";e[e["DocumentTypeNode"]=10]="DocumentTypeNode";e[e["DocumentFragment"]=11]="DocumentFragment"})(e||(e={}));function t(e,t=this){function n(t){if(!t||t===document||t===window)return null;if(t.assignedSlot)t=t.assignedSlot;const r=t.closest(e);return r?r:n(t.getRootNode().host)}return n(t)}function n(t,n,r=true){if(r===true){try{n=":scope > "+n.split(",").join(", :scope >");return Array.from(t.querySelectorAll(n))}catch(e){console.error(e,"an error sad")}}const o=[];Array.from(t.childNodes).forEach((t=>{if(!!t.matches&&t.matches(n))o.push(t);else if(t.nodeName.toLowerCase()==="slot"){Array.from(t.assignedNodes()).forEach((t=>{if(t.nodeType===e.ElementNode&&t.matches(n))o.push(t);else if(t.nodeType!==e.ElementNode&&!r)o.push(t)}))}else if(!r)o.push(t)}));return o}const r=(e,t)=>{const n=[];let r=e.parentNode.firstElementChild;do{if(!t||r!==e&&r.matches(t))n.push(r)}while(r=r.nextElementSibling);return n};function o(e,t){if(!t||!e)return{top:0,left:0};return{top:e.getBoundingClientRect().top-t.getBoundingClientRect().top,left:e.getBoundingClientRect().left-t.getBoundingClientRect().left}}export{o as a,r as b,t as c,n as g};
|
5
|
+
//# sourceMappingURL=p-cdfc507e.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["NODE_TYPE","closestElement","selector","base","this","__closestFrom","el","document","window","assignedSlot","found","closest","getRootNode","host","getDirectChildren","sel","elesOnly","split","join","Array","from","querySelectorAll","e","console","error","ret","childNodes","forEach","matches","push","nodeName","toLowerCase","assignedNodes","slotEl","nodeType","ElementNode","getSiblings","siblings","firstChild","parentNode","firstElementChild","nextElementSibling","getOffset","element","parent","top","left","getBoundingClientRect"],"sources":["./src/utils/dom.ts"],"sourcesContent":["import { Build } from '@stencil/core';\n\nexport enum NODE_TYPE {\n ElementNode = 1,\n TextNode = 3,\n CommentNode = 8,\n DocumentNode = 9,\n DocumentTypeNode = 10,\n DocumentFragment = 11,\n}\n\nexport function closestElement(selector: string, base: Element = this) {\n function __closestFrom(el: Element | Window | Document): Element {\n if (!el || el === document || el === window) return null;\n if ((el as HTMLSlotElement).assignedSlot)\n el = (el as HTMLSlotElement).assignedSlot;\n const found = (el as Element).closest(selector);\n return found\n ? found\n : __closestFrom(((el as Element).getRootNode() as ShadowRoot).host);\n }\n return __closestFrom(base);\n}\n\n/**\n * Get direct child elements / nodes from from any element (for when querySelectorAll(':scope > .selector') fails)\n * @param el - a root element to query from\n * @param sel - a query selector string\n * @param elesOnly - return only Elements (no Nodes)\n * @returns an array of direct child DOM nodes\n */\nexport function getDirectChildren<T = HTMLElement>(\n el: Element,\n sel: string,\n elesOnly?: true\n): Array<T>;\nexport function getDirectChildren<T = HTMLElement>(\n el: Element,\n sel: string,\n elesOnly?: 'slot'\n): Array<T>;\nexport function getDirectChildren<T = HTMLElement>(\n el: Element,\n sel: string,\n elesOnly?: false\n): Array<T | Node>;\nexport function getDirectChildren<T = HTMLElement>(\n el: Element,\n sel: string,\n elesOnly: boolean | 'slot' = true\n) {\n if (!Build.isServer && elesOnly === true) {\n try {\n sel = ':scope > ' + sel.split(',').join(', :scope >');\n return Array.from(el.querySelectorAll(sel)) as unknown as Array<T>;\n } catch (e) {\n console.error(e, 'an error sad');\n }\n }\n\n const ret: Array<Node | T> = [];\n Array.from(el.childNodes).forEach((e) => {\n if (!!(e as Element).matches && (e as Element).matches(sel)) ret.push(e);\n else if (e.nodeName.toLowerCase() === 'slot') {\n Array.from((e as HTMLSlotElement).assignedNodes()).forEach((slotEl) => {\n if (\n slotEl.nodeType === NODE_TYPE.ElementNode &&\n (slotEl as Element).matches(sel)\n )\n ret.push(slotEl);\n else if (slotEl.nodeType !== NODE_TYPE.ElementNode && !elesOnly)\n ret.push(slotEl as Node);\n });\n } else if (!elesOnly) ret.push(e as Node);\n });\n return ret;\n}\n\nexport const getSiblings = <T extends Element>(\n el: Element,\n sel?: string\n): Array<T> => {\n const siblings = [];\n let firstChild = el.parentNode.firstElementChild;\n do {\n if (!sel || (firstChild !== el && firstChild.matches(sel)))\n siblings.push(firstChild);\n } while ((firstChild = firstChild.nextElementSibling));\n return siblings;\n};\n\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n if (!parent || !element) return { top: 0, left: 0 };\n return {\n top:\n element.getBoundingClientRect().top - parent.getBoundingClientRect().top,\n left:\n element.getBoundingClientRect().left -\n parent.getBoundingClientRect().left,\n };\n}\n"],"mappings":";;;AAEA,IAAYA,GAAZ,SAAYA,GACVA,IAAA,gCACAA,IAAA,0BACAA,IAAA,gCACAA,IAAA,kCACAA,IAAA,2CACAA,IAAA,0CACD,EAPD,CAAYA,MAAS,K,SASLC,EAAeC,EAAkBC,EAAgBC,MAC/D,SAASC,EAAcC,GACrB,IAAKA,GAAMA,IAAOC,UAAYD,IAAOE,OAAQ,OAAO,KACpD,GAAKF,EAAuBG,aAC1BH,EAAMA,EAAuBG,aAC/B,MAAMC,EAASJ,EAAeK,QAAQT,GACtC,OAAOQ,EACHA,EACAL,EAAgBC,EAAeM,cAA6BC,K,CAElE,OAAOR,EAAcF,EACvB,C,SAwBgBW,EACdR,EACAS,EACAC,EAA6B,MAE7B,GAAuBA,IAAa,KAAM,CACxC,IACED,EAAM,YAAcA,EAAIE,MAAM,KAAKC,KAAK,cACxC,OAAOC,MAAMC,KAAKd,EAAGe,iBAAiBN,G,CACtC,MAAOO,GACPC,QAAQC,MAAMF,EAAG,e,EAIrB,MAAMG,EAAuB,GAC7BN,MAAMC,KAAKd,EAAGoB,YAAYC,SAASL,IACjC,KAAOA,EAAcM,SAAYN,EAAcM,QAAQb,GAAMU,EAAII,KAAKP,QACjE,GAAIA,EAAEQ,SAASC,gBAAkB,OAAQ,CAC5CZ,MAAMC,KAAME,EAAsBU,iBAAiBL,SAASM,IAC1D,GACEA,EAAOC,WAAalC,EAAUmC,aAC7BF,EAAmBL,QAAQb,GAE5BU,EAAII,KAAKI,QACN,GAAIA,EAAOC,WAAalC,EAAUmC,cAAgBnB,EACrDS,EAAII,KAAKI,EAAe,G,MAEvB,IAAKjB,EAAUS,EAAII,KAAKP,EAAU,IAE3C,OAAOG,CACT,C,MAEaW,EAAc,CACzB9B,EACAS,KAEA,MAAMsB,EAAW,GACjB,IAAIC,EAAahC,EAAGiC,WAAWC,kBAC/B,EAAG,CACD,IAAKzB,GAAQuB,IAAehC,GAAMgC,EAAWV,QAAQb,GACnDsB,EAASR,KAAKS,E,OACRA,EAAaA,EAAWG,oBAClC,OAAOJ,CAAQ,E,SAGDK,EAAUC,EAAsBC,GAC9C,IAAKA,IAAWD,EAAS,MAAO,CAAEE,IAAK,EAAGC,KAAM,GAChD,MAAO,CACLD,IACEF,EAAQI,wBAAwBF,IAAMD,EAAOG,wBAAwBF,IACvEC,KACEH,EAAQI,wBAAwBD,KAChCF,EAAOG,wBAAwBD,KAErC,Q"}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
/*!
|
2
2
|
* Web Components for Nanopore digital Web Apps
|
3
3
|
*/
|
4
|
-
import{c as t}from"./p-
|
5
|
-
//# sourceMappingURL=p-
|
4
|
+
import{c as t}from"./p-78323d6e.js";import"./p-d6a04b3a.js";import"./p-ee045579.js";import"./p-7bff5224.js";import"./p-70747f20.js";const o="table.worker";const p="stencil.table.worker";const s=new URL("p-f258383d.js",import.meta.url).href;const r=new Blob(['importScripts("'+s+'")'],{type:"text/javascript"});const e=URL.createObjectURL(r);const c=t(e,o,p);URL.revokeObjectURL(e);export{c as worker,p as workerMsgId,o as workerName,s as workerPath};
|
5
|
+
//# sourceMappingURL=p-f49f57ed.js.map
|