@dubai-design-system/components-js 3.12.8 → 3.12.9

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

@@ -177,7 +177,35 @@ export class DdaHeader {
         this.renderSubMenu = (subMenu, parentLi) => {
             if (!subMenu || subMenu.length === 0)
                 return null;
-            return (h("div", { class: `main_sub_menu ${this.openMenus[parentLi] ? 'showSubMenu' : ''}` }, subMenu[0].headerLabel && h("h6", { class: "dda-side-nav__title" }, subMenu[0].headerLabel), h("ol", null, subMenu.map((item, index) => {
+            return (h("div", { class: `main_sub_menu ${this.openMenus[parentLi] ? 'showSubMenu' : ''}`,
+                // ref={el => {
+                //   if (el && this.openMenus[parentLi]) {
+                //     setTimeout(() => {
+                //       const parent = el.closest('li');
+                //       if (!parent) return;
+                //       const rect = parent.getBoundingClientRect();
+                //       el.style.top = rect.top + 'px';
+                //     }, 0);
+                //   }
+                // }}
+                ref: el => {
+                    if (el && this.openMenus[parentLi]) {
+                        setTimeout(() => {
+                            const parent = el.closest('li');
+                            if (!parent)
+                                return;
+                            const rect = parent.getBoundingClientRect();
+                            const submenuRect = el.getBoundingClientRect();
+                            const viewportHeight = window.innerHeight;
+                            let top = rect.top;
+                            if (rect.top + submenuRect.height > viewportHeight) {
+                                const diff = rect.top + submenuRect.height - viewportHeight;
+                                top = Math.max(rect.top - diff - 10, 10);
+                            }
+                            el.style.top = top + 'px';
+                        }, 0);
+                    }
+                } }, subMenu[0].headerLabel && h("h6", { class: "dda-side-nav__title" }, subMenu[0].headerLabel), h("ol", null, subMenu.map((item, index) => {
                 const currentIndex = `${parentLi}-${index}`;
                 return (h("li", { key: currentIndex }, h("a", { href: this.useNavigator == 'true' ? 'javascript:void(0)' : item.href, class: `${item.subLinkClass} ${item.subMenu && item.subMenu.length > 0 ? 'showSub' : ''}`, onClick: e => {
                         this.handleMenuClick(e, item, currentIndex);
@@ -308,13 +336,9 @@ export class DdaHeader {
     }
     render() {
         const sideMenuItems = this.parseJsonArray(this.sideMenuItems);
-        return (h("header", { key: '85d972d2e22a8d2469ff66ca590c27172d3f1a14', class: 'dda-header' }, h("div", { key: '9c611ba457da3c65769a5e76ef2d017aa4d69e85', class: "dda-head-logo" }, h("a", { key: 'c50649133f98632ba56d0e7aaf1d3a3a45dd0950', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.firstLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.firstLogoHref) : ''), class: "govt-logo", target: this.firstLogoTarget, rel: "noopener noreferrer" }, h("img", { key: '1f2048b7a3254f33e38cf933890f30ca8f20e785', class: "logo-white", src: this.firstLogoWhiteSrc, alt: `${this.firstLogoAlt} White` }), h("img", { key: '5338c4023d98ee3371a560ce57451383fbcf1d59', class: "logo-colored", src: this.firstLogoSrc, alt: this.firstLogoAlt })), h("a", { key: '6fd018c63cb3d674a51d6d4db13cc8400ef046d7', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.secondLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.secondLogoHref) : ''), class: "entt-logo" }, h("img", { key: '9b4da2985b673df530ae91a7627f644dc4056b23', class: "logo-white", src: this.secondLogoWhiteSrc, alt: `${this.secondLogoAlt} White` }), h("img", { key: '11ba9623fc639b61e8b66f5e4fb4d0f99730114c', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }))), h("div", { key: '4eb46ab04882cb045431db143a3fb73492a58146', class: "dda-menu-container" }, h("div", { key: '92c00f7c8018f23ff4a8848324ffe63ca5ca2783', class: "dda-main-navigation" }, h("div", { key: '9818c0757cba929c6d3a696cf654365b6d9bac79', class: `dda-menu-overley ${this.isMenuOpen ? 'show-overley' : ''}`, onClick: this.toggleMenu }), h("div", { key: '5a639063b0546bafe0c6e980a748d1e35a0fc336', class: "hamburger-menu", onClick: this.toggleMenu }, h("dda-tooltip", { key: '46369a3f0714bbcd3162a0a5120aeb908cd831c9', title_text: this.hamburger_menu_button_name, position: "top", class: "dda-d-block" }, h("button", { key: '0960c8a29a184241a3de1a5555ffd413c4457812', type: "button", class: "hamburger-menu-btn", name: this.hamburger_menu_button_name }, h("span", { key: 'a9782149beab1a64e710d87350d39599588cf362', class: "hamburger-line" }), h("span", { key: 'b8f1b3c59b6c5795030f7730895f42036fa5eedb', class: "hamburger-menu-text" }, this.hamburger_menu_button_name)))), h("div", { key: 'e8504915927404d7b8dce94990241b6d939262ee', class: "dda-sidemenu", style: { display: this.isMenuOpen ? 'block' : '', insetInlineStart: this.isMenuOpen ? '0px' : '' } }, h("div", { key: 'f36d65085f5aaa80e21cb5c080f4d0ba7d87a37e', class: "dda-sidemenu-content" }, h("h6", { key: '3aa347b291af9596d0fc5ca73a32346325dbdc91', class: "dda-side-nav-title" }, this.sideMainMenuTitle), h("ul", { key: 'e10d978f51d0259c866fb42089c77ceedafb8d12', class: "main_side_menu" }, sideMenuItems.map((menu, index) => {
+        return (h("header", { key: '2b4fa55f5dd9004fe6f40d3a492c81b7d0592f11', class: 'dda-header' }, h("div", { key: 'a843f7013c7b835d9f8cdb1fa0389178f796c376', class: "dda-head-logo" }, h("a", { key: '5917cf2493a2b44518d37e090e9230a2a960710e', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.firstLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.firstLogoHref) : ''), class: "govt-logo", target: this.firstLogoTarget, rel: "noopener noreferrer" }, h("img", { key: 'b2465b43a1e52eda2f0a88ca8efdbde26c7d0dbc', class: "logo-white", src: this.firstLogoWhiteSrc, alt: `${this.firstLogoAlt} White` }), h("img", { key: '9e8b6f30350357b63774381d88f92cfbd358fd25', class: "logo-colored", src: this.firstLogoSrc, alt: this.firstLogoAlt })), h("a", { key: 'a891cb7b67c91b87e45edcabd1c5257bff0052fd', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.secondLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.secondLogoHref) : ''), class: "entt-logo" }, h("img", { key: '21bf57b1e19d38d901a27b24990b56ed2173ca61', class: "logo-white", src: this.secondLogoWhiteSrc, alt: `${this.secondLogoAlt} White` }), h("img", { key: 'ebc5fb30f29242082c946fed15a372103cf95e2b', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }))), h("div", { key: 'cf9dd0bbe837b4b89b22a80fb7ec266066e9a23e', class: "dda-menu-container" }, h("div", { key: 'e7d850797fc2fd1741dc33beb8f8070898eacb7e', class: "dda-main-navigation" }, h("div", { key: '0ccd59c3572e277c8082e8a9ef2efa5e53087287', class: `dda-menu-overley ${this.isMenuOpen ? 'show-overley' : ''}`, onClick: this.toggleMenu }), h("div", { key: 'e02bd0d66f3d315b0d051ba338b3357ae43566c1', class: "hamburger-menu", onClick: this.toggleMenu }, h("dda-tooltip", { key: '5834c4033a7d9b1c2c9e94c582fe67cd8840be37', title_text: this.hamburger_menu_button_name, position: "top", class: "dda-d-block" }, h("button", { key: '467ef292e8b4ae925a0ba4d019f7f12306d8f2a4', type: "button", class: "hamburger-menu-btn", name: this.hamburger_menu_button_name }, h("span", { key: 'bdbc8f31b998774e4d2746eb141228b74256134b', class: "hamburger-line" }), h("span", { key: '848048859627f9c2534543f473d6a26555ad1ff9', class: "hamburger-menu-text" }, this.hamburger_menu_button_name)))), h("div", { key: 'bb89fd52b976955ace236c811f10b59ba7599656', class: "dda-sidemenu", style: { display: this.isMenuOpen ? 'block' : '', insetInlineStart: this.isMenuOpen ? '0px' : '' } }, h("div", { key: '458e6702138d899eb43fab2af16df5b17964f002', class: "dda-sidemenu-content" }, h("h6", { key: '282d0dbee6babef6f1ed37a208b0ce9a4f82d7ed', class: "dda-side-nav-title" }, this.sideMainMenuTitle), h("ul", { key: 'e12511de5bba98165c54bdd300f6a51b062d8572', 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}
-                href: this.useNavigator == 'true' ? 'javascript:void(0)' : menu.href,
-                // class={menu.subMenu && menu.subMenu.length > 0 ? 'showSub' : ''}
-                class: [
+            return (h("li", { key: currentIndex, id: `header_${menu.label}` }, h("a", { href: this.useNavigator == 'true' ? 'javascript:void(0)' : menu.href, class: [
                     menu.subMenu && menu.subMenu.length > 0 ? 'showSub' : '',
                     menu.active === 'true' ? 'active' : ''
                 ]
@@ -342,13 +366,12 @@ export class DdaHeader {
                             this.navigatorClick.emit(menu.href);
                         }
                     }
-                }
-            }, menu.label), this.renderSubMenu(menu.subMenu, currentIndex)));
-        })), this.hideOtherMenu == false && h("h6", { key: '88e480a1c8e830690365a55d529332fcea632b35', class: "dda-side-nav-title" }, this.sideOtherMenuTitle), !this.hideOtherMenu && (h("ul", { key: '20b70b2c839e58df63c75ec355b07a6bc2bfd3c7', 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, class: {
+                } }, menu.label), this.renderSubMenu(menu.subMenu, currentIndex)));
+        })), this.hideOtherMenu == false && h("h6", { key: 'a9d47b8de1b3896dda81e22e3beafa57bfa24e42', class: "dda-side-nav-title" }, this.sideOtherMenuTitle), !this.hideOtherMenu && (h("ul", { key: '8e6920c0eb8383b4e1a5da31c88f8c12db2a408f', 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, class: {
                 active: itemlist['active'] === 'true',
-            }, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(itemlist.href) : '') }, itemlist.label))))))), h("div", { key: '3f5f95f384b2e7b3fdb372b979c0b900c0c91cc1', class: "dda-sidemenu-bottom" }, h("div", { key: '3735b34ab580f7bff1a1c1b0bb8cb962d186bd15', class: "dda-sidemenu-gov-logo" }, h("a", { key: 'd058ceda0f5def3282ac20689f683997d71c25ba', 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: '328a0aa7c7e9ac93a67e41c9bbbe3cf0d57d8dce', class: "", src: this.firstLogoSrc, alt: this.firstLogoAlt }))), h("div", { key: 'bd40ae890c04419ebd6066ee1cb2837ffa8e20ec', class: "dda-toolbar-menu-sidemenu" }, h("ul", { key: '16cc6b18d2cbdbdf98362d1e90363ca4c0617fa8' }, this.accessibility_button_id && (h("li", { key: 'c6d6e514186e7a700538dc345308f66317c4f051' }, h("button", { key: 'f3bbb3caac8d8760ec4e6bca5a27c0b0ab3fab58', name: this.toggle_accessibility_button_name, class: "tool-btn accessibility-btn", type: "button", onClick: this.toggleMobileAccessibilty, id: this.accessibility_button_id }, h("i", { key: '1fa5cbaf215887f36f47e315a4df63d210c117b5', class: this.accessibility_button_icon_family }, this.accessibility_button_icon_name), h("span", { key: 'a096bbc1df6655ab7155a48296114f836825a90f', class: "visually-hidden" }, this.accessibility_button_text)))), this.language_text && (h("li", { key: 'd5de4b816eea811dfd05d7c5c8f6b204dd8a4674' }, h("button", { key: 'c5aa6e9229c792a0d52b6a692a8a27ac12ecc988', name: this.language_button_name, class: "tool-btn", type: "button", onClick: this.languagehandler }, this.language_text))), this.loginText && (h("li", { key: '221f3f047a2feeaf306d2ed027934a5e7077e309' }, h("dda-link-button", { key: '487ae0c124443d46ab8859403133a6f850d70fef', button_color: "onsurface-secondary", start_icon: this.loginIcon, custom_class: "tool-btn login-button", link_button_text: this.loginText, onClick: this.toggleLogin,
+            }, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(itemlist.href) : '') }, itemlist.label))))))), h("div", { key: '7a4db07db60f2b6936d25bf2d8ecfafdc7d3da29', class: "dda-sidemenu-bottom" }, h("div", { key: 'b8aded954a1d95a4ba50ed10a04f99af3143a9a2', class: "dda-sidemenu-gov-logo" }, h("a", { key: '59b440eded7e2be6a459919d153901d8491cf09f', 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: 'b7b24c1f2e9ddb03f1f86b139bee048b7887dae8', class: "", src: this.firstLogoSrc, alt: this.firstLogoAlt }))), h("div", { key: 'd6fdbf97d3af590aea512ffcf7556696b4f2583d', class: "dda-toolbar-menu-sidemenu" }, h("ul", { key: 'f0a95d5ce431eaf6f10470f6bc0c5c82cf227f70' }, this.accessibility_button_id && (h("li", { key: '31b46cf56b69acb2890bfba7d6c7c1d941ca7c13' }, h("button", { key: '09513c2435987924121a7a48999032c32d8af532', name: this.toggle_accessibility_button_name, class: "tool-btn accessibility-btn", type: "button", onClick: this.toggleMobileAccessibilty, id: this.accessibility_button_id }, h("i", { key: '6595f8254a398fd6540900cf325a6c790d326f37', class: this.accessibility_button_icon_family }, this.accessibility_button_icon_name), h("span", { key: '27c1bedb6de28ef97ebb0c0fc896df15690d6675', class: "visually-hidden" }, this.accessibility_button_text)))), this.language_text && (h("li", { key: '5c01765fcc511a6ef915bdce962726f59d789999' }, h("button", { key: '7c2dd4b0a0b529ea957e9745badab5ba31cd27e3', name: this.language_button_name, class: "tool-btn", type: "button", onClick: this.languagehandler }, this.language_text))), this.loginText && (h("li", { key: 'b3760400eeca0c2497890aff2f2431fccbbc3852' }, h("dda-link-button", { key: 'e81a27c36f0cceb4c12381c9723199eedd63f6fc', 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: 'd2e3df7aa4fada34a26938e33826976563cd338f', 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: 'b1240e29f854d3745dc545d61e8fa029e1b2277b', 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: 'd2a4fcc2515dca0c3c8d83c8f8879aaa15fc1b09', "use-navigator": this.useNavigator, "navigator-click": this.navigatorClick, "show-Quick-Links-Icon": this.showQuickLinksIcon, "quick-links": typeof this.quickLinks === 'string' ? this.quickLinks : JSON.stringify(this.quickLinks) }))), h("div", { key: '5ac39abd0bf6cc76bc513c7830ad73cb47f13d81', class: "dda-mobile-entt-logo" }, h("a", { key: 'a7cffa397daead9537fe45672bccb904dd716ae4', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.secondLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.secondLogoHref) : ''), class: "entt-logo" }, h("img", { key: '4f8508fdf4b0f1f6c15477f54956d158a56f634c', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: '0f04c5ce301f97d19c765322281eeba33db83c69', class: "logo-white", src: this.secondLogoWhiteSrc, alt: this.secondLogoAlt }))), h("div", { key: '784fc8a9ec206df296d0bc8406a32a3d20678bae', class: "dda-mobile-search" }, this.mobileMenuSearchId && (h("a", { key: '8269fb85bd8726deaf4cf2865c44f1f89c2a1dc0', 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: 'd17ca044c357b27a053c242453efacfc6a256eca', class: "visualy-hidden" }, this.searchText || 'Search'), h("i", { key: 'ce80aec55c19417fb2de1397f780edfef115b309', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search")))), h("div", { key: '59c75bfc8ccd5a10f150320fd74a31869bef372b', class: "dda-toolbar-menu" }, h("ul", { key: '519da4133f96b7f6541e5df2022b8a3cb654e1ce' }, this.search_input_name && (h("li", { key: '9832fc52dc4810eb42a961f183da28dc7bf9e796' }, h("dda-tooltip", { key: 'edc14b081750c28656912470eff75e1e2bf1f95a', title_text: this.search_tooltip || 'Search', description: "", position: "top" }, h("div", { key: '990c42155a382440db915bc70ecfef2778039872', class: "dda-search dda-header-search" }, h("label", { key: '291329ccd3d91d50cf484829e421338f491bb9fc', id: "ddaSearch-label", class: "visualy-hidden", "aria-hidden": "true" }, this.searchText || 'Search'), h("i", { key: 'd90c2857a0837d2e47151ec3d0a8ca43e8087bba', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search"), h("dda-input", { key: '810a3b3d3e9ac19d17b75b80f1e4e0b43e688565', 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: "", onInputChanged: (e) => {
+            href: this.useLoginPopup ? 'javascript:void(0)' : this.loginLink, button_shape: "circle", size: "sm" })))))), h("button", { key: '41b93f98387c7f745255c1e2d3cee6d10eba5275', 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: 'bf351a2f21a65f2e6c29927fdff6e526deb785a4', 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: '5c27324ff74b40a6a663aac1fb537a86c45ee52a', "use-navigator": this.useNavigator, "navigator-click": this.navigatorClick, "show-Quick-Links-Icon": this.showQuickLinksIcon, "quick-links": typeof this.quickLinks === 'string' ? this.quickLinks : JSON.stringify(this.quickLinks) }))), h("div", { key: 'c100b736534c53cc1391072fbd87e5ad7b903d82', class: "dda-mobile-entt-logo" }, h("a", { key: 'efba4f495641e956dc43dc9603714340bb7974b4', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.secondLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.secondLogoHref) : ''), class: "entt-logo" }, h("img", { key: '0056a10a5496eda85a4eb8af7c253b560b5865e5', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: '493a46dc9e0279cc1e07379a3261a937494d0469', class: "logo-white", src: this.secondLogoWhiteSrc, alt: this.secondLogoAlt }))), h("div", { key: 'a761d94f9184e92cd50ae5a74d819376fb5e2550', class: "dda-mobile-search" }, this.mobileMenuSearchId && (h("a", { key: 'eeb5d0eeb35957cc6c85a17ec1d8d0cd1acf5e48', 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: 'f9090497d061a6a77e8e4186ef8e1f567275830a', class: "visualy-hidden" }, this.searchText || 'Search'), h("i", { key: '241489196b009f49f8a49d6733b716ba54d386df', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search")))), h("div", { key: '4648076bea0c69c3c36bf1c96d548f24532dd045', class: "dda-toolbar-menu" }, h("ul", { key: '09e2167c6e5f212705c1ec525b1bc3f5639b65f3' }, this.search_input_name && (h("li", { key: '848d1eac43b630193cd2923f5b85eefcdd7ee8d6' }, h("dda-tooltip", { key: '3d2fc2ceb44396ecde4ff6a4b6ae449fc874971d', title_text: this.search_tooltip || 'Search', description: "", position: "top" }, h("div", { key: '5234eca1e761519097802f496109b9eebe930b21', class: "dda-search dda-header-search" }, h("label", { key: 'b407782c0b50da5d786f1a51f38121d6e43513bb', id: "ddaSearch-label", class: "visualy-hidden", "aria-hidden": "true" }, this.searchText || 'Search'), h("i", { key: 'ca3efe720eeda2fe2949d66edbba61dc590479bc', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search"), h("dda-input", { key: 'ce6504719137054b04bf5708219e8897933240fd', 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: "", onInputChanged: (e) => {
                 this.searchhandler(e.detail.target.value);
                 console.log(e.detail.target.value);
             }, onKeyPress: e => {
@@ -357,7 +380,7 @@ export class DdaHeader {
                     console.log(e.target.value);
                     // Pass the value to the searchhandler
                 }
-            } }), h("span", { key: 'b099d2e7849d053b1e1ba14649c594d06c0e3585', id: "validationId", class: "visually-hidden" }, "Enter keywords to search the site."))))), this.accessibility_button_id && (h("li", { key: 'b36c371ddba19fac392ac9fc5b127e13a8edb9df' }, h("dda-tooltip", { key: '320c1ed592c22f292225664624b2737cb71efd4d', title_text: this.accessibility_tooltip, position: "top" }, h("button", { key: '1d18a368951ab42aa1fe7e028ef59c4d45256ada', 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: 'b805fe2e4480ef85ee4ce682d0c20bc7ee0e1687', class: this.accessibility_button_icon_family }, this.accessibility_button_icon_name), h("span", { key: '231db67ec3143f553c9853a0a043c0866919e13a', 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: '55e8fc53d0bdbc8916750dab76f964d0af0db281' }, h("dda-tooltip", { key: 'e39c17cb88ea9334aede48556b16fa96448492fd', title_text: this.language_tooltip, position: "top" }, h("dda-button", { key: '0549fc410084074febead4f90cc97b7f4fd05990', 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: '05b35d24f04b39d233f790eb288a636ccd590868' }, h("dda-tooltip", { key: 'f4480551e90cf2cc1238e77f9061551b69e72de0', title_text: this.login_tooltip, position: "top" }, h("dda-link-button", { key: '19709adbbb8a5e010cb44a75ad5144c56ed930b5', button_color: "onsurface-secondary", start_icon: this.loginIcon, custom_class: "tool-btn login-button", link_button_text: this.loginText, onClick: this.toggleLogin,
+            } }), h("span", { key: '785134f70ed457049d85fdc06493b9ad8ad0df65', id: "validationId", class: "visually-hidden" }, "Enter keywords to search the site."))))), this.accessibility_button_id && (h("li", { key: '1813b4dee3a50e80c1c65adcc50ad6558615e986' }, h("dda-tooltip", { key: '0b73067134c0fb11a387c43a2ee133e7d1cc59ce', title_text: this.accessibility_tooltip, position: "top" }, h("button", { key: '4669cbcab099fe5cf68e2cadf73203562a511a0a', 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: 'ea21f161250ad97683a97ca3262c3d1d2c22a1cc', class: this.accessibility_button_icon_family }, this.accessibility_button_icon_name), h("span", { key: '96749ab12d27b6089dd3100e762a35adf432f685', 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: '603c854ba93aa5f9ae80617c38f21ae5a1f22334' }, h("dda-tooltip", { key: 'a1ae8fce57f41dc770ff835763d8c697bb00a89a', title_text: this.language_tooltip, position: "top" }, h("dda-button", { key: '29d7428dbce4c32930a100225c8cb12f8a8884ff', 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: 'aff9f8f0fa4134d3dde75182dea55b129367ea12' }, h("dda-tooltip", { key: 'b39cbe2b7f6ac188f9221d6c56748643df448f7a', title_text: this.login_tooltip, position: "top" }, h("dda-link-button", { key: 'dae4c808217fc60dc2a51d01b0627b16e3bbc79a', 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)));
     }