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

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

@@ -2,6 +2,8 @@ import { h } from "@stencil/core";
 export class DdaHeader {
     constructor() {
         this.firstLogoHref = '#';
+        this.firstLogoTarget = '';
+        this.rel = 'noopener noreferrer';
         this.secondLogoHref = '#';
         this.header_default_submenu = false;
         this.loginText = null;
@@ -175,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);
@@ -306,13 +336,9 @@ export class DdaHeader {
     }
     render() {
         const sideMenuItems = this.parseJsonArray(this.sideMenuItems);
-        return (h("header", { key: '320bb6c50e7b88b6b4cb21ecfef032d191b1ceaf', class: 'dda-header' }, h("div", { key: 'b9dc390cf2f78361c907587076afa6a280b965c4', class: "dda-head-logo" }, h("a", { key: 'cec2479d2cfa6ca99d23db53bc98a466b1d2f9b4', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.firstLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.firstLogoHref) : ''), class: "govt-logo" }, h("img", { key: '7f54c29ceee32fd999579f348af0c65c435da84d', class: "logo-white", src: this.firstLogoWhiteSrc, alt: `${this.firstLogoAlt} White` }), h("img", { key: '76edcbdb5ea1f87d34b6542c57245722aa5ca3ff', class: "logo-colored", src: this.firstLogoSrc, alt: this.firstLogoAlt })), h("a", { key: 'c7b14f22807d07889ee5f5a535dc53c4ad6bc39c', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.secondLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.secondLogoHref) : ''), class: "entt-logo" }, h("img", { key: 'f0a94fe0c472e9b07e80d8b798279de859dfa849', class: "logo-white", src: this.secondLogoWhiteSrc, alt: `${this.secondLogoAlt} White` }), h("img", { key: 'd0fe3ae7fae1b52fe722d4b4918c66f878ca9d47', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }))), h("div", { key: '1f99a3635cdd4b5a0e237636c8d9c1de7866575b', class: "dda-menu-container" }, h("div", { key: '61b2f9fa7fa7b785c7b704ecefe3fc25810330b0', class: "dda-main-navigation" }, h("div", { key: 'a806db8b53d7656cc3443149f472695fcf4d4dd2', class: `dda-menu-overley ${this.isMenuOpen ? 'show-overley' : ''}`, onClick: this.toggleMenu }), h("div", { key: '13ef90fd6e160587806b8c71f52bae47b9d4ced3', class: "hamburger-menu", onClick: this.toggleMenu }, h("dda-tooltip", { key: 'bd5df176d359039da5a796de55cf31d35debf56b', title_text: this.hamburger_menu_button_name, position: "top", class: "dda-d-block" }, h("button", { key: 'c6b26754e52e8b96cf848c05d19b3ad8dfe6f9cf', type: "button", class: "hamburger-menu-btn", name: this.hamburger_menu_button_name }, h("span", { key: '823258e0d23f138541f5efd7770f299dcded3e96', class: "hamburger-line" }), h("span", { key: '10b6deed2384e7140a4d745da369f1f1fbca1f23', class: "hamburger-menu-text" }, this.hamburger_menu_button_name)))), h("div", { key: '96fa55ffff63de37635cd0cfc739b4d882326206', class: "dda-sidemenu", style: { display: this.isMenuOpen ? 'block' : '', insetInlineStart: this.isMenuOpen ? '0px' : '' } }, h("div", { key: '65f7729f0b2d7a826bdd68befb12e7b343dfb99f', class: "dda-sidemenu-content" }, h("h6", { key: '5f95515ab2d4c2da0902b0f567e14cef37c24d9f', class: "dda-side-nav-title" }, this.sideMainMenuTitle), h("ul", { key: '06fa6cfc285874ca162518a9d2d82a7d70be9858', 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' : ''
                 ]
@@ -340,13 +366,12 @@ export class DdaHeader {
                             this.navigatorClick.emit(menu.href);
                         }
                     }
-                }
-            }, menu.label), this.renderSubMenu(menu.subMenu, currentIndex)));
-        })), this.hideOtherMenu == false && h("h6", { key: '741a87ec2773bfd4599d9dbdf8b7bbfc66644f80', class: "dda-side-nav-title" }, this.sideOtherMenuTitle), !this.hideOtherMenu && (h("ul", { key: 'ad3037fc41ad60202e38f38d08b113368326f698', 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: 'b4a6bad345a6c30469714a12c1ac0e08a36d0232', class: "dda-sidemenu-bottom" }, h("div", { key: '89d304f277b2fdb2477d9a57080c094ae9d92265', class: "dda-sidemenu-gov-logo" }, h("a", { key: '827000661949876ee2ef140665243ee3e5cd3571', 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: '420d364a247b50cbeb590338bde2203e54797ee4', class: "", src: this.firstLogoSrc, alt: this.firstLogoAlt }))), h("div", { key: 'c791779a7b204b807c9ed497717a3e91c1835439', class: "dda-toolbar-menu-sidemenu" }, h("ul", { key: '91cb1fd161897559a85eb632d2d77c7d5ca49c7d' }, this.accessibility_button_id && (h("li", { key: '927a4045d6ee032c3b95d0c7a19e300cadf0c6b9' }, h("button", { key: '4af8d8eed00a40ed281b8efc81281ea62baaa3f6', name: this.toggle_accessibility_button_name, class: "tool-btn accessibility-btn", type: "button", onClick: this.toggleMobileAccessibilty, id: this.accessibility_button_id }, h("i", { key: '0bd5daf86009b0a6f895b1a56974e5c36a50ec7e', class: this.accessibility_button_icon_family }, this.accessibility_button_icon_name), h("span", { key: 'd702a07e54f3ba8800880b5883a457a39ab081f6', class: "visually-hidden" }, this.accessibility_button_text)))), this.language_text && (h("li", { key: '93f6a4161a7a960ee94144bb5474f5f76d4b28d0' }, h("button", { key: '3cd59d02e08967a810b4cc9b20a76ec1b4ead1ba', name: this.language_button_name, class: "tool-btn", type: "button", onClick: this.languagehandler }, this.language_text))), this.loginText && (h("li", { key: '2d93126df5228944ce934ab3b06e396cb4699b69' }, h("dda-link-button", { key: '19c32bb297878743d379bfebb2972d3888e854bc', 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: '1f2df4dc3905ddb948e8bb55abb764238e131298', 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: 'ba70e57cb7cffa77ee5dad748611f8e204ca943f', 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: '8ce70c1329af918f148a721b446749f95726466c', "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: '6ade94ce121e760e02dbc7b3c9f95b9b055d4c62', class: "dda-mobile-entt-logo" }, h("a", { key: 'd6dbcd698634f25bcfe7a5797caa52db31ece40b', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.secondLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.secondLogoHref) : ''), class: "entt-logo" }, h("img", { key: '5247234ab6d0e4ef3e725bb6fb8e681d796da37b', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: '2adc2e0fecae54e51a825d83883c728ed6d33d64', class: "logo-white", src: this.secondLogoWhiteSrc, alt: this.secondLogoAlt }))), h("div", { key: '6188b81b90ee5d93334862fb5657b4b2bb50472b', class: "dda-mobile-search" }, this.mobileMenuSearchId && (h("a", { key: '563bfd7e62ca7249cff9363451afa622d21e7ec7', 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: '98773ae4ea5cc8b14e526013114f5a2daf329cbd', class: "visualy-hidden" }, this.searchText || 'Search'), h("i", { key: 'c3ece4911b5d9342544c5a7a815cdf6b0dc7828f', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search")))), h("div", { key: '9e4a5228941be09ae4c18dfe0507ef213a8ae7ff', class: "dda-toolbar-menu" }, h("ul", { key: 'ae73001a8659b0dcee9c6c3e461bd4503f31ee3e' }, this.search_input_name && (h("li", { key: '301c3ca831b60722f8a37f9fbdf45a6b34bd6af8' }, h("dda-tooltip", { key: 'c7422723142be2307bb5de6c9081fb85037be4fa', title_text: this.search_tooltip || 'Search', description: "", position: "top" }, h("div", { key: '6ef5d28bb31736f71de9d84948723a30242082bb', class: "dda-search dda-header-search" }, h("label", { key: 'e548283a91365210457a77267c6962f7857bc1c6', id: "ddaSearch-label", class: "visualy-hidden", "aria-hidden": "true" }, this.searchText || 'Search'), h("i", { key: '1e4df1482d119718cb0f6b14ebadec67e6972ce9', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search"), h("dda-input", { key: '981a10ddb29d5a42633c05f40dfff5e6e482105a', 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 => {
@@ -355,7 +380,7 @@ export class DdaHeader {
                     console.log(e.target.value);
                     // Pass the value to the searchhandler
                 }
-            } }), h("span", { key: '0de101ccc8ccebb8a0d8d356f6d94f0bf108dd80', id: "validationId", class: "visually-hidden" }, "Enter keywords to search the site."))))), this.accessibility_button_id && (h("li", { key: 'c705eb3deb4523c13f32d951fba22f970c03ab96' }, h("dda-tooltip", { key: '2083496f38241f8f69f3c652fdfba2c85d30841a', title_text: this.accessibility_tooltip, position: "top" }, h("button", { key: '3ddf04f54d8bacfee1c2a917cdee10b7a8744c9e', 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: 'a98e5c2278a528fa888a42132a6c2b83587847b2', class: this.accessibility_button_icon_family }, this.accessibility_button_icon_name), h("span", { key: 'da98b2ffe669c369ba2cc25a4114000aadd3a94e', 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: '15eddf34c2eb73a72b6d633530aa2edc249f9512' }, h("dda-tooltip", { key: '21ce610efc413d210398a2ea5c4b0482b754a470', title_text: this.language_tooltip, position: "top" }, h("dda-button", { key: '503cf5a80aea409f1967dc1ffd86eaf2dd7d95f5', 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: 'ee9a43754dc37c468dbe2a99d18a347fa8306de4' }, h("dda-tooltip", { key: 'fdff803e1f99c328381dd7ae8a63b739c511440e', title_text: this.login_tooltip, position: "top" }, h("dda-link-button", { key: 'c80994085de187ad14e594eb60c442e3c5fe5e43', 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)));
     }
@@ -449,6 +474,46 @@ export class DdaHeader {
                 "attribute": "first-logo-alt",
                 "reflect": false
             },
+            "firstLogoTarget": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "first-logo-target",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "rel",
+                "reflect": false,
+                "defaultValue": "'noopener noreferrer'"
+            },
             "secondLogoHref": {
                 "type": "string",
                 "mutable": false,