@dubai-design-system/components-js 3.12.16 → 5.0.0

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

@@ -180,7 +180,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: '14b4e55ffae733f9b3177c93fe595684389b2ee9', name: this.accessibility_button_name, class: "tool-btn accessibility-btn", type: "button", onClick: this.toggleAccessibilty }, h("i", { key: '88b3c27566f0365a02cce6bee337daaf080d1589', class: "material-icons  material-symbols-outlined" }, "accessible_forward"), h("span", { key: '97c5cda56be7d97fb1d8914ad271562f3ff529cf', class: "visually-hidden" }, "Accessibility"))), h("li", { key: 'bfd5ebcc6d7a1ead08ac45b2694a1967aae797bc' }, h("button", { key: 'dd64443a9af25ea442540407770a0577049b0e67', name: this.language_button_name, class: "tool-btn", type: "button", onClick: this.languagehandler }, "\u0627\u0644\u0639\u0631\u0628\u064A\u0629")), h("li", { key: '35e856a5eaa577cb4ccb956751bfb90c302a1aef' }, h("dda-link-button", { key: '9f01c12a54019db5e78f66cd0a7ce92cc6ca992c', 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: 'e6c2df1fa8101900272d8d336eee68d5099d398b', name: this.close_menu_button_name, class: "close-btn side-nav-close-btn", "aria-label": "Close Sidebar", onClick: this.toggleMenu }, h("i", { key: '013562ea39b2486dfcaf7520896dd5fb0d7936ae', class: "material-icons  material-symbols-outlined" }, "close")), h("div", { key: '84374c47fccb2c6b35ae9cdd21cadf20a3dc50b6', class: "dda-accessibility hide-accessibility mobile-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, h("div", { key: 'ea68e01d37a0fbcfd083f64569d5c9cb3abb9fc7', class: "dda-row" }, h("div", { key: 'bee22cf69b7905ca8124ec25ff8a7e128460ddb5', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: 'ba7fb3c96f554bc7b1a523fdc0e2a18a704b5aac', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Contrast"), h("form", { key: 'e7ddd0a8c55a58e45a21ed50c110dd8d5a7764e1' }, h("fieldset", { key: '417cc310b03155c24614c01c1817f4f753256b26', class: "dda-theme-list" }, h("legend", { key: '1104a2f08a96cb961e78210696ec64ffc81e7414' }, h("p", { key: '3f006539a9f5dcc1f24fe02f5ef6c25c67f6149b', class: "mb-3" }, "Select your preferred contrast setting ")), h("dda-radiobutton", { key: '9f4a6994175b362bf39eb5a232b9fd33b363c7db', 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: 'b541e69a39812c6a6763e62e93561eb28cf3cf6d', 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: '54fa9cdd7ab14f13608cf3bbfa3b6c4789dd684f', 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: 'f59d5ab501fe006fcc1f62a3dbc3f6a4267c523d', 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: '770ed75833e071f15608702d1d154a5dd7f0b765', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '87d1a507c7a5cbed21f8c8346ff5af5ab5ddedeb', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Screen Reader"), h("p", { key: '91d5d4ff82fbf0ae369a5f14a1b117a805fa9f2c', class: "mb-3" }, "Listen to the content of the page by clicking play or listen"), h("div", { key: '045ac0b28a29c55b96de187f0aef70b2c3779baa', class: "rs_skip rsbtn rs_preserve", id: "readspeaker_button1" }, h("a", { key: 'c0974fe2c3540f9aa0b9aa1f8af89cee87119c49', href: this.readSpeakerLink, rel: "nofollow", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker" }, h("i", { key: '7621afa10e60ef8af188233120d43b1c766b5111', class: "material-icons  material-symbols-outlined" }, "volume_up")))), h("div", { key: '95fda8c2be3030e355fc0cc7defd42f5f0173e44', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: 'ffe563c91e54eb57cced865bdb9d1c8453d0c08e', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Text Size"), h("p", { key: '5a03f87b9549569a28387148f251c63ec61265b8', class: "mb-3" }, "Use the buttons below to increase or decrease the text size"), h("div", { key: 'b28d104eb02ccc3d4c0ee68430188a4eba59b86e', class: "d-flex dda-gap-4" }, h("dda-button", { key: 'e5466a5e98113da85149f01d2ce7a7b658293c59', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }, "A"), h("dda-button", { key: '44e28ac0ca84f28f87f246639010d415075d61e6', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }, "A+"), h("dda-button", { key: 'ef062888f13f6ec0c71424588b90fb25c6cb0f83', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler }, "A-")))), h("button", { key: '101226c4cc9a8e544157c0d483a676b0a08dab7c', name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Accessibility", onClick: this.toggleAccessibilty }, h("i", { key: '3a4d1cf6812a6dfaef83fa819f49fd1c29cd1c86', class: "material-icons  material-symbols-outlined" }, "close")))), h("div", { key: '88323c603aeaad4f2facd878c63906a58700621a' }, h("ul", { key: '841010334a190d49083360e23787500a1b47ae7e', 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: '2eb2edd52430dc797dfa76872168b61ac98da261', class: "dda-mobile-entt-logo" }, h("a", { key: 'ac7d2d09927d8261081188f8e598429c628f6be7', href: "#", class: "entt-logo" }, h("img", { key: '930d7d486c2e7d1b9450fa3dfcc08702fe1d8d90', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: 'f4fe3c82b925713e2d5971a6d39bcbfe6be87829', class: "logo-white", src: this.secondLogoWhiteSrc, alt: this.secondLogoAlt }))), h("div", { key: '4a0de76009e9b1f2a4044febcaea8a9b541414db', class: "dda-mobile-search" }, h("button", { key: '60d21275953854f785d70ac0bd5d849c23ef23a8', name: this.search_button_name, class: "tool-btn", type: "button" }, h("span", { key: '4bf8171f165b66eeb5e8e9f4876c4eae6cb654c4', class: "visualy-hidden" }, "Search"), h("i", { key: '2317599b8150a807a24bff4d775a46a60ea12137', class: "material-icons  material-symbols-outlined" }, "search"))), h("div", { key: '1c182328720e70a3d432c3a7fa4f8d50f25b6b1f', class: "dda-toolbar-menu" }, h("ul", { key: 'aedf53d759d4a602c6de5f4d345d5ee0528adbe3' }, h("li", { key: '687a941f086ad00e54dc451d4420f4f09dcde487' }, h("dda-tooltip", { key: '099af7b1323884f7f0247e8447728e954147b364', title_text: "Search", description: "", position: "top" }, h("div", { key: 'f5dbba3feed427706ce0dd79b48fe8a977344ad6', class: "dda-search dda-btn btn-color-onsurface-secondary btn-size-sm btn-shape-circle tool-btn" }, h("label", { key: '8a0fe79fc2eac836524d6141a67d5cf18eed4d9f', htmlFor: "ddaSearch", class: "visualy-hidden" }, this.searchText || "Search"), h("i", { key: 'd597ea3b1fbf21b71ab32813e40098468bc32ffc', class: "material-icons  material-symbols-outlined" }, "search"), h("input", { key: 'a353435862eee484f9d80f17ad598317a43f36d6', name: this.search_input_name, type: "text", id: 'ddaSearch', class: "", placeholder: this.searchText || "Search" })))), h("li", { key: '4526b84f57c23ec55922b1ce6b80aafd6e1d6392' }, h("dda-tooltip", { key: 'e9040f9fce4eda9165000a545c171acf8d0362da', title_text: "Accessibility", position: "top" }, h("button", { key: 'b55b83a045aae6a4c9281231dc6b98e44420a697', 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 }, h("i", { key: 'f4ab1e8cf3669c7bcf657f56471474d00f47ee07', class: "material-icons  material-symbols-outlined" }, "accessible_forward"), h("span", { key: 'e53fd1736c9bfd963a3b235f4a4b117169fd6b6e', class: "visually-hidden" }, "Accessibility"))), h("div", { key: '2246b27ef62dff4e6c259d897934f4d379cc152f', class: "dda-accessibility-wrap" }, h("div", { key: '976b435dcac670a51befe872f9314607f075a17a', class: "dda-accessibility hide-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, h("div", { key: 'bd56ddf41e2df4a6dcc7798f145b5689b9f4337e', class: "dda-row" }, h("div", { key: '0d6c6a78d4177172b53b52a9c1f4cbcde4e4916c', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '07546632786a973ee274fe5f8577933b9ce6ca2b', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Contrast"), h("form", { key: '3c32c10f418795cdfa1c3a2de9c1d549d458deae' }, h("fieldset", { key: 'd78d446bd95408301da37b9f73956f927cf2d0ce', class: "dda-theme-list" }, h("legend", { key: '7137940d48800e739abf3517b9eb9c8b342ac59d' }, h("p", { key: '91d82dac1a93e03d99e06f906170b561ab28be73', class: "mb-3" }, "Select your preferred contrast setting ")), h("dda-radiobutton", { key: '1651d0149f995c1d64e4881c9985eeb93ec888b4', 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: '65b59e5e6dee859075a7006cc3a1fb6494b9860e', 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: 'b98746160fdc918207ff183e96c8c1e61ca4ae25', 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: '3f20ced5785362a0e886ade0f4fba96aa6c85c08', 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: '13fb6dbd0e13e46527bbc8fa8414eaa74ff92de3', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '4010303c183c75ec378da5ef6e3ddd61430a729e', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Screen Reader"), h("p", { key: '5ed28b51051e5c437a3581e19633775f5aebd1ba', class: "mb-3" }, "Listen to the content of the page by clicking play or listen"), h("div", { key: '85c1ad54ab29dcb3dbcab27819d0c0ac0b19098a', class: "rs_skip rsbtn rs_preserve", id: "readspeaker_button1" }, h("a", { key: 'd2595cdc00d801d48701f7c4e555f8160234fecc', href: this.readSpeakerLink, rel: "nofollow", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker" }, h("i", { key: 'b25b197913e50e98648767dd77a248400b72f711', class: "material-icons  material-symbols-outlined" }, "volume_up")))), h("div", { key: '1c396b8681c02275d69f9e23831a7e2d1e4fa11f', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '7d1addfdfeb37cc5e10b9630073e2dc09dd0b751', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Text Size"), h("p", { key: '2f5418d75514b9f81b8f8cfdd0d0f34f0fe414cd', class: "mb-3" }, "Use the buttons below to increase or decrease the text size"), h("div", { key: '1891966de35433f7aa6cb004d7202fc1409ca991', class: "d-flex dda-gap-4" }, h("dda-button", { key: '4a673e602e555af33419245eed310ad0e890d487', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }, "A"), h("dda-button", { key: '98c1f305559c71016bdb564e6bd3de48f5588cba', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }, "A+"), h("dda-button", { key: 'b33df209e0b489a2ebe921f92e9f0c4be857d750', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler }, "A-")))), h("button", { key: '305b7eb7ececb8f092d5643bcd23061cfe890f92', name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Sidebar", onClick: this.toggleAccessibilty }, h("i", { key: '595bf53e8a4e0d820a087f9ca4393545296a27c0', class: "materinal-icons  material-symbols-outlined" }, "close"))))), h("li", { key: '92b9b865f84db776a3a99755f29d2fbf445301c9' }, h("dda-tooltip", { key: '6b0152b5049167f72e3e4cc445dc6faa1e4781ba', title_text: "Language", position: "top" }, h("dda-button", { key: '9c6ec13c0dc16738d3f92596059940f2a47c0fe4', button_color: "onsurface-secondary", custom_class: "tool-btn", button_shape: "circle", size: "sm", onClick: this.languagehandler }, this.language_text))), h("li", { key: '42b953845b272b63c23653dda01fe96517fab433' }, h("dda-tooltip", { key: '1f1f204e0962467e925c08935b58003cd1dd9753', title_text: "Login", position: "top" }, h("dda-link-button", { key: 'a4084841029cbac71e60621242ecfe6eb00be07b', button_color: "onsurface-secondary", start_icon: "sentiment_satisfied", custom_class: "tool-btn", href: this.loginLink, button_shape: "circle", size: "sm" }, "Login"))))))));
+        }))), 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: '14b4e55ffae733f9b3177c93fe595684389b2ee9', name: this.accessibility_button_name, class: "tool-btn accessibility-btn", type: "button", onClick: this.toggleAccessibilty }, h("i", { key: '88b3c27566f0365a02cce6bee337daaf080d1589', class: "material-icons  material-symbols-outlined" }, "accessibility"), h("span", { key: '4b56a02d0c440e85560a0d3270801138176519b4', class: "visually-hidden" }, "Accessibility"))), h("li", { key: '79badf1d7fa7334184a4a485a57e552d437e5b48' }, h("button", { key: 'b2e98d20ac92874d658aa8939ee7ff5fb6381869', name: this.language_button_name, class: "tool-btn", type: "button", onClick: this.languagehandler }, "\u0627\u0644\u0639\u0631\u0628\u064A\u0629")), h("li", { key: '3af3486f64b497bd284a1bba0294a30dd3a4545f' }, h("dda-link-button", { key: 'baf783c1f72e3b6b98f61b0892ac2d8244ea5823', 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: 'd4f17a017986c637816e88399c3d1a986e9d7385', name: this.close_menu_button_name, class: "close-btn side-nav-close-btn", "aria-label": "Close Sidebar", onClick: this.toggleMenu }, h("i", { key: 'c7e8ea74c6cdb6cb5097c20a4a3c0cf808f6094c', class: "material-icons  material-symbols-outlined" }, "close")), h("div", { key: '883576ace9bb1c9252fa44abaa7689e016d6380f', class: "dda-accessibility hide-accessibility mobile-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, h("div", { key: 'd75249921637bca1a3915e34f1b0c8a373892c7c', class: "dda-row" }, h("div", { key: 'e440ade26a749a6669d7231d539194739f709cd4', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: 'dd73e50ffa094b42f539501bc10b18e53765c85c', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Contrast"), h("form", { key: 'e0fed36ab17a4263786d71ccc5e8b1e8464e9f94' }, h("fieldset", { key: '17287e8f6e6b7bf7e4d7ea38b1392f49c10699d5', class: "dda-theme-list" }, h("legend", { key: '96f44023aa549f1b9fb97a27c29ba2d4b3efe655' }, h("p", { key: '0fb3e04c3376b889f61d102092213f986b16a5e5', class: "mb-3" }, "Select your preferred contrast setting ")), h("dda-radiobutton", { key: 'dada02190aff619cf4dea5bb51fc424fe0011936', 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: 'a1a768e6fbc3d714567cab8f1f53e81976434b8c', 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: '2fe006bd6e943fd54835d8e113c12da4d36cdd86', 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: '25504ddc13f37f9faea4c8eba097d626f82032a3', 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: '66bce6796e611172fc37239de4a49a7fc8e10489', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: 'c5efd2bc94fc66ccf825a060fcf4b7df3606fba9', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Screen Reader"), h("p", { key: 'd96d5c7008fcfba6cea44fe2a945873a0fdd4b18', class: "mb-3" }, "Listen to the content of the page by clicking play or listen"), h("div", { key: '2faeb159e4b74f97f871b1afb05fb6744e4fb436', class: "rs_skip rsbtn rs_preserve", id: "readspeaker_button1" }, h("a", { key: '4c27b3c30195c4717dc9392d32694460e0cddc1b', href: this.readSpeakerLink, rel: "nofollow", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker" }, h("i", { key: 'afbd8985891f8ce7a71a075bbcb731de909d4e5d', class: "material-icons  material-symbols-outlined" }, "volume_up")))), h("div", { key: 'af6c86e39e2efd7c12c481903d2f1fd53563f712', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: 'cf8496b79d0fcb131bf7527ceaace30beeb9c2a7', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Text Size"), h("p", { key: '3d331f6160de2a237ef87bc1aad1f826a0f99a57', class: "mb-3" }, "Use the buttons below to increase or decrease the text size"), h("div", { key: '438d48c85a308c157ef871c4d13d13dfa4f722b3', class: "d-flex dda-gap-4" }, h("dda-button", { key: '9c5629f385bbc8cc5058fbfdd7428cf6d7ef38b1', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }, "A"), h("dda-button", { key: '4c0823cbf697d9afb1c11d535ad77366f64bf4fe', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }, "A+"), h("dda-button", { key: '19ed7798266c7736b0f2081ef9f02451a1760c9b', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler }, "A-")))), h("button", { key: '0bbb6072d49a292ef53d1c9578e502493a41231c', name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Accessibility", onClick: this.toggleAccessibilty }, h("i", { key: 'f2f639bfdb380fa66322dc1ba25dedbadddd0f1c', class: "material-icons  material-symbols-outlined" }, "close")))), h("div", { key: '1f337f03b7180f5c17eee24e1ac1f8a118eb6a95' }, h("ul", { key: '82a2b4dd417288fc177b701f21008d38ed19a91c', 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: 'eee1be1e94b5a3c873e69e6cc1ae3210972d159a', class: "dda-mobile-entt-logo" }, h("a", { key: 'c87a7735c24e7901d35a1cf82eab24a7ecd88a02', href: "#", class: "entt-logo" }, h("img", { key: '8f3ad4f3067b5391cc00ba06b64a795a8e8c4f0f', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: '3c597467f061edbd221c9d3f89e6b8c0ac9492d4', class: "logo-white", src: this.secondLogoWhiteSrc, alt: this.secondLogoAlt }))), h("div", { key: '8ee85c53401f336ba904fbb79ef27b94908d3177', class: "dda-mobile-search" }, h("button", { key: 'ade487d54555e76de7a2bca4e884aed5671df169', name: this.search_button_name, class: "tool-btn", type: "button" }, h("span", { key: 'e0a6ea529ac755a6dd93f3d376d5cee9f06997c7', class: "visualy-hidden" }, "Search"), h("i", { key: '5084f823ececc99e513b16ed103487f7300b2325', class: "material-icons  material-symbols-outlined" }, "search"))), h("div", { key: '66520484a0e08b14660aa07b7630802265365d01', class: "dda-toolbar-menu" }, h("ul", { key: '3c2af5fb76eea7d9dd3744f7964232e2cb2f7bcb' }, h("li", { key: '5830895bff67e932777911c645ca9b472369e6f5' }, h("dda-tooltip", { key: 'e018ef0300d2ae9d95f9ce75d6fcce8a2df69ecf', title_text: "Search", description: "", position: "top" }, h("div", { key: '5e0bf1bff5bb53844b70957ad1a29a86543344c3', class: "dda-search dda-btn btn-color-onsurface-secondary btn-size-sm btn-shape-circle tool-btn" }, h("label", { key: 'ee3b3d6428e5908dbc317127433610c6af2cbb23', htmlFor: "ddaSearch", class: "visualy-hidden" }, this.searchText || "Search"), h("i", { key: '1e2d677a3896ed69bfe2b1c26b1f231bcac4223d', class: "material-icons  material-symbols-outlined" }, "search"), h("input", { key: 'b7bc957ab5a4cc67ac93332e22399688784eb578', name: this.search_input_name, type: "text", id: 'ddaSearch', class: "", placeholder: this.searchText || "Search" })))), h("li", { key: 'd33c659c2a87a7a96fbe2fe03bf0ccc8f31cd248' }, h("dda-tooltip", { key: 'd6b51fff522b7bddc2d30debad2ee6de53c14736', title_text: "Accessibility", position: "top" }, h("button", { key: 'f9c0ffc4cd37e5f3e09bf46021f5d04f3580af38', 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 }, h("i", { key: '8c3fb28ffcc1d7ec558b4908c5ab4d782f98367c', class: "material-icons  material-symbols-outlined" }, "accessibility"), h("span", { key: 'ca42d36076d6132d0d27e094cc1460f3c59718a6', class: "visually-hidden" }, "Accessibility"))), h("div", { key: 'd0bca67882877a0ac8876f66a54706a85d3a0b5a', class: "dda-accessibility-wrap" }, h("div", { key: 'aab3342d5a949e7465d737ed34177f5dc3295c41', class: "dda-accessibility hide-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, h("div", { key: '7f19310f71c18f5a1f3be4c62bb9c5d7229f1cd0', class: "dda-row" }, h("div", { key: '447304db0876d703701d4a5b1e1f5a19f175de79', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: 'a3e8b8d9dbb60c6fb81fe29b4b9f39f59fb7a712', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Contrast"), h("form", { key: '12d17c36fc68853dfa7b4f79838bb18ecd233423' }, h("fieldset", { key: '260b5ca3000f660d82af53f4167558b79abc9333', class: "dda-theme-list" }, h("legend", { key: '0ab2a417b625b779afe1f4620de40520ed5949f1' }, h("p", { key: '5503631430f407b4ca03a22447f040517270d10c', class: "mb-3" }, "Select your preferred contrast setting ")), h("dda-radiobutton", { key: 'cc611fe11f8ae8fb7dfd7bcf9904de784463f7dd', 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: '31b0697525c90f074438ca58477b94744536ca39', 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: '54f338335deecb50d0e8b95913a615bb17d061e2', 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: '87e0f3e8e70c58506862831505d6b0077e9e221e', 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: 'a8e7c41793a9fbdcbe8e32e168187fa96b3df7fb', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '4d0d2af5bb34a9287eb5b8d9fb10fe86ccb4d924', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Screen Reader"), h("p", { key: '25e1ff77442ef71100a11c5f73b2f713d10f82bf', class: "mb-3" }, "Listen to the content of the page by clicking play or listen"), h("div", { key: '06a808500e71eb67537aaf9a2e825f193f3aa36c', class: "rs_skip rsbtn rs_preserve", id: "readspeaker_button1" }, h("a", { key: '739c85600bc85dc9ee7525addeb5fc347ea03980', href: this.readSpeakerLink, rel: "nofollow", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker" }, h("i", { key: '6dee1edb48d6cf946228278c217c0fd35f11c04a', class: "material-icons  material-symbols-outlined" }, "volume_up")))), h("div", { key: '5a20832ade7db0401e23123fb5ec706a564d2a66', class: "dda-col-md-4 dda-accessibility-item" }, h("h2", { key: '4f729cc6111e5ea01e5bbf01284d8b4155d0eee1', class: "dda-fs-body-lg dda-fw-700 mb-1" }, "Text Size"), h("p", { key: '7a55f3e7f5902d60531c344ff9a373156fd90922', class: "mb-3" }, "Use the buttons below to increase or decrease the text size"), h("div", { key: '71fa19d25407f89b024d932e5d734e91d6c4243c', class: "d-flex dda-gap-4" }, h("dda-button", { key: '785503f0ba528659322b74b543f958d7c2782b94', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }, "A"), h("dda-button", { key: 'dcd8d2af2ef1f31083801f8a36ace4de3784b332', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }, "A+"), h("dda-button", { key: '1549acd79ca8a666beb452313609ae4997342cfd', button_color: "default-secondary", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler }, "A-")))), h("button", { key: '5e467b999b991ddfec3f33f10758fcc1b8f38437', name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Sidebar", onClick: this.toggleAccessibilty }, h("i", { key: '531535a5e4d1a7954e1f06c16648a583a05bb26f', class: "materinal-icons  material-symbols-outlined" }, "close"))))), h("li", { key: 'b9eff1b50c402946681b4d9c70f86a5711f4e03f' }, h("dda-tooltip", { key: 'a1ecfd313bfe72e8ca1d382959b7ac83b53d7ccf', title_text: "Language", position: "top" }, h("dda-button", { key: 'cfc2255423fe23a86b32f3e181c4cbc08942ebc8', button_color: "onsurface-secondary", custom_class: "tool-btn", button_shape: "circle", size: "sm", onClick: this.languagehandler }, this.language_text))), h("li", { key: '613f7c5790a038b5fe983ea4a6c0c804ff7c2a95' }, h("dda-tooltip", { key: '36740d7892020dd9a1970862f09704a57898fa1f', title_text: "Login", position: "top" }, h("dda-link-button", { key: 'c50c05860a2c14538f2fe18b6265c99eb69c928b', 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() {

package/dist/collection/components/dda-home-banner/dda-home-banner.js

@@ -1,34 +1,185 @@
 import { Host, h } from "@stencil/core";
+const MIN_INTERVAL = 1000;
 export class DdaHomeBanner {
     constructor() {
+        /** Advance through the slides automatically. */
+        this.autoplay = false;
+        /** Milliseconds each slide is shown for when `autoplay` is on. Clamped to a 1000ms floor. */
+        this.interval = 5000;
+        /** Accessible name for the carousel region. */
+        this.aria_label = 'Highlights';
+        /** Accessible name for the previous-slide button. */
+        this.previous_button_label = 'Previous slide';
+        /** Accessible name for the next-slide button. */
+        this.next_button_label = 'Next slide';
+        /** Accessible name for the pause button shown while autoplay is running. */
+        this.pause_button_label = 'Pause slideshow';
+        /** Accessible name for the play button shown while autoplay is paused. */
+        this.play_button_label = 'Play slideshow';
+        /** Prefix for each slide dot's accessible name, e.g. "Go to slide 2". */
+        this.slide_button_label = 'Go to slide';
+        /** Template for the screen-reader slide announcement. `{current}` and `{total}` are substituted. */
+        this.slide_status_label = 'Slide {current} of {total}';
         this.currentSlide = 0;
         this.slides = [];
+        this.isPaused = false;
+        this.reducedMotion = false;
+        this.isHovered = false;
+        this.hasFocusWithin = false;
+        this.listening = false;
+        this.onMotionPreferenceChange = (event) => {
+            this.reducedMotion = event.matches;
+            this.startAutoplay();
+        };
+        this.onMouseEnter = () => {
+            this.isHovered = true;
+            this.stopAutoplay();
+        };
+        this.onMouseLeave = () => {
+            this.isHovered = false;
+            this.startAutoplay();
+        };
+        this.onFocusIn = () => {
+            this.hasFocusWithin = true;
+            this.stopAutoplay();
+        };
+        this.onFocusOut = (event) => {
+            // Moving between two controls inside the banner should not resume autoplay.
+            if (event.relatedTarget && this.el.contains(event.relatedTarget)) {
+                return;
+            }
+            this.hasFocusWithin = false;
+            this.startAutoplay();
+        };
+        this.resetScroll = () => {
+            if (this.el.scrollLeft !== 0 || this.el.scrollTop !== 0) {
+                this.el.scrollLeft = 0;
+                this.el.scrollTop = 0;
+            }
+        };
+        this.togglePause = () => {
+            this.isPaused = !this.isPaused;
+            this.startAutoplay();
+        };
     }
-    componentDidLoad() {
+    connectedCallback() {
+        // Setup lives here, not in componentDidLoad, so that a reparented banner
+        // (modal, keep-alive, re-slotting) gets its observer and listeners back.
+        if (this.listening) {
+            return;
+        }
+        this.listening = true;
+        this.el.addEventListener('mouseenter', this.onMouseEnter);
+        this.el.addEventListener('mouseleave', this.onMouseLeave);
+        this.el.addEventListener('focusin', this.onFocusIn);
+        this.el.addEventListener('focusout', this.onFocusOut);
+        // Focusing an offscreen slide makes the browser scroll the overflow:hidden
+        // host; that scrollLeft would stack with the `left` offset and skew the track.
+        this.el.addEventListener('scroll', this.resetScroll);
+        if (typeof window !== 'undefined' && window.matchMedia) {
+            this.motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+            this.reducedMotion = this.motionQuery.matches;
+            this.motionQuery.addEventListener('change', this.onMotionPreferenceChange);
+        }
+        // shadow: false means there is no real slot, so `slotchange` never fires —
+        // watch the light DOM for added/removed slides instead.
+        this.observer = new MutationObserver(() => this.updateSlides());
+        this.observer.observe(this.el, { childList: true, subtree: true });
         this.updateSlides();
-        // Listen for slot changes
-        const slot = this.el.querySelector('slot');
-        slot === null || slot === void 0 ? void 0 : slot.addEventListener('slotchange', () => this.updateSlides());
+        this.startAutoplay();
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        this.listening = false;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.observer = null;
+        this.el.removeEventListener('mouseenter', this.onMouseEnter);
+        this.el.removeEventListener('mouseleave', this.onMouseLeave);
+        this.el.removeEventListener('focusin', this.onFocusIn);
+        this.el.removeEventListener('focusout', this.onFocusOut);
+        this.el.removeEventListener('scroll', this.resetScroll);
+        (_b = this.motionQuery) === null || _b === void 0 ? void 0 : _b.removeEventListener('change', this.onMotionPreferenceChange);
+        this.isHovered = false;
+        this.hasFocusWithin = false;
+        this.stopAutoplay();
+    }
+    componentDidRender() {
+        this.syncSlideState();
+    }
+    autoplayChanged() {
+        this.startAutoplay();
+    }
+    get isRotating() {
+        return this.autoplay && !this.isPaused && !this.reducedMotion;
+    }
+    startAutoplay() {
+        this.stopAutoplay();
+        // WCAG 2.2.2: never move on its own when the user asked for reduced motion,
+        // paused the carousel, or is currently reading it with pointer or keyboard.
+        if (!this.isRotating || this.isHovered || this.hasFocusWithin) {
+            return;
+        }
+        const delay = Math.max(MIN_INTERVAL, Number(this.interval) || MIN_INTERVAL);
+        this.timer = setInterval(() => this.nextSlide(), delay);
+    }
+    stopAutoplay() {
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = null;
+        }
+    }
+    /**
+     * Hide every slide that is not current from the keyboard and from assistive tech.
+     * Attribute writes are not reported by a childList observer, so this cannot loop.
+     */
+    syncSlideState() {
+        const total = this.slides.length;
+        this.slides.forEach((slide, index) => {
+            const isCurrent = index === this.currentSlide;
+            slide.toggleAttribute('inert', !isCurrent);
+            slide.setAttribute('aria-hidden', isCurrent ? 'false' : 'true');
+            slide.setAttribute('role', 'group');
+            slide.setAttribute('aria-roledescription', 'slide');
+            slide.setAttribute('aria-label', this.statusText(index + 1, total));
+        });
+    }
+    statusText(current, total) {
+        return this.slide_status_label.replace('{current}', String(current)).replace('{total}', String(total));
     }
     updateSlides() {
-        this.slides = Array.from(this.el.querySelectorAll('slide'));
-        if (this.slides.length > 0) {
-            this.currentSlide = 0; // Reset slide index if slides are updated
+        const slides = Array.from(this.el.querySelectorAll('slide'));
+        // The observer watches this.el, which also contains the nav this component renders,
+        // so every re-render re-triggers it. Bail unless the slide list actually changed,
+        // otherwise assigning to @State here would loop forever.
+        const unchanged = slides.length === this.slides.length && slides.every((s, i) => s === this.slides[i]);
+        if (unchanged) {
+            return;
+        }
+        this.slides = slides;
+        if (this.currentSlide > slides.length - 1) {
+            this.currentSlide = 0;
         }
     }
     nextSlide() {
+        if (!this.slides.length)
+            return;
         this.currentSlide = (this.currentSlide + 1) % this.slides.length;
     }
     prevSlide() {
+        if (!this.slides.length)
+            return;
         this.currentSlide = (this.currentSlide - 1 + this.slides.length) % this.slides.length;
     }
     setSlide(index) {
         this.currentSlide = index;
     }
     render() {
-        return (h(Host, { key: '5bcab057203a18f9c5482a1fd8fdb9542a33071d' }, h("div", { key: 'c82b73421f9986d51abdb9372c8d2d36543bf700', class: "dda-slider-container" }, h("div", { key: '87ab0d38cdd6e5f6db1dfccc6045466aa83110b0', class: "dda-slides", style: { innerWidth: this.slides.length * 100 + 'vw', left: this.currentSlide * -100 + '%' } }, h("slot", { key: 'dcc24fdc28058374c6300aabb68b23722d86f3e4' })), h("div", { key: '2eb6e6b626bd2756ca37238dc808978f4103aa5b', class: 'slider-nav' }, h("button", { key: 'f05d141e12f4874f14fedf353415f6631dc7971b', class: "prev", onClick: () => this.prevSlide() }, h("i", { key: '429b7cc641f9ac836d967ce2601e4fe91f978a3d', class: "material-icons" }, "chevron_left")), h("ul", { key: '55e2e2578f66cee575b10bf045aadc912fa7f621' }, this.slides.map((_, index) => {
-            return h("div", { class: this.currentSlide == index ? 'dots active' : 'dots', onClick: () => this.setSlide(index) });
-        })), h("button", { key: 'c68a48a6b16ffd72ea4148a07e0f513bb4a93d94', class: "next", onClick: () => this.nextSlide() }, h("i", { key: 'cca2fe5cad36082c4462a020ff8f332384197bc9', class: "material-icons" }, "chevron_right"))))));
+        const total = this.slides.length;
+        const showAutoplayToggle = this.autoplay && !this.reducedMotion;
+        return (h(Host, { key: 'ac323ffde47f44882ece6d32e9fb62b50fd32c08', class: "home-slider", role: "region", "aria-roledescription": "carousel", "aria-label": this.aria_label }, h("div", { key: 'de9562eaf2c85d3848aa81af046f96642637e78c', class: "dda-slider-container" }, h("div", { key: 'c3cc772f608ee5ccb3256e889e99aab836ca101a', class: "dda-slides", style: { width: total * 100 + 'vw', left: this.currentSlide * -100 + '%' } }, h("slot", { key: '4818e3c8bde26958dc66cf5fdb5180f2dfff1173' })), h("div", { key: '1d1bb6fb6efc59a2c7b652617e6e9425a0147b19', class: 'slider-nav' }, showAutoplayToggle && (h("button", { key: '7b67231c638c6bf0817733a056ed247070f5a4c2', class: "pause", type: "button", "aria-label": this.isPaused ? this.play_button_label : this.pause_button_label, onClick: this.togglePause }, h("i", { key: '167ca0ce45416089292def96db6b799907522377', class: "material-icons", "aria-hidden": "true" }, this.isPaused ? 'play_arrow' : 'pause'))), h("button", { key: 'ee55277e5fea022a2699811025f9768d8598b8ba', class: "prev", type: "button", "aria-label": this.previous_button_label, onClick: () => this.prevSlide() }, h("i", { key: 'd9da0726b886ec951974e16c9429deab601e6e16', class: "material-icons", "aria-hidden": "true" }, "chevron_left")), h("ul", { key: '75813985527f96c5086d21a4ec7aaca7484a1217' }, this.slides.map((_, index) => {
+            const isCurrent = this.currentSlide === index;
+            return (h("li", null, h("button", { type: "button", class: isCurrent ? 'dots active' : 'dots', "aria-label": `${this.slide_button_label} ${index + 1}`, "aria-current": isCurrent ? 'true' : null, onClick: () => this.setSlide(index) })));
+        })), h("button", { key: '81d0bdaaab9850fd4c9c15303955b79a9e48ced7', class: "next", type: "button", "aria-label": this.next_button_label, onClick: () => this.nextSlide() }, h("i", { key: 'c6807fe51b2334963a1484872ffc71f92855a389', class: "material-icons", "aria-hidden": "true" }, "chevron_right"))), h("div", { key: 'ac26f8ea696ad5779617c49081cafad67c77153d', class: "visually-hidden", role: "status", "aria-live": this.isRotating ? 'off' : 'polite' }, total ? this.statusText(this.currentSlide + 1, total) : ''))));
     }
     static get is() { return "dda-home-banner"; }
     static get originalStyleUrls() {
@@ -41,10 +192,206 @@ export class DdaHomeBanner {
             "$": ["home-banner.css", "../../global/global.css"]
         };
     }
+    static get properties() {
+        return {
+            "autoplay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Advance through the slides automatically."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autoplay",
+                "defaultValue": "false"
+            },
+            "interval": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Milliseconds each slide is shown for when `autoplay` is on. Clamped to a 1000ms floor."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "interval",
+                "defaultValue": "5000"
+            },
+            "aria_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the carousel region."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria_label",
+                "defaultValue": "'Highlights'"
+            },
+            "previous_button_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the previous-slide button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "previous_button_label",
+                "defaultValue": "'Previous slide'"
+            },
+            "next_button_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the next-slide button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "next_button_label",
+                "defaultValue": "'Next slide'"
+            },
+            "pause_button_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the pause button shown while autoplay is running."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pause_button_label",
+                "defaultValue": "'Pause slideshow'"
+            },
+            "play_button_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the play button shown while autoplay is paused."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "play_button_label",
+                "defaultValue": "'Play slideshow'"
+            },
+            "slide_button_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prefix for each slide dot's accessible name, e.g. \"Go to slide 2\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "slide_button_label",
+                "defaultValue": "'Go to slide'"
+            },
+            "slide_status_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Template for the screen-reader slide announcement. `{current}` and `{total}` are substituted."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "slide_status_label",
+                "defaultValue": "'Slide {current} of {total}'"
+            }
+        };
+    }
     static get states() {
         return {
-            "currentSlide": {}
+            "currentSlide": {},
+            "slides": {},
+            "isPaused": {},
+            "reducedMotion": {}
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "autoplay",
+                "methodName": "autoplayChanged"
+            }, {
+                "propName": "interval",
+                "methodName": "autoplayChanged"
+            }];
+    }
 }