npm - @postnord/pn-marketweb-components - Versions diffs - 4.2.5 → 4.3.1 - Mend

@postnord/pn-marketweb-components 4.2.5 → 4.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (511) hide show

package/components/pn-language-selector-option2.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-const pnLanguageSelectorOptionCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-language-selector-option{margin:0;padding:0;list-style:none}.languageselector-button,.languageselector-link{width:100%;padding:1.1rem 1.6rem 1.1rem 1.4rem;display:flex;align-items:center;position:relative;text-decoration:none;border:0;cursor:pointer;background-color:#ffffff;color:#005d92;font-size:1.6rem;font-weight:bold;border-radius:0}.languageselector-button:hover,.languageselector-button:focus,.languageselector-button:active,.languageselector-link:hover,.languageselector-link:focus,.languageselector-link:active{color:#0d234b;text-decoration:underline;box-shadow:none;background-color:#f3f2f2;color:#005d92;outline:none}.languageselector-itemtext{display:inline-block;margin-left:1rem}.languageselector-radio-outer{background:#fff;border:0.1em solid #d3cecb;border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.1s;cursor:pointer}.languageselector-radio-outer:focus>.languageselector-radio-outer,.languageselector-radio-outer:active>.languageselector-radio-outer{box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005d92}.languageselector-radio-outer:hover>.languageselector-radio-outer{border:0.1rem solid #005d92;background:#e0f8ff}[selected=true] .languageselector-radio-outer{border:0.1rem solid #005d92}.languageselector-radio-inner{transform:scale(0);height:1em;width:1em;background-color:#005d92;border-radius:50%;transform-origin:center center;transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}[selected=true] .languageselector-radio-inner{transform:scale(1)}";
+const pnLanguageSelectorOptionCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-language-selector-option{--languageselector-option-background-color:#ffffff;--languageselector-option-color:#005d92;--languageselector-option-hover-background-color:#f3f2f2;--languageselector-option-hover-color:#005d92;--languageselector-option-radio-outer-background-color:#ffffff;--languageselector-option-radio-outer-border-color:#d3cecb;--languageselector-option-radio-outer-hover-background-color:#e0f8ff;--languageselector-option-radio-outer-hover-border-color:#005d92;--languageselector-option-radio-outer-selected-border-color:#005d92;--languageselector-option-radio-inner-background-color:#005d92;--languageselector-option-radio-focus-ring-color:#005d92}pn-language-selector-option{margin:0;padding:0;list-style:none}.languageselector-button,.languageselector-link{width:100%;padding:1.1rem 1.6rem 1.1rem 1.4rem;display:flex;align-items:center;position:relative;text-decoration:none;border:0;cursor:pointer;background-color:var(--languageselector-option-background-color);color:var(--languageselector-option-color);font-size:1.6rem;font-weight:bold;border-radius:0}.languageselector-button:hover,.languageselector-button:focus,.languageselector-button:active,.languageselector-link:hover,.languageselector-link:focus,.languageselector-link:active{text-decoration:underline;box-shadow:none;background-color:var(--languageselector-option-hover-background-color);color:var(--languageselector-option-hover-color);outline:none}.languageselector-itemtext{display:inline-block;margin-left:1rem}.languageselector-radio-outer{background:var(--languageselector-option-radio-outer-background-color);border:0.1em solid var(--languageselector-option-radio-outer-border-color);border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.1s;cursor:pointer}.languageselector-radio-outer:focus>.languageselector-radio-outer,.languageselector-radio-outer:active>.languageselector-radio-outer{box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem var(--languageselector-option-radio-focus-ring-color)}.languageselector-radio-outer:hover>.languageselector-radio-outer{border:0.1rem solid var(--languageselector-option-radio-outer-hover-border-color);background:var(--languageselector-option-radio-outer-hover-background-color)}[selected=true] .languageselector-radio-outer{border:0.1rem solid var(--languageselector-option-radio-outer-selected-border-color)}.languageselector-radio-inner{transform:scale(0);height:1em;width:1em;background-color:var(--languageselector-option-radio-inner-background-color);border-radius:50%;transform-origin:center center;transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}[selected=true] .languageselector-radio-inner{transform:scale(1)}";
 const PnLanguageSelectorOptionStyle0 = pnLanguageSelectorOptionCss;
 const PnlanguageSelectorOption = /*@__PURE__*/ proxyCustomElement(class PnlanguageSelectorOption extends HTMLElement {
@@ -31,7 +31,7 @@ const PnlanguageSelectorOption = /*@__PURE__*/ proxyCustomElement(class Pnlangua
         }
     }
     render() {
-        return (h(Host, { key: '855fcd50a4177ac29fb5dad8e7b4f790f7f64046', role: "listitem", selected: this.selected + '', code: this.code, name: this.name }, !this.url ? (h("button", { class: "languageselector-button", "data-langcode": this.code, onClick: this.onOptionClick.bind(this) }, h("span", { class: "languageselector-radio-outer" }, h("span", { class: "languageselector-radio-inner" })), h("span", { ref: (el) => (this.spanEl = el), lang: this.code, class: "languageselector-itemtext" }, this.name, " - ", this.code))) : (h("a", { href: this.url, target: "_self", class: "languageselector-link", "data-langcode": this.code }, h("span", { class: "languageselector-radio-outer" }, h("span", { class: "languageselector-radio-inner" })), h("span", { ref: (el) => (this.spanEl = el), lang: this.code, class: "languageselector-itemtext" }, this.name, " - ", this.code)))));
+        return (h(Host, { key: 'e51472e1c8226270ed869445dbbe59084758f73f', role: "listitem", selected: this.selected + '', code: this.code, name: this.name }, !this.url ? (h("button", { class: "languageselector-button", "data-langcode": this.code, onClick: this.onOptionClick.bind(this) }, h("span", { class: "languageselector-radio-outer" }, h("span", { class: "languageselector-radio-inner" })), h("span", { ref: (el) => (this.spanEl = el), lang: this.code, class: "languageselector-itemtext" }, this.name, " - ", this.code))) : (h("a", { href: this.url, target: "_self", class: "languageselector-link", "data-langcode": this.code }, h("span", { class: "languageselector-radio-outer" }, h("span", { class: "languageselector-radio-inner" })), h("span", { ref: (el) => (this.spanEl = el), lang: this.code, class: "languageselector-itemtext" }, this.name, " - ", this.code)))));
     }
     static get style() { return PnLanguageSelectorOptionStyle0; }
 }, [0, "pn-language-selector-option", {

package/components/pn-language-selector-option2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-language-selector-option2.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,~~g4EAAg4E~~,CAAC;~~AACr6E~~,uCAAe,2BAA2B;;MCM7B,wBAAwB;;;;;oBAEZ,EAAE;oBACF,EAAE;mBACH,EAAE;wBACI,KAAK;;;IAGzB,MAAM,CAAe;IAEpB,kBAAkB,CAAe;IAC1C,aAAa;QACX,MAAM,eAAe,GAA2B;YAC9C,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,OAAO,EAAE,IAAI;SACd,CAAC;QACF,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC/C;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;SACjD;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IACjF,CAAC,IAAI,CAAC,GAAG,IACR,cAAQ,KAAK,EAAC,yBAAyB,mBAAgB,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IACtG,YAAM,KAAK,EAAC,8BAA8B,IACxC,YAAM,KAAK,EAAC,8BAA8B,GAAQ,CAC7C,EACP,YAAM,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAiB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,2BAA2B,IACrG,IAAI,CAAC,IAAI,SAAK,IAAI,CAAC,IAAI,CACnB,CACA,KAET,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,uBAAuB,mBAAgB,IAAI,CAAC,IAAI,IACtF,YAAM,KAAK,EAAC,8BAA8B,IACxC,YAAM,KAAK,EAAC,8BAA8B,GAAQ,CAC7C,EACP,YAAM,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAiB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,2BAA2B,IACrG,IAAI,CAAC,IAAI,SAAK,IAAI,CAAC,IAAI,CACnB,CACL,CACL,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-language-selector/pn-language-selector-option.scss?tag=pn-language-selector-option","src/components/navigation/pn-language-selector/pn-language-selector-option.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n@import './pn-language-common.scss';\n\npn-language-selector-option {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.languageselector-button,\n.languageselector-link {\n width: 100%;\n padding: 1.1rem 1.6rem 1.1rem 1.4rem;\n display: flex;\n align-items: center;\n position: relative;\n text-decoration: none;\n border: 0;\n cursor: pointer;\n background-color: ~~$white~~;\n color: ~~$blue700~~;\n font-size: 1.6rem;\n font-weight: bold;\n border-radius: 0;\n &:hover,\n &:focus,\n &:active {\n ~~color: $blue900;\n~~ text-decoration: underline;\n box-shadow: none;\n background-color: ~~$gray50~~;\n color: ~~$blue700~~;\n outline: none;\n }\n}\n\n.languageselector-itemtext {\n display: inline-block;\n margin-left: 1rem;\n}\n\n.languageselector-radio-outer {\n background: ~~#fff~~;\n border: 0.1em solid ~~$gray200~~;\n border-radius: 50%;\n height: 1.5em;\n width: 1.5em;\n display: flex;\n justify-content: center;\n align-items: center;\n transition:\n border 0.2s ease-in-out,\n background-color 0.2s ease-in-out,\n box-shadow 0.1s;\n cursor: pointer;\n\n &:focus ~~> &,\~~n &:active ~~> &~~ {\n box-shadow:\n 0 0 0 0.1rem white,\n 0 0 0 0.3rem ~~$blue700~~;\n }\n &:hover ~~> &~~ {\n border: 0.1rem solid ~~$blue700~~;\n background: ~~$blue50~~;\n }\n [selected='true'] & {\n border: 0.1rem solid ~~$blue700~~;\n }\n}\n\n.languageselector-radio-inner {\n transform: scale(0);\n height: 1em;\n width: 1em;\n background-color: ~~$blue700~~;\n border-radius: 50%;\n transform-origin: center center;\n transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);\n\n [selected='true'] & {\n transform: scale(1);\n }\n}\n","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\nimport { LanguageSelectorOption } from './pn-language-selector-types';\n\n@Component({\n tag: 'pn-language-selector-option',\n styleUrl: 'pn-language-selector-option.scss',\n})\nexport class PnlanguageSelectorOption {\n /** What you write in the comment block above each prop is what ends up in the description fields in the prop table in the documentation */\n @Prop() name: string = '';\n @Prop() code: string = '';\n @Prop() url: string = '';\n @Prop() selected: boolean = false;\n @Prop() currentLanguage: string;\n\n private spanEl!: HTMLElement;\n\n @Event() setCurrentLanguage: EventEmitter;\n onOptionClick() {\n const currentlanguage: LanguageSelectorOption = {\n name: this.name,\n code: this.code,\n url: this.url,\n current: true,\n };\n this.setCurrentLanguage.emit(currentlanguage);\n }\n\n componentDidLoad() {\n if (this.spanEl) {\n this.spanEl.setAttribute(\"xml:lang\", this.code);\n }\n }\n\n render() {\n return (\n <Host role=\"listitem\" selected={this.selected + ''} code={this.code} name={this.name}>\n {!this.url ? (\n <button class=\"languageselector-button\" data-langcode={this.code} onClick={this.onOptionClick.bind(this)}>\n <span class=\"languageselector-radio-outer\">\n <span class=\"languageselector-radio-inner\"></span>\n </span>\n <span ref={(el) => (this.spanEl = el as HTMLElement)} lang={this.code} class=\"languageselector-itemtext\">\n {this.name} - {this.code}\n </span>\n </button>\n ) : (\n <a href={this.url} target=\"_self\" class=\"languageselector-link\" data-langcode={this.code}>\n <span class=\"languageselector-radio-outer\">\n <span class=\"languageselector-radio-inner\"></span>\n </span>\n <span ref={(el) => (this.spanEl = el as HTMLElement)} lang={this.code} class=\"languageselector-itemtext\">\n {this.name} - {this.code}\n </span>\n </a>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-language-selector-option2.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,ohHAAohH,CAAC;AACzjH,uCAAe,2BAA2B;;MCM7B,wBAAwB;;;;;oBAEZ,EAAE;oBACF,EAAE;mBACH,EAAE;wBACI,KAAK;;;IAGzB,MAAM,CAAe;IAEpB,kBAAkB,CAAe;IAC1C,aAAa;QACX,MAAM,eAAe,GAA2B;YAC9C,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,OAAO,EAAE,IAAI;SACd,CAAC;QACF,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC/C;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;SACjD;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IACjF,CAAC,IAAI,CAAC,GAAG,IACR,cAAQ,KAAK,EAAC,yBAAyB,mBAAgB,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IACtG,YAAM,KAAK,EAAC,8BAA8B,IACxC,YAAM,KAAK,EAAC,8BAA8B,GAAQ,CAC7C,EACP,YAAM,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAiB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,2BAA2B,IACrG,IAAI,CAAC,IAAI,SAAK,IAAI,CAAC,IAAI,CACnB,CACA,KAET,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,uBAAuB,mBAAgB,IAAI,CAAC,IAAI,IACtF,YAAM,KAAK,EAAC,8BAA8B,IACxC,YAAM,KAAK,EAAC,8BAA8B,GAAQ,CAC7C,EACP,YAAM,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAiB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,2BAA2B,IACrG,IAAI,CAAC,IAAI,SAAK,IAAI,CAAC,IAAI,CACnB,CACL,CACL,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-language-selector/pn-language-selector-option.scss?tag=pn-language-selector-option","src/components/navigation/pn-language-selector/pn-language-selector-option.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n@import './pn-language-common.scss';\n\n// -----------------------------------------------------------------------------\n// Component token defaults\n// -----------------------------------------------------------------------------\npn-language-selector-option {\n --languageselector-option-background-color: #{$white};\n --languageselector-option-color: #{$blue700};\n --languageselector-option-hover-background-color: #{$gray50};\n --languageselector-option-hover-color: #{$blue700};\n\n --languageselector-option-radio-outer-background-color: #{$white};\n --languageselector-option-radio-outer-border-color: #{$gray200};\n --languageselector-option-radio-outer-hover-background-color: #{$blue50};\n --languageselector-option-radio-outer-hover-border-color: #{$blue700};\n --languageselector-option-radio-outer-selected-border-color: #{$blue700};\n --languageselector-option-radio-inner-background-color: #{$blue700};\n --languageselector-option-radio-focus-ring-color: #{$blue700};\n}\n\n// -----------------------------------------------------------------------------\n// Host shell / layout\n// -----------------------------------------------------------------------------\npn-language-selector-option {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n// -----------------------------------------------------------------------------\n// Internal elements\n// -----------------------------------------------------------------------------\n.languageselector-button,\n.languageselector-link {\n width: 100%;\n padding: 1.1rem 1.6rem 1.1rem 1.4rem;\n display: flex;\n align-items: center;\n position: relative;\n text-decoration: none;\n border: 0;\n cursor: pointer;\n background-color: var(--languageselector-option-background-color);\n color: var(--languageselector-option-color);\n font-size: 1.6rem;\n font-weight: bold;\n border-radius: 0;\n\n &:hover,\n &:focus,\n &:active {\n text-decoration: underline;\n box-shadow: none;\n background-color: var(--languageselector-option-hover-background-color);\n color: var(--languageselector-option-hover-color);\n outline: none;\n }\n}\n\n.languageselector-itemtext {\n display: inline-block;\n margin-left: 1rem;\n}\n\n.languageselector-radio-outer {\n background: var(--languageselector-option-radio-outer-background-color);\n border: 0.1em solid var(--languageselector-option-radio-outer-border-color);\n border-radius: 50%;\n height: 1.5em;\n width: 1.5em;\n display: flex;\n justify-content: center;\n align-items: center;\n transition:\n border 0.2s ease-in-out,\n background-color 0.2s ease-in-out,\n box-shadow 0.1s;\n cursor: pointer;\n\n &:focus>&,\n &:active>& {\n box-shadow:\n 0 0 0 0.1rem white,\n 0 0 0 0.3rem var(--languageselector-option-radio-focus-ring-color);\n }\n\n &:hover>& {\n border: 0.1rem solid var(--languageselector-option-radio-outer-hover-border-color);\n background: var(--languageselector-option-radio-outer-hover-background-color);\n }\n\n [selected='true'] & {\n border: 0.1rem solid var(--languageselector-option-radio-outer-selected-border-color);\n }\n}\n\n.languageselector-radio-inner {\n transform: scale(0);\n height: 1em;\n width: 1em;\n background-color: var(--languageselector-option-radio-inner-background-color);\n border-radius: 50%;\n transform-origin: center center;\n transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);\n\n [selected='true'] & {\n transform: scale(1);\n }\n}","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\nimport { LanguageSelectorOption } from './pn-language-selector-types';\n\n@Component({\n tag: 'pn-language-selector-option',\n styleUrl: 'pn-language-selector-option.scss',\n})\nexport class PnlanguageSelectorOption {\n /** What you write in the comment block above each prop is what ends up in the description fields in the prop table in the documentation */\n @Prop() name: string = '';\n @Prop() code: string = '';\n @Prop() url: string = '';\n @Prop() selected: boolean = false;\n @Prop() currentLanguage: string;\n\n private spanEl!: HTMLElement;\n\n @Event() setCurrentLanguage: EventEmitter;\n onOptionClick() {\n const currentlanguage: LanguageSelectorOption = {\n name: this.name,\n code: this.code,\n url: this.url,\n current: true,\n };\n this.setCurrentLanguage.emit(currentlanguage);\n }\n\n componentDidLoad() {\n if (this.spanEl) {\n this.spanEl.setAttribute(\"xml:lang\", this.code);\n }\n }\n\n render() {\n return (\n <Host role=\"listitem\" selected={this.selected + ''} code={this.code} name={this.name}>\n {!this.url ? (\n <button class=\"languageselector-button\" data-langcode={this.code} onClick={this.onOptionClick.bind(this)}>\n <span class=\"languageselector-radio-outer\">\n <span class=\"languageselector-radio-inner\"></span>\n </span>\n <span ref={(el) => (this.spanEl = el as HTMLElement)} lang={this.code} class=\"languageselector-itemtext\">\n {this.name} - {this.code}\n </span>\n </button>\n ) : (\n <a href={this.url} target=\"_self\" class=\"languageselector-link\" data-langcode={this.code}>\n <span class=\"languageselector-radio-outer\">\n <span class=\"languageselector-radio-inner\"></span>\n </span>\n <span ref={(el) => (this.spanEl = el as HTMLElement)} lang={this.code} class=\"languageselector-itemtext\">\n {this.name} - {this.code}\n </span>\n </a>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-language-selector2.js CHANGED Viewed

@@ -51,7 +51,7 @@ const translations = {
     },
 };
-const pnLanguageSelectorCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-language-selector{max-height:5.2rem}.languageselector{position:relative}.languageselector-togglebtn{cursor:pointer;border:0;padding:0.64rem 0;background-color:#ffffff;color:#005d92;font-size:1.6rem}.languageselector-togglebtn:hover,.languageselector-togglebtn:focus,.languageselector-togglebtn:active{color:#0d234b;text-decoration:underline}.languageselector-togglebtn svg{width:1.9rem;height:1.9rem}.languageselector-title{padding:0.8rem 1.6rem;display:flex;align-items:center}.languageselector-list{margin:0;padding:0;list-style:none}";
+const pnLanguageSelectorCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-language-selector{--languageselector-toggle-color:#005d92;--languageselector-toggle-hover-color:#0d234b;--languageselector-toggle-background-color:#ffffff;--languageselector-title-color:#2d2013}pn-language-selector{max-height:5.2rem}.languageselector{position:relative}.languageselector-togglebtn{cursor:pointer;border:0;padding:0.64rem 0;background-color:var(--languageselector-toggle-background-color);color:var(--languageselector-toggle-color);font-size:1.6rem}.languageselector-togglebtn:hover,.languageselector-togglebtn:focus,.languageselector-togglebtn:active{color:var(--languageselector-toggle-hover-color);text-decoration:underline}.languageselector-togglebtn svg{width:1.9rem;height:1.9rem}.languageselector-title{display:flex;align-items:center;padding:0.8rem 1.6rem;color:var(--languageselector-title-color)}.languageselector-list{list-style:none;margin:0;padding:0}pn-language-selector[appearance=dark] button:hover pn-icon svg path{fill:#000000}";
 const PnLanguageSelectorStyle0 = pnLanguageSelectorCss;
 const PnlanguageSelector = /*@__PURE__*/ proxyCustomElement(class PnlanguageSelector extends HTMLElement {
@@ -60,6 +60,7 @@ const PnlanguageSelector = /*@__PURE__*/ proxyCustomElement(class PnlanguageSele
         this.__registerHost();
         this.setLanguage = createEvent(this, "setLanguage", 7);
         this.value = '';
+        this.appearance = 'light';
         this.selectedLanguageName = '';
         this.options = [];
         this.i18n = undefined;
@@ -136,7 +137,7 @@ const PnlanguageSelector = /*@__PURE__*/ proxyCustomElement(class PnlanguageSele
         });
     }
     render() {
-        return (h(Host, { key: '31ba8a191cf41b208613c260e0e82f73bf9a21ed', value: this.value }, h("pn-button-dropdown", { key: '7ee9810953acd357e5ce1a161c4e23854b34d08a', label: this.selectedLanguageName, icon: globe, appearance: "light", variant: "borderless", "aria-label": this.i18n.heading }, h("div", { key: '145b4d1a2388aac7e30d038b8f84859cb8bb94fc', class: "languageselector-nav" }, h("strong", { key: '9e71f062f8647e64c5224317927162acc8145da9', class: "languageselector-title" }, this.i18n.heading), h("div", { key: '395930740f87fd1157ffdfa3d4565e1c49146b09', class: "languageselector-list", role: "list" }, h("slot", { key: '7d126ea2c02a40169305c20114604616db35cfaf' }))))));
+        return (h(Host, { key: '0ba1347ccc5175441a315db338775b9bcdabd7fc', value: this.value }, h("pn-button-dropdown", { key: '466f22c72836797e50ab8e90771b01231f288b84', label: this.selectedLanguageName, icon: globe, appearance: this.appearance, variant: "borderless", "aria-label": this.i18n.heading }, h("div", { key: '42dd5303f4118e72c6a6e5590ba66d094119c5b5', class: "languageselector-nav" }, h("strong", { key: '0e31f50c574d3a9c232a87f5fce335e543e04d10', class: "languageselector-title" }, this.i18n.heading), h("div", { key: 'e88f8090964f716ec4ac98393ddc6f89e4790575', class: "languageselector-list", role: "list" }, h("slot", { key: '67bf04a16414148371a8a7b56d67ede2c248a395' }))))));
     }
     static get watchers() { return {
         "value": ["setSelectedLanguageName", "setTranslations", "onValueChange"]
@@ -144,6 +145,7 @@ const PnlanguageSelector = /*@__PURE__*/ proxyCustomElement(class PnlanguageSele
     static get style() { return PnLanguageSelectorStyle0; }
 }, [4, "pn-language-selector", {
         "value": [1537],
+        "appearance": [1537],
         "selectedLanguageName": [32],
         "options": [32],
         "i18n": [32]

package/components/pn-language-selector2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-language-selector2.js","mappings":"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","names":[],"sources":["node_modules/pn-design-assets/pn-assets/icons/globe.js","src/components/navigation/pn-language-selector/translations.ts","src/components/navigation/pn-language-selector/pn-language-selector.scss?tag=pn-language-selector","src/components/navigation/pn-language-selector/pn-language-selector.tsx"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M4.252 10A8 8 0 0 0 4 12c0 .69.088 1.36.252 2h3.166a13.8 13.8 0 0 1 0-4zm.818-2h2.795a13.6 13.6 0 0 1 1.719-3.629A8.02 8.02 0 0 0 5.07 8M12 4.48A11.7 11.7 0 0 0 9.972 8h4.056A11.7 11.7 0 0 0 12 4.48M14.557 10H9.443a11.8 11.8 0 0 0 0 4h5.114a11.8 11.8 0 0 0 0-4m2.025 4a13.8 13.8 0 0 0 0-4h3.166c.165.64.252 1.31.252 2s-.087 1.36-.252 2zm-2.554 2H9.972A11.7 11.7 0 0 0 12 19.52 11.7 11.7 0 0 0 14.028 16m-4.444 3.629A13.6 13.6 0 0 1 7.864 16H5.07a8.02 8.02 0 0 0 4.514 3.629m4.832 0A13.6 13.6 0 0 0 16.136 16h2.794a8.02 8.02 0 0 1-4.514 3.629M18.93 8h-2.795a13.6 13.6 0 0 0-1.719-3.629A8.02 8.02 0 0 1 18.93 8M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12\" clip-rule=\"evenodd\"/></svg>';\nexport const globe = icon;\n","export const translations = {\n 'sv': {\n heading: 'Språk',\n },\n 'en': {\n heading: 'Language',\n },\n 'da': {\n heading: 'Sprog',\n },\n 'no': {\n heading: 'Språk',\n },\n 'fi': {\n heading: 'Kieli',\n },\n 'de': {\n heading: 'Sprache',\n },\n 'zh': {\n heading: '语言',\n },\n 'fr': {\n heading: 'Langue',\n },\n 'es': {\n heading: 'Idioma',\n },\n 'nl': {\n heading: 'Spraak',\n },\n 'it': {\n heading: 'Idioma',\n },\n 'tr': {\n heading: 'Dil',\n },\n 'pl': {\n heading: 'Język',\n },\n 'pt': {\n heading: 'Linguagem',\n },\n 'pt-BR': {\n heading: 'Linguagem',\n },\n};\n","@import '../../../globals/main.scss';\n@import './pn-language-common.scss';\npn-language-selector {\n max-height: 5.2rem;\n}\n.languageselector {\n position: relative;\n}\n\n.languageselector-togglebtn {\n cursor: pointer;\n border: 0;\n padding: 0.64rem 0;\n background-color: $white;\n color: $blue700;\n font-size: 1.6rem;\n &:hover,\n &:focus,\n &:active {\n color: $blue900;\n text-decoration: underline;\n }\n svg {\n width: 1.9rem;\n height: 1.9rem;\n }\n}\n\n.languageselector-nav {\n}\n\n.languageselector-title {\n padding: 0.8rem 1.6rem;\n display: flex;\n align-items: center;\n}\n\n.languageselector-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n","import { Component, Prop, h, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { LanguageSelectori18n, LanguageSelectorOption } from './pn-language-selector-types';\nimport { translations } from './translations';\nimport { globe } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-language-selector',\n styleUrl: 'pn-language-selector.scss',\n})\nexport class PnlanguageSelector {\n @Element() hostElement: HTMLElement;\n /* Current language code */\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n @State() selectedLanguageName = '';\n @State() options: LanguageSelectorOption[] = [];\n @State() i18n: LanguageSelectori18n;\n\n // Events\n @Event() setLanguage: EventEmitter;\n\n componentWillLoad() {\n this.setInitialSelectedLanguageName();\n this.setTranslations();\n }\n\n componentDidLoad() {\n this.initialize();\n }\n\n initialize() {\n this.setSelectedLanguageName();\n this.addEventBindingsToOptions();\n }\n\n setInitialSelectedLanguageName() {\n if (!window.Intl \|\| !this.value) {\n return;\n }\n const langs = new (Intl as any).DisplayNames([this.value], { type: 'language' });\n if (!langs) {\n return;\n }\n const languageName = langs.of(this.value);\n if (!languageName) {\n return;\n }\n this.selectedLanguageName = languageName.charAt(0).toUpperCase() + languageName.slice(1);\n }\n\n addEventBindingsToOptions() {\n const options = [].slice.apply(this.hostElement.querySelectorAll('pn-language-selector-option')) as HTMLElement[];\n options.map((option: HTMLElement) => {\n option.removeEventListener('setCurrentLanguage', (event: CustomEvent) => {\n this.onSetCurrentLanguage(event.detail as LanguageSelectorOption);\n });\n // Bind event listener for when a user change language\n option.addEventListener('setCurrentLanguage', (event: CustomEvent) => {\n this.onSetCurrentLanguage(event.detail as LanguageSelectorOption);\n });\n });\n }\n\n @Watch('value')\n setSelectedLanguageName() {\n const options = [].slice.apply(this.hostElement.querySelectorAll('pn-language-selector-option')) as HTMLElement[];\n options.map((option: HTMLElement) => {\n // Set current label of language selector\n if (option.getAttribute('code') == this.value) {\n // \|\| option.getAttribute(\"selected\") == \"true\"\n this.selectedLanguageName = option.getAttribute('name');\n }\n });\n }\n\n onSetCurrentLanguage(option: LanguageSelectorOption) {\n this.value = option.code;\n this.selectedLanguageName = option.name;\n this.setLanguage.emit(this.value);\n }\n\n @Watch('value')\n setTranslations() {\n if (translations[this.value]) {\n this.i18n = translations[this.value] as LanguageSelectori18n;\n }\n }\n\n @Watch('value')\n onValueChange() {\n const components = this.hostElement.querySelectorAll('pn-language-selector-option') ?? [];\n components.forEach(component => {\n // Pass values as props into slotted components\n // component.setAttribute(\"current-language\", this.value);\n const isSelected = (component.getAttribute('code') === this.value) + '';\n if (component.getAttribute('selected') + '' !== isSelected) {\n component.setAttribute('selected', isSelected);\n }\n });\n }\n\n render() {\n return (\n <Host value={this.value}>\n <pn-button-dropdown label={this.selectedLanguageName} icon={globe} appearance=\"light\" variant=\"borderless\" aria-label={this.i18n.heading}>\n <div class=\"languageselector-nav\">\n <strong class=\"languageselector-title\">{this.i18n.heading}</strong>\n <div class=\"languageselector-list\" role=\"list\">\n <slot />\n </div>\n </div>\n </pn-button-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-language-selector2.js","mappings":"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","names":[],"sources":["node_modules/pn-design-assets/pn-assets/icons/globe.js","src/components/navigation/pn-language-selector/translations.ts","src/components/navigation/pn-language-selector/pn-language-selector.scss?tag=pn-language-selector","src/components/navigation/pn-language-selector/pn-language-selector.tsx"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M4.252 10A8 8 0 0 0 4 12c0 .69.088 1.36.252 2h3.166a13.8 13.8 0 0 1 0-4zm.818-2h2.795a13.6 13.6 0 0 1 1.719-3.629A8.02 8.02 0 0 0 5.07 8M12 4.48A11.7 11.7 0 0 0 9.972 8h4.056A11.7 11.7 0 0 0 12 4.48M14.557 10H9.443a11.8 11.8 0 0 0 0 4h5.114a11.8 11.8 0 0 0 0-4m2.025 4a13.8 13.8 0 0 0 0-4h3.166c.165.64.252 1.31.252 2s-.087 1.36-.252 2zm-2.554 2H9.972A11.7 11.7 0 0 0 12 19.52 11.7 11.7 0 0 0 14.028 16m-4.444 3.629A13.6 13.6 0 0 1 7.864 16H5.07a8.02 8.02 0 0 0 4.514 3.629m4.832 0A13.6 13.6 0 0 0 16.136 16h2.794a8.02 8.02 0 0 1-4.514 3.629M18.93 8h-2.795a13.6 13.6 0 0 0-1.719-3.629A8.02 8.02 0 0 1 18.93 8M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12\" clip-rule=\"evenodd\"/></svg>';\nexport const globe = icon;\n","export const translations = {\n 'sv': {\n heading: 'Språk',\n },\n 'en': {\n heading: 'Language',\n },\n 'da': {\n heading: 'Sprog',\n },\n 'no': {\n heading: 'Språk',\n },\n 'fi': {\n heading: 'Kieli',\n },\n 'de': {\n heading: 'Sprache',\n },\n 'zh': {\n heading: '语言',\n },\n 'fr': {\n heading: 'Langue',\n },\n 'es': {\n heading: 'Idioma',\n },\n 'nl': {\n heading: 'Spraak',\n },\n 'it': {\n heading: 'Idioma',\n },\n 'tr': {\n heading: 'Dil',\n },\n 'pl': {\n heading: 'Język',\n },\n 'pt': {\n heading: 'Linguagem',\n },\n 'pt-BR': {\n heading: 'Linguagem',\n },\n};\n","@import '../../../globals/main.scss';\n@import './pn-language-common.scss';\n\n// -----------------------------------------------------------------------------\n// Component token defaults\n// -----------------------------------------------------------------------------\npn-language-selector {\n --languageselector-toggle-color: #{$blue700};\n --languageselector-toggle-hover-color: #{$blue900};\n --languageselector-toggle-background-color: #{$white};\n --languageselector-title-color: #{$gray900};\n}\n\n// -----------------------------------------------------------------------------\n// Host shell / layout\n// -----------------------------------------------------------------------------\npn-language-selector {\n max-height: 5.2rem;\n}\n\n.languageselector {\n position: relative;\n}\n\n// -----------------------------------------------------------------------------\n// Internal elements\n// -----------------------------------------------------------------------------\n.languageselector-togglebtn {\n cursor: pointer;\n border: 0;\n padding: 0.64rem 0;\n background-color: var(--languageselector-toggle-background-color);\n color: var(--languageselector-toggle-color);\n font-size: 1.6rem;\n\n &:hover,\n &:focus,\n &:active {\n color: var(--languageselector-toggle-hover-color);\n text-decoration: underline;\n }\n\n svg {\n width: 1.9rem;\n height: 1.9rem;\n }\n}\n\n.languageselector-nav {}\n\n.languageselector-title {\n display: flex;\n align-items: center;\n padding: 0.8rem 1.6rem;\n color: var(--languageselector-title-color)\n}\n\n.languageselector-list {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n// -----------------------------------------------------------------------------\n// Appearance overrides\n// -----------------------------------------------------------------------------\npn-language-selector[appearance='dark'] {\n\n button:hover {\n pn-icon {\n svg path {\n fill: $black;\n }\n }\n }\n}","import { globe } from 'pn-design-assets/pn-assets/icons.js';\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\n\nimport {\n LanguageSelectori18n,\n LanguageSelectorOption,\n} from './pn-language-selector-types';\nimport { translations } from './translations';\n\n@Component({\n tag: 'pn-language-selector',\n styleUrl: 'pn-language-selector.scss',\n})\nexport class PnlanguageSelector {\n @Element() hostElement: HTMLElement;\n /* Current language code */\n @Prop({ reflect: true, mutable: true }) value: string = '';\n @Prop({ mutable: true, reflect: true }) appearance?: 'light' \| 'dark' = 'light';\n\n @State() selectedLanguageName = '';\n @State() options: LanguageSelectorOption[] = [];\n @State() i18n: LanguageSelectori18n;\n\n // Events\n @Event() setLanguage: EventEmitter;\n\n componentWillLoad() {\n this.setInitialSelectedLanguageName();\n this.setTranslations();\n }\n\n componentDidLoad() {\n this.initialize();\n }\n\n initialize() {\n this.setSelectedLanguageName();\n this.addEventBindingsToOptions();\n }\n\n setInitialSelectedLanguageName() {\n if (!window.Intl \|\| !this.value) {\n return;\n }\n const langs = new (Intl as any).DisplayNames([this.value], { type: 'language' });\n if (!langs) {\n return;\n }\n const languageName = langs.of(this.value);\n if (!languageName) {\n return;\n }\n this.selectedLanguageName = languageName.charAt(0).toUpperCase() + languageName.slice(1);\n }\n\n addEventBindingsToOptions() {\n const options = [].slice.apply(this.hostElement.querySelectorAll('pn-language-selector-option')) as HTMLElement[];\n options.map((option: HTMLElement) => {\n option.removeEventListener('setCurrentLanguage', (event: CustomEvent) => {\n this.onSetCurrentLanguage(event.detail as LanguageSelectorOption);\n });\n // Bind event listener for when a user change language\n option.addEventListener('setCurrentLanguage', (event: CustomEvent) => {\n this.onSetCurrentLanguage(event.detail as LanguageSelectorOption);\n });\n });\n }\n\n @Watch('value')\n setSelectedLanguageName() {\n const options = [].slice.apply(this.hostElement.querySelectorAll('pn-language-selector-option')) as HTMLElement[];\n options.map((option: HTMLElement) => {\n // Set current label of language selector\n if (option.getAttribute('code') == this.value) {\n // \|\| option.getAttribute(\"selected\") == \"true\"\n this.selectedLanguageName = option.getAttribute('name');\n }\n });\n }\n\n onSetCurrentLanguage(option: LanguageSelectorOption) {\n this.value = option.code;\n this.selectedLanguageName = option.name;\n this.setLanguage.emit(this.value);\n }\n\n @Watch('value')\n setTranslations() {\n if (translations[this.value]) {\n this.i18n = translations[this.value] as LanguageSelectori18n;\n }\n }\n\n @Watch('value')\n onValueChange() {\n const components = this.hostElement.querySelectorAll('pn-language-selector-option') ?? [];\n components.forEach(component => {\n // Pass values as props into slotted components\n // component.setAttribute(\"current-language\", this.value);\n const isSelected = (component.getAttribute('code') === this.value) + '';\n if (component.getAttribute('selected') + '' !== isSelected) {\n component.setAttribute('selected', isSelected);\n }\n });\n }\n\n render() {\n return (\n <Host value={this.value}>\n <pn-button-dropdown label={this.selectedLanguageName} icon={globe} appearance={this.appearance} variant=\"borderless\" aria-label={this.i18n.heading}>\n <div class=\"languageselector-nav\">\n <strong class=\"languageselector-title\">{this.i18n.heading}</strong>\n <div class=\"languageselector-list\" role=\"list\">\n <slot />\n </div>\n </div>\n </pn-button-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-level-up-modal2.js CHANGED Viewed

@@ -125,7 +125,7 @@ const PnLevelUpModal = /*@__PURE__*/ proxyCustomElement(class PnLevelUpModal ext
         await this.updateBankIDUrl();
     };
     render() {
-        return (h(Host, { key: '3d0c802d4540224260198a5819474db98e97ac55' }, h("pn-modal", { key: '6cd0f98370e19911cc20e4a716490995c91a0dea', ref: el => this._levelUpModal = el, open: this.open, class: "level-up-phone-modal", "allow-overflow": 'true', label: this.headingText, onModalToggle: (ev) => {
+        return (h(Host, { key: 'd4132cf151bb7435572c4f821f207870fe5c6e46' }, h("pn-modal", { key: 'b74f4681a2eda2ac975a760f1dbdd97bf8fc1e08', ref: el => this._levelUpModal = el, open: this.open, class: "level-up-phone-modal", "allow-overflow": 'true', label: this.headingText, onModalToggle: (ev) => {
                 const detail = ev.detail;
                 const isOpen = typeof detail === 'boolean' ? detail : !!detail?.open;
                 this.openModalToggle = isOpen;

package/components/pn-level-up.js CHANGED Viewed

@@ -126,9 +126,9 @@ const PnLevelUp$1 = /*@__PURE__*/ proxyCustomElement(class PnLevelUp extends HTM
     }
     render() {
         const headingId = 'pn-level-up-heading';
-        return (h(Host, { key: 'fdc2020b9552e4908a45513e82f99fd87584193b' }, this.isLeveledUp || this.isRecentLeveledUp
+        return (h(Host, { key: '66bd375f706c63c3142e4acabe030335874e1270' }, this.isLeveledUp || this.isRecentLeveledUp
             ? (this.presentResult())
-            : (h("div", { class: "pn-level-up", role: "region", "aria-labelledby": this.heading ? headingId : undefined }, h("div", { class: "content" }, this.heading && (h(HeadingTag, { id: headingId, level: this.headingLevel, cssClass: "heading" }, this.heading)), this.preamble && (h("div", { class: "preamble" }, this.preamble)), this.hasButtonTexts && this._system === this._web && this.renderWebButtonOptions(), this.hasButtonTexts && this._system !== this._web && this.renderMobileButtonOptions()), h("div", { class: "image-container", "aria-hidden": !this.imageAltText }, this.imageUrl && h("img", { class: "image graphics", src: this.imageUrl, alt: this.imageAltText || '', loading: "lazy" })))), this.errorMessage && h("pn-toast", { key: '47b25697147c7c827eb1dec05a3d12bc502dc878', text: this.errorMessage, appearance: 'warning' }), h("pn-level-up-modal", { key: '840247e0a95c64bca78f09b310f3b8c75ec05720', ref: el => this.modal = el, open: false, endpoint: this.endpoint, "instruction-phone-line-one": this.modalInstructionPhoneLineOne, "instruction-phone-line-two": this.modalInstructionPhoneLineTwo, "instruction-phone-line-three": this.modalInstructionPhoneLineThree, "heading-text": this.modalHeadingText, "outdated-q-r-message": this.modalOutdatedQRMessage, "expires-in-message": this.modalExpiresInMessage, "qr-aria-label": this.qrAriaLabel, system: this._android })));
+            : (h("div", { class: "pn-level-up", role: "region", "aria-labelledby": this.heading ? headingId : undefined }, h("div", { class: "content" }, this.heading && (h(HeadingTag, { id: headingId, level: this.headingLevel, cssClass: "heading" }, this.heading)), this.preamble && (h("div", { class: "preamble" }, this.preamble)), this.hasButtonTexts && this._system === this._web && this.renderWebButtonOptions(), this.hasButtonTexts && this._system !== this._web && this.renderMobileButtonOptions()), h("div", { class: "image-container", "aria-hidden": !this.imageAltText }, this.imageUrl && h("img", { class: "image graphics", src: this.imageUrl, alt: this.imageAltText || '', loading: "lazy" })))), this.errorMessage && h("pn-toast", { key: 'b52687964ddef8054b444c859f44489b265eefd2', text: this.errorMessage, appearance: 'warning' }), h("pn-level-up-modal", { key: '66276af14a48cbee9e2c77f2ea887523652f9fdd', ref: el => this.modal = el, open: false, endpoint: this.endpoint, "instruction-phone-line-one": this.modalInstructionPhoneLineOne, "instruction-phone-line-two": this.modalInstructionPhoneLineTwo, "instruction-phone-line-three": this.modalInstructionPhoneLineThree, "heading-text": this.modalHeadingText, "outdated-q-r-message": this.modalOutdatedQRMessage, "expires-in-message": this.modalExpiresInMessage, "qr-aria-label": this.qrAriaLabel, system: this._android })));
     }
     static get style() { return PnLevelUpStyle0; }
 }, [0, "pn-level-up", {

package/components/pn-link-list.js CHANGED Viewed

@@ -51,7 +51,7 @@ const PnLinkList$1 = /*@__PURE__*/ proxyCustomElement(class PnLinkList extends H
         }
     };
     render() {
-        return (h(Host, { key: 'f0a5d1859a53f84db4d4d5c59238349f093302ff' }, (this.heading || this.preamble) && (h("div", { key: 'e0859d24a8605a7ed5155165ab6bb7bfd89f542a', class: "link-list__header" }, this.heading && h("h2", { key: '3f6bf90c1ffefa4e6d175025de14775095b269aa', class: "link-list__heading" }, this.heading), this.preamble && h("p", { key: '3e649e4f66d1b2bfeb08350dbeaf89c5a5f2f32d', class: "link-list__preamble" }, this.preamble))), h("div", { key: '0b663079c4d0ca30fa7c755980a78ac78700747b', class: "link-list" }, h("div", { key: '7c0a5ad32c0e2521ffa826655b843aa33cc57cac', class: "link-list__container", onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove }, h("div", { key: 'eafc5beff332905549a4ca22ece8ea0de12887a9', class: "link-list__scrollable" }, h("slot", { key: '905739d2d378cdbb6ee157a47b3d4c57ad5a08ec', name: "linklist" })))), this.showMoreUrl ? (h("div", { class: "link-list__button" }, h("pn-button", { appearance: "light", href: this.showMoreUrl }, this.showMoreLabel), ' ')) : ('')));
+        return (h(Host, { key: '2bdbbc5c06f8fc7946c22dd151fdf725b971a47f' }, (this.heading || this.preamble) && (h("div", { key: 'ae7e816a4b35d9736eca631594bf8dd4a402096b', class: "link-list__header" }, this.heading && h("h2", { key: '4f71745dfbc20fc0422bccae0e2fa40873bd0921', class: "link-list__heading" }, this.heading), this.preamble && h("p", { key: 'd90f91362ec62ce07f5c7fe52f9555be516a592b', class: "link-list__preamble" }, this.preamble))), h("div", { key: '320c142dd6a699e1ca05c93c4d9af11843d5d168', class: "link-list" }, h("div", { key: '65bf6f7c2339e6c48a6f0a30b04b8685ae1f19e2', class: "link-list__container", onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove }, h("div", { key: '76fc2f53fb5273c3e90b05dbf697be55e98d58cc', class: "link-list__scrollable" }, h("slot", { key: '13ef92532b590781ecd5b1d6fa9ccf07295c78b0', name: "linklist" })))), this.showMoreUrl ? (h("div", { class: "link-list__button" }, h("pn-button", { appearance: "light", href: this.showMoreUrl }, this.showMoreLabel), ' ')) : ('')));
     }
     static get style() { return PnLinkListStyle0; }
 }, [4, "pn-link-list", {

package/components/pn-mainnav-level2.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { o as onChange, s as state } from './pn-mainnav-store.js';
 import { a as arrow_left } from './arrow_left.js';
 import { d as defineCustomElement$1 } from './pn-mainnav-link2.js';
-const pnMainnavLevelCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-mainnav-level{display:block}pn-mainnav-level:not(.hydrated){max-height:5.6rem;overflow:hidden}pn-mainnav-level[data-level=\"1\"]{width:100%;right:0;overflow-y:scroll;overflow-x:hidden;flex:1}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"1\"]{width:auto;overflow:initial}pn-mainnav-level[data-level=\"1\"]::-webkit-scrollbar{display:none}}pn-mainnav-level[data-level=\"2\"]{position:absolute;top:0;bottom:0;left:0;width:100vw;padding:0;background-color:#ffffff;z-index:1;transform:translateX(100vw);transition:transform 0.2s 0s;transition-property:transform, visibility;overflow:scroll;visibility:hidden}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"]{left:0;top:calc(100% + 1rem);bottom:auto;border-radius:1.6rem;width:auto;padding:1.6rem 1.6rem 0 1.6rem;-webkit-box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);-moz-box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);height:auto;z-index:3;display:none}pn-mainnav-level[data-level=\"2\"][data-menuitem-rightaligned=true]{right:0;left:unset}}@media screen and (max-height: 33.125em){pn-mainnav-level[data-level=\"2\"]{-ms-overflow-style:none;scrollbar-width:none}pn-mainnav-level[data-level=\"2\"]::-webkit-scrollbar{display:none}}pn-mainnav-level[data-level=\"2\"][aria-hidden=false]{transform:translateX(0);visibility:visible}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][aria-hidden=false]{display:block;overflow:visible}pn-mainnav-level[data-level=\"2\"][aria-hidden=false]:not([data-level-listcount=\"1\"]){display:grid;grid-template-columns:minmax(12em, 20em) 1fr;grid-template-rows:auto auto;gap:0px 1.6rem;grid-template-areas:\"top top\" \"left right\"}}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][data-level-alignment=left]{right:0;left:unset}}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][data-level-alignment=center]{left:50%;transform:translateX(-50%)}}pn-mainnav-level[data-level=\"2\"] a{color:#005d92;text-decoration:none}pn-mainnav-level [slot=top]{display:flex}@media screen and (min-width: 48em){pn-mainnav-level [slot=top]{display:none}}[data-menu-currentlevel=\"2\"] pn-mainnav-level [slot=footer]{display:none;overscroll-behavior:contain}.mainnav-level-header{grid-area:top}.mainnav-level-header>label{position:absolute;width:0.1rem;height:0.1rem;padding:0;margin:-0.1rem;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;white-space:nowrap}.mainnav-level-header>button{display:block;position:relative;border:none;background-color:transparent;color:#005d92;padding:2.4rem 0 2.4rem 6.2rem;width:100%;text-align:left}@media screen and (min-width: 64em){.mainnav-level-header>button{display:none;speak:none}}.mainnav-level-header>button>pn-icon{speak:none;position:absolute;height:2.4rem;width:2.4rem;left:3rem;top:50%;transform:translateY(-50%)}[data-level=\"2\"] .mainnav-level-header>pn-mainnav-link>a{font-size:2.4rem}";
+const pnMainnavLevelCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-mainnav-level{--mainnav-level-bg:#ffffff;--mainnav-level-link-color:#005d92;--mainnav-level-2-border-top-left-radius-desktop:var(--siteheader-mainnav-level-2-border-top-left-radius-desktop, 1rem);--mainnav-level-2-border-top-right-radius-desktop:var(--siteheader-mainnav-level-2-border-top-right-radius-desktop, 1rem);--mainnav-level-2-border-bottom-right-radius-desktop:var(--siteheader-mainnav-level-2-border-bottom-right-radius-desktop, 1rem);--mainnav-level-2-border-bottom-left-radius-desktop:var(--siteheader-mainnav-level-2-border-bottom-left-radius-desktop, 1rem);--mainnav-level-2-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);--mainnav-level-header-button-color:#005d92;--mainnav-level-header-link-font-size:2.4rem;--mainnav-level-header-icon-size:2.4rem}pn-mainnav-level{display:block}pn-mainnav-level:not(.hydrated){max-height:5.6rem;overflow:hidden}pn-mainnav-level[data-level=\"1\"]{width:100%;right:0;overflow-y:scroll;overflow-x:hidden;flex:1}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"1\"]{width:auto;overflow:initial}pn-mainnav-level[data-level=\"1\"]::-webkit-scrollbar{display:none}}pn-mainnav-level[data-level=\"2\"]{position:absolute;top:0;bottom:0;left:0;width:100vw;padding:0;background-color:var(--mainnav-level-bg);z-index:1;transform:translateX(100vw);transition:transform 0.2s 0s;transition-property:transform, visibility;overflow:scroll;visibility:hidden}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"]{top:calc(100% + 1rem);bottom:auto;width:auto;height:auto;padding:1.6rem 1.6rem 0 1.6rem;border-top-left-radius:var(--mainnav-level-2-border-top-left-radius-desktop);border-top-right-radius:var(--mainnav-level-2-border-top-right-radius-desktop);border-bottom-right-radius:var(--mainnav-level-2-border-bottom-right-radius-desktop);border-bottom-left-radius:var(--mainnav-level-2-border-bottom-left-radius-desktop);display:none;z-index:3;box-shadow:var(--mainnav-level-2-shadow)}pn-mainnav-level[data-level=\"2\"][data-menuitem-rightaligned=true]{right:0;left:unset}}@media screen and (max-height: 33.125em){pn-mainnav-level[data-level=\"2\"]{-ms-overflow-style:none;scrollbar-width:none}pn-mainnav-level[data-level=\"2\"]::-webkit-scrollbar{display:none}}pn-mainnav-level[data-level=\"2\"][aria-hidden=false]{transform:translateX(0);visibility:visible}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][aria-hidden=false]{display:block;overflow:visible}pn-mainnav-level[data-level=\"2\"][aria-hidden=false]:not([data-level-listcount=\"1\"]){display:grid;grid-template-columns:minmax(12em, 20em) 1fr;grid-template-rows:auto auto;gap:0 1.6rem;grid-template-areas:\"top top\" \"left right\"}}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][data-level-alignment=left]{right:0;left:unset}}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][data-level-alignment=center]{left:50%;transform:translateX(-50%)}}pn-mainnav-level[data-level=\"2\"] a{color:var(--mainnav-level-link-color);text-decoration:none}pn-mainnav-level [slot=top]{display:flex}@media screen and (min-width: 48em){pn-mainnav-level [slot=top]{display:none}}[data-menu-currentlevel=\"2\"] pn-mainnav-level [slot=footer]{display:none;overscroll-behavior:contain}.mainnav-level-header{grid-area:top}.mainnav-level-header>label{position:absolute;width:0.1rem;height:0.1rem;padding:0;margin:-0.1rem;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;white-space:nowrap}.mainnav-level-header>button{display:block;position:relative;width:100%;padding:2.4rem 0 2.4rem 6.2rem;border:none;background-color:transparent;color:var(--mainnav-level-header-button-color);text-align:left}@media screen and (min-width: 64em){.mainnav-level-header>button{display:none;speak:none}}.mainnav-level-header>button>pn-icon{speak:none;position:absolute;top:50%;left:3rem;width:var(--mainnav-level-header-icon-size);height:var(--mainnav-level-header-icon-size);transform:translateY(-50%)}[data-level=\"2\"] .mainnav-level-header>pn-mainnav-link>a{font-size:var(--mainnav-level-header-link-font-size)}";
 const PnMainnavLevelStyle0 = pnMainnavLevelCss;
 const PnMainnavLevel = /*@__PURE__*/ proxyCustomElement(class PnMainnavLevel extends HTMLElement {
@@ -75,10 +75,10 @@ const PnMainnavLevel = /*@__PURE__*/ proxyCustomElement(class PnMainnavLevel ext
         state.currentLevel = this.level;
     }
     render() {
-        return (h(Host, { key: '371552512ee381b8054f7fd0a81a5982b1d526ba', ...(this.level > 1 && this.levelId ? { 'aria-hidden': !this.isOpen + '' } : {}), "data-level-listcount": this.listCount + '', "data-level-alignment": this.alignment, "data-level": this.level + '', ...(this.levelId ? { id: this.levelId } : {}) }, this.level > 1 ? (h("div", { class: "mainnav-level-header" }, h("label", { htmlFor: this.levelId }, state.i18n.menuGoBackButton), h("button", { class: "secondlevel-backbtn", onClick: () => {
+        return (h(Host, { key: 'ac243e3360d377e5d6324117225f2f8a769c43f5', ...(this.level > 1 && this.levelId ? { 'aria-hidden': !this.isOpen + '' } : {}), "data-level-listcount": this.listCount + '', "data-level-alignment": this.alignment, "data-level": this.level + '', ...(this.levelId ? { id: this.levelId } : {}) }, this.level > 1 ? (h("div", { class: "mainnav-level-header" }, h("label", { htmlFor: this.levelId }, state.i18n.menuGoBackButton), h("button", { class: "secondlevel-backbtn", onClick: () => {
                 state.openLevel = '';
                 state.currentLevel = 1;
-            }, "aria-expanded": (state.openLevel === this.levelId) + '' }, h("pn-icon", { icon: arrow_left, color: "blue700" }), state.i18n.menuStartButton), this.parentHref && this.label ? h("pn-mainnav-link", { href: this.parentHref, name: this.label, linkid: this.parentLinkId }) : null)) : null, h("slot", { key: 'b660beb4b8fecf272fd8ef59218f75a62b2dca67', name: "top" }), h("slot", { key: '9f23fba0672bf74e90f091091742c67ddd83bc16' }), h("slot", { key: 'b84d4f6abe2e8718220f231cb2ae4778758022a1', name: "additional" }), h("slot", { key: '47c442eeb3f55300630fb493a3f63ce2e9cceb31', name: "footer" })));
+            }, "aria-expanded": (state.openLevel === this.levelId) + '' }, h("pn-icon", { icon: arrow_left, color: "blue700" }), state.i18n.menuStartButton), this.parentHref && this.label ? h("pn-mainnav-link", { href: this.parentHref, name: this.label, linkid: this.parentLinkId }) : null)) : null, h("slot", { key: '824623c0a89c4c15a23e866f90adf24584dee75e', name: "top" }), h("slot", { key: '9da0b6a172b8bcf943f31d72080c0a635284bbb9' }), h("slot", { key: '6bded6f5615ad6bbb6f721add8c558974f2fde3e', name: "additional" }), h("slot", { key: '02a3446012d0d132a805a207972c7034a3d8a4cf', name: "footer" })));
     }
     static get watchers() { return {
         "label": ["setState"],

package/components/pn-mainnav-level2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-mainnav-level2.js","mappings":"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","names":[],"sources":["src/components/navigation/pn-mainnav/pn-mainnav-level.scss?tag=pn-mainnav-level","src/components/navigation/pn-mainnav/pn-mainnav-level.tsx"],"sourcesContent":["@import './pn-mainnav-common.scss';\n@import '../../../globals/main.scss';\n\npn-mainnav-level {\n display: block;\n &:not(.hydrated) {\n max-height: 5.6rem;\n overflow: hidden;\n }\n &[data-level='1'] {\n width: 100%;\n right: 0;\n overflow-y: scroll;\n overflow-x: hidden;\n flex: 1;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n width: auto;\n overflow: initial;\n\n // Only works for blink/webkit\n &::-webkit-scrollbar {\n display: none;\n }\n }\n }\n &[data-level='2'] {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100vw;\n padding: 0;\n background-color: $white;\n z-index: 1;\n transform: translateX(100vw);\n transition: transform 0.2s 0s;\n transition-property: transform, visibility;\n overflow: scroll;\n visibility: hidden;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n left: 0;\n top: calc(100% + 1rem);\n bottom: auto;\n border-radius: 1.6rem;\n width: auto;\n padding: 1.6rem 1.6rem 0 1.6rem;\n -webkit-box-shadow: $mainmenu-shadow-elevation8;\n -moz-box-shadow: $mainmenu-shadow-elevation8;\n box-shadow: $mainmenu-shadow-elevation8;\n height: auto;\n z-index: 3;\n display: none;\n\n &[data-menuitem-rightaligned='true'] {\n // right-align next-to-last menu-pop-up on desktop (last is hidden mobile-action-menu)\n right: 0;\n left: unset;\n }\n }\n\n @media screen and (max-height: $mobilenav-media-phoneheight) {\n -ms-overflow-style: none; // IE and Edge\n scrollbar-width: none; // Firefox\n\n &::-webkit-scrollbar {\n // Chrome, Safari and Opera\n display: none;\n }\n }\n\n &[aria-hidden='false'] {\n transform: translateX(0);\n visibility: visible;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n display: block;\n overflow: visible;\n\n &:not([data-level-listcount='1']) {\n display: grid;\n grid-template-columns: minmax(12em, 20em) 1fr;\n grid-template-rows: auto auto;\n gap: 0px 1.6rem;\n grid-template-areas:\n 'top top'\n 'left right';\n }\n }\n }\n &[data-level-alignment='left'] {\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n right: 0;\n left: unset;\n }\n }\n &[data-level-alignment='center'] {\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n a {\n color: $blue700;\n text-decoration: none;\n }\n }\n [slot='top'] {\n display: flex;\n @media screen and (min-width: $mobilenav-media-tablet) {\n display: none;\n }\n }\n\n [slot='footer'] {\n [data-menu-currentlevel='2'] & {\n display: none;\n overscroll-behavior: contain;\n }\n }\n}\n\n.mainnav-level-header {\n grid-area: top;\n > label {\n position: absolute;\n width: 0.1rem;\n height: 0.1rem;\n padding: 0;\n margin: -0.1rem;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n white-space: nowrap;\n }\n > button {\n display: block;\n position: relative;\n border: none;\n background-color: transparent;\n color: $blue700;\n padding: 2.4rem 0 2.4rem 6.2rem;\n width: 100%;\n text-align: left;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n display: none;\n speak: none;\n }\n\n > pn-icon {\n speak: none;\n position: absolute;\n height: 2.4rem;\n width: 2.4rem;\n left: 3rem;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n\n [data-level='2'] & {\n > pn-mainnav-link > a {\n font-size: 2.4rem;\n }\n }\n}\n","import { Component, State, h, Host, Element, Watch, Prop } from '@stencil/core';\nimport { state, onChange } from './pn-mainnav-store';\nimport { arrow_left } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-mainnav-level',\n styleUrl: 'pn-mainnav-level.scss',\n shadow: false,\n})\nexport class PnMainnavLevel {\n @Element() hostElement: HTMLElement;\n @Prop({ reflect: true, mutable: true }) label: string = '';\n @State() level: number = 1;\n @State() levelId: string = '';\n @State() isOpen: boolean = false;\n @State() parentName: string = '';\n @State() parentHref: string = '';\n @State() parentLinkId: string = '';\n @State() listCount: number = 0;\n @State() alignment: string = 'right';\n\n async componentWillLoad() {\n this.setState();\n onChange('openLevel', () => {\n this.onChangeOpenLevel();\n });\n }\n\n @Watch('label')\n setState() {\n this.listCount = this.hostElement.querySelectorAll(':scope > pn-mainnav-list').length;\n const parentElm = this.hostElement.parentElement;\n if (parentElm.tagName.toLowerCase() !== 'nav') {\n this.level = 2;\n }\n if (parentElm.tagName.toLowerCase() === 'pn-mainnav-link') {\n this.parentName = parentElm.getAttribute('name') + '';\n if ((!this.label && this.parentName) \|\| this.label !== this.parentName) {\n this.label = this.parentName;\n }\n this.parentHref = parentElm.getAttribute('href') + '';\n this.parentLinkId = parentElm.getAttribute('linkid') + '';\n const parentLinkName = this.parentName.toLowerCase().replace(/\\W/gi, '_');\n this.levelId = `mainnav-lvl${this.level}-${parentLinkName}`;\n }\n }\n\n @Watch('isOpen')\n onOpen() {\n if (this.level === 2) {\n requestAnimationFrame(() => {\n const levelClientRect = this.hostElement.getClientRects()[0];\n if (!levelClientRect) {\n return;\n }\n\n const navElm = this.hostElement.parentElement.parentElement.parentElement.parentElement;\n if (navElm && navElm.tagName.toLowerCase() === 'nav') {\n const navClientRect = navElm.getClientRects()[0];\n if (!navClientRect) {\n return;\n }\n\n if (levelClientRect.right > window.innerWidth) {\n const levelParentRect = this.hostElement.parentElement.getClientRects()[0];\n if (levelParentRect.left - levelClientRect.width < 0) {\n this.alignment = 'center';\n } else {\n this.alignment = 'left';\n }\n }\n }\n });\n }\n }\n onChangeOpenLevel() {\n this.isOpen = state.openLevel === this.levelId;\n state.currentLevel = this.level;\n }\n\n render() {\n return (\n <Host\n {...(this.level > 1 && this.levelId ? { 'aria-hidden': !this.isOpen + '' } : {})}\n data-level-listcount={this.listCount + ''}\n data-level-alignment={this.alignment}\n data-level={this.level + ''}\n {...(this.levelId ? { id: this.levelId } : {})}\n >\n {this.level > 1 ? (\n <div class=\"mainnav-level-header\">\n <label htmlFor={this.levelId}>{state.i18n.menuGoBackButton}</label>\n <button\n class=\"secondlevel-backbtn\"\n onClick={() => {\n state.openLevel = '';\n state.currentLevel = 1;\n }}\n aria-expanded={(state.openLevel === this.levelId) + ''}\n >\n <pn-icon icon={arrow_left} color=\"blue700\" />\n {state.i18n.menuStartButton}\n </button>\n {this.parentHref && this.label ? <pn-mainnav-link href={this.parentHref} name={this.label} linkid={this.parentLinkId}></pn-mainnav-link> : null}\n </div>\n ) : null}\n <slot name=\"top\"></slot>\n <slot></slot>\n <slot name=\"additional\"></slot>\n <slot name=\"footer\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-mainnav-level2.js","mappings":"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","names":[],"sources":["src/components/navigation/pn-mainnav/pn-mainnav-level.scss?tag=pn-mainnav-level","src/components/navigation/pn-mainnav/pn-mainnav-level.tsx"],"sourcesContent":["@import './pn-mainnav-common.scss';\n@import '../../../globals/main.scss';\n\n// -----------------------------------------------------------------------------\n// Component token defaults\n// Styling API\n// -----------------------------------------------------------------------------\npn-mainnav-level {\n --mainnav-level-bg: #{$white};\n --mainnav-level-link-color: #{$blue700};\n\n --mainnav-level-2-border-top-left-radius-desktop:\n var(--siteheader-mainnav-level-2-border-top-left-radius-desktop, 1rem);\n --mainnav-level-2-border-top-right-radius-desktop:\n var(--siteheader-mainnav-level-2-border-top-right-radius-desktop, 1rem);\n --mainnav-level-2-border-bottom-right-radius-desktop:\n var(--siteheader-mainnav-level-2-border-bottom-right-radius-desktop, 1rem);\n --mainnav-level-2-border-bottom-left-radius-desktop:\n var(--siteheader-mainnav-level-2-border-bottom-left-radius-desktop, 1rem);\n\n --mainnav-level-2-shadow: #{$mainmenu-shadow-elevation8};\n\n --mainnav-level-header-button-color: #{$blue700};\n --mainnav-level-header-link-font-size: 2.4rem;\n --mainnav-level-header-icon-size: 2.4rem;\n}\n\n// -----------------------------------------------------------------------------\n// Host shell / layout\n// -----------------------------------------------------------------------------\npn-mainnav-level {\n display: block;\n\n &:not(.hydrated) {\n max-height: 5.6rem;\n overflow: hidden;\n }\n}\n\n// -----------------------------------------------------------------------------\n// Level 1\n// -----------------------------------------------------------------------------\npn-mainnav-level[data-level='1'] {\n width: 100%;\n right: 0;\n overflow-y: scroll;\n overflow-x: hidden;\n flex: 1;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n width: auto;\n overflow: initial;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// Level 2\n// -----------------------------------------------------------------------------\npn-mainnav-level[data-level='2'] {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100vw;\n padding: 0;\n background-color: var(--mainnav-level-bg);\n z-index: 1;\n transform: translateX(100vw);\n transition: transform 0.2s 0s;\n transition-property: transform, visibility;\n overflow: scroll;\n visibility: hidden;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n top: calc(100% + 1rem);\n bottom: auto;\n width: auto;\n height: auto;\n padding: 1.6rem 1.6rem 0 1.6rem;\n border-top-left-radius: var(--mainnav-level-2-border-top-left-radius-desktop);\n border-top-right-radius: var(--mainnav-level-2-border-top-right-radius-desktop);\n border-bottom-right-radius: var(--mainnav-level-2-border-bottom-right-radius-desktop);\n border-bottom-left-radius: var(--mainnav-level-2-border-bottom-left-radius-desktop);\n display: none;\n z-index: 3;\n box-shadow: var(--mainnav-level-2-shadow);\n\n &[data-menuitem-rightaligned='true'] {\n right: 0;\n left: unset;\n }\n }\n\n @media screen and (max-height: $mobilenav-media-phoneheight) {\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n &[aria-hidden='false'] {\n transform: translateX(0);\n visibility: visible;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n display: block;\n overflow: visible;\n\n &:not([data-level-listcount='1']) {\n display: grid;\n grid-template-columns: minmax(12em, 20em) 1fr;\n grid-template-rows: auto auto;\n gap: 0 1.6rem;\n grid-template-areas:\n 'top top'\n 'left right';\n }\n }\n }\n\n &[data-level-alignment='left'] {\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n right: 0;\n left: unset;\n }\n }\n\n &[data-level-alignment='center'] {\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n\n a {\n color: var(--mainnav-level-link-color);\n text-decoration: none;\n }\n}\n\n// -----------------------------------------------------------------------------\n// Slots\n// -----------------------------------------------------------------------------\npn-mainnav-level {\n [slot='top'] {\n display: flex;\n\n @media screen and (min-width: $mobilenav-media-tablet) {\n display: none;\n }\n }\n\n [slot='footer'] {\n [data-menu-currentlevel='2'] & {\n display: none;\n overscroll-behavior: contain;\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// Internal elements\n// -----------------------------------------------------------------------------\n.mainnav-level-header {\n grid-area: top;\n\n >label {\n position: absolute;\n width: 0.1rem;\n height: 0.1rem;\n padding: 0;\n margin: -0.1rem;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n white-space: nowrap;\n }\n\n >button {\n display: block;\n position: relative;\n width: 100%;\n padding: 2.4rem 0 2.4rem 6.2rem;\n border: none;\n background-color: transparent;\n color: var(--mainnav-level-header-button-color);\n text-align: left;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n display: none;\n speak: none;\n }\n\n >pn-icon {\n speak: none;\n position: absolute;\n top: 50%;\n left: 3rem;\n width: var(--mainnav-level-header-icon-size);\n height: var(--mainnav-level-header-icon-size);\n transform: translateY(-50%);\n }\n }\n\n [data-level='2'] & {\n >pn-mainnav-link>a {\n font-size: var(--mainnav-level-header-link-font-size);\n }\n }\n}","import { Component, State, h, Host, Element, Watch, Prop } from '@stencil/core';\nimport { state, onChange } from './pn-mainnav-store';\nimport { arrow_left } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-mainnav-level',\n styleUrl: 'pn-mainnav-level.scss',\n shadow: false,\n})\nexport class PnMainnavLevel {\n @Element() hostElement: HTMLElement;\n @Prop({ reflect: true, mutable: true }) label: string = '';\n @State() level: number = 1;\n @State() levelId: string = '';\n @State() isOpen: boolean = false;\n @State() parentName: string = '';\n @State() parentHref: string = '';\n @State() parentLinkId: string = '';\n @State() listCount: number = 0;\n @State() alignment: string = 'right';\n\n async componentWillLoad() {\n this.setState();\n onChange('openLevel', () => {\n this.onChangeOpenLevel();\n });\n }\n\n @Watch('label')\n setState() {\n this.listCount = this.hostElement.querySelectorAll(':scope > pn-mainnav-list').length;\n const parentElm = this.hostElement.parentElement;\n if (parentElm.tagName.toLowerCase() !== 'nav') {\n this.level = 2;\n }\n if (parentElm.tagName.toLowerCase() === 'pn-mainnav-link') {\n this.parentName = parentElm.getAttribute('name') + '';\n if ((!this.label && this.parentName) \|\| this.label !== this.parentName) {\n this.label = this.parentName;\n }\n this.parentHref = parentElm.getAttribute('href') + '';\n this.parentLinkId = parentElm.getAttribute('linkid') + '';\n const parentLinkName = this.parentName.toLowerCase().replace(/\\W/gi, '_');\n this.levelId = `mainnav-lvl${this.level}-${parentLinkName}`;\n }\n }\n\n @Watch('isOpen')\n onOpen() {\n if (this.level === 2) {\n requestAnimationFrame(() => {\n const levelClientRect = this.hostElement.getClientRects()[0];\n if (!levelClientRect) {\n return;\n }\n\n const navElm = this.hostElement.parentElement.parentElement.parentElement.parentElement;\n if (navElm && navElm.tagName.toLowerCase() === 'nav') {\n const navClientRect = navElm.getClientRects()[0];\n if (!navClientRect) {\n return;\n }\n\n if (levelClientRect.right > window.innerWidth) {\n const levelParentRect = this.hostElement.parentElement.getClientRects()[0];\n if (levelParentRect.left - levelClientRect.width < 0) {\n this.alignment = 'center';\n } else {\n this.alignment = 'left';\n }\n }\n }\n });\n }\n }\n onChangeOpenLevel() {\n this.isOpen = state.openLevel === this.levelId;\n state.currentLevel = this.level;\n }\n\n render() {\n return (\n <Host\n {...(this.level > 1 && this.levelId ? { 'aria-hidden': !this.isOpen + '' } : {})}\n data-level-listcount={this.listCount + ''}\n data-level-alignment={this.alignment}\n data-level={this.level + ''}\n {...(this.levelId ? { id: this.levelId } : {})}\n >\n {this.level > 1 ? (\n <div class=\"mainnav-level-header\">\n <label htmlFor={this.levelId}>{state.i18n.menuGoBackButton}</label>\n <button\n class=\"secondlevel-backbtn\"\n onClick={() => {\n state.openLevel = '';\n state.currentLevel = 1;\n }}\n aria-expanded={(state.openLevel === this.levelId) + ''}\n >\n <pn-icon icon={arrow_left} color=\"blue700\" />\n {state.i18n.menuStartButton}\n </button>\n {this.parentHref && this.label ? <pn-mainnav-link href={this.parentHref} name={this.label} linkid={this.parentLinkId}></pn-mainnav-link> : null}\n </div>\n ) : null}\n <slot name=\"top\"></slot>\n <slot></slot>\n <slot name=\"additional\"></slot>\n <slot name=\"footer\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-mainnav-link2.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { a as angle_small_down } from './angle_small_down.js';
 import { a as arrow_right } from './arrow_right.js';
 import { o as open_in_new } from './open_in_new.js';
-const pnMainnavLinkCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-mainnav-link{display:block}pn-mainnav-link button,pn-mainnav-link a{font-weight:normal;position:relative;border:0 none;display:flex;align-items:center;background-color:transparent;color:#005d92}pn-mainnav-link button:hover,pn-mainnav-link button:focus,pn-mainnav-link a:hover,pn-mainnav-link a:focus{background-color:#ffffff;color:#005d92;outline:0;box-shadow:none}pn-mainnav-link button:active,pn-mainnav-link a:active{background-color:#f3f2f2;color:#00a0d6;box-shadow:none}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link{height:100%;padding-left:0;position:relative;scroll-snap-align:center}}[data-level=\"1\"] pn-mainnav-link:first-child{border-top:0.1rem solid #f3f2f2}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link:first-child{border:0}}[data-level=\"1\"] pn-mainnav-link>button,[data-level=\"1\"] pn-mainnav-link>a{font-size:2rem;width:100%;border-bottom:0.1rem solid #f3f2f2;height:auto;padding:1.9rem 0 1.9rem 3rem}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link>button,[data-level=\"1\"] pn-mainnav-link>a{height:100%;border:0;font-size:1.6rem;font-weight:normal;position:relative;outline:0;overflow:hidden;padding:1.6rem 1.6rem;white-space:nowrap}[data-level=\"1\"] pn-mainnav-link>button::before,[data-level=\"1\"] pn-mainnav-link>a::before{content:\"\";background-color:#00a0d6;position:absolute;bottom:0;left:0;width:100%;height:0.5em;border-radius:0.5em 0.5em 0 0;transform:translateY(100%);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}[data-level=\"1\"] pn-mainnav-link>button:hover::before,[data-level=\"1\"] pn-mainnav-link>button:focus::before,[data-level=\"1\"] pn-mainnav-link>a:hover::before,[data-level=\"1\"] pn-mainnav-link>a:focus::before{transform:translateY(0)}[data-level=\"1\"] pn-mainnav-link>button:active,[data-level=\"1\"] pn-mainnav-link>a:active{outline:0;box-shadow:none;color:#005d92}[data-level=\"1\"] pn-mainnav-link>button:active::before,[data-level=\"1\"] pn-mainnav-link>a:active::before{background-color:#8eddf9;transform:translateY(0)}}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link>button:hover,[data-level=\"1\"] pn-mainnav-link>button:focus,[data-level=\"1\"] pn-mainnav-link>a:hover,[data-level=\"1\"] pn-mainnav-link>a:focus{text-decoration:none}}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link>button[aria-expanded=true]::before,[data-level=\"1\"] pn-mainnav-link>a[aria-expanded=true]::before{content:\"\";background-color:#00a0d6;position:absolute;bottom:0;left:0;width:100%;height:0.5em;border-radius:0.5em 0.5em 0 0;transform:translateY(0);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}}[data-level=\"1\"] pn-mainnav-link [aria-expanded=true] .first-level_icon{transform:rotateX(180deg)}[data-level=\"1\"] pn-mainnav-link pn-icon.first-level_icon{transition:0.25s linear transform;width:1.92rem;height:1.92rem;display:none}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link pn-icon.first-level_icon{display:block}}[data-level=\"1\"] pn-mainnav-link pn-icon.first-level_arrow{display:block;position:absolute;height:2.4rem;width:2.4rem;right:2.4rem;top:50%;transform:translateY(-50%)}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link pn-icon.first-level_arrow{display:none}}[data-level=\"1\"] pn-mainnav-link pn-icon svg{pointer-events:none;speak:none;width:100%;height:100%}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"]:not([data-level-listcount=\"1\"]) pn-mainnav-list:last-child pn-mainnav-link>a{min-width:unset}}[data-level=\"2\"] pn-mainnav-link{position:static;display:inline-block;width:100%;height:auto}@media screen and (min-width: 64em){[data-level=\"2\"] pn-mainnav-link{padding-left:0;margin-bottom:1.6rem}}[data-level=\"2\"] pn-mainnav-link>a{font-size:1.6rem;border-bottom:0.1rem solid #f3f2f2;padding:2.2rem 0 2.2rem 3rem;white-space:normal}@media screen and (min-width: 64em){[data-level=\"2\"] pn-mainnav-link>a{min-width:16em;border:0;border-radius:1rem;padding:1.4rem 1.6rem}}[data-level=\"2\"] pn-mainnav-link>a:hover{background-color:#ffffff;color:#005d92}[data-level=\"2\"] pn-mainnav-link>a:hover,[data-level=\"2\"] pn-mainnav-link>a:focus{box-shadow:none}@media screen and (min-width: 64em){[data-level=\"2\"] pn-mainnav-link>a:hover,[data-level=\"2\"] pn-mainnav-link>a:focus{background-color:#f3f2f2;color:#005d92;text-decoration:underline;outline:0}}[data-level=\"2\"] pn-mainnav-link>a:hover::before,[data-level=\"2\"] pn-mainnav-link>a:focus::before{content:none}[data-level=\"2\"] pn-mainnav-link>a:active{box-shadow:none}@media screen and (min-width: 64em){[data-level=\"2\"] pn-mainnav-link>a:active{background-color:#f3f2f2;color:#00a0d6;outline:0}}[data-level=\"2\"] pn-mainnav-link>a:active::before{content:none}[data-level=\"2\"] pn-mainnav-link pn-icon{display:inline-block;margin-left:0.2em;min-width:1.5rem;width:1.5rem;height:1.5rem}";
+const pnMainnavLinkCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-mainnav-link{--mainnav-link-active-desktop-color:var(--siteheader-mainnav-link-active-desktop-color, #005d92);--mainnav-link-level1-indicator-color:var(--siteheader-mainnav-link-level1-indicator-color, #00a0d6);--mainnav-link-level1-indicator-active-color:var(--siteheader-mainnav-link-level1-indicator-active-color, #8eddf9);--mainnav-link-level1-first-border-top:0.1rem solid #f3f2f2;--mainnav-link-level1-border-bottom:var(--siteheader-mainnav-link-level1-border-bottom, 0.1rem solid #f3f2f2);--mainnav-link-level2-border-bottom:var(--siteheader-mainnav-link-level2-border-bottom, 0.1rem solid #f3f2f2)}pn-mainnav-link{display:block}pn-mainnav-link button,pn-mainnav-link a{position:relative;display:flex;align-items:center;border:0 none;background-color:transparent;color:#005d92;font-weight:normal}pn-mainnav-link button:hover,pn-mainnav-link button:focus,pn-mainnav-link a:hover,pn-mainnav-link a:focus{background-color:#ffffff;color:#005d92;outline:0;box-shadow:none}pn-mainnav-link button:active,pn-mainnav-link a:active{background-color:#f3f2f2;color:#00a0d6;box-shadow:none}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link{position:relative;height:100%;padding-left:0;scroll-snap-align:center}}[data-level=\"1\"] pn-mainnav-link:first-child{border-top:var(--mainnav-link-level1-first-border-top)}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link:first-child{border:0}}[data-level=\"1\"] pn-mainnav-link>button,[data-level=\"1\"] pn-mainnav-link>a{width:100%;height:auto;padding:1.9rem 0 1.9rem 3rem;border-bottom:var(--mainnav-link-level1-border-bottom);font-size:2rem}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link>button,[data-level=\"1\"] pn-mainnav-link>a{position:relative;height:100%;overflow:hidden;padding:1.6rem 1.6rem;border:0;outline:0;white-space:nowrap;font-size:1.6rem;font-weight:normal}}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link>button::before,[data-level=\"1\"] pn-mainnav-link>a::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:0.5em;background-color:var(--mainnav-link-level1-indicator-color);border-radius:0.5em 0.5em 0 0;transform:translateY(100%);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link>button:hover::before,[data-level=\"1\"] pn-mainnav-link>button:focus::before,[data-level=\"1\"] pn-mainnav-link>a:hover::before,[data-level=\"1\"] pn-mainnav-link>a:focus::before{transform:translateY(0)}}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link>button:active,[data-level=\"1\"] pn-mainnav-link>a:active{color:var(--mainnav-link-active-desktop-color);outline:0;box-shadow:none}}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link>button:active::before,[data-level=\"1\"] pn-mainnav-link>a:active::before{background-color:var(--mainnav-link-level1-indicator-active-color);transform:translateY(0)}}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link>button:hover,[data-level=\"1\"] pn-mainnav-link>button:focus,[data-level=\"1\"] pn-mainnav-link>a:hover,[data-level=\"1\"] pn-mainnav-link>a:focus{text-decoration:none}}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link>button[aria-expanded=true]::before,[data-level=\"1\"] pn-mainnav-link>a[aria-expanded=true]::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:0.5em;background-color:var(--mainnav-link-level1-indicator-color);border-radius:0.5em 0.5em 0 0;transform:translateY(0);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}}[data-level=\"1\"] pn-mainnav-link [aria-expanded=true] .first-level_icon{transform:rotateX(180deg)}[data-level=\"1\"] pn-mainnav-link pn-icon.first-level_icon{display:none;width:1.92rem;height:1.92rem;transition:0.25s linear transform}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link pn-icon.first-level_icon{display:block}}[data-level=\"1\"] pn-mainnav-link pn-icon.first-level_arrow{display:block;position:absolute;top:50%;right:2.4rem;width:2.4rem;height:2.4rem;transform:translateY(-50%)}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link pn-icon.first-level_arrow{display:none}}[data-level=\"1\"] pn-mainnav-link pn-icon svg{width:100%;height:100%;pointer-events:none;speak:none}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"]:not([data-level-listcount=\"1\"]) pn-mainnav-list:last-child pn-mainnav-link>a{min-width:unset}}[data-level=\"2\"] pn-mainnav-link{position:static;display:inline-block;width:100%;height:auto}@media screen and (min-width: 64em){[data-level=\"2\"] pn-mainnav-link{margin-bottom:1.6rem;padding-left:0}}[data-level=\"2\"] pn-mainnav-link>a{padding:2.2rem 0 2.2rem 3rem;border-bottom:var(--mainnav-link-level2-border-bottom);white-space:normal;font-size:1.6rem}@media screen and (min-width: 64em){[data-level=\"2\"] pn-mainnav-link>a{min-width:16em;padding:1.4rem 1.6rem;border:0;border-radius:1rem}}[data-level=\"2\"] pn-mainnav-link>a:hover{background-color:#ffffff;color:#005d92}[data-level=\"2\"] pn-mainnav-link>a:hover,[data-level=\"2\"] pn-mainnav-link>a:focus{box-shadow:none}@media screen and (min-width: 64em){[data-level=\"2\"] pn-mainnav-link>a:hover,[data-level=\"2\"] pn-mainnav-link>a:focus{background-color:#f3f2f2;color:#005d92;text-decoration:underline;outline:0}}[data-level=\"2\"] pn-mainnav-link>a:hover::before,[data-level=\"2\"] pn-mainnav-link>a:focus::before{content:none}[data-level=\"2\"] pn-mainnav-link>a:active{box-shadow:none}@media screen and (min-width: 64em){[data-level=\"2\"] pn-mainnav-link>a:active{background-color:#f3f2f2;color:#00a0d6;outline:0}}[data-level=\"2\"] pn-mainnav-link>a:active::before{content:none}[data-level=\"2\"] pn-mainnav-link pn-icon{display:inline-block;width:1.5rem;height:1.5rem;min-width:1.5rem;margin-left:0.2em}[data-level=\"2\"] pn-mainnav-link pn-icon svg{width:100%;height:100%;pointer-events:none;speak:none}";
 const PnMainnavLinkStyle0 = pnMainnavLinkCss;
 const PnMainnavLink = /*@__PURE__*/ proxyCustomElement(class PnMainnavLink extends HTMLElement {
@@ -31,7 +31,7 @@ const PnMainnavLink = /*@__PURE__*/ proxyCustomElement(class PnMainnavLink exten
         state.openLevel = state.openLevel + '' === this.levelId + '' ? '' : this.levelId;
     }
     render() {
-        return (h(Host, { key: '772b57cf379f452f2cf1a949033351b3cd25e764', role: "listitem", name: this.name, href: this.href, linkid: this.linkid }, this.hasChildren ? (h("button", { onClick: this.setOpenMenuLevel.bind(this), "aria-controls": this.levelId, "aria-expanded": (state.openLevel + '' === this.levelId + '') + '', "aria-haspopup": "true" }, this.name, h("pn-icon", { class: "first-level_icon", icon: angle_small_down, color: "blue700" }), h("pn-icon", { class: "first-level_arrow", icon: arrow_right, color: "blue700" }))) : (h("a", { href: this.href, ...(this.target ? { target: this.target } : {}), ...(this.target === '_blank' ? { rel: 'nofollow noopener' } : {}), ...(this.linkid ? { id: this.linkid } : {}) }, this.name, this.target === '_blank' ? h("pn-icon", { icon: open_in_new, color: "blue700" }) : null)), h("slot", { key: '714f55ebab5091398c8ebbb800d1daa7cb7fdc12' })));
+        return (h(Host, { key: '3c93d6d6fa93518b592e3a91f7a19b8875d8a786', role: "listitem", name: this.name, href: this.href, linkid: this.linkid }, this.hasChildren ? (h("button", { onClick: this.setOpenMenuLevel.bind(this), "aria-controls": this.levelId, "aria-expanded": (state.openLevel + '' === this.levelId + '') + '', "aria-haspopup": "true" }, this.name, h("pn-icon", { class: "first-level_icon", icon: angle_small_down, color: "blue700" }), h("pn-icon", { class: "first-level_arrow", icon: arrow_right, color: "blue700" }))) : (h("a", { href: this.href, ...(this.target ? { target: this.target } : {}), ...(this.target === '_blank' ? { rel: 'nofollow noopener' } : {}), ...(this.linkid ? { id: this.linkid } : {}) }, this.name, this.target === '_blank' ? h("pn-icon", { icon: open_in_new, color: "blue700" }) : null)), h("slot", { key: '365a480af84435a0d0ae0c9c95cf5461410f539f' })));
     }
     static get style() { return PnMainnavLinkStyle0; }
 }, [4, "pn-mainnav-link", {

package/components/pn-mainnav-link2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-mainnav-link2.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,6uKAA6uK,CAAC;AACvwK,4BAAe,gBAAgB;;MCQlB,aAAa;;;;oBAID,EAAE;oBAEF,EAAE;sBAEA,EAAE;sBAEF,EAAE;uBAGA,EAAE;oBAEJ,KAAK;2BACE,KAAK;;;IAErC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QACpF,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,EAAE;YACjC,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YACnE,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC,IAAI,aAAa,EAAE,CAAC;SACnD;KACF;IAED,gBAAgB;QACd,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,GAAG,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;KAClF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACxE,IAAI,CAAC,WAAW,IACf,cAAQ,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAiB,IAAI,CAAC,OAAO,mBAAiB,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,IAAI,EAAE,mBAAgB,MAAM,IACnK,IAAI,CAAC,IAAI,EACV,eAAS,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAC,SAAS,GAAG,EAC5E,eAAS,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC,SAAS,GAAG,CACjE,KAET,SACE,IAAI,EAAE,IAAI,CAAC,IAAI,MACV,IAAI,CAAC,MAAM,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,MAC3C,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,EAAE,GAAG,EAAE,mBAAmB,EAAE,GAAG,EAAE,CAAC,MAC7D,IAAI,CAAC,MAAM,GAAG,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAE3C,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,eAAS,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC,SAAS,GAAW,GAAG,IAAI,CACvF,CACL,EACD,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-mainnav/pn-mainnav-link.scss?tag=pn-mainnav-link","src/components/navigation/pn-mainnav/pn-mainnav-link.tsx"],"sourcesContent":["@import './pn-mainnav-common.scss';\n@import '../../../globals/main.scss';\n\npn-mainnav-link {\n display: block;\n button,\n a {\n font-weight: normal;\n position: relative;\n border: 0 none;\n display: flex;\n align-items: center;\n background-color: transparent;\n color: $blue700;\n\n &:hover,\n &:focus {\n background-color: $white;\n color: $blue700;\n outline: 0;\n box-shadow: none;\n }\n &:active {\n background-color: $gray50;\n color: $blue400;\n box-shadow: none;\n }\n }\n}\n\npn-mainnav-link {\n [data-level='1'] & {\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n height: 100%;\n padding-left: 0;\n position: relative;\n scroll-snap-align: center;\n }\n &:first-child {\n border-top: 0.1rem solid $gray50;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n border: 0;\n }\n }\n\n > button,\n > a {\n font-size: 2rem;\n width: 100%;\n border-bottom: 0.1rem solid $gray50;\n height: auto;\n padding: 1.9rem 0 1.9rem 3rem;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n height: 100%;\n border: 0;\n font-size: 1.6rem;\n font-weight: normal;\n position: relative;\n outline: 0;\n overflow: hidden;\n padding: 1.6rem 1.6rem;\n white-space: nowrap;\n\n &::before {\n content: '';\n background-color: $blue400;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 0.5em;\n border-radius: 0.5em 0.5em 0 0;\n transform: translateY(100%);\n transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);\n }\n\n &:hover,\n &:focus {\n &::before {\n transform: translateY(0);\n }\n }\n\n &:active {\n outline: 0;\n box-shadow: none;\n color: $blue700;\n\n &::before {\n background-color: $blue200;\n transform: translateY(0);\n }\n }\n }\n\n &:hover,\n &:focus {\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n text-decoration: none;\n }\n }\n\n &[aria-expanded='true'] {\n &::before {\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n content: '';\n background-color: $blue400;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 0.5em;\n border-radius: 0.5em 0.5em 0 0;\n transform: translateY(0);\n transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);\n }\n }\n }\n }\n\n [aria-expanded='true'] {\n .first-level_icon {\n transform: rotateX(180deg);\n }\n }\n\n pn-icon {\n &.first-level_icon {\n transition: 0.25s linear transform;\n width: 1.92rem;\n height: 1.92rem;\n display: none;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n display: block;\n }\n }\n\n &.first-level_arrow {\n display: block;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n display: none;\n }\n\n position: absolute;\n height: 2.4rem;\n width: 2.4rem;\n right: 2.4rem;\n top: 50%;\n transform: translateY(-50%);\n }\n\n svg {\n pointer-events: none;\n speak: none;\n width: 100%;\n height: 100%;\n }\n }\n }\n}\n\npn-mainnav-link {\n // Additional links added to a level 2 section should not have the min-width required to make the columns look good\n pn-mainnav-level[data-level='2']:not([data-level-listcount='1']) pn-mainnav-list:last-child & {\n > a {\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n min-width: unset;\n }\n }\n }\n [data-level='2'] & {\n position: static;\n display: inline-block;\n width: 100%;\n height: auto;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n padding-left: 0;\n margin-bottom: 1.6rem;\n }\n\n > a {\n font-size: 1.6rem;\n border-bottom: 0.1rem solid $gray50;\n padding: 2.2rem 0 2.2rem 3rem;\n white-space: normal;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n min-width: 16em;\n border: 0;\n border-radius: 1rem;\n padding: 1.4rem 1.6rem;\n }\n\n &:hover {\n background-color: $white;\n color: $blue700;\n }\n\n &:hover,\n &:focus {\n box-shadow: none;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n background-color: $gray50;\n color: $blue700;\n text-decoration: underline;\n outline: 0;\n }\n &::before {\n content: none;\n }\n }\n\n &:active {\n box-shadow: none;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n background-color: $gray50;\n color: $blue400;\n outline: 0;\n }\n\n &::before {\n content: none;\n }\n }\n }\n\n pn-icon {\n display: inline-block;\n margin-left: 0.2em;\n min-width: 1.5rem;\n width: 1.5rem;\n height: 1.5rem;\n }\n }\n}\n","import { Component, Prop, h, State, Host, Element } from '@stencil/core';\nimport state from './pn-mainnav-store';\nimport { angle_small_down, arrow_right, open_in_new } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-mainnav-link',\n styleUrl: 'pn-mainnav-link.scss',\n shadow: false,\n})\nexport class PnMainnavLink {\n @Element() hostElement: HTMLElement;\n\n /** Name /\n @Prop() name: string = '';\n /* Href /\n @Prop() href: string = '';\n /* Target /\n @Prop() target: string = '';\n /* Link id /\n @Prop() linkid: string = '';\n\n /* Level ID that we control toggle on /\n @State() levelId: string = '';\n /* Menu item is open */\n @State() open: boolean = false;\n @State() hasChildren: boolean = false;\n\n componentWillLoad() {\n this.hasChildren = this.hostElement.querySelectorAll('pn-mainnav-level').length > 0;\n if (this.hasChildren && this.name) {\n const safeLevelName = this.name.toLowerCase().replace(/\\W/gi, '_');\n this.levelId = `mainnav-lvl${2}-${safeLevelName}`;\n }\n }\n\n setOpenMenuLevel() {\n state.openLevel = state.openLevel + '' === this.levelId + '' ? '' : this.levelId;\n }\n\n render() {\n return (\n <Host role=\"listitem\" name={this.name} href={this.href} linkid={this.linkid}>\n {this.hasChildren ? (\n <button onClick={this.setOpenMenuLevel.bind(this)} aria-controls={this.levelId} aria-expanded={(state.openLevel + '' === this.levelId + '') + ''} aria-haspopup=\"true\">\n {this.name}\n <pn-icon class=\"first-level_icon\" icon={angle_small_down} color=\"blue700\" />\n <pn-icon class=\"first-level_arrow\" icon={arrow_right} color=\"blue700\" />\n </button>\n ) : (\n <a\n href={this.href}\n {...(this.target ? { target: this.target } : {})}\n {...(this.target === '_blank' ? { rel: 'nofollow noopener' } : {})}\n {...(this.linkid ? { id: this.linkid } : {})}\n >\n {this.name}\n {this.target === '_blank' ? <pn-icon icon={open_in_new} color=\"blue700\"></pn-icon> : null}\n </a>\n )}\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-mainnav-link2.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,uxMAAuxM,CAAC;AACjzM,4BAAe,gBAAgB;;MCQlB,aAAa;;;;oBAID,EAAE;oBAEF,EAAE;sBAEA,EAAE;sBAEF,EAAE;uBAGA,EAAE;oBAEJ,KAAK;2BACE,KAAK;;;IAErC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QACpF,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,EAAE;YACjC,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YACnE,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC,IAAI,aAAa,EAAE,CAAC;SACnD;KACF;IAED,gBAAgB;QACd,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,GAAG,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;KAClF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACxE,IAAI,CAAC,WAAW,IACf,cAAQ,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAiB,IAAI,CAAC,OAAO,mBAAiB,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,IAAI,EAAE,mBAAgB,MAAM,IACnK,IAAI,CAAC,IAAI,EACV,eAAS,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAC,SAAS,GAAG,EAC5E,eAAS,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC,SAAS,GAAG,CACjE,KAET,SACE,IAAI,EAAE,IAAI,CAAC,IAAI,MACV,IAAI,CAAC,MAAM,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,MAC3C,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,EAAE,GAAG,EAAE,mBAAmB,EAAE,GAAG,EAAE,CAAC,MAC7D,IAAI,CAAC,MAAM,GAAG,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAE3C,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,eAAS,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC,SAAS,GAAW,GAAG,IAAI,CACvF,CACL,EACD,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-mainnav/pn-mainnav-link.scss?tag=pn-mainnav-link","src/components/navigation/pn-mainnav/pn-mainnav-link.tsx"],"sourcesContent":["@import './pn-mainnav-common.scss';\n@import '../../../globals/main.scss';\n\n// -----------------------------------------------------------------------------\n// SCSS tokens\n// Internal layout / implementation constants\n// -----------------------------------------------------------------------------\n$mainnav-link-color: $blue700;\n$mainnav-link-hover-background: $white;\n$mainnav-link-hover-color: $blue700;\n$mainnav-link-active-background: $gray50;\n$mainnav-link-active-color: $blue400;\n\n$mainnav-link-level1-font-size-mobile: 2rem;\n$mainnav-link-level1-font-size-desktop: 1.6rem;\n$mainnav-link-level2-font-size: 1.6rem;\n\n$mainnav-link-level1-padding-mobile: 1.9rem 0 1.9rem 3rem;\n$mainnav-link-level1-padding-desktop: 1.6rem 1.6rem;\n$mainnav-link-level2-padding-mobile: 2.2rem 0 2.2rem 3rem;\n$mainnav-link-level2-padding-desktop: 1.4rem 1.6rem;\n\n$mainnav-link-level2-margin-bottom-desktop: 1.6rem;\n$mainnav-link-level2-min-width-desktop: 16em;\n$mainnav-link-level2-border-radius-desktop: 1rem;\n\n$mainnav-link-level1-indicator-height: 0.5em;\n$mainnav-link-level1-indicator-radius: 0.5em 0.5em 0 0;\n$mainnav-link-level1-indicator-transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);\n\n$mainnav-link-first-level-icon-size: 1.92rem;\n$mainnav-link-first-level-icon-transition: 0.25s linear transform;\n\n$mainnav-link-first-level-arrow-size: 2.4rem;\n$mainnav-link-first-level-arrow-right: 2.4rem;\n\n$mainnav-link-level2-icon-size: 1.5rem;\n$mainnav-link-level2-icon-margin-left: 0.2em;\n\n// -----------------------------------------------------------------------------\n// Component token defaults\n// Styling API\n// -----------------------------------------------------------------------------\npn-mainnav-link {\n --mainnav-link-active-desktop-color: var(--siteheader-mainnav-link-active-desktop-color, #{$blue700});\n --mainnav-link-level1-indicator-color: var(--siteheader-mainnav-link-level1-indicator-color, #{$blue400});\n --mainnav-link-level1-indicator-active-color: var(--siteheader-mainnav-link-level1-indicator-active-color, #{$blue200});\n --mainnav-link-level1-first-border-top: 0.1rem solid #{$gray50};\n --mainnav-link-level1-border-bottom: var(--siteheader-mainnav-link-level1-border-bottom, 0.1rem solid #{$gray50});\n --mainnav-link-level2-border-bottom: var(--siteheader-mainnav-link-level2-border-bottom, 0.1rem solid #{$gray50});\n}\n\n// -----------------------------------------------------------------------------\n// Host shell / base interaction\n// -----------------------------------------------------------------------------\npn-mainnav-link {\n display: block;\n}\n\npn-mainnav-link button,\npn-mainnav-link a {\n position: relative;\n display: flex;\n align-items: center;\n border: 0 none;\n background-color: transparent;\n color: $mainnav-link-color;\n font-weight: normal;\n\n &:hover,\n &:focus {\n background-color: $mainnav-link-hover-background;\n color: $mainnav-link-hover-color;\n outline: 0;\n box-shadow: none;\n }\n\n &:active {\n background-color: $mainnav-link-active-background;\n color: $mainnav-link-active-color;\n box-shadow: none;\n }\n}\n\n// -----------------------------------------------------------------------------\n// Level 1 host context\n// -----------------------------------------------------------------------------\n[data-level='1'] pn-mainnav-link {\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n position: relative;\n height: 100%;\n padding-left: 0;\n scroll-snap-align: center;\n }\n}\n\n[data-level='1'] pn-mainnav-link:first-child {\n border-top: var(--mainnav-link-level1-first-border-top);\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n border: 0;\n }\n}\n\n[data-level='1'] pn-mainnav-link>button,\n[data-level='1'] pn-mainnav-link>a {\n width: 100%;\n height: auto;\n padding: $mainnav-link-level1-padding-mobile;\n border-bottom: var(--mainnav-link-level1-border-bottom);\n font-size: $mainnav-link-level1-font-size-mobile;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n position: relative;\n height: 100%;\n overflow: hidden;\n padding: $mainnav-link-level1-padding-desktop;\n border: 0;\n outline: 0;\n white-space: nowrap;\n font-size: $mainnav-link-level1-font-size-desktop;\n font-weight: normal;\n }\n}\n\n[data-level='1'] pn-mainnav-link>button::before,\n[data-level='1'] pn-mainnav-link>a::before {\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: $mainnav-link-level1-indicator-height;\n background-color: var(--mainnav-link-level1-indicator-color);\n border-radius: $mainnav-link-level1-indicator-radius;\n transform: translateY(100%);\n transition: $mainnav-link-level1-indicator-transition;\n }\n}\n\n[data-level='1'] pn-mainnav-link>button:hover::before,\n[data-level='1'] pn-mainnav-link>button:focus::before,\n[data-level='1'] pn-mainnav-link>a:hover::before,\n[data-level='1'] pn-mainnav-link>a:focus::before {\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n transform: translateY(0);\n }\n}\n\n[data-level='1'] pn-mainnav-link>button:active,\n[data-level='1'] pn-mainnav-link>a:active {\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n color: var(--mainnav-link-active-desktop-color);\n outline: 0;\n box-shadow: none;\n }\n}\n\n[data-level='1'] pn-mainnav-link>button:active::before,\n[data-level='1'] pn-mainnav-link>a:active::before {\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n background-color: var(--mainnav-link-level1-indicator-active-color);\n transform: translateY(0);\n }\n}\n\n[data-level='1'] pn-mainnav-link>button:hover,\n[data-level='1'] pn-mainnav-link>button:focus,\n[data-level='1'] pn-mainnav-link>a:hover,\n[data-level='1'] pn-mainnav-link>a:focus {\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n text-decoration: none;\n }\n}\n\n[data-level='1'] pn-mainnav-link>button[aria-expanded='true']::before,\n[data-level='1'] pn-mainnav-link>a[aria-expanded='true']::before {\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: $mainnav-link-level1-indicator-height;\n background-color: var(--mainnav-link-level1-indicator-color);\n border-radius: $mainnav-link-level1-indicator-radius;\n transform: translateY(0);\n transition: $mainnav-link-level1-indicator-transition;\n }\n}\n\n// -----------------------------------------------------------------------------\n// Level 1 state / icons\n// -----------------------------------------------------------------------------\n[data-level='1'] pn-mainnav-link [aria-expanded='true'] .first-level_icon {\n transform: rotateX(180deg);\n}\n\n[data-level='1'] pn-mainnav-link pn-icon.first-level_icon {\n display: none;\n width: $mainnav-link-first-level-icon-size;\n height: $mainnav-link-first-level-icon-size;\n transition: $mainnav-link-first-level-icon-transition;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n display: block;\n }\n}\n\n[data-level='1'] pn-mainnav-link pn-icon.first-level_arrow {\n display: block;\n position: absolute;\n top: 50%;\n right: $mainnav-link-first-level-arrow-right;\n width: $mainnav-link-first-level-arrow-size;\n height: $mainnav-link-first-level-arrow-size;\n transform: translateY(-50%);\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n display: none;\n }\n}\n\n[data-level='1'] pn-mainnav-link pn-icon svg {\n width: 100%;\n height: 100%;\n pointer-events: none;\n speak: none;\n}\n\n// -----------------------------------------------------------------------------\n// Level 2 special case\n// -----------------------------------------------------------------------------\npn-mainnav-level[data-level='2']:not([data-level-listcount='1']) pn-mainnav-list:last-child pn-mainnav-link>a {\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n min-width: unset;\n }\n}\n\n// -----------------------------------------------------------------------------\n// Level 2 host context\n// -----------------------------------------------------------------------------\n[data-level='2'] pn-mainnav-link {\n position: static;\n display: inline-block;\n width: 100%;\n height: auto;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n margin-bottom: $mainnav-link-level2-margin-bottom-desktop;\n padding-left: 0;\n }\n}\n\n[data-level='2'] pn-mainnav-link>a {\n padding: $mainnav-link-level2-padding-mobile;\n border-bottom: var(--mainnav-link-level2-border-bottom);\n white-space: normal;\n font-size: $mainnav-link-level2-font-size;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n min-width: $mainnav-link-level2-min-width-desktop;\n padding: $mainnav-link-level2-padding-desktop;\n border: 0;\n border-radius: $mainnav-link-level2-border-radius-desktop;\n }\n}\n\n[data-level='2'] pn-mainnav-link>a:hover {\n background-color: $mainnav-link-hover-background;\n color: $mainnav-link-hover-color;\n}\n\n[data-level='2'] pn-mainnav-link>a:hover,\n[data-level='2'] pn-mainnav-link>a:focus {\n box-shadow: none;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n background-color: $mainnav-link-active-background;\n color: $mainnav-link-hover-color;\n text-decoration: underline;\n outline: 0;\n }\n\n &::before {\n content: none;\n }\n}\n\n[data-level='2'] pn-mainnav-link>a:active {\n box-shadow: none;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n background-color: $mainnav-link-active-background;\n color: $mainnav-link-active-color;\n outline: 0;\n }\n\n &::before {\n content: none;\n }\n}\n\n[data-level='2'] pn-mainnav-link pn-icon {\n display: inline-block;\n width: $mainnav-link-level2-icon-size;\n height: $mainnav-link-level2-icon-size;\n min-width: $mainnav-link-level2-icon-size;\n margin-left: $mainnav-link-level2-icon-margin-left;\n}\n\n[data-level='2'] pn-mainnav-link pn-icon svg {\n width: 100%;\n height: 100%;\n pointer-events: none;\n speak: none;\n}","import { Component, Prop, h, State, Host, Element } from '@stencil/core';\nimport state from './pn-mainnav-store';\nimport { angle_small_down, arrow_right, open_in_new } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-mainnav-link',\n styleUrl: 'pn-mainnav-link.scss',\n shadow: false,\n})\nexport class PnMainnavLink {\n @Element() hostElement: HTMLElement;\n\n /** Name /\n @Prop() name: string = '';\n /* Href /\n @Prop() href: string = '';\n /* Target /\n @Prop() target: string = '';\n /* Link id /\n @Prop() linkid: string = '';\n\n /* Level ID that we control toggle on /\n @State() levelId: string = '';\n /* Menu item is open */\n @State() open: boolean = false;\n @State() hasChildren: boolean = false;\n\n componentWillLoad() {\n this.hasChildren = this.hostElement.querySelectorAll('pn-mainnav-level').length > 0;\n if (this.hasChildren && this.name) {\n const safeLevelName = this.name.toLowerCase().replace(/\\W/gi, '_');\n this.levelId = `mainnav-lvl${2}-${safeLevelName}`;\n }\n }\n\n setOpenMenuLevel() {\n state.openLevel = state.openLevel + '' === this.levelId + '' ? '' : this.levelId;\n }\n\n render() {\n return (\n <Host role=\"listitem\" name={this.name} href={this.href} linkid={this.linkid}>\n {this.hasChildren ? (\n <button onClick={this.setOpenMenuLevel.bind(this)} aria-controls={this.levelId} aria-expanded={(state.openLevel + '' === this.levelId + '') + ''} aria-haspopup=\"true\">\n {this.name}\n <pn-icon class=\"first-level_icon\" icon={angle_small_down} color=\"blue700\" />\n <pn-icon class=\"first-level_arrow\" icon={arrow_right} color=\"blue700\" />\n </button>\n ) : (\n <a\n href={this.href}\n {...(this.target ? { target: this.target } : {})}\n {...(this.target === '_blank' ? { rel: 'nofollow noopener' } : {})}\n {...(this.linkid ? { id: this.linkid } : {})}\n >\n {this.name}\n {this.target === '_blank' ? <pn-icon icon={open_in_new} color=\"blue700\"></pn-icon> : null}\n </a>\n )}\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-mainnav-list2.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const pnMainnavListCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-mainnav-list{display:block;overflow:visible;list-style:none;margin:0;padding:0;grid-area:right}@media screen and (min-width: 64em){pn-mainnav-list+pn-mainnav-list{grid-area:left;border-right:0.1rem solid #d3cecb;margin-bottom:1.6rem;margin-right:-0.7rem;padding-right:0.7rem}}[data-level=\"1\"]>pn-mainnav-list{overflow:scroll;-webkit-overflow-scrolling:touch}@media screen and (min-width: 64em){[data-level=\"1\"]>pn-mainnav-list{height:100%;display:flex;flex-flow:row;overflow:visible;padding:0}}@media screen and (min-width: 64em){[data-level=\"2\"]>pn-mainnav-list[data-navlist-showcolumns=true]{column-count:2;column-gap:1.6rem;padding-bottom:1.6rem}}.mainnav-list-heading{display:none;font-weight:bold;column-span:all;font-size:1.8rem;padding:1.4rem 1.4rem 1.4rem 4.8rem}@media screen and (min-width: 64em){.mainnav-list-heading{display:block;padding:0 1.4rem 1.4rem 1.4rem}}";
+const pnMainnavListCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-mainnav-list{--mainnav-list-secondary-border-right:0.1rem solid #d3cecb;--mainnav-list-heading-font-size:1.8rem;--mainnav-list-heading-color:var(--siteheader-mainnav-list-heading-color, #000000)}pn-mainnav-list{display:block;overflow:visible;list-style:none;margin:0;padding:0;grid-area:right}@media screen and (min-width: 64em){pn-mainnav-list+pn-mainnav-list{grid-area:left;border-right:var(--mainnav-list-secondary-border-right);margin-bottom:1.6rem;margin-right:-0.7rem;padding-right:0.7rem}}[data-level=\"1\"]>pn-mainnav-list{overflow:scroll;-webkit-overflow-scrolling:touch}@media screen and (min-width: 64em){[data-level=\"1\"]>pn-mainnav-list{height:100%;display:flex;flex-flow:row;overflow:visible;padding:0}}@media screen and (min-width: 64em){[data-level=\"2\"]>pn-mainnav-list[data-navlist-showcolumns=true]{column-count:2;column-gap:1.6rem;padding-bottom:1.6rem}}.mainnav-list-heading{display:none;font-weight:bold;column-span:all;font-size:var(--mainnav-list-heading-font-size);padding:1.4rem 1.4rem 1.4rem 4.8rem;color:var(--mainnav-list-heading-color)}@media screen and (min-width: 64em){.mainnav-list-heading{display:block;padding:0 1.4rem 1.4rem 1.4rem}}";
 const PnMainnavListStyle0 = pnMainnavListCss;
 const PnMainnavList = /*@__PURE__*/ proxyCustomElement(class PnMainnavList extends HTMLElement {
@@ -15,7 +15,7 @@ const PnMainnavList = /*@__PURE__*/ proxyCustomElement(class PnMainnavList exten
         this.linkCount = this.hostElement.querySelectorAll(':scope > pn-mainnav-link').length;
     }
     render() {
-        return (h(Host, { key: '86966c572a7cbd574263cbc2c86cd9453f86347a', class: "mainnav-list", role: "list", "data-navlist-itemcount": this.linkCount + '', "data-navlist-showcolumns": (this.linkCount >= 8) + '' }, this.heading ? h("div", { class: "mainnav-list-heading" }, this.heading) : null, h("slot", { key: '5abcc1048dbf7edc1eda42e56d17fd988d9cc16a' })));
+        return (h(Host, { key: '3f433037d2fc867c74a1f5759fadb2f4fffd2c57', class: "mainnav-list", role: "list", "data-navlist-itemcount": this.linkCount + '', "data-navlist-showcolumns": (this.linkCount >= 8) + '' }, this.heading ? h("div", { class: "mainnav-list-heading" }, this.heading) : null, h("slot", { key: '52fd5e61c361e7660f43780fbdf8050835cc7c16' })));
     }
     static get style() { return PnMainnavListStyle0; }
 }, [4, "pn-mainnav-list", {

package/components/pn-mainnav-list2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-mainnav-list2.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,~~8wCAA8wC~~,CAAC;~~AACxyC~~,4BAAe,gBAAgB;;MCMlB,aAAa;;;;uBAGE,EAAE;yBACC,CAAC;;;IAE9B,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,CAAC,MAAM,CAAC;KACvF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,4BAAyB,IAAI,CAAC,SAAS,GAAG,EAAE,8BAA4B,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,IACrI,IAAI,CAAC,OAAO,GAAG,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,OAAO,CAAO,GAAG,IAAI,EAC7E,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-mainnav/pn-mainnav-list.scss?tag=pn-mainnav-list","src/components/navigation/pn-mainnav/pn-mainnav-list.tsx"],"sourcesContent":["@import './pn-mainnav-common.scss';\n@import '../../../globals/main.scss';\n\npn-mainnav-list {\n display: block;\n overflow: visible;\n list-style: none;\n margin: 0;\n padding: 0;\n grid-area: right;\n\n + pn-mainnav-list {\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n grid-area: left;\n border-right: ~~0.1rem solid $gray200~~;\n margin-bottom: 1.6rem;\n margin-right: -0.7rem;\n padding-right: 0.7rem;\n }\n }\n\n [data-level='1'] > & {\n ~~// height: 100%;\n~~ overflow: scroll;\n -webkit-overflow-scrolling: touch;\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n height: 100%;\n display: flex;\n flex-flow: row;\n overflow: visible;\n padding: 0;\n }\n }\n\n &[data-navlist-showcolumns='true'] {\n [data-level='2'] ~~> &~~ {\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n column-count: 2;\n column-gap: 1.6rem;\n padding-bottom: 1.6rem;\n ~~}\n~~ }\n }\n}\n\n.mainnav-list-heading {\n display: none;\n font-weight: bold;\n column-span: all;\n font-size: ~~1.8rem~~;\n padding: ~~1.4rem 1.4rem 1.4rem 4.8rem~~;\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n display: block;\n padding: ~~0 1.4rem 1.4rem 1.4rem~~;\n }\n}\n","import { Component, h, Host, State, Element, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pn-mainnav-list',\n styleUrl: 'pn-mainnav-list.scss',\n shadow: false,\n})\nexport class PnMainnavList {\n @Element() hostElement: HTMLElement;\n\n @Prop() heading: string = '';\n @State() linkCount: number = 0;\n\n componentWillLoad() {\n this.linkCount = this.hostElement.querySelectorAll(':scope > pn-mainnav-link').length;\n }\n\n render() {\n return (\n <Host class=\"mainnav-list\" role=\"list\" data-navlist-itemcount={this.linkCount + ''} data-navlist-showcolumns={(this.linkCount >= 8) + ''}>\n {this.heading ? <div class=\"mainnav-list-heading\">{this.heading}</div> : null}\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-mainnav-list2.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,ijDAAijD,CAAC;AAC3kD,4BAAe,gBAAgB;;MCMlB,aAAa;;;;uBAGE,EAAE;yBACC,CAAC;;;IAE9B,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,CAAC,MAAM,CAAC;KACvF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,4BAAyB,IAAI,CAAC,SAAS,GAAG,EAAE,8BAA4B,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,IACrI,IAAI,CAAC,OAAO,GAAG,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,OAAO,CAAO,GAAG,IAAI,EAC7E,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-mainnav/pn-mainnav-list.scss?tag=pn-mainnav-list","src/components/navigation/pn-mainnav/pn-mainnav-list.tsx"],"sourcesContent":["@import './pn-mainnav-common.scss';\n@import '../../../globals/main.scss';\n\n// -----------------------------------------------------------------------------\n// SCSS tokens\n// Internal layout / implementation constants\n// -----------------------------------------------------------------------------\n$mainnav-list-heading-padding-mobile: 1.4rem 1.4rem 1.4rem 4.8rem;\n$mainnav-list-heading-padding-desktop: 0 1.4rem 1.4rem 1.4rem;\n\n// -----------------------------------------------------------------------------\n// Component token defaults\n// Styling API\n// -----------------------------------------------------------------------------\npn-mainnav-list {\n --mainnav-list-secondary-border-right: 0.1rem solid #{$gray200};\n --mainnav-list-heading-font-size: 1.8rem;\n --mainnav-list-heading-color:var(--siteheader-mainnav-list-heading-color, #{$black});\n}\n\n// -----------------------------------------------------------------------------\n// Host shell / layout\n// -----------------------------------------------------------------------------\npn-mainnav-list {\n display: block;\n overflow: visible;\n list-style: none;\n margin: 0;\n padding: 0;\n grid-area: right;\n}\n\n// -----------------------------------------------------------------------------\n// Sibling placement\n// -----------------------------------------------------------------------------\npn-mainnav-list+pn-mainnav-list {\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n grid-area: left;\n border-right: var(--mainnav-list-secondary-border-right);\n margin-bottom: 1.6rem;\n margin-right: -0.7rem;\n padding-right: 0.7rem;\n }\n}\n\n// -----------------------------------------------------------------------------\n// Level 1 context\n// -----------------------------------------------------------------------------\n[data-level='1']>pn-mainnav-list {\n overflow: scroll;\n -webkit-overflow-scrolling: touch;\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n height: 100%;\n display: flex;\n flex-flow: row;\n overflow: visible;\n padding: 0;\n }\n}\n\n// -----------------------------------------------------------------------------\n// Modifier states\n// -----------------------------------------------------------------------------\npn-mainnav-list[data-navlist-showcolumns='true'] {\n [data-level='2']>& {\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n column-count: 2;\n column-gap: 1.6rem;\n padding-bottom: 1.6rem;\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// Internal elements\n// -----------------------------------------------------------------------------\n.mainnav-list-heading {\n display: none;\n font-weight: bold;\n column-span: all;\n font-size: var(--mainnav-list-heading-font-size);\n padding: $mainnav-list-heading-padding-mobile;\n color:var(--mainnav-list-heading-color);\n\n @media screen and (min-width: $mobilenav-media-abovemobilemode) {\n display: block;\n padding: $mainnav-list-heading-padding-desktop;\n }\n}","import { Component, h, Host, State, Element, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pn-mainnav-list',\n styleUrl: 'pn-mainnav-list.scss',\n shadow: false,\n})\nexport class PnMainnavList {\n @Element() hostElement: HTMLElement;\n\n @Prop() heading: string = '';\n @State() linkCount: number = 0;\n\n componentWillLoad() {\n this.linkCount = this.hostElement.querySelectorAll(':scope > pn-mainnav-link').length;\n }\n\n render() {\n return (\n <Host class=\"mainnav-list\" role=\"list\" data-navlist-itemcount={this.linkCount + ''} data-navlist-showcolumns={(this.linkCount >= 8) + ''}>\n {this.heading ? <div class=\"mainnav-list-heading\">{this.heading}</div> : null}\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-mainnav2.js CHANGED Viewed

@@ -90,7 +90,7 @@ const translations = {
     },
 };
-const pnMainnavCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-mainnav{display:flex;flex-flow:row-reverse;position:relative;width:100%;min-height:5.1rem}@media screen and (min-width: 48em){pn-mainnav{flex-flow:row}}@media screen and (min-width: 64em){pn-mainnav{flex-flow:column}}@media screen and (min-width: 64em){pn-mainnav [slot=footer]{display:none}}pn-mainnav>nav{height:auto;width:100vw;background-color:#ffffff;z-index:2;transform:translateX(100vw);transition:transform 0.2s 0s;transition-property:transform, visibility;display:flex;flex-flow:column;visibility:hidden;position:fixed;top:3em;bottom:0;left:0}@media screen and (min-width: 48em){pn-mainnav>nav{top:6.5em}}pn-mainnav>nav[data-menu-open=true]{visibility:visible;transform:translateX(0)}@media screen and (min-width: 64em){pn-mainnav>nav{flex-flow:row-reverse;top:0;position:static;height:auto;width:100%;justify-content:space-between;visibility:visible;transform:translateX(0)}}pn-mainnav>nav a{text-decoration:none}pn-mainnav>nav button{cursor:pointer}.mainnav-toggle{display:flex;align-items:center;align-self:center}@media screen and (min-width: 64em){.mainnav-toggle{display:none}}.mainnav-toggle>button{display:flex;align-items:center;background-color:#005d92;color:#ffffff;border-radius:2.4rem;border:none;padding:0.6rem 1.6rem;cursor:pointer;font-size:1.6rem}.mainnav-toggle>button:focus{outline:0}.mainnav-toggle>button pn-icon{margin-left:0.8rem;display:block}.mainnav-toggle>button svg{display:block;margin:-0.2rem -0.5rem -0.2rem 0;height:1.9rem;width:1.9rem}";
+const pnMainnavCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-mainnav{--mainnav-nav-background-color:#ffffff;--mainnav-toggle-background-color:#005d92;--mainnav-toggle-text-color:#ffffff;--mainnav-toggle-border-radius:2.4rem;--mainnav-toggle-padding:0.6rem 1.6rem;--mainnav-toggle-font-size:1.6rem;--mainnav-top-position:var(--siteheader-mainnav-top-position-mobile,3em)}pn-mainnav{display:flex;flex-flow:row-reverse;position:relative;width:100%;min-height:5.1rem}@media screen and (min-width: 48em){pn-mainnav{flex-flow:row}}@media screen and (min-width: 64em){pn-mainnav{flex-flow:column}}@media screen and (min-width: 64em){pn-mainnav [slot=footer]{display:none}}pn-mainnav>nav{display:flex;flex-flow:column;position:fixed;top:var(--mainnav-top-position);bottom:0;left:0;width:100vw;height:auto;background-color:var(--mainnav-nav-background-color);z-index:2;visibility:hidden;transform:translateX(100vw);transition:transform 0.2s 0s;transition-property:transform, visibility}@media screen and (min-width: 48em){pn-mainnav>nav{top:6.5em}}@media screen and (min-width: 64em){pn-mainnav>nav{flex-flow:row-reverse;position:static;top:0;width:100%;height:auto;justify-content:space-between;visibility:visible;transform:translateX(0)}}pn-mainnav>nav a{text-decoration:none}pn-mainnav>nav button{cursor:pointer}.mainnav-toggle{display:flex;align-items:center;align-self:center}@media screen and (min-width: 64em){.mainnav-toggle{display:none}}.mainnav-toggle>button{display:flex;align-items:center;background-color:var(--mainnav-toggle-background-color);color:var(--mainnav-toggle-text-color);border:none;border-radius:var(--mainnav-toggle-border-radius);padding:var(--mainnav-toggle-padding);cursor:pointer;font-size:var(--mainnav-toggle-font-size)}.mainnav-toggle>button:focus{outline:0}.mainnav-toggle>button pn-icon{display:block;margin-left:0.8rem}.mainnav-toggle>button svg{display:block;margin:-0.2rem -0.5rem -0.2rem 0;width:1.9rem;height:1.9rem}pn-mainnav>nav[data-menu-open=true]{visibility:visible;transform:translateX(0)}";
 const PnMainnavStyle0 = pnMainnavCss;
 const PnMainnav = /*@__PURE__*/ proxyCustomElement(class PnMainnav extends HTMLElement {
@@ -147,7 +147,7 @@ const PnMainnav = /*@__PURE__*/ proxyCustomElement(class PnMainnav extends HTMLE
         state.openLevel = event.detail;
     }
     render() {
-        return (h(Host, { key: '6514e2ec63194c0ec5b0ecd048abefd2d172d411' }, h("div", { key: 'b23ea254b54e7012a1a266c8f8079660c19ca0fb', class: "mainnav-toggle" }, h("button", { key: '560f2c92bb4d60e26ff8098774ba35c323a28a87', "aria-controls": this.navigationId, "aria-expanded": state.openMenu + '', onClick: this.setMenuOpenState.bind(this) }, state.i18n.mainMenuButton, h("pn-icon", { key: '4b36d30045d98fa12d5e1d0df6875c8f41a51e73', icon: state.openMenu ? close : bars, color: "white" }))), h("nav", { key: '09d11719992e893a0d746a0b001ff8c06427186a', class: "mainnav", "aria-label": this.navLabel, "data-menu-open": state.openMenu + '', "data-menu-currentlevel": state.currentLevel, id: this.navigationId }, h("slot", { key: '422b9d89ae5b8a3b56047a6c98a380336f346f1e' }))));
+        return (h(Host, { key: '1b30fcc03e3f10d965469b31cdb62617cdc16c8b' }, h("div", { key: 'df334e4a7a9c9a34a2dddebab2d5b5f9d815e8c0', class: "mainnav-toggle" }, h("button", { key: '094bcd9687a0dfe49de1cf442ec18d766e97b998', "aria-controls": this.navigationId, "aria-expanded": state.openMenu + '', onClick: this.setMenuOpenState.bind(this) }, state.i18n.mainMenuButton, h("pn-icon", { key: '92d31dd8f0842406ac92ca0930b4862e64805ae2', icon: state.openMenu ? close : bars, color: "white" }))), h("nav", { key: 'c583056ed35ca91dc776e2a4f7d568a353c0f27d', class: "mainnav", "aria-label": this.navLabel, "data-menu-open": state.openMenu + '', "data-menu-currentlevel": state.currentLevel, id: this.navigationId }, h("slot", { key: 'e66850f10c8b2d2963d93b4fc9bfead91be77777' }))));
     }
     static get style() { return PnMainnavStyle0; }
 }, [4, "pn-mainnav", {