@dubai-design-system/components-js 5.0.3 → 5.1.1

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

@@ -1,15 +1,31 @@
 import { h } from "@stencil/core";
+// Gives each header its own search input ids, so several headers on a page do not clash.
+let headerInstanceCount = 0;
 export class DdaHeader {
     constructor() {
+        /** Link URL of the first logo in the header and the side menu. Default: `/`. */
+        this.firstLogoHref = '/';
+        /** Link URL of the second logo on desktop and mobile. Default: `/`. */
+        this.secondLogoHref = '/';
+        /** `lang` attribute of the language buttons, the language of `language_text`. Default: `ar`. */
+        this.language_lang = 'ar';
         this.isMenuOpen = false;
         this.isSubMenuOpen = false;
         this.isSideSubMenuOpen = false;
         this.isAccessibiltyOpen = false;
+        this.isSearchOpen = false;
+        this.searchId = `dda-header-search-${++headerInstanceCount}`;
+        this.focusSearchAfterRender = false;
         this.lastScrollTop = 0;
+        /** Accessible name of the hamburger menu button (visually hidden text). Default: `Menu`. */
+        this.menu_button_label = 'Menu';
         this.openMenus = {};
         this.activeMenuIndex = null;
         this.toggleEscapeKey = (event) => {
             if (event.key === 'Escape') {
+                if (this.isSearchOpen) {
+                    this.closeMobileSearch();
+                }
                 this.isMenuOpen = false;
                 this.isAccessibiltyOpen = false;
                 this.isSubMenuOpen = false;
@@ -17,6 +33,29 @@ export class DdaHeader {
                 this.activeMenuIndex = null;
             }
         };
+        this.handleSearchSubmit = (event) => {
+            const input = event.currentTarget.querySelector('input');
+            const query = input.value.trim();
+            if (!query) {
+                event.preventDefault();
+                input.focus();
+                return;
+            }
+            const searchEvent = this.searchSubmit.emit({ query });
+            // Without a results URL there is nowhere to go; a cancelled event means the app routes itself.
+            if (searchEvent.defaultPrevented || !this.search_action) {
+                event.preventDefault();
+            }
+        };
+        this.openMobileSearch = () => {
+            this.focusSearchAfterRender = true;
+            this.isSearchOpen = true;
+        };
+        this.closeMobileSearch = () => {
+            var _a;
+            this.isSearchOpen = false;
+            (_a = this.mobileSearchButton) === null || _a === void 0 ? void 0 : _a.focus();
+        };
         this.handleOutsideClick = (event) => {
             let isClickInsideMenu = event.target.closest('.main_side_menu');
             if (!isClickInsideMenu) {
@@ -50,6 +89,7 @@ export class DdaHeader {
             }
         };
         this.handleScroll = () => {
+            this.updateScrolled();
             const scrollTop = window.scrollY;
             const menuContainer = document.querySelector('.dda-menu-container');
             const logoContainer = document.querySelector('.dda-header');
@@ -112,8 +152,10 @@ export class DdaHeader {
             return (h("div", { class: `main_sub_menu ${this.openMenus[parentLi] ? 'showSubMenu' : ''}` }, subMenu[0].headerLabel && (h("p", { 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: item.href, class: item.subMenu && item.subMenu.length > 0 ? 'showSub' : '', onClick: (e) => {
-                        e.preventDefault();
-                        this.toggleSidebarSubMenu(currentIndex);
+                        if (item.subMenu && item.subMenu.length > 0) {
+                            e.preventDefault();
+                            this.toggleSidebarSubMenu(currentIndex);
+                        }
                     } }, item.label), this.renderSubMenu(item.subMenu, currentIndex)));
             }))));
         };
@@ -144,6 +186,7 @@ export class DdaHeader {
         this.openMenus = newOpenMenus;
     }
     componentDidLoad() {
+        this.updateScrolled();
         window.addEventListener('scroll', this.handleScroll);
         document.addEventListener('click', this.handleOutsideClick);
         document.addEventListener('keydown', this.toggleEscapeKey);
@@ -153,8 +196,37 @@ export class DdaHeader {
     disconnectedCallback() {
         window.removeEventListener('scroll', this.handleScroll);
         document.removeEventListener('click', this.handleOutsideClick);
+        document.removeEventListener('keydown', this.toggleEscapeKey);
         document.removeEventListener('click', this.handleOutsideAccessibilityClick);
-        document.addEventListener('click', this.handleOutsideMegaMenuClick);
+        document.removeEventListener('click', this.handleOutsideMegaMenuClick);
+        this.lockPageScroll(false);
+    }
+    // While the side menu is open, the page underneath must not scroll; the menu itself still does.
+    onMenuOpenChange(isOpen) {
+        this.lockPageScroll(isOpen);
+    }
+    lockPageScroll(lock) {
+        document.documentElement.classList.toggle('dda-scroll-lock', lock);
+    }
+    componentDidUpdate() {
+        var _a;
+        // The panel is hidden until this render, so focus can only move into it now.
+        if (this.focusSearchAfterRender) {
+            this.focusSearchAfterRender = false;
+            (_a = this.mobileSearchInput) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    renderSearchInput(id, ref) {
+        return [
+            h("label", { htmlFor: id, class: "visually-hidden" }, this.searchText || 'Search'),
+            h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search"),
+            h("input", { name: this.search_input_name || 'q', type: "text", id: id, placeholder: this.searchText || 'Search', enterkeyhint: "search", autocomplete: "off", ref: ref }),
+        ];
+    }
+    // The transparent style (<body class="transparent">) shows only at the top of the page.
+    // Below the top, `dda-scrolled` turns it off in CSS and the header uses the standard style.
+    updateScrolled() {
+        this.el.classList.toggle('dda-scrolled', window.scrollY > 0);
     }
     parseJsonArray(jsonString) {
         try {
@@ -168,11 +240,12 @@ export class DdaHeader {
     render() {
         const sideMenuItems = this.parseJsonArray(this.sideMenuItems);
         const quickLinks = this.parseJsonArray(this.quickLinks);
-        const isHomepage = window.location.pathname === '/';
         const setActiveMenuIndex = (index) => {
             this.activeMenuIndex = index;
         };
-        return (h("header", { key: 'a298c2252bb6b5675d2cc624ba5d6b312f6f57e2', class: `dda-header ${isHomepage ? 'transparent' : ''}` }, h("div", { key: 'dd9ad0bd9ed0a2b3eba5dc27e98cc54f9550d9e5', class: "dda-head-logo" }, h("a", { key: 'da9bcbc407b1a79ec88fcece56db7acefe8bb696', href: "#", class: "govt-logo" }, isHomepage ? (h("img", { class: "logo-white", src: this.firstLogoWhiteSrc, alt: this.firstLogoAlt })) : (h("img", { class: "logo-colored", src: this.firstLogoSrc, alt: this.firstLogoAlt }))), h("a", { key: '231b5a2f45236358346e54d531795ad2faae6509', href: "#", class: "entt-logo" }, isHomepage ? (h("img", { class: "logo-white", src: this.secondLogoWhiteSrc, alt: this.secondLogoAlt })) : (h("img", { class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt })))), h("div", { key: '73585d98fe29945961e290eda75df6a3be697a17', class: "dda-menu-container" }, h("div", { key: '179da9799af2c68c8e22318d7d6eb49233ba8b67', class: "dda-main-navigation" }, h("div", { key: '2e88805271152742365a65ce5bfc6091bbc1eb34', class: `dda-menu-overley ${this.isMenuOpen ? 'show-overley' : ''}`, onClick: this.toggleMenu }), h("div", { key: '852bea97e9cad4373443d9ac95cdbdd65f1bd63d', class: "hamburger-menu", onClick: this.toggleMenu }, h("dda-tooltip", { key: '9c8832a45024bb0e1ef0012cdf838136b3283314', title_text: "Menu", position: "top", class: "d-block" }, h("button", { key: 'cddc2df723ca4f7aff3d8e5f339899bc76e61015', type: "button", class: "hamburger-menu-btn", name: this.hamburger_menu_button_name }, h("span", { key: 'd4119f26028f323673f922cd6dc6d8065acc12ca', class: "hamburger-line" }), h("span", { key: '24fbcc9fad2ade2bae52778c78bc7db537abe2f7', class: "hamburger-menu-text" }, "hamburger menu text")))), h("div", { key: '39a343f2e0b08b23b2c23e1d5b4f665a9352eebc', class: "dda-sidemenu", style: { display: this.isMenuOpen ? 'block' : '', insetInlineStart: this.isMenuOpen ? '0px' : '' } }, h("div", { key: '0a09851530d387006b70061ede2d75c3488f9767', class: "dda-sidemenu-content" }, h("p", { key: 'bc0b8dfb73356296f1330a0df32149fe337d4794', class: "dda-side-nav-title" }, "Quick Links"), h("ul", { key: '0e6f5913d3f3ab923ed79bd4a1d4b7a09092cb2b', class: "main_side_menu" }, sideMenuItems.map((menu, index) => {
+        // The transparent style is opt-in at page level (<body class="transparent">);
+        // CSS shows the white or colored logo to match.
+        return (h("header", { key: '59dd1315a658cac296fcf0b20d4bc7a218830efa', class: "dda-header" }, h("div", { key: '371a2169e8523c2929819802834a3b81027b2c1c', class: "dda-head-logo" }, h("a", { key: 'ddb83469513f05f58f55e55d55b1ead2e0410aee', href: this.firstLogoHref, class: "govt-logo" }, h("img", { key: 'fb68cbe224b76c34a75f41df1ba5444219d79fcd', class: "logo-colored", src: this.firstLogoSrc, alt: this.firstLogoAlt }), h("img", { key: '9ba056231acfc221053e446547e87d6df5682f75', class: "logo-white", src: this.firstLogoWhiteSrc || this.firstLogoSrc, alt: this.firstLogoAlt })), h("a", { key: 'f69244d54b2493c5b2d9edafdd091e1ce3461726', href: this.secondLogoHref, class: "entt-logo" }, h("img", { key: '4b10f167c2b46db1709a8392aba31a5cd927f23d', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: 'f219bb5766f7aa634a8ffcbbbb70930ffaf9a6ef', class: "logo-white", src: this.secondLogoWhiteSrc || this.secondLogoSrc, alt: this.secondLogoAlt }))), h("div", { key: 'bf11dd171cc21e22ff6ac555b071eecf21f4b6f9', class: "dda-menu-container" }, h("div", { key: 'ce4af3626562ee8d52bc65f5407b635c1fa8a2e4', class: "dda-main-navigation" }, h("div", { key: 'e102c3415dea6eb0c080faab1ccab6992000579a', class: `dda-menu-overley ${this.isMenuOpen ? 'show-overley' : ''}`, onClick: this.toggleMenu }), h("div", { key: '3662a9e76afd20212f1a5aed95d8c28add730166', class: "hamburger-menu", onClick: this.toggleMenu }, h("dda-tooltip", { key: '7235cd99a0aa41a1bf7c65bd57107bbe5bcefbcf', title_text: "Menu", position: "top", class: "d-block" }, h("button", { key: 'd320d2ac96e2ba0423a67a6a11982ba4c3db0274', type: "button", class: "hamburger-menu-btn", name: this.hamburger_menu_button_name }, h("span", { key: '6b0b0370d75c3e27a4c015d4e2b58fe4ec369e82', class: "hamburger-line" }), h("span", { key: '98feb32b6306000cb5d3aabaffc1326b1073a0af', class: "hamburger-menu-text" }, this.menu_button_label)))), h("div", { key: 'ce8cfb9de3da448449aa0147ba4daec255b551f5', class: "dda-sidemenu", style: { display: this.isMenuOpen ? 'block' : '', insetInlineStart: this.isMenuOpen ? '0px' : '' } }, h("div", { key: '9b99da2e547a1cca25139daeb75481a9cf3707df', class: "dda-sidemenu-content" }, h("p", { key: '0c0997ab12ea8efb4641b7c92191f1eea4b78f9d', class: "dda-side-nav-title" }, "Quick Links"), h("ul", { key: 'b27239f08af63fa46a4f630a2aceefa7bc137521', class: "main_side_menu" }, sideMenuItems.map((menu, index) => {
             const currentIndex = `menu-${index}`;
             return (h("li", { key: currentIndex }, h("a", { href: menu.href, class: menu.subMenu && menu.subMenu.length > 0 ? 'showSub' : '', onClick: (e) => {
                     if (menu.subMenu && menu.subMenu.length > 0) {
@@ -180,7 +253,7 @@ export class DdaHeader {
                         this.toggleSidebarSubMenu(currentIndex);
                     }
                 } }, menu.label), this.renderSubMenu(menu.subMenu, currentIndex)));
-        }))), h("div", { key: '53070cc3bb05c63ced0e0c9ad7827567584d708f', class: "dda-sidemenu-bottom" }, h("div", { key: '3986be3f711e00221c8c6566cfe2e757c7efa57e', class: "dda-sidemenu-gov-logo" }, h("a", { key: '2a0334d023843bb4bece54446ef037965aec2693', href: "#", class: "govt-logo mb-2" }, h("img", { key: '76fe0c26beae4e511abe91ae025cbf6f5438bd99', class: "", src: this.firstLogoSrc, alt: this.firstLogoAlt }))), h("div", { key: 'bd17fc2b68f35f0c75bcc1e158ea47f1d0b78533', class: "dda-toolbar-menu-sidemenu" }, h("ul", { key: 'dee65036a2d95d22a092d502bdc4f3ab221def64' }, h("li", { key: 'a4803496626b1656e0f5618e5763cb9c6073684f' }, h("button", { key: '297249a259af2f3b715b37be32a63230ebc16bf1', name: this.accessibility_button_name, class: "tool-btn accessibility-btn", type: "button", "aria-expanded": this.isAccessibiltyOpen ? 'true' : 'false', onClick: this.toggleAccessibilty }, h("i", { key: 'c45f95f4640f79ba12aeb246bbcabc4596aac844', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "accessibility"), h("span", { key: '086e0eb849a81c5b6423b98f264136c5a38e487d', class: "visually-hidden" }, "Accessibility"))), h("li", { key: '8c781468cca5714ef647bd8d774fb15d8e5ecbe6' }, h("button", { key: 'a0995ed94658a7d3207369e28558042a922ed454', name: this.language_button_name, class: "tool-btn", type: "button", onClick: this.languagehandler }, "\u0627\u0644\u0639\u0631\u0628\u064A\u0629")), h("li", { key: '46b858d64225063fee2678187d59c7dda75b9a12' }, h("dda-link-button", { key: 'dcdbf0bb77d1f2aeafa463cd3b8f445641fd2b65', button_color: "onsurface-secondary", start_icon: this.loginIcon || "sentiment_satisfied", custom_class: "tool-btn", href: this.loginLink, button_shape: "circle", size: "sm" }, this.loginText || "Login"))))), h("button", { key: '0d1ba9b4a53960b6098416f1a2b13ddb0aca06a8', name: this.close_menu_button_name, class: "close-btn side-nav-close-btn", "aria-label": "Close Sidebar", onClick: this.toggleMenu }, h("i", { key: '4729ed5d23cadf8f8856624c63ed1f09713d3a99', class: "material-icons  material-symbols-outlined" }, "close")), h("div", { key: '4186279875d3040eaacbec40eed55097d5822d40', class: "dda-accessibility hide-accessibility mobile-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, h("div", { key: '9a200a53ff82ddba6976c1b1a50aed28894d3af3', class: "dda-row" }, h("div", { key: '2c7473537d4e0b6367144a0197091b3f9dbbbb59', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '0ec84cbbe9702c56036a01ef99ac49648ce1a046', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Contrast"), h("form", { key: '6826656a91ded60b8b565ff65ef6162f4e07bafa' }, h("fieldset", { key: '392d568ebfb3086ef73caf4c45e8dd5b82cc9136', class: "dda-theme-list" }, h("legend", { key: '3f706d09801bf1cd686810d1d3077f25048d848d' }, h("p", { key: '36c9d60286144197e3ca63650dff70f7d2d1c394', class: "mb-3" }, "Select your preferred contrast setting ")), h("dda-radiobutton", { key: 'a12ee3aed6bc7c7faa0f455deb66744bd8973078', title_text: "Normal", checked: true, size: "sm", variants: "normal", supporting: "", group_name: "themeselectionmobile", input_id: "NormalMobile", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.normalContrasthandler }), h("dda-radiobutton", { key: '794209875f061b8181ee287e24acc1995bf2ac72', title_text: "Colours Blind", checked: false, size: "sm", variants: "normal", supporting: "", group_name: "themeselectionmobile", input_id: "ColoursBlindMobile", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.blindContrasthandler }), h("dda-radiobutton", { key: 'ccd9b99973bb532a17ec18719ff4f7f7189594e2', title_text: "Red Weakness", checked: false, size: "sm", variants: "normal", supporting: "", group_name: "themeselectionmobile", input_id: "RedWeaknessMobile", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.redContrasthandler }), h("dda-radiobutton", { key: '117e0db4962db964c3ba3a2b7302e70c11903c9a', title_text: "Green Weakness", checked: false, size: "sm", variants: "normal", supporting: "", group_name: "themeselectionmobile", input_id: "GreenWeaknessMobile", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.greenContrasthandler })))), h("div", { key: '4ecd6becebd60e820c5872db8c9fe30d8eee1eb8', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '34c1ec411992661f51f9d48e6c49e8cfd2117153', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Screen Reader"), h("p", { key: '2fc3fe98b9d92dc6fa3b9409a74b003f1b3dfdf7', class: "mb-3" }, "Listen to the content of the page by clicking play or listen"), h("div", { key: 'f7c43092a7eee98ce4ddb2c472f950c18c30cc7d', class: "rs_skip rsbtn rs_preserve", id: "readspeaker_button1" }, h("a", { key: '6266e6ed2e47212818231a46e4207c4dab6cd4dc', href: this.readSpeakerLink, rel: "nofollow", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker" }, h("i", { key: '3598e50e6fc331549830b87a0346103cc2585993', class: "material-icons  material-symbols-outlined" }, "volume_up")))), h("div", { key: 'd3240cd67a3eec7f39dc44936b3b688da7000d2d', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '9c0cc59c530f16b98b570b017715b8d907192745', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Text Size"), h("p", { key: 'd23dda20d76a089bbda1558c20455aa30ae772ad', class: "mb-3" }, "Use the buttons below to increase or decrease the text size"), h("div", { key: '69aae042f930c1ff5a8eec07e994f11a531b3928', class: "d-flex dda-gap-4" }, h("dda-button", { key: 'bf53fd90251c1e34c034ca6d9377ab37cf4db639', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }, "A"), h("dda-button", { key: '40083ac55a0f849ba92b2de5daa58f5d907a3c8e', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }, "A+"), h("dda-button", { key: '60c67dbc424799f7ebf88f6d5fa6de0c777610df', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler }, "A-")))), h("button", { key: '8b8b22cc4bbbdc9c5411275f2275faa7eea48a54', name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Accessibility", onClick: this.toggleAccessibilty }, h("i", { key: '6d0443cb135a4bf02cb5b2e599c749a0f70de034', class: "material-icons  material-symbols-outlined" }, "close")))), h("div", { key: 'e0d52f3110a480d3b0535980fb4de7eb31998985' }, h("ul", { key: '1782efe54b9df3569b61f11c55f26ab95eabfab0', class: "dda-mega-menu" }, quickLinks.map((link, index) => (h("li", { key: index }, h("a", { href: link.subMenu && link.subMenu.length > 0 ? '#' : link.href, onClick: link.subMenu && link.subMenu.length > 0 ? (e) => this.toggleSubMenu(index, e) : undefined, class: link.subMenu && link.subMenu.length > 0 ? `showSub ${this.activeMenuIndex === index ? 'icon_arrow' : ''}` : '' }, link.label), link.subMenu && link.subMenu.length > 0 && (h("div", { class: `megamenu-content ${this.activeMenuIndex === index ? 'showSubMenu' : ''}`, style: { display: this.activeMenuIndex === index ? 'block' : 'none' } }, h("div", { class: "megamenu-item dda-container" }, h("div", { class: "dda-row" }, h("div", { class: "dda-col-md-3" }, h("h3", { class: "mega-menu-title" }, link.menuLabel), h("ul", null, link.subMenu.map((subItem, subIndex) => (h("li", { key: subIndex }, h("a", { class: "megamenu-link", href: subItem.href }, h("span", { class: "dda-btn btn-color-onsurface-secondary btn-size-sm icon-btn-default" }, h("i", { class: "material-icons material-symbols-outlined" }, subItem.icon)), h("span", { class: "text-wrap" }, h("span", { class: "title-text dda-fs-body-lg dda-fw-700" }, subItem.title), h("span", { class: "dda-fs-tagline-lg dda-fw-400" }, subItem.description))))))))), h("button", { name: "close-mega-menu", class: "close-btn close_mega-menu", "aria-label": "Close Sidebar", onClick: () => setActiveMenuIndex(null) }, h("i", { class: "material-icons material-symbols-outlined" }, "close"))))))))))), h("div", { key: '836f8cacead7dd3f7f11aa9a8d6ef33df5c8a2b0', class: "dda-mobile-entt-logo" }, h("a", { key: '0839f72ff93da94fab710a68211a9fc7f3110ee6', href: "#", class: "entt-logo" }, h("img", { key: 'c1e4db247d42d4b0ae0149ae2051ccfd2b5f9a56', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: 'e8071992e07ee1aca579910c0c09249bf48953f8', class: "logo-white", src: this.secondLogoWhiteSrc, alt: this.secondLogoAlt }))), h("div", { key: '9822ca89e27d09428dad43712c750a3f6f4e4896', class: "dda-mobile-search" }, h("button", { key: 'f33b65a03a0e3cfccf35699aa86fc9a187361c21', name: this.search_button_name, class: "tool-btn", type: "button" }, h("span", { key: 'ee6e8d6c4977c73be2a26a361a54a6cfbc874812', class: "visually-hidden" }, "Search"), h("i", { key: 'ddfdd33ab36f52869752e9b1ec7cff0b76152d9f', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search"))), h("div", { key: '3677c07031880418d0be1621eef1ac54a35187c5', class: "dda-toolbar-menu" }, h("ul", { key: '7d1a981e36bb46107c108b49fcc51758ec3eb8c6' }, h("li", { key: 'c6923f2a758a7e9df70d99431287094d3d0e7faf' }, h("dda-tooltip", { key: '82220445acf35b75074ad2ab5d8256911726bd54', title_text: "Search", description: "", position: "top" }, h("div", { key: '2ce0dcbed9b4774b548dfab2ee0ac36d75e30e97', class: "dda-search dda-btn btn-color-onsurface-secondary btn-size-sm btn-shape-circle tool-btn" }, h("label", { key: 'e57fc1d5cc820e361b279f4c14634857666855c1', htmlFor: "ddaSearch", class: "visually-hidden" }, this.searchText || "Search"), h("i", { key: 'bf07f0e8ddfd7e532e9cd3d89a85bb058071652d', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search"), h("input", { key: 'be02c2a227aacd4f619cbfa4894f0e6bd0904867', name: this.search_input_name, type: "text", id: 'ddaSearch', class: "", placeholder: this.searchText || "Search" })))), h("li", { key: '4a2338589dc211fb597533475f179b58a980e98e' }, h("dda-tooltip", { key: 'e3aed867dfe06ebd98cf7372122a7e8dc2632317', title_text: "Accessibility", position: "top" }, h("button", { key: 'be6577c5bc291b2d2f065053ca3dec9f87d2b030', 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", "aria-expanded": this.isAccessibiltyOpen ? 'true' : 'false', onClick: this.toggleAccessibilty }, h("i", { key: 'a52ff1b492f422a1c9d9e1d52e0354c125f8c0d8', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "accessibility"), h("span", { key: 'ad893d2d698d28919cc1d79039f8c05cf6738628', class: "visually-hidden" }, "Accessibility"))), h("div", { key: '881006662f0fae7e04b68a0a1734fb678d8b35e3', class: "dda-accessibility-wrap" }, h("div", { key: '67b6e5a9163f3098905e749cf39acc28c81e795e', class: "dda-accessibility hide-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, h("div", { key: '6b915f91cb602c7569211b8cf2f69a1512a73fe1', class: "dda-row" }, h("div", { key: '15df737247cfadbbff2cab4bf3021ee2631217a2', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '4219197ab3b9a97922cc8a98bbcd7adaf78778ea', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Contrast"), h("form", { key: '4760e39dbe2c9e701b4d085db2c4eb832e1ddcf8' }, h("fieldset", { key: 'bbd089f9f150bbca0028fa169635ece05634bab7', class: "dda-theme-list" }, h("legend", { key: '2dd410aeea354922a78cfba7f92e8c87e10ecfcc' }, h("p", { key: 'a0067c706b9ac9ee91be3c4016d191bb97a54481', class: "mb-3" }, "Select your preferred contrast setting ")), h("dda-radiobutton", { key: '25739294e8aae8d5051e0d95d1f6975d2bddd60a', title_text: "Normal", checked: true, size: "sm", variants: "normal", supporting: "", group_name: "themeselection", input_id: "Normal", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.normalContrasthandler }), h("dda-radiobutton", { key: '34d00ad5a8b7f798592d4267cec691fa49eb809d', title_text: "Colours Blind", checked: false, size: "sm", variants: "normal", supporting: "", group_name: "themeselection", input_id: "ColoursBlind", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.blindContrasthandler }), h("dda-radiobutton", { key: '8b028744ad6eb63905f12d3433d22f60cf06a773', title_text: "Red Weakness", checked: false, size: "sm", variants: "normal", supporting: "", group_name: "themeselection", input_id: "RedWeakness", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.redContrasthandler }), h("dda-radiobutton", { key: '5946ce55c9cb22a7f15cf85a8a6cdc2d02aa6b60', title_text: "Green Weakness", checked: false, size: "sm", variants: "normal", supporting: "", group_name: "themeselection", input_id: "GreenWeakness", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.greenContrasthandler })))), h("div", { key: '1afe67fc1b003d5225b5f8c8ae09fff8e0d48672', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '49b119a3ab93d81286f1f7ae7cd4231f59f871fb', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Screen Reader"), h("p", { key: 'a61b64d5f9a711b31305d0322e42a0b0c6554df4', class: "mb-3" }, "Listen to the content of the page by clicking play or listen"), h("div", { key: '50828c0f69f4b3840ee2676ed2d415762ba22ce4', class: "rs_skip rsbtn rs_preserve", id: "readspeaker_button1" }, h("a", { key: 'ace796135a7689b076f3e52e28fea411e9a18327', href: this.readSpeakerLink, rel: "nofollow", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker" }, h("i", { key: '5f569f86ab841bb29c46fc86e7473bbc2aa5ca99', class: "material-icons  material-symbols-outlined" }, "volume_up")))), h("div", { key: '7f97ae00fd287d5ce1bda3bb5b0c3958ee45aedd', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '92054e8790587bc61464fa7dce7dc908e42c2c0e', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Text Size"), h("p", { key: 'ff6d3176e3c8727c2b4ef3b2f9e76f592b96cd76', class: "mb-3" }, "Use the buttons below to increase or decrease the text size"), h("div", { key: '657063d82590814ed8e1a08c53c2f57bfd1d90c5', class: "d-flex dda-gap-4" }, h("dda-button", { key: '4ed68f094709ca26ea89c90849890bcefa150684', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }, "A"), h("dda-button", { key: '6eb68f1abded381c1a109d2bc1faa0d77702aab4', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }, "A+"), h("dda-button", { key: 'f66dacf1b17482056c2162c2d5f2324abfc4af9e', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler }, "A-")))), h("button", { key: 'c2b7473765c0cefe6fd3949ddb16cdb7c3a121a0', name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Sidebar", onClick: this.toggleAccessibilty }, h("i", { key: '16e909375a9516c7855e168ab206760366089d0b', class: "materinal-icons  material-symbols-outlined" }, "close"))))), h("li", { key: 'b7cb7055ca4c9b4be2cc1d82b40bc8c72862d2f2' }, h("dda-tooltip", { key: '003eb4656ced01d8c3627d9e2cd5f3a53b5add45', title_text: "Language", position: "top" }, h("dda-button", { key: '8a2b0290619c6d66213901829272a4fd1c785a56', button_color: "onsurface-secondary", custom_class: "tool-btn", button_shape: "circle", size: "sm", onClick: this.languagehandler }, this.language_text))), h("li", { key: '2d67bcadaa450dec7a2fa433d01138cdc0493662' }, h("dda-tooltip", { key: '64c2a36a3b0cea4803338899ee46da84b2bdaaa1', title_text: "Login", position: "top" }, h("dda-link-button", { key: 'd571f506eb049e9ff9bb07ea15c7f340a16e76b8', button_color: "onsurface-secondary", start_icon: "sentiment_satisfied", custom_class: "tool-btn", href: this.loginLink, button_shape: "circle", size: "sm" }, "Login"))))))));
+        }))), h("div", { key: '78c00fb0f772f8ef14f3143005c0c01c43614327', class: "dda-sidemenu-bottom" }, h("div", { key: 'd8ec6ff9cd24976246b52f44a21860c44d6fe30e', class: "dda-sidemenu-gov-logo" }, h("a", { key: 'afd4079340a3a11ff388776795d8e314027f069e', href: this.firstLogoHref, class: "govt-logo mb-2" }, h("img", { key: 'f6a416cb3c51610973098c7141984d77c27c63a8', class: "", src: this.firstLogoSrc, alt: this.firstLogoAlt }))), h("div", { key: '8183fe7af2ea534ae6a45fb3b6d6a73aa42a2a44', class: "dda-toolbar-menu-sidemenu" }, h("ul", { key: '6dc9b6919682fa07445fc2d4a04b3f00e54a6f13' }, h("li", { key: '218db01f3bc3fec795c9f4df86d07a218fd5705c' }, h("button", { key: 'd561db307ed92a7c0f5580116ecf1b4c711e92ba', name: this.accessibility_button_name, class: "tool-btn accessibility-btn", type: "button", "aria-expanded": this.isAccessibiltyOpen ? 'true' : 'false', onClick: this.toggleAccessibilty }, h("i", { key: '05b9b362a8b2f952c7422406a2e2998615afbde8', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "accessibility"), h("span", { key: '20c9a8c6397d48999f8295b355c1a76f2a713aea', class: "visually-hidden" }, "Accessibility"))), h("li", { key: '219bcada14c3ea43b954972c0ad4d84417e92edb' }, h("button", { key: 'e92e67881b846d01eddc32ce40d727c514cf6425', name: this.language_button_name, class: "tool-btn", type: "button", lang: this.language_lang, onClick: this.languagehandler }, this.language_text || 'العربية')), h("li", { key: '83ee1defd4c1fbd3b2398ac5a020fa5a5c9760e8' }, h("dda-link-button", { key: 'c54639af89c90453d5239e41cdd21d9ac983f52c', button_color: "onsurface-secondary", start_icon: this.loginIcon || "sentiment_satisfied", custom_class: "tool-btn", href: this.loginLink, button_shape: "circle", size: "sm" }, this.loginText || "Login"))))), h("button", { key: 'fa0ff380e6640b14e8a68bfd9074fb12521734a3', name: this.close_menu_button_name, class: "close-btn side-nav-close-btn", "aria-label": "Close Sidebar", onClick: this.toggleMenu }, h("i", { key: '47bef965ed275a4dd13c640686200d301401888a', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")), h("div", { key: 'e9db953553b8d9ddd6936265a79f332f5cff4a79', class: "dda-accessibility hide-accessibility mobile-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, h("div", { key: '81369335fb6617ec6475256d4c1f159a0e27d2c4', class: "dda-row" }, h("div", { key: 'a3263b292a3be96c226fd39e2a5c3c9789450434', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '4b25cb205d07d0492a4563cee530bce61d7e703a', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Contrast"), h("form", { key: '520a5e581bb4d1897967f5a4f62f763d3b7a900c' }, h("fieldset", { key: 'd7da70d546e29966c46b46acc4fc8b9da88bd935', class: "dda-theme-list" }, h("legend", { key: '4d5aac066576da67514911218e77c6832d27315b' }, h("p", { key: '388d12fda2cafcd65e63797a95006eed854864c4', class: "mb-3" }, "Select your preferred contrast setting ")), h("dda-radiobutton", { key: '1ce8acc8b8563785d2aa4784e23073a857831ddd', title_text: "Normal", checked: true, size: "sm", variants: "normal", supporting: "", group_name: "themeselectionmobile", input_id: "NormalMobile", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.normalContrasthandler }), h("dda-radiobutton", { key: '6d5d24597fef7ed4c44af9b1cb78a81a62106e68', title_text: "Colours Blind", checked: false, size: "sm", variants: "normal", supporting: "", group_name: "themeselectionmobile", input_id: "ColoursBlindMobile", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.blindContrasthandler }), h("dda-radiobutton", { key: '09b76a180088333990666d9192bfd48f1e3ab106', title_text: "Red Weakness", checked: false, size: "sm", variants: "normal", supporting: "", group_name: "themeselectionmobile", input_id: "RedWeaknessMobile", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.redContrasthandler }), h("dda-radiobutton", { key: 'fc04f59e26db42c003bc9e747ef45cdb37f939f4', title_text: "Green Weakness", checked: false, size: "sm", variants: "normal", supporting: "", group_name: "themeselectionmobile", input_id: "GreenWeaknessMobile", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.greenContrasthandler })))), this.readSpeakerLink && (h("div", { key: '2b81244b885a559f63052b0c410712e3413bba07', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '08b480bbcadf295b5e9cddfc8922f501c7257275', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Screen Reader"), h("p", { key: '3367d78424ae9347cca07f396bdbcc9c2d2ae3cc', class: "mb-3" }, "Listen to the content of the page by clicking play or listen"), h("div", { key: 'dcfdfabc03228a8047098b4be1e22233a80d13cf', class: "rs_skip rsbtn rs_preserve", id: "readspeaker_button1" }, h("a", { key: '9b62bd9de4ae598d8d985fb333890558ebf703e3', href: this.readSpeakerLink, rel: "nofollow", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker" }, h("i", { key: '5790bc76d11a0802a6fa0ff2352180293bbb87b5', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "volume_up"))))), h("div", { key: '0696385c365f09386911b99e52296861c9a25cc6', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '5ebb37d526d9df77911abfed12bd7526d935fa51', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Text Size"), h("p", { key: '4c51f6441ab4695554a7d6c9173b9be51094bda6', class: "mb-3" }, "Use the buttons below to increase or decrease the text size"), h("div", { key: 'fe783a08a7247425af5ef5c45e16f77a1e0dab05', class: "d-flex dda-gap-4" }, h("dda-button", { key: '0c25a459f06411d169c2e00b4a7639bf452d7d31', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }, "A"), h("dda-button", { key: '6462ea39225b2920f75f1e2d2530a0188b17b269', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }, "A+"), h("dda-button", { key: '1e919f8fabcf632b14c6cbb591cc83ad41289bd0', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler }, "A-")))), h("button", { key: 'a3d48453b5a782c79946077128d32247b4a4cbcd', name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Accessibility", onClick: this.toggleAccessibilty }, h("i", { key: '9c60683163918bbe155bece05845fd03ce78b424', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")))), h("div", { key: '2d2382de432be40014ff5c85316219e2e7fc8093' }, h("ul", { key: '02ae9037c7d1df9304274d8aa89909e19107f6ca', class: "dda-mega-menu" }, quickLinks.map((link, index) => (h("li", { key: index }, h("a", { href: link.subMenu && link.subMenu.length > 0 ? '#' : link.href, onClick: link.subMenu && link.subMenu.length > 0 ? (e) => this.toggleSubMenu(index, e) : undefined, class: link.subMenu && link.subMenu.length > 0 ? `showSub ${this.activeMenuIndex === index ? 'icon_arrow' : ''}` : '' }, link.label), link.subMenu && link.subMenu.length > 0 && (h("div", { class: `megamenu-content ${this.activeMenuIndex === index ? 'showSubMenu' : ''}`, style: { display: this.activeMenuIndex === index ? 'block' : 'none' } }, h("div", { class: "megamenu-item dda-container" }, h("div", { class: "dda-row" }, h("div", { class: "dda-col-md-3" }, h("h3", { class: "mega-menu-title" }, link.menuLabel), h("ul", null, link.subMenu.map((subItem, subIndex) => (h("li", { key: subIndex }, h("a", { class: "megamenu-link", href: subItem.href }, h("span", { class: "dda-btn btn-color-onsurface-secondary btn-size-sm icon-btn-default" }, h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, subItem.icon)), h("span", { class: "text-wrap" }, h("span", { class: "title-text dda-fs-body-lg dda-fw-700" }, subItem.title), h("span", { class: "dda-fs-tagline-lg dda-fw-400" }, subItem.description))))))))), h("button", { name: "close-mega-menu", class: "close-btn close_mega-menu", "aria-label": "Close Sidebar", onClick: () => setActiveMenuIndex(null) }, h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "close"))))))))))), h("div", { key: 'ef459368f5e5fb8cccb7f58f2f8c438244484f9e', class: "dda-mobile-entt-logo" }, h("a", { key: '30ef36afb8b646906cbeaf6b00c2e7e15fc4201a', href: this.secondLogoHref, class: "entt-logo" }, h("img", { key: '65ff555fb1a8ec62592d3cd1da762406b724aab6', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: '45f1bd4d88fef0022720bfaf9bfdcdd0d816da76', class: "logo-white", src: this.secondLogoWhiteSrc, alt: this.secondLogoAlt }))), h("div", { key: '83c7b5e5608b40e6ff0826e0cdf0987760ec1850', class: "dda-mobile-search" }, h("button", { key: '7fb8234ee06ed486bb214f5ca8c4aa1864ea39a9', name: this.search_button_name, class: "tool-btn", type: "button", "aria-expanded": this.isSearchOpen ? 'true' : 'false', "aria-controls": `${this.searchId}-mobile-panel`, onClick: this.isSearchOpen ? this.closeMobileSearch : this.openMobileSearch, ref: el => (this.mobileSearchButton = el) }, h("span", { key: 'cddcc6cbe685ccb1303adf24b8ec6330cfaeb220', class: "visually-hidden" }, "Search"), h("i", { key: 'f4eccf210454c85bf799d7de4da22c9a0567070b', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search"))), h("div", { key: 'e3ac3313bc39a2cc4c3a2ec31fdf26c3bc954887', id: `${this.searchId}-mobile-panel`, class: "dda-mobile-search-panel", hidden: !this.isSearchOpen }, h("form", { key: '0c23afb9213d0f152f503f4249e2e25e7ddc6d71', class: "dda-mobile-search-form", role: "search", method: "get", action: this.search_action, onSubmit: this.handleSearchSubmit }, this.renderSearchInput(`${this.searchId}-mobile`, el => (this.mobileSearchInput = el)), h("button", { key: 'eee2d74848571266c1fcc4c43e96cf16fc269cbc', type: "button", class: "dda-mobile-search-close", "aria-label": "Close search", onClick: this.closeMobileSearch }, h("i", { key: '8c731144346ca6823d46fda0055e9b59b8acb5ea', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")))), h("div", { key: '0cb03232c422487307c89d3478bb950ebd376496', class: "dda-toolbar-menu" }, h("ul", { key: '745548b4dd5232851df4deb31966e2dc4c10e9c0' }, h("li", { key: 'c7af1a3b3e163ef9715dfafb4f19589c65b5f229' }, h("dda-tooltip", { key: '27215775afa33720398f44fa3ff8b62933b33d2d', title_text: "Search", description: "", position: "top" }, h("form", { key: 'cff735205d4eaeadc1cb3164bd693462c67fc5c2', class: "dda-search dda-btn btn-color-onsurface-secondary btn-size-sm btn-shape-circle tool-btn", role: "search", method: "get", action: this.search_action, onSubmit: this.handleSearchSubmit }, this.renderSearchInput(this.searchId)))), h("li", { key: 'baa189f8aa60b856189033213783dea5005e0b05' }, h("dda-tooltip", { key: 'b80f89423b1994fc6051d0deabef1a54b3a95f07', title_text: "Accessibility", position: "top" }, h("button", { key: '9487c51c19b5652f36cd0ac61b10c35caf703aac', 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", "aria-expanded": this.isAccessibiltyOpen ? 'true' : 'false', onClick: this.toggleAccessibilty }, h("i", { key: 'cc26a3a646b4fe2957496347884f997a2d85ad9e', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "accessibility"), h("span", { key: '2a39cff99e5b565f8ed6b4144a9114dae197318f', class: "visually-hidden" }, "Accessibility"))), h("div", { key: '8c44662a244298438715f0ec3aefaf08aecdbba1', class: "dda-accessibility-wrap" }, h("div", { key: 'c249aea4288ff53610b8d724ca9cd11829eaab8e', class: "dda-accessibility hide-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, h("div", { key: '1cc9cdc5d432463ef8b5be0de1b50dfa5437de47', class: "dda-row" }, h("div", { key: 'd6e5722cfe7e80d368fce9492f6158a1428e8156', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '503e6e630db2084b42e8e86a9982e7052cfec46c', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Contrast"), h("form", { key: '3c4f8861e83f89a17594a3ebe645cd8d6e7d6b8d' }, h("fieldset", { key: '132f829683b59536b030f8b56f64202817415314', class: "dda-theme-list" }, h("legend", { key: 'af8091c21864dc01db098cdc08783a3d94882d48' }, h("p", { key: '310afc13ed6f28624e9f08217dd7e95ac985cea8', class: "mb-3" }, "Select your preferred contrast setting ")), h("dda-radiobutton", { key: '86edfef83708d41703cf80ed43004fbad68a7c8e', title_text: "Normal", checked: true, size: "sm", variants: "normal", supporting: "", group_name: "themeselection", input_id: "Normal", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.normalContrasthandler }), h("dda-radiobutton", { key: '82782391a43cac382e5b02b569fe73af2aab5d49', title_text: "Colours Blind", checked: false, size: "sm", variants: "normal", supporting: "", group_name: "themeselection", input_id: "ColoursBlind", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.blindContrasthandler }), h("dda-radiobutton", { key: '440cdf1a898753e6f3fae2e7f1774d5d9edb30bf', title_text: "Red Weakness", checked: false, size: "sm", variants: "normal", supporting: "", group_name: "themeselection", input_id: "RedWeakness", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.redContrasthandler }), h("dda-radiobutton", { key: '80902bb590f67aac585efd773428738e6fce71c1', title_text: "Green Weakness", checked: false, size: "sm", variants: "normal", supporting: "", group_name: "themeselection", input_id: "GreenWeakness", custom_class: "", component_mode: "", aria_label: "radio-button", onClick: this.greenContrasthandler })))), this.readSpeakerLink && (h("div", { key: '855a0e77f04385eea69ed9fab54909da634b43a7', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '8574c03680b6e976e8d9b6b3a1b14ae2223ca5d1', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Screen Reader"), h("p", { key: 'db6f47a1743f9619676f3b27d7bb07003a626165', class: "mb-3" }, "Listen to the content of the page by clicking play or listen"), h("div", { key: '12ae575eb54578f2c3008c4815435ba739e27330', class: "rs_skip rsbtn rs_preserve", id: "readspeaker_button1" }, h("a", { key: '8362fc23c0725b831f99604d88e0e86903403471', href: this.readSpeakerLink, rel: "nofollow", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker" }, h("i", { key: '96a4125c6297dca5eb23f87f359a14fa43d031d6', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "volume_up"))))), h("div", { key: 'ef5b98303627c4b9b856a933d4f5d29938ad60e6', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '9cf8bd9e22720d6f158f813b1481869c4289f07f', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Text Size"), h("p", { key: '3dd60acafd17b9d0b5d5c1ae239c25a168446388', class: "mb-3" }, "Use the buttons below to increase or decrease the text size"), h("div", { key: '8117db13ecfab2669f5e65ab99ec2ee7070b04aa', class: "d-flex dda-gap-4" }, h("dda-button", { key: '59b41851a6e24b51addb22310cc26103857a95ec', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }, "A"), h("dda-button", { key: '947e4e3e63e64b572f83a12ddc9074fd48f7e7a2', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }, "A+"), h("dda-button", { key: '28ddf63dd783693650f9e22939560f3e2fe2bb1c', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler }, "A-")))), h("button", { key: 'e645b6fe78752460c88b86652fc4c21a11cd4b10', name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Sidebar", onClick: this.toggleAccessibilty }, h("i", { key: '80177be8e24b3c64ba78def6c664a0b9e2b40315', class: "materinal-icons  material-symbols-outlined", "aria-hidden": "true" }, "close"))))), h("li", { key: '7bed27d22542bd692a91831f49369c7c80b2c6c7' }, h("dda-tooltip", { key: 'bd28a2a61744e41f4d229d2005a7133fb055d2c8', title_text: "Language", position: "top" }, h("dda-button", { key: 'ba55905380aa73451aea04825cffec1b7b44a9d3', button_color: "onsurface-secondary", custom_class: "tool-btn", button_shape: "circle", size: "sm", lang: this.language_lang, onClick: this.languagehandler }, this.language_text || 'العربية'))), h("li", { key: '8d1b8f661abfe0a6b81c65111b5e60c35247b51b' }, h("dda-tooltip", { key: 'f4d82247b40136224a38493789ad33a1cde786ef', title_text: "Login", position: "top" }, h("dda-link-button", { key: 'cadea908a166989edd355e22060e31fb02b9528d', button_color: "onsurface-secondary", start_icon: "sentiment_satisfied", custom_class: "tool-btn", href: this.loginLink, button_shape: "circle", size: "sm" }, "Login"))))))));
     }
     static get is() { return "dda-header"; }
     static get originalStyleUrls() {
@@ -207,7 +280,7 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Image URL of the first (government) logo, on the left of the header and in the side menu."
                 },
                 "getter": false,
                 "setter": false,
@@ -226,7 +299,7 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Image URL of the white first logo, shown in dark theme and on a transparent header (`<body class=\"transparent\">`). Falls back to `firstLogoSrc`."
                 },
                 "getter": false,
                 "setter": false,
@@ -245,13 +318,33 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Alternative text for the first logo."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "first-logo-alt"
             },
+            "firstLogoHref": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link URL of the first logo in the header and the side menu. Default: `/`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "first-logo-href",
+                "defaultValue": "'/'"
+            },
             "secondLogoSrc": {
                 "type": "string",
                 "mutable": false,
@@ -264,7 +357,7 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Image URL of the second (entity) logo."
                 },
                 "getter": false,
                 "setter": false,
@@ -283,7 +376,7 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Image URL of the white second logo, shown in dark theme and on a transparent header. Falls back to `secondLogoSrc` on desktop."
                 },
                 "getter": false,
                 "setter": false,
@@ -302,13 +395,33 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Alternative text for the second logo."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "second-logo-alt"
             },
+            "secondLogoHref": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link URL of the second logo on desktop and mobile. Default: `/`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "second-logo-href",
+                "defaultValue": "'/'"
+            },
             "loginLink": {
                 "type": "string",
                 "mutable": false,
@@ -321,7 +434,7 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "URL of the Login link in the toolbar and the side menu."
                 },
                 "getter": false,
                 "setter": false,
@@ -340,7 +453,7 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Side menu items. JSON array of `{ label, href, subMenu }`; each `subMenu` item is `{ headerLabel, label, href, subMenu }` and can nest."
                 },
                 "getter": false,
                 "setter": false,
@@ -359,7 +472,7 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Main navigation links. JSON array of `{ label, href, menuLabel, subMenu }`; `subMenu` items are `{ title, description, icon, href }` and open a mega menu."
                 },
                 "getter": false,
                 "setter": false,
@@ -378,7 +491,7 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "URL of the ReadSpeaker \"listen\" link in the accessibility panel."
                 },
                 "getter": false,
                 "setter": false,
@@ -397,7 +510,7 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Placeholder and accessible label of the search input. Default: `Search`."
                 },
                 "getter": false,
                 "setter": false,
@@ -416,7 +529,7 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Material Symbols icon name of the Login link in the side menu. Default: `sentiment_satisfied`."
                 },
                 "getter": false,
                 "setter": false,
@@ -435,7 +548,7 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Label of the Login link in the side menu. Default: `Login`."
                 },
                 "getter": false,
                 "setter": false,
@@ -454,13 +567,33 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Label of the language buttons in the desktop toolbar and the side menu. Default: `\u0627\u0644\u0639\u0631\u0628\u064A\u0629`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "language_text"
             },
+            "language_lang": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`lang` attribute of the language buttons, the language of `language_text`. Default: `ar`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "language_lang",
+                "defaultValue": "'ar'"
+            },
             "hamburger_menu_button_name": {
                 "type": "string",
                 "mutable": false,
@@ -473,13 +606,33 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` attribute of the hamburger menu button."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "hamburger_menu_button_name"
             },
+            "menu_button_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the hamburger menu button (visually hidden text). Default: `Menu`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "menu_button_label",
+                "defaultValue": "'Menu'"
+            },
             "accessibility_button_name": {
                 "type": "string",
                 "mutable": false,
@@ -492,7 +645,7 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` attribute of the accessibility button in the side menu."
                 },
                 "getter": false,
                 "setter": false,
@@ -511,7 +664,7 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` attribute of the mobile search button."
                 },
                 "getter": false,
                 "setter": false,
@@ -530,13 +683,32 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the search input, which is the query parameter sent to `search_action`. Default: `q`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "search_input_name"
             },
+            "search_action": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Results page URL. When set, a search does a GET to this URL with the query in `search_input_name` (default `q`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search_action"
+            },
             "language_button_name": {
                 "type": "string",
                 "mutable": false,
@@ -549,7 +721,7 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` attribute of the language button in the side menu."
                 },
                 "getter": false,
                 "setter": false,
@@ -568,7 +740,7 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` attribute of the button that closes the side menu."
                 },
                 "getter": false,
                 "setter": false,
@@ -587,7 +759,7 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` attribute of the buttons that close the accessibility panel."
                 },
                 "getter": false,
                 "setter": false,
@@ -606,7 +778,7 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Not used: the current markup does not render an element with this name."
                 },
                 "getter": false,
                 "setter": false,
@@ -625,7 +797,7 @@ export class DdaHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` attribute of the accessibility button in the desktop toolbar."
                 },
                 "getter": false,
                 "setter": false,
@@ -640,6 +812,7 @@ export class DdaHeader {
             "isSubMenuOpen": {},
             "isSideSubMenuOpen": {},
             "isAccessibiltyOpen": {},
+            "isSearchOpen": {},
             "openMenus": {},
             "activeMenuIndex": {}
         };
@@ -653,7 +826,7 @@ export class DdaHeader {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted when the user clicks the language button."
                 },
                 "complexType": {
                     "original": "void",
@@ -668,7 +841,7 @@ export class DdaHeader {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted when the user clicks the `A-` (smaller text) button in the accessibility panel."
                 },
                 "complexType": {
                     "original": "void",
@@ -683,7 +856,7 @@ export class DdaHeader {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted when the user clicks the `A` (default text size) button in the accessibility panel."
                 },
                 "complexType": {
                     "original": "void",
@@ -698,7 +871,7 @@ export class DdaHeader {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted when the user clicks the `A+` (larger text) button in the accessibility panel."
                 },
                 "complexType": {
                     "original": "void",
@@ -713,7 +886,7 @@ export class DdaHeader {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted when the user selects the Normal contrast option."
                 },
                 "complexType": {
                     "original": "void",
@@ -728,7 +901,7 @@ export class DdaHeader {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted when the user selects the Colours Blind contrast option."
                 },
                 "complexType": {
                     "original": "void",
@@ -743,7 +916,7 @@ export class DdaHeader {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted when the user selects the Red Weakness contrast option."
                 },
                 "complexType": {
                     "original": "void",
@@ -758,13 +931,35 @@ export class DdaHeader {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted when the user selects the Green Weakness contrast option."
                 },
                 "complexType": {
                     "original": "void",
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "searchSubmit",
+                "name": "searchSubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a non-empty search is submitted. Call `preventDefault()` to stop the\nbrowser navigating to `search_action`, for example to route inside a single-page app."
+                },
+                "complexType": {
+                    "original": "{ query: string }",
+                    "resolved": "{ query: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isMenuOpen",
+                "methodName": "onMenuOpenChange"
             }];
     }
 }