@govtechsg/sgds-web-component 3.30.1-rc.8 → 3.30.1-rc.9
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/components/Appnav/appnav.js +1 -1
- package/components/Appnav/appnav.js.map +1 -1
- package/components/Appnav/index.umd.min.js +4 -2
- package/components/Appnav/index.umd.min.js.map +1 -1
- package/components/Appnav/sgds-appnav.js +3 -1
- package/components/Appnav/sgds-appnav.js.map +1 -1
- package/components/Breadcrumb/index.umd.min.js +1 -1
- package/components/Breadcrumb/index.umd.min.js.map +1 -1
- package/components/Dropdown/dropdown-item.js +1 -1
- package/components/Dropdown/dropdown-item.js.map +1 -1
- package/components/Dropdown/index.umd.min.js +1 -1
- package/components/Dropdown/index.umd.min.js.map +1 -1
- package/components/Mainnav/index.umd.min.js +9 -7
- package/components/Mainnav/index.umd.min.js.map +1 -1
- package/components/Mainnav/mainnav-dropdown.js +1 -1
- package/components/Mainnav/mainnav-dropdown.js.map +1 -1
- package/components/Mainnav/mainnav-item.js +1 -1
- package/components/Mainnav/mainnav-item.js.map +1 -1
- package/components/Mainnav/mainnav.js +1 -1
- package/components/Mainnav/mainnav.js.map +1 -1
- package/components/Mainnav/sgds-mainnav-dropdown.js +2 -2
- package/components/Mainnav/sgds-mainnav-dropdown.js.map +1 -1
- package/components/Mainnav/sgds-mainnav.js +3 -1
- package/components/Mainnav/sgds-mainnav.js.map +1 -1
- package/components/OverflowMenu/index.umd.min.js +1 -1
- package/components/OverflowMenu/index.umd.min.js.map +1 -1
- package/components/Sidenav/index.umd.min.js +1 -1
- package/components/Sidenav/index.umd.min.js.map +1 -1
- package/components/Sidenav/sgds-sidenav-link.js +1 -1
- package/components/Sidenav/sgds-sidenav-link.js.map +1 -1
- package/components/Sidenav/sidenav-link.js +1 -1
- package/components/Sidenav/sidenav-link.js.map +1 -1
- package/components/Subnav/index.umd.min.js +1 -1
- package/components/Subnav/index.umd.min.js.map +1 -1
- package/components/Subnav/sgds-subnav-item.js +1 -1
- package/components/Subnav/sgds-subnav-item.js.map +1 -1
- package/components/Subnav/subnav-item.js +1 -1
- package/components/Subnav/subnav-item.js.map +1 -1
- package/components/index.umd.min.js +15 -11
- package/components/index.umd.min.js.map +1 -1
- package/custom-elements.json +1 -1
- package/index.umd.min.js +15 -11
- package/index.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/react/components/Appnav/appnav.cjs.js +1 -1
- package/react/components/Appnav/appnav.cjs.js.map +1 -1
- package/react/components/Appnav/appnav.js +1 -1
- package/react/components/Appnav/appnav.js.map +1 -1
- package/react/components/Appnav/sgds-appnav.cjs.js +3 -1
- package/react/components/Appnav/sgds-appnav.cjs.js.map +1 -1
- package/react/components/Appnav/sgds-appnav.js +3 -1
- package/react/components/Appnav/sgds-appnav.js.map +1 -1
- package/react/components/Dropdown/dropdown-item.cjs.js +1 -1
- package/react/components/Dropdown/dropdown-item.cjs.js.map +1 -1
- package/react/components/Dropdown/dropdown-item.js +1 -1
- package/react/components/Dropdown/dropdown-item.js.map +1 -1
- package/react/components/Mainnav/mainnav-dropdown.cjs.js +1 -1
- package/react/components/Mainnav/mainnav-dropdown.cjs.js.map +1 -1
- package/react/components/Mainnav/mainnav-dropdown.js +1 -1
- package/react/components/Mainnav/mainnav-dropdown.js.map +1 -1
- package/react/components/Mainnav/mainnav-item.cjs.js +1 -1
- package/react/components/Mainnav/mainnav-item.cjs.js.map +1 -1
- package/react/components/Mainnav/mainnav-item.js +1 -1
- package/react/components/Mainnav/mainnav-item.js.map +1 -1
- package/react/components/Mainnav/mainnav.cjs.js +1 -1
- package/react/components/Mainnav/mainnav.cjs.js.map +1 -1
- package/react/components/Mainnav/mainnav.js +1 -1
- package/react/components/Mainnav/mainnav.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav-dropdown.cjs.js +2 -2
- package/react/components/Mainnav/sgds-mainnav-dropdown.cjs.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav-dropdown.js +2 -2
- package/react/components/Mainnav/sgds-mainnav-dropdown.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav.cjs.js +3 -1
- package/react/components/Mainnav/sgds-mainnav.cjs.js.map +1 -1
- package/react/components/Mainnav/sgds-mainnav.js +3 -1
- package/react/components/Mainnav/sgds-mainnav.js.map +1 -1
- package/react/components/Sidenav/sgds-sidenav-link.cjs.js +1 -1
- package/react/components/Sidenav/sgds-sidenav-link.cjs.js.map +1 -1
- package/react/components/Sidenav/sgds-sidenav-link.js +1 -1
- package/react/components/Sidenav/sgds-sidenav-link.js.map +1 -1
- package/react/components/Sidenav/sidenav-link.cjs.js +1 -1
- package/react/components/Sidenav/sidenav-link.cjs.js.map +1 -1
- package/react/components/Sidenav/sidenav-link.js +1 -1
- package/react/components/Sidenav/sidenav-link.js.map +1 -1
- package/react/components/Subnav/sgds-subnav-item.cjs.js +1 -1
- package/react/components/Subnav/sgds-subnav-item.cjs.js.map +1 -1
- package/react/components/Subnav/sgds-subnav-item.js +1 -1
- package/react/components/Subnav/sgds-subnav-item.js.map +1 -1
- package/react/components/Subnav/subnav-item.cjs.js +1 -1
- package/react/components/Subnav/subnav-item.cjs.js.map +1 -1
- package/react/components/Subnav/subnav-item.js +1 -1
- package/react/components/Subnav/subnav-item.js.map +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from "lit";
|
|
2
2
|
//#region src/components/Mainnav/mainnav-dropdown.css
|
|
3
|
-
var css_248z = css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;background:none;border:none;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-family:inherit;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-align:left;text-decoration:none;width:100%}:host([tone=brand][expand=always]) .nav-link,:host([tone^=gradient][expand=always]) .nav-link{color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .nav-link,:host([tone^=gradient][expand=sm]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .nav-link,:host([tone^=gradient][expand=md]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .nav-link,:host([tone^=gradient][expand=lg]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .nav-link,:host([tone^=gradient][expand=xl]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .nav-link,:host([tone^=gradient][expand=xxl]) .nav-link{color:var(--sgds-color-fixed-light)}}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}
|
|
3
|
+
var css_248z = css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;background:none;border:none;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-family:inherit;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-align:left;text-decoration:none;width:100%}:host([tone=brand][expand=always]) .nav-link,:host([tone^=gradient][expand=always]) .nav-link{color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .nav-link,:host([tone^=gradient][expand=sm]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .nav-link,:host([tone^=gradient][expand=md]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .nav-link,:host([tone^=gradient][expand=lg]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .nav-link,:host([tone^=gradient][expand=xl]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .nav-link,:host([tone^=gradient][expand=xxl]) .nav-link{color:var(--sgds-color-fixed-light)}}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}.toggler-wrapper{color:inherit;flex:1}slot[name=toggler]::slotted(*){color:inherit!important}sgds-dropdown{display:block;height:100%}@media screen and (min-width:1024px){.dropdown-items a,.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
|
|
4
4
|
//#endregion
|
|
5
5
|
export { css_248z as default };
|
|
6
6
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mainnav-dropdown.js","names":[],"sources":["../../../src/components/Mainnav/mainnav-dropdown.css"],"sourcesContent":[":host([expand=\"always\"]) .nav-link {\n min-height: 100%;\n padding: 0px var(--sgds-padding-md);\n border-bottom: var(--sgds-border-width-4) solid transparent;\n}\n\n@media (min-width: 512px) {\n :host([expand=\"sm\"]) .nav-link {\n min-height: 100%;\n padding: 0px var(--sgds-padding-md);\n border-bottom: var(--sgds-border-width-4) solid transparent;\n }\n}\n\n@media (min-width: 768px) {\n :host([expand=\"md\"]) .nav-link {\n min-height: 100%;\n padding: 0px var(--sgds-padding-md);\n border-bottom: var(--sgds-border-width-4) solid transparent;\n }\n}\n\n@media (min-width: 1024px) {\n :host(:not([expand])) .nav-link,\n :host([expand=\"lg\"]) .nav-link {\n min-height: 100%;\n padding: 0px var(--sgds-padding-md);\n border-bottom: var(--sgds-border-width-4) solid transparent;\n }\n}\n\n@media (min-width: 1280px) {\n :host([expand=\"xl\"]) .nav-link {\n min-height: 100%;\n padding: 0px var(--sgds-padding-md);\n border-bottom: var(--sgds-border-width-4) solid transparent;\n }\n}\n\n@media (min-width: 1440px) {\n :host([expand=\"xxl\"]) .nav-link {\n min-height: 100%;\n padding: 0px var(--sgds-padding-md);\n border-bottom: var(--sgds-border-width-4) solid transparent;\n }\n}\n\n.nav-link {\n display: flex;\n gap: var(--sgds-gap-xs);\n cursor: pointer;\n align-items: center;\n text-decoration: none;\n color: var(--sgds-color-default);\n padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n box-sizing: border-box;\n font-size: var(--sgds-font-size-label-sm);\n line-height: var(--sgds-line-height-2-xs, 20px);\n background: none;\n border: none;\n font-family: inherit;\n width: 100%;\n text-align: left;\n}\n\n:host([tone=\"brand\"][expand=\"always\"]) .nav-link,\n:host([tone^=\"gradient\"][expand=\"always\"]) .nav-link {\n color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n :host([tone=\"brand\"][expand=\"sm\"]) .nav-link,\n :host([tone^=\"gradient\"][expand=\"sm\"]) .nav-link {\n color: var(--sgds-color-fixed-light);\n }\n}\n\n@media screen and (min-width: 768px) {\n :host([tone=\"brand\"][expand=\"md\"]) .nav-link,\n :host([tone^=\"gradient\"][expand=\"md\"]) .nav-link {\n color: var(--sgds-color-fixed-light);\n }\n}\n\n@media screen and (min-width: 1024px) {\n :host([tone=\"brand\"][expand=\"lg\"]) .nav-link,\n :host([tone^=\"gradient\"][expand=\"lg\"]) .nav-link {\n color: var(--sgds-color-fixed-light);\n }\n}\n\n@media screen and (min-width: 1280px) {\n :host([tone=\"brand\"][expand=\"xl\"]) .nav-link,\n :host([tone^=\"gradient\"][expand=\"xl\"]) .nav-link {\n color: var(--sgds-color-fixed-light);\n }\n}\n\n@media screen and (min-width: 1440px) {\n :host([tone=\"brand\"][expand=\"xxl\"]) .nav-link,\n :host([tone^=\"gradient\"][expand=\"xxl\"]) .nav-link {\n color: var(--sgds-color-fixed-light);\n }\n}\n\n.nav-link:not(.disabled).active,\n.nav-link.show {\n color: var(--sgds-primary-color-default);\n border-color: var(--sgds-primary-border-color-default);\n}\n\n.nav-link:not(.disabled):hover {\n color: var(--sgds-primary-color-default);\n}\n\n.nav-link:not(.disabled):focus-visible {\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n color: var(--sgds-primary-color-default);\n}\n\n.nav-link.disabled {\n opacity: var(--sgds-opacity-40);\n cursor: not-allowed;\n}\n\n.dropdown-items {\n position: absolute;\n top: 0;\n left: 100%;\n width: 100%;\n height: 100%;\n padding: var(--sgds-padding-md) 0px;\n background-color: var(--sgds-surface-default);\n overflow-y: auto;\n}\n\n.dropdown-items a {\n display: flex;\n gap: var(--sgds-gap-xs);\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n color: var(--sgds-color-default);\n padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n max-width: var(--sgds-mainnav-max-width, 1440px);\n margin: auto;\n font-size: var(--sgds-font-size-label-sm);\n line-height: var(--sgds-line-height-2-xs, 20px);\n}\n\n.dropdown-items a:hover {\n color: var(--sgds-primary-color-default);\n}\n\n/* .dropdown-items a:focus,\n.dropdown-items a:focus-visible {\n outline: 0;\n} */\n\n.dropdown-items a:focus-visible {\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n outline-offset: -5px;\n color: var(--sgds-primary-color-default);\n}\n\n
|
|
1
|
+
{"version":3,"file":"mainnav-dropdown.js","names":[],"sources":["../../../src/components/Mainnav/mainnav-dropdown.css"],"sourcesContent":[":host([expand=\"always\"]) .nav-link {\n min-height: 100%;\n padding: 0px var(--sgds-padding-md);\n border-bottom: var(--sgds-border-width-4) solid transparent;\n}\n\n@media (min-width: 512px) {\n :host([expand=\"sm\"]) .nav-link {\n min-height: 100%;\n padding: 0px var(--sgds-padding-md);\n border-bottom: var(--sgds-border-width-4) solid transparent;\n }\n}\n\n@media (min-width: 768px) {\n :host([expand=\"md\"]) .nav-link {\n min-height: 100%;\n padding: 0px var(--sgds-padding-md);\n border-bottom: var(--sgds-border-width-4) solid transparent;\n }\n}\n\n@media (min-width: 1024px) {\n :host(:not([expand])) .nav-link,\n :host([expand=\"lg\"]) .nav-link {\n min-height: 100%;\n padding: 0px var(--sgds-padding-md);\n border-bottom: var(--sgds-border-width-4) solid transparent;\n }\n}\n\n@media (min-width: 1280px) {\n :host([expand=\"xl\"]) .nav-link {\n min-height: 100%;\n padding: 0px var(--sgds-padding-md);\n border-bottom: var(--sgds-border-width-4) solid transparent;\n }\n}\n\n@media (min-width: 1440px) {\n :host([expand=\"xxl\"]) .nav-link {\n min-height: 100%;\n padding: 0px var(--sgds-padding-md);\n border-bottom: var(--sgds-border-width-4) solid transparent;\n }\n}\n\n.nav-link {\n display: flex;\n gap: var(--sgds-gap-xs);\n cursor: pointer;\n align-items: center;\n text-decoration: none;\n color: var(--sgds-color-default);\n padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n box-sizing: border-box;\n font-size: var(--sgds-font-size-label-sm);\n line-height: var(--sgds-line-height-2-xs, 20px);\n background: none;\n border: none;\n font-family: inherit;\n width: 100%;\n text-align: left;\n}\n\n:host([tone=\"brand\"][expand=\"always\"]) .nav-link,\n:host([tone^=\"gradient\"][expand=\"always\"]) .nav-link {\n color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n :host([tone=\"brand\"][expand=\"sm\"]) .nav-link,\n :host([tone^=\"gradient\"][expand=\"sm\"]) .nav-link {\n color: var(--sgds-color-fixed-light);\n }\n}\n\n@media screen and (min-width: 768px) {\n :host([tone=\"brand\"][expand=\"md\"]) .nav-link,\n :host([tone^=\"gradient\"][expand=\"md\"]) .nav-link {\n color: var(--sgds-color-fixed-light);\n }\n}\n\n@media screen and (min-width: 1024px) {\n :host([tone=\"brand\"][expand=\"lg\"]) .nav-link,\n :host([tone^=\"gradient\"][expand=\"lg\"]) .nav-link {\n color: var(--sgds-color-fixed-light);\n }\n}\n\n@media screen and (min-width: 1280px) {\n :host([tone=\"brand\"][expand=\"xl\"]) .nav-link,\n :host([tone^=\"gradient\"][expand=\"xl\"]) .nav-link {\n color: var(--sgds-color-fixed-light);\n }\n}\n\n@media screen and (min-width: 1440px) {\n :host([tone=\"brand\"][expand=\"xxl\"]) .nav-link,\n :host([tone^=\"gradient\"][expand=\"xxl\"]) .nav-link {\n color: var(--sgds-color-fixed-light);\n }\n}\n\n.nav-link:not(.disabled).active,\n.nav-link.show {\n color: var(--sgds-primary-color-default);\n border-color: var(--sgds-primary-border-color-default);\n}\n\n.nav-link:not(.disabled):hover {\n color: var(--sgds-primary-color-default);\n}\n\n.nav-link:not(.disabled):focus-visible {\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n color: var(--sgds-primary-color-default);\n}\n\n.nav-link.disabled {\n opacity: var(--sgds-opacity-40);\n cursor: not-allowed;\n}\n\n.dropdown-items {\n position: absolute;\n top: 0;\n left: 100%;\n width: 100%;\n height: 100%;\n padding: var(--sgds-padding-md) 0px;\n background-color: var(--sgds-surface-default);\n overflow-y: auto;\n}\n\n.dropdown-items a {\n display: flex;\n gap: var(--sgds-gap-xs);\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n color: var(--sgds-color-default);\n padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n max-width: var(--sgds-mainnav-max-width, 1440px);\n margin: auto;\n font-size: var(--sgds-font-size-label-sm);\n line-height: var(--sgds-line-height-2-xs, 20px);\n}\n\n.dropdown-items a:hover {\n color: var(--sgds-primary-color-default);\n}\n\n/* .dropdown-items a:focus,\n.dropdown-items a:focus-visible {\n outline: 0;\n} */\n\n.dropdown-items a:focus-visible {\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n outline-offset: -5px;\n color: var(--sgds-primary-color-default);\n}\n\n/* Toggler wrapper — inherits color from .nav-link which handles tone/expand */\n.toggler-wrapper {\n flex: 1;\n color: inherit;\n}\n\nslot[name=\"toggler\"]::slotted(*) {\n color: inherit !important;\n}\n\nsgds-dropdown {\n display: block;\n height: 100%;\n}\n\n@media screen and (min-width: 1024px) {\n .nav-link,\n .dropdown-items a {\n padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n }\n}"],"mappings":""}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from "lit";
|
|
2
2
|
//#region src/components/Mainnav/mainnav-item.css
|
|
3
|
-
var css_248z = css`.mainnav-item{align-items:center;box-sizing:border-box;display:flex;font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs,20px)}:host([expand=always]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}@media screen and (min-width:512px){:host([expand=sm]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}:host(:not([disabled])[active][expand=sm]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:768px){:host([expand=md]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}:host(:not([disabled])[active][expand=md]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1024px){:host([expand=lg]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}:host(:not([disabled])[active][expand=lg]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1280px){:host([expand=xl]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}:host(:not([disabled])[active][expand=xl]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1440px){:host([expand=xxl]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}:host(:not([disabled])[active][expand=xxl]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}:host([tone=brand][expand=always]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=always]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=sm]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=md]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=lg]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=xl]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=xxl]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}:host([disabled]) .mainnav-item{opacity:var(--sgds-opacity-40)}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);--sgds-link-color-emphasis:var(--sgds-color-default);align-items:center;color:var(--sgds-color-default)!important;cursor:pointer;display:flex;height:auto!important;padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none!important}:host([expand=always]) ::slotted(*){padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){padding:0 var(--sgds-padding-md)}}:host([tone=brand][expand=always]) ::slotted(*),:host([tone^=gradient][expand=always]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) ::slotted(*),:host([tone^=gradient][expand=sm]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) ::slotted(*),:host([tone^=gradient][expand=md]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) ::slotted(*),:host([tone^=gradient][expand=lg]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) ::slotted(*),:host([tone^=gradient][expand=xl]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) ::slotted(*),:host([tone^=gradient][expand=xxl]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1024px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}@media screen and (min-width:512px){:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:768px){:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:active){color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:active){color:var(--sgds-primary-color-default)!important}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) ::slotted(*){cursor:not-allowed}`;
|
|
3
|
+
var css_248z = css`.mainnav-item{--sgds-link-color-default:var(--sgds-color-default);--sgds-link-color-emphasis:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs,20px)}:host([expand=always]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}@media screen and (min-width:512px){:host([expand=sm]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}:host(:not([disabled])[active][expand=sm]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:768px){:host([expand=md]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}:host(:not([disabled])[active][expand=md]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1024px){:host([expand=lg]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}:host(:not([disabled])[active][expand=lg]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1280px){:host([expand=xl]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}:host(:not([disabled])[active][expand=xl]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1440px){:host([expand=xxl]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}:host(:not([disabled])[active][expand=xxl]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}:host(:not([disabled])[active]) .mainnav-item{--sgds-link-color-default:var(--sgds-primary-color-default);--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)}:host([tone=brand][expand=always]) .mainnav-item,:host([tone^=gradient][expand=always]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .mainnav-item,:host([tone^=gradient][expand=sm]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .mainnav-item,:host([tone^=gradient][expand=md]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .mainnav-item,:host([tone^=gradient][expand=lg]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .mainnav-item,:host([tone^=gradient][expand=xl]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .mainnav-item,:host([tone^=gradient][expand=xxl]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}:host([tone=brand][expand=always]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=always]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=sm]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=md]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=lg]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=xl]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=xxl]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}.mainnav-item:focus-within{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) .mainnav-item{cursor:not-allowed;opacity:var(--sgds-opacity-40)}::slotted(*){color:inherit!important;padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none!important}:host([expand=always]) ::slotted(*){padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:1024px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}::slotted(a:focus-visible){outline:none}`;
|
|
4
4
|
//#endregion
|
|
5
5
|
export { css_248z as default };
|
|
6
6
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mainnav-item.js","names":[],"sources":["../../../src/components/Mainnav/mainnav-item.css"],"sourcesContent":["/* ===== .mainnav-item (inner shadow DOM — protected from external CSS) ===== */\n\n.mainnav-item {\n display: flex;\n align-items: center;\n font-size: var(--sgds-font-size-label-sm);\n line-height: var(--sgds-line-height-2-xs, 20px);\n box-sizing: border-box;\n}\n\n/* Expand variants — border-bottom active indicator + min-height */\n\n:host([expand=\"always\"]) .mainnav-item {\n border-bottom: var(--sgds-border-width-4) solid transparent;\n min-height: 100%;\n}\n\n@media screen and (min-width: 512px) {\n :host([expand=\"sm\"]) .mainnav-item {\n border-bottom: var(--sgds-border-width-4) solid transparent;\n min-height: 100%;\n }\n\n :host(:not([disabled])[active][expand=\"sm\"]) .mainnav-item {\n border-color: var(--sgds-primary-border-color-default);\n }\n}\n\n@media screen and (min-width: 768px) {\n :host([expand=\"md\"]) .mainnav-item {\n border-bottom: var(--sgds-border-width-4) solid transparent;\n min-height: 100%;\n }\n\n :host(:not([disabled])[active][expand=\"md\"]) .mainnav-item {\n border-color: var(--sgds-primary-border-color-default);\n }\n}\n\n@media screen and (min-width: 1024px) {\n :host([expand=\"lg\"]) .mainnav-item {\n border-bottom: var(--sgds-border-width-4) solid transparent;\n min-height: 100%;\n }\n\n :host(:not([disabled])[active][expand=\"lg\"]) .mainnav-item {\n border-color: var(--sgds-primary-border-color-default);\n }\n}\n\n@media screen and (min-width: 1280px) {\n :host([expand=\"xl\"]) .mainnav-item {\n border-bottom: var(--sgds-border-width-4) solid transparent;\n min-height: 100%;\n }\n\n :host(:not([disabled])[active][expand=\"xl\"]) .mainnav-item {\n border-color: var(--sgds-primary-border-color-default);\n }\n}\n\n@media screen and (min-width: 1440px) {\n :host([expand=\"xxl\"]) .mainnav-item {\n border-bottom: var(--sgds-border-width-4) solid transparent;\n min-height: 100%;\n }\n\n :host(:not([disabled])[active][expand=\"xxl\"]) .mainnav-item {\n border-color: var(--sgds-primary-border-color-default);\n }\n}\n\n/* Mobile active — background-color */\n\n@media screen and (max-width: 511px) {\n :host(:not([disabled])[active][expand=\"sm\"]) .mainnav-item {\n background-color: var(--sgds-bg-translucent-subtle);\n }\n}\n\n@media screen and (max-width: 767px) {\n :host(:not([disabled])[active][expand=\"md\"]) .mainnav-item {\n background-color: var(--sgds-bg-translucent-subtle);\n }\n}\n\n@media screen and (max-width: 1023px) {\n :host(:not([disabled])[active][expand=\"lg\"]) .mainnav-item {\n background-color: var(--sgds-bg-translucent-subtle);\n }\n}\n\n@media screen and (max-width: 1279px) {\n :host(:not([disabled])[active][expand=\"xl\"]) .mainnav-item {\n background-color: var(--sgds-bg-translucent-subtle);\n }\n}\n\n@media screen and (max-width: 1439px) {\n :host(:not([disabled])[active][expand=\"xxl\"]) .mainnav-item {\n background-color: var(--sgds-bg-translucent-subtle);\n }\n}\n\n/* Tone brand/gradient — active border-color */\n\n:host([tone=\"brand\"][expand=\"always\"]:not([disabled])[active]) .mainnav-item,\n:host([tone^=\"gradient\"][expand=\"always\"]:not([disabled])[active]) .mainnav-item {\n border-color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n :host([tone=\"brand\"][expand=\"sm\"]:not([disabled])[active]) .mainnav-item,\n :host([tone^=\"gradient\"][expand=\"sm\"]:not([disabled])[active]) .mainnav-item {\n border-color: var(--sgds-color-fixed-light);\n }\n}\n\n@media screen and (min-width: 768px) {\n :host([tone=\"brand\"][expand=\"md\"]:not([disabled])[active]) .mainnav-item,\n :host([tone^=\"gradient\"][expand=\"md\"]:not([disabled])[active]) .mainnav-item {\n border-color: var(--sgds-color-fixed-light);\n }\n}\n\n@media screen and (min-width: 1024px) {\n :host([tone=\"brand\"][expand=\"lg\"]:not([disabled])[active]) .mainnav-item,\n :host([tone^=\"gradient\"][expand=\"lg\"]:not([disabled])[active]) .mainnav-item {\n border-color: var(--sgds-color-fixed-light);\n }\n}\n\n@media screen and (min-width: 1280px) {\n :host([tone=\"brand\"][expand=\"xl\"]:not([disabled])[active]) .mainnav-item,\n :host([tone^=\"gradient\"][expand=\"xl\"]:not([disabled])[active]) .mainnav-item {\n border-color: var(--sgds-color-fixed-light);\n }\n}\n\n@media screen and (min-width: 1440px) {\n :host([tone=\"brand\"][expand=\"xxl\"]:not([disabled])[active]) .mainnav-item,\n :host([tone^=\"gradient\"][expand=\"xxl\"]:not([disabled])[active]) .mainnav-item {\n border-color: var(--sgds-color-fixed-light);\n }\n}\n\n/* Disabled — opacity */\n\n:host([disabled]) .mainnav-item {\n opacity: var(--sgds-opacity-40);\n}\n\n/* ===== ::slotted (light DOM — anchor-specific styles) ===== */\n\n::slotted(*) {\n --sgds-link-color-default: var(--sgds-color-default);\n --sgds-link-color-emphasis: var(--sgds-color-default);\n display: flex;\n cursor: pointer;\n height: auto !important;\n text-decoration: none !important;\n align-items: center;\n color: var(--sgds-color-default) !important;\n padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n}\n\n/* Expand variants — padding */\n\n:host([expand=\"always\"]) ::slotted(*) {\n padding: 0px var(--sgds-padding-md);\n}\n\n@media screen and (min-width: 512px) {\n :host([expand=\"sm\"]) ::slotted(*) {\n padding: 0px var(--sgds-padding-md);\n }\n}\n\n@media screen and (min-width: 768px) {\n :host([expand=\"md\"]) ::slotted(*) {\n padding: 0px var(--sgds-padding-md);\n }\n}\n\n@media screen and (min-width: 1024px) {\n :host([expand=\"lg\"]) ::slotted(*) {\n padding: 0px var(--sgds-padding-md);\n }\n}\n\n@media screen and (min-width: 1280px) {\n :host([expand=\"xl\"]) ::slotted(*) {\n padding: 0px var(--sgds-padding-md);\n }\n}\n\n@media screen and (min-width: 1440px) {\n :host([expand=\"xxl\"]) ::slotted(*) {\n padding: 0px var(--sgds-padding-md);\n }\n}\n\n/* Tone brand/gradient — color overrides */\n\n:host([tone=\"brand\"][expand=\"always\"]) ::slotted(*),\n:host([tone^=\"gradient\"][expand=\"always\"]) ::slotted(*) {\n --sgds-link-color-default: var(--sgds-color-fixed-light);\n --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n color: var(--sgds-color-fixed-light) !important;\n}\n\n@media screen and (min-width: 512px) {\n :host([tone=\"brand\"][expand=\"sm\"]) ::slotted(*),\n :host([tone^=\"gradient\"][expand=\"sm\"]) ::slotted(*) {\n --sgds-link-color-default: var(--sgds-color-fixed-light);\n --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n color: var(--sgds-color-fixed-light) !important;\n }\n}\n\n@media screen and (min-width: 768px) {\n :host([tone=\"brand\"][expand=\"md\"]) ::slotted(*),\n :host([tone^=\"gradient\"][expand=\"md\"]) ::slotted(*) {\n --sgds-link-color-default: var(--sgds-color-fixed-light);\n --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n color: var(--sgds-color-fixed-light) !important;\n }\n}\n\n@media screen and (min-width: 1024px) {\n :host([tone=\"brand\"][expand=\"lg\"]) ::slotted(*),\n :host([tone^=\"gradient\"][expand=\"lg\"]) ::slotted(*) {\n --sgds-link-color-default: var(--sgds-color-fixed-light);\n --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n color: var(--sgds-color-fixed-light) !important;\n }\n}\n\n@media screen and (min-width: 1280px) {\n :host([tone=\"brand\"][expand=\"xl\"]) ::slotted(*),\n :host([tone^=\"gradient\"][expand=\"xl\"]) ::slotted(*) {\n --sgds-link-color-default: var(--sgds-color-fixed-light);\n --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n color: var(--sgds-color-fixed-light) !important;\n }\n}\n\n@media screen and (min-width: 1440px) {\n :host([tone=\"brand\"][expand=\"xxl\"]) ::slotted(*),\n :host([tone^=\"gradient\"][expand=\"xxl\"]) ::slotted(*) {\n --sgds-link-color-default: var(--sgds-color-fixed-light);\n --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n color: var(--sgds-color-fixed-light) !important;\n }\n}\n\n/* Desktop padding override */\n\n@media screen and (min-width: 1024px) {\n ::slotted(*) {\n padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n }\n}\n\n/* Active state — color */\n\n:host(:not([disabled])[active]) ::slotted(*) {\n --sgds-link-color-default: var(--sgds-primary-color-default);\n --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n color: var(--sgds-primary-color-default) !important;\n}\n\n/* Hover states */\n\n:host(:not([disabled]):not([active])) ::slotted(a:hover) {\n --sgds-link-color-emphasis: var(--sgds-color-default);\n color: var(--sgds-color-default) !important;\n}\n\n:host(:not([disabled])[active]) ::slotted(a:hover) {\n --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n color: var(--sgds-primary-color-default) !important;\n}\n\n/* Tone brand/gradient — active + hover color overrides */\n\n:host([tone=\"brand\"][expand=\"always\"]:not([disabled])[active]) ::slotted(*),\n:host([tone=\"brand\"][expand=\"always\"]:not([disabled])[active]) ::slotted(a:hover),\n:host([tone^=\"gradient\"][expand=\"always\"]:not([disabled])[active]) ::slotted(*),\n:host([tone^=\"gradient\"][expand=\"always\"]:not([disabled])[active]) ::slotted(a:hover) {\n --sgds-link-color-default: var(--sgds-color-fixed-light);\n --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n color: var(--sgds-color-fixed-light) !important;\n}\n\n@media screen and (min-width: 512px) {\n :host([tone=\"brand\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(*),\n :host([tone=\"brand\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(a:hover),\n :host([tone^=\"gradient\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(*),\n :host([tone^=\"gradient\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(a:hover) {\n --sgds-link-color-default: var(--sgds-color-fixed-light);\n --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n color: var(--sgds-color-fixed-light) !important;\n }\n}\n\n@media screen and (min-width: 768px) {\n :host([tone=\"brand\"][expand=\"md\"]:not([disabled])[active]) ::slotted(*),\n :host([tone=\"brand\"][expand=\"md\"]:not([disabled])[active]) ::slotted(a:hover),\n :host([tone^=\"gradient\"][expand=\"md\"]:not([disabled])[active]) ::slotted(*),\n :host([tone^=\"gradient\"][expand=\"md\"]:not([disabled])[active]) ::slotted(a:hover) {\n --sgds-link-color-default: var(--sgds-color-fixed-light);\n --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n color: var(--sgds-color-fixed-light) !important;\n }\n}\n\n@media screen and (min-width: 1024px) {\n :host([tone=\"brand\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(*),\n :host([tone=\"brand\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(a:hover),\n :host([tone^=\"gradient\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(*),\n :host([tone^=\"gradient\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(a:hover) {\n --sgds-link-color-default: var(--sgds-color-fixed-light);\n --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n color: var(--sgds-color-fixed-light) !important;\n }\n}\n\n@media screen and (min-width: 1280px) {\n :host([tone=\"brand\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(*),\n :host([tone=\"brand\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(a:hover),\n :host([tone^=\"gradient\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(*),\n :host([tone^=\"gradient\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(a:hover) {\n --sgds-link-color-default: var(--sgds-color-fixed-light);\n --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n color: var(--sgds-color-fixed-light) !important;\n }\n}\n\n@media screen and (min-width: 1440px) {\n :host([tone=\"brand\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(*),\n :host([tone=\"brand\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(a:hover),\n :host([tone^=\"gradient\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(*),\n :host([tone^=\"gradient\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(a:hover) {\n --sgds-link-color-default: var(--sgds-color-fixed-light);\n --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n color: var(--sgds-color-fixed-light) !important;\n }\n}\n\n/* Disabled hover */\n\n:host([disabled]) ::slotted(a:hover) {\n --sgds-link-color-emphasis: var(--sgds-color-default);\n color: var(--sgds-color-default) !important;\n}\n\n/* Active press states */\n\n:host(:not([disabled]):not([active])) ::slotted(a:active) {\n color: var(--sgds-color-default) !important;\n}\n\n:host(:not([disabled])[active]) ::slotted(a:active) {\n color: var(--sgds-primary-color-default) !important;\n}\n\n/* Focus-visible */\n\n::slotted(a:focus-visible) {\n --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n color: var(--sgds-primary-color-default) !important;\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n}\n\n/* Disabled — cursor */\n\n:host([disabled]) ::slotted(*) {\n cursor: not-allowed;\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"mainnav-item.js","names":[],"sources":["../../../src/components/Mainnav/mainnav-item.css"],"sourcesContent":["/* ===== .mainnav-item (inner shadow DOM — protected from external CSS) ===== */\n\n.mainnav-item {\n display: flex;\n align-items: center;\n font-size: var(--sgds-font-size-label-sm);\n line-height: var(--sgds-line-height-2-xs, 20px);\n box-sizing: border-box;\n cursor: pointer;\n --sgds-link-color-default: var(--sgds-color-default);\n --sgds-link-color-emphasis: var(--sgds-color-default);\n color: var(--sgds-color-default);\n}\n\n/* Expand variants — border-bottom active indicator + min-height */\n\n:host([expand=\"always\"]) .mainnav-item {\n border-bottom: var(--sgds-border-width-4) solid transparent;\n min-height: 100%;\n}\n\n@media screen and (min-width: 512px) {\n :host([expand=\"sm\"]) .mainnav-item {\n border-bottom: var(--sgds-border-width-4) solid transparent;\n min-height: 100%;\n }\n\n :host(:not([disabled])[active][expand=\"sm\"]) .mainnav-item {\n border-color: var(--sgds-primary-border-color-default);\n }\n}\n\n@media screen and (min-width: 768px) {\n :host([expand=\"md\"]) .mainnav-item {\n border-bottom: var(--sgds-border-width-4) solid transparent;\n min-height: 100%;\n }\n\n :host(:not([disabled])[active][expand=\"md\"]) .mainnav-item {\n border-color: var(--sgds-primary-border-color-default);\n }\n}\n\n@media screen and (min-width: 1024px) {\n :host([expand=\"lg\"]) .mainnav-item {\n border-bottom: var(--sgds-border-width-4) solid transparent;\n min-height: 100%;\n }\n\n :host(:not([disabled])[active][expand=\"lg\"]) .mainnav-item {\n border-color: var(--sgds-primary-border-color-default);\n }\n}\n\n@media screen and (min-width: 1280px) {\n :host([expand=\"xl\"]) .mainnav-item {\n border-bottom: var(--sgds-border-width-4) solid transparent;\n min-height: 100%;\n }\n\n :host(:not([disabled])[active][expand=\"xl\"]) .mainnav-item {\n border-color: var(--sgds-primary-border-color-default);\n }\n}\n\n@media screen and (min-width: 1440px) {\n :host([expand=\"xxl\"]) .mainnav-item {\n border-bottom: var(--sgds-border-width-4) solid transparent;\n min-height: 100%;\n }\n\n :host(:not([disabled])[active][expand=\"xxl\"]) .mainnav-item {\n border-color: var(--sgds-primary-border-color-default);\n }\n}\n\n/* Mobile active — background-color */\n\n@media screen and (max-width: 511px) {\n :host(:not([disabled])[active][expand=\"sm\"]) .mainnav-item {\n background-color: var(--sgds-bg-translucent-subtle);\n }\n}\n\n@media screen and (max-width: 767px) {\n :host(:not([disabled])[active][expand=\"md\"]) .mainnav-item {\n background-color: var(--sgds-bg-translucent-subtle);\n }\n}\n\n@media screen and (max-width: 1023px) {\n :host(:not([disabled])[active][expand=\"lg\"]) .mainnav-item {\n background-color: var(--sgds-bg-translucent-subtle);\n }\n}\n\n@media screen and (max-width: 1279px) {\n :host(:not([disabled])[active][expand=\"xl\"]) .mainnav-item {\n background-color: var(--sgds-bg-translucent-subtle);\n }\n}\n\n@media screen and (max-width: 1439px) {\n :host(:not([disabled])[active][expand=\"xxl\"]) .mainnav-item {\n background-color: var(--sgds-bg-translucent-subtle);\n }\n}\n\n/* Active state — color */\n\n:host(:not([disabled])[active]) .mainnav-item {\n --sgds-link-color-default: var(--sgds-primary-color-default);\n --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n color: var(--sgds-primary-color-default);\n}\n\n/* Tone brand/gradient — color */\n\n:host([tone=\"brand\"][expand=\"always\"]) .mainnav-item,\n:host([tone^=\"gradient\"][expand=\"always\"]) .mainnav-item {\n --sgds-link-color-default: var(--sgds-color-fixed-light);\n --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n :host([tone=\"brand\"][expand=\"sm\"]) .mainnav-item,\n :host([tone^=\"gradient\"][expand=\"sm\"]) .mainnav-item {\n --sgds-link-color-default: var(--sgds-color-fixed-light);\n --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n color: var(--sgds-color-fixed-light);\n }\n}\n\n@media screen and (min-width: 768px) {\n :host([tone=\"brand\"][expand=\"md\"]) .mainnav-item,\n :host([tone^=\"gradient\"][expand=\"md\"]) .mainnav-item {\n --sgds-link-color-default: var(--sgds-color-fixed-light);\n --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n color: var(--sgds-color-fixed-light);\n }\n}\n\n@media screen and (min-width: 1024px) {\n :host([tone=\"brand\"][expand=\"lg\"]) .mainnav-item,\n :host([tone^=\"gradient\"][expand=\"lg\"]) .mainnav-item {\n --sgds-link-color-default: var(--sgds-color-fixed-light);\n --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n color: var(--sgds-color-fixed-light);\n }\n}\n\n@media screen and (min-width: 1280px) {\n :host([tone=\"brand\"][expand=\"xl\"]) .mainnav-item,\n :host([tone^=\"gradient\"][expand=\"xl\"]) .mainnav-item {\n --sgds-link-color-default: var(--sgds-color-fixed-light);\n --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n color: var(--sgds-color-fixed-light);\n }\n}\n\n@media screen and (min-width: 1440px) {\n :host([tone=\"brand\"][expand=\"xxl\"]) .mainnav-item,\n :host([tone^=\"gradient\"][expand=\"xxl\"]) .mainnav-item {\n --sgds-link-color-default: var(--sgds-color-fixed-light);\n --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n color: var(--sgds-color-fixed-light);\n }\n}\n\n/* Tone brand/gradient — active border-color */\n\n:host([tone=\"brand\"][expand=\"always\"]:not([disabled])[active]) .mainnav-item,\n:host([tone^=\"gradient\"][expand=\"always\"]:not([disabled])[active]) .mainnav-item {\n border-color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n :host([tone=\"brand\"][expand=\"sm\"]:not([disabled])[active]) .mainnav-item,\n :host([tone^=\"gradient\"][expand=\"sm\"]:not([disabled])[active]) .mainnav-item {\n border-color: var(--sgds-color-fixed-light);\n }\n}\n\n@media screen and (min-width: 768px) {\n :host([tone=\"brand\"][expand=\"md\"]:not([disabled])[active]) .mainnav-item,\n :host([tone^=\"gradient\"][expand=\"md\"]:not([disabled])[active]) .mainnav-item {\n border-color: var(--sgds-color-fixed-light);\n }\n}\n\n@media screen and (min-width: 1024px) {\n :host([tone=\"brand\"][expand=\"lg\"]:not([disabled])[active]) .mainnav-item,\n :host([tone^=\"gradient\"][expand=\"lg\"]:not([disabled])[active]) .mainnav-item {\n border-color: var(--sgds-color-fixed-light);\n }\n}\n\n@media screen and (min-width: 1280px) {\n :host([tone=\"brand\"][expand=\"xl\"]:not([disabled])[active]) .mainnav-item,\n :host([tone^=\"gradient\"][expand=\"xl\"]:not([disabled])[active]) .mainnav-item {\n border-color: var(--sgds-color-fixed-light);\n }\n}\n\n@media screen and (min-width: 1440px) {\n :host([tone=\"brand\"][expand=\"xxl\"]:not([disabled])[active]) .mainnav-item,\n :host([tone^=\"gradient\"][expand=\"xxl\"]:not([disabled])[active]) .mainnav-item {\n border-color: var(--sgds-color-fixed-light);\n }\n}\n\n/* Focus-within — outline on wrapper, anchor inherits color */\n\n.mainnav-item:focus-within {\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n}\n\n/* Disabled */\n\n:host([disabled]) .mainnav-item {\n opacity: var(--sgds-opacity-40);\n cursor: not-allowed;\n}\n\n/* ===== ::slotted (light DOM — minimal anchor overrides) ===== */\n\n::slotted(*) {\n text-decoration: none !important;\n color: inherit !important;\n padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n}\n\n/* Expand variants — padding */\n\n:host([expand=\"always\"]) ::slotted(*) {\n padding: 0px var(--sgds-padding-md);\n}\n\n@media screen and (min-width: 512px) {\n :host([expand=\"sm\"]) ::slotted(*) {\n padding: 0px var(--sgds-padding-md);\n }\n}\n\n@media screen and (min-width: 768px) {\n :host([expand=\"md\"]) ::slotted(*) {\n padding: 0px var(--sgds-padding-md);\n }\n}\n\n@media screen and (min-width: 1024px) {\n :host([expand=\"lg\"]) ::slotted(*) {\n padding: 0px var(--sgds-padding-md);\n }\n}\n\n@media screen and (min-width: 1280px) {\n :host([expand=\"xl\"]) ::slotted(*) {\n padding: 0px var(--sgds-padding-md);\n }\n}\n\n@media screen and (min-width: 1440px) {\n :host([expand=\"xxl\"]) ::slotted(*) {\n padding: 0px var(--sgds-padding-md);\n }\n}\n\n/* Desktop padding override */\n\n@media screen and (min-width: 1024px) {\n ::slotted(*) {\n padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n }\n}\n\n/* Focus-visible — suppress anchor outline, wrapper handles it */\n\n::slotted(a:focus-visible) {\n outline: none;\n}\n"],"mappings":""}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from "lit";
|
|
2
2
|
//#region src/components/Mainnav/mainnav.css
|
|
3
|
-
var css_248z = css`:host{display:block}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);position:relative;z-index:var(--sgds-z-index-floating)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);justify-content:flex-start;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);min-height:var(--sgds-mainnav-height,72px);padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}:host([fluid]) .navbar{max-width:none}.navbar-brand
|
|
3
|
+
var css_248z = css`:host{display:block}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);position:relative;z-index:var(--sgds-z-index-floating)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);justify-content:flex-start;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);min-height:var(--sgds-mainnav-height,72px);padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}:host([fluid]) .navbar{max-width:none}.navbar-brand{align-items:center;align-self:center;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-40);text-decoration:none;white-space:nowrap}.navbar-brand ::slotted(img){height:100%}.navbar-brand:focus-visible,.navbar-brand:focus-within{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-brand ::slotted(a:focus-visible){outline:none}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:var(--sgds-z-index-floating)}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px)}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown):not(sgds-mainnav-profile)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-end{align-items:center;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}.navbar-end--empty{display:none}slot[name=profile]{align-self:stretch;display:flex}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4)}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);height:inherit;margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}slot.slot-empty{display:none}`;
|
|
4
4
|
//#endregion
|
|
5
5
|
export { css_248z as default };
|
|
6
6
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mainnav.js","names":[],"sources":["../../../src/components/Mainnav/mainnav.css"],"sourcesContent":[":host {\n display: block;\n}\n\nnav {\n background-color: var(--sgds-surface-default);\n box-shadow: 0px 2px 4px 0px rgba(14, 14, 14, 0.08);\n position: relative;\n z-index: var(--sgds-z-index-floating);\n}\n\n.navbar {\n display: flex;\n flex-wrap: wrap;\n align-items: stretch;\n justify-content: flex-start;\n gap: var(--sgds-gap-xs);\n padding: 0px var(--sgds-mainnav-mobile-padding-x);\n width: 100%;\n max-width: var(--sgds-mainnav-max-width, 1440px);\n min-height: var(--sgds-mainnav-height, 72px);\n margin: auto;\n font-size: var(--sgds-font-size-label-sm);\n}\n\n:host([fluid]) .navbar {\n max-width: none;\n}\n\n.navbar-brand
|
|
1
|
+
{"version":3,"file":"mainnav.js","names":[],"sources":["../../../src/components/Mainnav/mainnav.css"],"sourcesContent":[":host {\n display: block;\n}\n\nnav {\n background-color: var(--sgds-surface-default);\n box-shadow: 0px 2px 4px 0px rgba(14, 14, 14, 0.08);\n position: relative;\n z-index: var(--sgds-z-index-floating);\n}\n\n.navbar {\n display: flex;\n flex-wrap: wrap;\n align-items: stretch;\n justify-content: flex-start;\n gap: var(--sgds-gap-xs);\n padding: 0px var(--sgds-mainnav-mobile-padding-x);\n width: 100%;\n max-width: var(--sgds-mainnav-max-width, 1440px);\n min-height: var(--sgds-mainnav-height, 72px);\n margin: auto;\n font-size: var(--sgds-font-size-label-sm);\n}\n\n:host([fluid]) .navbar {\n max-width: none;\n}\n\n.navbar-brand {\n display: flex;\n height: var(--sgds-dimension-40);\n align-self: center;\n align-items: center;\n text-decoration: none;\n white-space: nowrap;\n color: var(--sgds-color-default);\n}\n\n.navbar-brand ::slotted(img) {\n height: 100%;\n}\n\n.navbar-brand:focus-visible,\n.navbar-brand:focus-within {\n outline: var(--sgds-outline-focus);\n outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.navbar-brand ::slotted(a:focus-visible) {\n outline: none;\n}\n\n.navbar-nav {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n margin-top: 0;\n margin-bottom: 0;\n}\n\nnav > .navbar-body {\n position: absolute;\n z-index: var(--sgds-z-index-floating);\n width: 100%;\n background-color: var(--sgds-surface-default);\n padding: var(--sgds-padding-md) 0px;\n border-top: var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);\n box-shadow: 0px 2px 4px 0px rgba(14, 14, 14, 0.08);\n transition: transform 0.2s ease-in-out;\n}\n\nnav > .navbar-body .navbar-nav {\n height: 100dvh;\n max-width: var(--sgds-mainnav-max-width, 1440px);\n margin: auto;\n}\n\nnav > .navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown):not(sgds-mainnav-profile)) {\n padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n}\n\n.navbar-collapse {\n align-items: center;\n flex-basis: 100%;\n flex-grow: 1;\n}\n\n.navbar-toggler {\n align-self: center;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .navbar-toggler {\n transition: none;\n }\n}\n\n.navbar-nav-scroll {\n overflow-y: auto;\n}\n\n@media (min-width: 512px) {\n .navbar-expand-sm {\n flex-wrap: nowrap;\n justify-content: flex-start;\n gap: var(--sgds-gap-xl);\n }\n\n .navbar-expand-sm .navbar-nav {\n flex-direction: row;\n }\n\n .navbar-expand-sm .navbar-nav-scroll {\n overflow: visible;\n }\n\n .navbar-expand-sm .navbar-collapse {\n display: flex !important;\n flex-basis: auto;\n }\n\n .navbar-expand-sm .navbar-toggler {\n display: none;\n }\n}\n@media (min-width: 768px) {\n .navbar-expand-md {\n flex-wrap: nowrap;\n justify-content: flex-start;\n gap: var(--sgds-gap-xl);\n }\n\n .navbar-expand-md .navbar-nav {\n flex-direction: row;\n }\n\n .navbar-expand-md .navbar-nav-scroll {\n overflow: visible;\n }\n\n .navbar-expand-md .navbar-collapse {\n display: flex !important;\n flex-basis: auto;\n }\n\n .navbar-expand-md .navbar-toggler {\n display: none;\n }\n}\n@media (min-width: 1024px) {\n .navbar {\n padding: 0px var(--sgds-mainnav-padding-x);\n }\n\n .navbar-expand-lg {\n flex-wrap: nowrap;\n justify-content: flex-start;\n gap: var(--sgds-gap-xl);\n }\n\n .navbar-expand-lg .navbar-nav {\n flex-direction: row;\n }\n\n .navbar-expand-lg .navbar-nav-scroll {\n overflow: visible;\n }\n\n .navbar-expand-lg .navbar-collapse {\n display: flex !important;\n flex-basis: auto;\n }\n\n .navbar-expand-lg .navbar-toggler {\n display: none;\n }\n}\n@media (min-width: 1280px) {\n .navbar-expand-xl {\n flex-wrap: nowrap;\n justify-content: flex-start;\n gap: var(--sgds-gap-xl);\n }\n\n .navbar-expand-xl .navbar-nav {\n flex-direction: row;\n }\n\n .navbar-expand-xl .navbar-nav .nav-link {\n padding-left: var(--mainnav-nav-link-padding-x);\n padding-right: var(--mainnav-nav-link-padding-x);\n }\n\n .navbar-expand-xl .navbar-nav-scroll {\n overflow: visible;\n }\n\n .navbar-expand-xl .navbar-collapse {\n display: flex !important;\n flex-basis: auto;\n }\n\n .navbar-expand-xl .navbar-toggler {\n display: none;\n }\n}\n@media (min-width: 1440px) {\n .navbar-expand-xxl {\n flex-wrap: nowrap;\n justify-content: flex-start;\n gap: var(--sgds-gap-xl);\n }\n\n .navbar-expand-xxl .navbar-nav {\n flex-direction: row;\n }\n\n .navbar-expand-xxl .navbar-nav-scroll {\n overflow: visible;\n }\n\n .navbar-expand-xxl .navbar-collapse {\n display: flex !important;\n flex-basis: auto;\n }\n\n .navbar-expand-xxl .navbar-toggler {\n display: none;\n }\n}\n\n.navbar-expand {\n flex-wrap: nowrap;\n justify-content: flex-start;\n gap: var(--sgds-gap-xl);\n}\n.navbar-expand .navbar-nav {\n flex-direction: row;\n}\n\n.navbar-expand .navbar-nav-scroll {\n overflow: visible;\n}\n\n.navbar-expand .navbar-collapse {\n display: flex !important;\n flex-basis: auto;\n}\n\n.navbar-expand .navbar-toggler {\n display: none;\n}\n\n/* slot */\n\n.navbar-end {\n display: flex;\n align-items: center;\n gap: var(--sgds-gap-xs);\n margin-left: auto;\n}\n\n.navbar-end--empty {\n display: none;\n}\n\nslot[name=\"profile\"] {\n display: flex;\n align-self: stretch;\n}\n\nslot[name=\"non-collapsible\"] {\n display: flex;\n gap: var(--sgds-spacer-4);\n align-items: center;\n}\n\n.slot-end {\n display: flex;\n margin-left: auto;\n align-items: stretch;\n height: inherit;\n gap: var(--sgds-gap-xs);\n}\n\n/* there is no wildcard selector for element tag names in css */\n.slot-end::slotted(:not([name$=\"-mainnav-item\"]):not([name$=\"-mainnav-dropdown\"])) {\n align-self: center;\n}\n\nslot.slot-empty {\n display: none;\n}\n"],"mappings":""}
|
|
@@ -196,7 +196,7 @@ var SgdsMainnavDropdown = class extends SgdsElement {
|
|
|
196
196
|
@click=${this._openMenu}
|
|
197
197
|
@keydown=${this._handleKeyboardOpen}
|
|
198
198
|
>
|
|
199
|
-
<slot name="toggler" @slotchange=${this._handleTogglerSlotChange}></slot>
|
|
199
|
+
<span class="toggler-wrapper"><slot name="toggler" @slotchange=${this._handleTogglerSlotChange}></slot></span>
|
|
200
200
|
<sgds-icon name="chevron-right" size="md"></sgds-icon>
|
|
201
201
|
</button>
|
|
202
202
|
<div class="dropdown-items">
|
|
@@ -223,7 +223,7 @@ var SgdsMainnavDropdown = class extends SgdsElement {
|
|
|
223
223
|
?disabled=${this.disabled}
|
|
224
224
|
slot="toggler"
|
|
225
225
|
>
|
|
226
|
-
<slot name="toggler" @slotchange=${this._handleTogglerSlotChange}></slot>
|
|
226
|
+
<span class="toggler-wrapper"><slot name="toggler" @slotchange=${this._handleTogglerSlotChange}></slot></span>
|
|
227
227
|
<sgds-icon name="chevron-down" size="md"></sgds-icon>
|
|
228
228
|
</button>
|
|
229
229
|
<slot @slotchange=${this._handleDesktopSlotChange}></slot>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-mainnav-dropdown.js","names":["genId","dropdownStyle","dropdownMenuStyle","mainnavDropdownStyle"],"sources":["../../../src/components/Mainnav/sgds-mainnav-dropdown.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { consume } from \"@lit/context\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { SgdsMainnav } from \"./sgds-mainnav\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { offset } from \"@floating-ui/dom\";\nimport genId from \"../../utils/generateId\";\nimport dropdownStyle from \"../Dropdown/dropdown.css\";\nimport dropdownMenuStyle from \"../Dropdown/dropdown-menu.css\";\nimport mainnavDropdownStyle from \"./mainnav-dropdown.css\";\nimport SgdsDropdown from \"../Dropdown/sgds-dropdown\";\nimport SgdsDropdownItem from \"../Dropdown/sgds-dropdown-item\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nconst TAB = \"Tab\";\nconst ENTER = \"Enter\";\nconst SPACE = \" \";\n\n/**\n * @slot default - The menu items. Pass in sgds-dropdown-item as the menu items\n * @slot toggler - The content of the toggler to pass in html content.\n */\nexport class SgdsMainnavDropdown extends SgdsElement {\n static styles = [...SgdsElement.styles, dropdownStyle, dropdownMenuStyle, mainnavDropdownStyle];\n /** @internal */\n static dependencies = {\n \"sgds-dropdown\": SgdsDropdown,\n \"sgds-dropdown-item\": SgdsDropdownItem,\n \"sgds-icon\": SgdsIcon\n };\n\n @consume({ context: MainnavBreakpointContext, subscribe: true })\n @state()\n private _breakpointReached = true;\n\n @consume({ context: MainnavExpandedContext, subscribe: true })\n @state()\n private expanded: boolean;\n\n /** @internal */\n @query(\".nav-link\") navLink: HTMLElement;\n\n /** @internal */\n @query(\".dropdown-items\") dropdownItems: HTMLElement;\n\n /** @internal */\n @query(\".dropdown-items a\") menuHeaderButton: HTMLElement;\n\n /** @internal */\n @query(\".dropdown-items span\") menuHeaderText: HTMLElement;\n\n /** @internal Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */\n private togglerId: string = genId(\"dropdown\", \"button\");\n\n /** When true, applies active styles on the dropdown button */\n @property({ type: Boolean })\n active = false;\n\n /** When true, applies active styles on the dropdown button */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Accessible label for the dropdown's toggle button. Forwarded to the button's aria-label attribute.\n */\n @property({ type: String })\n ariaLabel: string;\n\n /** @internal */\n @queryAssignedElements({ slot: \"toggler\" }) private togglerNodes!: HTMLElement[];\n\n /** @internal */\n @queryAssignedElements() private defaultNodes!: SgdsDropdownItem[];\n\n /** @internal */\n get defaultSlotItems(): SgdsDropdownItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n ) as SgdsDropdownItem[];\n }\n\n updated() {\n if (this._breakpointReached) {\n this._copyTextToMenu();\n this._resetDropdownMenu();\n this._hideDropdownMenuItems();\n }\n }\n\n private _handleSlotChange(e: Event) {\n const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n items.forEach(item => {\n item.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent.bind(this));\n\n const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n dropdownItem.classList.add(\"mainnav-dropdown-link\");\n\n const link = item.shadowRoot?.querySelector(\"a\") || item.querySelector(\"a\");\n link.tabIndex = -1;\n if (dropdownItem.classList.contains(\"disabled\")) {\n link.setAttribute(\"href\", \"javascript:void(0)\");\n link.setAttribute(\"tabindex\", \"-1\");\n } else {\n link.addEventListener(\"click\", (e: Event) => {\n const target = e.target as HTMLElement;\n const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n mainnav.hide();\n });\n }\n });\n }\n\n private _handleDesktopSlotChange(e: Event) {\n const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n items.forEach(item => {\n const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n dropdownItem.classList.remove(\"mainnav-dropdown-link\");\n\n const slottedItem = (item.shadowRoot.querySelector(\".dropdown-item slot\") as HTMLSlotElement).assignedElements({\n flatten: true\n });\n slottedItem.forEach(item => {\n if (dropdownItem.classList.contains(\"disabled\")) {\n item.setAttribute(\"href\", \"javascript:void(0)\");\n item.setAttribute(\"tabindex\", \"-1\");\n }\n });\n });\n }\n\n private _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n if (!this._breakpointReached) {\n return;\n }\n\n const slottedItems = this.defaultSlotItems.filter(item => !item.hasAttribute(\"disabled\"));\n const items = [this.menuHeaderButton, ...slottedItems];\n const itemLength = items.length;\n if (itemLength === 0) {\n return;\n }\n\n const firstItem = items[0];\n const lastItem = items[itemLength - 1].shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n let activeElement = document.activeElement as HTMLElement;\n if (activeElement === this) {\n activeElement = this.shadowRoot.activeElement as HTMLElement;\n }\n\n switch (e.key) {\n case \"Tab\": {\n if (e.shiftKey) {\n if (activeElement === firstItem) {\n e.preventDefault();\n setTimeout(() => {\n lastItem.focus();\n }, 0);\n }\n } else {\n const activeShadowElement = activeElement.shadowRoot\n ? activeElement.shadowRoot.querySelector(\".dropdown-item\")\n : null;\n if (activeShadowElement && activeShadowElement === lastItem) {\n e.preventDefault();\n firstItem.focus();\n }\n }\n break;\n }\n default:\n break;\n }\n }\n\n private _copyTextToMenu() {\n this.menuHeaderText.textContent = this.togglerNodes[0].textContent;\n }\n\n private _handleTogglerSlotChange() {\n // no-op: toggler slot change handled by _copyTextToMenu in mobile view\n }\n\n private _hideDropdownMenuItems() {\n this.dropdownItems.style.display = \"none\";\n this.dropdownItems.setAttribute(\"aria-hidden\", \"true\");\n }\n\n private _resetDropdownMenu(): Promise<void> {\n const navbarBody = this._getNavbarBody();\n if (!navbarBody) return Promise.resolve();\n\n return new Promise(resolve => {\n const onEnd = (event: TransitionEvent) => {\n if (event.propertyName === \"transform\") {\n navbarBody.removeEventListener(\"transitionend\", onEnd);\n resolve();\n }\n };\n\n const hasTransition = getComputedStyle(navbarBody).transitionProperty.includes(\"transform\");\n\n if (hasTransition) {\n navbarBody.addEventListener(\"transitionend\", onEnd);\n navbarBody.style.removeProperty(\"transform\");\n } else {\n navbarBody.style.removeProperty(\"transform\");\n resolve();\n }\n });\n }\n\n private _handleKeyboardOpen(event: KeyboardEvent) {\n if (this.disabled) {\n return;\n }\n\n if (event.key === ENTER || event.key === SPACE) {\n event.preventDefault();\n this._openMenu();\n }\n }\n\n private _getNavbarBody() {\n const mainNav = document.querySelector(\"sgds-mainnav\") as HTMLElement | null;\n\n if (!mainNav?.shadowRoot) {\n console.warn(\"sgds-mainnav or its shadowRoot not found\");\n return;\n }\n\n const navbarBody = mainNav.shadowRoot.querySelector(\".navbar-body\") as HTMLElement;\n if (!navbarBody) {\n console.warn(\".navbar-body not found in sgds-mainnav\");\n return;\n }\n\n return navbarBody;\n }\n\n private _openMenu() {\n const navbarBody = this._getNavbarBody();\n navbarBody.style.transform = \"translateX(-100%)\";\n this.dropdownItems.style.removeProperty(\"display\");\n this.dropdownItems.setAttribute(\"aria-hidden\", \"false\");\n setTimeout(() => {\n this.menuHeaderButton.focus();\n }, 50);\n }\n\n private _handleHeaderKeyboardEvent(event: KeyboardEvent) {\n switch (event.key) {\n case TAB: {\n this._handleKeyboardMenuItemsEvent(event);\n break;\n }\n case ENTER:\n case SPACE: {\n event.preventDefault();\n this._closeMenu();\n break;\n }\n default:\n break;\n }\n }\n\n private async _closeMenu() {\n await this._resetDropdownMenu();\n this._hideDropdownMenuItems();\n this.navLink.focus();\n }\n\n render() {\n const mobileView = html`\n <button\n class=\"${classMap({\n \"nav-link\": true,\n active: this.active,\n disabled: this.disabled\n })}\"\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-label=${ifDefined(this.ariaLabel)}\n ?disabled=${this.disabled}\n @click=${this._openMenu}\n @keydown=${this._handleKeyboardOpen}\n >\n <slot name=\"toggler\" @slotchange=${this._handleTogglerSlotChange}></slot>\n <sgds-icon name=\"chevron-right\" size=\"md\"></sgds-icon>\n </button>\n <div class=\"dropdown-items\">\n <a tabindex=\"0\" role=\"button\" @click=${this._closeMenu} @keydown=${this._handleHeaderKeyboardEvent}>\n <sgds-icon name=\"chevron-left\" size=\"md\"></sgds-icon>\n <span></span>\n </a>\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n `;\n\n const desktopView = html`<sgds-dropdown\n .floatingOpts=${{\n middleware: [offset(0)]\n }}\n ?disabled=${this.disabled}\n >\n <button\n class=\"${classMap({\n \"nav-link\": true,\n active: this.active,\n disabled: this.disabled\n })}\"\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-label=${ifDefined(this.ariaLabel)}\n id=${this.togglerId}\n ?disabled=${this.disabled}\n slot=\"toggler\"\n >\n <slot name=\"toggler\" @slotchange=${this._handleTogglerSlotChange}></slot>\n <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n </button>\n <slot @slotchange=${this._handleDesktopSlotChange}></slot>\n </sgds-dropdown>`;\n\n return this._breakpointReached ? mobileView : desktopView;\n }\n}\n\nexport default SgdsMainnavDropdown;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sgds-mainnav-dropdown.js","names":["genId","dropdownStyle","dropdownMenuStyle","mainnavDropdownStyle"],"sources":["../../../src/components/Mainnav/sgds-mainnav-dropdown.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { consume } from \"@lit/context\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { SgdsMainnav } from \"./sgds-mainnav\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { offset } from \"@floating-ui/dom\";\nimport genId from \"../../utils/generateId\";\nimport dropdownStyle from \"../Dropdown/dropdown.css\";\nimport dropdownMenuStyle from \"../Dropdown/dropdown-menu.css\";\nimport mainnavDropdownStyle from \"./mainnav-dropdown.css\";\nimport SgdsDropdown from \"../Dropdown/sgds-dropdown\";\nimport SgdsDropdownItem from \"../Dropdown/sgds-dropdown-item\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nconst TAB = \"Tab\";\nconst ENTER = \"Enter\";\nconst SPACE = \" \";\n\n/**\n * @slot default - The menu items. Pass in sgds-dropdown-item as the menu items\n * @slot toggler - The content of the toggler to pass in html content.\n */\nexport class SgdsMainnavDropdown extends SgdsElement {\n static styles = [...SgdsElement.styles, dropdownStyle, dropdownMenuStyle, mainnavDropdownStyle];\n /** @internal */\n static dependencies = {\n \"sgds-dropdown\": SgdsDropdown,\n \"sgds-dropdown-item\": SgdsDropdownItem,\n \"sgds-icon\": SgdsIcon\n };\n\n @consume({ context: MainnavBreakpointContext, subscribe: true })\n @state()\n private _breakpointReached = true;\n\n @consume({ context: MainnavExpandedContext, subscribe: true })\n @state()\n private expanded: boolean;\n\n /** @internal */\n @query(\".nav-link\") navLink: HTMLElement;\n\n /** @internal */\n @query(\".dropdown-items\") dropdownItems: HTMLElement;\n\n /** @internal */\n @query(\".dropdown-items a\") menuHeaderButton: HTMLElement;\n\n /** @internal */\n @query(\".dropdown-items span\") menuHeaderText: HTMLElement;\n\n /** @internal Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */\n private togglerId: string = genId(\"dropdown\", \"button\");\n\n /** When true, applies active styles on the dropdown button */\n @property({ type: Boolean })\n active = false;\n\n /** When true, applies active styles on the dropdown button */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Accessible label for the dropdown's toggle button. Forwarded to the button's aria-label attribute.\n */\n @property({ type: String })\n ariaLabel: string;\n\n /** @internal */\n @queryAssignedElements({ slot: \"toggler\" }) private togglerNodes!: HTMLElement[];\n\n /** @internal */\n @queryAssignedElements() private defaultNodes!: SgdsDropdownItem[];\n\n /** @internal */\n get defaultSlotItems(): SgdsDropdownItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n ) as SgdsDropdownItem[];\n }\n\n updated() {\n if (this._breakpointReached) {\n this._copyTextToMenu();\n this._resetDropdownMenu();\n this._hideDropdownMenuItems();\n }\n }\n\n private _handleSlotChange(e: Event) {\n const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n items.forEach(item => {\n item.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent.bind(this));\n\n const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n dropdownItem.classList.add(\"mainnav-dropdown-link\");\n\n const link = item.shadowRoot?.querySelector(\"a\") || item.querySelector(\"a\");\n link.tabIndex = -1;\n if (dropdownItem.classList.contains(\"disabled\")) {\n link.setAttribute(\"href\", \"javascript:void(0)\");\n link.setAttribute(\"tabindex\", \"-1\");\n } else {\n link.addEventListener(\"click\", (e: Event) => {\n const target = e.target as HTMLElement;\n const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n mainnav.hide();\n });\n }\n });\n }\n\n private _handleDesktopSlotChange(e: Event) {\n const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n items.forEach(item => {\n const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n dropdownItem.classList.remove(\"mainnav-dropdown-link\");\n\n const slottedItem = (item.shadowRoot.querySelector(\".dropdown-item slot\") as HTMLSlotElement).assignedElements({\n flatten: true\n });\n slottedItem.forEach(item => {\n if (dropdownItem.classList.contains(\"disabled\")) {\n item.setAttribute(\"href\", \"javascript:void(0)\");\n item.setAttribute(\"tabindex\", \"-1\");\n }\n });\n });\n }\n\n private _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n if (!this._breakpointReached) {\n return;\n }\n\n const slottedItems = this.defaultSlotItems.filter(item => !item.hasAttribute(\"disabled\"));\n const items = [this.menuHeaderButton, ...slottedItems];\n const itemLength = items.length;\n if (itemLength === 0) {\n return;\n }\n\n const firstItem = items[0];\n const lastItem = items[itemLength - 1].shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n let activeElement = document.activeElement as HTMLElement;\n if (activeElement === this) {\n activeElement = this.shadowRoot.activeElement as HTMLElement;\n }\n\n switch (e.key) {\n case \"Tab\": {\n if (e.shiftKey) {\n if (activeElement === firstItem) {\n e.preventDefault();\n setTimeout(() => {\n lastItem.focus();\n }, 0);\n }\n } else {\n const activeShadowElement = activeElement.shadowRoot\n ? activeElement.shadowRoot.querySelector(\".dropdown-item\")\n : null;\n if (activeShadowElement && activeShadowElement === lastItem) {\n e.preventDefault();\n firstItem.focus();\n }\n }\n break;\n }\n default:\n break;\n }\n }\n\n private _copyTextToMenu() {\n this.menuHeaderText.textContent = this.togglerNodes[0].textContent;\n }\n\n private _handleTogglerSlotChange() {\n // no-op: toggler slot change handled by _copyTextToMenu in mobile view\n }\n\n private _hideDropdownMenuItems() {\n this.dropdownItems.style.display = \"none\";\n this.dropdownItems.setAttribute(\"aria-hidden\", \"true\");\n }\n\n private _resetDropdownMenu(): Promise<void> {\n const navbarBody = this._getNavbarBody();\n if (!navbarBody) return Promise.resolve();\n\n return new Promise(resolve => {\n const onEnd = (event: TransitionEvent) => {\n if (event.propertyName === \"transform\") {\n navbarBody.removeEventListener(\"transitionend\", onEnd);\n resolve();\n }\n };\n\n const hasTransition = getComputedStyle(navbarBody).transitionProperty.includes(\"transform\");\n\n if (hasTransition) {\n navbarBody.addEventListener(\"transitionend\", onEnd);\n navbarBody.style.removeProperty(\"transform\");\n } else {\n navbarBody.style.removeProperty(\"transform\");\n resolve();\n }\n });\n }\n\n private _handleKeyboardOpen(event: KeyboardEvent) {\n if (this.disabled) {\n return;\n }\n\n if (event.key === ENTER || event.key === SPACE) {\n event.preventDefault();\n this._openMenu();\n }\n }\n\n private _getNavbarBody() {\n const mainNav = document.querySelector(\"sgds-mainnav\") as HTMLElement | null;\n\n if (!mainNav?.shadowRoot) {\n console.warn(\"sgds-mainnav or its shadowRoot not found\");\n return;\n }\n\n const navbarBody = mainNav.shadowRoot.querySelector(\".navbar-body\") as HTMLElement;\n if (!navbarBody) {\n console.warn(\".navbar-body not found in sgds-mainnav\");\n return;\n }\n\n return navbarBody;\n }\n\n private _openMenu() {\n const navbarBody = this._getNavbarBody();\n navbarBody.style.transform = \"translateX(-100%)\";\n this.dropdownItems.style.removeProperty(\"display\");\n this.dropdownItems.setAttribute(\"aria-hidden\", \"false\");\n setTimeout(() => {\n this.menuHeaderButton.focus();\n }, 50);\n }\n\n private _handleHeaderKeyboardEvent(event: KeyboardEvent) {\n switch (event.key) {\n case TAB: {\n this._handleKeyboardMenuItemsEvent(event);\n break;\n }\n case ENTER:\n case SPACE: {\n event.preventDefault();\n this._closeMenu();\n break;\n }\n default:\n break;\n }\n }\n\n private async _closeMenu() {\n await this._resetDropdownMenu();\n this._hideDropdownMenuItems();\n this.navLink.focus();\n }\n\n render() {\n const mobileView = html`\n <button\n class=\"${classMap({\n \"nav-link\": true,\n active: this.active,\n disabled: this.disabled\n })}\"\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-label=${ifDefined(this.ariaLabel)}\n ?disabled=${this.disabled}\n @click=${this._openMenu}\n @keydown=${this._handleKeyboardOpen}\n >\n <span class=\"toggler-wrapper\"><slot name=\"toggler\" @slotchange=${this._handleTogglerSlotChange}></slot></span>\n <sgds-icon name=\"chevron-right\" size=\"md\"></sgds-icon>\n </button>\n <div class=\"dropdown-items\">\n <a tabindex=\"0\" role=\"button\" @click=${this._closeMenu} @keydown=${this._handleHeaderKeyboardEvent}>\n <sgds-icon name=\"chevron-left\" size=\"md\"></sgds-icon>\n <span></span>\n </a>\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n `;\n\n const desktopView = html`<sgds-dropdown\n .floatingOpts=${{\n middleware: [offset(0)]\n }}\n ?disabled=${this.disabled}\n >\n <button\n class=\"${classMap({\n \"nav-link\": true,\n active: this.active,\n disabled: this.disabled\n })}\"\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-label=${ifDefined(this.ariaLabel)}\n id=${this.togglerId}\n ?disabled=${this.disabled}\n slot=\"toggler\"\n >\n <span class=\"toggler-wrapper\"><slot name=\"toggler\" @slotchange=${this._handleTogglerSlotChange}></slot></span>\n <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n </button>\n <slot @slotchange=${this._handleDesktopSlotChange}></slot>\n </sgds-dropdown>`;\n\n return this._breakpointReached ? mobileView : desktopView;\n }\n}\n\nexport default SgdsMainnavDropdown;\n"],"mappings":"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"}
|
|
@@ -87,7 +87,9 @@ var SgdsMainnav = class extends NavElement {
|
|
|
87
87
|
<div class="navbar ${this._expandClass()}">
|
|
88
88
|
${this.brandHref ? html`<a class="navbar-brand" href=${sanitizeHref(this.brandHref) ?? ""}>
|
|
89
89
|
<slot name="brand"></slot>
|
|
90
|
-
</a>` : html`<
|
|
90
|
+
</a>` : html`<div class="navbar-brand">
|
|
91
|
+
<slot name="brand" @slotchange=${this._handleBrandSlotChange}></slot>
|
|
92
|
+
</div>`}
|
|
91
93
|
<div class="navbar-body navbar-collapse" id=${this.collapseId}>
|
|
92
94
|
<div class="navbar-nav navbar-nav-scroll">
|
|
93
95
|
<slot @slotchange=${this._handleDefaultSlotChange}></slot>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-mainnav.js","names":["mainnavStyle"],"sources":["../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport NavElement from \"../../base/nav-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\n\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot profile - Profile slot positioned at the far right in desktop. In mobile, moves into the collapsed menu as the first item.\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n */\nexport class SgdsMainnav extends NavElement {\n static styles = [...NavElement.styles, mainnavStyle];\n\n @provide({ context: MainnavBreakpointContext })\n @state()\n private _breakpointReached = false;\n\n @provide({ context: MainnavExpandedContext })\n @state()\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n private _expanded = false;\n\n /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */\n @property({ type: Boolean }) hasNonCollapsibleSlot = false;\n\n /** Used only for SSR to indicate the presence of the `profile` slot. */\n @property({ type: Boolean }) hasProfileSlot = false;\n\n /** When true, removes max-width constraint to allow content to stretch full screen width */\n @property({ type: Boolean, reflect: true })\n fluid = false;\n\n @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n /** @internal */\n get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n | SgdsMainnavItem[]\n | SgdsMainnavDropdown[];\n }\n\n /** @internal */\n get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n | SgdsMainnavItem[]\n | SgdsMainnavDropdown[];\n }\n\n private readonly hasSlotController = new HasSlotController(this, \"non-collapsible\", \"profile\");\n\n updated() {\n if (!this.hasNonCollapsibleSlot) this.hasNonCollapsibleSlot = this.hasSlotController.test(\"non-collapsible\");\n if (!this.hasProfileSlot) this.hasProfileSlot = this.hasSlotController.test(\"profile\");\n // Sync expanded state to context\n this._expanded = this.expanded;\n }\n\n protected _onBreakpointReached(reached: boolean): void {\n this._breakpointReached = reached;\n }\n\n protected _isBreakpointReached(): boolean {\n return this._breakpointReached;\n }\n\n private _handleDefaultSlotChange(e: Event) {\n const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n childElements.forEach(el => {\n el.setAttribute(\"expand\", this.expand);\n });\n }\n\n private _handleSlotChange(e: Event) {\n const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n childElements.forEach(e => {\n e.setAttribute(\"name\", e.tagName.toLowerCase());\n e.setAttribute(\"expand\", this.expand);\n });\n }\n\n private _handleProfileSlotChange(e: Event) {\n const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n this.hasProfileSlot = childElements.length > 0;\n childElements.forEach(el => {\n el.setAttribute(\"expand\", this.expand);\n });\n }\n\n render() {\n this.breakpointReached =\n window.innerWidth <\n (this.expand === \"always\"\n ? -1\n : this.expand === \"never\"\n ? Infinity\n : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[this.expand]);\n\n return html`\n <nav aria-label=\"Main navigation\">\n <div class=\"navbar ${this._expandClass()}\">\n ${this.brandHref\n ? html`<a class=\"navbar-brand\" href=${sanitizeHref(this.brandHref) ?? \"\"}>\n <slot name=\"brand\"></slot>\n </a>`\n : html`<slot name=\"brand\" @slotchange=${this._handleBrandSlotChange}></slot>`}\n <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n <div class=\"navbar-nav navbar-nav-scroll\">\n <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n <slot\n name=\"end\"\n class=${classMap({ \"slot-end\": !this.breakpointReached })}\n @slotchange=${this._handleSlotChange}\n ></slot>\n </div>\n </div>\n <div\n class=${classMap({\n \"navbar-end\": true,\n \"navbar-end--empty\": !this.hasNonCollapsibleSlot && !this.hasProfileSlot && !this.breakpointReached\n })}\n >\n <slot name=\"non-collapsible\" class=${classMap({ \"slot-empty\": !this.hasNonCollapsibleSlot })}></slot>\n <slot\n name=\"profile\"\n class=${classMap({ \"slot-empty\": !this.hasProfileSlot })}\n @slotchange=${this._handleProfileSlotChange}\n ></slot>\n ${this._renderToggler()}\n </div>\n </div>\n </nav>\n `;\n }\n}\n\nexport default SgdsMainnav;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAa,cAAb,cAAiC,WAAW;;;EAKb,KAAA,qBAAA;EAKT,KAAA,YAAA;EAGiC,KAAA,wBAAA;EAGP,KAAA,iBAAA;EAItC,KAAA,QAAA;EAoB6B,KAAA,oBAAA,IAAI,kBAAkB,MAAM,mBAAmB,SAAS;;;EAvC7E,KAAA,SAAA,CAAC,GAAG,WAAW,QAAQA,QAAY;;;CA0BnD,IAAI,mBAA8D;EAChE,OAAO,CAAC,GAAI,KAAK,gBAAgB,CAAC,CAAE,CAAC,CAAC,QAAQ,SAAsB,OAAO,KAAK,YAAY,WAAW;CAGzG;;CAGA,IAAI,eAA0D;EAC5D,OAAO,CAAC,GAAI,KAAK,YAAY,CAAC,CAAE,CAAC,CAAC,QAAQ,SAAsB,OAAO,KAAK,YAAY,WAAW;CAGrG;CAIA,UAAU;EACR,IAAI,CAAC,KAAK,uBAAuB,KAAK,wBAAwB,KAAK,kBAAkB,KAAK,iBAAiB;EAC3G,IAAI,CAAC,KAAK,gBAAgB,KAAK,iBAAiB,KAAK,kBAAkB,KAAK,SAAS;EAErF,KAAK,YAAY,KAAK;CACxB;CAEA,qBAA+B,SAAwB;EACrD,KAAK,qBAAqB;CAC5B;CAEA,uBAA0C;EACxC,OAAO,KAAK;CACd;CAEA,yBAAiC,GAAU;EAEzC,EADyB,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CACzE,CAAC,CAAC,SAAQ,OAAM;GAC1B,GAAG,aAAa,UAAU,KAAK,MAAM;EACvC,CAAC;CACH;CAEA,kBAA0B,GAAU;EAElC,EADyB,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CACzE,CAAC,CAAC,SAAQ,MAAK;GACzB,EAAE,aAAa,QAAQ,EAAE,QAAQ,YAAY,CAAC;GAC9C,EAAE,aAAa,UAAU,KAAK,MAAM;EACtC,CAAC;CACH;CAEA,yBAAiC,GAAU;EACzC,MAAM,gBAAiB,EAAE,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CAAC;EACtF,KAAK,iBAAiB,cAAc,SAAS;EAC7C,cAAc,SAAQ,OAAM;GAC1B,GAAG,aAAa,UAAU,KAAK,MAAM;EACvC,CAAC;CACH;CAEA,SAAS;EACP,KAAK,oBACH,OAAO,cACN,KAAK,WAAW,WACb,KACA,KAAK,WAAW,UAChB,WACA;GAAE,IAAI;GAAK,IAAI;GAAK,IAAI;GAAM,IAAI;GAAM,KAAK;EAAK,EAAE,KAAK;EAE/D,OAAO,IAAI;;6BAEc,KAAK,aAAa,EAAE;YACrC,KAAK,YACH,IAAI,gCAAgC,aAAa,KAAK,SAAS,KAAK,GAAG;;sBAGvE,IAAI,
|
|
1
|
+
{"version":3,"file":"sgds-mainnav.js","names":["mainnavStyle"],"sources":["../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport NavElement from \"../../base/nav-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\n\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot profile - Profile slot positioned at the far right in desktop. In mobile, moves into the collapsed menu as the first item.\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n */\nexport class SgdsMainnav extends NavElement {\n static styles = [...NavElement.styles, mainnavStyle];\n\n @provide({ context: MainnavBreakpointContext })\n @state()\n private _breakpointReached = false;\n\n @provide({ context: MainnavExpandedContext })\n @state()\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n private _expanded = false;\n\n /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */\n @property({ type: Boolean }) hasNonCollapsibleSlot = false;\n\n /** Used only for SSR to indicate the presence of the `profile` slot. */\n @property({ type: Boolean }) hasProfileSlot = false;\n\n /** When true, removes max-width constraint to allow content to stretch full screen width */\n @property({ type: Boolean, reflect: true })\n fluid = false;\n\n @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n /** @internal */\n get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n | SgdsMainnavItem[]\n | SgdsMainnavDropdown[];\n }\n\n /** @internal */\n get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n | SgdsMainnavItem[]\n | SgdsMainnavDropdown[];\n }\n\n private readonly hasSlotController = new HasSlotController(this, \"non-collapsible\", \"profile\");\n\n updated() {\n if (!this.hasNonCollapsibleSlot) this.hasNonCollapsibleSlot = this.hasSlotController.test(\"non-collapsible\");\n if (!this.hasProfileSlot) this.hasProfileSlot = this.hasSlotController.test(\"profile\");\n // Sync expanded state to context\n this._expanded = this.expanded;\n }\n\n protected _onBreakpointReached(reached: boolean): void {\n this._breakpointReached = reached;\n }\n\n protected _isBreakpointReached(): boolean {\n return this._breakpointReached;\n }\n\n private _handleDefaultSlotChange(e: Event) {\n const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n childElements.forEach(el => {\n el.setAttribute(\"expand\", this.expand);\n });\n }\n\n private _handleSlotChange(e: Event) {\n const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n childElements.forEach(e => {\n e.setAttribute(\"name\", e.tagName.toLowerCase());\n e.setAttribute(\"expand\", this.expand);\n });\n }\n\n private _handleProfileSlotChange(e: Event) {\n const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n this.hasProfileSlot = childElements.length > 0;\n childElements.forEach(el => {\n el.setAttribute(\"expand\", this.expand);\n });\n }\n\n render() {\n this.breakpointReached =\n window.innerWidth <\n (this.expand === \"always\"\n ? -1\n : this.expand === \"never\"\n ? Infinity\n : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[this.expand]);\n\n return html`\n <nav aria-label=\"Main navigation\">\n <div class=\"navbar ${this._expandClass()}\">\n ${this.brandHref\n ? html`<a class=\"navbar-brand\" href=${sanitizeHref(this.brandHref) ?? \"\"}>\n <slot name=\"brand\"></slot>\n </a>`\n : html`<div class=\"navbar-brand\">\n <slot name=\"brand\" @slotchange=${this._handleBrandSlotChange}></slot>\n </div>`}\n <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n <div class=\"navbar-nav navbar-nav-scroll\">\n <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n <slot\n name=\"end\"\n class=${classMap({ \"slot-end\": !this.breakpointReached })}\n @slotchange=${this._handleSlotChange}\n ></slot>\n </div>\n </div>\n <div\n class=${classMap({\n \"navbar-end\": true,\n \"navbar-end--empty\": !this.hasNonCollapsibleSlot && !this.hasProfileSlot && !this.breakpointReached\n })}\n >\n <slot name=\"non-collapsible\" class=${classMap({ \"slot-empty\": !this.hasNonCollapsibleSlot })}></slot>\n <slot\n name=\"profile\"\n class=${classMap({ \"slot-empty\": !this.hasProfileSlot })}\n @slotchange=${this._handleProfileSlotChange}\n ></slot>\n ${this._renderToggler()}\n </div>\n </div>\n </nav>\n `;\n }\n}\n\nexport default SgdsMainnav;\n"],"mappings":"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"}
|
|
@@ -2365,7 +2365,7 @@ let Ue=(e,t,n)=>(n.configurable=!0,n.enumerable=!0,Reflect.decorate&&typeof t!=`
|
|
|
2365
2365
|
clip-rule="evenodd"
|
|
2366
2366
|
/>
|
|
2367
2367
|
</svg>
|
|
2368
|
-
`}));let Sh={announcement:()=>Promise.resolve().then(()=>(sr(),ar)),archive:()=>Promise.resolve().then(()=>(ur(),cr)),"arrow-bar-down":()=>Promise.resolve().then(()=>(pr(),dr)),"arrow-bar-left":()=>Promise.resolve().then(()=>(gr(),mr)),"arrow-bar-right":()=>Promise.resolve().then(()=>(yr(),_r)),"arrow-bar-up":()=>Promise.resolve().then(()=>(Sr(),br)),"arrow-circle-down":()=>Promise.resolve().then(()=>(Tr(),Cr)),"arrow-circle-left":()=>Promise.resolve().then(()=>(Or(),Er)),"arrow-circle-right":()=>Promise.resolve().then(()=>(jr(),kr)),"arrow-circle-up":()=>Promise.resolve().then(()=>(Pr(),Mr)),"arrow-clockwise":()=>Promise.resolve().then(()=>(Lr(),Fr)),"arrow-down":()=>Promise.resolve().then(()=>(Br(),Rr)),"arrow-left":()=>Promise.resolve().then(()=>(Ur(),Vr)),"arrow-repeat":()=>Promise.resolve().then(()=>(Kr(),Wr)),"arrow-right":()=>Promise.resolve().then(()=>(Yr(),qr)),"arrow-square-down":()=>Promise.resolve().then(()=>(Qr(),Xr)),"arrow-square-left":()=>Promise.resolve().then(()=>(ti(),$r)),"arrow-square-right":()=>Promise.resolve().then(()=>(ii(),ni)),"arrow-square-up":()=>Promise.resolve().then(()=>(si(),ai)),"arrow-up":()=>Promise.resolve().then(()=>(ui(),ci)),"bank-fill":()=>Promise.resolve().then(()=>(pi(),di)),"bell-slash":()=>Promise.resolve().then(()=>(gi(),mi)),bell:()=>Promise.resolve().then(()=>(yi(),_i)),"bi-funnel":()=>Promise.resolve().then(()=>(Si(),bi)),"bookmark-fill":()=>Promise.resolve().then(()=>(Ti(),Ci)),bookmark:()=>Promise.resolve().then(()=>(Oi(),Ei)),"box-arrow-up-right":()=>Promise.resolve().then(()=>(ji(),ki)),"box-seam":()=>Promise.resolve().then(()=>(Pi(),Mi)),building:()=>Promise.resolve().then(()=>(Li(),Fi)),bus:()=>Promise.resolve().then(()=>(Bi(),Ri)),calculator:()=>Promise.resolve().then(()=>(Ui(),Vi)),"calendar-check":()=>Promise.resolve().then(()=>(Ki(),Wi)),"calendar-heart":()=>Promise.resolve().then(()=>(Yi(),qi)),"calendar-x":()=>Promise.resolve().then(()=>(Qi(),Xi)),calendar:()=>Promise.resolve().then(()=>(ta(),$i)),camera:()=>Promise.resolve().then(()=>(ia(),na)),car:()=>Promise.resolve().then(()=>(sa(),aa)),"chat-dots":()=>Promise.resolve().then(()=>(ua(),ca)),"chat-left-text":()=>Promise.resolve().then(()=>(pa(),da)),chat:()=>Promise.resolve().then(()=>(ga(),ma)),"check-circle-fill":()=>Promise.resolve().then(()=>(ya(),_a)),"check-circle":()=>Promise.resolve().then(()=>(Sa(),ba)),check:()=>Promise.resolve().then(()=>(Ta(),Ca)),"chevron-down":()=>Promise.resolve().then(()=>(Oa(),Ea)),"chevron-left":()=>Promise.resolve().then(()=>(ja(),ka)),"chevron-right":()=>Promise.resolve().then(()=>(Pa(),Ma)),"chevron-selector-vertical":()=>Promise.resolve().then(()=>(La(),Fa)),"chevron-up":()=>Promise.resolve().then(()=>(Ba(),Ra)),clock:()=>Promise.resolve().then(()=>(Ua(),Va)),"cloud-check":()=>Promise.resolve().then(()=>(Ka(),Wa)),"cloud-download":()=>Promise.resolve().then(()=>(Ya(),qa)),"cloud-upload":()=>Promise.resolve().then(()=>(Qa(),Xa)),cloud:()=>Promise.resolve().then(()=>(to(),$a)),"code-square":()=>Promise.resolve().then(()=>(io(),no)),"coins-hand":()=>Promise.resolve().then(()=>(so(),ao)),compass:()=>Promise.resolve().then(()=>(uo(),co)),copy:()=>Promise.resolve().then(()=>(mo(),fo)),"cpu-chip-ai":()=>Promise.resolve().then(()=>(_o(),ho)),cross:()=>Promise.resolve().then(()=>(bo(),vo)),"cursor-fill":()=>Promise.resolve().then(()=>(Co(),xo)),cursor:()=>Promise.resolve().then(()=>(Eo(),wo)),"dash-circle":()=>Promise.resolve().then(()=>(ko(),Do)),"dash-square":()=>Promise.resolve().then(()=>(Mo(),Ao)),dash:()=>Promise.resolve().then(()=>(Fo(),No)),database:()=>Promise.resolve().then(()=>(Ro(),Io)),dataflow:()=>Promise.resolve().then(()=>(Vo(),zo)),download:()=>Promise.resolve().then(()=>(Wo(),Ho)),edit:()=>Promise.resolve().then(()=>(qo(),Go)),"exclamation-circle-fill":()=>Promise.resolve().then(()=>(Xo(),Jo)),"exclamation-circle":()=>Promise.resolve().then(()=>($o(),Zo)),"exclamation-triangle-fill":()=>Promise.resolve().then(()=>(ns(),es)),"exclamation-triangle":()=>Promise.resolve().then(()=>(as(),rs)),exclamation:()=>Promise.resolve().then(()=>(cs(),os)),"eye-fill":()=>Promise.resolve().then(()=>(ds(),ls)),"eye-slash-fill":()=>Promise.resolve().then(()=>(ms(),fs)),"eye-slash":()=>Promise.resolve().then(()=>(_s(),hs)),eye:()=>Promise.resolve().then(()=>(bs(),vs)),"face-smile-fill":()=>Promise.resolve().then(()=>(Cs(),xs)),"face-smile":()=>Promise.resolve().then(()=>(Es(),ws)),facebook:()=>Promise.resolve().then(()=>(ks(),Ds)),"file-earmark-text":()=>Promise.resolve().then(()=>(Ms(),As)),"file-pdf":()=>Promise.resolve().then(()=>(Fs(),Ns)),"file-plus":()=>Promise.resolve().then(()=>(Rs(),Is)),"file-text":()=>Promise.resolve().then(()=>(Vs(),zs)),file:()=>Promise.resolve().then(()=>(Ws(),Hs)),files:()=>Promise.resolve().then(()=>(qs(),Gs)),fingerprint:()=>Promise.resolve().then(()=>(Xs(),Js)),flash:()=>Promise.resolve().then(()=>($s(),Zs)),"folder-check":()=>Promise.resolve().then(()=>(nc(),ec)),"folder-minus":()=>Promise.resolve().then(()=>(ac(),rc)),"folder-plus":()=>Promise.resolve().then(()=>(cc(),oc)),folder:()=>Promise.resolve().then(()=>(dc(),lc)),gear:()=>Promise.resolve().then(()=>(mc(),fc)),"geo-alt":()=>Promise.resolve().then(()=>(_c(),hc)),"geo-fill":()=>Promise.resolve().then(()=>(bc(),vc)),geo:()=>Promise.resolve().then(()=>(Cc(),xc)),"globe-alt":()=>Promise.resolve().then(()=>(Ec(),wc)),globe:()=>Promise.resolve().then(()=>(kc(),Dc)),google:()=>Promise.resolve().then(()=>(Mc(),Ac)),"grid-alt":()=>Promise.resolve().then(()=>(Fc(),Nc)),"grid-fill":()=>Promise.resolve().then(()=>(Rc(),Ic)),"hand-thumbs-down":()=>Promise.resolve().then(()=>(Vc(),zc)),"hand-thumbs-up":()=>Promise.resolve().then(()=>(Wc(),Hc)),"hard-drive":()=>Promise.resolve().then(()=>(qc(),Gc)),heart:()=>Promise.resolve().then(()=>(Xc(),Jc)),"house-door":()=>Promise.resolve().then(()=>($c(),Zc)),house:()=>Promise.resolve().then(()=>(nl(),el)),image:()=>Promise.resolve().then(()=>(al(),rl)),"in-box":()=>Promise.resolve().then(()=>(cl(),ol)),"info-circle-fill":()=>Promise.resolve().then(()=>(dl(),ll)),"info-circle":()=>Promise.resolve().then(()=>(ml(),fl)),instagram:()=>Promise.resolve().then(()=>(_l(),hl)),key:()=>Promise.resolve().then(()=>(bl(),vl)),"laptop-gear":()=>Promise.resolve().then(()=>(Cl(),xl)),laptop:()=>Promise.resolve().then(()=>(El(),wl)),layers:()=>Promise.resolve().then(()=>(kl(),Dl)),"layout-text-window-reverse":()=>Promise.resolve().then(()=>(Ml(),Al)),"layout-text-window":()=>Promise.resolve().then(()=>(Fl(),Nl)),layout:()=>Promise.resolve().then(()=>(Rl(),Il)),"life-buoy":()=>Promise.resolve().then(()=>(Vl(),zl)),lightbulb:()=>Promise.resolve().then(()=>(Wl(),Hl)),link:()=>Promise.resolve().then(()=>(ql(),Gl)),linkedin:()=>Promise.resolve().then(()=>(Xl(),Jl)),list:()=>Promise.resolve().then(()=>($l(),Zl)),"lock-fill":()=>Promise.resolve().then(()=>(nu(),eu)),lock:()=>Promise.resolve().then(()=>(au(),ru)),login:()=>Promise.resolve().then(()=>(cu(),ou)),logout:()=>Promise.resolve().then(()=>(du(),lu)),luggage:()=>Promise.resolve().then(()=>(mu(),fu)),"mail-open":()=>Promise.resolve().then(()=>(_u(),hu)),mail:()=>Promise.resolve().then(()=>(bu(),vu)),map:()=>Promise.resolve().then(()=>(Cu(),xu)),meetup:()=>Promise.resolve().then(()=>(Eu(),wu)),menu:()=>Promise.resolve().then(()=>(ku(),Du)),microphone:()=>Promise.resolve().then(()=>(Mu(),Au)),monitor:()=>Promise.resolve().then(()=>(Fu(),Nu)),moon:()=>Promise.resolve().then(()=>(Ru(),Iu)),move:()=>Promise.resolve().then(()=>(Vu(),zu)),paperclip:()=>Promise.resolve().then(()=>(Wu(),Hu)),passcode:()=>Promise.resolve().then(()=>(qu(),Gu)),passport:()=>Promise.resolve().then(()=>(Xu(),Ju)),pause:()=>Promise.resolve().then(()=>($u(),Zu)),pencil:()=>Promise.resolve().then(()=>(nd(),ed)),"pending-circle":()=>Promise.resolve().then(()=>(ad(),rd)),"person-dash":()=>Promise.resolve().then(()=>(cd(),od)),"person-plus":()=>Promise.resolve().then(()=>(dd(),ld)),"person-x":()=>Promise.resolve().then(()=>(md(),fd)),person:()=>Promise.resolve().then(()=>(_d(),hd)),phone:()=>Promise.resolve().then(()=>(bd(),vd)),"pin-map-fill":()=>Promise.resolve().then(()=>(Cd(),xd)),pin:()=>Promise.resolve().then(()=>(Ed(),wd)),placeholder:()=>Promise.resolve().then(()=>(kd(),Dd)),plane:()=>Promise.resolve().then(()=>(Md(),Ad)),play:()=>Promise.resolve().then(()=>(Fd(),Nd)),"plus-circle":()=>Promise.resolve().then(()=>(Rd(),Id)),"plus-square":()=>Promise.resolve().then(()=>(Vd(),zd)),plus:()=>Promise.resolve().then(()=>(Wd(),Hd)),printer:()=>Promise.resolve().then(()=>(qd(),Gd)),"question-circle":()=>Promise.resolve().then(()=>(Xd(),Jd)),rocket:()=>Promise.resolve().then(()=>($d(),Zd)),save:()=>Promise.resolve().then(()=>(nf(),ef)),search:()=>Promise.resolve().then(()=>(of(),rf)),send:()=>Promise.resolve().then(()=>(lf(),sf)),"sg-crest":()=>Promise.resolve().then(()=>(ff(),uf)),share:()=>Promise.resolve().then(()=>(hf(),pf)),"shield-tick":()=>Promise.resolve().then(()=>(vf(),gf)),"sidebar-collapse":()=>Promise.resolve().then(()=>(xf(),yf)),"sidebar-expand":()=>Promise.resolve().then(()=>(wf(),Sf)),"slash-circle":()=>Promise.resolve().then(()=>(Df(),Tf)),"slash-divider":()=>Promise.resolve().then(()=>(Af(),Of)),sliders:()=>Promise.resolve().then(()=>(Nf(),jf)),"sort-ascending":()=>Promise.resolve().then(()=>(If(),Pf)),"sort-descending":()=>Promise.resolve().then(()=>(zf(),Lf)),speedometer:()=>Promise.resolve().then(()=>(Hf(),Bf)),"star-ai":()=>Promise.resolve().then(()=>(Gf(),Uf)),"star-fill":()=>Promise.resolve().then(()=>(Jf(),Kf)),star:()=>Promise.resolve().then(()=>(Zf(),Yf)),stoplights:()=>Promise.resolve().then(()=>(ep(),Qf)),sun:()=>Promise.resolve().then(()=>(rp(),tp)),"switch-horizontal":()=>Promise.resolve().then(()=>(op(),ip)),"switch-vertical":()=>Promise.resolve().then(()=>(lp(),sp)),tablet:()=>Promise.resolve().then(()=>(fp(),up)),telegram:()=>Promise.resolve().then(()=>(hp(),pp)),telephone:()=>Promise.resolve().then(()=>(vp(),gp)),"three-dots-vertical":()=>Promise.resolve().then(()=>(xp(),yp)),"three-dots":()=>Promise.resolve().then(()=>(wp(),Sp)),ticket:()=>Promise.resolve().then(()=>(Dp(),Tp)),"toggle-off":()=>Promise.resolve().then(()=>(Ap(),Op)),"toggle-on":()=>Promise.resolve().then(()=>(Np(),jp)),train:()=>Promise.resolve().then(()=>(Ip(),Pp)),translate:()=>Promise.resolve().then(()=>(zp(),Lp)),trash:()=>Promise.resolve().then(()=>(Hp(),Bp)),"trend-down":()=>Promise.resolve().then(()=>(Gp(),Up)),"trend-up":()=>Promise.resolve().then(()=>(Jp(),Kp)),truck:()=>Promise.resolve().then(()=>(Zp(),Yp)),"twitter-x":()=>Promise.resolve().then(()=>(em(),Qp)),unlock:()=>Promise.resolve().then(()=>(rm(),tm)),upload:()=>Promise.resolve().then(()=>(om(),im)),"user-check":()=>Promise.resolve().then(()=>(lm(),sm)),"user-circle":()=>Promise.resolve().then(()=>(fm(),um)),"user-pause":()=>Promise.resolve().then(()=>(hm(),pm)),"user-square":()=>Promise.resolve().then(()=>(vm(),gm)),users:()=>Promise.resolve().then(()=>(xm(),ym)),"video-recorder":()=>Promise.resolve().then(()=>(wm(),Sm)),"volume-max":()=>Promise.resolve().then(()=>(Dm(),Tm)),"volume-x":()=>Promise.resolve().then(()=>(Am(),Om)),"window-dash":()=>Promise.resolve().then(()=>(Nm(),jm)),"window-desktop":()=>Promise.resolve().then(()=>(Im(),Pm)),"window-dock":()=>Promise.resolve().then(()=>(zm(),Lm)),"window-fullscreen":()=>Promise.resolve().then(()=>(Hm(),Bm)),"window-plus":()=>Promise.resolve().then(()=>(Gm(),Um)),"window-sidebar":()=>Promise.resolve().then(()=>(Jm(),Km)),"window-split":()=>Promise.resolve().then(()=>(Zm(),Ym)),"window-stack":()=>Promise.resolve().then(()=>(eh(),Qm)),"window-x":()=>Promise.resolve().then(()=>(rh(),th)),window:()=>Promise.resolve().then(()=>(oh(),ih)),"xcircle-fill":()=>Promise.resolve().then(()=>(lh(),sh)),xcircle:()=>Promise.resolve().then(()=>(fh(),uh)),youtube:()=>Promise.resolve().then(()=>(hh(),ph)),"zoom-in":()=>Promise.resolve().then(()=>(vh(),gh)),"zoom-out":()=>Promise.resolve().then(()=>(xh(),yh))};L();var Ch=l`:host{color:inherit;display:inline-flex;vertical-align:bottom}:host(.icon-left){margin-right:.25rem}:host(.icon-right){margin-left:.25rem}:host([size=xs]) svg{height:var(--sgds-icon-size-xs);width:var(--sgds-icon-size-xs)}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;L();let wh=/* @__PURE__ */ new Map;var Th=class extends B{constructor(...e){super(...e),this.size=`lg`}static{this.styles=[...B.styles,Ch]}willUpdate(e){e.has(`name`)&&this._loadIcon(this.name)}async _loadIcon(e){if(!e){this._icon=void 0;return}if(wh.has(e)){this._icon=wh.get(e);return}let t=Sh[e];if(!t){console.warn(`Icon not found: ${e}`),this._icon=void 0;return}try{let n=await t();wh.set(e,n.default),this._icon=n.default}catch{console.warn(`Failed to load icon: ${e}`),this._icon=void 0}}updated(){let e=this.shadowRoot?.querySelector(`svg`);e&&(this.ariaLabel?(e.removeAttribute(`aria-hidden`),e.setAttribute(`aria-label`,this.ariaLabel)):(e.removeAttribute(`aria-label`),e.setAttribute(`aria-hidden`,`true`)))}render(){return this._icon??M}};z([R({type:String,reflect:!0})],Th.prototype,`name`,void 0),z([R({type:String,reflect:!0})],Th.prototype,`size`,void 0),z([R({type:String})],Th.prototype,`ariaLabel`,void 0),z([He()],Th.prototype,`_icon`,void 0),L();var Eh=l`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.dropdown-item.readonly{cursor:default}.dropdown-item.readonly:focus,.dropdown-item.readonly:focus-visible,.dropdown-item.readonly:hover{background-color:var(--sgds-bg-transparent);outline:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}::slotted(a),::slotted(sgds-checkbox){flex:1;margin:calc(var(--sgds-padding-sm)*-1) calc(var(--sgds-padding-lg)*-1);padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.dropdown-item.mainnav-dropdown-link{padding:var(--sgds-padding-none)}.dropdown-item.mainnav-dropdown-link ::slotted(*){box-sizing:border-box;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}@media screen and (min-width:1024px){.dropdown-item.mainnav-dropdown-link ::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;L();var Dh=class extends B{constructor(...e){super(...e),this.active=!1,this.disabled=!1,this.readonly=!1,this.ariaLabel=``}static{this.styles=[nr,Eh]}static{this.dependencies={"sgds-icon":Th}}connectedCallback(){super.connectedCallback(),this.addEventListener(`keydown`,e=>{e.key===`Enter`&&this.anchor.length>0&&this.anchor[0].click()}),this.setAttribute(`role`,`menuitem`),this.setAttribute(`aria-disabled`,`${this.disabled}`)}render(){return A`
|
|
2368
|
+
`}));let Sh={announcement:()=>Promise.resolve().then(()=>(sr(),ar)),archive:()=>Promise.resolve().then(()=>(ur(),cr)),"arrow-bar-down":()=>Promise.resolve().then(()=>(pr(),dr)),"arrow-bar-left":()=>Promise.resolve().then(()=>(gr(),mr)),"arrow-bar-right":()=>Promise.resolve().then(()=>(yr(),_r)),"arrow-bar-up":()=>Promise.resolve().then(()=>(Sr(),br)),"arrow-circle-down":()=>Promise.resolve().then(()=>(Tr(),Cr)),"arrow-circle-left":()=>Promise.resolve().then(()=>(Or(),Er)),"arrow-circle-right":()=>Promise.resolve().then(()=>(jr(),kr)),"arrow-circle-up":()=>Promise.resolve().then(()=>(Pr(),Mr)),"arrow-clockwise":()=>Promise.resolve().then(()=>(Lr(),Fr)),"arrow-down":()=>Promise.resolve().then(()=>(Br(),Rr)),"arrow-left":()=>Promise.resolve().then(()=>(Ur(),Vr)),"arrow-repeat":()=>Promise.resolve().then(()=>(Kr(),Wr)),"arrow-right":()=>Promise.resolve().then(()=>(Yr(),qr)),"arrow-square-down":()=>Promise.resolve().then(()=>(Qr(),Xr)),"arrow-square-left":()=>Promise.resolve().then(()=>(ti(),$r)),"arrow-square-right":()=>Promise.resolve().then(()=>(ii(),ni)),"arrow-square-up":()=>Promise.resolve().then(()=>(si(),ai)),"arrow-up":()=>Promise.resolve().then(()=>(ui(),ci)),"bank-fill":()=>Promise.resolve().then(()=>(pi(),di)),"bell-slash":()=>Promise.resolve().then(()=>(gi(),mi)),bell:()=>Promise.resolve().then(()=>(yi(),_i)),"bi-funnel":()=>Promise.resolve().then(()=>(Si(),bi)),"bookmark-fill":()=>Promise.resolve().then(()=>(Ti(),Ci)),bookmark:()=>Promise.resolve().then(()=>(Oi(),Ei)),"box-arrow-up-right":()=>Promise.resolve().then(()=>(ji(),ki)),"box-seam":()=>Promise.resolve().then(()=>(Pi(),Mi)),building:()=>Promise.resolve().then(()=>(Li(),Fi)),bus:()=>Promise.resolve().then(()=>(Bi(),Ri)),calculator:()=>Promise.resolve().then(()=>(Ui(),Vi)),"calendar-check":()=>Promise.resolve().then(()=>(Ki(),Wi)),"calendar-heart":()=>Promise.resolve().then(()=>(Yi(),qi)),"calendar-x":()=>Promise.resolve().then(()=>(Qi(),Xi)),calendar:()=>Promise.resolve().then(()=>(ta(),$i)),camera:()=>Promise.resolve().then(()=>(ia(),na)),car:()=>Promise.resolve().then(()=>(sa(),aa)),"chat-dots":()=>Promise.resolve().then(()=>(ua(),ca)),"chat-left-text":()=>Promise.resolve().then(()=>(pa(),da)),chat:()=>Promise.resolve().then(()=>(ga(),ma)),"check-circle-fill":()=>Promise.resolve().then(()=>(ya(),_a)),"check-circle":()=>Promise.resolve().then(()=>(Sa(),ba)),check:()=>Promise.resolve().then(()=>(Ta(),Ca)),"chevron-down":()=>Promise.resolve().then(()=>(Oa(),Ea)),"chevron-left":()=>Promise.resolve().then(()=>(ja(),ka)),"chevron-right":()=>Promise.resolve().then(()=>(Pa(),Ma)),"chevron-selector-vertical":()=>Promise.resolve().then(()=>(La(),Fa)),"chevron-up":()=>Promise.resolve().then(()=>(Ba(),Ra)),clock:()=>Promise.resolve().then(()=>(Ua(),Va)),"cloud-check":()=>Promise.resolve().then(()=>(Ka(),Wa)),"cloud-download":()=>Promise.resolve().then(()=>(Ya(),qa)),"cloud-upload":()=>Promise.resolve().then(()=>(Qa(),Xa)),cloud:()=>Promise.resolve().then(()=>(to(),$a)),"code-square":()=>Promise.resolve().then(()=>(io(),no)),"coins-hand":()=>Promise.resolve().then(()=>(so(),ao)),compass:()=>Promise.resolve().then(()=>(uo(),co)),copy:()=>Promise.resolve().then(()=>(mo(),fo)),"cpu-chip-ai":()=>Promise.resolve().then(()=>(_o(),ho)),cross:()=>Promise.resolve().then(()=>(bo(),vo)),"cursor-fill":()=>Promise.resolve().then(()=>(Co(),xo)),cursor:()=>Promise.resolve().then(()=>(Eo(),wo)),"dash-circle":()=>Promise.resolve().then(()=>(ko(),Do)),"dash-square":()=>Promise.resolve().then(()=>(Mo(),Ao)),dash:()=>Promise.resolve().then(()=>(Fo(),No)),database:()=>Promise.resolve().then(()=>(Ro(),Io)),dataflow:()=>Promise.resolve().then(()=>(Vo(),zo)),download:()=>Promise.resolve().then(()=>(Wo(),Ho)),edit:()=>Promise.resolve().then(()=>(qo(),Go)),"exclamation-circle-fill":()=>Promise.resolve().then(()=>(Xo(),Jo)),"exclamation-circle":()=>Promise.resolve().then(()=>($o(),Zo)),"exclamation-triangle-fill":()=>Promise.resolve().then(()=>(ns(),es)),"exclamation-triangle":()=>Promise.resolve().then(()=>(as(),rs)),exclamation:()=>Promise.resolve().then(()=>(cs(),os)),"eye-fill":()=>Promise.resolve().then(()=>(ds(),ls)),"eye-slash-fill":()=>Promise.resolve().then(()=>(ms(),fs)),"eye-slash":()=>Promise.resolve().then(()=>(_s(),hs)),eye:()=>Promise.resolve().then(()=>(bs(),vs)),"face-smile-fill":()=>Promise.resolve().then(()=>(Cs(),xs)),"face-smile":()=>Promise.resolve().then(()=>(Es(),ws)),facebook:()=>Promise.resolve().then(()=>(ks(),Ds)),"file-earmark-text":()=>Promise.resolve().then(()=>(Ms(),As)),"file-pdf":()=>Promise.resolve().then(()=>(Fs(),Ns)),"file-plus":()=>Promise.resolve().then(()=>(Rs(),Is)),"file-text":()=>Promise.resolve().then(()=>(Vs(),zs)),file:()=>Promise.resolve().then(()=>(Ws(),Hs)),files:()=>Promise.resolve().then(()=>(qs(),Gs)),fingerprint:()=>Promise.resolve().then(()=>(Xs(),Js)),flash:()=>Promise.resolve().then(()=>($s(),Zs)),"folder-check":()=>Promise.resolve().then(()=>(nc(),ec)),"folder-minus":()=>Promise.resolve().then(()=>(ac(),rc)),"folder-plus":()=>Promise.resolve().then(()=>(cc(),oc)),folder:()=>Promise.resolve().then(()=>(dc(),lc)),gear:()=>Promise.resolve().then(()=>(mc(),fc)),"geo-alt":()=>Promise.resolve().then(()=>(_c(),hc)),"geo-fill":()=>Promise.resolve().then(()=>(bc(),vc)),geo:()=>Promise.resolve().then(()=>(Cc(),xc)),"globe-alt":()=>Promise.resolve().then(()=>(Ec(),wc)),globe:()=>Promise.resolve().then(()=>(kc(),Dc)),google:()=>Promise.resolve().then(()=>(Mc(),Ac)),"grid-alt":()=>Promise.resolve().then(()=>(Fc(),Nc)),"grid-fill":()=>Promise.resolve().then(()=>(Rc(),Ic)),"hand-thumbs-down":()=>Promise.resolve().then(()=>(Vc(),zc)),"hand-thumbs-up":()=>Promise.resolve().then(()=>(Wc(),Hc)),"hard-drive":()=>Promise.resolve().then(()=>(qc(),Gc)),heart:()=>Promise.resolve().then(()=>(Xc(),Jc)),"house-door":()=>Promise.resolve().then(()=>($c(),Zc)),house:()=>Promise.resolve().then(()=>(nl(),el)),image:()=>Promise.resolve().then(()=>(al(),rl)),"in-box":()=>Promise.resolve().then(()=>(cl(),ol)),"info-circle-fill":()=>Promise.resolve().then(()=>(dl(),ll)),"info-circle":()=>Promise.resolve().then(()=>(ml(),fl)),instagram:()=>Promise.resolve().then(()=>(_l(),hl)),key:()=>Promise.resolve().then(()=>(bl(),vl)),"laptop-gear":()=>Promise.resolve().then(()=>(Cl(),xl)),laptop:()=>Promise.resolve().then(()=>(El(),wl)),layers:()=>Promise.resolve().then(()=>(kl(),Dl)),"layout-text-window-reverse":()=>Promise.resolve().then(()=>(Ml(),Al)),"layout-text-window":()=>Promise.resolve().then(()=>(Fl(),Nl)),layout:()=>Promise.resolve().then(()=>(Rl(),Il)),"life-buoy":()=>Promise.resolve().then(()=>(Vl(),zl)),lightbulb:()=>Promise.resolve().then(()=>(Wl(),Hl)),link:()=>Promise.resolve().then(()=>(ql(),Gl)),linkedin:()=>Promise.resolve().then(()=>(Xl(),Jl)),list:()=>Promise.resolve().then(()=>($l(),Zl)),"lock-fill":()=>Promise.resolve().then(()=>(nu(),eu)),lock:()=>Promise.resolve().then(()=>(au(),ru)),login:()=>Promise.resolve().then(()=>(cu(),ou)),logout:()=>Promise.resolve().then(()=>(du(),lu)),luggage:()=>Promise.resolve().then(()=>(mu(),fu)),"mail-open":()=>Promise.resolve().then(()=>(_u(),hu)),mail:()=>Promise.resolve().then(()=>(bu(),vu)),map:()=>Promise.resolve().then(()=>(Cu(),xu)),meetup:()=>Promise.resolve().then(()=>(Eu(),wu)),menu:()=>Promise.resolve().then(()=>(ku(),Du)),microphone:()=>Promise.resolve().then(()=>(Mu(),Au)),monitor:()=>Promise.resolve().then(()=>(Fu(),Nu)),moon:()=>Promise.resolve().then(()=>(Ru(),Iu)),move:()=>Promise.resolve().then(()=>(Vu(),zu)),paperclip:()=>Promise.resolve().then(()=>(Wu(),Hu)),passcode:()=>Promise.resolve().then(()=>(qu(),Gu)),passport:()=>Promise.resolve().then(()=>(Xu(),Ju)),pause:()=>Promise.resolve().then(()=>($u(),Zu)),pencil:()=>Promise.resolve().then(()=>(nd(),ed)),"pending-circle":()=>Promise.resolve().then(()=>(ad(),rd)),"person-dash":()=>Promise.resolve().then(()=>(cd(),od)),"person-plus":()=>Promise.resolve().then(()=>(dd(),ld)),"person-x":()=>Promise.resolve().then(()=>(md(),fd)),person:()=>Promise.resolve().then(()=>(_d(),hd)),phone:()=>Promise.resolve().then(()=>(bd(),vd)),"pin-map-fill":()=>Promise.resolve().then(()=>(Cd(),xd)),pin:()=>Promise.resolve().then(()=>(Ed(),wd)),placeholder:()=>Promise.resolve().then(()=>(kd(),Dd)),plane:()=>Promise.resolve().then(()=>(Md(),Ad)),play:()=>Promise.resolve().then(()=>(Fd(),Nd)),"plus-circle":()=>Promise.resolve().then(()=>(Rd(),Id)),"plus-square":()=>Promise.resolve().then(()=>(Vd(),zd)),plus:()=>Promise.resolve().then(()=>(Wd(),Hd)),printer:()=>Promise.resolve().then(()=>(qd(),Gd)),"question-circle":()=>Promise.resolve().then(()=>(Xd(),Jd)),rocket:()=>Promise.resolve().then(()=>($d(),Zd)),save:()=>Promise.resolve().then(()=>(nf(),ef)),search:()=>Promise.resolve().then(()=>(of(),rf)),send:()=>Promise.resolve().then(()=>(lf(),sf)),"sg-crest":()=>Promise.resolve().then(()=>(ff(),uf)),share:()=>Promise.resolve().then(()=>(hf(),pf)),"shield-tick":()=>Promise.resolve().then(()=>(vf(),gf)),"sidebar-collapse":()=>Promise.resolve().then(()=>(xf(),yf)),"sidebar-expand":()=>Promise.resolve().then(()=>(wf(),Sf)),"slash-circle":()=>Promise.resolve().then(()=>(Df(),Tf)),"slash-divider":()=>Promise.resolve().then(()=>(Af(),Of)),sliders:()=>Promise.resolve().then(()=>(Nf(),jf)),"sort-ascending":()=>Promise.resolve().then(()=>(If(),Pf)),"sort-descending":()=>Promise.resolve().then(()=>(zf(),Lf)),speedometer:()=>Promise.resolve().then(()=>(Hf(),Bf)),"star-ai":()=>Promise.resolve().then(()=>(Gf(),Uf)),"star-fill":()=>Promise.resolve().then(()=>(Jf(),Kf)),star:()=>Promise.resolve().then(()=>(Zf(),Yf)),stoplights:()=>Promise.resolve().then(()=>(ep(),Qf)),sun:()=>Promise.resolve().then(()=>(rp(),tp)),"switch-horizontal":()=>Promise.resolve().then(()=>(op(),ip)),"switch-vertical":()=>Promise.resolve().then(()=>(lp(),sp)),tablet:()=>Promise.resolve().then(()=>(fp(),up)),telegram:()=>Promise.resolve().then(()=>(hp(),pp)),telephone:()=>Promise.resolve().then(()=>(vp(),gp)),"three-dots-vertical":()=>Promise.resolve().then(()=>(xp(),yp)),"three-dots":()=>Promise.resolve().then(()=>(wp(),Sp)),ticket:()=>Promise.resolve().then(()=>(Dp(),Tp)),"toggle-off":()=>Promise.resolve().then(()=>(Ap(),Op)),"toggle-on":()=>Promise.resolve().then(()=>(Np(),jp)),train:()=>Promise.resolve().then(()=>(Ip(),Pp)),translate:()=>Promise.resolve().then(()=>(zp(),Lp)),trash:()=>Promise.resolve().then(()=>(Hp(),Bp)),"trend-down":()=>Promise.resolve().then(()=>(Gp(),Up)),"trend-up":()=>Promise.resolve().then(()=>(Jp(),Kp)),truck:()=>Promise.resolve().then(()=>(Zp(),Yp)),"twitter-x":()=>Promise.resolve().then(()=>(em(),Qp)),unlock:()=>Promise.resolve().then(()=>(rm(),tm)),upload:()=>Promise.resolve().then(()=>(om(),im)),"user-check":()=>Promise.resolve().then(()=>(lm(),sm)),"user-circle":()=>Promise.resolve().then(()=>(fm(),um)),"user-pause":()=>Promise.resolve().then(()=>(hm(),pm)),"user-square":()=>Promise.resolve().then(()=>(vm(),gm)),users:()=>Promise.resolve().then(()=>(xm(),ym)),"video-recorder":()=>Promise.resolve().then(()=>(wm(),Sm)),"volume-max":()=>Promise.resolve().then(()=>(Dm(),Tm)),"volume-x":()=>Promise.resolve().then(()=>(Am(),Om)),"window-dash":()=>Promise.resolve().then(()=>(Nm(),jm)),"window-desktop":()=>Promise.resolve().then(()=>(Im(),Pm)),"window-dock":()=>Promise.resolve().then(()=>(zm(),Lm)),"window-fullscreen":()=>Promise.resolve().then(()=>(Hm(),Bm)),"window-plus":()=>Promise.resolve().then(()=>(Gm(),Um)),"window-sidebar":()=>Promise.resolve().then(()=>(Jm(),Km)),"window-split":()=>Promise.resolve().then(()=>(Zm(),Ym)),"window-stack":()=>Promise.resolve().then(()=>(eh(),Qm)),"window-x":()=>Promise.resolve().then(()=>(rh(),th)),window:()=>Promise.resolve().then(()=>(oh(),ih)),"xcircle-fill":()=>Promise.resolve().then(()=>(lh(),sh)),xcircle:()=>Promise.resolve().then(()=>(fh(),uh)),youtube:()=>Promise.resolve().then(()=>(hh(),ph)),"zoom-in":()=>Promise.resolve().then(()=>(vh(),gh)),"zoom-out":()=>Promise.resolve().then(()=>(xh(),yh))};L();var Ch=l`:host{color:inherit;display:inline-flex;vertical-align:bottom}:host(.icon-left){margin-right:.25rem}:host(.icon-right){margin-left:.25rem}:host([size=xs]) svg{height:var(--sgds-icon-size-xs);width:var(--sgds-icon-size-xs)}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;L();let wh=/* @__PURE__ */ new Map;var Th=class extends B{constructor(...e){super(...e),this.size=`lg`}static{this.styles=[...B.styles,Ch]}willUpdate(e){e.has(`name`)&&this._loadIcon(this.name)}async _loadIcon(e){if(!e){this._icon=void 0;return}if(wh.has(e)){this._icon=wh.get(e);return}let t=Sh[e];if(!t){console.warn(`Icon not found: ${e}`),this._icon=void 0;return}try{let n=await t();wh.set(e,n.default),this._icon=n.default}catch{console.warn(`Failed to load icon: ${e}`),this._icon=void 0}}updated(){let e=this.shadowRoot?.querySelector(`svg`);e&&(this.ariaLabel?(e.removeAttribute(`aria-hidden`),e.setAttribute(`aria-label`,this.ariaLabel)):(e.removeAttribute(`aria-label`),e.setAttribute(`aria-hidden`,`true`)))}render(){return this._icon??M}};z([R({type:String,reflect:!0})],Th.prototype,`name`,void 0),z([R({type:String,reflect:!0})],Th.prototype,`size`,void 0),z([R({type:String})],Th.prototype,`ariaLabel`,void 0),z([He()],Th.prototype,`_icon`,void 0),L();var Eh=l`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.dropdown-item.readonly{cursor:default}.dropdown-item.readonly:focus,.dropdown-item.readonly:focus-visible,.dropdown-item.readonly:hover{background-color:var(--sgds-bg-transparent);outline:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}::slotted(a),::slotted(sgds-checkbox){flex:1;margin:calc(var(--sgds-padding-sm)*-1) calc(var(--sgds-padding-lg)*-1);padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.dropdown-item.mainnav-dropdown-link{box-sizing:border-box;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-none)}.dropdown-item.mainnav-dropdown-link ::slotted(*){margin:auto;padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}@media screen and (min-width:1024px){.dropdown-item.mainnav-dropdown-link ::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;L();var Dh=class extends B{constructor(...e){super(...e),this.active=!1,this.disabled=!1,this.readonly=!1,this.ariaLabel=``}static{this.styles=[nr,Eh]}static{this.dependencies={"sgds-icon":Th}}connectedCallback(){super.connectedCallback(),this.addEventListener(`keydown`,e=>{e.key===`Enter`&&this.anchor.length>0&&this.anchor[0].click()}),this.setAttribute(`role`,`menuitem`),this.setAttribute(`aria-disabled`,`${this.disabled}`)}render(){return A`
|
|
2369
2369
|
<div
|
|
2370
2370
|
class="dropdown-item ${rr({disabled:this.disabled,active:this.active,readonly:this.readonly})}"
|
|
2371
2371
|
tabindex=${this.disabled||this.readonly?`-1`:`0`}
|