@dubai-design-system/components-js 3.12.2-alpha.0 → 3.12.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/dda-header-menu_3.cjs.entry.js +6 -2
- package/dist/cjs/dda-header-menu_3.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-header.cjs.entry.js +15 -6
- package/dist/cjs/dda-header.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-number-field.cjs.entry.js +18 -2
- package/dist/cjs/dda-number-field.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-search-input.cjs.entry.js +31 -2
- package/dist/cjs/dda-search-input.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-select.cjs.entry.js +15 -2
- package/dist/cjs/dda-select.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-textarea.cjs.entry.js +10 -1
- package/dist/cjs/dda-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/dda.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/assets/img/Team-Section-Card-1.svg +9 -9
- package/dist/collection/assets/img/icn/icn-Config.svg +9 -9
- package/dist/collection/assets/img/icn/icn-card-facebook.svg +11 -11
- package/dist/collection/assets/img/icn/icn-card-linkdin.svg +4 -4
- package/dist/collection/assets/img/icn/icn-card-telegram.svg +11 -11
- package/dist/collection/assets/img/icn/icn-card-twitter-x.svg +10 -10
- package/dist/collection/components/dda-header/dda-header-main.css +1 -0
- package/dist/collection/components/dda-header/dda-header.js +14 -5
- package/dist/collection/components/dda-header/dda-header.js.map +1 -1
- package/dist/collection/components/dda-header/dda-header.stories.js +3 -3
- package/dist/collection/components/dda-header/dda-header.stories.js.map +1 -1
- package/dist/collection/components/dda-header-menu/dda-header-menu.js +7 -3
- package/dist/collection/components/dda-header-menu/dda-header-menu.js.map +1 -1
- package/dist/collection/components/dda-header-menu/dda-header-menu.stories.js +1 -1
- package/dist/collection/components/dda-header-menu/dda-header-menu.stories.js.map +1 -1
- package/dist/collection/components/dda-number-field/dda-number-field.js +43 -2
- package/dist/collection/components/dda-number-field/dda-number-field.js.map +1 -1
- package/dist/collection/components/dda-search-input/dda-search-input.js +31 -2
- package/dist/collection/components/dda-search-input/dda-search-input.js.map +1 -1
- package/dist/collection/components/dda-select/dda-select.js +15 -2
- package/dist/collection/components/dda-select/dda-select.js.map +1 -1
- package/dist/collection/components/dda-slider/dda-slider.js +1 -1
- package/dist/collection/components/dda-textarea/dda-textarea.js +10 -1
- package/dist/collection/components/dda-textarea/dda-textarea.js.map +1 -1
- package/dist/components/dda-header-menu.js +1 -1
- package/dist/components/dda-header.js +16 -7
- package/dist/components/dda-header.js.map +1 -1
- package/dist/components/dda-number-field.js +20 -3
- package/dist/components/dda-number-field.js.map +1 -1
- package/dist/components/dda-search-input.js +31 -2
- package/dist/components/dda-search-input.js.map +1 -1
- package/dist/components/dda-select.js +15 -2
- package/dist/components/dda-select.js.map +1 -1
- package/dist/components/dda-textarea.js +10 -1
- package/dist/components/dda-textarea.js.map +1 -1
- package/dist/components/{p-f0f752d2.js → p-857c1ac9.js} +7 -3
- package/dist/components/p-857c1ac9.js.map +1 -0
- package/dist/dda/dda.esm.js +1 -1
- package/dist/dda/dda.esm.js.map +1 -1
- package/dist/dda/p-1fa27da3.entry.js +2 -0
- package/dist/dda/p-1fa27da3.entry.js.map +1 -0
- package/dist/dda/p-210d62fb.entry.js +2 -0
- package/dist/dda/p-210d62fb.entry.js.map +1 -0
- package/dist/dda/{p-631f86fd.entry.js → p-6907700e.entry.js} +2 -2
- package/dist/dda/p-6907700e.entry.js.map +1 -0
- package/dist/dda/p-a3f284bc.entry.js +2 -0
- package/dist/dda/p-a3f284bc.entry.js.map +1 -0
- package/dist/dda/p-cd518bfb.entry.js +2 -0
- package/dist/dda/p-cd518bfb.entry.js.map +1 -0
- package/dist/dda/p-d93f2102.entry.js +2 -0
- package/dist/dda/p-d93f2102.entry.js.map +1 -0
- package/dist/esm/dda-header-menu_3.entry.js +6 -2
- package/dist/esm/dda-header-menu_3.entry.js.map +1 -1
- package/dist/esm/dda-header.entry.js +15 -6
- package/dist/esm/dda-header.entry.js.map +1 -1
- package/dist/esm/dda-number-field.entry.js +19 -3
- package/dist/esm/dda-number-field.entry.js.map +1 -1
- package/dist/esm/dda-search-input.entry.js +31 -2
- package/dist/esm/dda-search-input.entry.js.map +1 -1
- package/dist/esm/dda-select.entry.js +15 -2
- package/dist/esm/dda-select.entry.js.map +1 -1
- package/dist/esm/dda-textarea.entry.js +10 -1
- package/dist/esm/dda-textarea.entry.js.map +1 -1
- package/dist/esm/dda.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/dda-number-field/dda-number-field.d.ts +3 -0
- package/dist/types/components/dda-select/dda-select.d.ts +1 -0
- package/dist/types/components/dda-textarea/dda-textarea.d.ts +2 -0
- package/dist/types/components.d.ts +17 -16
- package/package.json +2 -2
- package/readme.md +9 -0
- package/www/build/dda.esm.js +1 -1
- package/www/build/dda.esm.js.map +1 -1
- package/www/build/p-1fa27da3.entry.js +2 -0
- package/www/build/p-1fa27da3.entry.js.map +1 -0
- package/www/build/p-210d62fb.entry.js +2 -0
- package/www/build/p-210d62fb.entry.js.map +1 -0
- package/www/build/{p-631f86fd.entry.js → p-6907700e.entry.js} +2 -2
- package/www/build/p-6907700e.entry.js.map +1 -0
- package/www/build/p-a3f284bc.entry.js +2 -0
- package/www/build/p-a3f284bc.entry.js.map +1 -0
- package/www/build/p-cd518bfb.entry.js +2 -0
- package/www/build/p-cd518bfb.entry.js.map +1 -0
- package/www/build/p-d93f2102.entry.js +2 -0
- package/www/build/p-d93f2102.entry.js.map +1 -0
- package/dist/components/p-f0f752d2.js.map +0 -1
- package/dist/dda/p-24c14c34.entry.js +0 -2
- package/dist/dda/p-24c14c34.entry.js.map +0 -1
- package/dist/dda/p-3239666b.entry.js +0 -2
- package/dist/dda/p-3239666b.entry.js.map +0 -1
- package/dist/dda/p-631f86fd.entry.js.map +0 -1
- package/dist/dda/p-95f9ac9c.entry.js +0 -2
- package/dist/dda/p-95f9ac9c.entry.js.map +0 -1
- package/dist/dda/p-a9da1c36.entry.js +0 -2
- package/dist/dda/p-a9da1c36.entry.js.map +0 -1
- package/dist/dda/p-ce9b7aeb.entry.js +0 -2
- package/dist/dda/p-ce9b7aeb.entry.js.map +0 -1
- package/www/build/p-24c14c34.entry.js +0 -2
- package/www/build/p-24c14c34.entry.js.map +0 -1
- package/www/build/p-3239666b.entry.js +0 -2
- package/www/build/p-3239666b.entry.js.map +0 -1
- package/www/build/p-631f86fd.entry.js.map +0 -1
- package/www/build/p-95f9ac9c.entry.js +0 -2
- package/www/build/p-95f9ac9c.entry.js.map +0 -1
- package/www/build/p-a9da1c36.entry.js +0 -2
- package/www/build/p-a9da1c36.entry.js.map +0 -1
- package/www/build/p-ce9b7aeb.entry.js +0 -2
- package/www/build/p-ce9b7aeb.entry.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["Ddaselect","constructor","hostRef","this","disabled","validation_id","custom_class","placeholder","main_aria_label","input_name","is_open","handleClickOutside","event","el","contains","target","handleBlur","selectBlurred","emit","name","button_id","value","selectedText","onBlurred","selectedId","dispatchEvent","FocusEvent","bubbles","composed","parsedOptions","JSON","parse","options","_a","componentWillLoad","selectedOption","find","opt","id","toString","selected","text","watchSelected","toggleSelect","selectOption","option","selectChanged","onChanged","InputEvent","data","inputType","connectedCallback","document","addEventListener","disconnectedCallback","removeEventListener","setSelected","undefined","getSelectedText","getValue","newVal","numberToWord","num","words","render","labelId","valueId","h","Host","key","class","component_mode","size","validation_type","label","toggle_button_name","type","onClick","onBlur","length","map","index","role","error_message","helper_text"],"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"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,h as s,H as e}from"./p-1b339a0a.js";const i=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}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[]}}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:"206115f19125245cff3037023b3e74ec7b3bc969",ref:t=>this.hostElement=t},s("div",{key:"d1b1fff44900235f41cc479ce8bedb113e031555",class:t},this.label&&s("label",{key:"487ed45829adf69a159534e44452cade2866de01",htmlFor:this.input_id,class:"dda-input-label"},this.label),s("div",{key:"b30be2cff6488c318a0883821c90e4f285e5de90",class:"dda-input-field-group dda-number-field"},s("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:t=>this.handleInput(t),onFocus:this.handleFocus.bind(this),onBlur:this.handleBlur.bind(this),class:"dda-field-group-input"}),s("div",{key:"df600a2a0fd07fd4f5bbe55cfdd0cac93f0700b2",class:"dda-input-dropdown-btn"},s("button",{key:"7f0b120e445cf46d403049fcf7fc3fb04c9b6db1",name:this.toggle_button_name,type:"button",class:"dda-dropdown-select",onClick:()=>this.toggleCurrencyDropdown()},this.selected_currency," ",s("i",{key:"dba31196d20cf9a10cefa7bde22c7d18e40a2657",class:`material-icons`,"aria-hidden":"true"},this.isCurrencyDropdownOpen?"keyboard_arrow_up":"keyboard_arrow_down")),this.isCurrencyDropdownOpen&&s("div",{key:"b84d4160de88048c8cea9404b41d9b99aba07a99",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:"217a462603bef7804f1c556ed5fa4aa9d8542ad0",class:"dda-helper-text"},this.helper_text),this.error_message&&s("span",{key:"fcf554321d416f6235bb70bf7e1beceff2c43968",class:"dda-error-message"},this.error_message)))}};export{i as dda_number_field};
|
|
2
|
-
//# sourceMappingURL=p-3239666b.entry.js.map
|
|
@@ -1 +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","handleFocus","handleBlur","toggleCurrencyDropdown","selectCurrency","currency","parsedCurrencies","JSON","parse","currencies","_a","render","containerClass","validation_type","size","input_status","error_message","component_mode","filter","Boolean","join","h","Host","key","ref","el","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 } 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"],"mappings":"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","ignoreList":[]}
|