@dubai-design-system/components-js 3.11.2 → 3.11.4

package/dist/collection/components/dda-search-input/dda-search-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"dda-search-input.js","sourceRoot":"","sources":["../../../src/components/dda-search-input/dda-search-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Element, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-search-input',\r\n  styleUrls: [],\r\n  shadow: false,\r\n})\r\nexport class DdaSearchInput {\r\n  @Prop() placeholder: string = 'Search';\r\n  @Prop() label: string;\r\n  @Prop() size: string = 'sm';\r\n  @Prop() error_message: string;\r\n  @Prop() show_button: boolean = false;\r\n  @Prop() helper_text: string;\r\n  @Prop() validation_id: string;\r\n  @Prop() input_status?: string;\r\n  @Prop() has_error: boolean = false;\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() component_mode?: string;\r\n  @Prop() button_id?: string;\r\n  @Prop() input_id?: string;\r\n  @Prop() aria_label?: string;\r\n  @Prop() button_aria_label?: string;\r\n  @Prop() search_input_name: string;\r\n  @Prop() close_button_name: string;\r\n  @Prop() search_button_name: string;\r\n  @Prop() button_text: string;\r\n\r\n  @Element() el: HTMLElement;\r\n\r\n  @State() hasInputValue: boolean = false;\r\n\r\n  handleInput = (event: Event) => {\r\n    const target = event.target as HTMLInputElement;\r\n    this.hasInputValue = target.value.length > 0;\r\n  }\r\n\r\n  handleKeyDown = (event: KeyboardEvent) => {\r\n    if (event.key === 'Enter') {\r\n      const target = event.target as HTMLInputElement;\r\n      console.log('Search input value (Enter):', target.value);\r\n    }\r\n  }\r\n\r\n  handleSearchClick = () => {\r\n    const input = this.el.querySelector(`#${this.input_id}`) as HTMLInputElement;\r\n    if (input) {\r\n      console.log('Search input value (Button):', input.value);\r\n    }\r\n  }\r\n\r\n  clearInput() {\r\n    if (!this.input_id) return;\r\n    const input = this.el.querySelector(`#${this.input_id}`) as HTMLInputElement;\r\n    if (input) {\r\n      input.value = '';\r\n      this.hasInputValue = false;\r\n      input.focus();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class={`dda-input-container dda-input-size-${this.size} ${this.component_mode} ${this.custom_class} ${this.input_status ? `dda-input-${this.input_status}` : ''} ${this.has_error ? 'dda-validation-error' : ''}`}>\r\n          {this.label && <label htmlFor={this.button_id} class=\"dda-input-label\">{this.label}</label>}\r\n          <div class=\"dda-search-area dda-search-action\">\r\n            <i class=\"material-icons icon-left\" aria-hidden=\"true\">search</i>\r\n            <input\r\n              name={this.search_input_name}\r\n              aria-label={this.aria_label}\r\n              id={this.input_id}\r\n              type=\"text\"\r\n              class={`dda-input-field dda-search-field ${this.show_button ? 'has-search-button' : ''}`}\r\n              placeholder={this.placeholder}\r\n              onInput={this.handleInput}\r\n              onKeyDown={this.handleKeyDown}\r\n            />\r\n            <div class=\"dda-search-btngroup\">\r\n              {this.hasInputValue && (\r\n                <button\r\n                  name={this.close_button_name}\r\n                  aria-label={this.button_aria_label}\r\n                  id={this.button_id}\r\n                  type=\"button\"\r\n                  class=\"dda-search-close-icon\"\r\n                  onClick={() => this.clearInput()}\r\n                >\r\n                  <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">close</i>\r\n                </button>\r\n              )}\r\n              {this.show_button && (\r\n                <button\r\n                  name={this.search_button_name}\r\n                  type=\"button\"\r\n                  class=\"dda-btn btn-color-default-primary dda-btn-sm\"\r\n                  onClick={this.handleSearchClick}\r\n                >\r\n                  {this.button_text}\r\n                </button>\r\n              )}\r\n            </div>\r\n          </div>\r\n          {this.helper_text && <span class=\"dda-helper-text\" id={this.validation_id}>{this.helper_text}</span>}\r\n          {this.error_message && <span class=\"dda-error-message\" id={this.validation_id}>{this.error_message}</span>}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"dda-search-input.js","sourceRoot":"","sources":["../../../src/components/dda-search-input/dda-search-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Element, State, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-search-input',\r\n  styleUrls: [],\r\n  shadow: false,\r\n})\r\nexport class DdaSearchInput {\r\n  @Prop() placeholder: string = 'Search';\r\n  @Prop() label: string;\r\n  @Prop() size: string = 'sm';\r\n  @Prop() error_message: string;\r\n  @Prop() show_button: boolean = false;\r\n  @Prop() helper_text: string;\r\n  @Prop() validation_id: string;\r\n  @Prop() input_status?: string;\r\n  @Prop() has_error: boolean = false;\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() component_mode?: string;\r\n  @Prop() button_id?: string;\r\n  @Prop() input_id?: string;\r\n  @Prop() aria_label?: string;\r\n  @Prop() button_aria_label?: string;\r\n  @Prop() search_input_name: string;\r\n  @Prop() close_button_name: string;\r\n  @Prop() search_button_name: string;\r\n  @Prop() button_text: string;\r\n  @Prop() value: string;\r\n\r\n  @Event() inputChanged: EventEmitter<any>;\r\n  @Event() inputBlurred: EventEmitter<{ name: string; value: string }>;\r\n\r\n  @Element() el: HTMLElement;\r\n\r\n  @State() hasInputValue: boolean = false;\r\n  @State() internalValue: string = '';\r\n\r\n  handleInput = (event: Event) => {\r\n    const target = event.target as HTMLInputElement;\r\n    this.hasInputValue = target.value.length > 0;\r\n  };\r\n\r\n  handleKeyDown = (event: KeyboardEvent) => {\r\n    if (event.key === 'Enter') {\r\n      const target = event.target as HTMLInputElement;\r\n      console.log('Search input value (Enter):', target.value);\r\n    }\r\n  };\r\n\r\n  handleSearchClick = () => {\r\n    const input = this.el.querySelector(`#${this.input_id}`) as HTMLInputElement;\r\n    if (input) {\r\n      console.log('Search input value (Button):', input.value);\r\n    }\r\n  };\r\n\r\n  clearInput() {\r\n    if (!this.input_id) return;\r\n    const input = this.el.querySelector(`#${this.input_id}`) as HTMLInputElement;\r\n    if (input) {\r\n      input.value = '';\r\n      this.hasInputValue = false;\r\n      input.focus();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div\r\n          class={`dda-input-container dda-input-size-${this.size} ${this.component_mode} ${this.custom_class} ${this.input_status ? `dda-input-${this.input_status}` : ''} ${this.has_error ? 'dda-validation-error' : ''}`}\r\n        >\r\n          {this.label && (\r\n            <label htmlFor={this.button_id} class=\"dda-input-label\">\r\n              {this.label}\r\n            </label>\r\n          )}\r\n          <div class=\"dda-search-area dda-search-action\">\r\n            <i class=\"material-icons icon-left\" aria-hidden=\"true\">\r\n              search\r\n            </i>\r\n            <input\r\n              name={this.search_input_name}\r\n              aria-label={this.aria_label}\r\n              id={this.input_id}\r\n              value={this.internalValue || this.value}\r\n              type=\"text\"\r\n              class={`dda-input-field dda-search-field ${this.show_button ? 'has-search-button' : ''}`}\r\n              placeholder={this.placeholder}\r\n              // onInput={this.handleInput}\r\n              onKeyDown={this.handleKeyDown}\r\n              onInput={event => {\r\n                this.internalValue = (event.target as HTMLInputElement).value;\r\n                this.inputChanged.emit(event);\r\n              }}\r\n              onBlur={event => {\r\n                const value = (event.target as HTMLInputElement).value.trim();\r\n                this.inputBlurred.emit({ name: this.search_input_name, value });\r\n              }}\r\n            />\r\n            <div class=\"dda-search-btngroup\">\r\n              {this.hasInputValue && (\r\n                <button\r\n                  name={this.close_button_name}\r\n                  aria-label={this.button_aria_label}\r\n                  id={this.button_id}\r\n                  type=\"button\"\r\n                  class=\"dda-search-close-icon\"\r\n                  onClick={() => this.clearInput()}\r\n                >\r\n                  <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">\r\n                    close\r\n                  </i>\r\n                </button>\r\n              )}\r\n              {this.show_button && (\r\n                <button name={this.search_button_name} type=\"button\" class=\"dda-btn btn-color-default-primary dda-btn-sm\" onClick={this.handleSearchClick}>\r\n                  {this.button_text}\r\n                </button>\r\n              )}\r\n            </div>\r\n          </div>\r\n          {this.helper_text && (\r\n            <span class=\"dda-helper-text\" id={this.validation_id}>\r\n              {this.helper_text}\r\n            </span>\r\n          )}\r\n          {this.error_message && (\r\n            <span class=\"dda-error-message\" id={this.validation_id}>\r\n              {this.error_message}\r\n            </span>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -66,7 +66,7 @@ export class Ddaselect {
             ${this.component_mode} 
             ${this.disabled ? 'dda-input-disabled' : ''} 
             dda-input-size-${this.size} dda-validation-${this.validation_type}
-          ` }, this.label && (h("label", { key: '3b15eee068241324edbb6a9aff8a073141b2041b', id: labelId, htmlFor: this.button_id, class: "dda-input-label" }, this.label)), h("div", { key: '17c6e93f485164aec314659ac1bf685b24a3e4cf', class: "dda-dropdown-container" }, h("button", { key: '62d498a28987cf4db5982b17eeee3ea70a6c1450', name: this.toggle_button_name, id: this.button_id, type: "button", class: "dda-input-field dda-select-header", "aria-labelledby": `${labelId} ${this.button_id}`, disabled: this.disabled, onClick: () => this.toggleSelect(), onBlur: this.handleBlur }, h("span", { key: '67191d3ce602b2e3f69368aac407f2a422ddc521', id: valueId, class: "dda-select-button-label" }, this.selectedText || this.placeholder), h("i", { key: '034123bfe797c3390a816b9a7d4dc392ebbf936e', class: "material-icons", "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: '459c80dce14d98a6a600ed05dfc2b72d70529c43', class: "dda-input-dropdown-list dda-select-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map((option, index) => (h("button", { name: `option${this.numberToWord(index + 1)}`, type: "button", class: `dda-input-dropdown-item ${this.selectedId === option.id ? 'selected' : ''}`, role: "option", "aria-selected": this.selectedId === option.id ? 'true' : 'false', onClick: () => this.selectOption(option) }, option.text)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.validation_type === 'error' && this.error_message ? (h("span", { class: "dda-error-message", id: this.validation_id, role: "alert" }, this.error_message)) : (this.helper_text && (h("span", { class: "dda-helper-text", id: this.validation_id }, this.helper_text))))));
+          ` }, this.label && (h("span", { key: '665853d1e6aa374cea72c8268409a2c8d4c605be', id: labelId, class: "dda-input-label" }, this.label)), h("div", { key: 'eac1aeb088a25cd6fa43d63d9e4a9345fe16cbb2', class: "dda-dropdown-container" }, h("button", { key: '3adfaf044e5033e70c797c4e733b6c1cacd884e4', name: this.toggle_button_name, id: this.button_id, type: "button", class: "dda-input-field dda-select-header", "aria-labelledby": `${labelId} ${this.button_id}`, disabled: this.disabled, onClick: () => this.toggleSelect(), onBlur: this.handleBlur }, h("span", { key: '4aeac4f4baa2d34201ffa054b256379b716f71f8', id: valueId, class: "dda-select-button-label" }, this.selectedText || this.placeholder), h("i", { key: 'b7c6541a48190f0fe7f4bcbc188577c6d7914237', class: "material-icons", "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: '2b686c68fa5e48f5f3dc87563bb01457f2fd8189', class: "dda-input-dropdown-list dda-select-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map((option, index) => (h("button", { name: `option${this.numberToWord(index + 1)}`, type: "button", class: `dda-input-dropdown-item ${this.selectedId === option.id ? 'selected' : ''}`, role: "option", "aria-selected": this.selectedId === option.id ? 'true' : 'false', onClick: () => this.selectOption(option) }, option.text)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.validation_type === 'error' && this.error_message ? (h("span", { class: "dda-error-message", id: this.validation_id, role: "alert" }, this.error_message)) : (this.helper_text && (h("span", { class: "dda-helper-text", id: this.validation_id }, this.helper_text))))));
     }
     static get is() { return "dda-select"; }
     static get properties() {

package/dist/collection/components/dda-select/dda-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"dda-select.js","sourceRoot":"","sources":["../../../src/components/dda-select/dda-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, h, Host, Element, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-select',\r\n  styleUrls: [],\r\n  shadow: false,\r\n})\r\nexport class Ddaselect {\r\n  @Element() el: HTMLElement;\r\n\r\n  @Prop() label: string;\r\n  @Prop() options: string;\r\n  @Prop() selected: string; // can be id or text\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() error?: string;\r\n  @Prop() error_message: string;\r\n  @Prop() helper_text: string;\r\n  @Prop() validation_type?: string;\r\n  @Prop() validation_id: string = 'text';\r\n  @Prop() size?: string;\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() component_mode?: string;\r\n  @Prop() button_id: string;\r\n  @Prop() toggle_button_name: string;\r\n  @Prop() option_select_button_name: string;\r\n  @Prop() placeholder: string = '';\r\n  @Prop() main_aria_label: string = '';\r\n  @Prop() input_name: string = '';\r\n  \r\n  @State() is_open: boolean = false;\r\n  @State() selectedId: number;\r\n  @State() selectedText: string;\r\n  \r\n  @Event() selectChanged: EventEmitter<{ id: number; text: string }>;\r\n  @Event() selectBlurred: EventEmitter<{ name: string; value: string }>;\r\n\r\n  private get parsedOptions(): { id: number; text: string }[] {\r\n    try {\r\n      return JSON.parse(this.options);\r\n    } catch {\r\n      return [];\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    const selectedOption = this.parsedOptions.find(\r\n      (opt) => opt.id.toString() === this.selected || opt.text === this.selected\r\n    );\r\n    if (selectedOption) {\r\n      this.selectedId = selectedOption.id;\r\n      this.selectedText = selectedOption.text;\r\n    }\r\n  }\r\n\r\n  toggleSelect() {\r\n    if (!this.disabled) {\r\n      this.is_open = !this.is_open;\r\n    }\r\n  }\r\n\r\n  selectOption(option: { id: number; text: string }) {\r\n    if (!this.disabled) {\r\n      this.selectedId = option.id;\r\n      this.selectedText = option.text;\r\n      this.is_open = false;\r\n      this.selectChanged.emit(option);\r\n    }\r\n  }\r\n\r\n  handleClickOutside = (event: MouseEvent) => {\r\n    if (this.is_open && !this.el.contains(event.target as Node)) {\r\n      this.is_open = false;\r\n    }\r\n  };\r\n\r\n  handleBlur = () => {\r\n    this.selectBlurred.emit({\r\n      name: this.input_name || this.button_id,\r\n      value: this.selectedText || '',\r\n    });\r\n  };\r\n\r\n\r\n  connectedCallback() {\r\n    document.addEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  private numberToWord(num: number): string {\r\n    const words = ['One', 'Two', 'Three', 'Four', 'Five'];\r\n    return words[num - 1] || num.toString();\r\n  }\r\n\r\n  render() {\r\n    const labelId = `${this.button_id}-label`;\r\n    const valueId = `${this.button_id}-value`;\r\n\r\n    return (\r\n      <Host>\r\n        <div\r\n          class={`\r\n            dda-input-container ${this.custom_class} \r\n            ${this.component_mode} \r\n            ${this.disabled ? 'dda-input-disabled' : ''} \r\n            dda-input-size-${this.size} dda-validation-${this.validation_type}\r\n          `}\r\n        >\r\n          {this.label && (\r\n            <label id={labelId} htmlFor={this.button_id} class=\"dda-input-label\">\r\n              {this.label}\r\n            </label>\r\n          )}\r\n          <div class=\"dda-dropdown-container\">\r\n            <button\r\n              name={this.toggle_button_name}\r\n              id={this.button_id}\r\n              type=\"button\"\r\n              class=\"dda-input-field dda-select-header\"\r\n              aria-labelledby={`${labelId} ${this.button_id}`}\r\n              disabled={this.disabled}\r\n              onClick={() => this.toggleSelect()}\r\n              onBlur={this.handleBlur}\r\n            >\r\n              <span id={valueId} class=\"dda-select-button-label\">\r\n                {this.selectedText || this.placeholder}\r\n              </span>\r\n              <i class=\"material-icons\" aria-hidden=\"true\">{this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}</i>\r\n            </button>\r\n\r\n            {this.is_open && (\r\n              <div class=\"dda-input-dropdown-list dda-select-list\">\r\n                {this.parsedOptions.length > 0 ? (\r\n                  this.parsedOptions.map((option, index) => (\r\n                    <button\r\n                      name={`option${this.numberToWord(index + 1)}`}\r\n                      type=\"button\"\r\n                      class={`dda-input-dropdown-item ${this.selectedId === option.id ? 'selected' : ''}`}\r\n                      role=\"option\"\r\n                      aria-selected={this.selectedId === option.id ? 'true' : 'false'}\r\n                      onClick={() => this.selectOption(option)}\r\n                    >\r\n                      {option.text}\r\n                    </button>\r\n                  ))\r\n                ) : (\r\n                  <div class=\"dda-input-dropdown-item\">No options available</div>\r\n                )}\r\n              </div>\r\n            )}\r\n          </div>\r\n\r\n          {this.validation_type === 'error' && this.error_message ? (\r\n            <span \r\n              class=\"dda-error-message\" \r\n              id={this.validation_id}\r\n              role=\"alert\"\r\n            >\r\n              {this.error_message}\r\n            </span>\r\n          ) : (\r\n            this.helper_text && (\r\n              <span \r\n                class=\"dda-helper-text\" \r\n                id={this.validation_id}\r\n              >\r\n                {this.helper_text}\r\n              </span>\r\n            )\r\n          )}\r\n\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"dda-select.js","sourceRoot":"","sources":["../../../src/components/dda-select/dda-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, h, Host, Element, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-select',\r\n  styleUrls: [],\r\n  shadow: false,\r\n})\r\nexport class Ddaselect {\r\n  @Element() el: HTMLElement;\r\n\r\n  @Prop() label: string;\r\n  @Prop() options: string;\r\n  @Prop() selected: string; // can be id or text\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() error?: string;\r\n  @Prop() error_message: string;\r\n  @Prop() helper_text: string;\r\n  @Prop() validation_type?: string;\r\n  @Prop() validation_id: string = 'text';\r\n  @Prop() size?: string;\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() component_mode?: string;\r\n  @Prop() button_id: string;\r\n  @Prop() toggle_button_name: string;\r\n  @Prop() option_select_button_name: string;\r\n  @Prop() placeholder: string = '';\r\n  @Prop() main_aria_label: string = '';\r\n  @Prop() input_name: string = '';\r\n  \r\n  @State() is_open: boolean = false;\r\n  @State() selectedId: number;\r\n  @State() selectedText: string;\r\n  \r\n  @Event() selectChanged: EventEmitter<{ id: number; text: string }>;\r\n  @Event() selectBlurred: EventEmitter<{ name: string; value: string }>;\r\n\r\n  private get parsedOptions(): { id: number; text: string }[] {\r\n    try {\r\n      return JSON.parse(this.options);\r\n    } catch {\r\n      return [];\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    const selectedOption = this.parsedOptions.find(\r\n      (opt) => opt.id.toString() === this.selected || opt.text === this.selected\r\n    );\r\n    if (selectedOption) {\r\n      this.selectedId = selectedOption.id;\r\n      this.selectedText = selectedOption.text;\r\n    }\r\n  }\r\n\r\n  toggleSelect() {\r\n    if (!this.disabled) {\r\n      this.is_open = !this.is_open;\r\n    }\r\n  }\r\n\r\n  selectOption(option: { id: number; text: string }) {\r\n    if (!this.disabled) {\r\n      this.selectedId = option.id;\r\n      this.selectedText = option.text;\r\n      this.is_open = false;\r\n      this.selectChanged.emit(option);\r\n    }\r\n  }\r\n\r\n  handleClickOutside = (event: MouseEvent) => {\r\n    if (this.is_open && !this.el.contains(event.target as Node)) {\r\n      this.is_open = false;\r\n    }\r\n  };\r\n\r\n  handleBlur = () => {\r\n    this.selectBlurred.emit({\r\n      name: this.input_name || this.button_id,\r\n      value: this.selectedText || '',\r\n    });\r\n  };\r\n\r\n\r\n  connectedCallback() {\r\n    document.addEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  private numberToWord(num: number): string {\r\n    const words = ['One', 'Two', 'Three', 'Four', 'Five'];\r\n    return words[num - 1] || num.toString();\r\n  }\r\n\r\n  render() {\r\n    const labelId = `${this.button_id}-label`;\r\n    const valueId = `${this.button_id}-value`;\r\n\r\n    return (\r\n      <Host>\r\n        <div\r\n          class={`\r\n            dda-input-container ${this.custom_class} \r\n            ${this.component_mode} \r\n            ${this.disabled ? 'dda-input-disabled' : ''} \r\n            dda-input-size-${this.size} dda-validation-${this.validation_type}\r\n          `}\r\n        >\r\n          {this.label && (\r\n            <span id={labelId} class=\"dda-input-label\">\r\n              {this.label}\r\n            </span>\r\n          )}\r\n          <div class=\"dda-dropdown-container\">\r\n            <button\r\n              name={this.toggle_button_name}\r\n              id={this.button_id}\r\n              type=\"button\"\r\n              class=\"dda-input-field dda-select-header\"\r\n              aria-labelledby={`${labelId} ${this.button_id}`}\r\n              disabled={this.disabled}\r\n              onClick={() => this.toggleSelect()}\r\n              onBlur={this.handleBlur}\r\n            >\r\n              <span id={valueId} class=\"dda-select-button-label\">\r\n                {this.selectedText || this.placeholder}\r\n              </span>\r\n              <i class=\"material-icons\" aria-hidden=\"true\">{this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}</i>\r\n            </button>\r\n\r\n            {this.is_open && (\r\n              <div class=\"dda-input-dropdown-list dda-select-list\">\r\n                {this.parsedOptions.length > 0 ? (\r\n                  this.parsedOptions.map((option, index) => (\r\n                    <button\r\n                      name={`option${this.numberToWord(index + 1)}`}\r\n                      type=\"button\"\r\n                      class={`dda-input-dropdown-item ${this.selectedId === option.id ? 'selected' : ''}`}\r\n                      role=\"option\"\r\n                      aria-selected={this.selectedId === option.id ? 'true' : 'false'}\r\n                      onClick={() => this.selectOption(option)}\r\n                    >\r\n                      {option.text}\r\n                    </button>\r\n                  ))\r\n                ) : (\r\n                  <div class=\"dda-input-dropdown-item\">No options available</div>\r\n                )}\r\n              </div>\r\n            )}\r\n          </div>\r\n\r\n          {this.validation_type === 'error' && this.error_message ? (\r\n            <span \r\n              class=\"dda-error-message\" \r\n              id={this.validation_id}\r\n              role=\"alert\"\r\n            >\r\n              {this.error_message}\r\n            </span>\r\n          ) : (\r\n            this.helper_text && (\r\n              <span \r\n                class=\"dda-helper-text\" \r\n                id={this.validation_id}\r\n              >\r\n                {this.helper_text}\r\n              </span>\r\n            )\r\n          )}\r\n\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -4,13 +4,12 @@ export class DdaToggle {
         this.custom_class = '';
     }
     render() {
-        const toggleClass = [
-            'dda-toggle-btn',
-            this.size ? `dda-toggle-${this.size}` : '',
-            this.custom_class ? `${this.custom_class}` : '',
-            this.component_mode,
-        ].filter(Boolean).join(' ');
-        return (h(Host, { key: 'd7801970653993dd8eedb37eb70db33b92d7b641' }, h("label", { key: 'da643a1a4eeaa2823d98636fcb3fa927ba7dc576', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '15eda92812deaf543f0f680bbef9f68869ae3476', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("span", { key: 'a68ab591c628d6d9d11a74f8b373979aaa356d5e', class: "toggle" }), h("p", { key: '28ca46d403b19a241f7c7da81922bb7f885801c9' }, h("span", { key: '5884bbc2b972e6ad7825ee045483941bbaeb81d1', class: "toggle-title" }, "Radio Button Title"), h("span", { key: 'e39fba59b29efe5c3ea6396fd2f1361f118ca8d1', class: "toggle-supporting" }, "Supporting Text")))));
+        const toggleClass = ['dda-toggle-btn', this.size ? `dda-toggle-${this.size}` : '', this.custom_class ? `${this.custom_class}` : '', this.component_mode]
+            .filter(Boolean)
+            .join(' ');
+        return (h(Host, { key: '7c3db88316052b19c146996798f7fcd73cd57603' }, h("label", { key: 'f685e06c7873a986343c68e65049aae955479e34', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '175fb25ce0c6c2322d3125bbf265c4d88d963b4e', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked, onChange: event => {
+                this.toggleChanged.emit(event);
+            } }), h("span", { key: '410c2812dfa4c27eac881ac9402e66357a750e22', class: "toggle" }), h("p", { key: '0a87c75f7b1d525b91f511186f6baba5bc6f5828' }, h("span", { key: 'bfc55b0af5a746f40440e0b0d5e85a311210e98e', class: "toggle-title" }, "Radio Button Title"), h("span", { key: 'b61ca61425927c00da8643986e06a547f4b8d925', class: "toggle-supporting" }, "Supporting Text")))));
     }
     static get is() { return "dda-toggle"; }
     static get originalStyleUrls() {
@@ -161,5 +160,23 @@ export class DdaToggle {
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "toggleChanged",
+                "name": "toggleChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
 }
 //# sourceMappingURL=dda-toggle.js.map

package/dist/collection/components/dda-toggle/dda-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"dda-toggle.js","sourceRoot":"","sources":["../../../src/components/dda-toggle/dda-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;IALtB;QAUU,iBAAY,GAAY,EAAE,CAAC;KA2BpC;IArBC,MAAM;QACJ,MAAM,WAAW,GAAG;YAClB,gBAAgB;YAChB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;YAC1C,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE;YAC/C,IAAI,CAAC,cAAc;SACpB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE5B,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ;gBAC/C,4EAAmB,IAAI,CAAC,UAAU,EAAE,IAAI,EAAC,UAAU,EAAC,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,GAAG;gBACpH,6DAAM,KAAK,EAAC,QAAQ,GAAQ;gBAC5B;oBACE,6DAAM,KAAK,EAAC,cAAc,yBAA0B;oBACpD,6DAAM,KAAK,EAAC,mBAAmB,sBAAuB,CACpD,CACA,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-toggle',\r\n  styleUrls: ['dda-toggle.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaToggle {\r\n  @Prop() checked: boolean;\r\n // @Prop() labelOn: string = 'On';\r\n  //@Prop() labelOff: string = 'Off';\r\n  @Prop() size?: string; // e.g., 'sm', 'md', 'lg'\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() group_name?: string;\r\n  @Prop() input_id?: string;\r\n  @Prop() component_mode?: string; \r\n  @Prop() aria_label: string;\r\n\r\n  render() {\r\n    const toggleClass = [\r\n      'dda-toggle-btn',\r\n      this.size ? `dda-toggle-${this.size}` : '',\r\n      this.custom_class ? `${this.custom_class}` : '',\r\n      this.component_mode,\r\n    ].filter(Boolean).join(' ');\r\n\r\n    return (\r\n      <Host>\r\n        <label class={toggleClass} htmlFor={this.input_id}>\r\n          <input aria-label={this.aria_label} type=\"checkbox\" id={this.input_id} name={this.group_name} checked={this.checked}/>\r\n            <span class=\"toggle\"></span> \r\n            <p>\r\n              <span class=\"toggle-title\">Radio Button Title</span>\r\n              <span class=\"toggle-supporting\">Supporting Text</span>\r\n            </p>\r\n        </label>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"dda-toggle.js","sourceRoot":"","sources":["../../../src/components/dda-toggle/dda-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,SAAS;IALtB;QAUU,iBAAY,GAAY,EAAE,CAAC;KAmCpC;IA3BC,MAAM;QACJ,MAAM,WAAW,GAAG,CAAC,gBAAgB,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,cAAc,CAAC;aACrJ,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAC;QAEb,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ;gBAC/C,4EACc,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,KAAK,CAAC,EAAE;wBAChB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;oBACjC,CAAC,GACD;gBACF,6DAAM,KAAK,EAAC,QAAQ,GAAQ;gBAC5B;oBACE,6DAAM,KAAK,EAAC,cAAc,yBAA0B;oBACpD,6DAAM,KAAK,EAAC,mBAAmB,sBAAuB,CACpD,CACE,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-toggle',\r\n  styleUrls: ['dda-toggle.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaToggle {\r\n  @Prop() checked: boolean;\r\n  // @Prop() labelOn: string = 'On';\r\n  //@Prop() labelOff: string = 'Off';\r\n  @Prop() size?: string; // e.g., 'sm', 'md', 'lg'\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() group_name?: string;\r\n  @Prop() input_id?: string;\r\n  @Prop() component_mode?: string;\r\n  @Prop() aria_label: string;\r\n\r\n  @Event() toggleChanged: EventEmitter<any>;\r\n\r\n  render() {\r\n    const toggleClass = ['dda-toggle-btn', this.size ? `dda-toggle-${this.size}` : '', this.custom_class ? `${this.custom_class}` : '', this.component_mode]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    return (\r\n      <Host>\r\n        <label class={toggleClass} htmlFor={this.input_id}>\r\n          <input\r\n            aria-label={this.aria_label}\r\n            type=\"checkbox\"\r\n            id={this.input_id}\r\n            name={this.group_name}\r\n            checked={this.checked}\r\n            onChange={event => {\r\n              this.toggleChanged.emit(event);\r\n            }}\r\n          />\r\n          <span class=\"toggle\"></span>\r\n          <p>\r\n            <span class=\"toggle-title\">Radio Button Title</span>\r\n            <span class=\"toggle-supporting\">Supporting Text</span>\r\n          </p>\r\n        </label>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -1,4 +1,4 @@
-import { D as DdaHeaderMenu$1, d as defineCustomElement$1 } from './p-256a4938.js';
+import { D as DdaHeaderMenu$1, d as defineCustomElement$1 } from './p-c30037a8.js';
 
 const DdaHeaderMenu = DdaHeaderMenu$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/dda-header.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, h } from './p-f6588843.js';
 import { d as defineCustomElement$7 } from './p-a7f02338.js';
-import { d as defineCustomElement$6 } from './p-256a4938.js';
+import { d as defineCustomElement$6 } from './p-c30037a8.js';
 import { d as defineCustomElement$5 } from './p-93bcdccb.js';
 import { d as defineCustomElement$4 } from './p-42b74b87.js';
 import { d as defineCustomElement$3 } from './p-a28f59c6.js';
@@ -14,6 +14,7 @@ const DdaHeader$1 = /*@__PURE__*/ proxyCustomElement(class DdaHeader extends H {
         super();
         this.__registerHost();
         this.languageSwitch = createEvent(this, "languageSwitch", 7);
+        this.loginClick = createEvent(this, "loginClick", 7);
         this.navigatorClick = createEvent(this, "navigatorClick", 7);
         this.smTextSize = createEvent(this, "smTextSize", 7);
         this.baseTextSize = createEvent(this, "baseTextSize", 7);
@@ -38,6 +39,7 @@ const DdaHeader$1 = /*@__PURE__*/ proxyCustomElement(class DdaHeader extends H {
         this.useNavigator = 'false';
         this.mobileMenuSearchId = 'mobileSearch';
         this.mobileMenuSearchUrl = 'javascript:void(0)';
+        this.selected_contrast = "normal";
         this.hideOtherMenu = false;
         this.parsedOtherMenuItems = [];
         this.parsedDropDownMenuItems = [];
@@ -125,24 +127,31 @@ const DdaHeader$1 = /*@__PURE__*/ proxyCustomElement(class DdaHeader extends H {
             this.languageSwitch.emit();
         };
         this.smTexthandler = () => {
+            this.selected_text_size = "small";
             this.smTextSize.emit();
         };
         this.baseTexthandler = () => {
+            this.selected_text_size = "normal";
             this.baseTextSize.emit();
         };
         this.lgTexthandler = () => {
+            this.selected_text_size = "large";
             this.lgTextSize.emit();
         };
         this.normalContrasthandler = () => {
+            this.selected_contrast = "normal";
             this.normalContrast.emit();
         };
         this.blindContrasthandler = () => {
+            this.selected_contrast = "colorblind";
             this.blindContrast.emit();
         };
         this.redContrasthandler = () => {
+            this.selected_contrast = "redweakness";
             this.redContrast.emit();
         };
         this.greenContrasthandler = () => {
+            this.selected_contrast = "greenweakness";
             this.greenContrast.emit();
         };
         this.accessibilitymenuhandler = () => {
@@ -154,12 +163,15 @@ const DdaHeader$1 = /*@__PURE__*/ proxyCustomElement(class DdaHeader extends H {
         this.searchhandler = searchval => {
             this.searchfunctionality.emit(searchval);
         };
+        this.toggleLogin = () => {
+            this.loginClick.emit();
+        };
         this.renderSubMenu = (subMenu, parentLi) => {
             if (!subMenu || subMenu.length === 0)
                 return null;
-            return (h("div", { class: `main_sub_menu ${this.openMenus[parentLi] ? 'showSubMenu' : ''}` }, subMenu[0].headerLabel && h("p", { class: "dda-side-nav__title" }, subMenu[0].headerLabel), h("ol", null, subMenu.map((item, index) => {
+            return (h("div", { class: `main_sub_menu ${this.openMenus[parentLi] ? 'showSubMenu' : ''}` }, subMenu[0].headerLabel && h("h6", { class: "dda-side-nav__title" }, subMenu[0].headerLabel), h("ol", null, subMenu.map((item, index) => {
                 const currentIndex = `${parentLi}-${index}`;
-                return (h("li", { key: currentIndex }, h("a", { href: this.useNavigator == "true" ? 'javascript:void(0)' : item.href, class: `${item.subLinkClass} ${item.subMenu && item.subMenu.length > 0 ? 'showSub' : ''}`, onClick: (e) => {
+                return (h("li", { key: currentIndex }, h("a", { href: this.useNavigator == 'true' ? 'javascript:void(0)' : item.href, class: `${item.subLinkClass} ${item.subMenu && item.subMenu.length > 0 ? 'showSub' : ''}`, onClick: e => {
                         this.handleMenuClick(e, item, currentIndex);
                     } }, item.label), this.renderSubMenu(item.subMenu, currentIndex)));
             }))));
@@ -258,18 +270,18 @@ const DdaHeader$1 = /*@__PURE__*/ proxyCustomElement(class DdaHeader extends H {
         }
         else {
             console.log('check navigator', this.useNavigator, this.navigatorClick);
-            if (this.useNavigator == "true") {
+            if (this.useNavigator == 'true') {
                 this.navigatorClick.emit(item.href);
             }
         }
     }
     render() {
         const sideMenuItems = this.parseJsonArray(this.sideMenuItems);
-        return (h("header", { key: '0807333df0c25f8b4dc95d66427474ed2976800b', class: 'dda-header' }, h("div", { key: '83cbfb120f8a3013e4d153bf64a607ad1842005f', class: "dda-head-logo" }, h("a", { key: 'fe45bf21a88aa92d31efe43c54a11691a2c8b0e5', href: this.useNavigator == "true" ? 'javascript:void(0)' : this.firstLogoHref, onClick: () => this.useNavigator == "true" ? this.navigatorClick.emit(this.firstLogoHref) : "", class: "govt-logo" }, h("img", { key: 'ead314b4f008ee3edf162ad254f534baf5e407b0', class: "logo-white", src: this.firstLogoWhiteSrc, alt: `${this.firstLogoAlt} White` }), h("img", { key: 'e251140da715e0534f697662e0b86252bbdf4a59', class: "logo-colored", src: this.firstLogoSrc, alt: this.firstLogoAlt })), h("a", { key: '235aded9f67d2140f92fb16ef2f043905cef58b4', href: this.useNavigator == "true" ? 'javascript:void(0)' : this.secondLogoHref, onClick: () => this.useNavigator == "true" ? this.navigatorClick.emit(this.secondLogoHref) : "", class: "entt-logo" }, h("img", { key: 'd1526cb6fa4e27755abdefc86221a1ef41cfa92c', class: "logo-white", src: this.secondLogoWhiteSrc, alt: `${this.secondLogoAlt} White` }), h("img", { key: '25a5bdb434b8c0191e327430048602e235c65941', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }))), h("div", { key: '15fe8fcc489363c375e8b65db7336d04b31ff134', class: "dda-menu-container" }, h("div", { key: '183bc9c67e427cde99170dacc6d1ab4a73a51a3e', class: "dda-main-navigation" }, h("div", { key: '8b688480b98b2c76279e953327b8ccb2b0ceb51c', class: `dda-menu-overley ${this.isMenuOpen ? 'show-overley' : ''}`, onClick: this.toggleMenu }), h("div", { key: '4c866e71db00a96a47336fdfc1a97fef2082451a', class: "hamburger-menu", onClick: this.toggleMenu }, h("dda-tooltip", { key: 'e97ee0422b86a0465ad28839dcb7f273bd9dd75b', title_text: this.hamburger_menu_button_name, position: "top", class: "dda-d-block" }, h("button", { key: 'ebbf6efec03ec02b223c7a89de5cdf122af381ef', type: "button", class: "hamburger-menu-btn", name: this.hamburger_menu_button_name }, h("span", { key: 'd1647858ef616b2b045037383d18ef47a926a5ce', class: "hamburger-line" }), h("span", { key: '04cf4d6f42b7a081d409bd68d3969c28ec9618de', class: "hamburger-menu-text" }, this.hamburger_menu_button_name)))), h("div", { key: '1ed5192f19f3b09d038c689ad8faed00e2c0f58c', class: "dda-sidemenu", style: { display: this.isMenuOpen ? 'block' : '', insetInlineStart: this.isMenuOpen ? '0px' : '' } }, h("div", { key: '24c08dc5304eff8ba0840c8e1c2b05a418a963aa', class: "dda-sidemenu-content" }, h("p", { key: 'be9c2e231199af27d144525e93bb46248cc9dd14', class: "dda-side-nav-title" }, this.sideMainMenuTitle), h("ul", { key: '4fb15f030d16ae48f1aa5863071bb2beb75188d4', class: "main_side_menu" }, sideMenuItems.map((menu, index) => {
+        return (h("header", { key: '5b3a3813776b22c58ad7e4a2aefad2b39b761a3a', class: 'dda-header' }, h("div", { key: '971e102a55c77ec014c622e30b39e8f6fa95c370', class: "dda-head-logo" }, h("a", { key: '6757fa31aae9e45f318697b69d28b546da11159c', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.firstLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.firstLogoHref) : ''), class: "govt-logo" }, h("img", { key: 'a5c8833849236777cfa78bdb44a15888d81ebe6b', class: "logo-white", src: this.firstLogoWhiteSrc, alt: `${this.firstLogoAlt} White` }), h("img", { key: '21fa8096c11780cbec19f19d1f63f9d4a13a0318', class: "logo-colored", src: this.firstLogoSrc, alt: this.firstLogoAlt })), h("a", { key: '1ac6a9058edbb62416b86dca33608ef8996e58b1', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.secondLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.secondLogoHref) : ''), class: "entt-logo" }, h("img", { key: 'e05bdf61cf1f17af4626fa83ad1b6028c7c81a59', class: "logo-white", src: this.secondLogoWhiteSrc, alt: `${this.secondLogoAlt} White` }), h("img", { key: '3910bceaa2c18c9b282a3e3f7c60faf869d47fae', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }))), h("div", { key: '461e1fd23356c18774be40ea282459b42f2691d3', class: "dda-menu-container" }, h("div", { key: '345eda9d0b3a68dfee74aeafa3f22f14bcc3f634', class: "dda-main-navigation" }, h("div", { key: '3bd8dffbda85e83640e8f2c96bf486142dfdff4f', class: `dda-menu-overley ${this.isMenuOpen ? 'show-overley' : ''}`, onClick: this.toggleMenu }), h("div", { key: '9bc8b4eca9dd792d7fb38c6b28c9ccca71819509', class: "hamburger-menu", onClick: this.toggleMenu }, h("dda-tooltip", { key: 'aecac2047e399458ed27721e453958379da37729', title_text: this.hamburger_menu_button_name, position: "top", class: "dda-d-block" }, h("button", { key: '1c99b38cfe929568d1a8c59a198afb36a5fc03a8', type: "button", class: "hamburger-menu-btn", name: this.hamburger_menu_button_name }, h("span", { key: '73a7fa9fca06df34eb1097bab60c90e0a8266812', class: "hamburger-line" }), h("span", { key: '2884ca405ab7168c6740b051284cdefd1c6b89aa', class: "hamburger-menu-text" }, this.hamburger_menu_button_name)))), h("div", { key: 'b1d1982a8efa8e647011e4cc3c61f4b44a34eaff', class: "dda-sidemenu", style: { display: this.isMenuOpen ? 'block' : '', insetInlineStart: this.isMenuOpen ? '0px' : '' } }, h("div", { key: '54e31cecc2fb10b0eccf43f953954bc5b3dbcc3b', class: "dda-sidemenu-content" }, h("h6", { key: 'd3afb136281500a34d90816f17e6d2283ff255b1', class: "dda-side-nav-title" }, this.sideMainMenuTitle), h("ul", { key: '9e699de177dd5c3dfdb1fe3b6000fc1bb648d73d', class: "main_side_menu" }, sideMenuItems.map((menu, index) => {
             const currentIndex = `menu-${index}`;
             return (h("li", { key: currentIndex, id: `header_${menu.label}` }, h("a", {
                 // href={menu.href}
-                href: this.useNavigator == "true" ? 'javascript:void(0)' : menu.href, class: menu.subMenu && menu.subMenu.length > 0 ? 'showSub' : '', onClick: (e) => {
+                href: this.useNavigator == 'true' ? 'javascript:void(0)' : menu.href, class: menu.subMenu && menu.subMenu.length > 0 ? 'showSub' : '', onClick: e => {
                     if (menu.subMenu && menu.subMenu.length > 0) {
                         e.preventDefault();
                         const current = e.currentTarget;
@@ -288,19 +300,19 @@ const DdaHeader$1 = /*@__PURE__*/ proxyCustomElement(class DdaHeader extends H {
                         this.toggleSidebarSubMenu(currentIndex);
                     }
                     else {
-                        if (this.useNavigator == "true") {
+                        if (this.useNavigator == 'true') {
                             this.navigatorClick.emit(menu.href);
                         }
                     }
                 }
             }, menu.label), this.renderSubMenu(menu.subMenu, currentIndex)));
-        })), this.hideOtherMenu == false && h("p", { key: '7b948023a69c525a925ec5ed1e16be53247824f8', class: "dda-side-nav-title" }, this.sideOtherMenuTitle), !this.hideOtherMenu && (h("ul", { key: '24b3239603e6e63bbc3b1466a39b3ff0fa980b56', class: "main_side_menu" }, this.parsedOtherMenuItems.map((itemlist, index) => (h("li", { key: `other-${index}` }, h("a", { href: this.useNavigator == "true" ? 'javascript:void(0)' : itemlist.href, onClick: () => this.useNavigator == "true" ? this.navigatorClick.emit(itemlist.href) : "" }, itemlist.label))))))), h("div", { key: 'a642a9bd5a19ae73f30ad304d9a3ffa3ebfc6bfa', class: "dda-sidemenu-bottom" }, h("div", { key: 'b9124e37e11679ca02a7aed1aff2d5d3f40d55c7', class: "dda-sidemenu-gov-logo" }, h("a", { key: '5cdced20b8e20795023c21f26be09738b301fb49', href: this.useNavigator == "true" ? 'javascript:void(0)' : this.firstLogoHref, onClick: () => this.useNavigator == "true" ? this.navigatorClick.emit(this.firstLogoHref) : "", class: "govt-logo dda-mb-2" }, h("img", { key: 'e35667da5a2ab4b16964a3a8ba9bd36b58af5754', class: "", src: this.firstLogoSrc, alt: this.firstLogoAlt }))), h("div", { key: '29d24a79ecad7192986aff73cfe40685e4fd234a', class: "dda-toolbar-menu-sidemenu" }, h("ul", { key: 'd27d6549ca3c36b6a41889b495ececdfb880fe83' }, this.accessibility_button_id && (h("li", { key: '33e38e43a1280d5639503f5132589528705888d2' }, h("button", { key: '0bd39c2522d90a54791cff5c7970e50f08b43e9a', name: this.toggle_accessibility_button_name, class: "tool-btn accessibility-btn", type: "button", onClick: this.toggleMobileAccessibilty, id: this.accessibility_button_id }, h("i", { key: '4cf9cc02d768ebc4cad0cca3f0d335bd8573ea0b', class: this.accessibility_button_icon_family }, this.accessibility_button_icon_name), h("span", { key: 'e6abfd1c4197a5983382bb71fa668da9b30a68fe', class: "visually-hidden" }, this.accessibility_button_text)))), this.language_text && (h("li", { key: 'f3200292e65f25625e0967fb163d622c164b1c3a' }, h("button", { key: '0b93e773b7ce02deda37a52e2a97bbe223d15ee0', name: this.language_button_name, class: "tool-btn", type: "button", onClick: this.languagehandler }, this.language_text))), this.loginText && (h("li", { key: '9c373a95f9622fe5e564aac19df0dabc0d067886' }, h("dda-link-button", { key: '7e3baaca4d7e775b6dd5aeba799d104f1a32a5f4', button_color: "onsurface-secondary", start_icon: this.loginIcon, custom_class: "tool-btn", link_button_text: this.loginText, href: this.loginLink, button_shape: "circle", size: "sm" })))))), h("button", { key: '9f040d397435fd4c4d250a4d50cd22f8697eafa6', type: "button", name: this.close_menu_button_name, class: "close-btn side-nav-close-btn", "aria-label": "Close Sidebar", onClick: this.toggleMenu }, h("i", { key: '4a111ed3e872d77feba712bf436fa14a2b6816e5', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")), this.usePredesignedAccessibilityMenu ? (h("div", { class: "dda-accessibility hide-accessibility mobile-accessibility", style: { display: this.isMobileAccessibiltyOpen ? 'block' : 'none' } }, h("div", { class: "mobile-accessibility-content" }, h("div", { class: "dda-row" }, h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("p", { class: "h6 Regular dda-mb-1" }, this.contrast_title), h("form", null, h("fieldset", { class: "dda-theme-list" }, h("legend", null, h("p", { class: "body Regular dda-mb-3" }, this.contrast_description)), this.contrast_noraml_text ? (h("dda-radiobutton", { title_text: this.contrast_noraml_text, checked: true, size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "NormalThemeMobile", group_name: "themeselectionMobile", input_id: "NormalThemeMobile", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.normalContrasthandler, class: "hydrated" })) : null, this.contrast_color_blind_text ? (h("dda-radiobutton", { title_text: this.contrast_color_blind_text, checked: false, size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "ColoursBlindMobile", group_name: "themeselectionMobile", input_id: "ColoursBlindMobile", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.blindContrasthandler, class: "hydrated" })) : null, this.contrast_red_weakness_text ? (h("dda-radiobutton", { title_text: this.contrast_red_weakness_text, checked: false, size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "RedWeaknessMobile", group_name: "themeselectionMobile", input_id: "RedWeaknessMobile", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.redContrasthandler, class: "hydrated" })) : null, this.contrast_green_weakness_text ? (h("dda-radiobutton", { title_text: this.contrast_green_weakness_text, checked: false, size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "GreenWeaknessMobile", group_name: "themeselectionMobile", input_id: "GreenWeaknessMobile", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.greenContrasthandler, class: "hydrated" })) : null))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("p", { class: "h6 Regular dda-mb-1" }, this.screen_reader_title), h("p", { class: "body Regular dda-mb-3" }, this.screen_reader_description), h("div", { class: "rs_skip rsbtn rs_preserve rs_mobile", id: "readspeaker_button1" }, h("a", { rel: "nofollow", href: this.read_speaker_link, role: "button", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker", "data-rsshortcut": "play", "aria-haspopup": "menu", "data-rs-lang": "en_uk" }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "volume_up")))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("p", { class: "h6 Regular dda-mb-1" }, this.text_size_title), h("p", { class: "body Regular dda-mb-3" }, this.text_size_description), h("div", { class: "dda-d-flex dda-gap-4" }, h("dda-button", { button_color: "default-secondary", button_text: "A", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }), h("dda-button", { button_color: "default-secondary", button_text: "A+", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }), h("dda-button", { button_color: "default-secondary", button_text: "A-", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler }))))), h("button", { type: "button", name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Accessibility", onClick: this.toggleMobileAccessibilty }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")))) : null), this.quickLinks && h("dda-header-menu", { key: '4736381c58195033efaf5d3c7157ce12d536be6f', "use-navigator": this.useNavigator, "navigator-click": this.navigatorClick, "quick-links": typeof this.quickLinks === 'string' ? this.quickLinks : JSON.stringify(this.quickLinks) })), h("div", { key: 'beb8812806d83a8cf926bf73267d3f23eaaea1d4', class: "dda-mobile-entt-logo" }, h("a", { key: 'b8b558b72c8c09f9635c07b27ff3bc5701217898', href: this.useNavigator == "true" ? 'javascript:void(0)' : this.secondLogoHref, onClick: () => this.useNavigator == "true" ? this.navigatorClick.emit(this.secondLogoHref) : "", class: "entt-logo" }, h("img", { key: '4656e0909c8a1446eb072de7d7561c853df2fb33', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: 'af50f82c652803eadd9ac776ee848a8b3e24c07c', class: "logo-white", src: this.secondLogoWhiteSrc, alt: this.secondLogoAlt }))), h("div", { key: 'd5f83006305e5a527814157c5e5c135dce5aeb98', class: "dda-mobile-search" }, this.mobileMenuSearchId && (h("a", { key: '33f75a6cb279429c1645536e8f83722d53afec60', href: this.useNavigator == "true" ? 'javascript:void(0)' : this.mobileMenuSearchUrl, onClick: () => this.useNavigator == "true" ? this.navigatorClick.emit(this.mobileMenuSearchUrl) : "", class: "tool-btn", id: this.mobileMenuSearchId }, h("span", { key: '684d7dd95b924b6efb81d2f5fd6b50e3ececd3e9', class: "visualy-hidden" }, this.searchText || 'Search'), h("i", { key: '69599948bfc6e5483b23d3c2b3146fc67ed8c1e2', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search")))), h("div", { key: '1a16ea763aa52de38c7071215d0aceea5d6be0d4', class: "dda-toolbar-menu" }, h("ul", { key: '49c96b4848f5f822f77486ba220bd9a3e4a80e49' }, this.search_input_name && (h("li", { key: 'bba9b19c0b22366f10ca0964e2e7d1350e528ab8' }, h("dda-tooltip", { key: '9d95f12f5c70c353ea30a5ea4abf9e9df81753e1', title_text: this.search_tooltip || 'Search', description: "", position: "top" }, h("div", { key: 'a5f99f07a404f26affad4e59700cb20809ddb0bc', class: "dda-search dda-header-search" }, h("label", { key: '32fde277170ffa38654412dd37c8f98979fa4ccb', id: "ddaSearch-label", class: "visualy-hidden", "aria-hidden": "true" }, this.searchText || 'Search'), h("i", { key: 'e6a8bcadcd18d5b5e0366610d0ee28a8043e828a', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search"), h("dda-input", { key: 'afd257ca8b019923378b0b86755d20c654b060a9', placeholder: this.search_input_placeholder || 'Search', type: "text", input_id: "ddaSearch", value: this.search_value, input_name: this.search_input_name, aria_label: "input", input_role: "search", error_message: "Error text", validation_type: "normal", validation_id: "validationId", input_status: "normal", size: "default", custom_class: "dda-header-search-input tool-btn", component_mode: "",
+        })), this.hideOtherMenu == false && h("h6", { key: 'e8a089963257075dcb92ac460d8c01109115035b', class: "dda-side-nav-title" }, this.sideOtherMenuTitle), !this.hideOtherMenu && (h("ul", { key: '6c1146ecd2ec22c528ccc950655d0ff68f6d8d9c', class: "main_side_menu" }, this.parsedOtherMenuItems.map((itemlist, index) => (h("li", { key: `other-${index}` }, h("a", { href: this.useNavigator == 'true' ? 'javascript:void(0)' : itemlist.href, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(itemlist.href) : '') }, itemlist.label))))))), h("div", { key: '22eee46a71a8b1949745f312bdc2cff5002abe38', class: "dda-sidemenu-bottom" }, h("div", { key: '732447c0c6e07ee78afb06e80757721f5dc11e5b', class: "dda-sidemenu-gov-logo" }, h("a", { key: '9370ac9680b5091a886682ae63da1065247b3bbd', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.firstLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.firstLogoHref) : ''), class: "govt-logo dda-mb-2" }, h("img", { key: '4ddc8180372e059717c92c09729c9a97e9de5fa5', class: "", src: this.firstLogoSrc, alt: this.firstLogoAlt }))), h("div", { key: 'd5914d8167adc1d63e1cafdcc2339e8afcc6bee3', class: "dda-toolbar-menu-sidemenu" }, h("ul", { key: 'e7edddffc2b0b97bfab95bf25f20356fca6f362b' }, this.accessibility_button_id && (h("li", { key: 'a89c92d5c17031a591d7ea103b7a6af68d85aa55' }, h("button", { key: 'b31628dcbc66c74aee46890b2d4b74133b9db91d', name: this.toggle_accessibility_button_name, class: "tool-btn accessibility-btn", type: "button", onClick: this.toggleMobileAccessibilty, id: this.accessibility_button_id }, h("i", { key: 'f9822507c8ef644ec69387b9934f25aa24c2b569', class: this.accessibility_button_icon_family }, this.accessibility_button_icon_name), h("span", { key: '311ef8ff33c0f7a2fad5074d688f450090036626', class: "visually-hidden" }, this.accessibility_button_text)))), this.language_text && (h("li", { key: '2b51194553515bd3f27f027e7702a33dfe423c47' }, h("button", { key: 'b151d47feaf27abcc8b88781641205d50b12b6f7', name: this.language_button_name, class: "tool-btn", type: "button", onClick: this.languagehandler }, this.language_text))), this.loginText && (h("li", { key: 'c6631083330da8be5dabdb1637c7f92e17c578dc' }, h("dda-link-button", { key: 'f5f233738ce7408c9387d90dc0af5d7064037b72', button_color: "onsurface-secondary", start_icon: this.loginIcon, custom_class: "tool-btn", link_button_text: this.loginText, onClick: this.toggleLogin, href: this.loginLink, button_shape: "circle", size: "sm" })))))), h("button", { key: '5fd9ea00c8d6684225eb8dbca2c6b5bf211d1bf1', type: "button", name: this.close_menu_button_name, class: "close-btn side-nav-close-btn", "aria-label": "Close Sidebar", onClick: this.toggleMenu }, h("i", { key: 'b5be5b1bd68cea8f629069055cc256a043caf541', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")), this.usePredesignedAccessibilityMenu ? (h("div", { class: "dda-accessibility hide-accessibility mobile-accessibility", style: { display: this.isMobileAccessibiltyOpen ? 'block' : 'none' } }, h("div", { class: "mobile-accessibility-content" }, h("div", { class: "dda-row" }, h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.contrast_title), h("form", null, h("fieldset", { class: "dda-theme-list" }, h("legend", null, h("p", { class: "body Regular dda-mb-3" }, this.contrast_description)), this.contrast_noraml_text ? (h("dda-radiobutton", { title_text: this.contrast_noraml_text, checked: this.selected_contrast == "normal", size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "NormalThemeMobile", group_name: "themeselectionMobile", input_id: "NormalThemeMobile", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.normalContrasthandler, class: "hydrated" })) : null, this.contrast_color_blind_text ? (h("dda-radiobutton", { title_text: this.contrast_color_blind_text, checked: this.selected_contrast == "colorblind", size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "ColoursBlindMobile", group_name: "themeselectionMobile", input_id: "ColoursBlindMobile", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.blindContrasthandler, class: "hydrated" })) : null, this.contrast_red_weakness_text ? (h("dda-radiobutton", { title_text: this.contrast_red_weakness_text, checked: this.selected_contrast == "redweakness", size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "RedWeaknessMobile", group_name: "themeselectionMobile", input_id: "RedWeaknessMobile", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.redContrasthandler, class: "hydrated" })) : null, this.contrast_green_weakness_text ? (h("dda-radiobutton", { title_text: this.contrast_green_weakness_text, checked: this.selected_contrast == "greenweakness", size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "GreenWeaknessMobile", group_name: "themeselectionMobile", input_id: "GreenWeaknessMobile", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.greenContrasthandler, class: "hydrated" })) : null))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.screen_reader_title), h("p", { class: "body Regular dda-mb-3" }, this.screen_reader_description), h("div", { class: "rs_skip rsbtn rs_preserve rs_mobile", id: "readspeaker_button1" }, h("a", { rel: "nofollow", href: this.read_speaker_link, role: "button", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker", "data-rsshortcut": "play", "aria-haspopup": "menu", "data-rs-lang": "en_uk" }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "volume_up")))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.text_size_title), h("p", { class: "body Regular dda-mb-3" }, this.text_size_description), h("div", { class: "dda-d-flex dda-gap-4" }, h("dda-button", { button_color: this.selected_text_size == "normal" ? "default-primary" : "default-secondary", button_text: "A", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }), h("dda-button", { button_color: this.selected_text_size == "large" ? "default-primary" : "default-secondary", button_text: "A+", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }), h("dda-button", { button_color: this.selected_text_size == "small" ? "default-primary" : "default-secondary", button_text: "A-", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler }))))), h("button", { type: "button", name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Accessibility", onClick: this.toggleMobileAccessibilty }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")))) : null), this.quickLinks && (h("dda-header-menu", { key: 'fdbcfe6ab93ebff747cf38c75b58c321355b9c53', "use-navigator": this.useNavigator, "navigator-click": this.navigatorClick, "quick-links": typeof this.quickLinks === 'string' ? this.quickLinks : JSON.stringify(this.quickLinks) }))), h("div", { key: '465f1028ecdde4f35fef3ceed0940c6945a7ffc6', class: "dda-mobile-entt-logo" }, h("a", { key: 'fe1467675d5bbc3f8c34dd56de2e5706c7dd49c3', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.secondLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.secondLogoHref) : ''), class: "entt-logo" }, h("img", { key: '61599183bdf54c1276b2b2773a4f56098f075c54', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: '4283106fa7ea1946369bffab4991ce2509eea277', class: "logo-white", src: this.secondLogoWhiteSrc, alt: this.secondLogoAlt }))), h("div", { key: 'da2f3a3f8804664266a30e85b53a09eb0dcaea27', class: "dda-mobile-search" }, this.mobileMenuSearchId && (h("a", { key: '84a3d68be0af96516eaa4a8eaf49200296907326', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.mobileMenuSearchUrl, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.mobileMenuSearchUrl) : ''), class: "tool-btn", id: this.mobileMenuSearchId }, h("span", { key: 'd18824918b0f3f2519b906aeefc5432bab6fc3a3', class: "visualy-hidden" }, this.searchText || 'Search'), h("i", { key: 'e946965ceb576074acd2a5cfda084fb5fd136684', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search")))), h("div", { key: '128845fd6b5b23b536c6d82badff6d6eb30c2940', class: "dda-toolbar-menu" }, h("ul", { key: '505b5230f451c2985485d3c2c36d4afe5eda85e8' }, this.search_input_name && (h("li", { key: 'a3a2b1ec44f00a78ccc136d869c99ade2618f3af' }, h("dda-tooltip", { key: '3892729103daadc7d8374748f919a0e3412dd204', title_text: this.search_tooltip || 'Search', description: "", position: "top" }, h("div", { key: '8ddcf9225a880f595b1b235bab2fc407398efb6a', class: "dda-search dda-header-search" }, h("label", { key: 'aace4820df1ab0d1289ba85bb6e269bd5b066513', id: "ddaSearch-label", class: "visualy-hidden", "aria-hidden": "true" }, this.searchText || 'Search'), h("i", { key: '90c3085af23a8984aa6dac13f07936e34b56bb29', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "search"), h("dda-input", { key: 'aa3ad19ddce4a1248155fd1a7aaab1b10a9cdecb', placeholder: this.search_input_placeholder || 'Search', type: "text", input_id: "ddaSearch", value: this.search_value, input_name: this.search_input_name, aria_label: "input", input_role: "search", error_message: "Error text", validation_type: "normal", validation_id: "validationId", input_status: "normal", size: "default", custom_class: "dda-header-search-input tool-btn", component_mode: "",
             // handleInput={(event) => console.log(event.target.value,"")}
-            onKeyPress: (e) => {
+            onKeyPress: e => {
                 if (e.key === 'Enter') {
                     this.searchhandler(e.target.value); // Pass the value to the searchhandler
                 }
-            } }), h("span", { key: 'd44cddc5d9e3793796a9a8cb00e154f248e3581b', id: "validationId", class: "visually-hidden" }, "Enter keywords to search the site."))))), this.accessibility_button_id && (h("li", { key: '2cf3507ffe30c6c99c3b08082c77444c532a03a6' }, h("dda-tooltip", { key: '4b97fa1441c5940646594635cee3bcefcd592190', title_text: this.accessibility_tooltip, position: "top" }, h("button", { key: '14929e6bb35d6e0779111a425140cb01e977ccd0', name: this.toggle_accessibility_button_name, class: "tool-btn dda-btn btn-color-onsurface-secondary btn-size-sm btn-shape-circle accessibility-btn", type: "button", onClick: this.toggleAccessibilty, id: this.accessibility_button_id }, h("i", { key: 'ae95b4654eeac4124376f17d3b57ced122855078', class: this.accessibility_button_icon_family }, this.accessibility_button_icon_name), h("span", { key: '225b99faf5b704657c89af566a88be228e8f965e', class: "visually-hidden" }, this.accessibility_button_text))), this.usePredesignedAccessibilityMenu ? (h("div", { class: "dda-accessibility-wrap" }, h("div", { class: "dda-accessibility hide-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, h("div", { class: "dda-row" }, h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("p", { class: "h6 Regular dda-mb-1" }, this.contrast_title), h("form", null, h("fieldset", { class: "dda-theme-list" }, h("legend", null, h("p", { class: "body Regular dda-mb-3" }, this.contrast_description)), this.contrast_noraml_text ? (h("dda-radiobutton", { title_text: this.contrast_noraml_text, checked: true, size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "NormalTheme", group_name: "themeselection", input_id: "NormalTheme", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.normalContrasthandler, class: "" })) : null, this.contrast_color_blind_text ? (h("dda-radiobutton", { title_text: this.contrast_color_blind_text, checked: false, size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "ColoursBlind", group_name: "themeselection", input_id: "ColoursBlind", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.blindContrasthandler, class: "hydrated" })) : null, this.contrast_red_weakness_text ? (h("dda-radiobutton", { title_text: this.contrast_red_weakness_text, checked: false, size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "RedWeakness", group_name: "themeselection", input_id: "RedWeakness", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.redContrasthandler, class: "hydrated" })) : null, this.contrast_green_weakness_text ? (h("dda-radiobutton", { title_text: this.contrast_green_weakness_text, checked: false, size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "GreenWeakness", group_name: "themeselection", input_id: "GreenWeakness", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.greenContrasthandler, class: "hydrated" })) : null))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("p", { class: "h6 Regular dda-mb-1" }, this.screen_reader_title), h("p", { class: "body Regular dda-mb-3" }, this.screen_reader_description), h("div", { class: "rs_skip rsbtn rs_preserve rs_mobile", id: "readspeaker_button1" }, h("a", { rel: "nofollow", href: this.read_speaker_link, role: "button", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker", "data-rsshortcut": "play", "aria-haspopup": "menu", "data-rs-lang": "en_uk" }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "volume_up")))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("p", { class: "h6 Regular dda-mb-1" }, this.text_size_title), h("p", { class: "body Regular dda-mb-3" }, this.text_size_description), h("div", { class: "dda-d-flex dda-gap-4" }, h("dda-button", { button_color: "default-secondary", button_text: "A", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }), h("dda-button", { button_color: "default-secondary", button_text: "A+", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }), h("dda-button", { button_color: "default-secondary", button_text: "A-", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler })))), h("button", { type: "button", name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Sidebar", onClick: this.toggleAccessibilty }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close"))))) : null)), this.language_text && (h("li", { key: 'cc83c55c7b7cf92ebbce12b3fc2d8e05fb2e12c4' }, h("dda-tooltip", { key: 'fd716aff1505d038a7246f093ad684714e77bf0d', title_text: this.language_tooltip, position: "top" }, h("dda-button", { key: '4aeab8aa6141647c0c369735ee5735d1fea1710a', button_color: "onsurface-secondary", custom_class: "tool-btn", button_text: this.language_text, button_shape: "circle", size: "sm", onClick: this.languagehandler })))), this.loginText && (h("li", { key: '1a58f54d9968152da48bc3735c947c87d2c5bf38' }, h("dda-tooltip", { key: '3efdccdf6473811c3a800fe4b3ab833c7418dac5', title_text: this.login_tooltip, position: "top" }, h("dda-link-button", { key: '58280c0ce6c667bb10eab0ecdc85d9350d26edec', button_color: "onsurface-secondary", start_icon: this.loginIcon, custom_class: "tool-btn login-button", link_button_text: this.loginText, href: this.loginLink, button_shape: "circle", size: "sm" })))))))));
+            } }), h("span", { key: '4e2685a5599d65fc32e0f0c22c99652fd18e5c23', id: "validationId", class: "visually-hidden" }, "Enter keywords to search the site."))))), this.accessibility_button_id && (h("li", { key: 'f5299b335fac79b0e797b566fd2c2da16aa596a1' }, h("dda-tooltip", { key: '4ddb7685688b2bb9d512d7f1ba05e8c14259da7d', title_text: this.accessibility_tooltip, position: "top" }, h("button", { key: '031fa52d02ffd1767757d2c8c1dc2058ad7884df', name: this.toggle_accessibility_button_name, class: "tool-btn dda-btn btn-color-onsurface-secondary btn-size-sm btn-shape-circle accessibility-btn", type: "button", onClick: this.toggleAccessibilty, id: this.accessibility_button_id }, h("i", { key: '2d5c9c677dffe41a62d5bfe1ab057aef53eb80ab', class: this.accessibility_button_icon_family }, this.accessibility_button_icon_name), h("span", { key: '06b73b92e55c757827e9b18f5247e14f11abcdd0', class: "visually-hidden" }, this.accessibility_button_text))), this.usePredesignedAccessibilityMenu ? (h("div", { class: "dda-accessibility-wrap" }, h("div", { class: "dda-accessibility hide-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, h("div", { class: "dda-row" }, h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.contrast_title), h("form", null, h("fieldset", { class: "dda-theme-list" }, h("legend", null, h("p", { class: "body Regular dda-mb-3" }, this.contrast_description)), this.contrast_noraml_text ? (h("dda-radiobutton", { title_text: this.contrast_noraml_text, checked: this.selected_contrast == "normal", size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "NormalTheme", group_name: "themeselection", input_id: "NormalTheme", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.normalContrasthandler, class: "" })) : null, this.contrast_color_blind_text ? (h("dda-radiobutton", { title_text: this.contrast_color_blind_text, checked: this.selected_contrast == "colorblind", size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "ColoursBlind", group_name: "themeselection", input_id: "ColoursBlind", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.blindContrasthandler, class: "hydrated" })) : null, this.contrast_red_weakness_text ? (h("dda-radiobutton", { title_text: this.contrast_red_weakness_text, checked: this.selected_contrast == "redweakness", size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "RedWeakness", group_name: "themeselection", input_id: "RedWeakness", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.redContrasthandler, class: "hydrated" })) : null, this.contrast_green_weakness_text ? (h("dda-radiobutton", { title_text: this.contrast_green_weakness_text, checked: this.selected_contrast == "greenweakness", size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "GreenWeakness", group_name: "themeselection", input_id: "GreenWeakness", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.greenContrasthandler, class: "hydrated" })) : null))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.screen_reader_title), h("p", { class: "body Regular dda-mb-3" }, this.screen_reader_description), h("div", { class: "rs_skip rsbtn rs_preserve rs_mobile", id: "readspeaker_button1" }, h("a", { rel: "nofollow", href: this.read_speaker_link, role: "button", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker", "data-rsshortcut": "play", "aria-haspopup": "menu", "data-rs-lang": "en_uk" }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "volume_up")))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.text_size_title), h("p", { class: "body Regular dda-mb-3" }, this.text_size_description), h("div", { class: "dda-d-flex dda-gap-4" }, h("dda-button", { button_color: this.selected_text_size == "normal" ? "default-primary" : "default-secondary", button_text: "A", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }), h("dda-button", { button_color: this.selected_text_size == "large" ? "default-primary" : "default-secondary", button_text: "A+", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }), h("dda-button", { button_color: this.selected_text_size == "small" ? "default-primary" : "default-secondary", button_text: "A-", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler })))), h("button", { type: "button", name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Sidebar", onClick: this.toggleAccessibilty }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close"))))) : null)), this.language_text && (h("li", { key: '34f7535b38286b1053442d5c9d85dae9c5f99b03' }, h("dda-tooltip", { key: 'c2bcf53cdf5671c0797bdf1244fbcf3e3c794e7e', title_text: this.language_tooltip, position: "top" }, h("dda-button", { key: '83a9660dca131f30c2a5905c2744351cfd2decf5', button_color: "onsurface-secondary", custom_class: "tool-btn", button_text: this.language_text, button_shape: "circle", size: "sm", onClick: this.languagehandler })))), this.loginText && (h("li", { key: 'df36c7a1b07a4541b3a3d9252fee89d00c9a59a3' }, h("dda-tooltip", { key: '7e354257b66f1baae6a5b295f72ee7390a8837fa', title_text: this.login_tooltip, position: "top" }, h("dda-link-button", { key: '646861568427a1bc3134aa59a205b8ca5e1f9583', button_color: "onsurface-secondary", start_icon: this.loginIcon, custom_class: "tool-btn login-button", link_button_text: this.loginText, onClick: this.toggleLogin, href: this.loginLink, button_shape: "circle", size: "sm" })))))))));
     }
     static get style() { return DdaHeaderStyle0; }
 }, [0, "dda-header", {
@@ -350,6 +362,8 @@ const DdaHeader$1 = /*@__PURE__*/ proxyCustomElement(class DdaHeader extends H {
         "contrast_color_blind_text": [1],
         "contrast_red_weakness_text": [1],
         "contrast_green_weakness_text": [1],
+        "selected_contrast": [1],
+        "selected_text_size": [1],
         "screen_reader_title": [1],
         "screen_reader_description": [1],
         "text_size_title": [1],