@dubai-design-system/components-js 3.12.2-alpha.0 → 3.12.3

package/dist/dda/p-a3f284bc.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as s,h as e,H as i,g as a}from"./p-1b339a0a.js";const h=class{constructor(e){t(this,e);this.inputChanged=s(this,"inputChanged",7);this.onChanged=s(this,"onChanged",7);this.buttonClicked=s(this,"buttonClicked",7);this.inputBlurred=s(this,"inputBlurred",7);this.onBlurred=s(this,"onBlurred",7);this.placeholder="Search";this.size="sm";this.show_button=false;this.has_error=false;this.custom_class="";this.hasInputValue=false;this.internalValue="";this.handleInput=t=>{const s=t.target;this.hasInputValue=s.value.length>0};this.handleKeyDown=t=>{if(t.key==="Enter"){const s=t.target;console.log("Search input value (Enter):",s.value)}this.el.dispatchEvent(new KeyboardEvent("keydown",{bubbles:true,composed:true,key:t.key,code:t.code,ctrlKey:t.ctrlKey,shiftKey:t.shiftKey,altKey:t.altKey,metaKey:t.metaKey,repeat:t.repeat}))};this.handleSearchClick=()=>{const t=this.el.querySelector(`#${this.input_id}`);if(t){this.buttonClicked.emit(this.internalValue||this.value)}}}watchValue(t){this.internalValue=t||"";this.hasInputValue=!!this.internalValue}componentWillLoad(){this.internalValue=this.value||"";this.hasInputValue=!!this.internalValue}clearInput(){if(!this.input_id)return;const t=this.el.querySelector(`#${this.input_id}`);if(t){t.value="";this.internalValue="";this.hasInputValue=false;this.onChanged.emit("");t.focus()}}async reset(){this.internalValue="";this.hasInputValue=false;this.onChanged.emit("")}async setValue(t){this.internalValue=t;this.hasInputValue=!!t;this.onChanged.emit(t)}render(){return e(i,{key:"e23b6f258bc2699153dbe74a0b0a35394a884c09"},e("div",{key:"bb778d44ef2b22c05a6d516aeac4fbf7a37737c3",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":""}`},this.label&&e("label",{key:"c6280620a3f1b7742d3fb04157b570e5dd33ca60",htmlFor:this.button_id,class:"dda-input-label"},this.label),e("div",{key:"5b1a38c75b2d281aefba77de7115dfb88314e4ad",class:"dda-search-area dda-search-action"},e("i",{key:"ccdd26425e32e370bfb3547bf5f0915d8de4182f",class:"material-icons icon-left","aria-hidden":"true"},"search"),e("input",{key:"a48aedceda06d6f69c6ffcac840d9dcecc720018",name:this.search_input_name,"aria-label":this.aria_label,id:this.input_id,value:this.internalValue,type:"text",class:`dda-input-field dda-search-field ${this.show_button?"has-search-button":""}`,placeholder:this.placeholder,onKeyDown:this.handleKeyDown,onInput:t=>{this.internalValue=t.target.value;this.hasInputValue=!!this.internalValue;this.inputChanged.emit(t);this.onChanged.emit(t);this.el.dispatchEvent(new InputEvent("input",{bubbles:true,composed:true,data:t.data,inputType:t.inputType,isComposing:t.isComposing}))},onBlur:t=>{const s=t.target.value.trim();this.inputBlurred.emit({name:this.search_input_name,value:s});this.onBlurred.emit(s);this.el.dispatchEvent(new FocusEvent("blur",{bubbles:true,composed:true,relatedTarget:t.relatedTarget}))},onFocus:t=>{this.el.dispatchEvent(new FocusEvent("focus",{bubbles:true,composed:true,relatedTarget:t.relatedTarget}))}}),e("div",{key:"8ffaa5e058389cf65ad70ab29676748d667a8a68",class:"dda-search-btngroup"},this.hasInputValue&&e("button",{key:"c2190c168ad754cb93b60da8d568bb62a89e29de",name:this.close_button_name,"aria-label":this.button_aria_label,id:this.button_id,type:"button",class:"dda-search-close-icon",onClick:()=>this.clearInput()},e("i",{key:"94b4644da93e67679ee2586853977bd7d14f5045",class:"material-icons material-symbols-outlined","aria-hidden":"true"},"close")),this.show_button&&e("button",{key:"5dce491dfeecc09dd4d79bce8dc637c163986749",name:this.search_button_name,type:"button",class:"dda-btn btn-color-default-primary dda-btn-sm",onClick:this.handleSearchClick},this.button_text))),this.helper_text&&e("span",{key:"e0f361ea19e1b30c903b1dfc21d9ae4bd84e7907",class:"dda-helper-text",id:this.validation_id},this.helper_text),this.error_message&&e("span",{key:"ae3eaeb103f2923041b589c9cd3ea67a97752f5b",class:"dda-error-message",id:this.validation_id},this.error_message)))}get el(){return a(this)}static get watchers(){return{value:["watchValue"]}}};export{h as dda_search_input};
+//# sourceMappingURL=p-a3f284bc.entry.js.map

package/dist/dda/p-a3f284bc.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DdaSearchInput","constructor","hostRef","this","placeholder","size","show_button","has_error","custom_class","hasInputValue","internalValue","handleInput","event","target","value","length","handleKeyDown","key","console","log","el","dispatchEvent","KeyboardEvent","bubbles","composed","code","ctrlKey","shiftKey","altKey","metaKey","repeat","handleSearchClick","input","querySelector","input_id","buttonClicked","emit","watchValue","newValue","componentWillLoad","clearInput","onChanged","focus","reset","setValue","val","render","h","Host","class","component_mode","input_status","label","htmlFor","button_id","name","search_input_name","aria_label","id","type","onKeyDown","onInput","inputChanged","InputEvent","data","inputType","isComposing","onBlur","trim","inputBlurred","onBlurred","FocusEvent","relatedTarget","onFocus","close_button_name","button_aria_label","onClick","search_button_name","button_text","helper_text","validation_id","error_message"],"sources":["src/components/dda-search-input/dda-search-input.tsx"],"sourcesContent":["import { Component, Prop, h, Host, Element, State, Event, EventEmitter, Watch, Method } 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() onChanged: EventEmitter<any>;\r\n\r\n  @Event() buttonClicked: EventEmitter<any>;\r\n  @Event() inputBlurred: EventEmitter<{ name: string; value: string }>;\r\n  @Event() onBlurred: EventEmitter<any>;\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    this.el.dispatchEvent(\r\n      new KeyboardEvent('keydown', {\r\n        bubbles: true,\r\n        composed: true,\r\n        key: event.key,\r\n        code: event.code,\r\n        ctrlKey: event.ctrlKey,\r\n        shiftKey: event.shiftKey,\r\n        altKey: event.altKey,\r\n        metaKey: event.metaKey,\r\n        repeat: event.repeat,\r\n      }),\r\n    );\r\n  };\r\n\r\n  @Watch('value')\r\n  watchValue(newValue: string) {\r\n    this.internalValue = newValue || '';\r\n    this.hasInputValue = !!this.internalValue;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalValue = this.value || '';\r\n    this.hasInputValue = !!this.internalValue;\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      this.buttonClicked.emit(this.internalValue || this.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.internalValue = '';\r\n      this.hasInputValue = false;\r\n      // this.inputChanged.emit('');\r\n      this.onChanged.emit('');\r\n      input.focus();\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async reset() {\r\n    this.internalValue = '';\r\n    this.hasInputValue = false;\r\n    // this.inputChanged.emit('');\r\n    this.onChanged.emit('');\r\n  }\r\n\r\n  @Method()\r\n  async setValue(val: string) {\r\n    this.internalValue = val;\r\n    this.hasInputValue = !!val;\r\n    // this.inputChanged.emit(val);\r\n    this.onChanged.emit(val);\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}\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.hasInputValue = !!this.internalValue;\r\n                this.inputChanged.emit(event);\r\n                this.onChanged.emit(event);\r\n                this.el.dispatchEvent(\r\n                  new InputEvent('input', {\r\n                    bubbles: true,\r\n                    composed: true,\r\n                    data: event.data,\r\n                    inputType: event.inputType,\r\n                    isComposing: event.isComposing,\r\n                  }),\r\n                );\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                this.onBlurred.emit(value);\r\n                this.el.dispatchEvent(\r\n                  new FocusEvent('blur', {\r\n                    bubbles: true,\r\n                    composed: true,\r\n                    relatedTarget: event.relatedTarget,\r\n                  }),\r\n                );\r\n              }}\r\n              onFocus={(event: FocusEvent) => {\r\n                this.el.dispatchEvent(\r\n                  new FocusEvent('focus', {\r\n                    bubbles: true,\r\n                    composed: true,\r\n                    relatedTarget: event.relatedTarget,\r\n                  }),\r\n                );\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"],"mappings":"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","ignoreList":[]}

package/dist/dda/p-d93f2102.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as s,H as e,g as i}from"./p-1b339a0a.js";const d=class{constructor(s){t(this,s);this.selected_currency="USD";this.is_focused=false;this.custom_class="";this.isCurrencyDropdownOpen=false;this.handleOutsideClick=t=>{if(!this.hostElement.contains(t.target)){this.isCurrencyDropdownOpen=false}}}connectedCallback(){document.addEventListener("click",this.handleOutsideClick)}disconnectedCallback(){document.removeEventListener("click",this.handleOutsideClick)}handleInput(t){const s=t.target;const e=s.value.replace(/[^0-9.]/g,"");s.value=e;this.el.dispatchEvent(new InputEvent("input",{bubbles:true,composed:true,data:t.data,inputType:t.inputType,isComposing:t.isComposing}))}handleFocus(){this.is_focused=true}handleBlur(){this.is_focused=false}toggleCurrencyDropdown(){this.isCurrencyDropdownOpen=!this.isCurrencyDropdownOpen;this.handleFocus();this.handleBlur()}selectCurrency(t){this.selected_currency=t;this.isCurrencyDropdownOpen=false}get parsedCurrencies(){try{return JSON.parse(this.currencies)}catch(t){return[]}}async setValue(t){this.value=t}async getValue(){return this.value||""}render(){const t=["dda-input-container",this.validation_type?`dda-validation-${this.validation_type}`:"",this.size?`dda-input-size-${this.size}`:"",this.input_status?`dda-input-${this.input_status}`:"",this.is_focused?"dda-input-focus":"",this.error_message?"dda-error-message":"",this.custom_class?`${this.custom_class}`:"",this.component_mode].filter(Boolean).join(" ");return s(e,{key:"91def39d4869053ffb52d63279a504c0fd7e03e1",ref:t=>this.hostElement=t},s("div",{key:"bf83501237b86db00c05fb71d18f2a3d9cd13e11",class:t},this.label&&s("label",{key:"b6ca1e8a6bc9ad27292f7fb8f94d86fddc6d29d6",htmlFor:this.input_id,class:"dda-input-label"},this.label),s("div",{key:"f6b5193b6bf159272e7d20d375820698ea3f5a60",class:"dda-input-field-group dda-number-field"},s("input",{key:"d9369bd8021d0bf6af8870530d47718211e8360f",id:this.input_id,name:this.input_name,"aria-label":this.aria_label,type:"number",placeholder:this.placeholder,value:this.value,pattern:"[0-9]*",onInput:t=>this.handleInput(t),onFocus:this.handleFocus.bind(this),onBlur:this.handleBlur.bind(this),class:"dda-field-group-input"}),s("div",{key:"4dc2a7224754217edf78619ac40399c21634556d",class:"dda-input-dropdown-btn"},s("button",{key:"76047ef680f600fb74803e815669eba9a6dbb21e",name:this.toggle_button_name,type:"button",class:"dda-dropdown-select",onClick:()=>this.toggleCurrencyDropdown()},this.selected_currency," ",s("i",{key:"87017c99cb3515c7122148ede366f083599abbc3",class:`material-icons`,"aria-hidden":"true"},this.isCurrencyDropdownOpen?"keyboard_arrow_up":"keyboard_arrow_down")),this.isCurrencyDropdownOpen&&s("div",{key:"0847ebded3099fcf48ac0e0a337480446f6cd255",class:"dda-input-dropdown-list"},this.parsedCurrencies.length>0?this.parsedCurrencies.map((t=>s("button",{name:this.currency_button_name,type:"button",class:`dda-input-dropdown-item ${this.selected_currency===t?"selected":""}`,onClick:()=>this.selectCurrency(t)},t))):s("div",{class:"dda-input-dropdown-item"},"No options available")))),this.helper_text&&s("span",{key:"c77a72d290e9b157bebf52e4ea0293f723c2ff3d",class:"dda-helper-text"},this.helper_text),this.error_message&&s("span",{key:"52a3c41a8907b557bb26b207ee57822e56559d99",class:"dda-error-message"},this.error_message)))}get el(){return i(this)}};export{d as dda_number_field};
+//# sourceMappingURL=p-d93f2102.entry.js.map

package/dist/dda/p-d93f2102.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DdaNumberField","constructor","hostRef","this","selected_currency","is_focused","custom_class","isCurrencyDropdownOpen","handleOutsideClick","event","hostElement","contains","target","connectedCallback","document","addEventListener","disconnectedCallback","removeEventListener","handleInput","inputElement","inputValue","value","replace","el","dispatchEvent","InputEvent","bubbles","composed","data","inputType","isComposing","handleFocus","handleBlur","toggleCurrencyDropdown","selectCurrency","currency","parsedCurrencies","JSON","parse","currencies","_a","setValue","val","getValue","render","containerClass","validation_type","size","input_status","error_message","component_mode","filter","Boolean","join","h","Host","key","ref","class","label","htmlFor","input_id","id","name","input_name","aria_label","type","placeholder","pattern","onInput","onFocus","bind","onBlur","toggle_button_name","onClick","length","map","option","currency_button_name","helper_text"],"sources":["src/components/dda-number-field/dda-number-field.tsx"],"sourcesContent":["import { Component, Prop, State, h, Host, Element, Method } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-number-field',\r\n  styleUrls: [],\r\n  shadow: false,\r\n})\r\nexport class DdaNumberField {\r\n  @Prop() placeholder: string;\r\n  @Prop() label: string;\r\n  @Prop() value: string;\r\n  @Prop() helper_text: string;\r\n  @Prop() error_message: string;\r\n  @Prop() validation_type?: string;\r\n  @Prop() size?: string;\r\n  @Prop() input_status?: string; // JSON string of currency options\r\n  @Prop() currencies: string;\r\n  @Prop() selected_currency: string = 'USD';\r\n  @State() is_focused: boolean = false;\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() component_mode?: string;\r\n  @Prop() input_id: string;\r\n  @Prop() aria_label?: string;\r\n  @Prop() input_name?: string;\r\n  @Prop() toggle_button_name?: string;\r\n  @Prop() currency_button_name?: string;\r\n\r\n  @State() isCurrencyDropdownOpen: boolean = false;\r\n\r\n  @Element() el: HTMLElement;\r\n\r\n  private hostElement!: HTMLElement;\r\n\r\n  connectedCallback() {\r\n    document.addEventListener('click', this.handleOutsideClick);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleOutsideClick);\r\n  }\r\n\r\n  handleOutsideClick = (event: MouseEvent) => {\r\n    if (!this.hostElement.contains(event.target as Node)) {\r\n      this.isCurrencyDropdownOpen = false;\r\n    }\r\n  };\r\n\r\n  handleInput(event) {\r\n    const inputElement = event.target as HTMLInputElement;\r\n    const inputValue = inputElement.value.replace(/[^0-9.]/g, '');\r\n    inputElement.value = inputValue;\r\n    this.el.dispatchEvent(\r\n      new InputEvent('input', {\r\n        bubbles: true,\r\n        composed: true,\r\n        data: event.data,\r\n        inputType: event.inputType,\r\n        isComposing: event.isComposing,\r\n      }),\r\n    );\r\n  }\r\n\r\n  handleFocus() {\r\n    this.is_focused = true;\r\n  }\r\n\r\n  handleBlur() {\r\n    this.is_focused = false;\r\n  }\r\n\r\n  toggleCurrencyDropdown() {\r\n    this.isCurrencyDropdownOpen = !this.isCurrencyDropdownOpen;\r\n    this.handleFocus();\r\n    this.handleBlur();\r\n  }\r\n\r\n  selectCurrency(currency: string) {\r\n    this.selected_currency = currency;\r\n    this.isCurrencyDropdownOpen = false;\r\n  }\r\n\r\n  private get parsedCurrencies(): string[] {\r\n    try {\r\n      return JSON.parse(this.currencies);\r\n    } catch {\r\n      return [];\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async setValue(val: string) {\r\n    this.value = val;\r\n  }\r\n\r\n  async getValue() {\r\n    return this.value || '';\r\n  }\r\n\r\n  render() {\r\n    const containerClass = [\r\n      'dda-input-container',\r\n      this.validation_type ? `dda-validation-${this.validation_type}` : '',\r\n      this.size ? `dda-input-size-${this.size}` : '',\r\n      this.input_status ? `dda-input-${this.input_status}` : '',\r\n      this.is_focused ? 'dda-input-focus' : '',\r\n      this.error_message ? 'dda-error-message' : '',\r\n      this.custom_class ? `${this.custom_class}` : '',\r\n      this.component_mode,\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    return (\r\n      <Host ref={el => (this.hostElement = el as HTMLElement)}>\r\n        <div class={containerClass}>\r\n          {this.label && (\r\n            <label htmlFor={this.input_id} class=\"dda-input-label\">\r\n              {this.label}\r\n            </label>\r\n          )}\r\n          <div class=\"dda-input-field-group dda-number-field\">\r\n            <input\r\n              id={this.input_id}\r\n              name={this.input_name}\r\n              aria-label={this.aria_label}\r\n              type=\"number\"\r\n              placeholder={this.placeholder}\r\n              value={this.value}\r\n              pattern={'[0-9]*'}\r\n              onInput={event => this.handleInput(event)}\r\n              onFocus={this.handleFocus.bind(this)}\r\n              onBlur={this.handleBlur.bind(this)}\r\n              class=\"dda-field-group-input\"\r\n            />\r\n            <div class=\"dda-input-dropdown-btn\">\r\n              <button name={this.toggle_button_name} type=\"button\" class=\"dda-dropdown-select\" onClick={() => this.toggleCurrencyDropdown()}>\r\n                {this.selected_currency}{' '}\r\n                <i class={`material-icons`} aria-hidden=\"true\">\r\n                  {this.isCurrencyDropdownOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\r\n                </i>\r\n              </button>\r\n              {this.isCurrencyDropdownOpen && (\r\n                <div class=\"dda-input-dropdown-list\">\r\n                  {this.parsedCurrencies.length > 0 ? (\r\n                    this.parsedCurrencies.map(option => (\r\n                      <button\r\n                        name={this.currency_button_name}\r\n                        type=\"button\"\r\n                        class={`dda-input-dropdown-item ${this.selected_currency === option ? 'selected' : ''}`}\r\n                        onClick={() => this.selectCurrency(option)}\r\n                      >\r\n                        {option}\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          </div>\r\n          {this.helper_text && <span class=\"dda-helper-text\">{this.helper_text}</span>}\r\n          {this.error_message && <span class=\"dda-error-message\">{this.error_message}</span>}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/dda-number-field.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-52b38a93.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-52b38a93.js';
 
 const DdaNumberField = class {
     constructor(hostRef) {
@@ -23,6 +23,13 @@ const DdaNumberField = class {
         const inputElement = event.target;
         const inputValue = inputElement.value.replace(/[^0-9.]/g, '');
         inputElement.value = inputValue;
+        this.el.dispatchEvent(new InputEvent('input', {
+            bubbles: true,
+            composed: true,
+            data: event.data,
+            inputType: event.inputType,
+            isComposing: event.isComposing,
+        }));
     }
     handleFocus() {
         this.is_focused = true;
@@ -47,6 +54,12 @@ const DdaNumberField = class {
             return [];
         }
     }
+    async setValue(val) {
+        this.value = val;
+    }
+    async getValue() {
+        return this.value || '';
+    }
     render() {
         const containerClass = [
             'dda-input-container',
@@ -57,9 +70,12 @@ const DdaNumberField = class {
             this.error_message ? 'dda-error-message' : '',
             this.custom_class ? `${this.custom_class}` : '',
             this.component_mode,
-        ].filter(Boolean).join(' ');
-        return (h(Host, { key: '206115f19125245cff3037023b3e74ec7b3bc969', ref: el => (this.hostElement = el) }, h("div", { key: 'd1b1fff44900235f41cc479ce8bedb113e031555', class: containerClass }, this.label && h("label", { key: '487ed45829adf69a159534e44452cade2866de01', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: 'b30be2cff6488c318a0883821c90e4f285e5de90', class: "dda-input-field-group dda-number-field" }, h("input", { key: '44b93fd0ccc032253cb4e0b0f5fbe47cdc3a5fa9', id: this.input_id, name: this.input_name, "aria-label": this.aria_label, type: "number", placeholder: this.placeholder, value: this.value, pattern: "[0-9]*", onInput: event => this.handleInput(event), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), class: "dda-field-group-input" }), h("div", { key: 'df600a2a0fd07fd4f5bbe55cfdd0cac93f0700b2', class: "dda-input-dropdown-btn" }, h("button", { key: '7f0b120e445cf46d403049fcf7fc3fb04c9b6db1', name: this.toggle_button_name, type: "button", class: "dda-dropdown-select", onClick: () => this.toggleCurrencyDropdown() }, this.selected_currency, " ", h("i", { key: 'dba31196d20cf9a10cefa7bde22c7d18e40a2657', class: `material-icons`, "aria-hidden": "true" }, this.isCurrencyDropdownOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.isCurrencyDropdownOpen && (h("div", { key: 'b84d4160de88048c8cea9404b41d9b99aba07a99', class: "dda-input-dropdown-list" }, this.parsedCurrencies.length > 0 ? (this.parsedCurrencies.map(option => (h("button", { name: this.currency_button_name, type: "button", class: `dda-input-dropdown-item ${this.selected_currency === option ? 'selected' : ''}`, onClick: () => this.selectCurrency(option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available")))))), this.helper_text && h("span", { key: '217a462603bef7804f1c556ed5fa4aa9d8542ad0', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'fcf554321d416f6235bb70bf7e1beceff2c43968', class: "dda-error-message" }, this.error_message))));
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return (h(Host, { key: '91def39d4869053ffb52d63279a504c0fd7e03e1', ref: el => (this.hostElement = el) }, h("div", { key: 'bf83501237b86db00c05fb71d18f2a3d9cd13e11', class: containerClass }, this.label && (h("label", { key: 'b6ca1e8a6bc9ad27292f7fb8f94d86fddc6d29d6', htmlFor: this.input_id, class: "dda-input-label" }, this.label)), h("div", { key: 'f6b5193b6bf159272e7d20d375820698ea3f5a60', class: "dda-input-field-group dda-number-field" }, h("input", { key: 'd9369bd8021d0bf6af8870530d47718211e8360f', id: this.input_id, name: this.input_name, "aria-label": this.aria_label, type: "number", placeholder: this.placeholder, value: this.value, pattern: '[0-9]*', onInput: event => this.handleInput(event), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), class: "dda-field-group-input" }), h("div", { key: '4dc2a7224754217edf78619ac40399c21634556d', class: "dda-input-dropdown-btn" }, h("button", { key: '76047ef680f600fb74803e815669eba9a6dbb21e', name: this.toggle_button_name, type: "button", class: "dda-dropdown-select", onClick: () => this.toggleCurrencyDropdown() }, this.selected_currency, ' ', h("i", { key: '87017c99cb3515c7122148ede366f083599abbc3', class: `material-icons`, "aria-hidden": "true" }, this.isCurrencyDropdownOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.isCurrencyDropdownOpen && (h("div", { key: '0847ebded3099fcf48ac0e0a337480446f6cd255', class: "dda-input-dropdown-list" }, this.parsedCurrencies.length > 0 ? (this.parsedCurrencies.map(option => (h("button", { name: this.currency_button_name, type: "button", class: `dda-input-dropdown-item ${this.selected_currency === option ? 'selected' : ''}`, onClick: () => this.selectCurrency(option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available")))))), this.helper_text && h("span", { key: 'c77a72d290e9b157bebf52e4ea0293f723c2ff3d', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '52a3c41a8907b557bb26b207ee57822e56559d99', class: "dda-error-message" }, this.error_message))));
     }
+    get el() { return getElement(this); }
 };
 
 export { DdaNumberField as dda_number_field };

package/dist/esm/dda-number-field.entry.js.map

@@ -1 +1 @@
-{"file":"dda-number-field.entry.js","mappings":"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","names":[],"sources":["src/components/dda-number-field/dda-number-field.tsx"],"sourcesContent":["import { Component, Prop, State, h, Host } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-number-field',\r\n  styleUrls: [],\r\n  shadow: false,\r\n})\r\nexport class DdaNumberField {\r\n  @Prop() placeholder: string;\r\n  @Prop() label: string;\r\n  @Prop() value: string;\r\n  @Prop() helper_text: string;\r\n  @Prop() error_message: string;\r\n  @Prop() validation_type?: string;\r\n  @Prop() size?: string;\r\n  @Prop() input_status?: string; // JSON string of currency options\r\n  @Prop() currencies: string;\r\n  @Prop() selected_currency: string = 'USD';\r\n  @State() is_focused: boolean = false;\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() component_mode?: string;\r\n  @Prop() input_id: string;\r\n  @Prop() aria_label?: string;\r\n  @Prop() input_name?: string;\r\n  @Prop() toggle_button_name?: string;\r\n  @Prop() currency_button_name?: string;\r\n\r\n  @State() isCurrencyDropdownOpen: boolean = false;\r\n\r\n  private hostElement!: HTMLElement;\r\n\r\n  connectedCallback() {\r\n    document.addEventListener('click', this.handleOutsideClick);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleOutsideClick);\r\n  }\r\n\r\n  handleOutsideClick = (event: MouseEvent) => {\r\n    if (!this.hostElement.contains(event.target as Node)) {\r\n      this.isCurrencyDropdownOpen = false;\r\n    }\r\n  };\r\n\r\n  handleInput(event) {\r\n    const inputElement = event.target as HTMLInputElement;\r\n    const inputValue = inputElement.value.replace(/[^0-9.]/g, '');\r\n    inputElement.value = inputValue;\r\n  }\r\n\r\n  handleFocus() {\r\n    this.is_focused = true;\r\n  }\r\n\r\n  handleBlur() {\r\n    this.is_focused = false;\r\n  }\r\n\r\n  toggleCurrencyDropdown() {\r\n    this.isCurrencyDropdownOpen = !this.isCurrencyDropdownOpen;\r\n    this.handleFocus();\r\n    this.handleBlur();\r\n  }\r\n\r\n  selectCurrency(currency: string) {\r\n    this.selected_currency = currency;\r\n    this.isCurrencyDropdownOpen = false;\r\n  }\r\n\r\n  private get parsedCurrencies(): string[] {\r\n    try {\r\n      return JSON.parse(this.currencies);\r\n    } catch {\r\n      return [];\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const containerClass = [\r\n      'dda-input-container',\r\n      this.validation_type ? `dda-validation-${this.validation_type}` : '',\r\n      this.size ? `dda-input-size-${this.size}` : '',\r\n      this.input_status ? `dda-input-${this.input_status}` : '',\r\n      this.is_focused ? 'dda-input-focus' : '',\r\n      this.error_message ? 'dda-error-message' : '',\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 ref={el => (this.hostElement = el as HTMLElement)}>\r\n        <div class={containerClass}>\r\n          {this.label && <label htmlFor={this.input_id} class=\"dda-input-label\">{this.label}</label>}\r\n          <div class=\"dda-input-field-group dda-number-field\">\r\n            <input\r\n              id={this.input_id}\r\n              name={this.input_name}\r\n              aria-label={this.aria_label}\r\n              type=\"number\"\r\n              placeholder={this.placeholder}\r\n              value={this.value}\r\n              pattern={\"[0-9]*\"}\r\n              onInput={event => this.handleInput(event)}\r\n              onFocus={this.handleFocus.bind(this)}\r\n              onBlur={this.handleBlur.bind(this)}\r\n              class=\"dda-field-group-input\"\r\n            />\r\n            <div class=\"dda-input-dropdown-btn\">\r\n              <button\r\n                name={this.toggle_button_name}\r\n                type=\"button\"\r\n                class=\"dda-dropdown-select\"\r\n                onClick={() => this.toggleCurrencyDropdown()}\r\n              >\r\n                {this.selected_currency} <i class={`material-icons`} aria-hidden=\"true\">{this.isCurrencyDropdownOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}</i>\r\n              </button>\r\n              {this.isCurrencyDropdownOpen && (\r\n                <div class=\"dda-input-dropdown-list\">\r\n                  {this.parsedCurrencies.length > 0 ? (\r\n                    this.parsedCurrencies.map(option => (\r\n                      <button\r\n                        name={this.currency_button_name}\r\n                        type=\"button\"\r\n                        class={`dda-input-dropdown-item ${this.selected_currency === option ? 'selected' : ''}`}\r\n                        onClick={() => this.selectCurrency(option)}\r\n                      >\r\n                        {option}\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          </div>\r\n          {this.helper_text && <span class=\"dda-helper-text\">{this.helper_text}</span>}\r\n          {this.error_message && <span class=\"dda-error-message\">{this.error_message}</span>}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dda-number-field.entry.js","mappings":"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","names":[],"sources":["src/components/dda-number-field/dda-number-field.tsx"],"sourcesContent":["import { Component, Prop, State, h, Host, Element, Method } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-number-field',\r\n  styleUrls: [],\r\n  shadow: false,\r\n})\r\nexport class DdaNumberField {\r\n  @Prop() placeholder: string;\r\n  @Prop() label: string;\r\n  @Prop() value: string;\r\n  @Prop() helper_text: string;\r\n  @Prop() error_message: string;\r\n  @Prop() validation_type?: string;\r\n  @Prop() size?: string;\r\n  @Prop() input_status?: string; // JSON string of currency options\r\n  @Prop() currencies: string;\r\n  @Prop() selected_currency: string = 'USD';\r\n  @State() is_focused: boolean = false;\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() component_mode?: string;\r\n  @Prop() input_id: string;\r\n  @Prop() aria_label?: string;\r\n  @Prop() input_name?: string;\r\n  @Prop() toggle_button_name?: string;\r\n  @Prop() currency_button_name?: string;\r\n\r\n  @State() isCurrencyDropdownOpen: boolean = false;\r\n\r\n  @Element() el: HTMLElement;\r\n\r\n  private hostElement!: HTMLElement;\r\n\r\n  connectedCallback() {\r\n    document.addEventListener('click', this.handleOutsideClick);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleOutsideClick);\r\n  }\r\n\r\n  handleOutsideClick = (event: MouseEvent) => {\r\n    if (!this.hostElement.contains(event.target as Node)) {\r\n      this.isCurrencyDropdownOpen = false;\r\n    }\r\n  };\r\n\r\n  handleInput(event) {\r\n    const inputElement = event.target as HTMLInputElement;\r\n    const inputValue = inputElement.value.replace(/[^0-9.]/g, '');\r\n    inputElement.value = inputValue;\r\n    this.el.dispatchEvent(\r\n      new InputEvent('input', {\r\n        bubbles: true,\r\n        composed: true,\r\n        data: event.data,\r\n        inputType: event.inputType,\r\n        isComposing: event.isComposing,\r\n      }),\r\n    );\r\n  }\r\n\r\n  handleFocus() {\r\n    this.is_focused = true;\r\n  }\r\n\r\n  handleBlur() {\r\n    this.is_focused = false;\r\n  }\r\n\r\n  toggleCurrencyDropdown() {\r\n    this.isCurrencyDropdownOpen = !this.isCurrencyDropdownOpen;\r\n    this.handleFocus();\r\n    this.handleBlur();\r\n  }\r\n\r\n  selectCurrency(currency: string) {\r\n    this.selected_currency = currency;\r\n    this.isCurrencyDropdownOpen = false;\r\n  }\r\n\r\n  private get parsedCurrencies(): string[] {\r\n    try {\r\n      return JSON.parse(this.currencies);\r\n    } catch {\r\n      return [];\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async setValue(val: string) {\r\n    this.value = val;\r\n  }\r\n\r\n  async getValue() {\r\n    return this.value || '';\r\n  }\r\n\r\n  render() {\r\n    const containerClass = [\r\n      'dda-input-container',\r\n      this.validation_type ? `dda-validation-${this.validation_type}` : '',\r\n      this.size ? `dda-input-size-${this.size}` : '',\r\n      this.input_status ? `dda-input-${this.input_status}` : '',\r\n      this.is_focused ? 'dda-input-focus' : '',\r\n      this.error_message ? 'dda-error-message' : '',\r\n      this.custom_class ? `${this.custom_class}` : '',\r\n      this.component_mode,\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    return (\r\n      <Host ref={el => (this.hostElement = el as HTMLElement)}>\r\n        <div class={containerClass}>\r\n          {this.label && (\r\n            <label htmlFor={this.input_id} class=\"dda-input-label\">\r\n              {this.label}\r\n            </label>\r\n          )}\r\n          <div class=\"dda-input-field-group dda-number-field\">\r\n            <input\r\n              id={this.input_id}\r\n              name={this.input_name}\r\n              aria-label={this.aria_label}\r\n              type=\"number\"\r\n              placeholder={this.placeholder}\r\n              value={this.value}\r\n              pattern={'[0-9]*'}\r\n              onInput={event => this.handleInput(event)}\r\n              onFocus={this.handleFocus.bind(this)}\r\n              onBlur={this.handleBlur.bind(this)}\r\n              class=\"dda-field-group-input\"\r\n            />\r\n            <div class=\"dda-input-dropdown-btn\">\r\n              <button name={this.toggle_button_name} type=\"button\" class=\"dda-dropdown-select\" onClick={() => this.toggleCurrencyDropdown()}>\r\n                {this.selected_currency}{' '}\r\n                <i class={`material-icons`} aria-hidden=\"true\">\r\n                  {this.isCurrencyDropdownOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\r\n                </i>\r\n              </button>\r\n              {this.isCurrencyDropdownOpen && (\r\n                <div class=\"dda-input-dropdown-list\">\r\n                  {this.parsedCurrencies.length > 0 ? (\r\n                    this.parsedCurrencies.map(option => (\r\n                      <button\r\n                        name={this.currency_button_name}\r\n                        type=\"button\"\r\n                        class={`dda-input-dropdown-item ${this.selected_currency === option ? 'selected' : ''}`}\r\n                        onClick={() => this.selectCurrency(option)}\r\n                      >\r\n                        {option}\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          </div>\r\n          {this.helper_text && <span class=\"dda-helper-text\">{this.helper_text}</span>}\r\n          {this.error_message && <span class=\"dda-error-message\">{this.error_message}</span>}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dda-search-input.entry.js

@@ -24,6 +24,17 @@ const DdaSearchInput = class {
                 const target = event.target;
                 console.log('Search input value (Enter):', target.value);
             }
+            this.el.dispatchEvent(new KeyboardEvent('keydown', {
+                bubbles: true,
+                composed: true,
+                key: event.key,
+                code: event.code,
+                ctrlKey: event.ctrlKey,
+                shiftKey: event.shiftKey,
+                altKey: event.altKey,
+                metaKey: event.metaKey,
+                repeat: event.repeat,
+            }));
         };
         this.handleSearchClick = () => {
             const input = this.el.querySelector(`#${this.input_id}`);
@@ -67,18 +78,36 @@ const DdaSearchInput = class {
         this.onChanged.emit(val);
     }
     render() {
-        return (h(Host, { key: '63cc7ca7960af3191ef0f2555f46d9e124698f8b' }, h("div", { key: '580758f178fc17fd14a8f55f60c00f2a2e2df8fa', 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' : ''}` }, this.label && (h("label", { key: '65ed51e543cd333b99ecfbdb4f5bbb4f329b53e6', htmlFor: this.button_id, class: "dda-input-label" }, this.label)), h("div", { key: '6aa00d11a082ca868dfe4da8586937f6d4479876', class: "dda-search-area dda-search-action" }, h("i", { key: '9cb8039c3e30f1637f250c8c80b3ae8287eb043a', class: "material-icons icon-left", "aria-hidden": "true" }, "search"), h("input", { key: '72c2c96353d9431e0cf6f3251edb426e1401510d', name: this.search_input_name, "aria-label": this.aria_label, id: this.input_id, value: this.internalValue, type: "text", class: `dda-input-field dda-search-field ${this.show_button ? 'has-search-button' : ''}`, placeholder: this.placeholder,
+        return (h(Host, { key: 'e23b6f258bc2699153dbe74a0b0a35394a884c09' }, h("div", { key: 'bb778d44ef2b22c05a6d516aeac4fbf7a37737c3', 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' : ''}` }, this.label && (h("label", { key: 'c6280620a3f1b7742d3fb04157b570e5dd33ca60', htmlFor: this.button_id, class: "dda-input-label" }, this.label)), h("div", { key: '5b1a38c75b2d281aefba77de7115dfb88314e4ad', class: "dda-search-area dda-search-action" }, h("i", { key: 'ccdd26425e32e370bfb3547bf5f0915d8de4182f', class: "material-icons icon-left", "aria-hidden": "true" }, "search"), h("input", { key: 'a48aedceda06d6f69c6ffcac840d9dcecc720018', name: this.search_input_name, "aria-label": this.aria_label, id: this.input_id, value: this.internalValue, type: "text", class: `dda-input-field dda-search-field ${this.show_button ? 'has-search-button' : ''}`, placeholder: this.placeholder,
             // onInput={this.handleInput}
             onKeyDown: this.handleKeyDown, onInput: event => {
                 this.internalValue = event.target.value;
                 this.hasInputValue = !!this.internalValue;
                 this.inputChanged.emit(event);
                 this.onChanged.emit(event);
+                this.el.dispatchEvent(new InputEvent('input', {
+                    bubbles: true,
+                    composed: true,
+                    data: event.data,
+                    inputType: event.inputType,
+                    isComposing: event.isComposing,
+                }));
             }, onBlur: event => {
                 const value = event.target.value.trim();
                 this.inputBlurred.emit({ name: this.search_input_name, value });
                 this.onBlurred.emit(value);
-            } }), h("div", { key: '80747d9137284f1b05cb0d25a7a8ad6c8a7b1048', class: "dda-search-btngroup" }, this.hasInputValue && (h("button", { key: '25e82c8100f168b6855426d2a2a75c1bf734409c', name: this.close_button_name, "aria-label": this.button_aria_label, id: this.button_id, type: "button", class: "dda-search-close-icon", onClick: () => this.clearInput() }, h("i", { key: 'f7612c86c0bd7e9ccd7c4e9666bca0e6da89c29b', class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "close"))), this.show_button && (h("button", { key: '6b763a5850c1d48e0a7375a361f8dfaf67e8fd06', name: this.search_button_name, type: "button", class: "dda-btn btn-color-default-primary dda-btn-sm", onClick: this.handleSearchClick }, this.button_text)))), this.helper_text && (h("span", { key: 'e6f8b2cd39ad001b30a3c749d08326d344ad6430', class: "dda-helper-text", id: this.validation_id }, this.helper_text)), this.error_message && (h("span", { key: '417fe2bdb508400276bf19144b18c62a7b448220', class: "dda-error-message", id: this.validation_id }, this.error_message)))));
+                this.el.dispatchEvent(new FocusEvent('blur', {
+                    bubbles: true,
+                    composed: true,
+                    relatedTarget: event.relatedTarget,
+                }));
+            }, onFocus: (event) => {
+                this.el.dispatchEvent(new FocusEvent('focus', {
+                    bubbles: true,
+                    composed: true,
+                    relatedTarget: event.relatedTarget,
+                }));
+            } }), h("div", { key: '8ffaa5e058389cf65ad70ab29676748d667a8a68', class: "dda-search-btngroup" }, this.hasInputValue && (h("button", { key: 'c2190c168ad754cb93b60da8d568bb62a89e29de', name: this.close_button_name, "aria-label": this.button_aria_label, id: this.button_id, type: "button", class: "dda-search-close-icon", onClick: () => this.clearInput() }, h("i", { key: '94b4644da93e67679ee2586853977bd7d14f5045', class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "close"))), this.show_button && (h("button", { key: '5dce491dfeecc09dd4d79bce8dc637c163986749', name: this.search_button_name, type: "button", class: "dda-btn btn-color-default-primary dda-btn-sm", onClick: this.handleSearchClick }, this.button_text)))), this.helper_text && (h("span", { key: 'e0f361ea19e1b30c903b1dfc21d9ae4bd84e7907', class: "dda-helper-text", id: this.validation_id }, this.helper_text)), this.error_message && (h("span", { key: 'ae3eaeb103f2923041b589c9cd3ea67a97752f5b', class: "dda-error-message", id: this.validation_id }, this.error_message)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/dda-search-input.entry.js.map

@@ -1 +1 @@
-{"file":"dda-search-input.entry.js","mappings":"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","names":[],"sources":["src/components/dda-search-input/dda-search-input.tsx"],"sourcesContent":["import { Component, Prop, h, Host, Element, State, Event, EventEmitter, Watch, Method } 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() onChanged: EventEmitter<any>;\r\n\r\n  @Event() buttonClicked: EventEmitter<any>;\r\n  @Event() inputBlurred: EventEmitter<{ name: string; value: string }>;\r\n  @Event() onBlurred: EventEmitter<any>;\r\n\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  @Watch('value')\r\n  watchValue(newValue: string) {\r\n    this.internalValue = newValue || '';\r\n    this.hasInputValue = !!this.internalValue;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalValue = this.value || '';\r\n    this.hasInputValue = !!this.internalValue;\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      this.buttonClicked.emit(this.internalValue || this.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.internalValue = '';\r\n      this.hasInputValue = false;\r\n      // this.inputChanged.emit('');\r\n      this.onChanged.emit('');\r\n      input.focus();\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async reset() {\r\n    this.internalValue = '';\r\n    this.hasInputValue = false;\r\n    // this.inputChanged.emit('');\r\n    this.onChanged.emit('');\r\n  }\r\n\r\n  @Method()\r\n  async setValue(val: string) {\r\n    this.internalValue = val;\r\n    this.hasInputValue = !!val;\r\n    // this.inputChanged.emit(val);\r\n    this.onChanged.emit(val);\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}\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.hasInputValue = !!this.internalValue;\r\n                this.inputChanged.emit(event);\r\n                this.onChanged.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                this.onBlurred.emit(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"],"version":3}
+{"file":"dda-search-input.entry.js","mappings":"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","names":[],"sources":["src/components/dda-search-input/dda-search-input.tsx"],"sourcesContent":["import { Component, Prop, h, Host, Element, State, Event, EventEmitter, Watch, Method } 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() onChanged: EventEmitter<any>;\r\n\r\n  @Event() buttonClicked: EventEmitter<any>;\r\n  @Event() inputBlurred: EventEmitter<{ name: string; value: string }>;\r\n  @Event() onBlurred: EventEmitter<any>;\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    this.el.dispatchEvent(\r\n      new KeyboardEvent('keydown', {\r\n        bubbles: true,\r\n        composed: true,\r\n        key: event.key,\r\n        code: event.code,\r\n        ctrlKey: event.ctrlKey,\r\n        shiftKey: event.shiftKey,\r\n        altKey: event.altKey,\r\n        metaKey: event.metaKey,\r\n        repeat: event.repeat,\r\n      }),\r\n    );\r\n  };\r\n\r\n  @Watch('value')\r\n  watchValue(newValue: string) {\r\n    this.internalValue = newValue || '';\r\n    this.hasInputValue = !!this.internalValue;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalValue = this.value || '';\r\n    this.hasInputValue = !!this.internalValue;\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      this.buttonClicked.emit(this.internalValue || this.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.internalValue = '';\r\n      this.hasInputValue = false;\r\n      // this.inputChanged.emit('');\r\n      this.onChanged.emit('');\r\n      input.focus();\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async reset() {\r\n    this.internalValue = '';\r\n    this.hasInputValue = false;\r\n    // this.inputChanged.emit('');\r\n    this.onChanged.emit('');\r\n  }\r\n\r\n  @Method()\r\n  async setValue(val: string) {\r\n    this.internalValue = val;\r\n    this.hasInputValue = !!val;\r\n    // this.inputChanged.emit(val);\r\n    this.onChanged.emit(val);\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}\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.hasInputValue = !!this.internalValue;\r\n                this.inputChanged.emit(event);\r\n                this.onChanged.emit(event);\r\n                this.el.dispatchEvent(\r\n                  new InputEvent('input', {\r\n                    bubbles: true,\r\n                    composed: true,\r\n                    data: event.data,\r\n                    inputType: event.inputType,\r\n                    isComposing: event.isComposing,\r\n                  }),\r\n                );\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                this.onBlurred.emit(value);\r\n                this.el.dispatchEvent(\r\n                  new FocusEvent('blur', {\r\n                    bubbles: true,\r\n                    composed: true,\r\n                    relatedTarget: event.relatedTarget,\r\n                  }),\r\n                );\r\n              }}\r\n              onFocus={(event: FocusEvent) => {\r\n                this.el.dispatchEvent(\r\n                  new FocusEvent('focus', {\r\n                    bubbles: true,\r\n                    composed: true,\r\n                    relatedTarget: event.relatedTarget,\r\n                  }),\r\n                );\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"],"version":3}

package/dist/esm/dda-select.entry.js

@@ -88,6 +88,19 @@ const Ddaselect = class {
             this.selected = '';
         }
     }
+    async setValue(value) {
+        const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === value.toString() || opt.text === value);
+        if (selectedOption) {
+            this.selectedId = selectedOption.id;
+            this.selectedText = selectedOption.text;
+            this.selected = selectedOption.id.toString();
+        }
+        else {
+            this.selectedId = undefined;
+            this.selectedText = '';
+            this.selected = '';
+        }
+    }
     async getSelectedText() {
         return this.selectedText;
     }
@@ -112,12 +125,12 @@ const Ddaselect = class {
     render() {
         const labelId = `${this.button_id}-label`;
         const valueId = `${this.button_id}-value`;
-        return (h(Host, { key: 'ced7dbfc2a4f358c971a706761472784bb3e6628' }, h("div", { key: '8956ae24671d419e61eb32c6956358e2b51ec945', class: `
+        return (h(Host, { key: 'c89e68e10cc4658318fd818305436c027a24ead5' }, h("div", { key: 'b436e93c4cbfdd5b76aa4c15e38b76872d04185c', class: `
             dda-input-container ${this.custom_class} 
             ${this.component_mode} 
             ${this.disabled ? 'dda-input-disabled' : ''} 
             dda-input-size-${this.size} dda-validation-${this.validation_type}
-          ` }, this.label && (h("span", { key: 'c3a1db279d1f8a136972f3c70b4d506e7e0c34b1', id: labelId, class: "dda-input-label" }, this.label)), h("div", { key: '3bac51fcde9784786b6a7937a1342aa7f32cdafa', class: "dda-dropdown-container" }, h("button", { key: '5aa2a7d4a9f7ae8336da1a5a7bb3f09a43e51e07', 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: 'ec74a3c2c026e3d9cda8ad78ede8082bd19e3b57', id: valueId, class: "dda-select-button-label" }, this.selectedText || this.placeholder), h("i", { key: 'aff9db53adce2ab32a3b27d4a34680c68357ca2e', class: "material-icons", "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: '41849c086b485acb4087e935464a759cfc3488be', 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: 'f0c20e8afd927b1c8f6940cc1c260b24a445086b', id: labelId, class: "dda-input-label" }, this.label)), h("div", { key: '8bb32b3eb1669b2b44c1d3c2080821046f31caf5', class: "dda-dropdown-container" }, h("button", { key: 'c30b9f0219d65a079565f5a18a7498eb7b83bb15', 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: '79489230cb303c49294e73b378041b18dae01abc', id: valueId, class: "dda-select-button-label" }, this.selectedText || this.placeholder), h("i", { key: '19e5d561ecce26640b3338a17b23191e3cb5fb08', class: "material-icons", "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: '35f08c99f312bb9a9062074b72564c79885dac43', 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))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/dda-select.entry.js.map

@@ -1 +1 @@
-{"file":"dda-select.entry.js","mappings":"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","names":[],"sources":["src/components/dda-select/dda-select.tsx"],"sourcesContent":["import { Component, Prop, State, h, Host, Element, Event, EventEmitter, Watch, Method } 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() onChanged: EventEmitter<any>;\r\n\r\n  @Event() selectBlurred: EventEmitter<{ name: string; value: string }>;\r\n  @Event() onBlurred: EventEmitter<any>;\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(opt => opt.id.toString() === this.selected || opt.text === this.selected);\r\n    if (selectedOption) {\r\n      this.selectedId = selectedOption.id;\r\n      this.selectedText = selectedOption.text;\r\n    }\r\n    if (this.selected) {\r\n      this.watchSelected(this.selected);\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: any; 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      this.onChanged.emit(option.id);\r\n\r\n      this.el.dispatchEvent(\r\n        new InputEvent('input', {\r\n          bubbles: true,\r\n          composed: true,\r\n          data: option.id,\r\n          inputType: 'select',\r\n        }),\r\n      );\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    this.onBlurred.emit(this.selectedId);\r\n\r\n    this.el.dispatchEvent(\r\n      new FocusEvent('blur', {\r\n        bubbles: true,\r\n        composed: true,\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  @Method()\r\n  async setSelected(value: string | number) {\r\n    const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === value.toString() || opt.text === value);\r\n\r\n    if (selectedOption) {\r\n      this.selectedId = selectedOption.id;\r\n      this.selectedText = selectedOption.text;\r\n      this.selected = selectedOption.id.toString();\r\n    } else {\r\n      this.selectedId = undefined;\r\n      this.selectedText = '';\r\n      this.selected = '';\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async getSelectedText() {\r\n    return this.selectedText;\r\n  }\r\n\r\n  async getValue() {\r\n    return this.selectedText || '';\r\n  }\r\n\r\n  @Watch('selected')\r\n  watchSelected(newVal: string) {\r\n    const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === newVal || opt.text === newVal);\r\n\r\n    if (selectedOption) {\r\n      this.selectedId = selectedOption.id;\r\n      this.selectedText = selectedOption.text;\r\n    } else {\r\n      this.selectedId = undefined;\r\n      this.selectedText = '';\r\n    }\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\">\r\n                {this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\r\n              </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 class=\"dda-error-message\" id={this.validation_id} role=\"alert\">\r\n              {this.error_message}\r\n            </span>\r\n          ) : (\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          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dda-select.entry.js","mappings":"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","names":[],"sources":["src/components/dda-select/dda-select.tsx"],"sourcesContent":["import { Component, Prop, State, h, Host, Element, Event, EventEmitter, Watch, Method } 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() onChanged: EventEmitter<any>;\r\n\r\n  @Event() selectBlurred: EventEmitter<{ name: string; value: string }>;\r\n  @Event() onBlurred: EventEmitter<any>;\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(opt => opt.id.toString() === this.selected || opt.text === this.selected);\r\n    if (selectedOption) {\r\n      this.selectedId = selectedOption.id;\r\n      this.selectedText = selectedOption.text;\r\n    }\r\n    if (this.selected) {\r\n      this.watchSelected(this.selected);\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: any; 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      this.onChanged.emit(option.id);\r\n\r\n      this.el.dispatchEvent(\r\n        new InputEvent('input', {\r\n          bubbles: true,\r\n          composed: true,\r\n          data: option.id,\r\n          inputType: 'select',\r\n        }),\r\n      );\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    this.onBlurred.emit(this.selectedId);\r\n\r\n    this.el.dispatchEvent(\r\n      new FocusEvent('blur', {\r\n        bubbles: true,\r\n        composed: true,\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  @Method()\r\n  async setSelected(value: string | number) {\r\n    const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === value.toString() || opt.text === value);\r\n\r\n    if (selectedOption) {\r\n      this.selectedId = selectedOption.id;\r\n      this.selectedText = selectedOption.text;\r\n      this.selected = selectedOption.id.toString();\r\n    } else {\r\n      this.selectedId = undefined;\r\n      this.selectedText = '';\r\n      this.selected = '';\r\n    }\r\n  }\r\n\r\n  async setValue(value: string | number) {\r\n    const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === value.toString() || opt.text === value);\r\n\r\n    if (selectedOption) {\r\n      this.selectedId = selectedOption.id;\r\n      this.selectedText = selectedOption.text;\r\n      this.selected = selectedOption.id.toString();\r\n    } else {\r\n      this.selectedId = undefined;\r\n      this.selectedText = '';\r\n      this.selected = '';\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async getSelectedText() {\r\n    return this.selectedText;\r\n  }\r\n\r\n  async getValue() {\r\n    return this.selectedText || '';\r\n  }\r\n\r\n  @Watch('selected')\r\n  watchSelected(newVal: string) {\r\n    const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === newVal || opt.text === newVal);\r\n\r\n    if (selectedOption) {\r\n      this.selectedId = selectedOption.id;\r\n      this.selectedText = selectedOption.text;\r\n    } else {\r\n      this.selectedId = undefined;\r\n      this.selectedText = '';\r\n    }\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\">\r\n                {this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\r\n              </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 class=\"dda-error-message\" id={this.validation_id} role=\"alert\">\r\n              {this.error_message}\r\n            </span>\r\n          ) : (\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          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dda-textarea.entry.js

@@ -16379,6 +16379,15 @@ const DdaTextarea = class {
     async getValue() {
         return this.internalValue || this.value || '';
     }
+    async setValue(val) {
+        this.internalValue = val;
+        this.onChanged.emit(val);
+    }
+    async reset() {
+        this.internalValue = '';
+        // this.inputChanged.emit('');
+        this.onChanged.emit('');
+    }
     componentDidLoad() {
         var _a;
         if (this.enable_rich_editor) {
@@ -16450,7 +16459,7 @@ const DdaTextarea = class {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h(Host, { key: '39c499ca78c5d8806686c669c951ed7f1149a105' }, h("div", { key: 'bcd4bb0b68e66257c233c0f2582a0f3b1ce4ac39', class: textareaClass }, this.label && (h("label", { key: 'cb6c14ad6279f936adeee3daf0b8c0939479a932', htmlFor: this.input_id, class: "dda-input-label" }, this.label)), this.enable_rich_editor ? (h("div", { id: "editor", class: "dda-richeditor-field" })) : (h("textarea", { id: this.input_id, name: this.textarea_name, "aria-label": this.aria_label, placeholder: this.placeholder, value: this.internalValue || this.value, "aria-invalid": this.validation_type === 'error' ? 'true' : 'false', class: "dda-input-field dda-input-textarea", maxLength: this.max_characters, onInput: event => this.handleInput(event), onBlur: event => this.handleBlur(event), onFocus: (event) => {
+        return (h(Host, { key: '84c8c4cf9523ce3dbb0abac66620362a6562b283' }, h("div", { key: '2667bc3bb5241b6301fa7a74305ab124161abc5c', class: textareaClass }, this.label && (h("label", { key: '088e47cd088301ef751b5aac6475f5c0c2affc2c', htmlFor: this.input_id, class: "dda-input-label" }, this.label)), this.enable_rich_editor ? (h("div", { id: "editor", class: "dda-richeditor-field" })) : (h("textarea", { id: this.input_id, name: this.textarea_name, "aria-label": this.aria_label, placeholder: this.placeholder, value: this.internalValue || this.value, "aria-invalid": this.validation_type === 'error' ? 'true' : 'false', class: "dda-input-field dda-input-textarea", maxLength: this.max_characters, onInput: event => this.handleInput(event), onBlur: event => this.handleBlur(event), onFocus: (event) => {
                 this.el.dispatchEvent(new FocusEvent('focus', {
                     bubbles: true,
                     composed: true,