@postnord/pn-marketweb-components 4.3.2 → 4.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/loader.cjs.js +1 -1
- package/cjs/pn-language-selector_13.cjs.entry.js +1 -1
- package/cjs/pn-language-selector_13.cjs.entry.js.map +1 -1
- package/cjs/pn-market-web-components.cjs.js +1 -1
- package/cjs/pn-marketweb-header.cjs.entry.js +29 -4
- package/cjs/pn-marketweb-header.cjs.entry.js.map +1 -1
- package/cjs/pn-versa-card.cjs.entry.js +1 -1
- package/cjs/pn-versa-card.cjs.entry.js.map +1 -1
- package/collection/components/cards/pn-versa-card/pn-versa-card.css +17 -4
- package/collection/components/cards/pn-versa-card/pn-versa-card.stories.js +5 -4
- package/collection/components/cards/pn-versa-card/pn-versa-card.stories.js.map +1 -1
- package/collection/components/layout-components/pn-marketweb-header/pn-marketweb-header.js +53 -4
- package/collection/components/layout-components/pn-marketweb-header/pn-marketweb-header.js.map +1 -1
- package/collection/components/layout-components/pn-marketweb-header/pn-marketweb-header.stories.js +49 -8
- package/collection/components/layout-components/pn-marketweb-header/pn-marketweb-header.stories.js.map +1 -1
- package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login.css +0 -1
- package/components/pn-marketweb-header.js +30 -4
- package/components/pn-marketweb-header.js.map +1 -1
- package/components/pn-marketweb-siteheader-login2.js +1 -1
- package/components/pn-marketweb-siteheader-login2.js.map +1 -1
- package/components/pn-versa-card.js +1 -1
- package/components/pn-versa-card.js.map +1 -1
- package/esm/loader.js +1 -1
- package/esm/pn-language-selector_13.entry.js +1 -1
- package/esm/pn-language-selector_13.entry.js.map +1 -1
- package/esm/pn-market-web-components.js +1 -1
- package/esm/pn-marketweb-header.entry.js +29 -4
- package/esm/pn-marketweb-header.entry.js.map +1 -1
- package/esm/pn-versa-card.entry.js +1 -1
- package/esm/pn-versa-card.entry.js.map +1 -1
- package/package.json +1 -1
- package/pn-market-web-components/{p-48e4ce2a.entry.js → p-5c6bdbdd.entry.js} +2 -2
- package/pn-market-web-components/p-5c6bdbdd.entry.js.map +1 -0
- package/pn-market-web-components/{p-5d54637a.entry.js → p-c668f68a.entry.js} +2 -2
- package/pn-market-web-components/{p-5d54637a.entry.js.map → p-c668f68a.entry.js.map} +1 -1
- package/pn-market-web-components/p-e38d2c25.entry.js +2 -0
- package/pn-market-web-components/p-e38d2c25.entry.js.map +1 -0
- package/pn-market-web-components/pn-market-web-components.esm.js +1 -1
- package/pn-market-web-components/pn-market-web-components.esm.js.map +1 -1
- package/types/components/layout-components/pn-marketweb-header/pn-marketweb-header.d.ts +4 -0
- package/types/components/layout-components/pn-marketweb-header/pn-marketweb-header.stories.d.ts +9 -0
- package/types/components.d.ts +8 -0
- package/vscode-data.json +4 -0
- package/pn-market-web-components/p-16570ed2.entry.js +0 -2
- package/pn-market-web-components/p-16570ed2.entry.js.map +0 -1
- package/pn-market-web-components/p-48e4ce2a.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pn-versa-card.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,+pfAA+pf,CAAC;AACvrf,0BAAe,cAAc;;MCchB,WAAW;;;;;;yBAOF,KAAK;0BAGJ,KAAK;4BACgB,MAAM;6BACxB,KAAK;2BACP,KAAK;sBACV,KAAK;0BAED,KAAK;4BACsC,IAAI;uBAE1C,EAAE;qCACI,KAAK;yBAoDP,KAAK;uBACP,KAAK;uBACL,KAAK;;;IApDzB,EAAE,CAAC,KAA+C;QACxD,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACxC;IAED,IAAY,iBAAiB;QAC3B,OAAO,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;KACxF;IAED,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC;KACvD;;IAGD,IAAY,SAAS;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;QACrF,OAAO,KAAK,IAAI,IAAI,CAAC;KACtB;IAED,IAAY,KAAK;QACf,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;KACzB;IAED,IAAY,SAAS;QAEnB,OAAO,IAAI,CAAC,EAAE,CAAC;YACb,eAAe;;YAGf,IAAI,CAAC,UAAU,IAAI,0BAA0B;YAC7C,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,oCAAoC;YACxF,IAAI,CAAC,KAAK,IAAI,qBAAqB;YACnC,IAAI,CAAC,aAAa,IAAI,6BAA6B;YACnD,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,iBAAiB,IAAI,iCAAiC;YACjF,IAAI,CAAC,UAAU,IAAI,+BAA+B;YAClD,IAAI,CAAC,MAAM,IAAI,sBAAsB;YACrC,IAAI,CAAC,WAAW,IAAI,2BAA2B;YAC/C,IAAI,CAAC,SAAS,IAAI,yBAAyB;YAC3C,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,qBAAqB,IAAI,qCAAqC;SAElF,CAAC,CAAC;KACJ;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,OAAO,CAAC;KAC7C;IAED,IAAY,eAAe;QACzB,OAAO,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;KACxE;IAMD,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACpE,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAChE,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;KAEjE;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,oBAAoB,EAAE,GAAG,IAAI,CAAC,iBAAiB,GAAG,GAAG,EAAE,EAAE,IAC3F,IAAI,CAAC,SAAS,KACbA,kEAAK,KAAK,EAAC,4BAA4B,IACrCA,mEAAM,IAAI,EAAC,OAAO,GAAG,CACjB,CAAC,EACR,IAAI,CAAC,WAAW,KACfA,kEAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,eAAe,IAAIA,kEAAK,KAAK,EAAC,2BAA2B,IAC5D,IAAI,CAAC,KAAK,KACTA,mEAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ,CACtD,EAEA,IAAI,CAAC,OAAO,KACXA,QAACE,qBAAU,qDAAC,QAAQ,EAAC,uBAAuB,EAAC,KAAK,EAAE,IAAI,CAAC,YAAY,IAAG,IAAI,CAAC,OAAO,CAAc,CACnG,EAEA,IAAI,CAAC,QAAQ,KACZF,gEAAG,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,QAAQ,CAAK,CACtD,EAEA,IAAI,CAAC,OAAO,IAAIA,kEAAK,KAAK,EAAC,uBAAuB,IACjDA,mEAAM,IAAI,EAAC,KAAK,GAAG,CACf,CAEF,EAEL,IAAI,CAAC,OAAO,IAAIA,kEAAK,KAAK,EAAC,2BAA2B,IACrDA,mEAAM,IAAI,EAAC,KAAK,GAAG,CACf,CAEF,CACP,CACG,CACD,EACP;KACH;;;;;;","names":["h","Host","HeadingTag"],"sources":["src/components/cards/pn-versa-card/pn-versa-card.scss?tag=pn-versa-card","src/components/cards/pn-versa-card/pn-versa-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n// -----------------------------------------------------------------------------\n// SCSS tokens\n// Internal layout / implementation constants\n// -----------------------------------------------------------------------------\n$versa-card-radius: rem16(16px);\n$versa-card-gap: rem16(8px);\n$versa-card-content-gap: rem16(16px);\n$versa-card-content-padding-bottom: rem16(16px);\n$versa-card-text-max-width: rem16(700px);\n$versa-card-cover-padding: rem16(24px);\n$versa-card-horizontal-gap: rem16(32px);\n$versa-card-horizontal-padding: rem16(24px);\n$versa-card-horizontal-padding-lg: rem16(32px);\n$versa-card-sticky-top: rem16(16px);\n\n$versa-card-meta-margin-bottom: rem16(4px);\n$versa-card-cta-gap: rem16(16px);\n$versa-card-cta-min-height: rem16(48px);\n$versa-card-rounded-image-max-width: rem16(120px);\n\n$versa-card-cover-overlay-rgb: rgb(13, 35, 75);\n$versa-card-cover-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8),\n 0 4px 12px rgba(0, 0, 0, 0.5);\n\n$versa-card-cta-icon-offset: -0.3rem;\n$versa-card-cta-transition: 0.3s ease-in-out;\n\n// -----------------------------------------------------------------------------\n// Root / design tokens\n// CSS variables are kept for styling + contextual overrides\n// -----------------------------------------------------------------------------\npn-versa-card {\n display: flex;\n width: 100%;\n height: 100%;\n\n --versa-card-bg: transparent;\n --versa-card-heading-color: inherit;\n --versa-card-text-color: inherit;\n --versa-card-blockquote-border-color: inherit;\n --versa-link-color: #{$blue700};\n\n --versa-card-padding: #{rem16(16px)};\n --versa-card-heading-size: #{rem16(24px)};\n --versa-card-preamble-size: #{rem16(18px)};\n --versa-card-label-size: #{rem16(12px)};\n\n --rte-text-color: var(--versa-card-text-color);\n --rte-heading-color: var(--versa-card-heading-color);\n --rte-blockquote-border-color: var(--versa-card-blockquote-border-color);\n --rte-image-radius: #{$versa-card-radius};\n\n .pn-versa-card-label {\n display: block;\n font-size: var(--versa-card-label-size);\n text-transform: uppercase;\n margin: 0 0 $versa-card-meta-margin-bottom 0;\n }\n\n .pn-versa-card-heading {\n font-size: var(--versa-card-heading-size);\n margin: 0 0 $versa-card-meta-margin-bottom 0;\n color: var(--versa-card-heading-color);\n }\n\n .pn-versa-card-preamble {\n font-size: var(--versa-card-preamble-size);\n margin: 0 0 $versa-card-meta-margin-bottom 0;\n }\n}\n\n// -----------------------------------------------------------------------------\n// Base structure\n// -----------------------------------------------------------------------------\npn-versa-card {\n .pn-versa-card {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n gap: $versa-card-gap;\n position: relative;\n\n .pn-versa-card-imageWrapper {\n\n [slot='image'],\n [slot='image'] picture,\n [slot='image'] picture img {\n display: block;\n width: 100%;\n height: 100%;\n }\n\n [slot='image'] picture img {\n border-radius: $versa-card-radius;\n object-fit: cover;\n }\n\n [slot='image'] picture {\n max-width: $versa-card-text-max-width;\n margin: 0 auto;\n }\n }\n\n .pn-versa-card-content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n width: 100%;\n max-width: 100%;\n gap: $versa-card-content-gap;\n padding-bottom: $versa-card-content-padding-bottom;\n\n --pn-link-current-color: var(--versa-link-color);\n --rte-link-color: var(--pn-link-current-color);\n\n .pn-versa-card-textContent,\n .pn-versa-card-linkwrapper {\n max-width: $versa-card-text-max-width; \n margin: 0 auto;\n }\n\n .pn-versa-card-textContent {\n display: flex;\n flex-direction: column;\n color: var(--versa-card-text-color); \n width: 100%;\n \n }\n\n .pn-versa-card-linkwrapper {\n display: flex;\n align-items: center;\n min-height: $versa-card-cta-min-height;\n width: 100%;\n\n [slot='cta'] {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n gap: $versa-card-cta-gap;\n width: 100%;\n\n a {\n margin-bottom: 0;\n }\n\n pn-button[appearance='light'] {\n color: unset;\n }\n\n a:not(.pn-button) {\n color: var(--pn-link-current-color);\n text-decoration: none;\n font-weight: 400;\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n a.versa-card-cta-link-animated pn-icon svg path {\n fill: var(--pn-link-current-color);\n }\n }\n }\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// Modifiers (visual / state)\n// -----------------------------------------------------------------------------\npn-versa-card {\n .pn-versa-card-hasBg {\n position: relative;\n padding: var(--versa-card-padding);\n border-radius: $versa-card-radius;\n background-color: transparent;\n\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n background-color: var(--versa-card-bg);\n border-radius: inherit;\n z-index: 0;\n pointer-events: none;\n opacity: 1;\n }\n\n >* {\n position: relative;\n z-index: 1;\n }\n\n .pn-versa-card-content {\n padding-bottom: 0;\n }\n\n &.pn-versa-card-transparentBackground {\n &::before {\n opacity: 0.9;\n transition: opacity 500ms ease-in-out;\n }\n\n &:hover::before {\n opacity: 0.98;\n }\n }\n }\n\n .pn-versa-card-hasImageCover {\n padding: 0;\n\n .pn-versa-card-imageWrapper {\n height: 100%;\n margin-bottom: 0;\n\n [slot='image'] picture img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n\n &.pn-versa-card-hasImageCoverText {\n --pn-versa-hover-overlay-alpha: var(--pn-versa-opacity, 0.85);\n\n .pn-versa-card-imageWrapper {\n position: relative;\n height: 100%;\n\n &::before,\n &::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: $versa-card-radius;\n pointer-events: none;\n }\n\n &::before {\n background: radial-gradient(circle,\n rgba($versa-card-cover-overlay-rgb, 0.8) 7%,\n rgba($versa-card-cover-overlay-rgb, 0) 100%);\n z-index: 1;\n }\n\n &::after {\n background-color: rgba($versa-card-cover-overlay-rgb, var(--pn-versa-hover-overlay-alpha));\n opacity: 0;\n transition: opacity 1s;\n z-index: 2;\n }\n\n [slot='image'] picture img {\n position: relative;\n z-index: 0;\n }\n }\n\n .pn-versa-card-content {\n position: absolute;\n inset: 0;\n z-index: 3;\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n\n padding: $versa-card-cover-padding;\n max-width: unset;\n\n color: #{$white};\n text-shadow: $versa-card-cover-text-shadow;\n\n --pn-link-current-color: #{$white};\n --rte-text-color: #{$white};\n --rte-heading-color: #{$white};\n --rte-blockquote-text-color: #{$white};\n --rte-blockquote-border-color: rgba(255, 255, 255, 0.8);\n --rte-quote-author-color: #{$white};\n --rte-quote-author-bg: rgba(255, 255, 255, 0.16);\n\n a {\n color: var(--pn-link-current-color);\n text-shadow: none;\n }\n\n pn-button[appearance='light'] a {\n color: $blue700;\n }\n\n .pn-versa-card-linkwrapper {\n [slot='cta'] {\n a.versa-card-cta-link-animated pn-icon svg path {\n fill: var(--pn-link-current-color);\n }\n }\n }\n }\n\n &:hover .pn-versa-card-imageWrapper::after {\n opacity: 1;\n }\n }\n }\n\n .pn-versa-card-hasRoundedImage {\n .pn-versa-card-imageWrapper {\n width: auto;\n height: auto;\n\n [slot='image'] picture img {\n aspect-ratio: 1 / 1;\n width: 100%;\n height: 100%;\n max-width: $versa-card-rounded-image-max-width;\n border-radius: 50%;\n }\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// Layout + alignment\n// -----------------------------------------------------------------------------\npn-versa-card {\n .pn-versa-card-horizontal {\n flex-direction: column;\n\n &.pn-versa-card-imageGrow {\n .pn-versa-card-imageWrapper {\n [slot='image'] picture img {\n height: 100%;\n }\n }\n }\n }\n\n .pn-versa-card-center {\n .pn-versa-card-imageWrapper {\n align-self: center;\n }\n\n .pn-versa-card-content {\n align-items: center;\n text-align: center;\n\n .pn-versa-card-linkwrapper {\n [slot='cta'] {\n justify-content: center;\n }\n }\n }\n }\n\n .pn-versa-card-alignMiddle {\n\n justify-content: center;\n\n\n .pn-versa-card-content {\n height: auto;\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// Theme / colors\n// -----------------------------------------------------------------------------\npn-versa-card {\n &[data-card-color='white'] {\n --versa-card-bg: #{$white};\n }\n\n &[data-card-color='blue25'] {\n --versa-card-bg: #{$blue25};\n --versa-card-blockquote-border-color: #{$blue400};\n }\n\n &[data-card-color='blue50'] {\n --versa-card-bg: #{$blue50};\n --versa-card-blockquote-border-color: #{$blue400};\n }\n\n &[data-card-color='blue400'] {\n --versa-card-bg: #{$blue400};\n --rte-heading-color:#{$white};\n }\n\n &[data-card-color='blue900'] {\n --versa-card-bg: #{$blue900};\n --versa-card-heading-color: #{$blue200};\n --versa-card-text-color: #{$white};\n --versa-card-blockquote-border-color: #{$white};\n --versa-link-color: #{$white};\n --rte-heading-color:#{$white};\n }\n\n &[data-card-color='coral25'] {\n --versa-card-bg: #{$coral25};\n --versa-card-blockquote-border-color: #{$coral400};\n }\n\n &[data-card-color='coral50'] {\n --versa-card-bg: #{$coral50};\n --versa-card-blockquote-border-color: #{$coral400};\n }\n\n &[data-card-color='green25'] {\n --versa-card-bg: #{$green25};\n --versa-card-blockquote-border-color: #{$green400};\n }\n\n &[data-card-color='green50'] {\n --versa-card-bg: #{$green50};\n --versa-card-blockquote-border-color: #{$green400};\n }\n}\n\n// -----------------------------------------------------------------------------\n// Responsive\n// -----------------------------------------------------------------------------\n@media (min-width: 600px) {\n pn-versa-card {\n .pn-versa-card-horizontal {\n flex-direction: row;\n gap: $versa-card-horizontal-gap;\n\n .pn-versa-card-imageWrapper,\n .pn-versa-card-content {\n flex: 1;\n }\n\n .pn-versa-card-imageWrapper {\n height: auto;\n\n [slot='image'] picture img {\n height: auto;\n position: sticky;\n top: $versa-card-sticky-top;\n }\n }\n\n .pn-versa-card-content {\n width: 50%;\n box-sizing: border-box;\n justify-content: flex-start;\n }\n\n &.pn-versa-card-hasBg {\n padding: $versa-card-horizontal-padding;\n }\n\n &.pn-versa-card-horizontal--imgRight {\n flex-direction: row-reverse;\n }\n\n &.pn-versa-card-imageGrow {\n .pn-versa-card-imageWrapper {\n height: 100%;\n }\n }\n\n &.pn-versa-card-center {\n .pn-versa-card-imageWrapper {\n align-self: auto;\n }\n\n .pn-versa-card-content {\n align-items: stretch;\n text-align: center;\n\n .pn-versa-card-textContent,\n .pn-versa-card-linkwrapper {\n align-self: center;\n }\n\n .pn-versa-card-linkwrapper {\n [slot='cta'] {\n justify-content: center;\n }\n }\n }\n }\n\n &.pn-versa-card-alignMiddle {\n .pn-versa-card-content {\n justify-content: center; //overrides mobile alignMiddle which sets justify-content to space-between\n }\n }\n\n &.pn-versa-card-hasRoundedImage {\n .pn-versa-card-imageWrapper {\n width: 50%;\n\n [slot='image'] picture img {\n max-width: unset;\n }\n }\n }\n }\n }\n}\n\n@media (min-width: 1440px) {\n pn-versa-card {\n .pn-versa-card-horizontal.pn-versa-card-hasBg {\n padding: $versa-card-horizontal-padding-lg;\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// CTA animation\n// -----------------------------------------------------------------------------\npn-versa-card {\n .versa-card-cta-link-animated {\n pn-icon {\n position: relative;\n left: $versa-card-cta-icon-offset;\n transition: $versa-card-cta-transition;\n }\n\n &:hover pn-icon {\n left: 0;\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// RTE\n// -----------------------------------------------------------------------------\npn-versa-card {\n .pn-versa-card-RTEtext {\n [slot='rte'] {\n @include shared-rte;\n\n .pn-quote-card__section {\n max-width: none !important;\n background-color: transparent;\n }\n\n .quoteblock-section .pn-quote-card__section .pn-quote-card__quote {\n border: none !important;\n padding-left: 0 !important;\n }\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// CMS Width Overrides\n// -----------------------------------------------------------------------------\n.onethirdwidth {\n pn-versa-card {\n --rte-forms-spacing: #{rem16(12px)};\n }\n}\n\n@media (min-width: 992px) {\n .onequarterwidth {\n pn-versa-card {\n --versa-card-padding: #{rem16(8px)};\n --versa-card-heading-size: #{rem16(20px)};\n --versa-card-preamble-size: #{rem16(17px)};\n --versa-card-label-size: #{rem16(11px)};\n\n --rte-h2-size: #{rem16(20px)};\n --rte-h3-size: #{rem16(18px)};\n --rte-h4-size: #{rem16(16px)};\n }\n }\n\n .halfwidth,\n .fullwidth {\n pn-versa-card {\n --rte-blockquote-margin: #{rem16(24px)} 0;\n }\n }\n}\n\n@media (min-width: 1640px) {\n .onequarterwidth {\n pn-versa-card {\n --versa-card-padding: #{rem16(16px)};\n }\n }\n}\n\n//when not wrapped by versacardblock class\npn-versa-card:not(:where(.versacardblock *)) {\n height: auto;\n}","import { HeadingTag } from '@/globals/HeadingTag';\nimport {\n Component,\n Element,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\n\n/** A short description about `pn-versa-card` */\n@Component({\n tag: 'pn-versa-card',\n styleUrl: 'pn-versa-card.scss',\n})\nexport class PnVersaCard {\n\n @Element() hostElement: HTMLElement;\n\n @Prop() label?: string;\n @Prop() heading?: string;\n @Prop() preamble?: string;\n @Prop() imageGrow = false;\n\n // Layout / modifiers\n @Prop() horizontal = false;\n @Prop() imgAlignment?: 'left' | 'right' = 'left';\n @Prop() hasImageCover = false;\n @Prop() alignMiddle = false;\n @Prop() center = false;\n\n @Prop() roundImage = false;\n @Prop() headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h3';\n\n @Prop() opacity: number = 90;\n @Prop() transparentBackground = false;\n\n private cx(parts: Array<string | false | null | undefined>) {\n return parts.filter(Boolean).join(' ');\n }\n\n private get hasImageCoverText(): boolean {\n return !!(this.label || this.heading || this.preamble || this.showRte || this.showCta);\n }\n\n private get normalizedOpacity(): number {\n return Math.min(100, Math.max(0, this.opacity ?? 90));\n }\n\n // This getter reads the data-card-color attribute, which is used to set CSS variables for background and text colors in the SCSS file. It returns the color value or null if not set.\n private get cardColor() {\n const value = this.hostElement.getAttribute('data-card-color')?.trim().toLowerCase();\n return value || null;\n }\n\n private get hasBg(): boolean {\n return !!this.cardColor;\n }\n\n private get cardClass() {\n\n return this.cx([\n 'pn-versa-card',\n\n // modifiers \n this.horizontal && 'pn-versa-card-horizontal',\n this.horizontal && this.imgAlignment === 'right' && 'pn-versa-card-horizontal--imgRight',\n this.hasBg && 'pn-versa-card-hasBg',\n this.hasImageCover && 'pn-versa-card-hasImageCover', // can be true without text, just means image covers whole card without text on top\n this.hasImageCover && this.hasImageCoverText && 'pn-versa-card-hasImageCoverText', //has to have imageCover true AND imageCoverText in order for class to be set\n this.roundImage && 'pn-versa-card-hasRoundedImage',\n this.center && 'pn-versa-card-center',\n this.alignMiddle && 'pn-versa-card-alignMiddle',\n this.imageGrow && 'pn-versa-card-imageGrow',\n this.hasBg && this.transparentBackground && 'pn-versa-card-transparentBackground',\n\n ]);\n }\n\n private get showContent(): boolean {\n return this.showTextContent || this.showCta;\n }\n\n private get showTextContent(): boolean {\n return !!(this.label || this.heading || this.preamble || this.showRte);\n }\n\n @State() showImage: boolean = false;\n @State() showRte: boolean = false;\n @State() showCta: boolean = false;\n\n componentWillLoad() {\n this.showImage = !!this.hostElement.querySelector('[slot=\"image\"]');\n this.showRte = !!this.hostElement.querySelector('[slot=\"rte\"]');\n this.showCta = !!this.hostElement.querySelector('[slot=\"cta\"]');\n\n }\n\n render() {\n return (\n <Host>\n <div class={this.cardClass} style={{ '--pn-versa-opacity': `${this.normalizedOpacity / 100}` }}>\n {this.showImage && (\n <div class=\"pn-versa-card-imageWrapper\">\n <slot name=\"image\" />\n </div>)}\n {this.showContent && (\n <div class=\"pn-versa-card-content\">\n {this.showTextContent && <div class=\"pn-versa-card-textContent\">\n {this.label && (\n <span class=\"pn-versa-card-label\">{this.label}</span>\n )}\n\n {this.heading && (\n <HeadingTag cssClass=\"pn-versa-card-heading\" level={this.headingLevel}>{this.heading}</HeadingTag>\n )}\n\n {this.preamble && (\n <p class=\"pn-versa-card-preamble\">{this.preamble}</p>\n )}\n\n {this.showRte && <div class=\"pn-versa-card-RTEtext\">\n <slot name=\"rte\" />\n </div>\n }\n </div>}\n\n {this.showCta && <div class=\"pn-versa-card-linkwrapper\">\n <slot name=\"cta\" />\n </div>}\n\n </div>\n )}\n </div>\n </Host>\n );\n }\n}"],"version":3}
|
|
1
|
+
{"file":"pn-versa-card.entry.cjs.js","mappings":"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","names":["h","Host","HeadingTag"],"sources":["src/components/cards/pn-versa-card/pn-versa-card.scss?tag=pn-versa-card","src/components/cards/pn-versa-card/pn-versa-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n// -----------------------------------------------------------------------------\n// SCSS tokens\n// Internal layout / implementation constants\n// -----------------------------------------------------------------------------\n$versa-card-radius: rem16(16px);\n$versa-card-gap: rem16(8px);\n$versa-card-content-gap: rem16(16px);\n$versa-card-content-padding-bottom: rem16(16px);\n$versa-card-text-max-width: rem16(700px);\n$versa-card-picture-max-width: rem16(700px);\n$versa-card-cover-padding: rem16(24px);\n$versa-card-horizontal-gap: rem16(32px);\n$versa-card-horizontal-padding: rem16(24px);\n$versa-card-horizontal-padding-lg: rem16(32px);\n$versa-card-sticky-top: rem16(16px);\n\n$versa-card-meta-margin-bottom: rem16(4px);\n$versa-card-cta-gap: rem16(16px);\n$versa-card-cta-min-height: rem16(48px);\n$versa-card-rounded-image-max-width: rem16(120px);\n\n$versa-card-cover-overlay-rgb: rgb(13, 35, 75);\n$versa-card-cover-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8),\n 0 4px 12px rgba(0, 0, 0, 0.5);\n\n$versa-card-cta-icon-offset: -0.3rem;\n$versa-card-cta-transition: 0.3s ease-in-out;\n\n// -----------------------------------------------------------------------------\n// Root / design tokens\n// CSS variables are kept for styling + contextual overrides\n// -----------------------------------------------------------------------------\npn-versa-card {\n display: flex;\n width: 100%;\n height: 100%;\n\n --versa-card-bg: transparent;\n --versa-card-heading-color: inherit;\n --versa-card-text-color: inherit;\n --versa-card-blockquote-border-color: inherit;\n --versa-link-color: #{$blue700};\n\n --versa-card-padding: #{rem16(16px)};\n --versa-card-heading-size: #{rem16(24px)};\n --versa-card-preamble-size: #{rem16(18px)};\n --versa-card-label-size: #{rem16(12px)};\n\n --rte-text-color: var(--versa-card-text-color);\n --rte-heading-color: var(--versa-card-heading-color);\n --rte-blockquote-border-color: var(--versa-card-blockquote-border-color);\n --rte-image-radius: #{$versa-card-radius};\n\n .pn-versa-card-label {\n display: block;\n font-size: var(--versa-card-label-size);\n text-transform: uppercase;\n margin: 0 0 $versa-card-meta-margin-bottom 0;\n }\n\n .pn-versa-card-heading {\n font-size: var(--versa-card-heading-size);\n margin: 0 0 $versa-card-meta-margin-bottom 0;\n color: var(--versa-card-heading-color);\n }\n\n .pn-versa-card-preamble {\n font-size: var(--versa-card-preamble-size);\n margin: 0 0 $versa-card-meta-margin-bottom 0;\n }\n}\n\n// -----------------------------------------------------------------------------\n// Base structure\n// -----------------------------------------------------------------------------\npn-versa-card {\n .pn-versa-card {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n gap: $versa-card-gap;\n position: relative;\n\n .pn-versa-card-imageWrapper {\n\n [slot='image'],\n [slot='image'] picture,\n [slot='image'] picture img {\n display: block;\n width: 100%;\n height: 100%;\n }\n\n [slot='image'] picture img {\n border-radius: $versa-card-radius;\n object-fit: cover;\n }\n\n [slot='image'] picture {\n max-width: $versa-card-picture-max-width;\n margin: 0 auto;\n }\n }\n\n .pn-versa-card-content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n width: 100%;\n max-width: 100%;\n gap: $versa-card-content-gap;\n padding-bottom: $versa-card-content-padding-bottom;\n\n --pn-link-current-color: var(--versa-link-color);\n --rte-link-color: var(--pn-link-current-color);\n\n .pn-versa-card-textContent,\n .pn-versa-card-linkwrapper {\n max-width: $versa-card-text-max-width; \n margin: 0 auto;\n }\n\n .pn-versa-card-textContent {\n display: flex;\n flex-direction: column;\n color: var(--versa-card-text-color); \n width: 100%;\n \n }\n\n .pn-versa-card-linkwrapper {\n display: flex;\n align-items: center;\n min-height: $versa-card-cta-min-height;\n width: 100%;\n\n [slot='cta'] {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n gap: $versa-card-cta-gap;\n width: 100%;\n\n a {\n margin-bottom: 0;\n }\n\n pn-button[appearance='light'] {\n color: unset;\n }\n\n a:not(.pn-button) {\n color: var(--pn-link-current-color);\n text-decoration: none;\n font-weight: 400;\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n a.versa-card-cta-link-animated pn-icon svg path {\n fill: var(--pn-link-current-color);\n }\n }\n }\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// Modifiers (visual / state)\n// -----------------------------------------------------------------------------\npn-versa-card {\n .pn-versa-card-hasBg {\n position: relative;\n padding: var(--versa-card-padding);\n border-radius: $versa-card-radius;\n background-color: transparent;\n\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n background-color: var(--versa-card-bg);\n border-radius: inherit;\n z-index: 0;\n pointer-events: none;\n opacity: 1;\n }\n\n >* {\n position: relative;\n z-index: 1;\n }\n\n .pn-versa-card-content {\n padding-bottom: 0;\n }\n\n &.pn-versa-card-transparentBackground {\n &::before {\n opacity: 0.9;\n transition: opacity 500ms ease-in-out;\n }\n\n &:hover::before {\n opacity: 0.98;\n }\n }\n }\n\n .pn-versa-card-hasImageCover {\n padding: 0;\n\n .pn-versa-card-imageWrapper {\n height: 100%;\n margin-bottom: 0;\n\n [slot='image'] picture img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n\n &.pn-versa-card-hasImageCoverText {\n display: grid;\n grid-template-areas: 'cover';\n --pn-versa-hover-overlay-alpha: var(--pn-versa-opacity, 0.85);\n\n .pn-versa-card-imageWrapper {\n grid-area: cover;\n position: relative;\n height: auto;\n min-height: 100%;\n\n &::before,\n &::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: $versa-card-radius;\n pointer-events: none;\n }\n\n &::before {\n background: radial-gradient(circle,\n rgba($versa-card-cover-overlay-rgb, 0.8) 7%,\n rgba($versa-card-cover-overlay-rgb, 0) 100%);\n z-index: 1;\n }\n\n &::after {\n background-color: rgba($versa-card-cover-overlay-rgb, var(--pn-versa-hover-overlay-alpha));\n opacity: 0;\n transition: opacity 1s;\n z-index: 2;\n }\n\n [slot='image'] picture img {\n position: relative;\n z-index: 0;\n }\n\n [slot=\"image\"] picture {\n max-width: unset;\n }\n }\n\n .pn-versa-card-content {\n grid-area: cover;\n position: relative;\n z-index: 3;\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n\n padding: $versa-card-cover-padding;\n box-sizing: border-box;\n height: auto;\n min-height: 100%;\n max-width: unset;\n\n color: #{$white};\n text-shadow: $versa-card-cover-text-shadow;\n\n --pn-link-current-color: #{$white};\n --rte-text-color: #{$white};\n --rte-heading-color: #{$white};\n --rte-blockquote-text-color: #{$white};\n --rte-blockquote-border-color: rgba(255, 255, 255, 0.8);\n --rte-quote-author-color: #{$white};\n --rte-quote-author-bg: rgba(255, 255, 255, 0.16);\n\n a {\n color: var(--pn-link-current-color);\n text-shadow: none;\n }\n\n pn-button[appearance='light'] a {\n color: $blue700;\n }\n\n .pn-versa-card-linkwrapper {\n [slot='cta'] {\n a.versa-card-cta-link-animated pn-icon svg path {\n fill: var(--pn-link-current-color);\n }\n }\n }\n }\n\n &:hover .pn-versa-card-imageWrapper::after {\n opacity: 1;\n }\n }\n }\n\n .pn-versa-card-hasRoundedImage {\n .pn-versa-card-imageWrapper {\n width: auto;\n height: auto;\n\n [slot='image'] picture img {\n aspect-ratio: 1 / 1;\n width: 100%;\n height: 100%;\n max-width: $versa-card-rounded-image-max-width;\n border-radius: 50%;\n }\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// Layout + alignment\n// -----------------------------------------------------------------------------\npn-versa-card {\n .pn-versa-card-horizontal {\n flex-direction: column;\n\n &.pn-versa-card-imageGrow {\n .pn-versa-card-imageWrapper {\n [slot='image'] picture img {\n height: 100%;\n }\n }\n }\n }\n\n // Image determins its own height, content is centered vertically within the card\n .pn-versa-card-center.pn-versa-card-hasImageCover {\n .pn-versa-card-imageWrapper {\n align-self: auto; \n } \n }\n\n //image does not cover the entire card, so it can be centered along with the content\n .pn-versa-card-center:not(.pn-versa-card-hasImageCover) {\n .pn-versa-card-imageWrapper {\n align-self: center;\n } \n }\n\n // Content is centered both vertically and horizontally, image alignment depends on whether the card has image cover or not\n .pn-versa-card-center {\n .pn-versa-card-content {\n align-items: center;\n text-align: center;\n \n .pn-versa-card-linkwrapper {\n [slot='cta'] {\n justify-content: center;\n }\n }\n }\n }\n\n // Content is centered vertically, but aligned to the left or right edge of the card (depending on image position)\n .pn-versa-card-alignMiddle {\n\n justify-content: center;\n\n\n .pn-versa-card-content {\n height: auto;\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// Theme / colors\n// -----------------------------------------------------------------------------\npn-versa-card {\n &[data-card-color='white'] {\n --versa-card-bg: #{$white};\n }\n\n &[data-card-color='blue25'] {\n --versa-card-bg: #{$blue25};\n --versa-card-blockquote-border-color: #{$blue400};\n }\n\n &[data-card-color='blue50'] {\n --versa-card-bg: #{$blue50};\n --versa-card-blockquote-border-color: #{$blue400};\n }\n\n &[data-card-color='blue400'] {\n --versa-card-bg: #{$blue400};\n --rte-heading-color:#{$white};\n }\n\n &[data-card-color='blue900'] {\n --versa-card-bg: #{$blue900};\n --versa-card-heading-color: #{$blue200};\n --versa-card-text-color: #{$white};\n --versa-card-blockquote-border-color: #{$white};\n --versa-link-color: #{$white};\n --rte-heading-color:#{$white};\n }\n\n &[data-card-color='coral25'] {\n --versa-card-bg: #{$coral25};\n --versa-card-blockquote-border-color: #{$coral400};\n }\n\n &[data-card-color='coral50'] {\n --versa-card-bg: #{$coral50};\n --versa-card-blockquote-border-color: #{$coral400};\n }\n\n &[data-card-color='green25'] {\n --versa-card-bg: #{$green25};\n --versa-card-blockquote-border-color: #{$green400};\n }\n\n &[data-card-color='green50'] {\n --versa-card-bg: #{$green50};\n --versa-card-blockquote-border-color: #{$green400};\n }\n}\n\n// -----------------------------------------------------------------------------\n// Responsive\n// -----------------------------------------------------------------------------\n@media (min-width: 600px) {\n pn-versa-card {\n .pn-versa-card-horizontal {\n flex-direction: row;\n gap: $versa-card-horizontal-gap;\n\n .pn-versa-card-imageWrapper,\n .pn-versa-card-content {\n flex: 1;\n }\n\n .pn-versa-card-imageWrapper {\n height: auto;\n\n [slot='image'] picture img {\n height: auto;\n position: sticky;\n top: $versa-card-sticky-top;\n }\n }\n\n .pn-versa-card-content {\n width: 50%;\n box-sizing: border-box;\n justify-content: flex-start;\n }\n\n &.pn-versa-card-hasBg {\n padding: $versa-card-horizontal-padding;\n }\n\n &.pn-versa-card-horizontal--imgRight {\n flex-direction: row-reverse;\n }\n\n &.pn-versa-card-imageGrow {\n .pn-versa-card-imageWrapper {\n height: 100%;\n }\n }\n\n &.pn-versa-card-center {\n .pn-versa-card-imageWrapper {\n align-self: auto;\n }\n\n .pn-versa-card-content {\n align-items: stretch;\n text-align: center;\n\n .pn-versa-card-textContent,\n .pn-versa-card-linkwrapper {\n align-self: center;\n }\n\n .pn-versa-card-linkwrapper {\n [slot='cta'] {\n justify-content: center;\n }\n }\n }\n }\n\n &.pn-versa-card-alignMiddle {\n .pn-versa-card-content {\n justify-content: center; //overrides mobile alignMiddle which sets justify-content to space-between\n }\n }\n\n &.pn-versa-card-hasRoundedImage {\n .pn-versa-card-imageWrapper {\n width: 50%;\n\n [slot='image'] picture img {\n max-width: unset;\n }\n }\n }\n }\n }\n}\n\n@media (min-width: 1440px) {\n pn-versa-card {\n .pn-versa-card-horizontal.pn-versa-card-hasBg {\n padding: $versa-card-horizontal-padding-lg;\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// CTA animation\n// -----------------------------------------------------------------------------\npn-versa-card {\n .versa-card-cta-link-animated {\n pn-icon {\n position: relative;\n left: $versa-card-cta-icon-offset;\n transition: $versa-card-cta-transition;\n }\n\n &:hover pn-icon {\n left: 0;\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// RTE\n// -----------------------------------------------------------------------------\npn-versa-card {\n .pn-versa-card-RTEtext {\n [slot='rte'] {\n @include shared-rte;\n\n .pn-quote-card__section {\n max-width: none !important;\n background-color: transparent;\n }\n\n .quoteblock-section .pn-quote-card__section .pn-quote-card__quote {\n border: none !important;\n padding-left: 0 !important;\n }\n }\n }\n}\n\n// -----------------------------------------------------------------------------\n// CMS Width Overrides\n// -----------------------------------------------------------------------------\n.onethirdwidth {\n pn-versa-card {\n --rte-forms-spacing: #{rem16(12px)};\n }\n}\n\n@media (min-width: 992px) {\n .onequarterwidth {\n pn-versa-card {\n --versa-card-padding: #{rem16(8px)};\n --versa-card-heading-size: #{rem16(20px)};\n --versa-card-preamble-size: #{rem16(17px)};\n --versa-card-label-size: #{rem16(11px)};\n\n --rte-h2-size: #{rem16(20px)};\n --rte-h3-size: #{rem16(18px)};\n --rte-h4-size: #{rem16(16px)};\n }\n }\n\n .halfwidth,\n .fullwidth {\n pn-versa-card {\n --rte-blockquote-margin: #{rem16(24px)} 0;\n }\n }\n}\n\n@media (min-width: 1640px) {\n .onequarterwidth {\n pn-versa-card {\n --versa-card-padding: #{rem16(16px)};\n }\n }\n}\n\n//when not wrapped by versacardblock class\npn-versa-card:not(:where(.versacardblock *)) {\n height: auto;\n}\n","import { HeadingTag } from '@/globals/HeadingTag';\nimport {\n Component,\n Element,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\n\n/** A short description about `pn-versa-card` */\n@Component({\n tag: 'pn-versa-card',\n styleUrl: 'pn-versa-card.scss',\n})\nexport class PnVersaCard {\n\n @Element() hostElement: HTMLElement;\n\n @Prop() label?: string;\n @Prop() heading?: string;\n @Prop() preamble?: string;\n @Prop() imageGrow = false;\n\n // Layout / modifiers\n @Prop() horizontal = false;\n @Prop() imgAlignment?: 'left' | 'right' = 'left';\n @Prop() hasImageCover = false;\n @Prop() alignMiddle = false;\n @Prop() center = false;\n\n @Prop() roundImage = false;\n @Prop() headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h3';\n\n @Prop() opacity: number = 90;\n @Prop() transparentBackground = false;\n\n private cx(parts: Array<string | false | null | undefined>) {\n return parts.filter(Boolean).join(' ');\n }\n\n private get hasImageCoverText(): boolean {\n return !!(this.label || this.heading || this.preamble || this.showRte || this.showCta);\n }\n\n private get normalizedOpacity(): number {\n return Math.min(100, Math.max(0, this.opacity ?? 90));\n }\n\n // This getter reads the data-card-color attribute, which is used to set CSS variables for background and text colors in the SCSS file. It returns the color value or null if not set.\n private get cardColor() {\n const value = this.hostElement.getAttribute('data-card-color')?.trim().toLowerCase();\n return value || null;\n }\n\n private get hasBg(): boolean {\n return !!this.cardColor;\n }\n\n private get cardClass() {\n\n return this.cx([\n 'pn-versa-card',\n\n // modifiers \n this.horizontal && 'pn-versa-card-horizontal',\n this.horizontal && this.imgAlignment === 'right' && 'pn-versa-card-horizontal--imgRight',\n this.hasBg && 'pn-versa-card-hasBg',\n this.hasImageCover && 'pn-versa-card-hasImageCover', // can be true without text, just means image covers whole card without text on top\n this.hasImageCover && this.hasImageCoverText && 'pn-versa-card-hasImageCoverText', //has to have imageCover true AND imageCoverText in order for class to be set\n this.roundImage && 'pn-versa-card-hasRoundedImage',\n this.center && 'pn-versa-card-center',\n this.alignMiddle && 'pn-versa-card-alignMiddle',\n this.imageGrow && 'pn-versa-card-imageGrow',\n this.hasBg && this.transparentBackground && 'pn-versa-card-transparentBackground',\n\n ]);\n }\n\n private get showContent(): boolean {\n return this.showTextContent || this.showCta;\n }\n\n private get showTextContent(): boolean {\n return !!(this.label || this.heading || this.preamble || this.showRte);\n }\n\n @State() showImage: boolean = false;\n @State() showRte: boolean = false;\n @State() showCta: boolean = false;\n\n componentWillLoad() {\n this.showImage = !!this.hostElement.querySelector('[slot=\"image\"]');\n this.showRte = !!this.hostElement.querySelector('[slot=\"rte\"]');\n this.showCta = !!this.hostElement.querySelector('[slot=\"cta\"]');\n\n }\n\n render() {\n return (\n <Host>\n <div class={this.cardClass} style={{ '--pn-versa-opacity': `${this.normalizedOpacity / 100}` }}>\n {this.showImage && (\n <div class=\"pn-versa-card-imageWrapper\">\n <slot name=\"image\" />\n </div>)}\n {this.showContent && (\n <div class=\"pn-versa-card-content\">\n {this.showTextContent && <div class=\"pn-versa-card-textContent\">\n {this.label && (\n <span class=\"pn-versa-card-label\">{this.label}</span>\n )}\n\n {this.heading && (\n <HeadingTag cssClass=\"pn-versa-card-heading\" level={this.headingLevel}>{this.heading}</HeadingTag>\n )}\n\n {this.preamble && (\n <p class=\"pn-versa-card-preamble\">{this.preamble}</p>\n )}\n\n {this.showRte && <div class=\"pn-versa-card-RTEtext\">\n <slot name=\"rte\" />\n </div>\n }\n </div>}\n\n {this.showCta && <div class=\"pn-versa-card-linkwrapper\">\n <slot name=\"cta\" />\n </div>}\n\n </div>\n )}\n </div>\n </Host>\n );\n }\n}"],"version":3}
|
|
@@ -182,11 +182,15 @@ pn-versa-card .pn-versa-card-hasImageCover .pn-versa-card-imageWrapper [slot=ima
|
|
|
182
182
|
object-fit: cover;
|
|
183
183
|
}
|
|
184
184
|
pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText {
|
|
185
|
+
display: grid;
|
|
186
|
+
grid-template-areas: "cover";
|
|
185
187
|
--pn-versa-hover-overlay-alpha: var(--pn-versa-opacity, 0.85);
|
|
186
188
|
}
|
|
187
189
|
pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper {
|
|
190
|
+
grid-area: cover;
|
|
188
191
|
position: relative;
|
|
189
|
-
height:
|
|
192
|
+
height: auto;
|
|
193
|
+
min-height: 100%;
|
|
190
194
|
}
|
|
191
195
|
pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper::before, pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper::after {
|
|
192
196
|
content: "";
|
|
@@ -209,15 +213,21 @@ pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-v
|
|
|
209
213
|
position: relative;
|
|
210
214
|
z-index: 0;
|
|
211
215
|
}
|
|
216
|
+
pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-imageWrapper [slot=image] picture {
|
|
217
|
+
max-width: unset;
|
|
218
|
+
}
|
|
212
219
|
pn-versa-card .pn-versa-card-hasImageCover.pn-versa-card-hasImageCoverText .pn-versa-card-content {
|
|
213
|
-
|
|
214
|
-
|
|
220
|
+
grid-area: cover;
|
|
221
|
+
position: relative;
|
|
215
222
|
z-index: 3;
|
|
216
223
|
display: flex;
|
|
217
224
|
flex-direction: column;
|
|
218
225
|
justify-content: center;
|
|
219
226
|
align-items: center;
|
|
220
227
|
padding: 2.4rem;
|
|
228
|
+
box-sizing: border-box;
|
|
229
|
+
height: auto;
|
|
230
|
+
min-height: 100%;
|
|
221
231
|
max-width: unset;
|
|
222
232
|
color: #ffffff;
|
|
223
233
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.5);
|
|
@@ -260,7 +270,10 @@ pn-versa-card .pn-versa-card-horizontal {
|
|
|
260
270
|
pn-versa-card .pn-versa-card-horizontal.pn-versa-card-imageGrow .pn-versa-card-imageWrapper [slot=image] picture img {
|
|
261
271
|
height: 100%;
|
|
262
272
|
}
|
|
263
|
-
pn-versa-card .pn-versa-card-center .pn-versa-card-imageWrapper {
|
|
273
|
+
pn-versa-card .pn-versa-card-center.pn-versa-card-hasImageCover .pn-versa-card-imageWrapper {
|
|
274
|
+
align-self: auto;
|
|
275
|
+
}
|
|
276
|
+
pn-versa-card .pn-versa-card-center:not(.pn-versa-card-hasImageCover) .pn-versa-card-imageWrapper {
|
|
264
277
|
align-self: center;
|
|
265
278
|
}
|
|
266
279
|
pn-versa-card .pn-versa-card-center .pn-versa-card-content {
|
|
@@ -255,10 +255,11 @@ export const ThreeCardsCenteredQuarter = {
|
|
|
255
255
|
{
|
|
256
256
|
...args,
|
|
257
257
|
hasImageCover: true,
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
label: '',
|
|
261
|
-
|
|
258
|
+
center: true,
|
|
259
|
+
cardColor: 'blue25',
|
|
260
|
+
label: 'This is a card with image cover and image cover text',
|
|
261
|
+
preamble: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.',
|
|
262
|
+
heading: 'I am a card with image cover and image cover text',
|
|
262
263
|
ctaHtml: '',
|
|
263
264
|
},
|
|
264
265
|
], 'onethirdwidth', 3),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pn-versa-card.stories.js","sourceRoot":"","sources":["../../../../src/components/cards/pn-versa-card/pn-versa-card.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { arrow_right } from 'pn-design-assets/pn-assets/icons';\n\nimport {\n createComponent,\n createDocumentation,\n} from '@/globals/documentation/story';\nimport type {\n Meta,\n StoryObj,\n} from '@storybook/web-components';\n\nimport docs from './pn-versa-card-docs.json';\n\ntype VersaSize = 'default' | 'halfwidth' | 'onethirdwidth' | 'onequarterwidth';\ntype CardColor = 'white' | 'blue25' | 'business' | 'blue50' | 'blue400' | 'blue900' | 'coral25' | 'coral50' | 'green25' | 'green50' | 'none';\n\ntype VersaCardStoryArgs = Omit<Partial<HTMLPnVersaCardElement>, 'theme'> & {\n /**\n * Wrapper-only sizing (because SCSS targets `.halfwidth .pn-versa-card-hasBg { ... }`)\n */\n size?: VersaSize;\n\n /** RTE slot content (simulates CMS output) */\n rteHtml?: string;\n\n /** CTA slot content (simulates CMS output) */\n ctaHtml?: string;\n\n /** Story-only attribute mapped to data-card-color */\n cardColor?: CardColor;\n\n imageSrc?: string;\n imageAlt?: string;\n};\n\nconst { argTypes, textContent } = createDocumentation(docs);\n\nconst meta: Meta<VersaCardStoryArgs> = {\n title: 'Components/Cards/Versa card',\n parameters: {\n docs: { description: { story: textContent } },\n },\n args: {\n // Wrapper sizing\n size: 'onequarterwidth',\n\n // Content props\n label: 'Example label',\n heading: 'Example heading',\n headingLevel: 'h3',\n preamble: 'Example preamble',\n imageSrc: 'https://www.postnord.se/siteassets/vi-tar-saker-framat---kampanjsida/paketbox3.jpg',\n imageAlt: 'Versa card image',\n\n // Slot content (optional)\n rteHtml: '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit.</p>',\n ctaHtml: `<pn-button class=\"pn-button\" appearance=\"light\" target=\"_blank\" href=\"google.com\"> Read More </pn-button> <a class=\"versa-card-cta-link-animated\"> Läs mer här <pn-icon icon='${arrow_right}' > </pn-icon> `,\n\n // Modifier props (Stencil @Prop) \n hasImageCover: false,\n imageGrow: false,\n horizontal: false,\n imgAlignment: 'left',\n roundImage: false,\n center: false,\n alignMiddle: false,\n cardColor: 'white',\n opacity: 85,\n },\n argTypes: {\n ...argTypes,\n\n // Slots\n rteHtml: { control: 'text', description: 'Injected into slot=\"rte\".' },\n ctaHtml: { control: 'text', description: 'Injected into slot=\"cta\".' },\n imageSrc: { control: 'text', description: 'Image URL for the image slot.' },\n imageAlt: { control: 'text', description: 'Alt text for the image slot.' },\n\n // Wrapper sizing\n size: {\n control: 'radio',\n options: ['default', 'halfwidth', 'onethirdwidth', 'onequarterwidth'],\n description:\n 'Adds a parent wrapper class for `.halfwidth` / `.onequarterwidth` selectors in SCSS.',\n },\n\n // Story-only data attribute\n cardColor: {\n control: { type: 'select' },\n options: [\n 'none',\n 'white',\n 'blue25',\n 'blue50',\n 'blue400',\n 'blue900',\n 'coral25',\n 'coral50',\n 'green25',\n 'green50',\n ],\n description: 'Sets the data-card-color attribute on pn-versa-card.',\n },\n\n opacity: {\n control: { type: 'range', min: 0, max: 100, step: 5 },\n },\n imgAlignment: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Sets the image to the right side of the card.',\n },\n roundImage: {\n control: 'boolean',\n description: 'Adds rounded image styling to the card.',\n },\n\n headingLevel: {\n control: 'select',\n options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n description: 'Sets the heading level for the card heading.',\n },\n transparentBackground: {\n control: 'boolean',\n description: 'If true, applies reduced opacity to the card background to allow content behind the card to show through.',\n },\n },\n};\n\nexport default meta;\ntype Story = StoryObj<VersaCardStoryArgs>;\n\nfunction buildCard(args: VersaCardStoryArgs) {\n const {\n rteHtml,\n ctaHtml,\n size: _size,\n cardColor,\n ...componentArgs\n } = args;\n\n const { imageSrc,\n imageAlt, } = args;\n\n const el = createComponent('pn-versa-card', componentArgs) as HTMLElement;\n\n if (cardColor) {\n if (cardColor === 'none') {\n el.setAttribute('data-card-color', '');\n } else {\n el.setAttribute('data-card-color', cardColor);\n }\n }\n\n if (rteHtml?.trim()) {\n const rte = document.createElement('div');\n rte.slot = 'rte';\n rte.innerHTML = rteHtml;\n el.appendChild(rte);\n }\n\n if (ctaHtml?.trim()) {\n const cta = document.createElement('div');\n cta.slot = 'cta';\n cta.innerHTML = ctaHtml;\n el.appendChild(cta);\n }\n\n if (imageSrc) {\n const media = document.createElement('div');\n media.slot = 'image';\n\n const picture = document.createElement('picture');\n const img = document.createElement('img');\n img.src = imageSrc;\n\n if (imageAlt) {\n img.alt = imageAlt;\n }\n\n picture.appendChild(img);\n media.appendChild(picture);\n el.appendChild(media);\n }\n\n return el;\n}\n\n/**\n * One card, constrained by wrapper class, and centered on the page.\n */\nfunction renderCenteredQuarter(args: VersaCardStoryArgs) {\n const wrapper = document.createElement('div');\n\n if (args.size && args.size !== 'default') {\n wrapper.className = args.size;\n }\n\n wrapper.style.marginInline = 'auto';\n wrapper.style.display = 'block';\n wrapper.style.maxWidth = '420px';\n\n wrapper.appendChild(buildCard(args));\n return wrapper;\n}\n\nfunction renderCenteredRow(\n items: VersaCardStoryArgs[],\n size: VersaSize,\n columns: number,\n) {\n const wrapper = document.createElement('div');\n\n if (size !== 'default') {\n wrapper.className = size;\n }\n\n wrapper.style.display = 'flex';\n wrapper.style.justifyContent = 'center';\n wrapper.style.width = '100%';\n wrapper.style.height = '100%';\n\n const row = document.createElement('div');\n row.style.display = 'flex';\n row.style.gap = '24px';\n row.style.alignItems = 'stretch';\n row.style.height = '100%';\n\n items.forEach((item) => {\n const col = document.createElement('div');\n col.style.flex = `0 1 ${100 / columns}%`;\n col.style.display = 'flex';\n\n const card = buildCard(item);\n card.style.flex = '1';\n\n col.appendChild(card);\n row.appendChild(col);\n });\n\n wrapper.appendChild(row);\n return wrapper;\n}\n\n/* -----------------------------\n Stories\n--------------------------------*/\n\nexport const OneCardCenteredQuarterPlayGround: Story = {\n name: 'Playground (all controls enabled, for testing purposes)',\n render: (args) =>\n renderCenteredRow(\n [\n {\n ...args,\n rteHtml: '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p> <blockquote> This is a blockquote example.This is a blockquote example.This is a blockquote example.This is a blockquote example. </blockquote>',\n },\n ],\n 'onethirdwidth',\n 1,\n ),\n parameters: {\n controls: {\n exclude: [],\n },\n },\n};\n\nexport const OneCardCenteredQuarterDefault: Story = {\n name: 'Background, Image, Label, Heading, Preamble, RTE, CTA)',\n render: (args) => renderCenteredQuarter(args),\n args: {\n label: 'Test',\n heading: 'Heading',\n preamble: 'Here goes the preamble for this block',\n rteHtml:\n '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n ctaHtml: `<pn-button class=\"btn btn-secondary\">Click me</pn-button>`,\n cardColor: 'blue25',\n },\n parameters: {\n controls: {\n include: ['hasBg', 'label', 'heading', 'headingLevel', 'preamble', 'imageSrc', 'cardColor'],\n },\n },\n};\n\nexport const OneCardRoundedImage: Story = {\n name: 'RoundedImage, Label, Heading, Preamble, RTE, CTA, Alignment)',\n render: (args) => renderCenteredQuarter(args),\n args: {\n roundImage: true,\n center: false,\n label: 'Test',\n heading: 'Heading',\n preamble: 'Here goes the preamble for this block',\n rteHtml:\n '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n },\n parameters: {\n controls: {\n include: ['label', 'heading', 'preamble', 'imageSrc', 'center', 'hasBg', 'cardColor', 'headingLevel'],\n },\n },\n};\n\n\nexport const OneCardCenteredQuarterImageCoverText: Story = {\n name: 'Background, Image, Label, Heading, Preamble, RTE, CTA)',\n render: (args) => renderCenteredQuarter(args),\n args: {\n hasImageCover: true,\n label: 'Test',\n heading: 'Heading',\n preamble: 'Here goes the preamble for this block',\n rteHtml:\n '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n ctaHtml: `<pn-button class=\"btn btn-secondary\">Click me</pn-button> <a target=\"_blank\" href=\"google.com\" class= \"versa-card-cta-link-animated\" > Read More<pn- icon icon='${arrow_right}' > </pn-icon></a > `,\n cardColor: 'blue25',\n },\n parameters: {\n controls: {\n include: ['hasBg', 'label', 'heading', 'preamble', 'imageSrc', 'opacity', 'cardColor', 'center'],\n },\n },\n};\n\nexport const ThreeCardsCenteredQuarter: Story = {\n name: 'Three cards, centered, with background and image (for layout testing)',\n parameters: {\n controls: {\n include: ['imageSrc'],\n },\n },\n render: (args) =>\n renderCenteredRow(\n [\n {\n ...args,\n\n cardColor: 'blue25',\n label: 'Card 1',\n rteHtml:\n '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n },\n {\n ...args,\n label: 'Card 2',\n heading: 'I am a card with no modifier',\n\n },\n {\n ...args,\n hasImageCover: true,\n preamble: '',\n heading: '',\n label: '',\n rteHtml: '',\n ctaHtml: '',\n },\n ],\n 'onethirdwidth',\n 3,\n ),\n};\n\nexport const TwoCardsHorizontalAlignMiddle: Story = {\n name: 'Two cards, horizontal, aligned middle, with background and image (for layout testing)',\n parameters: {\n controls: {\n include: ['hasBg', 'label', 'heading', 'preamble', 'imageSrc', 'imgAlignment', 'roundImage', 'cardColor'],\n },\n },\n render: (args) =>\n renderCenteredRow(\n [\n {\n ...args,\n cardColor: 'blue25',\n horizontal: true,\n alignMiddle: true,\n rteHtml: '<p>These actions help us lower emissions while maintaining reliable service across the region. PostNord is continuously exploring and adopting new technologies that strengthen our operational capabilities and help us deliver better value to customers across the Nordic region.</p>',\n\n },\n {\n ...args,\n preamble: '',\n center: true,\n roundImage: true,\n horizontal: false,\n alignMiddle: true,\n rteHtml: '<p>Excellent operational stability 24/7. Deliveries completely aligned with business needs. Response to disruptions is predictive and swift with total transparency</p>',\n ctaHtml: `<pn-button class=\"btn btn-secondary\">Click me</pn-button> <a target=\"_blank\" href=\"google.com\" class= \"versa-card-cta-link-animated\" > Read More<pn- icon icon='${arrow_right}' > </pn-icon></a > `,\n },\n ],\n 'halfwidth',\n 1,\n ),\n};\n\nexport const OneCardCenteredQuarterDefaultHorizontal: Story = {\n name: 'Horizontal Background, Image, Label, Heading, Preamble, RTE, CTA)',\n parameters: {\n controls: {\n include: ['hasBg', 'label', 'heading', 'preamble', 'imageSrc', 'imgAlignment', 'roundImage', 'cardColor'],\n },\n },\n render: (args) =>\n renderCenteredRow(\n [\n {\n ...args,\n horizontal: true,\n rteHtml:\n '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n ctaHtml: `<pn-button class=\"btn btn-primary\">Click me</pn-button> <a target=\"_blank\" href=\"google.com\" class=\"\"> Read More <pn-icon icon='${arrow_right}' > </pn-icon></a>`,\n },\n ],\n 'halfwidth',\n 1,\n ),\n};\n\n\nexport const OneCardCenteredQuarterTransparentBackground: Story = {\n name: 'Horizontal Transparent Background (Image, Label, Heading, Preamble, RTE, CTA)',\n parameters: {\n controls: {\n include: [\n 'hasBg',\n 'transparentBackground',\n 'label',\n 'heading',\n 'preamble',\n 'imageSrc',\n 'imageAlt',\n 'imgAlignment',\n 'roundImage',\n 'cardColor',\n ],\n },\n },\n render: (args) => {\n const wrapper = document.createElement('div');\n\n wrapper.style.background = 'linear-gradient(135deg, #fff 0%, #000 100%)';\n wrapper.style.padding = '64px 0';\n\n const row = renderCenteredRow(\n [\n {\n ...args,\n horizontal: true,\n rteHtml: `\n <p>This card demonstrates a <strong>10% transparent background</strong>.\n The gradient behind the card should be visible through the background.</p>\n `,\n ctaHtml: `\n <pn-button class=\"btn btn-primary\">Click me</pn-button>\n <a target=\"_blank\" href=\"https://google.com\">\n Read More <pn-icon icon='${arrow_right}'></pn-icon>\n </a>\n `,\n },\n ],\n 'halfwidth',\n 1,\n );\n\n wrapper.appendChild(row);\n\n return wrapper;\n },\n\n args: {\n transparentBackground: true,\n label: 'Story demo',\n heading: 'Transparent background card',\n preamble: 'The card background is slightly transparent while content remains opaque.',\n imgAlignment: 'left',\n roundImage: false,\n cardColor: 'white',\n },\n};"]}
|
|
1
|
+
{"version":3,"file":"pn-versa-card.stories.js","sourceRoot":"","sources":["../../../../src/components/cards/pn-versa-card/pn-versa-card.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { arrow_right } from 'pn-design-assets/pn-assets/icons';\n\nimport {\n createComponent,\n createDocumentation,\n} from '@/globals/documentation/story';\nimport type {\n Meta,\n StoryObj,\n} from '@storybook/web-components';\n\nimport docs from './pn-versa-card-docs.json';\n\ntype VersaSize = 'default' | 'halfwidth' | 'onethirdwidth' | 'onequarterwidth';\ntype CardColor = 'white' | 'blue25' | 'business' | 'blue50' | 'blue400' | 'blue900' | 'coral25' | 'coral50' | 'green25' | 'green50' | 'none';\n\ntype VersaCardStoryArgs = Omit<Partial<HTMLPnVersaCardElement>, 'theme'> & {\n /**\n * Wrapper-only sizing (because SCSS targets `.halfwidth .pn-versa-card-hasBg { ... }`)\n */\n size?: VersaSize;\n\n /** RTE slot content (simulates CMS output) */\n rteHtml?: string;\n\n /** CTA slot content (simulates CMS output) */\n ctaHtml?: string;\n\n /** Story-only attribute mapped to data-card-color */\n cardColor?: CardColor;\n\n imageSrc?: string;\n imageAlt?: string;\n};\n\nconst { argTypes, textContent } = createDocumentation(docs);\n\nconst meta: Meta<VersaCardStoryArgs> = {\n title: 'Components/Cards/Versa card',\n parameters: {\n docs: { description: { story: textContent } },\n },\n args: {\n // Wrapper sizing\n size: 'onequarterwidth',\n\n // Content props\n label: 'Example label',\n heading: 'Example heading',\n headingLevel: 'h3',\n preamble: 'Example preamble',\n imageSrc: 'https://www.postnord.se/siteassets/vi-tar-saker-framat---kampanjsida/paketbox3.jpg',\n imageAlt: 'Versa card image',\n\n // Slot content (optional)\n rteHtml: '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit.</p>',\n ctaHtml: `<pn-button class=\"pn-button\" appearance=\"light\" target=\"_blank\" href=\"google.com\"> Read More </pn-button> <a class=\"versa-card-cta-link-animated\"> Läs mer här <pn-icon icon='${arrow_right}' > </pn-icon> `,\n\n // Modifier props (Stencil @Prop) \n hasImageCover: false,\n imageGrow: false,\n horizontal: false,\n imgAlignment: 'left',\n roundImage: false,\n center: false,\n alignMiddle: false,\n cardColor: 'white',\n opacity: 85,\n },\n argTypes: {\n ...argTypes,\n\n // Slots\n rteHtml: { control: 'text', description: 'Injected into slot=\"rte\".' },\n ctaHtml: { control: 'text', description: 'Injected into slot=\"cta\".' },\n imageSrc: { control: 'text', description: 'Image URL for the image slot.' },\n imageAlt: { control: 'text', description: 'Alt text for the image slot.' },\n\n // Wrapper sizing\n size: {\n control: 'radio',\n options: ['default', 'halfwidth', 'onethirdwidth', 'onequarterwidth'],\n description:\n 'Adds a parent wrapper class for `.halfwidth` / `.onequarterwidth` selectors in SCSS.',\n },\n\n // Story-only data attribute\n cardColor: {\n control: { type: 'select' },\n options: [\n 'none',\n 'white',\n 'blue25',\n 'blue50',\n 'blue400',\n 'blue900',\n 'coral25',\n 'coral50',\n 'green25',\n 'green50',\n ],\n description: 'Sets the data-card-color attribute on pn-versa-card.',\n },\n\n opacity: {\n control: { type: 'range', min: 0, max: 100, step: 5 },\n },\n imgAlignment: {\n control: 'select',\n options: ['left', 'right'],\n description: 'Sets the image to the right side of the card.',\n },\n roundImage: {\n control: 'boolean',\n description: 'Adds rounded image styling to the card.',\n },\n\n headingLevel: {\n control: 'select',\n options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n description: 'Sets the heading level for the card heading.',\n },\n transparentBackground: {\n control: 'boolean',\n description: 'If true, applies reduced opacity to the card background to allow content behind the card to show through.',\n },\n },\n};\n\nexport default meta;\ntype Story = StoryObj<VersaCardStoryArgs>;\n\nfunction buildCard(args: VersaCardStoryArgs) {\n const {\n rteHtml,\n ctaHtml,\n size: _size,\n cardColor,\n ...componentArgs\n } = args;\n\n const { imageSrc,\n imageAlt, } = args;\n\n const el = createComponent('pn-versa-card', componentArgs) as HTMLElement;\n\n if (cardColor) {\n if (cardColor === 'none') {\n el.setAttribute('data-card-color', '');\n } else {\n el.setAttribute('data-card-color', cardColor);\n }\n }\n\n if (rteHtml?.trim()) {\n const rte = document.createElement('div');\n rte.slot = 'rte';\n rte.innerHTML = rteHtml;\n el.appendChild(rte);\n }\n\n if (ctaHtml?.trim()) {\n const cta = document.createElement('div');\n cta.slot = 'cta';\n cta.innerHTML = ctaHtml;\n el.appendChild(cta);\n }\n\n if (imageSrc) {\n const media = document.createElement('div');\n media.slot = 'image';\n\n const picture = document.createElement('picture');\n const img = document.createElement('img');\n img.src = imageSrc;\n\n if (imageAlt) {\n img.alt = imageAlt;\n }\n\n picture.appendChild(img);\n media.appendChild(picture);\n el.appendChild(media);\n }\n\n return el;\n}\n\n/**\n * One card, constrained by wrapper class, and centered on the page.\n */\nfunction renderCenteredQuarter(args: VersaCardStoryArgs) {\n const wrapper = document.createElement('div');\n\n if (args.size && args.size !== 'default') {\n wrapper.className = args.size;\n }\n\n wrapper.style.marginInline = 'auto';\n wrapper.style.display = 'block';\n wrapper.style.maxWidth = '420px';\n\n wrapper.appendChild(buildCard(args));\n return wrapper;\n}\n\nfunction renderCenteredRow(\n items: VersaCardStoryArgs[],\n size: VersaSize,\n columns: number,\n) {\n const wrapper = document.createElement('div');\n\n if (size !== 'default') {\n wrapper.className = size;\n }\n\n wrapper.style.display = 'flex';\n wrapper.style.justifyContent = 'center';\n wrapper.style.width = '100%';\n wrapper.style.height = '100%';\n\n const row = document.createElement('div');\n row.style.display = 'flex';\n row.style.gap = '24px';\n row.style.alignItems = 'stretch';\n row.style.height = '100%';\n\n items.forEach((item) => {\n const col = document.createElement('div');\n col.style.flex = `0 1 ${100 / columns}%`;\n col.style.display = 'flex';\n\n const card = buildCard(item);\n card.style.flex = '1';\n\n col.appendChild(card);\n row.appendChild(col);\n });\n\n wrapper.appendChild(row);\n return wrapper;\n}\n\n/* -----------------------------\n Stories\n--------------------------------*/\n\nexport const OneCardCenteredQuarterPlayGround: Story = {\n name: 'Playground (all controls enabled, for testing purposes)',\n render: (args) =>\n renderCenteredRow(\n [\n {\n ...args,\n rteHtml: '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p> <blockquote> This is a blockquote example.This is a blockquote example.This is a blockquote example.This is a blockquote example. </blockquote>',\n },\n ],\n 'onethirdwidth',\n 1,\n ),\n parameters: {\n controls: {\n exclude: [],\n },\n },\n};\n\nexport const OneCardCenteredQuarterDefault: Story = {\n name: 'Background, Image, Label, Heading, Preamble, RTE, CTA)',\n render: (args) => renderCenteredQuarter(args),\n args: {\n label: 'Test',\n heading: 'Heading',\n preamble: 'Here goes the preamble for this block',\n rteHtml:\n '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n ctaHtml: `<pn-button class=\"btn btn-secondary\">Click me</pn-button>`,\n cardColor: 'blue25',\n },\n parameters: {\n controls: {\n include: ['hasBg', 'label', 'heading', 'headingLevel', 'preamble', 'imageSrc', 'cardColor'],\n },\n },\n};\n\nexport const OneCardRoundedImage: Story = {\n name: 'RoundedImage, Label, Heading, Preamble, RTE, CTA, Alignment)',\n render: (args) => renderCenteredQuarter(args),\n args: {\n roundImage: true,\n center: false,\n label: 'Test',\n heading: 'Heading',\n preamble: 'Here goes the preamble for this block',\n rteHtml:\n '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n },\n parameters: {\n controls: {\n include: ['label', 'heading', 'preamble', 'imageSrc', 'center', 'hasBg', 'cardColor', 'headingLevel'],\n },\n },\n};\n\n\nexport const OneCardCenteredQuarterImageCoverText: Story = {\n name: 'Background, Image, Label, Heading, Preamble, RTE, CTA)',\n render: (args) => renderCenteredQuarter(args),\n args: {\n hasImageCover: true,\n label: 'Test',\n heading: 'Heading',\n preamble: 'Here goes the preamble for this block',\n rteHtml:\n '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n ctaHtml: `<pn-button class=\"btn btn-secondary\">Click me</pn-button> <a target=\"_blank\" href=\"google.com\" class= \"versa-card-cta-link-animated\" > Read More<pn- icon icon='${arrow_right}' > </pn-icon></a > `,\n cardColor: 'blue25',\n },\n parameters: {\n controls: {\n include: ['hasBg', 'label', 'heading', 'preamble', 'imageSrc', 'opacity', 'cardColor', 'center'],\n },\n },\n};\n\nexport const ThreeCardsCenteredQuarter: Story = {\n name: 'Three cards, centered, with background and image (for layout testing)',\n parameters: {\n controls: {\n include: ['imageSrc'],\n },\n },\n render: (args) =>\n renderCenteredRow(\n [\n {\n ...args,\n\n cardColor: 'blue25',\n label: 'Card 1',\n rteHtml:\n '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n },\n {\n ...args,\n label: 'Card 2',\n heading: 'I am a card with no modifier',\n\n },\n {\n ...args,\n hasImageCover: true,\n center: true,\n cardColor: 'blue25',\n label: 'This is a card with image cover and image cover text',\n preamble: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.',\n heading: 'I am a card with image cover and image cover text',\n ctaHtml: '',\n },\n ],\n 'onethirdwidth',\n 3,\n ),\n};\n\nexport const TwoCardsHorizontalAlignMiddle: Story = {\n name: 'Two cards, horizontal, aligned middle, with background and image (for layout testing)',\n parameters: {\n controls: {\n include: ['hasBg', 'label', 'heading', 'preamble', 'imageSrc', 'imgAlignment', 'roundImage', 'cardColor'],\n },\n },\n render: (args) =>\n renderCenteredRow(\n [\n {\n ...args,\n cardColor: 'blue25',\n horizontal: true,\n alignMiddle: true,\n rteHtml: '<p>These actions help us lower emissions while maintaining reliable service across the region. PostNord is continuously exploring and adopting new technologies that strengthen our operational capabilities and help us deliver better value to customers across the Nordic region.</p>',\n\n },\n {\n ...args,\n preamble: '',\n center: true,\n roundImage: true,\n horizontal: false,\n alignMiddle: true,\n rteHtml: '<p>Excellent operational stability 24/7. Deliveries completely aligned with business needs. Response to disruptions is predictive and swift with total transparency</p>',\n ctaHtml: `<pn-button class=\"btn btn-secondary\">Click me</pn-button> <a target=\"_blank\" href=\"google.com\" class= \"versa-card-cta-link-animated\" > Read More<pn- icon icon='${arrow_right}' > </pn-icon></a > `,\n },\n ],\n 'halfwidth',\n 1,\n ),\n};\n\nexport const OneCardCenteredQuarterDefaultHorizontal: Story = {\n name: 'Horizontal Background, Image, Label, Heading, Preamble, RTE, CTA)',\n parameters: {\n controls: {\n include: ['hasBg', 'label', 'heading', 'preamble', 'imageSrc', 'imgAlignment', 'roundImage', 'cardColor'],\n },\n },\n render: (args) =>\n renderCenteredRow(\n [\n {\n ...args,\n horizontal: true,\n rteHtml:\n '<p>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur</a> adipiscing elit. ipsum sodales tincidunt tincidunt nec nisi. Sed ante mauris, tempus sit amet dictum a, ornare tincidunt ex.</p>',\n ctaHtml: `<pn-button class=\"btn btn-primary\">Click me</pn-button> <a target=\"_blank\" href=\"google.com\" class=\"\"> Read More <pn-icon icon='${arrow_right}' > </pn-icon></a>`,\n },\n ],\n 'halfwidth',\n 1,\n ),\n};\n\n\nexport const OneCardCenteredQuarterTransparentBackground: Story = {\n name: 'Horizontal Transparent Background (Image, Label, Heading, Preamble, RTE, CTA)',\n parameters: {\n controls: {\n include: [\n 'hasBg',\n 'transparentBackground',\n 'label',\n 'heading',\n 'preamble',\n 'imageSrc',\n 'imageAlt',\n 'imgAlignment',\n 'roundImage',\n 'cardColor',\n ],\n },\n },\n render: (args) => {\n const wrapper = document.createElement('div');\n\n wrapper.style.background = 'linear-gradient(135deg, #fff 0%, #000 100%)';\n wrapper.style.padding = '64px 0';\n\n const row = renderCenteredRow(\n [\n {\n ...args,\n horizontal: true,\n rteHtml: `\n <p>This card demonstrates a <strong>10% transparent background</strong>.\n The gradient behind the card should be visible through the background.</p>\n `,\n ctaHtml: `\n <pn-button class=\"btn btn-primary\">Click me</pn-button>\n <a target=\"_blank\" href=\"https://google.com\">\n Read More <pn-icon icon='${arrow_right}'></pn-icon>\n </a>\n `,\n },\n ],\n 'halfwidth',\n 1,\n );\n\n wrapper.appendChild(row);\n\n return wrapper;\n },\n\n args: {\n transparentBackground: true,\n label: 'Story demo',\n heading: 'Transparent background card',\n preamble: 'The card background is slightly transparent while content remains opaque.',\n imgAlignment: 'left',\n roundImage: false,\n cardColor: 'white',\n },\n};"]}
|
|
@@ -21,6 +21,7 @@ import { navigateToMenuItem } from "./utils/header-url";
|
|
|
21
21
|
export class PnMarketwebHeader {
|
|
22
22
|
constructor() {
|
|
23
23
|
this.initialActiveMenuMode = 0;
|
|
24
|
+
this.forceThemeAndToggle = -1;
|
|
24
25
|
this.menuThemes = undefined;
|
|
25
26
|
this.market = null;
|
|
26
27
|
this.language = null;
|
|
@@ -139,6 +140,19 @@ export class PnMarketwebHeader {
|
|
|
139
140
|
get logoUrl() {
|
|
140
141
|
return this.vm?.menuModeOptions?.[this.activeMenuMode]?.href ?? '/';
|
|
141
142
|
}
|
|
143
|
+
get hasForcedThemeAndToggle() {
|
|
144
|
+
return Number.isInteger(this.forceThemeAndToggle) && this.forceThemeAndToggle !== -1;
|
|
145
|
+
}
|
|
146
|
+
validateMenuModeIndex(mode) {
|
|
147
|
+
const optionCount = this.vm?.menuModeOptions?.length ?? 0;
|
|
148
|
+
if (!this.vm?.hasMenuSwitching || optionCount === 0) {
|
|
149
|
+
return 0;
|
|
150
|
+
}
|
|
151
|
+
if (!Number.isInteger(mode) || mode < 0) {
|
|
152
|
+
return 0;
|
|
153
|
+
}
|
|
154
|
+
return Math.min(mode, optionCount - 1);
|
|
155
|
+
}
|
|
142
156
|
async loadHeader() {
|
|
143
157
|
this.status = 'loading';
|
|
144
158
|
this.isInitializing = true;
|
|
@@ -202,14 +216,22 @@ export class PnMarketwebHeader {
|
|
|
202
216
|
this.vm = result.vm;
|
|
203
217
|
this.i18n = result.i18n;
|
|
204
218
|
this.status = result.status;
|
|
205
|
-
if (
|
|
219
|
+
if (this.hasForcedThemeAndToggle) {
|
|
220
|
+
this.activeMenuMode = this.validateMenuModeIndex(this.forceThemeAndToggle);
|
|
221
|
+
this.hasResolvedInitialMenuMode = true;
|
|
222
|
+
storeHeaderMenuMode(this.activeMenuMode);
|
|
223
|
+
}
|
|
224
|
+
else if (!result.vm?.hasMenuSwitching) {
|
|
206
225
|
this.activeMenuMode = 0;
|
|
207
226
|
this.hasResolvedInitialMenuMode = false;
|
|
208
227
|
}
|
|
209
228
|
else if (!this.hasResolvedInitialMenuMode) {
|
|
210
|
-
this.activeMenuMode = resolveInitialHeaderMenuMode(true, this.initialActiveMenuMode);
|
|
229
|
+
this.activeMenuMode = this.validateMenuModeIndex(resolveInitialHeaderMenuMode(true, this.initialActiveMenuMode));
|
|
211
230
|
this.hasResolvedInitialMenuMode = true;
|
|
212
231
|
}
|
|
232
|
+
else {
|
|
233
|
+
this.activeMenuMode = this.validateMenuModeIndex(this.activeMenuMode);
|
|
234
|
+
}
|
|
213
235
|
if (headerState.loginManager && result.vm?.siteDefinition?.url) {
|
|
214
236
|
headerState.loginManager.setSiteUrl(result.vm.siteDefinition.url);
|
|
215
237
|
}
|
|
@@ -249,6 +271,9 @@ export class PnMarketwebHeader {
|
|
|
249
271
|
return href;
|
|
250
272
|
}
|
|
251
273
|
onMenuToggleChange = (e) => {
|
|
274
|
+
if (this.hasForcedThemeAndToggle) {
|
|
275
|
+
return;
|
|
276
|
+
}
|
|
252
277
|
const nextMode = e.detail;
|
|
253
278
|
if (nextMode === this.activeMenuMode) {
|
|
254
279
|
return;
|
|
@@ -289,9 +314,9 @@ export class PnMarketwebHeader {
|
|
|
289
314
|
const menuGroups = vm
|
|
290
315
|
? this.getVisibleMenuGroups(vm)
|
|
291
316
|
: { primaryItems: [], sharedItems: [] };
|
|
292
|
-
return (h(Host, { key: '
|
|
317
|
+
return (h(Host, { key: '7caa2d55c8bc19bc5acdcc0561fec5c91ebdb7dd', language: this.language ?? undefined, market: this.market ?? undefined, environment: this.environment ?? undefined, "data-status": this.status, "data-mode": this.activeMenuMode, "data-theme": activeTheme }, h("header", { key: 'd447734933c534ffb13215dd663b60410bd83519' }, vm && (h(Fragment, { key: '30d8f6f7ab3f8eec2210461366336829b4807a83' }, h("pn-marketweb-header-top-row", { key: '53ebe5f1f76fe18de4f64fc11e353e67bdaad6a2', vm: vm, i18n: i18n, language: this.language ?? undefined, siteid: this.siteid ?? undefined, endpoint: this.endpoint ?? undefined, environment: this.environment ?? undefined, userToken: this.userToken, userFullname: this.userFullname, userLoggedin: this.userLoggedin, hideSiteSelector: this.hideSiteSelector, hideLanguageSelector: this.hideLanguageSelector, hideSearch: this.hideSearch, hideLogin: this.hideLogin, showProfileSelection: this.showProfileSelection, showUnifiedLogin: this.showUnifiedLogin, spaMode: this.spaMode, checkUserLoggedInStateInterval: this.checkUserLoggedInStateInterval, useMarketwebLogin: this.useMarketwebLogin, activeMenuMode: this.activeMenuMode, theme: activeTheme, navigateOnMenuToggle: this.navigateOnMenuToggle, menuToggleChangeHandler: this.onMenuToggleChange, adjustSiteSelectorUrl: (href) => this.adjustSiteSelectorUrl(href), logoUrl: logoUrl }, h("slot", { key: 'd84e74d802d4367d2d1c3771d0efa92317332799', name: "header-top-left", slot: "header-top-left" }), h("slot", { key: 'a110554e38f6d169088a242c5675d07235980e7f', name: "header-top-right-start", slot: "header-top-right-start" }), h("slot", { key: '69067f8a28274bf64af01d5375a180930a00ba2e', name: "toprightend", slot: "toprightend" })), h("slot", { key: '731ba47be6e196907022abcba67ed6a1ecb8d935', name: "siteheader-menu-top-button" }), h("pn-marketweb-header-main-row", { key: '1a715c580147fc6e93a79e5cdef265f939613951', vm: vm, i18n: i18n, market: this.market ?? undefined, language: this.language ?? undefined, siteid: this.siteid ?? undefined, hideSearch: this.hideSearch, hideLogin: this.hideLogin, hideLanguageSelector: this.hideLanguageSelector, hideSiteSelector: this.hideSiteSelector, minimizeSearch: this.minimizeSearch, activeMenuMode: this.activeMenuMode, theme: activeTheme, navigateOnMenuToggle: this.navigateOnMenuToggle, primaryItems: menuGroups.primaryItems, sharedItems: menuGroups.sharedItems, showMenuDivider: menuGroups.primaryItems.length > 0 && menuGroups.sharedItems.length > 0, userToken: this.userToken, userFullname: this.userFullname, userLoggedin: this.userLoggedin, endpoint: this.endpoint ?? undefined, environment: this.environment ?? undefined, showProfileSelection: this.showProfileSelection, showUnifiedLogin: this.showUnifiedLogin, checkUserLoggedInStateInterval: this.checkUserLoggedInStateInterval, useMarketwebLogin: this.useMarketwebLogin, spaMode: this.spaMode, menuToggleChangeHandler: this.onMenuToggleChange, mainNavRefHandler: (el) => {
|
|
293
318
|
this.mainNavEl = el;
|
|
294
|
-
}, adjustSiteSelectorUrl: (href) => this.adjustSiteSelectorUrl(href), logoUrl: logoUrl }, h("slot", { key: '
|
|
319
|
+
}, adjustSiteSelectorUrl: (href) => this.adjustSiteSelectorUrl(href), logoUrl: logoUrl }, h("slot", { key: '087be6bb7f4b908553824dd4d31484b069594207', name: "mobile-toprightend", slot: "mobile-toprightend" }), h("slot", { key: 'c9bc4540e9eb9f2ca7b46cc627c72f1e6cedb7ea', name: "header-bottom-button", slot: "header-bottom-button" }), h("slot", { key: 'ee3c12f27ae29c7f735758d0983161c96f8ce271', name: "menu-footer-cta", slot: "menu-footer-cta" })))))));
|
|
295
320
|
}
|
|
296
321
|
static get is() { return "pn-marketweb-header"; }
|
|
297
322
|
static get originalStyleUrls() {
|
|
@@ -330,6 +355,30 @@ export class PnMarketwebHeader {
|
|
|
330
355
|
"reflect": false,
|
|
331
356
|
"defaultValue": "0"
|
|
332
357
|
},
|
|
358
|
+
"forceThemeAndToggle": {
|
|
359
|
+
"type": "number",
|
|
360
|
+
"mutable": false,
|
|
361
|
+
"complexType": {
|
|
362
|
+
"original": "HeaderMenuMode",
|
|
363
|
+
"resolved": "number",
|
|
364
|
+
"references": {
|
|
365
|
+
"HeaderMenuMode": {
|
|
366
|
+
"location": "import",
|
|
367
|
+
"path": "./types/pn-marketweb-header.types",
|
|
368
|
+
"id": "src/components/layout-components/pn-marketweb-header/types/pn-marketweb-header.types.ts::HeaderMenuMode"
|
|
369
|
+
}
|
|
370
|
+
}
|
|
371
|
+
},
|
|
372
|
+
"required": false,
|
|
373
|
+
"optional": false,
|
|
374
|
+
"docs": {
|
|
375
|
+
"tags": [],
|
|
376
|
+
"text": "The index of the top menu toggle page item to force the theme and active toggle. It has the highest priority on selecting the theme and active toggler"
|
|
377
|
+
},
|
|
378
|
+
"attribute": "force-theme-and-toggle",
|
|
379
|
+
"reflect": false,
|
|
380
|
+
"defaultValue": "-1"
|
|
381
|
+
},
|
|
333
382
|
"menuThemes": {
|
|
334
383
|
"type": "string",
|
|
335
384
|
"mutable": false,
|
package/collection/components/layout-components/pn-marketweb-header/pn-marketweb-header.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pn-marketweb-header.js","sourceRoot":"","sources":["../../../../src/components/layout-components/pn-marketweb-header/pn-marketweb-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\n\nimport { FetchHelper } from '../../../globals/FetchHelper';\nimport type {\n EnvironmentName,\n MarketName,\n} from '../../../services/pn-refined-marketweb-context/pn-refined-marketweb-context.types';\nimport {\n state as headerState,\n} from '../pn-marketweb-siteheader/pn-marketweb-siteheader-store';\nimport {\n MenuItem,\n SiteHeaderI18N,\n} from '../pn-marketweb-siteheader/pn-marketweb-siteheader-types';\nimport {\n HeaderStateResult,\n PnMarketwebHeaderService,\n} from './services/pn-marketweb-header.service';\nimport type {\n HeaderApiPayload,\n HeaderMenuMode,\n HeaderViewModel,\n} from './types/pn-marketweb-header.types';\nimport { defaultHeaderI18n } from './utils/header-i18n';\nimport { prependHomeMenuItem } from './utils/header-menu';\nimport {\n type HeaderTheme,\n resolveHeaderMenuThemes,\n} from './utils/header-theme';\nimport {\n extractToggleableMenuStructure,\n getToggleRootForMenuItems,\n getVisibleMenuGroupsForMode,\n} from './utils/header-toggle-menu';\nimport {\n resolveInitialHeaderMenuMode,\n storeHeaderMenuMode,\n} from './utils/header-toggle-menu.storage';\nimport { navigateToMenuItem } from './utils/header-url';\n\n/**\n * New marketweb header wrapper.\n *\n * Responsibilities:\n * - resolve runtime context\n * - fetch header data\n * - map backend data into a renderable view model\n * - render the layout using existing leaf/header components\n * - owns the active menu mode when a switchable menu structure exists\n */\n@Component({\n tag: 'pn-marketweb-header',\n styleUrl: 'pn-marketweb-header.scss',\n})\nexport class PnMarketwebHeader {\n @Element() hostElement: HTMLElement;\n\n @Prop() initialActiveMenuMode: HeaderMenuMode = 0;\n\n /** Optional menu theme labels, e.g. ['Business', 'Private']. passed in as a sting via cms */\n @Prop() menuThemes?: string;\n\n /** Market to use for the header. Falls back to refined context resolution when omitted. */\n @Prop({ mutable: true, reflect: true }) market: MarketName | null = null;\n\n /** Language to use for the header. Falls back to refined context resolution when omitted. */\n @Prop({ mutable: true, reflect: true }) language: string | null = null;\n\n /** Environment to use for the header. Falls back to refined context resolution when omitted. */\n @Prop({ mutable: true, reflect: true }) environment: EnvironmentName | null = null;\n\n /** Explicit endpoint override. When omitted it is resolved from market + environment. */\n @Prop() endpoint: string | null = null;\n\n /** Current site id (guid), forwarded into the search component. */\n @Prop() siteid: string | null = null;\n\n /** Current page id forwarded to the header backend endpoint. */\n @Prop() pageId: string = '';\n\n /** Access token passed from backend. */\n @Prop() userToken: string = '';\n\n /** User full name from backend. */\n @Prop() userFullname: string = '';\n\n /** User logged in state from backend. */\n @Prop({ reflect: true }) userLoggedin: boolean = false;\n\n /** Hides the site selector when true. */\n @Prop({ reflect: true }) hideSiteSelector: boolean = false;\n\n /** Hides the generated home menu item when true. */\n @Prop({ reflect: true }) hideHomeMenuItem: boolean = false;\n\n /** Hides the language selector when true. */\n @Prop({ reflect: true }) hideLanguageSelector: boolean = false;\n\n /** Hides search when true. */\n @Prop({ reflect: true }) hideSearch: boolean = false;\n\n /** Hides login when true. */\n @Prop({ reflect: true }) hideLogin: boolean = false;\n\n /** Enables profile selection presentation in the login component. */\n @Prop({ reflect: true }) showProfileSelection: boolean = false;\n\n /** Enables unified login presentation in the login component. */\n @Prop() showUnifiedLogin: boolean = false;\n\n /** Adjust relative URLs against the site domain when true. */\n @Prop() siteDomainInUrls: boolean = false;\n\n /** Autocomplete endpoint forwarded into the search view model. */\n @Prop() autocompleteEndpoint: string = '';\n\n /** Whether session forwarding should be attempted after login state changes. */\n @Prop() sessionForward: boolean = false;\n\n /** Enables cached requests in FetchHelper when true. */\n @Prop() cache: boolean = false;\n\n /** Optional override for translated search placeholder text. */\n @Prop() searchPlaceholder: string = '';\n\n /** When true, language selector options should not navigate directly by URL. */\n @Prop() spaMode: boolean = false;\n\n /** Interval forwarded to the login component for login state checks. */\n @Prop() checkUserLoggedInStateInterval: number = 0;\n\n /** Enables marketweb login mode in the login component. */\n @Prop() useMarketwebLogin: boolean = false;\n\n /** When true, changing menu mode navigates to the selected root href. */\n @Prop() navigateOnMenuToggle: boolean = true;\n\n /** The mapped UI state used for rendering the header. */\n @State() vm: HeaderViewModel | null = null;\n\n /** Current translations for the active language. */\n @State() i18n: SiteHeaderI18N = defaultHeaderI18n;\n\n /** Simple loading state for the wrapper. */\n @State() status: 'idle' | 'loading' | 'ready' | 'error' = 'loading';\n\n /** Whether the main search should collapse to a compact version. */\n @State() minimizeSearch: boolean = false;\n\n /** Internal login state used for special link handling. */\n @State() loggedIn: boolean = false;\n\n /** Active menu mode when the backend structure supports menu switching. */\n @State() activeMenuMode: HeaderMenuMode = 0;\n\n /** Guard used to prevent watchers from reloading during initial setup. */\n private isInitializing = false;\n\n /** Cached raw backend payload so UI-only prop changes can remap without refetching. */\n private rawHeaderData: HeaderApiPayload | null = null;\n\n /** Main nav element reference used for overflow calculation. */\n private mainNavEl?: HTMLElement;\n\n /** Emitted when the language changes. */\n @Event() changeLanguage: EventEmitter<string>;\n\n /** Emitted when the market changes. */\n @Event() changeMarket: EventEmitter<MarketName>;\n\n /** Shared helper for backend requests. */\n private fetchHelper = new FetchHelper('marketweb-header');\n\n /** Service for context resolution and header-data fetching. */\n private headerService = new PnMarketwebHeaderService(this.fetchHelper);\n\n private hasResolvedInitialMenuMode = false;\n\n async componentWillLoad() {\n await this.loadHeader();\n }\n\n @Listen('setLanguage')\n onLanguageSelectorChange(e: CustomEvent<string>) {\n this.language = e.detail;\n window.dispatchEvent(new CustomEvent('marketweb-languagechange', { detail: this.language }));\n }\n\n @Watch('language')\n async onLanguageChange() {\n if (this.isInitializing || !this.language) {\n return;\n }\n\n this.changeLanguage.emit(this.language);\n await this.loadHeader();\n }\n\n @Watch('market')\n async onMarketChange() {\n if (this.isInitializing || !this.market) {\n return;\n }\n\n this.changeMarket.emit(this.market);\n await this.loadHeader();\n }\n\n @Watch('environment')\n async onEnvironmentChange() {\n if (this.isInitializing || !this.environment) {\n return;\n }\n\n await this.loadHeader();\n }\n\n @Watch('endpoint')\n async onEndpointChange() {\n if (this.isInitializing) {\n return;\n }\n\n await this.loadHeader();\n }\n\n @Watch('pageId')\n async onPageIdChange() {\n if (this.isInitializing) {\n return;\n }\n\n await this.loadHeader();\n }\n\n @Watch('hideHomeMenuItem')\n @Watch('siteDomainInUrls')\n @Watch('autocompleteEndpoint')\n @Watch('searchPlaceholder')\n onPresentationInputChange() {\n if (this.isInitializing) {\n return;\n }\n\n this.remapViewModel();\n }\n\n @Listen('loginStateChange')\n onLoginStateChange(e: CustomEvent<{ loggedIn?: boolean; token?: string }>) {\n if (typeof e.detail?.loggedIn === 'boolean') {\n this.loggedIn = e.detail.loggedIn;\n }\n\n if (e.detail?.loggedIn && e.detail?.token && this.sessionForward) {\n try {\n // fetch('/api/userprofile/sync?token=' + e.detail.token);\n } catch {\n // ignored intentionally\n }\n }\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n requestAnimationFrame(() => {\n this.checkMenuOverflow();\n });\n }\n\n private get menuThemeList(): HeaderTheme[] {\n return resolveHeaderMenuThemes(\n this.menuThemes,\n this.vm?.menuModeOptions\n );\n }\n\n\n private get logoUrl(): string {\n return this.vm?.menuModeOptions?.[this.activeMenuMode]?.href ?? '/';\n }\n\n private async loadHeader() {\n this.status = 'loading';\n this.isInitializing = true;\n\n try {\n const result = await this.headerService.loadHeaderState({\n market: this.market,\n language: this.language,\n environment: this.environment,\n endpoint: this.endpoint,\n pageId: this.pageId,\n cache: this.cache,\n hideHomeMenuItem: this.hideHomeMenuItem,\n siteDomainInUrls: this.siteDomainInUrls,\n autocompleteEndpoint: this.autocompleteEndpoint,\n searchPlaceholder: this.searchPlaceholder,\n });\n\n this.applyHeaderState(result);\n\n requestAnimationFrame(() => {\n this.checkMenuOverflow();\n });\n } catch (error) {\n console.error('[pn-marketweb-header] Failed to load header', error);\n this.rawHeaderData = null;\n this.vm = null;\n this.status = 'error';\n } finally {\n this.isInitializing = false;\n }\n }\n\n private remapViewModel() {\n const context = {\n market: this.market,\n language: this.language,\n environment: this.environment,\n endpoint: this.endpoint,\n pageId: this.pageId ?? '',\n };\n\n const result = this.headerService.remapHeaderState({\n context,\n rawHeaderData: this.rawHeaderData,\n language: this.language,\n hideHomeMenuItem: this.hideHomeMenuItem,\n siteDomainInUrls: this.siteDomainInUrls,\n autocompleteEndpoint: this.autocompleteEndpoint,\n searchPlaceholder: this.searchPlaceholder,\n currentActiveMenuMode: this.activeMenuMode,\n });\n\n this.applyHeaderState(result);\n\n requestAnimationFrame(() => {\n this.checkMenuOverflow();\n });\n }\n\n private applyHeaderState(result: HeaderStateResult) {\n this.market = result.context.market;\n this.language = result.context.language;\n this.environment = result.context.environment;\n this.endpoint = result.context.endpoint;\n\n this.rawHeaderData = result.rawHeaderData;\n this.vm = result.vm;\n this.i18n = result.i18n;\n this.status = result.status;\n\n if (!result.vm?.hasMenuSwitching) {\n this.activeMenuMode = 0;\n this.hasResolvedInitialMenuMode = false;\n } else if (!this.hasResolvedInitialMenuMode) {\n this.activeMenuMode = resolveInitialHeaderMenuMode(\n true,\n this.initialActiveMenuMode,\n );\n this.hasResolvedInitialMenuMode = true;\n }\n\n if (headerState.loginManager && result.vm?.siteDefinition?.url) {\n headerState.loginManager.setSiteUrl(result.vm.siteDefinition.url);\n }\n }\n\n private checkMenuOverflow() {\n const mainNavEl = this.mainNavEl;\n if (!mainNavEl) {\n return;\n }\n\n const firstMenuLevel = mainNavEl.querySelector('pn-mainnav-level') as HTMLElement | null;\n if (!firstMenuLevel) {\n return;\n }\n\n const navContainer = firstMenuLevel.parentElement;\n if (!navContainer) {\n return;\n }\n\n const availableWidth = navContainer.clientWidth;\n const requiredWidth = firstMenuLevel.scrollWidth;\n\n this.minimizeSearch = requiredWidth > availableWidth;\n }\n\n private isUserLoggedIn() {\n return this.loggedIn || this.userLoggedin;\n }\n\n private adjustSiteSelectorUrl(href: string): string {\n if (!this.isUserLoggedIn()) {\n return href;\n }\n\n const loginDomains = ['portal.postnord.com'];\n const matchedHref = loginDomains.some(domain => href.includes(domain));\n\n if (!matchedHref) {\n return href;\n }\n\n if (headerState.loginManager) {\n return headerState.loginManager.getLoginUrl(href);\n }\n\n return href;\n }\n\n private onMenuToggleChange = (e: CustomEvent<HeaderMenuMode>) => {\n const nextMode = e.detail;\n\n if (nextMode === this.activeMenuMode) {\n return;\n }\n\n this.activeMenuMode = nextMode;\n storeHeaderMenuMode(nextMode);\n\n if (!this.navigateOnMenuToggle || !this.vm?.rawMenuItems.length) {\n return;\n }\n\n const targetRoot = getToggleRootForMenuItems(this.vm.rawMenuItems, nextMode);\n navigateToMenuItem(targetRoot);\n };\n\n private getVisibleMenuGroups(vm: HeaderViewModel): {\n primaryItems: MenuItem[];\n sharedItems: MenuItem[];\n } {\n if (!vm.rawMenuItems.length) {\n return {\n primaryItems: vm.menuItems,\n sharedItems: [],\n };\n }\n\n const structure = extractToggleableMenuStructure(vm.rawMenuItems);\n\n if (structure.modeRoots.length === 0) {\n return {\n primaryItems: vm.menuItems,\n sharedItems: [],\n };\n }\n\n const groups = getVisibleMenuGroupsForMode(vm.rawMenuItems, this.activeMenuMode);\n\n return {\n primaryItems: prependHomeMenuItem(\n groups.primaryItems,\n this.i18n,\n vm.siteDefinition?.url ?? '/',\n this.hideHomeMenuItem,\n ),\n sharedItems: groups.sharedItems,\n };\n }\n\n\n\n\n render() {\n const vm = this.vm;\n const i18n = this.i18n;\n\n const activeTheme: HeaderTheme =\n this.menuThemeList[this.activeMenuMode] ?? 'private';\n\n const logoUrl = this.logoUrl;\n\n const menuGroups = vm\n ? this.getVisibleMenuGroups(vm)\n : { primaryItems: [] as MenuItem[], sharedItems: [] as MenuItem[] };\n\n\n return (\n <Host\n language={this.language ?? undefined}\n market={this.market ?? undefined}\n environment={this.environment ?? undefined}\n data-status={this.status}\n data-mode={this.activeMenuMode}\n data-theme={activeTheme}\n >\n <header>\n {vm && (\n <Fragment>\n <pn-marketweb-header-top-row\n vm={vm}\n i18n={i18n}\n language={this.language ?? undefined}\n siteid={this.siteid ?? undefined}\n endpoint={this.endpoint ?? undefined}\n environment={this.environment ?? undefined}\n userToken={this.userToken}\n userFullname={this.userFullname}\n userLoggedin={this.userLoggedin}\n hideSiteSelector={this.hideSiteSelector}\n hideLanguageSelector={this.hideLanguageSelector}\n hideSearch={this.hideSearch}\n hideLogin={this.hideLogin}\n showProfileSelection={this.showProfileSelection}\n showUnifiedLogin={this.showUnifiedLogin}\n spaMode={this.spaMode}\n checkUserLoggedInStateInterval={this.checkUserLoggedInStateInterval}\n useMarketwebLogin={this.useMarketwebLogin}\n activeMenuMode={this.activeMenuMode}\n theme={activeTheme}\n navigateOnMenuToggle={this.navigateOnMenuToggle}\n menuToggleChangeHandler={this.onMenuToggleChange}\n adjustSiteSelectorUrl={(href: string) => this.adjustSiteSelectorUrl(href)}\n logoUrl={logoUrl}\n >\n <slot name=\"header-top-left\" slot=\"header-top-left\"></slot>\n <slot name=\"header-top-right-start\" slot=\"header-top-right-start\"></slot>\n <slot name=\"toprightend\" slot=\"toprightend\"></slot>\n </pn-marketweb-header-top-row>\n\n <slot name=\"siteheader-menu-top-button\"></slot>\n\n <pn-marketweb-header-main-row\n vm={vm}\n i18n={i18n}\n market={this.market ?? undefined}\n language={this.language ?? undefined}\n siteid={this.siteid ?? undefined}\n hideSearch={this.hideSearch}\n hideLogin={this.hideLogin}\n hideLanguageSelector={this.hideLanguageSelector}\n hideSiteSelector={this.hideSiteSelector}\n minimizeSearch={this.minimizeSearch}\n activeMenuMode={this.activeMenuMode}\n theme={activeTheme}\n navigateOnMenuToggle={this.navigateOnMenuToggle}\n primaryItems={menuGroups.primaryItems}\n sharedItems={menuGroups.sharedItems}\n showMenuDivider={menuGroups.primaryItems.length > 0 && menuGroups.sharedItems.length > 0}\n userToken={this.userToken}\n userFullname={this.userFullname}\n userLoggedin={this.userLoggedin}\n endpoint={this.endpoint ?? undefined}\n environment={this.environment ?? undefined}\n showProfileSelection={this.showProfileSelection}\n showUnifiedLogin={this.showUnifiedLogin}\n checkUserLoggedInStateInterval={this.checkUserLoggedInStateInterval}\n useMarketwebLogin={this.useMarketwebLogin}\n spaMode={this.spaMode}\n menuToggleChangeHandler={this.onMenuToggleChange}\n mainNavRefHandler={(el: HTMLElement | undefined) => {\n this.mainNavEl = el;\n }}\n adjustSiteSelectorUrl={(href: string) => this.adjustSiteSelectorUrl(href)}\n logoUrl={logoUrl}\n >\n <slot name=\"mobile-toprightend\" slot=\"mobile-toprightend\"></slot>\n <slot name=\"header-bottom-button\" slot=\"header-bottom-button\"></slot>\n <slot name=\"menu-footer-cta\" slot=\"menu-footer-cta\"></slot>\n </pn-marketweb-header-main-row>\n\n </Fragment>\n )}\n </header>\n </Host>\n );\n }\n}"]}
|
|
1
|
+
{"version":3,"file":"pn-marketweb-header.js","sourceRoot":"","sources":["../../../../src/components/layout-components/pn-marketweb-header/pn-marketweb-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\n\nimport { FetchHelper } from '../../../globals/FetchHelper';\nimport type {\n EnvironmentName,\n MarketName,\n} from '../../../services/pn-refined-marketweb-context/pn-refined-marketweb-context.types';\nimport {\n state as headerState,\n} from '../pn-marketweb-siteheader/pn-marketweb-siteheader-store';\nimport {\n MenuItem,\n SiteHeaderI18N,\n} from '../pn-marketweb-siteheader/pn-marketweb-siteheader-types';\nimport {\n HeaderStateResult,\n PnMarketwebHeaderService,\n} from './services/pn-marketweb-header.service';\nimport type {\n HeaderApiPayload,\n HeaderMenuMode,\n HeaderViewModel,\n} from './types/pn-marketweb-header.types';\nimport { defaultHeaderI18n } from './utils/header-i18n';\nimport { prependHomeMenuItem } from './utils/header-menu';\nimport {\n type HeaderTheme,\n resolveHeaderMenuThemes,\n} from './utils/header-theme';\nimport {\n extractToggleableMenuStructure,\n getToggleRootForMenuItems,\n getVisibleMenuGroupsForMode,\n} from './utils/header-toggle-menu';\nimport {\n resolveInitialHeaderMenuMode,\n storeHeaderMenuMode,\n} from './utils/header-toggle-menu.storage';\nimport { navigateToMenuItem } from './utils/header-url';\n\n/**\n * New marketweb header wrapper.\n *\n * Responsibilities:\n * - resolve runtime context\n * - fetch header data\n * - map backend data into a renderable view model\n * - render the layout using existing leaf/header components\n * - owns the active menu mode when a switchable menu structure exists\n */\n@Component({\n tag: 'pn-marketweb-header',\n styleUrl: 'pn-marketweb-header.scss',\n})\nexport class PnMarketwebHeader {\n @Element() hostElement: HTMLElement;\n\n @Prop() initialActiveMenuMode: HeaderMenuMode = 0;\n \n /** The index of the top menu toggle page item to force the theme and active toggle. It has the highest priority on selecting the theme and active toggler */\n @Prop() forceThemeAndToggle: HeaderMenuMode = -1;\n\n /** Optional menu theme labels, e.g. ['Business', 'Private']. passed in as a sting via cms */\n @Prop() menuThemes?: string;\n\n /** Market to use for the header. Falls back to refined context resolution when omitted. */\n @Prop({ mutable: true, reflect: true }) market: MarketName | null = null;\n\n /** Language to use for the header. Falls back to refined context resolution when omitted. */\n @Prop({ mutable: true, reflect: true }) language: string | null = null;\n\n /** Environment to use for the header. Falls back to refined context resolution when omitted. */\n @Prop({ mutable: true, reflect: true }) environment: EnvironmentName | null = null;\n\n /** Explicit endpoint override. When omitted it is resolved from market + environment. */\n @Prop() endpoint: string | null = null;\n\n /** Current site id (guid), forwarded into the search component. */\n @Prop() siteid: string | null = null;\n\n /** Current page id forwarded to the header backend endpoint. */\n @Prop() pageId: string = '';\n\n /** Access token passed from backend. */\n @Prop() userToken: string = '';\n\n /** User full name from backend. */\n @Prop() userFullname: string = '';\n\n /** User logged in state from backend. */\n @Prop({ reflect: true }) userLoggedin: boolean = false;\n\n /** Hides the site selector when true. */\n @Prop({ reflect: true }) hideSiteSelector: boolean = false;\n\n /** Hides the generated home menu item when true. */\n @Prop({ reflect: true }) hideHomeMenuItem: boolean = false;\n\n /** Hides the language selector when true. */\n @Prop({ reflect: true }) hideLanguageSelector: boolean = false;\n\n /** Hides search when true. */\n @Prop({ reflect: true }) hideSearch: boolean = false;\n\n /** Hides login when true. */\n @Prop({ reflect: true }) hideLogin: boolean = false;\n\n /** Enables profile selection presentation in the login component. */\n @Prop({ reflect: true }) showProfileSelection: boolean = false;\n\n /** Enables unified login presentation in the login component. */\n @Prop() showUnifiedLogin: boolean = false;\n\n /** Adjust relative URLs against the site domain when true. */\n @Prop() siteDomainInUrls: boolean = false;\n\n /** Autocomplete endpoint forwarded into the search view model. */\n @Prop() autocompleteEndpoint: string = '';\n\n /** Whether session forwarding should be attempted after login state changes. */\n @Prop() sessionForward: boolean = false;\n\n /** Enables cached requests in FetchHelper when true. */\n @Prop() cache: boolean = false;\n\n /** Optional override for translated search placeholder text. */\n @Prop() searchPlaceholder: string = '';\n\n /** When true, language selector options should not navigate directly by URL. */\n @Prop() spaMode: boolean = false;\n\n /** Interval forwarded to the login component for login state checks. */\n @Prop() checkUserLoggedInStateInterval: number = 0;\n\n /** Enables marketweb login mode in the login component. */\n @Prop() useMarketwebLogin: boolean = false;\n\n /** When true, changing menu mode navigates to the selected root href. */\n @Prop() navigateOnMenuToggle: boolean = true;\n\n /** The mapped UI state used for rendering the header. */\n @State() vm: HeaderViewModel | null = null;\n\n /** Current translations for the active language. */\n @State() i18n: SiteHeaderI18N = defaultHeaderI18n;\n\n /** Simple loading state for the wrapper. */\n @State() status: 'idle' | 'loading' | 'ready' | 'error' = 'loading';\n\n /** Whether the main search should collapse to a compact version. */\n @State() minimizeSearch: boolean = false;\n\n /** Internal login state used for special link handling. */\n @State() loggedIn: boolean = false;\n\n /** Active menu mode when the backend structure supports menu switching. */\n @State() activeMenuMode: HeaderMenuMode = 0;\n\n /** Guard used to prevent watchers from reloading during initial setup. */\n private isInitializing = false;\n\n /** Cached raw backend payload so UI-only prop changes can remap without refetching. */\n private rawHeaderData: HeaderApiPayload | null = null;\n\n /** Main nav element reference used for overflow calculation. */\n private mainNavEl?: HTMLElement;\n\n /** Emitted when the language changes. */\n @Event() changeLanguage: EventEmitter<string>;\n\n /** Emitted when the market changes. */\n @Event() changeMarket: EventEmitter<MarketName>;\n\n /** Shared helper for backend requests. */\n private fetchHelper = new FetchHelper('marketweb-header');\n\n /** Service for context resolution and header-data fetching. */\n private headerService = new PnMarketwebHeaderService(this.fetchHelper);\n\n private hasResolvedInitialMenuMode = false;\n\n async componentWillLoad() {\n await this.loadHeader();\n }\n\n @Listen('setLanguage')\n onLanguageSelectorChange(e: CustomEvent<string>) {\n this.language = e.detail;\n window.dispatchEvent(new CustomEvent('marketweb-languagechange', { detail: this.language }));\n }\n\n @Watch('language')\n async onLanguageChange() {\n if (this.isInitializing || !this.language) {\n return;\n }\n\n this.changeLanguage.emit(this.language);\n await this.loadHeader();\n }\n\n @Watch('market')\n async onMarketChange() {\n if (this.isInitializing || !this.market) {\n return;\n }\n\n this.changeMarket.emit(this.market);\n await this.loadHeader();\n }\n\n @Watch('environment')\n async onEnvironmentChange() {\n if (this.isInitializing || !this.environment) {\n return;\n }\n\n await this.loadHeader();\n }\n\n @Watch('endpoint')\n async onEndpointChange() {\n if (this.isInitializing) {\n return;\n }\n\n await this.loadHeader();\n }\n\n @Watch('pageId')\n async onPageIdChange() {\n if (this.isInitializing) {\n return;\n }\n\n await this.loadHeader();\n }\n\n @Watch('hideHomeMenuItem')\n @Watch('siteDomainInUrls')\n @Watch('autocompleteEndpoint')\n @Watch('searchPlaceholder')\n onPresentationInputChange() {\n if (this.isInitializing) {\n return;\n }\n\n this.remapViewModel();\n }\n\n @Listen('loginStateChange')\n onLoginStateChange(e: CustomEvent<{ loggedIn?: boolean; token?: string }>) {\n if (typeof e.detail?.loggedIn === 'boolean') {\n this.loggedIn = e.detail.loggedIn;\n }\n\n if (e.detail?.loggedIn && e.detail?.token && this.sessionForward) {\n try {\n // fetch('/api/userprofile/sync?token=' + e.detail.token);\n } catch {\n // ignored intentionally\n }\n }\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n requestAnimationFrame(() => {\n this.checkMenuOverflow();\n });\n }\n\n private get menuThemeList(): HeaderTheme[] {\n return resolveHeaderMenuThemes(\n this.menuThemes,\n this.vm?.menuModeOptions\n );\n }\n\n\n private get logoUrl(): string {\n return this.vm?.menuModeOptions?.[this.activeMenuMode]?.href ?? '/';\n }\n\n private get hasForcedThemeAndToggle(): boolean {\n return Number.isInteger(this.forceThemeAndToggle) && this.forceThemeAndToggle !== -1;\n }\n\n private validateMenuModeIndex(mode: HeaderMenuMode): HeaderMenuMode {\n const optionCount = this.vm?.menuModeOptions?.length ?? 0;\n\n if (!this.vm?.hasMenuSwitching || optionCount === 0) {\n return 0;\n }\n\n if (!Number.isInteger(mode) || mode < 0) {\n return 0;\n }\n\n return Math.min(mode, optionCount - 1);\n }\n\n private async loadHeader() {\n this.status = 'loading';\n this.isInitializing = true;\n\n try {\n const result = await this.headerService.loadHeaderState({\n market: this.market,\n language: this.language,\n environment: this.environment,\n endpoint: this.endpoint,\n pageId: this.pageId,\n cache: this.cache,\n hideHomeMenuItem: this.hideHomeMenuItem,\n siteDomainInUrls: this.siteDomainInUrls,\n autocompleteEndpoint: this.autocompleteEndpoint,\n searchPlaceholder: this.searchPlaceholder,\n });\n\n this.applyHeaderState(result);\n\n requestAnimationFrame(() => {\n this.checkMenuOverflow();\n });\n } catch (error) {\n console.error('[pn-marketweb-header] Failed to load header', error);\n this.rawHeaderData = null;\n this.vm = null;\n this.status = 'error';\n } finally {\n this.isInitializing = false;\n }\n }\n\n private remapViewModel() {\n const context = {\n market: this.market,\n language: this.language,\n environment: this.environment,\n endpoint: this.endpoint,\n pageId: this.pageId ?? '',\n };\n\n const result = this.headerService.remapHeaderState({\n context,\n rawHeaderData: this.rawHeaderData,\n language: this.language,\n hideHomeMenuItem: this.hideHomeMenuItem,\n siteDomainInUrls: this.siteDomainInUrls,\n autocompleteEndpoint: this.autocompleteEndpoint,\n searchPlaceholder: this.searchPlaceholder,\n currentActiveMenuMode: this.activeMenuMode,\n });\n\n this.applyHeaderState(result);\n\n requestAnimationFrame(() => {\n this.checkMenuOverflow();\n });\n }\n\n private applyHeaderState(result: HeaderStateResult) {\n this.market = result.context.market;\n this.language = result.context.language;\n this.environment = result.context.environment;\n this.endpoint = result.context.endpoint;\n\n this.rawHeaderData = result.rawHeaderData;\n this.vm = result.vm;\n this.i18n = result.i18n;\n this.status = result.status;\n\n if (this.hasForcedThemeAndToggle) {\n this.activeMenuMode = this.validateMenuModeIndex(this.forceThemeAndToggle);\n this.hasResolvedInitialMenuMode = true;\n storeHeaderMenuMode(this.activeMenuMode);\n }\n else if (!result.vm?.hasMenuSwitching) {\n this.activeMenuMode = 0;\n this.hasResolvedInitialMenuMode = false;\n }\n else if (!this.hasResolvedInitialMenuMode) {\n this.activeMenuMode = this.validateMenuModeIndex(\n resolveInitialHeaderMenuMode(\n true,\n this.initialActiveMenuMode,\n )\n );\n this.hasResolvedInitialMenuMode = true;\n }\n else {\n this.activeMenuMode = this.validateMenuModeIndex(this.activeMenuMode);\n }\n\n if (headerState.loginManager && result.vm?.siteDefinition?.url) {\n headerState.loginManager.setSiteUrl(result.vm.siteDefinition.url);\n }\n }\n\n private checkMenuOverflow() {\n const mainNavEl = this.mainNavEl;\n if (!mainNavEl) {\n return;\n }\n\n const firstMenuLevel = mainNavEl.querySelector('pn-mainnav-level') as HTMLElement | null;\n if (!firstMenuLevel) {\n return;\n }\n\n const navContainer = firstMenuLevel.parentElement;\n if (!navContainer) {\n return;\n }\n\n const availableWidth = navContainer.clientWidth;\n const requiredWidth = firstMenuLevel.scrollWidth;\n\n this.minimizeSearch = requiredWidth > availableWidth;\n }\n\n private isUserLoggedIn() {\n return this.loggedIn || this.userLoggedin;\n }\n\n private adjustSiteSelectorUrl(href: string): string {\n if (!this.isUserLoggedIn()) {\n return href;\n }\n\n const loginDomains = ['portal.postnord.com'];\n const matchedHref = loginDomains.some(domain => href.includes(domain));\n\n if (!matchedHref) {\n return href;\n }\n\n if (headerState.loginManager) {\n return headerState.loginManager.getLoginUrl(href);\n }\n\n return href;\n }\n\n private onMenuToggleChange = (e: CustomEvent<HeaderMenuMode>) => {\n if (this.hasForcedThemeAndToggle) {\n return;\n }\n\n const nextMode = e.detail;\n\n if (nextMode === this.activeMenuMode) {\n return;\n }\n\n this.activeMenuMode = nextMode;\n storeHeaderMenuMode(nextMode);\n\n if (!this.navigateOnMenuToggle || !this.vm?.rawMenuItems.length) {\n return;\n }\n\n const targetRoot = getToggleRootForMenuItems(this.vm.rawMenuItems, nextMode);\n navigateToMenuItem(targetRoot);\n };\n\n private getVisibleMenuGroups(vm: HeaderViewModel): {\n primaryItems: MenuItem[];\n sharedItems: MenuItem[];\n } {\n if (!vm.rawMenuItems.length) {\n return {\n primaryItems: vm.menuItems,\n sharedItems: [],\n };\n }\n\n const structure = extractToggleableMenuStructure(vm.rawMenuItems);\n\n if (structure.modeRoots.length === 0) {\n return {\n primaryItems: vm.menuItems,\n sharedItems: [],\n };\n }\n\n const groups = getVisibleMenuGroupsForMode(vm.rawMenuItems, this.activeMenuMode);\n\n return {\n primaryItems: prependHomeMenuItem(\n groups.primaryItems,\n this.i18n,\n vm.siteDefinition?.url ?? '/',\n this.hideHomeMenuItem,\n ),\n sharedItems: groups.sharedItems,\n };\n }\n\n\n\n\n render() {\n const vm = this.vm;\n const i18n = this.i18n;\n\n const activeTheme: HeaderTheme =\n this.menuThemeList[this.activeMenuMode] ?? 'private';\n\n const logoUrl = this.logoUrl;\n\n const menuGroups = vm\n ? this.getVisibleMenuGroups(vm)\n : { primaryItems: [] as MenuItem[], sharedItems: [] as MenuItem[] };\n\n\n return (\n <Host\n language={this.language ?? undefined}\n market={this.market ?? undefined}\n environment={this.environment ?? undefined}\n data-status={this.status}\n data-mode={this.activeMenuMode}\n data-theme={activeTheme}\n >\n <header>\n {vm && (\n <Fragment>\n <pn-marketweb-header-top-row\n vm={vm}\n i18n={i18n}\n language={this.language ?? undefined}\n siteid={this.siteid ?? undefined}\n endpoint={this.endpoint ?? undefined}\n environment={this.environment ?? undefined}\n userToken={this.userToken}\n userFullname={this.userFullname}\n userLoggedin={this.userLoggedin}\n hideSiteSelector={this.hideSiteSelector}\n hideLanguageSelector={this.hideLanguageSelector}\n hideSearch={this.hideSearch}\n hideLogin={this.hideLogin}\n showProfileSelection={this.showProfileSelection}\n showUnifiedLogin={this.showUnifiedLogin}\n spaMode={this.spaMode}\n checkUserLoggedInStateInterval={this.checkUserLoggedInStateInterval}\n useMarketwebLogin={this.useMarketwebLogin}\n activeMenuMode={this.activeMenuMode}\n theme={activeTheme}\n navigateOnMenuToggle={this.navigateOnMenuToggle}\n menuToggleChangeHandler={this.onMenuToggleChange}\n adjustSiteSelectorUrl={(href: string) => this.adjustSiteSelectorUrl(href)}\n logoUrl={logoUrl}\n >\n <slot name=\"header-top-left\" slot=\"header-top-left\"></slot>\n <slot name=\"header-top-right-start\" slot=\"header-top-right-start\"></slot>\n <slot name=\"toprightend\" slot=\"toprightend\"></slot>\n </pn-marketweb-header-top-row>\n\n <slot name=\"siteheader-menu-top-button\"></slot>\n\n <pn-marketweb-header-main-row\n vm={vm}\n i18n={i18n}\n market={this.market ?? undefined}\n language={this.language ?? undefined}\n siteid={this.siteid ?? undefined}\n hideSearch={this.hideSearch}\n hideLogin={this.hideLogin}\n hideLanguageSelector={this.hideLanguageSelector}\n hideSiteSelector={this.hideSiteSelector}\n minimizeSearch={this.minimizeSearch}\n activeMenuMode={this.activeMenuMode}\n theme={activeTheme}\n navigateOnMenuToggle={this.navigateOnMenuToggle}\n primaryItems={menuGroups.primaryItems}\n sharedItems={menuGroups.sharedItems}\n showMenuDivider={menuGroups.primaryItems.length > 0 && menuGroups.sharedItems.length > 0}\n userToken={this.userToken}\n userFullname={this.userFullname}\n userLoggedin={this.userLoggedin}\n endpoint={this.endpoint ?? undefined}\n environment={this.environment ?? undefined}\n showProfileSelection={this.showProfileSelection}\n showUnifiedLogin={this.showUnifiedLogin}\n checkUserLoggedInStateInterval={this.checkUserLoggedInStateInterval}\n useMarketwebLogin={this.useMarketwebLogin}\n spaMode={this.spaMode}\n menuToggleChangeHandler={this.onMenuToggleChange}\n mainNavRefHandler={(el: HTMLElement | undefined) => {\n this.mainNavEl = el;\n }}\n adjustSiteSelectorUrl={(href: string) => this.adjustSiteSelectorUrl(href)}\n logoUrl={logoUrl}\n >\n <slot name=\"mobile-toprightend\" slot=\"mobile-toprightend\"></slot>\n <slot name=\"header-bottom-button\" slot=\"header-bottom-button\"></slot>\n <slot name=\"menu-footer-cta\" slot=\"menu-footer-cta\"></slot>\n </pn-marketweb-header-main-row>\n\n </Fragment>\n )}\n </header>\n </Host>\n );\n }\n}"]}
|