@internetarchive/ia-topnav 1.3.21-webdev-7948.0 → 1.3.22-webdev-7983.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/dropdown-menu.js +1 -1
- package/dist/src/dropdown-menu.js.map +1 -1
- package/dist/src/styles/dropdown-menu.js +1 -0
- package/dist/src/styles/dropdown-menu.js.map +1 -1
- package/dist/src/styles/ia-topnav.js +4 -1
- package/dist/src/styles/ia-topnav.js.map +1 -1
- package/dist/src/user-menu.js +2 -4
- package/dist/src/user-menu.js.map +1 -1
- package/package.json +1 -1
- package/src/dropdown-menu.ts +1 -1
- package/src/styles/dropdown-menu.ts +1 -0
- package/src/styles/ia-topnav.ts +4 -1
- package/src/user-menu.ts +2 -3
|
@@ -37,7 +37,7 @@ export default class DropdownMenu extends TrackedElement {
|
|
|
37
37
|
});
|
|
38
38
|
}
|
|
39
39
|
static get dropdownDivider() {
|
|
40
|
-
return html `<li
|
|
40
|
+
return html `<li class="divider"></li>`;
|
|
41
41
|
}
|
|
42
42
|
dropdownSection(submenu) {
|
|
43
43
|
return submenu.map((item) => html `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../src/dropdown-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAa,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,eAAe,MAAM,wBAAwB,CAAC;AACrD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,cAAc;IAAxD;;QAC8B,aAAQ,GAAG,EAAE,CAAC;QACd,WAAM,GAAmB,mBAAmB,CAAC;QAC5C,eAAU,GAAG,KAAK,CAAC;QACrB,cAAS,GAAsC,EAAE,CAAC;QAChD,aAAQ,GAAG,KAAK,CAAC;QACjB,SAAI,GAAG,KAAK,CAAC;IAuF5C,CAAC;IArFC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,eAAe,CAAC,CAAC;IAC3B,CAAC;IAED,IAAI,aAAa;QACf,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO,OAAO,CAAC;QAEpC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACtC,MAAM,OAAO,GAAG,IAAI,CAAC,SAA2B,CAAC;YACjD,OAAO,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QACvC,CAAC;QACD,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE;YACvC,MAAM,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE,CAAC;YACzD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;gBAC5B,OAAO;YACT,CAAC;YACD,OAAO,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;QACpD,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM,KAAK,eAAe;QACxB,OAAO,IAAI,CAAA
|
|
1
|
+
{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../src/dropdown-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAa,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,eAAe,MAAM,wBAAwB,CAAC;AACrD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,cAAc;IAAxD;;QAC8B,aAAQ,GAAG,EAAE,CAAC;QACd,WAAM,GAAmB,mBAAmB,CAAC;QAC5C,eAAU,GAAG,KAAK,CAAC;QACrB,cAAS,GAAsC,EAAE,CAAC;QAChD,aAAQ,GAAG,KAAK,CAAC;QACjB,SAAI,GAAG,KAAK,CAAC;IAuF5C,CAAC;IArFC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,eAAe,CAAC,CAAC;IAC3B,CAAC;IAED,IAAI,aAAa;QACf,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO,OAAO,CAAC;QAEpC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACtC,MAAM,OAAO,GAAG,IAAI,CAAC,SAA2B,CAAC;YACjD,OAAO,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QACvC,CAAC;QACD,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE;YACvC,MAAM,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE,CAAC;YACzD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;gBAC5B,OAAO;YACT,CAAC;YACD,OAAO,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;QACpD,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM,KAAK,eAAe;QACxB,OAAO,IAAI,CAAA,2BAA2B,CAAC;IACzC,CAAC;IAEO,eAAe,CAAC,OAAuB;QAC7C,OAAO,OAAO,CAAC,GAAG,CAChB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;YAER,IAAI,CAAC,GAAG;YACR,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACzB,CAAC,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,CAAC;;OAEtC,CACF,CAAC;IACJ,CAAC;IAED,YAAY,CAAC,IAAkB;;QAC7B,MAAM,WAAW,GAAG,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,QAAQ,0CAAG,IAAI,CAAC,KAAK,CAAC,CAAC;QACxD,OAAO,IAAI,CAAA;cACD,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC;cAClC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;kBACjB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;eACxB,IAAI,CAAC,UAAU;mCACK,MAAA,IAAI,CAAC,MAAM,0CACpC,aAAa,OAAO,IAAI,CAAC,cAAc;mBAC9B,WAAW,CAAC,CAAC,CAAC,gBAAgB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,OAAO;;QAE/D,IAAI,CAAC,KAAK,KAAK,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO;QAC/D,IAAI,CAAC,KAAK;QACV,WAAW;YACX,CAAC,CAAC,IAAI,CAAA,4CAA4C,WAAW,SAAS;YACtE,CAAC,CAAC,OAAO;SACR,CAAC;IACR,CAAC;IAED,MAAM,CAAC,YAAY,CAAC,IAAkB;QACpC,OAAO,IAAI,CAAA,2BAA2B,IAAI,CAAC,KAAK,SAAS,CAAC;IAC5D,CAAC;IAED,IAAI,SAAS;QACX,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;QAC5D,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,OAAO,WAAW,EAAE,CAAC;QAC9B,CAAC;QACD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO,SAAS,WAAW,EAAE,CAAC;QAChC,CAAC;QACD,OAAO,UAAU,WAAW,EAAE,CAAC;IACjC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;mBAGI,IAAI,CAAC,SAAS;yBACR,iBAAiB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;2BAC3B,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;;;cAGzC,IAAI,CAAC,aAAa;;;;KAI3B,CAAC;IACJ,CAAC;CACF;AA5F6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAA8C;AAC5C;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAAoB;AACrB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;+CAAmD;AAChD;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAAkB;AACjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAc","sourcesContent":["import { CSSResult, html, nothing, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport icons from './assets/img/icons';\nimport { defaultTopNavConfig } from './data/menus';\nimport formatUrl from './lib/format-url';\nimport { makeBooleanString } from './lib/make-boolean-string';\nimport { IATopNavConfig, IATopNavLink } from './models';\nimport dropdownMenuCSS from './styles/dropdown-menu';\nimport TrackedElement from './tracked-element';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport default class DropdownMenu extends TrackedElement {\n @property({ type: String }) baseHost = '';\n @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n @property({ type: Boolean }) hideSearch = false;\n @property({ type: Array }) menuItems: IATopNavLink[] | IATopNavLink[][] = [];\n @property({ type: Boolean }) animated = false;\n @property({ type: Boolean }) open = false;\n\n static get styles(): CSSResult[] {\n return [dropdownMenuCSS];\n }\n\n get dropdownItems() {\n if (!this.menuItems) return nothing;\n\n if (!Array.isArray(this.menuItems[0])) {\n const submenu = this.menuItems as IATopNavLink[];\n return this.dropdownSection(submenu);\n }\n return this.menuItems.map((submenu, i) => {\n const joiner = i ? DropdownMenu.dropdownDivider : html``;\n if (!Array.isArray(submenu)) {\n return;\n }\n return [joiner, ...this.dropdownSection(submenu)];\n });\n }\n\n static get dropdownDivider() {\n return html`<li class=\"divider\"></li>`;\n }\n\n private dropdownSection(submenu: IATopNavLink[]): TemplateResult[] {\n return submenu.map(\n (item) => html`\n <li>\n ${item.url\n ? this.dropdownLink(item)\n : DropdownMenu.dropdownText(item)}\n </li>\n `,\n );\n }\n\n dropdownLink(link: IATopNavLink): TemplateResult {\n const calloutText = this.config?.callouts?.[link.title];\n return html`<a\n href=\"${formatUrl(link.url, this.baseHost)}\"\n class=${ifDefined(link.class)}\n tabindex=\"${this.open ? '' : '-1'}\"\n @click=${this.trackClick}\n data-event-click-tracking=\"${this.config\n ?.eventCategory}|Nav${link.analyticsEvent}\"\n aria-label=${calloutText ? `New feature: ${link.title}` : nothing}\n >\n ${link.class === 'mobile-upload' ? icons.uploadUnpadded : nothing}\n ${link.title}\n ${calloutText\n ? html`<span class=\"callout\" aria-hidden=\"true\">${calloutText}</span>`\n : nothing}\n </a>`;\n }\n\n static dropdownText(item: IATopNavLink) {\n return html`<span class=\"info-item\">${item.title}</span>`;\n }\n\n get menuClass() {\n const hiddenClass = this.hideSearch ? ' search-hidden' : '';\n if (this.open) {\n return `open${hiddenClass}`;\n }\n if (this.animated) {\n return `closed${hiddenClass}`;\n }\n return `initial${hiddenClass}`;\n }\n\n render() {\n return html`\n <div class=\"nav-container\">\n <nav\n class=\"${this.menuClass}\"\n aria-hidden=\"${makeBooleanString(!this.open)}\"\n aria-expanded=\"${makeBooleanString(this.open)}\"\n >\n <ul>\n ${this.dropdownItems}\n </ul>\n </nav>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../src/styles/dropdown-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../src/styles/dropdown-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwKjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n .nav-container {\n position: relative;\n }\n\n nav {\n position: absolute;\n right: 0;\n z-index: 4;\n overflow: hidden;\n font-size: 1.6rem;\n background-color: var(--dropdownMenuBg);\n transition-property: top;\n transition-duration: 0.2s;\n transition-timing-function: ease;\n }\n\n .initial,\n .closed {\n top: var(--topOffset, -1500px);\n }\n\n .closed {\n transition-duration: 0.5s;\n }\n\n .open {\n max-width: 100vw;\n overflow: auto;\n }\n\n h3 {\n padding: 0.6rem 2rem;\n margin: 0;\n font-size: inherit;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n ul {\n padding: 0.4rem 0 0.7rem 0;\n margin: 0;\n list-style: none;\n /* viewport height - nav height + bottom nav border */\n max-height: calc(100vh - 7.2rem + 1px);\n overflow: auto;\n box-sizing: border-box;\n }\n\n .divider {\n margin: 0.5rem 0;\n border-bottom: 1px solid var(--dropdownMenuDivider);\n }\n\n a,\n .info-item {\n display: block;\n color: var(--primaryTextColor);\n text-decoration: none;\n padding: 1rem 2rem;\n }\n\n .info-item {\n font-size: 0.8em;\n color: var(--dropdownMenuInfoItem);\n }\n\n .callout {\n position: absolute;\n margin-left: 10px;\n padding: 0 5px;\n border-radius: 2px;\n background: #fee257;\n color: #2c2c2c;\n font-size: 1.4rem;\n font-weight: bold;\n }\n\n a.mobile-upload {\n display: flex;\n justify-content: left;\n align-items: center;\n }\n a.mobile-upload svg {\n fill: var(--white);\n margin-right: 1rem;\n height: 1.4rem;\n width: 1.4rem;\n }\n\n @media (min-width: 890px) {\n nav {\n display: flex;\n overflow: visible;\n top: 0;\n left: auto;\n z-index: 5;\n transition: opacity 0.2s ease-in-out;\n font-size: 1.4rem;\n border-radius: 2px;\n background: var(--primaryTextColor);\n box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);\n }\n\n nav:after {\n position: absolute;\n right: 7px;\n top: -7px;\n width: 12px;\n height: 7px;\n box-sizing: border-box;\n color: var(--white);\n content: '';\n border-bottom: 7px solid currentColor;\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n }\n\n h3 {\n display: none;\n }\n\n ul {\n /* viewport height - nav height + bottom nav border */\n max-height: calc(100vh - 8.5rem + 1px);\n }\n\n .divider {\n border-bottom-color: var(--dropdownMenuDivider);\n }\n\n a {\n padding: 0.5rem 2rem;\n color: var(--inverseTextColor);\n transition:\n background 0.1s ease-out,\n color 0.1s ease-out;\n }\n\n .info-item {\n padding: 0.5rem 2rem;\n font-size: 0.8em;\n color: var(--inverseDropdownMenuInfoItem);\n }\n\n a:hover,\n a:active,\n a:focus {\n color: var(--linkHoverColor);\n background: var(--linkColor);\n outline: none;\n }\n\n .initial,\n .closed {\n opacity: 0;\n transition-duration: 0.2s;\n }\n\n .open {\n opacity: 1;\n overflow: visible;\n }\n\n a.mobile-upload {\n display: none;\n }\n }\n`;\n"]}
|
|
@@ -9,6 +9,8 @@ export default css `
|
|
|
9
9
|
--grey60: #999;
|
|
10
10
|
--grey66: #aaa;
|
|
11
11
|
--grey80: #ccc;
|
|
12
|
+
--greya0: #a0a0a0;
|
|
13
|
+
--grey6f: #6f6f6f;
|
|
12
14
|
--errorYellow: #ffcd27;
|
|
13
15
|
|
|
14
16
|
--linkColor: #4b64ff;
|
|
@@ -39,8 +41,9 @@ export default css `
|
|
|
39
41
|
--desktopSubnavBg: var(--grey20);
|
|
40
42
|
|
|
41
43
|
--dropdownMenuBg: var(--grey20);
|
|
42
|
-
--dropdownMenuInfoItem: var(--
|
|
44
|
+
--dropdownMenuInfoItem: var(--greya0);
|
|
43
45
|
--dropdownMenuDivider: var(--grey40);
|
|
46
|
+
--inverseDropdownMenuInfoItem: var(--grey6f);
|
|
44
47
|
|
|
45
48
|
--loginTextColor: var(--grey60);
|
|
46
49
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-topnav.js","sourceRoot":"","sources":["../../../src/styles/ia-topnav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"ia-topnav.js","sourceRoot":"","sources":["../../../src/styles/ia-topnav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n :host {\n --white: #fff;\n --grey13: #222;\n --grey20: #333;\n --grey40: #666;\n --grey28: #474747;\n --grey60: #999;\n --grey66: #aaa;\n --grey80: #ccc;\n --greya0: #a0a0a0;\n --grey6f: #6f6f6f;\n --errorYellow: #ffcd27;\n\n --linkColor: #4b64ff;\n --linkHoverColor: var(--white);\n --subnavLinkColor: var(--grey66);\n --primaryTextColor: var(--white);\n --inverseTextColor: var(--grey20);\n --lightTextColor: var(--grey60);\n --activeColor: var(--white);\n --activeButtonBg: var(--grey20);\n --iconFill: var(--grey60);\n\n --searchActiveBg: var(--grey20);\n --searchActiveInputBg: var(--white);\n --searchMenuBg: var(--grey20);\n --desktopSearchIconFill: var(--grey20);\n\n --mediaMenuBg: var(--grey13);\n --mediaLabelDesktopColor: var(--grey60);\n --activeDesktopMenuIcon: var(--grey28);\n\n --mediaSliderBg: var(--grey20);\n --mediaSliderDesktopBg: var(--grey28);\n\n --primaryNavBg: var(--grey13);\n --primaryNavBottomBorder: var(--grey20);\n\n --desktopSubnavBg: var(--grey20);\n\n --dropdownMenuBg: var(--grey20);\n --dropdownMenuInfoItem: var(--greya0);\n --dropdownMenuDivider: var(--grey40);\n --inverseDropdownMenuInfoItem: var(--grey6f);\n\n --loginTextColor: var(--grey60);\n\n --themeFontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n --logoWidthTablet: 263px;\n\n --savePageSubmitBg: var(--grey13);\n --savePageSubmitText: var(--white);\n --savePageInputBorder: var(--grey60);\n --savePageErrorText: var(--errorYellow);\n\n color: var(--primaryTextColor);\n font-family: var(--themeFontFamily);\n }\n\n primary-nav:focus {\n outline: none !important;\n }\n\n #close-layer {\n display: none;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 3;\n }\n #close-layer.visible {\n display: block;\n }\n\n .topnav {\n position: relative;\n z-index: 4;\n }\n\n @media (max-width: 889px) {\n desktop-subnav {\n display: none;\n }\n }\n`;\n"]}
|
package/dist/src/user-menu.js
CHANGED
|
@@ -5,7 +5,6 @@ import userMenuCSS from './styles/user-menu';
|
|
|
5
5
|
import dropdownStyles from './styles/dropdown-menu';
|
|
6
6
|
import KeyboardNavigation from './lib/keyboard-navigation';
|
|
7
7
|
import { customElement, property } from 'lit/decorators.js';
|
|
8
|
-
import { makeBooleanFromString } from './lib/make-boolean-string';
|
|
9
8
|
let UserMenu = class UserMenu extends DropdownMenu {
|
|
10
9
|
constructor() {
|
|
11
10
|
super(...arguments);
|
|
@@ -30,13 +29,12 @@ let UserMenu = class UserMenu extends DropdownMenu {
|
|
|
30
29
|
}
|
|
31
30
|
}
|
|
32
31
|
render() {
|
|
33
|
-
var _a, _b;
|
|
34
32
|
return html `
|
|
35
33
|
<div class="nav-container">
|
|
36
34
|
<nav
|
|
37
35
|
class="${this.menuClass}"
|
|
38
|
-
aria-hidden
|
|
39
|
-
aria-expanded
|
|
36
|
+
aria-hidden=${!this.open}
|
|
37
|
+
aria-expanded=${this.open}
|
|
40
38
|
>
|
|
41
39
|
<h3>${this.screenName}</h3>
|
|
42
40
|
<ul>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"user-menu.js","sourceRoot":"","sources":["../../src/user-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAa,IAAI,EAAkB,MAAM,KAAK,CAAC;AACtD,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAC7C,OAAO,cAAc,MAAM,wBAAwB,CAAC;AACpD,OAAO,kBAAkB,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"user-menu.js","sourceRoot":"","sources":["../../src/user-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAa,IAAI,EAAkB,MAAM,KAAK,CAAC;AACtD,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAC7C,OAAO,cAAc,MAAM,wBAAwB,CAAC;AACpD,OAAO,kBAAkB,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,YAAY;IAAnC;;QACe,aAAQ,GAAG,EAAE,CAAC;QACd,eAAU,GAAG,EAAE,CAAC;IA6C9C,CAAC;IAxCC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;IACvC,CAAC;IAED,OAAO,CAAC,KAAqB;;QAC3B,IAAI,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACnC,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAC9C,gBAAgB,CACF,CAAC;YAEjB,IAAI,SAAS,EAAE,CAAC;gBACd,MAAM,kBAAkB,GAAG,IAAI,kBAAkB,CAC/C,SAAS,EACT,UAAU,CACX,CAAC;gBACF,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;gBACnE,IAAI,IAAI,CAAC,uBAAuB,EAAE,CAAC;oBACjC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;gBACpE,CAAC;gBACD,IAAI,CAAC,uBAAuB,GAAG,kBAAkB,CAAC,aAAa,CAAC;YAClE,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;mBAGI,IAAI,CAAC,SAAS;wBACT,CAAC,IAAI,CAAC,IAAI;0BACR,IAAI,CAAC,IAAI;;gBAEnB,IAAI,CAAC,UAAU;;cAEjB,IAAI,CAAC,aAAa;;;;KAI3B,CAAC;IACJ,CAAC;CACF,CAAA;AA9C6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAiB;AAFzB,QAAQ;IAD5B,aAAa,CAAC,WAAW,CAAC;GACN,QAAQ,CA+C5B;eA/CoB,QAAQ","sourcesContent":["import { CSSResult, html, PropertyValues } from 'lit';\nimport DropdownMenu from './dropdown-menu';\nimport userMenuCSS from './styles/user-menu';\nimport dropdownStyles from './styles/dropdown-menu';\nimport KeyboardNavigation from './lib/keyboard-navigation';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('user-menu')\nexport default class UserMenu extends DropdownMenu {\n @property({ type: String }) username = '';\n @property({ type: String }) screenName = '';\n\n private previousKeydownListener?: // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (this: HTMLElement, ev: KeyboardEvent) => any;\n\n static get styles(): CSSResult[] {\n return [dropdownStyles, userMenuCSS];\n }\n\n updated(props: PropertyValues) {\n if (props.has('open') && this.open) {\n const container = this.shadowRoot?.querySelector(\n '.nav-container',\n ) as HTMLElement;\n\n if (container) {\n const keyboardNavigation = new KeyboardNavigation(\n container,\n 'usermenu',\n );\n this.addEventListener('keydown', keyboardNavigation.handleKeyDown);\n if (this.previousKeydownListener) {\n this.removeEventListener('keydown', this.previousKeydownListener);\n }\n this.previousKeydownListener = keyboardNavigation.handleKeyDown;\n }\n }\n }\n\n render() {\n return html`\n <div class=\"nav-container\">\n <nav\n class=\"${this.menuClass}\"\n aria-hidden=${!this.open}\n aria-expanded=${this.open}\n >\n <h3>${this.screenName}</h3>\n <ul>\n ${this.dropdownItems}\n </ul>\n </nav>\n </div>\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
package/src/dropdown-menu.ts
CHANGED
|
@@ -39,7 +39,7 @@ export default class DropdownMenu extends TrackedElement {
|
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
static get dropdownDivider() {
|
|
42
|
-
return html`<li
|
|
42
|
+
return html`<li class="divider"></li>`;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
private dropdownSection(submenu: IATopNavLink[]): TemplateResult[] {
|
package/src/styles/ia-topnav.ts
CHANGED
|
@@ -10,6 +10,8 @@ export default css`
|
|
|
10
10
|
--grey60: #999;
|
|
11
11
|
--grey66: #aaa;
|
|
12
12
|
--grey80: #ccc;
|
|
13
|
+
--greya0: #a0a0a0;
|
|
14
|
+
--grey6f: #6f6f6f;
|
|
13
15
|
--errorYellow: #ffcd27;
|
|
14
16
|
|
|
15
17
|
--linkColor: #4b64ff;
|
|
@@ -40,8 +42,9 @@ export default css`
|
|
|
40
42
|
--desktopSubnavBg: var(--grey20);
|
|
41
43
|
|
|
42
44
|
--dropdownMenuBg: var(--grey20);
|
|
43
|
-
--dropdownMenuInfoItem: var(--
|
|
45
|
+
--dropdownMenuInfoItem: var(--greya0);
|
|
44
46
|
--dropdownMenuDivider: var(--grey40);
|
|
47
|
+
--inverseDropdownMenuInfoItem: var(--grey6f);
|
|
45
48
|
|
|
46
49
|
--loginTextColor: var(--grey60);
|
|
47
50
|
|
package/src/user-menu.ts
CHANGED
|
@@ -4,7 +4,6 @@ import userMenuCSS from './styles/user-menu';
|
|
|
4
4
|
import dropdownStyles from './styles/dropdown-menu';
|
|
5
5
|
import KeyboardNavigation from './lib/keyboard-navigation';
|
|
6
6
|
import { customElement, property } from 'lit/decorators.js';
|
|
7
|
-
import { makeBooleanFromString } from './lib/make-boolean-string';
|
|
8
7
|
|
|
9
8
|
@customElement('user-menu')
|
|
10
9
|
export default class UserMenu extends DropdownMenu {
|
|
@@ -43,8 +42,8 @@ export default class UserMenu extends DropdownMenu {
|
|
|
43
42
|
<div class="nav-container">
|
|
44
43
|
<nav
|
|
45
44
|
class="${this.menuClass}"
|
|
46
|
-
aria-hidden
|
|
47
|
-
aria-expanded
|
|
45
|
+
aria-hidden=${!this.open}
|
|
46
|
+
aria-expanded=${this.open}
|
|
48
47
|
>
|
|
49
48
|
<h3>${this.screenName}</h3>
|
|
50
49
|
<ul>
|