@dubai-design-system/components-js 3.11.5 → 3.11.6

package/dist/collection/components/dda-header/dda-header.js

@@ -15,10 +15,14 @@ export class DdaHeader {
         this.useNavigator = 'false';
         this.mobileMenuSearchId = 'mobileSearch';
         this.mobileMenuSearchUrl = 'javascript:void(0)';
-        this.selected_contrast = "normal";
+        this.selected_contrast = 'normal';
         this.hideOtherMenu = false;
         this.parsedOtherMenuItems = [];
         this.parsedDropDownMenuItems = [];
+        this.useLoginPopup = false;
+        this.loginPopupLinks = [];
+        this.isDesktopLoginPopupOpen = false;
+        this.isMobileLoginPopupOpen = false;
         this.lastScrollTop = 0;
         this.toggleEscapeKey = (event) => {
             if (event.key === 'Escape') {
@@ -27,6 +31,8 @@ export class DdaHeader {
                 this.isMobileAccessibiltyOpen = false;
                 this.isSubMenuOpen = false;
                 this.isSideSubMenuOpen = false;
+                this.isDesktopLoginPopupOpen = false;
+                this.isMobileLoginPopupOpen = false;
             }
         };
         this.handleOutsideClick = (event) => {
@@ -51,6 +57,17 @@ export class DdaHeader {
                 }
             }
         };
+        this.handleOutsideLoginPopupClick = (event) => {
+            if (this.isDesktopLoginPopupOpen || this.isMobileLoginPopupOpen) {
+                const loginPopup = document.querySelector('.dda-login-popup');
+                const isClickInsideDesktopMenu = loginPopup && loginPopup.contains(event.target);
+                const isClickOnToggleButton = event.target.closest('.login-button');
+                if (!isClickInsideDesktopMenu && !isClickOnToggleButton) {
+                    this.isDesktopLoginPopupOpen = false;
+                    this.isMobileLoginPopupOpen = false;
+                }
+            }
+        };
         this.handleScroll = () => {
             const scrollTop = window.scrollY;
             const menuContainer = document.querySelector('.dda-menu-container');
@@ -73,6 +90,10 @@ export class DdaHeader {
             if (this.isAccessibiltyOpen) {
                 this.isAccessibiltyOpen = false;
             }
+            if (this.isDesktopLoginPopupOpen || this.isMobileLoginPopupOpen) {
+                this.isDesktopLoginPopupOpen = false;
+                this.isMobileLoginPopupOpen = false;
+            }
             this.isMenuOpen = !this.isMenuOpen;
             if (this.isMenuOpen) {
                 document.body.style.overflow = 'hidden';
@@ -103,31 +124,31 @@ export class DdaHeader {
             this.languageSwitch.emit();
         };
         this.smTexthandler = () => {
-            this.selected_text_size = "small";
+            this.selected_text_size = 'small';
             this.smTextSize.emit();
         };
         this.baseTexthandler = () => {
-            this.selected_text_size = "normal";
+            this.selected_text_size = 'normal';
             this.baseTextSize.emit();
         };
         this.lgTexthandler = () => {
-            this.selected_text_size = "large";
+            this.selected_text_size = 'large';
             this.lgTextSize.emit();
         };
         this.normalContrasthandler = () => {
-            this.selected_contrast = "normal";
+            this.selected_contrast = 'normal';
             this.normalContrast.emit();
         };
         this.blindContrasthandler = () => {
-            this.selected_contrast = "colorblind";
+            this.selected_contrast = 'colorblind';
             this.blindContrast.emit();
         };
         this.redContrasthandler = () => {
-            this.selected_contrast = "redweakness";
+            this.selected_contrast = 'redweakness';
             this.redContrast.emit();
         };
         this.greenContrasthandler = () => {
-            this.selected_contrast = "greenweakness";
+            this.selected_contrast = 'greenweakness';
             this.greenContrast.emit();
         };
         this.accessibilitymenuhandler = () => {
@@ -140,7 +161,15 @@ export class DdaHeader {
             this.searchfunctionality.emit(searchval);
         };
         this.toggleLogin = () => {
-            this.loginClick.emit();
+            if (this.useLoginPopup == true) {
+                this.loginClick.emit();
+                if (window.innerWidth >= 768) {
+                    this.isDesktopLoginPopupOpen = !this.isDesktopLoginPopupOpen;
+                }
+                else {
+                    this.isMobileLoginPopupOpen = !this.isMobileLoginPopupOpen;
+                }
+            }
         };
         this.renderSubMenu = (subMenu, parentLi) => {
             if (!subMenu || subMenu.length === 0)
@@ -152,6 +181,16 @@ export class DdaHeader {
                     } }, item.label), this.renderSubMenu(item.subMenu, currentIndex)));
             }))));
         };
+        this.renderLoginPopup = () => {
+            return (h("ul", null, this.parsedLoginPopupItems.map((item, index) => {
+                return (h("li", { key: `top-${index}` }, h("a", { href: this.useNavigator == 'true' ? 'javascript:void(0)' : item.url, class: "", onClick: () => {
+                        if (this.useNavigator == 'true') {
+                            this.navigatorClick.emit(item.url);
+                        }
+                        this.isDesktopLoginPopupOpen = false;
+                    } }, item.popupItemLabel)));
+            })));
+        };
     }
     componentWillLoad() {
         this.parseOtherMenuItems(this.otherMenuItems);
@@ -177,6 +216,17 @@ export class DdaHeader {
             this.parsedDropDownMenuItems = [];
         }
     }
+    get parsedLoginPopupItems() {
+        if (typeof this.loginPopupLinks === 'string') {
+            try {
+                return JSON.parse(this.loginPopupLinks);
+            }
+            catch (_a) {
+                console.warn('Invalid JSON in loginPopupLinks');
+                return [];
+            }
+        }
+    }
     toggleSidebarSubMenu(index) {
         if (index === '') {
             this.openMenus = {};
@@ -207,11 +257,13 @@ export class DdaHeader {
         document.addEventListener('click', this.handleOutsideClick);
         document.addEventListener('keydown', this.toggleEscapeKey);
         document.addEventListener('click', this.handleOutsideAccessibilityClick);
+        document.addEventListener('click', this.handleOutsideLoginPopupClick);
     }
     disconnectedCallback() {
         window.removeEventListener('scroll', this.handleScroll);
         document.removeEventListener('click', this.handleOutsideClick);
         document.removeEventListener('click', this.handleOutsideAccessibilityClick);
+        document.removeEventListener('click', this.handleOutsideLoginPopupClick);
     }
     parseJsonArray(jsonString) {
         try {
@@ -253,7 +305,7 @@ export class DdaHeader {
     }
     render() {
         const sideMenuItems = this.parseJsonArray(this.sideMenuItems);
-        return (h("header", { key: '5b3a3813776b22c58ad7e4a2aefad2b39b761a3a', class: 'dda-header' }, h("div", { key: '971e102a55c77ec014c622e30b39e8f6fa95c370', class: "dda-head-logo" }, h("a", { key: '6757fa31aae9e45f318697b69d28b546da11159c', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.firstLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.firstLogoHref) : ''), class: "govt-logo" }, h("img", { key: 'a5c8833849236777cfa78bdb44a15888d81ebe6b', class: "logo-white", src: this.firstLogoWhiteSrc, alt: `${this.firstLogoAlt} White` }), h("img", { key: '21fa8096c11780cbec19f19d1f63f9d4a13a0318', class: "logo-colored", src: this.firstLogoSrc, alt: this.firstLogoAlt })), h("a", { key: '1ac6a9058edbb62416b86dca33608ef8996e58b1', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.secondLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.secondLogoHref) : ''), class: "entt-logo" }, h("img", { key: 'e05bdf61cf1f17af4626fa83ad1b6028c7c81a59', class: "logo-white", src: this.secondLogoWhiteSrc, alt: `${this.secondLogoAlt} White` }), h("img", { key: '3910bceaa2c18c9b282a3e3f7c60faf869d47fae', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }))), h("div", { key: '461e1fd23356c18774be40ea282459b42f2691d3', class: "dda-menu-container" }, h("div", { key: '345eda9d0b3a68dfee74aeafa3f22f14bcc3f634', class: "dda-main-navigation" }, h("div", { key: '3bd8dffbda85e83640e8f2c96bf486142dfdff4f', class: `dda-menu-overley ${this.isMenuOpen ? 'show-overley' : ''}`, onClick: this.toggleMenu }), h("div", { key: '9bc8b4eca9dd792d7fb38c6b28c9ccca71819509', class: "hamburger-menu", onClick: this.toggleMenu }, h("dda-tooltip", { key: 'aecac2047e399458ed27721e453958379da37729', title_text: this.hamburger_menu_button_name, position: "top", class: "dda-d-block" }, h("button", { key: '1c99b38cfe929568d1a8c59a198afb36a5fc03a8', type: "button", class: "hamburger-menu-btn", name: this.hamburger_menu_button_name }, h("span", { key: '73a7fa9fca06df34eb1097bab60c90e0a8266812', class: "hamburger-line" }), h("span", { key: '2884ca405ab7168c6740b051284cdefd1c6b89aa', class: "hamburger-menu-text" }, this.hamburger_menu_button_name)))), h("div", { key: 'b1d1982a8efa8e647011e4cc3c61f4b44a34eaff', class: "dda-sidemenu", style: { display: this.isMenuOpen ? 'block' : '', insetInlineStart: this.isMenuOpen ? '0px' : '' } }, h("div", { key: '54e31cecc2fb10b0eccf43f953954bc5b3dbcc3b', class: "dda-sidemenu-content" }, h("h6", { key: 'd3afb136281500a34d90816f17e6d2283ff255b1', class: "dda-side-nav-title" }, this.sideMainMenuTitle), h("ul", { key: '9e699de177dd5c3dfdb1fe3b6000fc1bb648d73d', class: "main_side_menu" }, sideMenuItems.map((menu, index) => {
+        return (h("header", { key: '54b0c03bc05adc75df3619e029d4c4e74160832c', class: 'dda-header' }, h("div", { key: 'aca7942c8a5906afb942b464a1c9b7e8890d6daa', class: "dda-head-logo" }, h("a", { key: 'a37d0983fd506514e6aa4119ae3db91e0f2071e0', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.firstLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.firstLogoHref) : ''), class: "govt-logo" }, h("img", { key: '22e895e5272500873c8fac0261ca6a5328fae2ae', class: "logo-white", src: this.firstLogoWhiteSrc, alt: `${this.firstLogoAlt} White` }), h("img", { key: 'a25b817ca16c600f3d958a567b619e028751286e', class: "logo-colored", src: this.firstLogoSrc, alt: this.firstLogoAlt })), h("a", { key: 'dc8088c587f99379b8b91f74e1a1c4cae2f61478', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.secondLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.secondLogoHref) : ''), class: "entt-logo" }, h("img", { key: '5c2f152227eefd7d2150c8f0ec08ddf2bb171891', class: "logo-white", src: this.secondLogoWhiteSrc, alt: `${this.secondLogoAlt} White` }), h("img", { key: '9540f57414634d9647a89666312cf8af75c83c73', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }))), h("div", { key: 'fcc06240644dc68a76017a47d39b39be1e5ea218', class: "dda-menu-container" }, h("div", { key: '62c04c4c861266e795f7815a141d69bc8fd3030b', class: "dda-main-navigation" }, h("div", { key: '541a0d835870cce4a48b696e5bd82e04ace23378', class: `dda-menu-overley ${this.isMenuOpen ? 'show-overley' : ''}`, onClick: this.toggleMenu }), h("div", { key: 'fbd58920245118c387c40137b7c6f2d37f9dad82', class: "hamburger-menu", onClick: this.toggleMenu }, h("dda-tooltip", { key: '4a7773f49fbbbc05c70a85dd00b867d2186f5e5e', title_text: this.hamburger_menu_button_name, position: "top", class: "dda-d-block" }, h("button", { key: 'ab3bd37a6c70392221c445964b20c8b4e6cc6ba4', type: "button", class: "hamburger-menu-btn", name: this.hamburger_menu_button_name }, h("span", { key: '87ad7609ba5d5cfe81183a350789c6d1dcc7323d', class: "hamburger-line" }), h("span", { key: '997734ff0e1f5a54f87112b6f0a396fd7ec0e50a', class: "hamburger-menu-text" }, this.hamburger_menu_button_name)))), h("div", { key: '928498ba3f5dbfad9854a9282f8415aeb25df36f', class: "dda-sidemenu", style: { display: this.isMenuOpen ? 'block' : '', insetInlineStart: this.isMenuOpen ? '0px' : '' } }, h("div", { key: '25c52e5bdaf99d65f1b6c7a8c005575ff5924da8', class: "dda-sidemenu-content" }, h("h6", { key: '4dec8b591c257c7f013dd5884efc10e7eda97da8', class: "dda-side-nav-title" }, this.sideMainMenuTitle), h("ul", { key: '19a6b3e688cb29652bb8134bd2753cb7de74b71e', class: "main_side_menu" }, sideMenuItems.map((menu, index) => {
             const currentIndex = `menu-${index}`;
             return (h("li", { key: currentIndex, id: `header_${menu.label}` }, h("a", {
                 // href={menu.href}
@@ -282,13 +334,17 @@ export class DdaHeader {
                     }
                 }
             }, menu.label), this.renderSubMenu(menu.subMenu, currentIndex)));
-        })), this.hideOtherMenu == false && h("h6", { key: 'e8a089963257075dcb92ac460d8c01109115035b', class: "dda-side-nav-title" }, this.sideOtherMenuTitle), !this.hideOtherMenu && (h("ul", { key: '6c1146ecd2ec22c528ccc950655d0ff68f6d8d9c', class: "main_side_menu" }, this.parsedOtherMenuItems.map((itemlist, index) => (h("li", { key: `other-${index}` }, h("a", { href: this.useNavigator == 'true' ? 'javascript:void(0)' : itemlist.href, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(itemlist.href) : '') }, itemlist.label))))))), h("div", { key: '22eee46a71a8b1949745f312bdc2cff5002abe38', class: "dda-sidemenu-bottom" }, h("div", { key: '732447c0c6e07ee78afb06e80757721f5dc11e5b', class: "dda-sidemenu-gov-logo" }, h("a", { key: '9370ac9680b5091a886682ae63da1065247b3bbd', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.firstLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.firstLogoHref) : ''), class: "govt-logo dda-mb-2" }, h("img", { key: '4ddc8180372e059717c92c09729c9a97e9de5fa5', class: "", src: this.firstLogoSrc, alt: this.firstLogoAlt }))), h("div", { key: 'd5914d8167adc1d63e1cafdcc2339e8afcc6bee3', class: "dda-toolbar-menu-sidemenu" }, h("ul", { key: 'e7edddffc2b0b97bfab95bf25f20356fca6f362b' }, this.accessibility_button_id && (h("li", { key: 'a89c92d5c17031a591d7ea103b7a6af68d85aa55' }, h("button", { key: 'b31628dcbc66c74aee46890b2d4b74133b9db91d', name: this.toggle_accessibility_button_name, class: "tool-btn accessibility-btn", type: "button", onClick: this.toggleMobileAccessibilty, id: this.accessibility_button_id }, h("i", { key: 'f9822507c8ef644ec69387b9934f25aa24c2b569', class: this.accessibility_button_icon_family }, this.accessibility_button_icon_name), h("span", { key: '311ef8ff33c0f7a2fad5074d688f450090036626', class: "visually-hidden" }, this.accessibility_button_text)))), this.language_text && (h("li", { key: '2b51194553515bd3f27f027e7702a33dfe423c47' }, h("button", { key: 'b151d47feaf27abcc8b88781641205d50b12b6f7', name: this.language_button_name, class: "tool-btn", type: "button", onClick: this.languagehandler }, this.language_text))), this.loginText && (h("li", { key: 'c6631083330da8be5dabdb1637c7f92e17c578dc' }, h("dda-link-button", { key: 'f5f233738ce7408c9387d90dc0af5d7064037b72', button_color: "onsurface-secondary", start_icon: this.loginIcon, custom_class: "tool-btn", link_button_text: this.loginText, onClick: this.toggleLogin, href: this.loginLink, button_shape: "circle", size: "sm" })))))), h("button", { key: '5fd9ea00c8d6684225eb8dbca2c6b5bf211d1bf1', type: "button", name: this.close_menu_button_name, class: "close-btn side-nav-close-btn", "aria-label": "Close Sidebar", onClick: this.toggleMenu }, h("i", { key: 'b5be5b1bd68cea8f629069055cc256a043caf541', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")), this.usePredesignedAccessibilityMenu ? (h("div", { class: "dda-accessibility hide-accessibility mobile-accessibility", style: { display: this.isMobileAccessibiltyOpen ? 'block' : 'none' } }, h("div", { class: "mobile-accessibility-content" }, h("div", { class: "dda-row" }, h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.contrast_title), h("form", null, h("fieldset", { class: "dda-theme-list" }, h("legend", null, h("p", { class: "body Regular dda-mb-3" }, this.contrast_description)), this.contrast_noraml_text ? (h("dda-radiobutton", { title_text: this.contrast_noraml_text, checked: this.selected_contrast == "normal", size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "NormalThemeMobile", group_name: "themeselectionMobile", input_id: "NormalThemeMobile", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.normalContrasthandler, class: "hydrated" })) : null, this.contrast_color_blind_text ? (h("dda-radiobutton", { title_text: this.contrast_color_blind_text, checked: this.selected_contrast == "colorblind", size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "ColoursBlindMobile", group_name: "themeselectionMobile", input_id: "ColoursBlindMobile", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.blindContrasthandler, class: "hydrated" })) : null, this.contrast_red_weakness_text ? (h("dda-radiobutton", { title_text: this.contrast_red_weakness_text, checked: this.selected_contrast == "redweakness", size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "RedWeaknessMobile", group_name: "themeselectionMobile", input_id: "RedWeaknessMobile", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.redContrasthandler, class: "hydrated" })) : null, this.contrast_green_weakness_text ? (h("dda-radiobutton", { title_text: this.contrast_green_weakness_text, checked: this.selected_contrast == "greenweakness", size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "GreenWeaknessMobile", group_name: "themeselectionMobile", input_id: "GreenWeaknessMobile", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.greenContrasthandler, class: "hydrated" })) : null))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.screen_reader_title), h("p", { class: "body Regular dda-mb-3" }, this.screen_reader_description), h("div", { class: "rs_skip rsbtn rs_preserve rs_mobile", id: "readspeaker_button1" }, h("a", { rel: "nofollow", href: this.read_speaker_link, role: "button", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker", "data-rsshortcut": "play", "aria-haspopup": "menu", "data-rs-lang": "en_uk" }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "volume_up")))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.text_size_title), h("p", { class: "body Regular dda-mb-3" }, this.text_size_description), h("div", { class: "dda-d-flex dda-gap-4" }, h("dda-button", { button_color: this.selected_text_size == "normal" ? "default-primary" : "default-secondary", button_text: "A", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }), h("dda-button", { button_color: this.selected_text_size == "large" ? "default-primary" : "default-secondary", button_text: "A+", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }), h("dda-button", { button_color: this.selected_text_size == "small" ? "default-primary" : "default-secondary", button_text: "A-", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler }))))), h("button", { type: "button", name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Accessibility", onClick: this.toggleMobileAccessibilty }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")))) : null), this.quickLinks && (h("dda-header-menu", { key: 'fdbcfe6ab93ebff747cf38c75b58c321355b9c53', "use-navigator": this.useNavigator, "navigator-click": this.navigatorClick, "quick-links": typeof this.quickLinks === 'string' ? this.quickLinks : JSON.stringify(this.quickLinks) }))), h("div", { key: '465f1028ecdde4f35fef3ceed0940c6945a7ffc6', class: "dda-mobile-entt-logo" }, h("a", { key: 'fe1467675d5bbc3f8c34dd56de2e5706c7dd49c3', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.secondLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.secondLogoHref) : ''), class: "entt-logo" }, h("img", { key: '61599183bdf54c1276b2b2773a4f56098f075c54', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: '4283106fa7ea1946369bffab4991ce2509eea277', class: "logo-white", src: this.secondLogoWhiteSrc, alt: this.secondLogoAlt }))), h("div", { key: 'da2f3a3f8804664266a30e85b53a09eb0dcaea27', class: "dda-mobile-search" }, this.mobileMenuSearchId && (h("a", { key: '84a3d68be0af96516eaa4a8eaf49200296907326', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.mobileMenuSearchUrl, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.mobileMenuSearchUrl) : ''), class: "tool-btn", id: this.mobileMenuSearchId }, h("span", { key: 'd18824918b0f3f2519b906aeefc5432bab6fc3a3', class: "visualy-hidden" }, this.searchText || 'Search'), h("i", { key: 'e946965ceb576074acd2a5cfda084fb5fd136684', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search")))), h("div", { key: '128845fd6b5b23b536c6d82badff6d6eb30c2940', class: "dda-toolbar-menu" }, h("ul", { key: '505b5230f451c2985485d3c2c36d4afe5eda85e8' }, this.search_input_name && (h("li", { key: 'a3a2b1ec44f00a78ccc136d869c99ade2618f3af' }, h("dda-tooltip", { key: '3892729103daadc7d8374748f919a0e3412dd204', title_text: this.search_tooltip || 'Search', description: "", position: "top" }, h("div", { key: '8ddcf9225a880f595b1b235bab2fc407398efb6a', class: "dda-search dda-header-search" }, h("label", { key: 'aace4820df1ab0d1289ba85bb6e269bd5b066513', id: "ddaSearch-label", class: "visualy-hidden", "aria-hidden": "true" }, this.searchText || 'Search'), h("i", { key: '90c3085af23a8984aa6dac13f07936e34b56bb29', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search"), h("dda-input", { key: 'aa3ad19ddce4a1248155fd1a7aaab1b10a9cdecb', placeholder: this.search_input_placeholder || 'Search', type: "text", input_id: "ddaSearch", value: this.search_value, input_name: this.search_input_name, aria_label: "input", input_role: "search", error_message: "Error text", validation_type: "normal", validation_id: "validationId", input_status: "normal", size: "default", custom_class: "dda-header-search-input tool-btn", component_mode: "",
+        })), this.hideOtherMenu == false && h("h6", { key: '0edcab2d681e3eb44c33e31edaac188a08da477a', class: "dda-side-nav-title" }, this.sideOtherMenuTitle), !this.hideOtherMenu && (h("ul", { key: '2b03e9cb6f4ac635e8016dbf9c571e204bbbf356', class: "main_side_menu" }, this.parsedOtherMenuItems.map((itemlist, index) => (h("li", { key: `other-${index}` }, h("a", { href: this.useNavigator == 'true' ? 'javascript:void(0)' : itemlist.href, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(itemlist.href) : '') }, itemlist.label))))))), h("div", { key: 'c33e08042c9d3ae06fae2e5228d531a486fcb04f', class: "dda-sidemenu-bottom" }, h("div", { key: '2940f47390ff614e39ce5784985fd6966f22420f', class: "dda-sidemenu-gov-logo" }, h("a", { key: '5768871529e51f375464014fac399c79d1bb2b66', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.firstLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.firstLogoHref) : ''), class: "govt-logo dda-mb-2" }, h("img", { key: '2b1739d1c99070e844ab6f8b327df53ab328e431', class: "", src: this.firstLogoSrc, alt: this.firstLogoAlt }))), h("div", { key: '61402996051b941f85022bbad9a855d49a224f38', class: "dda-toolbar-menu-sidemenu" }, h("ul", { key: '39df93239c3dbfb827e186997fb46148d553fcc6' }, this.accessibility_button_id && (h("li", { key: '46570a325b68ead7bba7dfc830fa0f0f0b4c7a53' }, h("button", { key: '38ee62dad197f4581580f8afa7976200c3f8ad7a', name: this.toggle_accessibility_button_name, class: "tool-btn accessibility-btn", type: "button", onClick: this.toggleMobileAccessibilty, id: this.accessibility_button_id }, h("i", { key: '31f235dc4cc46700935c2deb219924676b388c67', class: this.accessibility_button_icon_family }, this.accessibility_button_icon_name), h("span", { key: 'c9a451d1ee2e8c6a20c9edae06f959db5379b716', class: "visually-hidden" }, this.accessibility_button_text)))), this.language_text && (h("li", { key: '7075d204949735be02e4392b7bdae86b0fe72bab' }, h("button", { key: 'b72d76560cfcdcbeb5709c62693a3f183ddda77a', name: this.language_button_name, class: "tool-btn", type: "button", onClick: this.languagehandler }, this.language_text))), this.loginText && (h("li", { key: '3f713ad9364a5a32f1543c2920c1456313f9a520' }, h("dda-link-button", { key: '4679af2114d65ab229b3b21ff951f0bd7b3e0587', button_color: "onsurface-secondary", start_icon: this.loginIcon, custom_class: "tool-btn login-button", link_button_text: this.loginText, onClick: this.toggleLogin,
+            // href={this.loginLink}
+            href: this.useLoginPopup ? 'javascript:void(0)' : this.loginLink, button_shape: "circle", size: "sm" })))))), h("button", { key: 'ac101ccc76814564a6d5a96e2dbc206927b31a4f', type: "button", name: this.close_menu_button_name, class: "close-btn side-nav-close-btn", "aria-label": "Close Sidebar", onClick: this.toggleMenu }, h("i", { key: '2d67269aff73e1c305ac6f288edc21505354e426', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")), this.usePredesignedAccessibilityMenu ? (h("div", { class: "dda-accessibility hide-accessibility mobile-accessibility", style: { display: this.isMobileAccessibiltyOpen ? 'block' : 'none' } }, h("div", { class: "mobile-accessibility-content" }, h("div", { class: "dda-row" }, h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.contrast_title), h("form", null, h("fieldset", { class: "dda-theme-list" }, h("legend", null, h("p", { class: "body Regular dda-mb-3" }, this.contrast_description)), this.contrast_noraml_text ? (h("dda-radiobutton", { title_text: this.contrast_noraml_text, checked: this.selected_contrast == 'normal', size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "NormalThemeMobile", group_name: "themeselectionMobile", input_id: "NormalThemeMobile", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.normalContrasthandler, class: "hydrated" })) : null, this.contrast_color_blind_text ? (h("dda-radiobutton", { title_text: this.contrast_color_blind_text, checked: this.selected_contrast == 'colorblind', size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "ColoursBlindMobile", group_name: "themeselectionMobile", input_id: "ColoursBlindMobile", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.blindContrasthandler, class: "hydrated" })) : null, this.contrast_red_weakness_text ? (h("dda-radiobutton", { title_text: this.contrast_red_weakness_text, checked: this.selected_contrast == 'redweakness', size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "RedWeaknessMobile", group_name: "themeselectionMobile", input_id: "RedWeaknessMobile", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.redContrasthandler, class: "hydrated" })) : null, this.contrast_green_weakness_text ? (h("dda-radiobutton", { title_text: this.contrast_green_weakness_text, checked: this.selected_contrast == 'greenweakness', size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "GreenWeaknessMobile", group_name: "themeselectionMobile", input_id: "GreenWeaknessMobile", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.greenContrasthandler, class: "hydrated" })) : null))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.screen_reader_title), h("p", { class: "body Regular dda-mb-3" }, this.screen_reader_description), h("div", { class: "rs_skip rsbtn rs_preserve rs_mobile", id: "readspeaker_button1" }, h("a", { rel: "nofollow", href: this.read_speaker_link, role: "button", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker", "data-rsshortcut": "play", "aria-haspopup": "menu", "data-rs-lang": "en_uk" }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "volume_up")))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.text_size_title), h("p", { class: "body Regular dda-mb-3" }, this.text_size_description), h("div", { class: "dda-d-flex dda-gap-4" }, h("dda-button", { button_color: this.selected_text_size == 'normal' ? 'default-primary' : 'default-secondary', button_text: "A", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }), h("dda-button", { button_color: this.selected_text_size == 'large' ? 'default-primary' : 'default-secondary', button_text: "A+", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }), h("dda-button", { button_color: this.selected_text_size == 'small' ? 'default-primary' : 'default-secondary', button_text: "A-", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler }))))), h("button", { type: "button", name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Accessibility", onClick: this.toggleMobileAccessibilty }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")))) : null), this.quickLinks && (h("dda-header-menu", { key: 'fc021edb9b23803ec5a6b14cff94ff5fe85e8329', "use-navigator": this.useNavigator, "navigator-click": this.navigatorClick, "quick-links": typeof this.quickLinks === 'string' ? this.quickLinks : JSON.stringify(this.quickLinks) }))), h("div", { key: 'a58ad9123277902e5285ad891d234814903af7d2', class: "dda-mobile-entt-logo" }, h("a", { key: 'e0bca6253ea983bad023b78c0ca0f87e67c0014b', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.secondLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.secondLogoHref) : ''), class: "entt-logo" }, h("img", { key: '6db3ca4ff5851d215f317f87cb7be524a08da725', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: '3367ef66aa512aea67b60716c09884399c2d1057', class: "logo-white", src: this.secondLogoWhiteSrc, alt: this.secondLogoAlt }))), h("div", { key: '0f615081ff47f1d280e9b4c1c2853b1ec34f3445', class: "dda-mobile-search" }, this.mobileMenuSearchId && (h("a", { key: '53d22488ae1ebe5b36f46f9813d547bf482f215f', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.mobileMenuSearchUrl, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.mobileMenuSearchUrl) : ''), class: "tool-btn", id: this.mobileMenuSearchId }, h("span", { key: '89c31a1bb55be7d83cf2ad146bf5322dab5c33dd', class: "visualy-hidden" }, this.searchText || 'Search'), h("i", { key: '302017f31bc32489350cbb7ac464e3db9b3e7db4', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search")))), h("div", { key: '3dbe527904902301b6ed634ddfb41914ea538c07', class: "dda-toolbar-menu" }, h("ul", { key: 'e860688ea5e0e57ae8987fdc74f5919e7089e54f' }, this.search_input_name && (h("li", { key: 'e832e0b08b7e5dd9b5906b5398f146925bd7b866' }, h("dda-tooltip", { key: 'e74d2ddd9fd10555e0a107d50f7379cd7339198c', title_text: this.search_tooltip || 'Search', description: "", position: "top" }, h("div", { key: '3a12a4f68786ac80061676710611f9a103e31543', class: "dda-search dda-header-search" }, h("label", { key: '6ae875f4546557ebcaafdceea7a4d9f2827060f0', id: "ddaSearch-label", class: "visualy-hidden", "aria-hidden": "true" }, this.searchText || 'Search'), h("i", { key: '4d45c87bb63add66c4a7752a10c6794ca938bacd', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search"), h("dda-input", { key: '93290ed065195781f15745b1f03077f03cd03101', placeholder: this.search_input_placeholder || 'Search', type: "text", input_id: "ddaSearch", value: this.search_value, input_name: this.search_input_name, aria_label: "input", input_role: "search", error_message: "Error text", validation_type: "normal", validation_id: "validationId", input_status: "normal", size: "default", custom_class: "dda-header-search-input tool-btn", component_mode: "",
             // handleInput={(event) => console.log(event.target.value,"")}
             onKeyPress: e => {
                 if (e.key === 'Enter') {
                     this.searchhandler(e.target.value); // Pass the value to the searchhandler
                 }
-            } }), h("span", { key: '4e2685a5599d65fc32e0f0c22c99652fd18e5c23', id: "validationId", class: "visually-hidden" }, "Enter keywords to search the site."))))), this.accessibility_button_id && (h("li", { key: 'f5299b335fac79b0e797b566fd2c2da16aa596a1' }, h("dda-tooltip", { key: '4ddb7685688b2bb9d512d7f1ba05e8c14259da7d', title_text: this.accessibility_tooltip, position: "top" }, h("button", { key: '031fa52d02ffd1767757d2c8c1dc2058ad7884df', name: this.toggle_accessibility_button_name, class: "tool-btn dda-btn btn-color-onsurface-secondary btn-size-sm btn-shape-circle accessibility-btn", type: "button", onClick: this.toggleAccessibilty, id: this.accessibility_button_id }, h("i", { key: '2d5c9c677dffe41a62d5bfe1ab057aef53eb80ab', class: this.accessibility_button_icon_family }, this.accessibility_button_icon_name), h("span", { key: '06b73b92e55c757827e9b18f5247e14f11abcdd0', class: "visually-hidden" }, this.accessibility_button_text))), this.usePredesignedAccessibilityMenu ? (h("div", { class: "dda-accessibility-wrap" }, h("div", { class: "dda-accessibility hide-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, h("div", { class: "dda-row" }, h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.contrast_title), h("form", null, h("fieldset", { class: "dda-theme-list" }, h("legend", null, h("p", { class: "body Regular dda-mb-3" }, this.contrast_description)), this.contrast_noraml_text ? (h("dda-radiobutton", { title_text: this.contrast_noraml_text, checked: this.selected_contrast == "normal", size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "NormalTheme", group_name: "themeselection", input_id: "NormalTheme", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.normalContrasthandler, class: "" })) : null, this.contrast_color_blind_text ? (h("dda-radiobutton", { title_text: this.contrast_color_blind_text, checked: this.selected_contrast == "colorblind", size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "ColoursBlind", group_name: "themeselection", input_id: "ColoursBlind", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.blindContrasthandler, class: "hydrated" })) : null, this.contrast_red_weakness_text ? (h("dda-radiobutton", { title_text: this.contrast_red_weakness_text, checked: this.selected_contrast == "redweakness", size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "RedWeakness", group_name: "themeselection", input_id: "RedWeakness", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.redContrasthandler, class: "hydrated" })) : null, this.contrast_green_weakness_text ? (h("dda-radiobutton", { title_text: this.contrast_green_weakness_text, checked: this.selected_contrast == "greenweakness", size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "GreenWeakness", group_name: "themeselection", input_id: "GreenWeakness", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.greenContrasthandler, class: "hydrated" })) : null))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.screen_reader_title), h("p", { class: "body Regular dda-mb-3" }, this.screen_reader_description), h("div", { class: "rs_skip rsbtn rs_preserve rs_mobile", id: "readspeaker_button1" }, h("a", { rel: "nofollow", href: this.read_speaker_link, role: "button", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker", "data-rsshortcut": "play", "aria-haspopup": "menu", "data-rs-lang": "en_uk" }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "volume_up")))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.text_size_title), h("p", { class: "body Regular dda-mb-3" }, this.text_size_description), h("div", { class: "dda-d-flex dda-gap-4" }, h("dda-button", { button_color: this.selected_text_size == "normal" ? "default-primary" : "default-secondary", button_text: "A", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }), h("dda-button", { button_color: this.selected_text_size == "large" ? "default-primary" : "default-secondary", button_text: "A+", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }), h("dda-button", { button_color: this.selected_text_size == "small" ? "default-primary" : "default-secondary", button_text: "A-", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler })))), h("button", { type: "button", name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Sidebar", onClick: this.toggleAccessibilty }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close"))))) : null)), this.language_text && (h("li", { key: '34f7535b38286b1053442d5c9d85dae9c5f99b03' }, h("dda-tooltip", { key: 'c2bcf53cdf5671c0797bdf1244fbcf3e3c794e7e', title_text: this.language_tooltip, position: "top" }, h("dda-button", { key: '83a9660dca131f30c2a5905c2744351cfd2decf5', button_color: "onsurface-secondary", custom_class: "tool-btn", button_text: this.language_text, button_shape: "circle", size: "sm", onClick: this.languagehandler })))), this.loginText && (h("li", { key: 'df36c7a1b07a4541b3a3d9252fee89d00c9a59a3' }, h("dda-tooltip", { key: '7e354257b66f1baae6a5b295f72ee7390a8837fa', title_text: this.login_tooltip, position: "top" }, h("dda-link-button", { key: '646861568427a1bc3134aa59a205b8ca5e1f9583', button_color: "onsurface-secondary", start_icon: this.loginIcon, custom_class: "tool-btn login-button", link_button_text: this.loginText, onClick: this.toggleLogin, href: this.loginLink, button_shape: "circle", size: "sm" })))))))));
+            } }), h("span", { key: '46b049df83aa8bd881f75d697f881740559eda99', id: "validationId", class: "visually-hidden" }, "Enter keywords to search the site."))))), this.accessibility_button_id && (h("li", { key: '031945bf0c4fd3a29838c144d9827edae85bf84e' }, h("dda-tooltip", { key: 'afefbbfda60e2fc2c23cacab830f28ad2b8f5fe8', title_text: this.accessibility_tooltip, position: "top" }, h("button", { key: 'f79fcda130513631472964343cde8e0c30d01699', name: this.toggle_accessibility_button_name, class: "tool-btn dda-btn btn-color-onsurface-secondary btn-size-sm btn-shape-circle accessibility-btn", type: "button", onClick: this.toggleAccessibilty, id: this.accessibility_button_id }, h("i", { key: '4dfb86d909e2399e2b9adb4865eaa7062d537be7', class: this.accessibility_button_icon_family }, this.accessibility_button_icon_name), h("span", { key: '23e432e2d0d57fb95bf0db83c4b23452f893bd06', class: "visually-hidden" }, this.accessibility_button_text))), this.usePredesignedAccessibilityMenu ? (h("div", { class: "dda-accessibility-wrap" }, h("div", { class: "dda-accessibility hide-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, h("div", { class: "dda-row" }, h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.contrast_title), h("form", null, h("fieldset", { class: "dda-theme-list" }, h("legend", null, h("p", { class: "body Regular dda-mb-3" }, this.contrast_description)), this.contrast_noraml_text ? (h("dda-radiobutton", { title_text: this.contrast_noraml_text, checked: this.selected_contrast == 'normal', size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "NormalTheme", group_name: "themeselection", input_id: "NormalTheme", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.normalContrasthandler, class: "" })) : null, this.contrast_color_blind_text ? (h("dda-radiobutton", { title_text: this.contrast_color_blind_text, checked: this.selected_contrast == 'colorblind', size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "ColoursBlind", group_name: "themeselection", input_id: "ColoursBlind", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.blindContrasthandler, class: "hydrated" })) : null, this.contrast_red_weakness_text ? (h("dda-radiobutton", { title_text: this.contrast_red_weakness_text, checked: this.selected_contrast == 'redweakness', size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "RedWeakness", group_name: "themeselection", input_id: "RedWeakness", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.redContrasthandler, class: "hydrated" })) : null, this.contrast_green_weakness_text ? (h("dda-radiobutton", { title_text: this.contrast_green_weakness_text, checked: this.selected_contrast == 'greenweakness', size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "GreenWeakness", group_name: "themeselection", input_id: "GreenWeakness", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.greenContrasthandler, class: "hydrated" })) : null))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.screen_reader_title), h("p", { class: "body Regular dda-mb-3" }, this.screen_reader_description), h("div", { class: "rs_skip rsbtn rs_preserve rs_mobile", id: "readspeaker_button1" }, h("a", { rel: "nofollow", href: this.read_speaker_link, role: "button", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker", "data-rsshortcut": "play", "aria-haspopup": "menu", "data-rs-lang": "en_uk" }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "volume_up")))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.text_size_title), h("p", { class: "body Regular dda-mb-3" }, this.text_size_description), h("div", { class: "dda-d-flex dda-gap-4" }, h("dda-button", { button_color: this.selected_text_size == 'normal' ? 'default-primary' : 'default-secondary', button_text: "A", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }), h("dda-button", { button_color: this.selected_text_size == 'large' ? 'default-primary' : 'default-secondary', button_text: "A+", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }), h("dda-button", { button_color: this.selected_text_size == 'small' ? 'default-primary' : 'default-secondary', button_text: "A-", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler })))), h("button", { type: "button", name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Sidebar", onClick: this.toggleAccessibilty }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close"))))) : null)), this.language_text && (h("li", { key: 'f3217bb91eeb128abfaecb9281ab407d495d7ebc' }, h("dda-tooltip", { key: '8a2a7cc8a698e931eb0ece2ae654b1e23579cd64', title_text: this.language_tooltip, position: "top" }, h("dda-button", { key: '7d52ee5af611e209a5c787b4916ba8983a149291', button_color: "onsurface-secondary", custom_class: "tool-btn", button_text: this.language_text, button_shape: "circle", size: "sm", onClick: this.languagehandler })))), this.loginText && (h("li", { key: '616e01559219682842ad4161e53492b90fa40c67' }, h("dda-tooltip", { key: '036db12318bf9beb3bdd7bb0d18676642a20ac43', title_text: this.login_tooltip, position: "top" }, h("dda-link-button", { key: '364d191a935663762f7f8dcbce77023225304223', button_color: "onsurface-secondary", start_icon: this.loginIcon, custom_class: "tool-btn login-button", link_button_text: this.loginText, onClick: this.toggleLogin,
+            // href={this.loginLink}
+            href: this.useLoginPopup ? 'javascript:void(0)' : this.loginLink, button_shape: "circle", size: "sm" })))))), this.useLoginPopup ? (h("div", { class: "dda-login-popup desktop", style: { display: this.isDesktopLoginPopupOpen ? 'block' : 'none' } }, this.renderLoginPopup())) : null, this.useLoginPopup ? (h("div", { class: "dda-login-popup mobile", style: { display: this.isMobileLoginPopupOpen ? 'block' : 'none' } }, this.renderLoginPopup())) : null)));
     }
     static get is() { return "dda-header"; }
     static get originalStyleUrls() {
@@ -1189,7 +1245,7 @@ export class DdaHeader {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"normal\" | \"colorblind\" | \"redweakness\" | \"greenweakness\"",
+                    "original": "'normal' | 'colorblind' | 'redweakness' | 'greenweakness'",
                     "resolved": "\"colorblind\" | \"greenweakness\" | \"normal\" | \"redweakness\"",
                     "references": {}
                 },
@@ -1203,13 +1259,13 @@ export class DdaHeader {
                 "setter": false,
                 "attribute": "selected_contrast",
                 "reflect": false,
-                "defaultValue": "\"normal\""
+                "defaultValue": "'normal'"
             },
             "selected_text_size": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"normal\" | \"large\" | \"small\"",
+                    "original": "'normal' | 'large' | 'small'",
                     "resolved": "\"large\" | \"normal\" | \"small\"",
                     "references": {}
                 },
@@ -1357,6 +1413,51 @@ export class DdaHeader {
                 "setter": false,
                 "attribute": "quick-links",
                 "reflect": false
+            },
+            "useLoginPopup": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "use-login-popup",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "loginPopupLinks": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| string\r\n    | Array<{\r\n        popupItemLabel: string;\r\n        url: string;\r\n      }>",
+                    "resolved": "string | { popupItemLabel: string; url: string; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "login-popup-links",
+                "reflect": false,
+                "defaultValue": "[]"
             }
         };
     }
@@ -1369,7 +1470,9 @@ export class DdaHeader {
             "isMobileAccessibiltyOpen": {},
             "openMenus": {},
             "parsedOtherMenuItems": {},
-            "parsedDropDownMenuItems": {}
+            "parsedDropDownMenuItems": {},
+            "isDesktopLoginPopupOpen": {},
+            "isMobileLoginPopupOpen": {}
         };
     }
     static get events() {