@postnord/pn-marketweb-components 4.2.4 → 4.3.0

package/esm/pn-marketweb-header-skeleton-loader.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h, d as Host } from './index-c0a4d8bd.js';
+
+const pnMarketwebHeaderSkeletonLoaderCss = ":host{display:block;width:100%;--header-skeleton-bg:var(--siteheader-skeleton-bg, #e8edf2);--header-skeleton-shine:var(--siteheader-skeleton-shine,\n          rgba(255, 255, 255, 0.65));--header-skeleton-radius:var(--siteheader-skeleton-radius, 0.4rem);--header-skeleton-gap:var(--siteheader-skeleton-gap, 1.2rem);--header-skeleton-padding-x:var(--siteheader-skeleton-padding-x, 1.6rem);--header-skeleton-padding-y:var(--siteheader-skeleton-padding-y, 1.2rem);--header-skeleton-border-color:var(--siteheader-skeleton-border-color,\n          #d9e1e8);--header-skeleton-mobile-height:var(--siteheader-skeleton-mobile-height,\n          6.4rem);--header-skeleton-top-row-height:var(--siteheader-skeleton-top-row-height,\n          7.2rem);--header-skeleton-bottom-row-height:var(--siteheader-skeleton-bottom-row-height,\n          6.4rem)}.header-skeleton{width:100%;box-sizing:border-box;border-bottom:0.1rem solid var(--header-skeleton-border-color);background:var(--siteheader-skeleton-background, #fff)}.mobile-layout,.tablet-desktop-layout{width:100%;box-sizing:border-box}.mobile-row,.top-row,.bottom-row{display:flex;align-items:center;width:100%;box-sizing:border-box;padding-left:var(--header-skeleton-padding-x);padding-right:var(--header-skeleton-padding-x)}.skel{position:relative;overflow:hidden;flex:0 0 auto;background:var(--header-skeleton-bg)}.skel::after{content:\"\";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg, transparent, var(--header-skeleton-shine), transparent);animation:header-skeleton-shimmer 1.4s infinite}.skel-logo{width:11.2rem;height:2.8rem;border-radius:var(--header-skeleton-radius)}.skel-icon-button{width:4rem;height:4rem;border-radius:50%}.skel-chip{width:10rem;height:3.6rem;border-radius:1.8rem}.skel-pill{width:7.2rem;height:3.6rem;border-radius:1.8rem}.skel-menu-button{width:12rem;height:4rem;border-radius:0.4rem}.skel-search{width:min(100%, 36rem);height:4rem;border-radius:2rem}.mobile-layout{display:block}.mobile-row{justify-content:space-between;min-height:var(--header-skeleton-mobile-height);padding-top:var(--header-skeleton-padding-y);padding-bottom:var(--header-skeleton-padding-y)}.tablet-desktop-layout{display:none}.top-row{min-height:var(--header-skeleton-top-row-height);padding-top:var(--header-skeleton-padding-y);padding-bottom:var(--header-skeleton-padding-y);display:grid;grid-template-columns:1fr auto 1fr;column-gap:var(--header-skeleton-gap);align-items:center}.top-row-left,.top-row-center,.top-row-right,.bottom-row-left,.bottom-row-right{display:flex;align-items:center}.top-row-left{justify-content:flex-start;gap:var(--header-skeleton-gap);min-width:0}.top-row-center{justify-content:center}.top-row-right{justify-content:flex-end;gap:var(--header-skeleton-gap);min-width:0}.bottom-row{min-height:var(--header-skeleton-bottom-row-height);justify-content:space-between;gap:var(--header-skeleton-gap);padding-top:0.8rem;padding-bottom:1.2rem}.bottom-row-left{justify-content:flex-start;flex:0 0 auto}.bottom-row-right{justify-content:flex-end;flex:1 1 auto;min-width:0}.bottom-row-right .skel-search{margin-left:auto}@media screen and (min-width: 768px){.mobile-layout{display:none}.tablet-desktop-layout{display:block}}@media screen and (min-width: 1200px){:host{--header-skeleton-padding-x:var(--siteheader-skeleton-padding-x-desktop, 2.4rem);--header-skeleton-top-row-height:var(--siteheader-skeleton-top-row-height-desktop,\n            8rem);--header-skeleton-bottom-row-height:var(--siteheader-skeleton-bottom-row-height-desktop,\n            6.8rem)}.skel-logo{width:13rem;height:3rem}.skel-search{width:min(100%, 42rem)}}@keyframes header-skeleton-shimmer{100%{transform:translateX(100%)}}@media (prefers-reduced-motion: reduce){.skel::after{animation:none}}";
+const PnMarketwebHeaderSkeletonLoaderStyle0 = pnMarketwebHeaderSkeletonLoaderCss;
+
+const PnMarketwebHeaderSkeletonLoader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        console.log('Rendering PnMarketwebHeaderSkeletonLoader...');
+        return (h(Host, { key: 'df31cc237329e033c4ace683027a6458a3790ef1' }, h("header", { key: '51d25dc2af64660068fcabfa5f95cc0872d29cce', class: "header-skeleton", "aria-hidden": "true" }, h("div", { key: '1469d90c9ca66cc371257818dbf1aacbdc2c0b8c', class: "mobile-layout" }, h("div", { key: '591d0124da5d93e45809cf35f514b590c60d666f', class: "mobile-row" }, h("div", { key: '1e8ec053ab87561b5f3a6a5c6e45c4fbcbe66212', class: "skel skel-logo" }), h("div", { key: '83c7c0f633155348cb92e3370f16daf3c5d0e6c2', class: "skel skel-icon-button" }))), h("div", { key: '847b9bbe3de7c3a0aa5954e82167e99a5813fcd2', class: "tablet-desktop-layout" }, h("div", { key: '5b4f7867da490285dd1032fdf9b7387b705a51f2', class: "top-row" }, h("div", { key: '208485c9f664ef1008bf57eb5a98e6687ba70949', class: "top-row-left" }, h("div", { key: 'b2fdca97d9b576d20d16ca833e84a80191653e3f', class: "skel skel-chip" }), h("div", { key: 'ca6b630a8c38cd87c4e65ffd483e0e65e4774326', class: "skel skel-icon-button" })), h("div", { key: '0923c1a855f32159dd42dc49eb9e84b47a70a549', class: "top-row-center" }, h("div", { key: 'dda22514ffd4a1ceae80252dafe49597a63ec364', class: "skel skel-logo" })), h("div", { key: 'a6ec95a525889c8cc13b35ccc03a90c509a2c35c', class: "top-row-right" }, h("div", { key: '41d4a9998a8478423a2b1ce566568fe845c8767a', class: "skel skel-icon-button" }), h("div", { key: '0fb5f413dad85ffab8e8038c7720f3828fb24b72', class: "skel skel-icon-button" }), h("div", { key: 'b53f8b517499a89c30ee3c46179ffed6cc7e12b4', class: "skel skel-pill" }))), h("div", { key: 'e7c90c573556c1599f25bf99761d437e7ed3e7c8', class: "bottom-row" }, h("div", { key: '0c9d2b72369a256efa2daf8eafd8f938369601a0', class: "bottom-row-left" }, h("div", { key: '9835aa30019d52084f98c362e0e8a255fc747d46', class: "skel skel-menu-button" })), h("div", { key: '4cc96d47f41114dbe08ce67b62106664b2f8deee', class: "bottom-row-right" }, h("div", { key: '5bcab9e4e0f36f838b7467e3dcf130d4b95faa85', class: "skel skel-search" })))))));
+    }
+};
+PnMarketwebHeaderSkeletonLoader.style = PnMarketwebHeaderSkeletonLoaderStyle0;
+
+export { PnMarketwebHeaderSkeletonLoader as pn_marketweb_header_skeleton_loader };
+
+//# sourceMappingURL=pn-marketweb-header-skeleton-loader.entry.js.map

package/esm/pn-marketweb-header-skeleton-loader.entry.js.map

@@ -0,0 +1 @@
+{"file":"pn-marketweb-header-skeleton-loader.entry.js","mappings":";;AAAA,MAAM,kCAAkC,GAAG,msHAAmsH,CAAC;AAC/uH,8CAAe,kCAAkC;;MCUpC,+BAA+B;;;;IACxC,MAAM;QAEF,OAAO,CAAC,GAAG,CAAC,8CAA8C,CAAC,CAAC;QAC5D,QACI,EAAC,IAAI,uDACD,+DAAQ,KAAK,EAAC,iBAAiB,iBAAa,MAAM,IAE9C,4DAAK,KAAK,EAAC,eAAe,IACtB,4DAAK,KAAK,EAAC,YAAY,IACnB,4DAAK,KAAK,EAAC,gBAAgB,GAAG,EAC9B,4DAAK,KAAK,EAAC,uBAAuB,GAAG,CACnC,CACJ,EAGN,4DAAK,KAAK,EAAC,uBAAuB,IAC9B,4DAAK,KAAK,EAAC,SAAS,IAChB,4DAAK,KAAK,EAAC,cAAc,IACrB,4DAAK,KAAK,EAAC,gBAAgB,GAAG,EAC9B,4DAAK,KAAK,EAAC,uBAAuB,GAAG,CACnC,EAEN,4DAAK,KAAK,EAAC,gBAAgB,IACvB,4DAAK,KAAK,EAAC,gBAAgB,GAAG,CAC5B,EAEN,4DAAK,KAAK,EAAC,eAAe,IACtB,4DAAK,KAAK,EAAC,uBAAuB,GAAG,EACrC,4DAAK,KAAK,EAAC,uBAAuB,GAAG,EACrC,4DAAK,KAAK,EAAC,gBAAgB,GAAG,CAC5B,CACJ,EAEN,4DAAK,KAAK,EAAC,YAAY,IACnB,4DAAK,KAAK,EAAC,iBAAiB,IACxB,4DAAK,KAAK,EAAC,uBAAuB,GAAG,CACnC,EAEN,4DAAK,KAAK,EAAC,kBAAkB,IACzB,4DAAK,KAAK,EAAC,kBAAkB,GAAG,CAC9B,CACJ,CACJ,CACD,CACN,EACT;KACL;;;;;;","names":[],"sources":["src/components/layout-components/pn-marketweb-header/components/pn-marketweb-header-skeleton-loader.scss?tag=pn-marketweb-header-skeleton-loader&encapsulation=shadow","src/components/layout-components/pn-marketweb-header/components/pn-marketweb-header-skeleton-loader.tsx"],"sourcesContent":[":host {\n    display: block;\n    width: 100%;\n    --header-skeleton-bg: var(--siteheader-skeleton-bg, #e8edf2);\n    --header-skeleton-shine: var(--siteheader-skeleton-shine,\n            rgba(255, 255, 255, 0.65));\n    --header-skeleton-radius: var(--siteheader-skeleton-radius, 0.4rem);\n    --header-skeleton-gap: var(--siteheader-skeleton-gap, 1.2rem);\n    --header-skeleton-padding-x: var(--siteheader-skeleton-padding-x, 1.6rem);\n    --header-skeleton-padding-y: var(--siteheader-skeleton-padding-y, 1.2rem);\n    --header-skeleton-border-color: var(--siteheader-skeleton-border-color,\n            #d9e1e8);\n    --header-skeleton-mobile-height: var(--siteheader-skeleton-mobile-height,\n            6.4rem);\n    --header-skeleton-top-row-height: var(--siteheader-skeleton-top-row-height,\n            7.2rem);\n    --header-skeleton-bottom-row-height: var(--siteheader-skeleton-bottom-row-height,\n            6.4rem);\n}\n\n.header-skeleton {\n    width: 100%;\n    box-sizing: border-box;\n    border-bottom: 0.1rem solid var(--header-skeleton-border-color);\n    background: var(--siteheader-skeleton-background, #fff);\n}\n\n.mobile-layout,\n.tablet-desktop-layout {\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.mobile-row,\n.top-row,\n.bottom-row {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    box-sizing: border-box;\n    padding-left: var(--header-skeleton-padding-x);\n    padding-right: var(--header-skeleton-padding-x);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Skeleton blocks                                                            */\n/* -------------------------------------------------------------------------- */\n\n.skel {\n    position: relative;\n    overflow: hidden;\n    flex: 0 0 auto;\n    background: var(--header-skeleton-bg);\n}\n\n.skel::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    transform: translateX(-100%);\n    background: linear-gradient(90deg,\n            transparent,\n            var(--header-skeleton-shine),\n            transparent);\n    animation: header-skeleton-shimmer 1.4s infinite;\n}\n\n.skel-logo {\n    width: 11.2rem;\n    height: 2.8rem;\n    border-radius: var(--header-skeleton-radius);\n}\n\n.skel-icon-button {\n    width: 4rem;\n    height: 4rem;\n    border-radius: 50%;\n}\n\n.skel-chip {\n    width: 10rem;\n    height: 3.6rem;\n    border-radius: 1.8rem;\n}\n\n.skel-pill {\n    width: 7.2rem;\n    height: 3.6rem;\n    border-radius: 1.8rem;\n}\n\n.skel-menu-button {\n    width: 12rem;\n    height: 4rem;\n    border-radius: 0.4rem;\n}\n\n.skel-search {\n    width: min(100%, 36rem);\n    height: 4rem;\n    border-radius: 2rem;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Mobile                                                                     */\n/* -------------------------------------------------------------------------- */\n\n.mobile-layout {\n    display: block;\n}\n\n.mobile-row {\n    justify-content: space-between;\n    min-height: var(--header-skeleton-mobile-height);\n    padding-top: var(--header-skeleton-padding-y);\n    padding-bottom: var(--header-skeleton-padding-y);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Tablet / Desktop                                                           */\n/* -------------------------------------------------------------------------- */\n\n.tablet-desktop-layout {\n    display: none;\n}\n\n.top-row {\n    min-height: var(--header-skeleton-top-row-height);\n    padding-top: var(--header-skeleton-padding-y);\n    padding-bottom: var(--header-skeleton-padding-y);\n    display: grid;\n    grid-template-columns: 1fr auto 1fr;\n    column-gap: var(--header-skeleton-gap);\n    align-items: center;\n}\n\n.top-row-left,\n.top-row-center,\n.top-row-right,\n.bottom-row-left,\n.bottom-row-right {\n    display: flex;\n    align-items: center;\n}\n\n.top-row-left {\n    justify-content: flex-start;\n    gap: var(--header-skeleton-gap);\n    min-width: 0;\n}\n\n.top-row-center {\n    justify-content: center;\n}\n\n.top-row-right {\n    justify-content: flex-end;\n    gap: var(--header-skeleton-gap);\n    min-width: 0;\n}\n\n.bottom-row {\n    min-height: var(--header-skeleton-bottom-row-height);\n    justify-content: space-between;\n    gap: var(--header-skeleton-gap);\n    padding-top: 0.8rem;\n    padding-bottom: 1.2rem;\n}\n\n.bottom-row-left {\n    justify-content: flex-start;\n    flex: 0 0 auto;\n}\n\n.bottom-row-right {\n    justify-content: flex-end;\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.bottom-row-right .skel-search {\n    margin-left: auto;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Breakpoints                                                                */\n/* -------------------------------------------------------------------------- */\n\n/* Tablet and up */\n@media screen and (min-width: 768px) {\n    .mobile-layout {\n        display: none;\n    }\n\n    .tablet-desktop-layout {\n        display: block;\n    }\n}\n\n/* Desktop */\n@media screen and (min-width: 1200px) {\n    :host {\n        --header-skeleton-padding-x: var(--siteheader-skeleton-padding-x-desktop, 2.4rem);\n        --header-skeleton-top-row-height: var(--siteheader-skeleton-top-row-height-desktop,\n                8rem);\n        --header-skeleton-bottom-row-height: var(--siteheader-skeleton-bottom-row-height-desktop,\n                6.8rem);\n    }\n\n    .skel-logo {\n        width: 13rem;\n        height: 3rem;\n    }\n\n    .skel-search {\n        width: min(100%, 42rem);\n    }\n}\n\n@keyframes header-skeleton-shimmer {\n    100% {\n        transform: translateX(100%);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .skel::after {\n        animation: none;\n    }\n}","import {\n    Component,\n    h,\n    Host,\n} from '@stencil/core';\n\n@Component({\n    tag: 'pn-marketweb-header-skeleton-loader',\n    styleUrl: 'pn-marketweb-header-skeleton-loader.scss',\n    shadow: true,\n})\nexport class PnMarketwebHeaderSkeletonLoader {\n    render() {\n\n        console.log('Rendering PnMarketwebHeaderSkeletonLoader...');\n        return (\n            <Host>\n                <header class=\"header-skeleton\" aria-hidden=\"true\">\n                    {/* Mobile */}\n                    <div class=\"mobile-layout\">\n                        <div class=\"mobile-row\">\n                            <div class=\"skel skel-logo\" />\n                            <div class=\"skel skel-icon-button\" />\n                        </div>\n                    </div>\n\n                    {/* Tablet / Desktop */}\n                    <div class=\"tablet-desktop-layout\">\n                        <div class=\"top-row\">\n                            <div class=\"top-row-left\">\n                                <div class=\"skel skel-chip\" />\n                                <div class=\"skel skel-icon-button\" />\n                            </div>\n\n                            <div class=\"top-row-center\">\n                                <div class=\"skel skel-logo\" />\n                            </div>\n\n                            <div class=\"top-row-right\">\n                                <div class=\"skel skel-icon-button\" />\n                                <div class=\"skel skel-icon-button\" />\n                                <div class=\"skel skel-pill\" />\n                            </div>\n                        </div>\n\n                        <div class=\"bottom-row\">\n                            <div class=\"bottom-row-left\">\n                                <div class=\"skel skel-menu-button\" />\n                            </div>\n\n                            <div class=\"bottom-row-right\">\n                                <div class=\"skel skel-search\" />\n                            </div>\n                        </div>\n                    </div>\n                </header>\n            </Host>\n        );\n    }\n}"],"version":3}

package/esm/pn-marketweb-header-toggle.entry.js

@@ -0,0 +1,42 @@
+import { r as registerInstance, c as createEvent, h, d as Host } from './index-c0a4d8bd.js';
+
+const pnMarketwebHeaderToggleCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}:host{--toggle-color:var(--siteheader-toggle-color, #005d92);--toggle-hover-color:var(--siteheader-toggle-hover-color, #000000);--toggle-active-color:var(--siteheader-toggle-active-color, #000000);--toggle-active-underline-color:var(--siteheader-toggle-active-underline-color, #00a0d6);--toggle-after-visibility:hidden;display:inline-block}.marketweb-header-toggle{display:flex;align-items:center;gap:1.2rem}.marketweb-header-toggle-button{display:inline-block;position:relative;cursor:pointer;text-decoration:none;line-height:1;transition:color 0.2s ease;font-size:1.6rem;color:var(--toggle-color)}.marketweb-header-toggle-button:hover{color:var(--toggle-hover-color);--toggle-after-visibility:visible}.marketweb-header-toggle-button:focus-visible{outline:2px solid #007c89;outline-offset:2px}.marketweb-header-toggle-button--active{color:var(--toggle-active-color);font-weight:500}.marketweb-header-toggle-button--active::after{--toggle-after-visibility:visible}.marketweb-header-toggle-button::after{visibility:var(--toggle-after-visibility);content:\"\";position:absolute;bottom:-0.8rem;width:110%;left:-5%;height:2px;background:var(--toggle-active-underline-color);border-radius:8px}";
+const PnMarketwebHeaderToggleStyle0 = pnMarketwebHeaderToggleCss;
+
+const PnMarketwebHeaderToggle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.toggleChange = createEvent(this, "toggleChange", 7);
+        this.options = [];
+        this.ariaLabel = 'Header mode';
+        this.value = 0;
+    }
+    /** Emitted whenever the user selects a different mode. */
+    toggleChange;
+    onClick(event, option) {
+        if (option.index !== this.value) {
+            this.toggleChange.emit(option.index);
+        }
+        if (!option.href) {
+            event.preventDefault();
+        }
+    }
+    renderOption(option) {
+        const isActive = option.index === this.value;
+        return (h("a", { href: option.href ?? '#', class: {
+                'marketweb-header-toggle-button': true,
+                'marketweb-header-toggle-button--active': isActive,
+            }, "aria-current": isActive ? 'page' : undefined, onClick: (event) => this.onClick(event, option) }, option.label));
+    }
+    render() {
+        if (this.options.length === 0) {
+            return h(Host, null);
+        }
+        return (h(Host, null, h("nav", { class: "marketweb-header-toggle", "aria-label": this.ariaLabel }, this.options.map(option => this.renderOption(option)))));
+    }
+};
+PnMarketwebHeaderToggle.style = PnMarketwebHeaderToggleStyle0;
+
+export { PnMarketwebHeaderToggle as pn_marketweb_header_toggle };
+
+//# sourceMappingURL=pn-marketweb-header-toggle.entry.js.map

package/esm/pn-marketweb-header-toggle.entry.js.map

@@ -0,0 +1 @@
+{"file":"pn-marketweb-header-toggle.entry.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,8jDAA8jD,CAAC;AAClmD,sCAAe,0BAA0B;;MC4B5B,uBAAuB;;;;uBACQ,EAAE;yBAGhB,aAAa;qBAGQ,CAAC;;;IAIzC,YAAY,CAA+B;IAE5C,OAAO,CACb,KAAiB,EACjB,MAA4B;QAE5B,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE;YAC/B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SACtC;QAED,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YAChB,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;KACF;IAEO,YAAY,CAAC,MAA4B;QAC/C,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;QAC7C,QACE,SACE,IAAI,EACF,MAAM,CAAC,IAAI,IAAI,GAAG,EAEpB,KAAK,EAAE;gBACL,gCAAgC,EAAE,IAAI;gBACtC,wCAAwC,EAAE,QAAQ;aACnD,kBACa,QAAQ,GAAG,MAAM,GAAG,SAAS,EAC3C,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,IAE9C,MAAM,CAAC,KAAK,CACX,EACJ;KACH;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;YAC7B,OAAO,EAAC,IAAI,OAAQ,CAAC;SACtB;QAED,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,yBAAyB,gBAAa,IAAI,CAAC,SAAS,IAC5D,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAClD,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/navigation/pn-marketweb-header-toggle/pn-marketweb-header-toggle.scss?tag=pn-marketweb-header-toggle&encapsulation=shadow","src/components/navigation/pn-marketweb-header-toggle/pn-marketweb-header-toggle.tsx"],"sourcesContent":["@import \"../../../globals/main.scss\";\n\n// -----------------------------------------------------------------------------\n// Component token defaults\n// Styling API\n// -----------------------------------------------------------------------------\n:host {\n  --toggle-color: var(--siteheader-toggle-color, #{$blue700});\n  --toggle-hover-color: var(--siteheader-toggle-hover-color, #{$black});\n  --toggle-active-color: var(--siteheader-toggle-active-color, #{$black});\n  --toggle-active-underline-color: var(--siteheader-toggle-active-underline-color, #{$blue400});\n\n  --toggle-after-visibility: hidden;  \n\n  display: inline-block;\n}\n\n// -----------------------------------------------------------------------------\n// Host shell / layout\n// -----------------------------------------------------------------------------\n.marketweb-header-toggle {\n  display: flex;\n  align-items: center;\n  gap: 1.2rem;\n}\n\n// -----------------------------------------------------------------------------\n// Internal elements\n// -----------------------------------------------------------------------------\n.marketweb-header-toggle-button {\n  display: inline-block;\n  position: relative;\n  cursor: pointer;\n  text-decoration: none;\n  line-height: 1;\n  transition: color 0.2s ease;\n\n  font-size: 1.6rem;  \n  color: var(--toggle-color);\n\n  &:hover {\n    color: var(--toggle-hover-color);   \n    --toggle-after-visibility:visible;\n  }\n  \n\n  &:focus-visible {\n    outline: 2px solid #007c89;\n    outline-offset: 2px;\n  }\n\n  &--active {\n    color: var(--toggle-active-color);\n    font-weight: 500;\n\n    &::after {\n      --toggle-after-visibility:visible;\n    }\n  }\n\n  \n  &::after {    \n    visibility:var(--toggle-after-visibility);\n    content: '';\n    position: absolute;    \n    bottom: rem16(-8px);\n    width: 110%;\n    left:-5%;\n    height: 2px;\n    background: var(--toggle-active-underline-color);\n    border-radius: 8px;\n  }\n}","import {\n  HeaderMenuMode,\n  HeaderMenuModeOption,\n} from '@/components/layout-components/pn-marketweb-header/types/pn-marketweb-header.types';\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n/**\n * Small segmented toggle used for switching between Private and Business menu modes.\n *\n * Responsibilities:\n * - render two selectable links\n * - reflect current active mode\n * - emit the selected mode when changed\n *\n * This component is intentionally presentation-only.\n * The parent header decides what switching mode actually means.\n */\n@Component({\n  tag: 'pn-marketweb-header-toggle',\n  styleUrl: 'pn-marketweb-header-toggle.scss',\n  shadow: true,\n})\nexport class PnMarketwebHeaderToggle {\n  @Prop() options: HeaderMenuModeOption[] = [];\n\n  /** Accessible label for the toggle group. */\n  @Prop() ariaLabel: string = 'Header mode';\n\n  /** Currently active mode. */\n  @Prop({ reflect: true }) value: HeaderMenuMode = 0;\n\n\n  /** Emitted whenever the user selects a different mode. */\n  @Event() toggleChange: EventEmitter<HeaderMenuMode>;\n\n  private onClick(\n    event: MouseEvent,\n    option: HeaderMenuModeOption,\n  ) {\n    if (option.index !== this.value) {\n      this.toggleChange.emit(option.index);\n    }\n\n    if (!option.href) {\n      event.preventDefault();\n    }\n  }\n\n  private renderOption(option: HeaderMenuModeOption) {\n    const isActive = option.index === this.value;\n    return (\n      <a\n        href={\n          option.href ?? '#'\n        }\n        class={{\n          'marketweb-header-toggle-button': true,\n          'marketweb-header-toggle-button--active': isActive,\n        }}        \n        aria-current={isActive ? 'page' : undefined}        \n        onClick={(event) => this.onClick(event, option)}\n      >\n        {option.label}\n      </a>\n    );\n  }\n\n  render() {\n    if (this.options.length === 0) {\n      return <Host></Host>;\n    }\n\n    return (\n      <Host>\n        <nav class=\"marketweb-header-toggle\" aria-label={this.ariaLabel}>\n          {this.options.map(option => this.renderOption(option))}\n        </nav>\n      </Host>\n    );\n  }\n}"],"version":3}