@dubai-design-system/components-js 3.11.8 → 3.11.9
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 +13 -5
- package/dist/cjs/dda-header-menu_3.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-phonefield.cjs.entry.js +10 -1
- package/dist/cjs/dda-phonefield.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-search-input.cjs.entry.js +13 -6
- package/dist/cjs/dda-search-input.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-select.cjs.entry.js +9 -2
- package/dist/cjs/dda-select.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-textarea.cjs.entry.js +6 -1
- package/dist/cjs/dda-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-toggle.cjs.entry.js +4 -2
- package/dist/cjs/dda-toggle.cjs.entry.js.map +1 -1
- package/dist/collection/components/dda-input/dda-input.js +38 -4
- package/dist/collection/components/dda-input/dda-input.js.map +1 -1
- package/dist/collection/components/dda-phonefield/dda-phonefield.js +24 -1
- package/dist/collection/components/dda-phonefield/dda-phonefield.js.map +1 -1
- package/dist/collection/components/dda-radiobutton/dda-radiobutton.js +17 -1
- package/dist/collection/components/dda-radiobutton/dda-radiobutton.js.map +1 -1
- package/dist/collection/components/dda-search-input/dda-search-input.js +41 -6
- package/dist/collection/components/dda-search-input/dda-search-input.js.map +1 -1
- package/dist/collection/components/dda-select/dda-select.js +37 -2
- package/dist/collection/components/dda-select/dda-select.js.map +1 -1
- package/dist/collection/components/dda-textarea/dda-textarea.js +34 -1
- package/dist/collection/components/dda-textarea/dda-textarea.js.map +1 -1
- package/dist/collection/components/dda-toggle/dda-toggle.js +18 -2
- package/dist/collection/components/dda-toggle/dda-toggle.js.map +1 -1
- package/dist/components/dda-header.js +2 -2
- package/dist/components/dda-input.js +1 -1
- package/dist/components/dda-phonefield.js +10 -1
- package/dist/components/dda-phonefield.js.map +1 -1
- package/dist/components/dda-radiobutton.js +1 -1
- package/dist/components/dda-search-input.js +13 -6
- package/dist/components/dda-search-input.js.map +1 -1
- package/dist/components/dda-select.js +9 -2
- package/dist/components/dda-select.js.map +1 -1
- package/dist/components/dda-textarea.js +6 -1
- package/dist/components/dda-textarea.js.map +1 -1
- package/dist/components/dda-toggle.js +4 -2
- package/dist/components/dda-toggle.js.map +1 -1
- package/dist/components/{p-589645ea.js → p-5b2ec1a3.js} +11 -5
- package/dist/components/p-5b2ec1a3.js.map +1 -0
- package/dist/components/{p-a28f59c6.js → p-c30d0ada.js} +4 -2
- package/dist/components/p-c30d0ada.js.map +1 -0
- package/dist/dda/dda.esm.js +1 -1
- package/dist/dda/{p-23c2a581.entry.js → p-3e36c414.entry.js} +2 -2
- package/dist/dda/p-3e36c414.entry.js.map +1 -0
- package/dist/dda/p-440094b1.entry.js +2 -0
- package/dist/dda/p-440094b1.entry.js.map +1 -0
- package/dist/dda/{p-16b52e58.entry.js → p-6938a156.entry.js} +2 -2
- package/dist/dda/p-6938a156.entry.js.map +1 -0
- package/dist/dda/p-72e59001.entry.js +2 -0
- package/dist/dda/p-72e59001.entry.js.map +1 -0
- package/dist/dda/{p-c01385d7.entry.js → p-90e88405.entry.js} +2 -2
- package/dist/dda/p-90e88405.entry.js.map +1 -0
- package/dist/dda/p-e9733963.entry.js +2 -0
- package/dist/dda/p-e9733963.entry.js.map +1 -0
- package/dist/esm/dda-header-menu_3.entry.js +13 -5
- package/dist/esm/dda-header-menu_3.entry.js.map +1 -1
- package/dist/esm/dda-phonefield.entry.js +10 -1
- package/dist/esm/dda-phonefield.entry.js.map +1 -1
- package/dist/esm/dda-search-input.entry.js +13 -6
- package/dist/esm/dda-search-input.entry.js.map +1 -1
- package/dist/esm/dda-select.entry.js +9 -2
- package/dist/esm/dda-select.entry.js.map +1 -1
- package/dist/esm/dda-textarea.entry.js +6 -1
- package/dist/esm/dda-textarea.entry.js.map +1 -1
- package/dist/esm/dda-toggle.entry.js +4 -2
- package/dist/esm/dda-toggle.entry.js.map +1 -1
- package/dist/types/components/dda-input/dda-input.d.ts +5 -0
- package/dist/types/components/dda-phonefield/dda-phonefield.d.ts +4 -0
- package/dist/types/components/dda-radiobutton/dda-radiobutton.d.ts +4 -0
- package/dist/types/components/dda-search-input/dda-search-input.d.ts +5 -0
- package/dist/types/components/dda-select/dda-select.d.ts +8 -0
- package/dist/types/components/dda-textarea/dda-textarea.d.ts +5 -0
- package/dist/types/components/dda-toggle/dda-toggle.d.ts +1 -0
- package/dist/types/components.d.ts +22 -0
- package/package.json +2 -2
- package/readme.md +5 -0
- package/www/build/dda.esm.js +1 -1
- package/www/build/{p-23c2a581.entry.js → p-3e36c414.entry.js} +2 -2
- package/www/build/p-3e36c414.entry.js.map +1 -0
- package/www/build/p-440094b1.entry.js +2 -0
- package/www/build/p-440094b1.entry.js.map +1 -0
- package/www/build/{p-16b52e58.entry.js → p-6938a156.entry.js} +2 -2
- package/www/build/p-6938a156.entry.js.map +1 -0
- package/www/build/p-72e59001.entry.js +2 -0
- package/www/build/p-72e59001.entry.js.map +1 -0
- package/www/build/{p-c01385d7.entry.js → p-90e88405.entry.js} +2 -2
- package/www/build/p-90e88405.entry.js.map +1 -0
- package/www/build/p-e9733963.entry.js +2 -0
- package/www/build/p-e9733963.entry.js.map +1 -0
- package/dist/components/p-589645ea.js.map +0 -1
- package/dist/components/p-a28f59c6.js.map +0 -1
- package/dist/dda/p-0e352b46.entry.js +0 -2
- package/dist/dda/p-0e352b46.entry.js.map +0 -1
- package/dist/dda/p-16b52e58.entry.js.map +0 -1
- package/dist/dda/p-23c2a581.entry.js.map +0 -1
- package/dist/dda/p-a4eeb3f8.entry.js +0 -2
- package/dist/dda/p-a4eeb3f8.entry.js.map +0 -1
- package/dist/dda/p-c01385d7.entry.js.map +0 -1
- package/dist/dda/p-c034b0f0.entry.js +0 -2
- package/dist/dda/p-c034b0f0.entry.js.map +0 -1
- package/www/build/p-0e352b46.entry.js +0 -2
- package/www/build/p-0e352b46.entry.js.map +0 -1
- package/www/build/p-16b52e58.entry.js.map +0 -1
- package/www/build/p-23c2a581.entry.js.map +0 -1
- package/www/build/p-a4eeb3f8.entry.js +0 -2
- package/www/build/p-a4eeb3f8.entry.js.map +0 -1
- package/www/build/p-c01385d7.entry.js.map +0 -1
- package/www/build/p-c034b0f0.entry.js +0 -2
- package/www/build/p-c034b0f0.entry.js.map +0 -1
|
@@ -18,6 +18,10 @@ export class Ddaselect {
|
|
|
18
18
|
name: this.input_name || this.button_id,
|
|
19
19
|
value: this.selectedText || '',
|
|
20
20
|
});
|
|
21
|
+
this.onBlurred.emit({
|
|
22
|
+
name: this.input_name || this.button_id,
|
|
23
|
+
value: this.selectedText || '',
|
|
24
|
+
});
|
|
21
25
|
};
|
|
22
26
|
}
|
|
23
27
|
get parsedOptions() {
|
|
@@ -49,6 +53,7 @@ export class Ddaselect {
|
|
|
49
53
|
this.selectedText = option.text;
|
|
50
54
|
this.is_open = false;
|
|
51
55
|
this.selectChanged.emit(option);
|
|
56
|
+
this.onChanged.emit(option);
|
|
52
57
|
}
|
|
53
58
|
}
|
|
54
59
|
connectedCallback() {
|
|
@@ -91,12 +96,12 @@ export class Ddaselect {
|
|
|
91
96
|
render() {
|
|
92
97
|
const labelId = `${this.button_id}-label`;
|
|
93
98
|
const valueId = `${this.button_id}-value`;
|
|
94
|
-
return (h(Host, { key: '
|
|
99
|
+
return (h(Host, { key: 'b2ea43f3cc071d70ea0c61d143824d49c7aff023' }, h("div", { key: '950000c97017a28e0188deb01243fd13b0963c1b', class: `
|
|
95
100
|
dda-input-container ${this.custom_class}
|
|
96
101
|
${this.component_mode}
|
|
97
102
|
${this.disabled ? 'dda-input-disabled' : ''}
|
|
98
103
|
dda-input-size-${this.size} dda-validation-${this.validation_type}
|
|
99
|
-
` }, this.label && (h("span", { key: '
|
|
104
|
+
` }, this.label && (h("span", { key: '5e6272c8b235646208167480e6149024687d2341', id: labelId, class: "dda-input-label" }, this.label)), h("div", { key: '0caa270da5785caec0c2e47769de205f2b085745', class: "dda-dropdown-container" }, h("button", { key: 'dc0e6b6f5d2d704e0d50c9472a3c82e20f6fbd6b', 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: '2f4839cad9b6aa1113054c81416798a8cc30d1bb', id: valueId, class: "dda-select-button-label" }, this.selectedText || this.placeholder), h("i", { key: '50c1eafec7ab95152088b07889dde1ba29aef178', class: "material-icons", "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: 'aca0e036afea36b25ab22e1e4440d25cebd2c41a', 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))))));
|
|
100
105
|
}
|
|
101
106
|
static get is() { return "dda-select"; }
|
|
102
107
|
static get properties() {
|
|
@@ -474,6 +479,21 @@ export class Ddaselect {
|
|
|
474
479
|
"resolved": "{ id: number; text: string; }",
|
|
475
480
|
"references": {}
|
|
476
481
|
}
|
|
482
|
+
}, {
|
|
483
|
+
"method": "onChanged",
|
|
484
|
+
"name": "onChanged",
|
|
485
|
+
"bubbles": true,
|
|
486
|
+
"cancelable": true,
|
|
487
|
+
"composed": true,
|
|
488
|
+
"docs": {
|
|
489
|
+
"tags": [],
|
|
490
|
+
"text": ""
|
|
491
|
+
},
|
|
492
|
+
"complexType": {
|
|
493
|
+
"original": "{ id: number; text: string }",
|
|
494
|
+
"resolved": "{ id: number; text: string; }",
|
|
495
|
+
"references": {}
|
|
496
|
+
}
|
|
477
497
|
}, {
|
|
478
498
|
"method": "selectBlurred",
|
|
479
499
|
"name": "selectBlurred",
|
|
@@ -489,6 +509,21 @@ export class Ddaselect {
|
|
|
489
509
|
"resolved": "{ name: string; value: string; }",
|
|
490
510
|
"references": {}
|
|
491
511
|
}
|
|
512
|
+
}, {
|
|
513
|
+
"method": "onBlurred",
|
|
514
|
+
"name": "onBlurred",
|
|
515
|
+
"bubbles": true,
|
|
516
|
+
"cancelable": true,
|
|
517
|
+
"composed": true,
|
|
518
|
+
"docs": {
|
|
519
|
+
"tags": [],
|
|
520
|
+
"text": ""
|
|
521
|
+
},
|
|
522
|
+
"complexType": {
|
|
523
|
+
"original": "{ name: string; value: string }",
|
|
524
|
+
"resolved": "{ name: string; value: string; }",
|
|
525
|
+
"references": {}
|
|
526
|
+
}
|
|
492
527
|
}];
|
|
493
528
|
}
|
|
494
529
|
static get methods() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dda-select.js","sourceRoot":"","sources":["../../../src/components/dda-select/dda-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, h, Host, Element, Event, EventEmitter, 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() selectBlurred: EventEmitter<{ name: string; value: string }>;\r\n\r\n private get parsedOptions(): { id: number; text: string }[] {\r\n try {\r\n return JSON.parse(this.options);\r\n } catch {\r\n return [];\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n const selectedOption = this.parsedOptions.find(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: number; text: string }) {\r\n if (!this.disabled) {\r\n this.selectedId = option.id;\r\n this.selectedText = option.text;\r\n this.is_open = false;\r\n this.selectChanged.emit(option);\r\n }\r\n }\r\n\r\n handleClickOutside = (event: MouseEvent) => {\r\n if (this.is_open && !this.el.contains(event.target as Node)) {\r\n this.is_open = false;\r\n }\r\n };\r\n\r\n handleBlur = () => {\r\n this.selectBlurred.emit({\r\n name: this.input_name || this.button_id,\r\n value: this.selectedText || '',\r\n });\r\n };\r\n\r\n 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 @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"]}
|
|
1
|
+
{"version":3,"file":"dda-select.js","sourceRoot":"","sources":["../../../src/components/dda-select/dda-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, h, Host, Element, Event, EventEmitter, 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<{ id: number; text: string }>;\r\n\r\n @Event() selectBlurred: EventEmitter<{ name: string; value: string }>;\r\n @Event() onBlurred: EventEmitter<{ name: string; value: string }>;\r\n\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: number; text: string }) {\r\n if (!this.disabled) {\r\n this.selectedId = option.id;\r\n this.selectedText = option.text;\r\n this.is_open = false;\r\n this.selectChanged.emit(option);\r\n this.onChanged.emit(option);\r\n }\r\n }\r\n\r\n handleClickOutside = (event: MouseEvent) => {\r\n if (this.is_open && !this.el.contains(event.target as Node)) {\r\n this.is_open = false;\r\n }\r\n };\r\n\r\n handleBlur = () => {\r\n this.selectBlurred.emit({\r\n name: this.input_name || this.button_id,\r\n value: this.selectedText || '',\r\n });\r\n this.onBlurred.emit({\r\n name: this.input_name || this.button_id,\r\n value: this.selectedText || '',\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 @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"]}
|
|
@@ -41,6 +41,7 @@ export class DdaTextarea {
|
|
|
41
41
|
this.internalValue = content;
|
|
42
42
|
this.characterCount = this.quill.getText().trim().length;
|
|
43
43
|
this.textareaChanged.emit(); // optional
|
|
44
|
+
this.onChanged.emit();
|
|
44
45
|
});
|
|
45
46
|
if (this.value) {
|
|
46
47
|
this.quill.root.innerHTML = this.value;
|
|
@@ -58,10 +59,12 @@ export class DdaTextarea {
|
|
|
58
59
|
this.internalValue = val;
|
|
59
60
|
this.characterCount = val.length;
|
|
60
61
|
this.textareaChanged.emit(event);
|
|
62
|
+
this.onChanged.emit(event);
|
|
61
63
|
}
|
|
62
64
|
handleBlur(event) {
|
|
63
65
|
const val = event.target.value.trim();
|
|
64
66
|
this.textareaBlurred.emit({ name: this.textarea_name, value: val });
|
|
67
|
+
this.onBlurred.emit({ name: this.textarea_name, value: val });
|
|
65
68
|
}
|
|
66
69
|
render() {
|
|
67
70
|
const textareaClass = [
|
|
@@ -72,7 +75,7 @@ export class DdaTextarea {
|
|
|
72
75
|
this.component_mode,
|
|
73
76
|
this.textarea_name,
|
|
74
77
|
].filter(Boolean).join(' ');
|
|
75
|
-
return (h(Host, { key: '
|
|
78
|
+
return (h(Host, { key: 'b115804206b2c236ea220444e422d6f923244219' }, h("div", { key: '302195d1acdb1c3705bda71e0f925dd363095693', class: textareaClass }, this.label && (h("label", { key: 'e7e7ae567e899b07aa4a8127e7ce8dfd566a48ca', 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) })), this.validation_type === 'error' && this.error_message ? (h("div", { class: "dda-error-message", id: this.validation_id }, h("span", { class: "dda-d-flex dda-items-center dda-gap-2" }, this.show_info_icon && (h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "info")), this.error_message), h("span", { class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))) : (h("div", { class: "dda-helper-text", id: this.validation_id }, h("span", { class: "dda-d-flex dda-items-center dda-gap-2" }, this.show_info_icon && (h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "info")), this.helper_text), h("span", { class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))))));
|
|
76
79
|
}
|
|
77
80
|
static get is() { return "dda-textarea"; }
|
|
78
81
|
static get properties() {
|
|
@@ -407,6 +410,21 @@ export class DdaTextarea {
|
|
|
407
410
|
"resolved": "any",
|
|
408
411
|
"references": {}
|
|
409
412
|
}
|
|
413
|
+
}, {
|
|
414
|
+
"method": "onChanged",
|
|
415
|
+
"name": "onChanged",
|
|
416
|
+
"bubbles": true,
|
|
417
|
+
"cancelable": true,
|
|
418
|
+
"composed": true,
|
|
419
|
+
"docs": {
|
|
420
|
+
"tags": [],
|
|
421
|
+
"text": ""
|
|
422
|
+
},
|
|
423
|
+
"complexType": {
|
|
424
|
+
"original": "any",
|
|
425
|
+
"resolved": "any",
|
|
426
|
+
"references": {}
|
|
427
|
+
}
|
|
410
428
|
}, {
|
|
411
429
|
"method": "textareaBlurred",
|
|
412
430
|
"name": "textareaBlurred",
|
|
@@ -422,6 +440,21 @@ export class DdaTextarea {
|
|
|
422
440
|
"resolved": "{ name: string; value: string; }",
|
|
423
441
|
"references": {}
|
|
424
442
|
}
|
|
443
|
+
}, {
|
|
444
|
+
"method": "onBlurred",
|
|
445
|
+
"name": "onBlurred",
|
|
446
|
+
"bubbles": true,
|
|
447
|
+
"cancelable": true,
|
|
448
|
+
"composed": true,
|
|
449
|
+
"docs": {
|
|
450
|
+
"tags": [],
|
|
451
|
+
"text": ""
|
|
452
|
+
},
|
|
453
|
+
"complexType": {
|
|
454
|
+
"original": "{ name: string; value: string }",
|
|
455
|
+
"resolved": "{ name: string; value: string; }",
|
|
456
|
+
"references": {}
|
|
457
|
+
}
|
|
425
458
|
}];
|
|
426
459
|
}
|
|
427
460
|
static get methods() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dda-textarea.js","sourceRoot":"","sources":["../../../src/components/dda-textarea/dda-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Element, State, Method, Event, EventEmitter } from '@stencil/core';\r\nimport Quill from 'quill';\r\nimport 'quill/dist/quill.snow.css';\r\n\r\n@Component({\r\n tag: 'dda-textarea',\r\n styleUrls: [],\r\n shadow: false,\r\n})\r\nexport class DdaTextarea {\r\n @Prop() label: string;\r\n @Prop() placeholder: string;\r\n @Prop() max_characters: number;\r\n @Prop() value: string = '';\r\n @Prop() input_id: string;\r\n @Prop() textarea_name: string;\r\n @Prop() aria_label?: string;\r\n @Prop() show_info_icon: boolean = false;\r\n @Prop() helper_text?: string;\r\n @Prop() error_message: string;\r\n @Prop() validation_type?: string;\r\n @Prop() validation_id: string;\r\n @Prop() input_status?: string;\r\n @Prop() custom_class?: string;\r\n @Prop() component_mode?: string;\r\n @Prop() enable_rich_editor?: boolean;\r\n\r\n @Element() el: HTMLElement;\r\n\r\n @State() characterCount: number = 0;\r\n @State() internalValue: string = '';\r\n\r\n private quill: Quill;\r\n\r\n // ✅ NEW: Events\r\n @Event() textareaChanged: EventEmitter<any>;\r\n @Event() textareaBlurred: EventEmitter<{ name: string; value: string }>;\r\n\r\n // ✅ NEW: External value getter\r\n @Method()\r\n async getValue() {\r\n return this.internalValue || this.value || '';\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.enable_rich_editor) {\r\n const editor = this.el.querySelector('#editor') as HTMLElement;\r\n this.quill = new Quill(editor, {\r\n modules: {\r\n toolbar: [\r\n ['bold', 'italic', 'underline', 'strike'],\r\n ['blockquote', 'code-block'],\r\n [{ list: 'ordered' }, { list: 'bullet' }],\r\n [{ script: 'sub' }, { script: 'super' }],\r\n [{ indent: '-1' }, { indent: '+1' }],\r\n [{ direction: 'rtl' }],\r\n [{ header: [1, 2, 3, 4, 5, 6, false] }],\r\n [{ color: [] }, { background: [] }],\r\n [{ font: [] }],\r\n [{ align: [] }],\r\n ['clean'],\r\n ['link', 'image', 'video'],\r\n ],\r\n },\r\n theme: 'snow',\r\n placeholder: this.placeholder,\r\n });\r\n\r\n this.quill.on('text-change', () => {\r\n const content = this.quill.root.innerHTML;\r\n this.internalValue = content;\r\n this.characterCount = this.quill.getText().trim().length;\r\n this.textareaChanged.emit(); // optional\r\n });\r\n\r\n if (this.value) {\r\n this.quill.root.innerHTML = this.value;\r\n this.internalValue = this.value;\r\n this.characterCount = this.quill.getText().trim().length;\r\n }\r\n } else {\r\n this.internalValue = this.value;\r\n this.characterCount = this.value?.length || 0;\r\n }\r\n }\r\n\r\n handleInput(event: Event) {\r\n const val = (event.target as HTMLTextAreaElement).value;\r\n this.internalValue = val;\r\n this.characterCount = val.length;\r\n this.textareaChanged.emit(event);\r\n }\r\n\r\n handleBlur(event: Event) {\r\n const val = (event.target as HTMLTextAreaElement).value.trim();\r\n this.textareaBlurred.emit({ name: this.textarea_name, value: val });\r\n }\r\n\r\n render() {\r\n const textareaClass = [\r\n 'dda-input-container dda-richtext-editor',\r\n this.validation_type ? `dda-validation-${this.validation_type}` : '',\r\n this.input_status ? `dda-input-${this.input_status}` : '',\r\n this.custom_class,\r\n this.component_mode,\r\n this.textarea_name,\r\n ].filter(Boolean).join(' ');\r\n\r\n return (\r\n <Host>\r\n <div class={textareaClass}>\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\r\n {this.enable_rich_editor ? (\r\n <div id=\"editor\" class=\"dda-richeditor-field\"></div>\r\n ) : (\r\n <textarea\r\n id={this.input_id}\r\n name={this.textarea_name}\r\n aria-label={this.aria_label}\r\n placeholder={this.placeholder}\r\n value={this.internalValue || this.value}\r\n aria-invalid={this.validation_type === 'error' ? 'true' : 'false'}\r\n class=\"dda-input-field dda-input-textarea\"\r\n maxLength={this.max_characters}\r\n onInput={(event) => this.handleInput(event)}\r\n onBlur={(event) => this.handleBlur(event)}\r\n ></textarea>\r\n )}\r\n\r\n {this.validation_type === 'error' && this.error_message ? (\r\n <div class=\"dda-error-message\" id={this.validation_id}>\r\n <span class=\"dda-d-flex dda-items-center dda-gap-2\">\r\n {this.show_info_icon && (\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">\r\n info\r\n </i>\r\n )}\r\n {this.error_message}\r\n </span>\r\n <span class=\"dda-letter-count\">\r\n {this.characterCount} / {this.max_characters}\r\n </span>\r\n </div>\r\n ) : (\r\n <div class=\"dda-helper-text\" id={this.validation_id}>\r\n <span class=\"dda-d-flex dda-items-center dda-gap-2\">\r\n {this.show_info_icon && (\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">\r\n info\r\n </i>\r\n )}\r\n {this.helper_text}\r\n </span>\r\n <span class=\"dda-letter-count\">\r\n {this.characterCount} / {this.max_characters}\r\n </span>\r\n </div>\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
|
|
1
|
+
{"version":3,"file":"dda-textarea.js","sourceRoot":"","sources":["../../../src/components/dda-textarea/dda-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Element, State, Method, Event, EventEmitter } from '@stencil/core';\r\nimport Quill from 'quill';\r\nimport 'quill/dist/quill.snow.css';\r\n\r\n@Component({\r\n tag: 'dda-textarea',\r\n styleUrls: [],\r\n shadow: false,\r\n})\r\nexport class DdaTextarea {\r\n @Prop() label: string;\r\n @Prop() placeholder: string;\r\n @Prop() max_characters: number;\r\n @Prop() value: string = '';\r\n @Prop() input_id: string;\r\n @Prop() textarea_name: string;\r\n @Prop() aria_label?: string;\r\n @Prop() show_info_icon: boolean = false;\r\n @Prop() helper_text?: string;\r\n @Prop() error_message: string;\r\n @Prop() validation_type?: string;\r\n @Prop() validation_id: string;\r\n @Prop() input_status?: string;\r\n @Prop() custom_class?: string;\r\n @Prop() component_mode?: string;\r\n @Prop() enable_rich_editor?: boolean;\r\n\r\n @Element() el: HTMLElement;\r\n\r\n @State() characterCount: number = 0;\r\n @State() internalValue: string = '';\r\n\r\n private quill: Quill;\r\n\r\n // ✅ NEW: Events\r\n @Event() textareaChanged: EventEmitter<any>;\r\n @Event() onChanged: EventEmitter<any>;\r\n\r\n @Event() textareaBlurred: EventEmitter<{ name: string; value: string }>;\r\n @Event() onBlurred: EventEmitter<{ name: string; value: string }>;\r\n\r\n\r\n // ✅ NEW: External value getter\r\n @Method()\r\n async getValue() {\r\n return this.internalValue || this.value || '';\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.enable_rich_editor) {\r\n const editor = this.el.querySelector('#editor') as HTMLElement;\r\n this.quill = new Quill(editor, {\r\n modules: {\r\n toolbar: [\r\n ['bold', 'italic', 'underline', 'strike'],\r\n ['blockquote', 'code-block'],\r\n [{ list: 'ordered' }, { list: 'bullet' }],\r\n [{ script: 'sub' }, { script: 'super' }],\r\n [{ indent: '-1' }, { indent: '+1' }],\r\n [{ direction: 'rtl' }],\r\n [{ header: [1, 2, 3, 4, 5, 6, false] }],\r\n [{ color: [] }, { background: [] }],\r\n [{ font: [] }],\r\n [{ align: [] }],\r\n ['clean'],\r\n ['link', 'image', 'video'],\r\n ],\r\n },\r\n theme: 'snow',\r\n placeholder: this.placeholder,\r\n });\r\n\r\n this.quill.on('text-change', () => {\r\n const content = this.quill.root.innerHTML;\r\n this.internalValue = content;\r\n this.characterCount = this.quill.getText().trim().length;\r\n this.textareaChanged.emit(); // optional\r\n this.onChanged.emit(); \r\n });\r\n\r\n if (this.value) {\r\n this.quill.root.innerHTML = this.value;\r\n this.internalValue = this.value;\r\n this.characterCount = this.quill.getText().trim().length;\r\n }\r\n } else {\r\n this.internalValue = this.value;\r\n this.characterCount = this.value?.length || 0;\r\n }\r\n }\r\n\r\n handleInput(event: Event) {\r\n const val = (event.target as HTMLTextAreaElement).value;\r\n this.internalValue = val;\r\n this.characterCount = val.length;\r\n this.textareaChanged.emit(event);\r\n this.onChanged.emit(event);\r\n }\r\n\r\n handleBlur(event: Event) {\r\n const val = (event.target as HTMLTextAreaElement).value.trim();\r\n this.textareaBlurred.emit({ name: this.textarea_name, value: val });\r\n this.onBlurred.emit({ name: this.textarea_name, value: val });\r\n }\r\n\r\n render() {\r\n const textareaClass = [\r\n 'dda-input-container dda-richtext-editor',\r\n this.validation_type ? `dda-validation-${this.validation_type}` : '',\r\n this.input_status ? `dda-input-${this.input_status}` : '',\r\n this.custom_class,\r\n this.component_mode,\r\n this.textarea_name,\r\n ].filter(Boolean).join(' ');\r\n\r\n return (\r\n <Host>\r\n <div class={textareaClass}>\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\r\n {this.enable_rich_editor ? (\r\n <div id=\"editor\" class=\"dda-richeditor-field\"></div>\r\n ) : (\r\n <textarea\r\n id={this.input_id}\r\n name={this.textarea_name}\r\n aria-label={this.aria_label}\r\n placeholder={this.placeholder}\r\n value={this.internalValue || this.value}\r\n aria-invalid={this.validation_type === 'error' ? 'true' : 'false'}\r\n class=\"dda-input-field dda-input-textarea\"\r\n maxLength={this.max_characters}\r\n onInput={(event) => this.handleInput(event)}\r\n onBlur={(event) => this.handleBlur(event)}\r\n ></textarea>\r\n )}\r\n\r\n {this.validation_type === 'error' && this.error_message ? (\r\n <div class=\"dda-error-message\" id={this.validation_id}>\r\n <span class=\"dda-d-flex dda-items-center dda-gap-2\">\r\n {this.show_info_icon && (\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">\r\n info\r\n </i>\r\n )}\r\n {this.error_message}\r\n </span>\r\n <span class=\"dda-letter-count\">\r\n {this.characterCount} / {this.max_characters}\r\n </span>\r\n </div>\r\n ) : (\r\n <div class=\"dda-helper-text\" id={this.validation_id}>\r\n <span class=\"dda-d-flex dda-items-center dda-gap-2\">\r\n {this.show_info_icon && (\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">\r\n info\r\n </i>\r\n )}\r\n {this.helper_text}\r\n </span>\r\n <span class=\"dda-letter-count\">\r\n {this.characterCount} / {this.max_characters}\r\n </span>\r\n </div>\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
|
|
@@ -7,9 +7,10 @@ export class DdaToggle {
|
|
|
7
7
|
const toggleClass = ['dda-toggle-btn', this.size ? `dda-toggle-${this.size}` : '', this.custom_class ? `${this.custom_class}` : '', this.component_mode]
|
|
8
8
|
.filter(Boolean)
|
|
9
9
|
.join(' ');
|
|
10
|
-
return (h(Host, { key: '
|
|
10
|
+
return (h(Host, { key: '5548a49f32dea01195caf2a86f4a04f3f1b14a73' }, h("label", { key: '33608675617c7551fdcb519470e806109ef7209e', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '5355df7fe3de4dcda50d2fd43920e95bbb4d0968', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked, onChange: event => {
|
|
11
11
|
this.toggleChanged.emit(event);
|
|
12
|
-
|
|
12
|
+
this.onChanged.emit(event);
|
|
13
|
+
} }), h("span", { key: 'ed36eef7bb72e28521786f0eda989e9c095d0bb9', class: "toggle" }), h("p", { key: 'cf52347775fe7ae54ceee0814f5b23ec66e0433b' }, h("span", { key: '3d99822b9da959875f8a7c555fe173525257587f', class: "toggle-title" }, "Radio Button Title"), h("span", { key: '9bba5e196b2ee9e0301c0f562e4d343cab20126f', class: "toggle-supporting" }, "Supporting Text")))));
|
|
13
14
|
}
|
|
14
15
|
static get is() { return "dda-toggle"; }
|
|
15
16
|
static get originalStyleUrls() {
|
|
@@ -176,6 +177,21 @@ export class DdaToggle {
|
|
|
176
177
|
"resolved": "any",
|
|
177
178
|
"references": {}
|
|
178
179
|
}
|
|
180
|
+
}, {
|
|
181
|
+
"method": "onChanged",
|
|
182
|
+
"name": "onChanged",
|
|
183
|
+
"bubbles": true,
|
|
184
|
+
"cancelable": true,
|
|
185
|
+
"composed": true,
|
|
186
|
+
"docs": {
|
|
187
|
+
"tags": [],
|
|
188
|
+
"text": ""
|
|
189
|
+
},
|
|
190
|
+
"complexType": {
|
|
191
|
+
"original": "any",
|
|
192
|
+
"resolved": "any",
|
|
193
|
+
"references": {}
|
|
194
|
+
}
|
|
179
195
|
}];
|
|
180
196
|
}
|
|
181
197
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dda-toggle.js","sourceRoot":"","sources":["../../../src/components/dda-toggle/dda-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,SAAS;IALtB;QAUU,iBAAY,GAAY,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"dda-toggle.js","sourceRoot":"","sources":["../../../src/components/dda-toggle/dda-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,SAAS;IALtB;QAUU,iBAAY,GAAY,EAAE,CAAC;KAsCpC;IA5BC,MAAM;QACJ,MAAM,WAAW,GAAG,CAAC,gBAAgB,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,cAAc,CAAC;aACrJ,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAC;QAEb,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ;gBAC/C,4EACc,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,KAAK,CAAC,EAAE;wBAChB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;wBAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;oBAC7B,CAAC,GACD;gBACF,6DAAM,KAAK,EAAC,QAAQ,GAAQ;gBAC5B;oBACE,6DAAM,KAAK,EAAC,cAAc,yBAA0B;oBACpD,6DAAM,KAAK,EAAC,mBAAmB,sBAAuB,CACpD,CACE,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dda-toggle',\r\n styleUrls: ['dda-toggle.css'],\r\n shadow: false,\r\n})\r\nexport class DdaToggle {\r\n @Prop() checked: boolean;\r\n // @Prop() labelOn: string = 'On';\r\n //@Prop() labelOff: string = 'Off';\r\n @Prop() size?: string; // e.g., 'sm', 'md', 'lg'\r\n @Prop() custom_class?: string = '';\r\n @Prop() group_name?: string;\r\n @Prop() input_id?: string;\r\n @Prop() component_mode?: string;\r\n @Prop() aria_label: string;\r\n\r\n @Event() toggleChanged: EventEmitter<any>;\r\n @Event() onChanged: EventEmitter<any>;\r\n\r\n\r\n render() {\r\n const toggleClass = ['dda-toggle-btn', this.size ? `dda-toggle-${this.size}` : '', this.custom_class ? `${this.custom_class}` : '', this.component_mode]\r\n .filter(Boolean)\r\n .join(' ');\r\n\r\n return (\r\n <Host>\r\n <label class={toggleClass} htmlFor={this.input_id}>\r\n <input\r\n aria-label={this.aria_label}\r\n type=\"checkbox\"\r\n id={this.input_id}\r\n name={this.group_name}\r\n checked={this.checked}\r\n onChange={event => {\r\n this.toggleChanged.emit(event);\r\n this.onChanged.emit(event);\r\n }}\r\n />\r\n <span class=\"toggle\"></span>\r\n <p>\r\n <span class=\"toggle-title\">Radio Button Title</span>\r\n <span class=\"toggle-supporting\">Supporting Text</span>\r\n </p>\r\n </label>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h } from './p-f6588843.js';
|
|
2
2
|
import { d as defineCustomElement$7 } from './p-a7f02338.js';
|
|
3
3
|
import { d as defineCustomElement$6 } from './p-f0f752d2.js';
|
|
4
|
-
import { d as defineCustomElement$5 } from './p-
|
|
4
|
+
import { d as defineCustomElement$5 } from './p-5b2ec1a3.js';
|
|
5
5
|
import { d as defineCustomElement$4 } from './p-42b74b87.js';
|
|
6
|
-
import { d as defineCustomElement$3 } from './p-
|
|
6
|
+
import { d as defineCustomElement$3 } from './p-c30d0ada.js';
|
|
7
7
|
import { d as defineCustomElement$2 } from './p-e5df7bea.js';
|
|
8
8
|
|
|
9
9
|
const ddaHeaderMainCss = ".dda-header{width:100%;height:auto;background:var(--dda-surface-100);box-shadow:0px 6px 7px 0px rgba(0, 0, 0, 0.13);position:fixed;top:0;left:0;z-index:999}body.transparent .dda-header{background:transparent;box-shadow:none}.dda-header.white{background:var(--dda-surface-100) !important}.dda-header .dda-container-fluid{position:relative}body.transparent .dda-header.white{box-shadow:0px 6px 7px 0px rgba(0, 0, 0, 0.13)}body.transparent .dda-header::before{content:\"\";width:100%;height:250px;background:linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 63.02%, rgba(0, 0, 0, 0) 100%);position:absolute;top:0;left:0}.dda-header.white::before{display:none !important}.dda-head-logo{width:90vw;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;position:relative;direction:ltr !important}.govt-logo img{height:72px}.entt-logo img{height:54px}body.transparent .logo-colored{display:none}.logo-white{display:none}body.transparent .logo-white{display:block}.dda-header.white .dda-head-logo .logo-colored,:root[data-theme='dark'] .dda-head-logo .logo-white{display:block}.dda-header.white .dda-head-logo .logo-white,:root[data-theme='dark'] .dda-head-logo .logo-colored{display:none}:root[data-theme='dark'] .dda-header.white .dda-head-logo .logo-white{display:block}.dda-menu-container{width:90vw;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:relative}.dda-main-navigation{display:flex;align-items:center;gap:10px}.dda-menu-overley{width:100%;height:100vh;background:#0000007e;position:fixed;top:0;left:0;z-index:1;display:none}.dda-menu-overley.show-overley{display:block}.hamburger-menu{display:flex;align-items:center}.hamburger-menu>dda-tooltip{height:22px}.hamburger-menu-btn{width:27px;height:22px;padding:0;background-color:transparent;border:transparent;position:relative}.hamburger-menu-btn::before,.hamburger-menu-btn::after{content:\"\"}.hamburger-menu-btn::before,.hamburger-menu-btn::after,.hamburger-line{content:\"\";width:21px;height:2px;border-radius:4px;background-color:var(--dda-on-surface-30);position:absolute;left:3px}.hamburger-menu-btn::before{top:4px}.hamburger-menu-btn::after{bottom:4px}.hamburger-line{top:10px}.hamburger-menu-btn:hover::before,.hamburger-menu-btn:hover::after,.hamburger-menu-btn:hover .hamburger-line{background-color:var(--dda-color-primary-40)}body.transparent .hamburger-menu-btn::before,body.transparent .hamburger-menu-btn::after,body.transparent .hamburger-line{background-color:var(--dda-neutral-100) !important}.hamburger-menu-btn.close-menu .hamburger-line{display:none}.hamburger-menu-btn.close-menu::before{transform:rotate(45deg);top:10px}.hamburger-menu-btn.close-menu::after{transform:rotate(-45deg);bottom:10px}.hamburger-menu-text{width:0;height:0;opacity:0;position:absolute}.close-btn{position:absolute;inset-block-start:1.5rem;inset-inline-end:1.5rem;background:none;border:0;font-size:1.5em;z-index:10;color:#999999}.dda-header-megamenu{width:100%;padding:0 15px;position:fixed;top:175px;left:0}.dda-header-submenu-item{min-height:350px;background:var(--dda-surface-100);border-radius:8px;margin:0 auto;padding:42px 15px;box-shadow:0px 10px 15px -3px rgba(16, 24, 40, 0.1);position:relative}.dda-header-submenu-item .dda-header-submenu-title{font-size:var(--font-h6);font-weight:var(--font-weight-regular);color:var(--dda-on-surface-0);text-transform:uppercase;padding-inline-start:69px;margin-bottom:10px}.dda-header-submenu-item ul{display:flex;flex-direction:column;gap:8px;list-style:none}.dda-toolbar-menu,.dda-toolbar-menu-sidemenu{padding:0}.dda-toolbar-menu ul,.dda-toolbar-menu-sidemenu ul{display:flex;gap:10px;justify-content:center;margin:0px}.dda-toolbar-menu ul li .tool-btn,.dda-toolbar-menu-sidemenu ul li .tool-btn{height:40px;min-width:40px;background-color:var(--dda-surface-96);font-size:var(--font-body);color:var(--dda-on-surface-10);font-weight:var(--font-weight-regular);border:0px;padding:11px;border-radius:50px;display:inline-flex;align-items:center;justify-content:center;gap:10px}.dda-toolbar-menu ul li .tool-btn:focus-visible,.dda-toolbar-menu-sidemenu ul li .tool-btn:focus-visible{outline:solid 1px var(--dda-on-primary-variant-40) !important;outline-offset:-1px}.dda-toolbar-menu ul li .tool-btn img,.dda-toolbar-menu-sidemenu ul li .tool-btn img{height:17px;width:17px}.da-header-search{display:none}.dda-toolbar-menu ul li .tool-btn i,.dda-toolbar-menu ul li .tool-btn svg,.dda-toolbar-menu-sidemenu ul li .tool-btn i,.dda-toolbar-menu-sidemenu ul li .tool-btn svg{font-size:20px;color:var(--dda-on-surface-variant-30)}@media only screen and (min-width: 768px){body.transparent .dda-toolbar-menu ul li .tool-btn,body.transparent .dda-toolbar-menu-sidemenu ul li .tool-btn{background-color:rgb(41 42 45 / 14%);color:var(--dda-neutral-100)}body.transparent .dda-toolbar-menu ul li .tool-btn i,body.transparent .dda-toolbar-menu ul li .tool-btn svg,body.transparent .dda-toolbar-menu-sidemenu ul li .tool-btn i,body.transparent .dda-toolbar-menu-sidemenu ul li .tool-btn svg{color:var(--dda-neutral-100)}}.dda-search{position:relative}.dda-search i,.dda-search svg{font-size:21px;color:var(--dda-on-surface-variant-30);position:absolute;top:9px;inset-inline-start:10px;z-index:1}.dda-header-search-input{padding:0px !important}.dda-search input[type=\"text\"]{width:110px;height:40px;background-color:transparent;border:0px;font-family:var(--font-family-main);font-size:var(--font-body);font-weight:var(--font-weight-regular);color:var(--dda-on-surface-0);border-radius:100px;padding-inline-start:40px !important;padding-inline-end:10px;}.dda-search input[type=\"text\"]:focus{width:250px;}.dda-search input[type=\"text\"]::-ms-input-placeholder{color:var(--dda-on-surface-0)}.dda-search input[type=\"text\"]::placeholder{color:var(--dda-on-surface-0)}body.transparent .dda-header .dda-search input[type=\"text\"]{color:var(--dda-surface-100)}body.transparent .dda-search input[type=\"text\"]::-ms-input-placeholder{color:var(--dda-neutral-100)}body.transparent .dda-search input[type=\"text\"]::placeholder{color:var(--dda-neutral-100)}body.transparent .dda-search i{color:var(--dda-neutral-100)}.dda-sidemenu{display:none;width:375px;background:var(--dda-surface-100);box-shadow:0px 4px 12px 0px rgba(0, 0, 0, 0.12);position:fixed;top:0px;inset-inline-start:-375px;bottom:0px;z-index:9;}.dda-sidemenu-content{display:flex;flex-direction:column;gap:15px;padding:32px;overflow-y:auto;height:100%}.dda-sidemenu-content::-webkit-scrollbar{width:6px}.dda-sidemenu-content::-webkit-scrollbar-track{background:var(--dda-surface-variant-90)}.dda-sidemenu-content::-webkit-scrollbar-thumb{background:var(--dda-surface-variant-80)}.dda-sidemenu-content::-webkit-scrollbar-thumb:hover{background:var(--dda-color-primary-40)}.dda-side-nav-title{font-size:var(--font-h6);font-weight:var(--font-weight-regular);text-transform:uppercase;color:var(--dda-on-surface-0)}ul.main_side_menu{margin:0;margin-bottom:30px !important;padding:0px}ul.main_side_menu li{list-style:none;padding:0}ul.main_side_menu li a{display:flex;justify-content:space-between;padding-top:13px;padding-bottom:14px;text-decoration:none;font-size:var(--font-body);font-weight:var(--font-weight-regular);color:var(--dda-on-surface-0);border-bottom:1px solid var(--dda-surface-90);width:100%;cursor:pointer;position:relative}.main_sub_menu>ol>li:last-child>a{border-bottom:0}ul.main_side_menu li a.showSub::after,ul.main_side_menu li a.showSubSub::after{content:\"\";width:9px;height:9px;border-right:solid 2px var(--dda-color-primary-40);border-bottom:solid 2px var(--dda-color-primary-40);position:absolute;top:50%;inset-inline-end:3px;margin-top:-4.5px;transform:rotate(-45deg);}ul.main_side_menu li a i{display:block}:root[dir='rtl'] ul.main_side_menu li a i{transform:rotate(180deg)}:root[dir='rtl'] ul.main_side_menu li a.showSub::after,:root[dir='rtl'] ul.main_side_menu li a.showSubSub::after{transform:rotate(135deg)}:root[dir='rtl'] .material-icons{direction:rtl}ul.main_side_menu li a:hover,ul.main_side_menu li a.icon_arrow{color:var(--dda-color-primary-40);border-bottom:solid 2px var(--dda-color-primary-40);padding-bottom:13px}ul.main_side_menu li a.showSub.icon_arrow::after,ul.main_side_menu li a.showSubSub.icon_arrow::after{border-right:solid 2px var(--dda-color-primary-40);border-bottom:solid 2px var(--dda-color-primary-40)}ul.main_side_menu li .main_sub_menu{display:none;position:fixed;margin-top:-50px;inset-inline-start:380px;width:350px;background:var(--dda-surface-100);padding:25px 20px 15px 20px;border-radius:10px;box-shadow:0px 4px 12px 0px rgba(0, 0, 0, 0.12)}ul.main_side_menu li .main_sub_menu.showSubMenu{display:block}.main_sub_menu ol{padding:0px}ul.main_side_menu .main_sub_menu{padding:25px 10px 15px 20px}.main_sub_menu>ol{max-height:380px;overflow:auto;padding:2px 2px 10px 2px}.dda-side-nav__title{font-size:var(--font-h6);color:var(--font-h6);font-weight:var(--font-weight-regular);text-transform:uppercase;margin-bottom:10px}.main_sub_menu>ol::-webkit-scrollbar{width:3px}.main_sub_menu>ol::-webkit-scrollbar-track{background:#fafafa}.main_sub_menu>ol::-webkit-scrollbar-thumb{background:var(--dda-neutral-variant-92)}.main_sub_menu>ol::-webkit-scrollbar-thumb:hover{background:var(--dda-neutral-variant-92)}.main_sub_menu li{position:relative}ul.main_side_menu .main_sub_menu .main_sub_menu{inset-inline-start:735px}ul.main_side_menu .main_sub_menu .main_sub_menu .main_sub_menu{inset-inline-start:1090px}.side-nav-close-btn{top:1.5rem;inset-inline-end:1.5rem}.dda-sidemenu-bottom{width:100%;position:fixed;inset-inline-start:0;bottom:0;display:none}.dda-sidemenu-gov-logo{display:flex;justify-content:center}.dda-sidemenu-gov-logo a{display:inline-block}.dda-sidemenu-gov-logo img{height:44px}.dda-accessibility-wrap{width:100%;padding:0 10px;position:fixed;top:185px;left:0}.dda-accessibility{max-width:880px;margin:0 auto;background:var(--dda-surface-100);padding:20px;border-radius:8px;box-shadow:0px 4px 12px 0px rgba(0, 0, 0, 0.12);position:relative;display:none;}.mobile-accessibility{padding-top:35px;position:absolute;top:0px;z-index:10;height:100%}.mobile-accessibility-content{display:block;padding:0 14px;height:100%;overflow-y:auto}.mobile-accessibility-content::-webkit-scrollbar{width:6px}.mobile-accessibility-content::-webkit-scrollbar-track{background:var(--dda-surface-variant-90)}.mobile-accessibility-content::-webkit-scrollbar-thumb{background:var(--dda-surface-variant-80)}.mobile-accessibility-content::-webkit-scrollbar-thumb:hover{background:var(--dda-color-primary-40)}.dda-accessibility-item{border-inline-start:solid 1px #E5E5E5}.dda-accessibility .dda-row .dda-accessibility-item:first-child{border:0px}.dda-theme-list{display:flex;flex-direction:column;gap:8px;border:0px}.close_accessibility{top:5px;inset-inline-end:5px}.dda-login-popup.desktop,.dda-login-popup.mobile{display:none}.dda-login-popup{background-color:var(--dda-surface-100);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1),\r\n 0 4px 6px -4px rgba(0, 0, 0, 0.1);border:1px solid var(--dda-surface-variant-90);border-radius:0.5rem;padding:0.75rem;z-index:50;height:fit-content;min-width:110px}.dda-login-popup.desktop{position:fixed;top:170px;bottom:auto;inset-inline-end:5.5rem}.dda-login-popup.mobile{position:fixed;bottom:2.5rem;inset-inline-end:6rem}.dda-login-popup ul>:not(:last-child){border-bottom:1px solid var(--dda-surface-variant-90)}.dda-login-popup a{text-align:start;padding-inline:0.5rem;padding-block:0.25rem;display:inline-block;text-decoration:none;width:100%;color:var(--dda-surface-0);border-radius:4px}.dda-login-popup a:hover{background-color:var(--dda-on-primary-98);color:var(--dda-on-primary-variant-40)}@media (min-width: 640px){.dda-login-popup{inset-inline-end:8rem}}@media (max-width: 768px){.dda-login-popup.desktop{display:none !important}}@media (min-width: 767px){.dda-login-popup.mobile{display:none !important}}.dda-mobile-entt-logo,.dda-mobile-search{display:none;overflow:hidden}.dda-mobile-search a,.dda-mobile-search button{width:30px;padding:0;background:transparent;border:transparent}.dda-mobile-search a i,.dda-mobile-search a svg,.dda-mobile-search button i,.dda-mobile-search button svg{font-size:23px;color:var(--dda-on-surface-variant-30)}.dda-mobile-search a svg,.dda-mobile-search button svg{fill:var(--dda-on-surface-variant-30)}body.transparent .dda-mobile-search a i,body.transparent .dda-mobile-search a svg,body.transparent .dda-mobile-search button i,body.transparent .dda-mobile-search button svg{color:var(--dda-neutral-100)}.maincontent{padding-top:170px;padding-bottom:100px}@media screen and (max-width: 767px){body.transparent .dda-header::before{height:130px}.dda-header{padding:0 !important}.dda-menu-overley{display:none !important}.side-nav-close-btn{display:block}.dda-menu-container{width:100vw;height:80px;position:relative}.dda-head-logo{display:none}.dda-mobile-entt-logo,.dda-mobile-search{display:block}.dda-mobile-entt-logo img{height:40px}.dda-toolbar-menu{position:absolute;width:0;display:none}.dda-toolbar-menu ul li .tool-btn{display:none}.dda-accessibility-wrap{top:81px;padding:0}.dda-accessibility-wrap .dda-accessibility{height:calc(100vh - 82px);border-radius:0px;box-shadow:none}.dda-accessibility .dda-row{gap:30px}.dda-accessibility-item{border:0px}.dda-sidemenu-content{height:calc(100% - 130px);padding:32px 17px 32px 32px}.dda-sidemenu .dda-sidemenu-bottom{display:block;position:initial}.main_side_menu .dda-side-nav__title{display:none}.main_side_menu_wrap{height:calc(100% - 100px);overflow:auto;padding:5px}.main_side_menu_wrap::-webkit-scrollbar{width:3px}.main_side_menu_wrap::-webkit-scrollbar-track{background:#fafafa}.main_side_menu_wrap::-webkit-scrollbar-thumb{background:#e7e7e7}.main_side_menu_wrap::-webkit-scrollbar-thumb:hover{background:#d4d4d4}.dda-sidemenu{width:100%;top:80px;padding-inline-end:15px}ul.main_side_menu li a{padding-left:10px;padding-right:10px}ul.main_side_menu li .main_sub_menu{position:inherit !important;inset-inline-start:inherit !important;top:inherit ! Important;margin:0px !important;width:100% !important;padding:0px;box-shadow:none;border-radius:0px}ul.main_side_menu li a.showSub::after{transform:rotate(45deg);inset-inline-end:13px}ul.main_side_menu li a.icon_arrow::after{transform:rotate(-135deg)}:root[dir='rtl'] ul.main_side_menu li a.showSub::after,:root[dir='rtl'] ul.main_side_menu li a.showSubSub::after{transform:rotate(45deg)}:root[dir='rtl'] ul.main_side_menu li a.showSub.icon_arrow::after{transform:rotate(-135deg)}.main_sub_menu>ol>li:last-child>a{border-bottom:1px solid #00000022}ul.main_side_menu li a.icon_arrow,ul.main_side_menu .main_sub_menu li a .icon_arrow{color:var(--dda-color-primary-40)}ul.main_side_menu .main_sub_menu ol{height:auto;max-height:none;padding:0;padding-inline-start:10px}.maincontent{padding-top:100px}ul.main_side_menu a.showSub.icon_arrow{background-color:var(--dda-on-primary-94)}ul.main_side_menu .main_sub_menu.showSubMenu{background-color:var(--dda-on-primary-98)}ul.main_side_menu li a:hover{padding-bottom:13px}}@media (max-width: 1024px){.dda-header{padding:10px 0}.dda-head-logo,.dda-menu-container{width:100vw}}@media (prefers-reduced-motion: no-preference){.dda-search input[type=\"text\"]{transition:all 250ms ease}.dda-header{transition:all 300ms ease-in-out}.dda-sidemenu{transition:left 0.5s ease}ul.main_side_menu li a.showSub::after,ul.main_side_menu li a.showSubSub::after{transition:all 250ms ease}.dda-accessibility{transition:left 0.5s ease}}";
|
|
@@ -185,6 +185,7 @@ const DdaPhoneField = /*@__PURE__*/ proxyCustomElement(class DdaPhoneField exten
|
|
|
185
185
|
super();
|
|
186
186
|
this.__registerHost();
|
|
187
187
|
this.phoneBlurred = createEvent(this, "phoneBlurred", 7);
|
|
188
|
+
this.onBlurred = createEvent(this, "onBlurred", 7);
|
|
188
189
|
this.placeholder = 'Enter phone number';
|
|
189
190
|
this.validation_id = 'text';
|
|
190
191
|
this.disabled = false;
|
|
@@ -208,6 +209,10 @@ const DdaPhoneField = /*@__PURE__*/ proxyCustomElement(class DdaPhoneField exten
|
|
|
208
209
|
name: this.phone_input_name,
|
|
209
210
|
value: this.internalValue.trim()
|
|
210
211
|
});
|
|
212
|
+
this.onBlurred.emit({
|
|
213
|
+
name: this.phone_input_name,
|
|
214
|
+
value: this.internalValue.trim()
|
|
215
|
+
});
|
|
211
216
|
}
|
|
212
217
|
watchHandler(newValue) {
|
|
213
218
|
this.internalValue = newValue;
|
|
@@ -239,6 +244,10 @@ const DdaPhoneField = /*@__PURE__*/ proxyCustomElement(class DdaPhoneField exten
|
|
|
239
244
|
name: this.phone_input_name,
|
|
240
245
|
value: this.internalValue.trim()
|
|
241
246
|
});
|
|
247
|
+
this.onBlurred.emit({
|
|
248
|
+
name: this.phone_input_name,
|
|
249
|
+
value: this.internalValue.trim()
|
|
250
|
+
});
|
|
242
251
|
}
|
|
243
252
|
handlephonenumberChange(event) {
|
|
244
253
|
const target = event.target;
|
|
@@ -260,7 +269,7 @@ const DdaPhoneField = /*@__PURE__*/ proxyCustomElement(class DdaPhoneField exten
|
|
|
260
269
|
}
|
|
261
270
|
render() {
|
|
262
271
|
const inputClass = `${this.component_mode} ${this.size ? `dda-input-size-${this.size}` : ''} ${this.error_message ? `dda-error-message` : ''} ${this.validation_type ? `dda-validation-${this.validation_type}` : ''} ${this.is_focused ? 'dda-input-focus' : ''} ${this.internalValue ? 'dda-input-focus-filled' : ''}`;
|
|
263
|
-
return (h(Host, { key: '
|
|
272
|
+
return (h(Host, { key: '536b5776354d2baa1accb5614e28f18f4e16cc41', ref: (el) => this.hostElement = el }, h("div", { key: '70e1c8297d1c04f8bba3702bad9ce201a1e33309', class: `dda-input-container ${inputClass} ${this.custom_class} ${this.disabled ? 'dda-input-disabled' : ''}` }, this.label && h("label", { key: '9527d8fc868abf4b1ddca345d87a71df9aeeeea1', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: 'df78a8dfa93281c3de6206db05b0498c6aa03c9a', class: `dda-input-field-group dda-phone-field` }, h("div", { key: 'feba11b8c237aae12bd36fcf2172bbe75a871295', class: "dda-input-dropdown-btn" }, h("button", { key: '00b4ce8c1e82b23a738f32fe8879291703f0303d', type: "button", name: this.toggle_button_name, class: "dda-dropdown-select", onClick: () => this.toggleDropdown() }, h("img", { key: 'b226050ee9bf0580ca9a39d3a7dd8300bd421fcc', src: this.country_flag, alt: "", width: "20" }), " ", this.country_code, h("i", { key: '4457ef48f82ee65976486a2866c5d1ffc4528ac1', class: "material-icons", "aria-hidden": "true" }, "keyboard_arrow_down")), this.dropdown_open && (h("div", { key: 'd595b834384499e1ea7b3f14916239ca8c03ad85', class: "dda-input-dropdown-list" }, this.countries.map(country => (h("button", { id: `countryCode${country.code}`, name: this.country_select_button_name, "aria-label": this.button_aria_label, type: "button", class: "country-select dda-input-dropdown-item", onClick: () => this.selectCountry(country) }, h("img", { src: country.flag, alt: "", width: "20" }), " ", country.code)))))), h("input", { key: '8b1273e7cdeea5e307ca770f48de3d6f3510d8b4', id: this.input_id, name: this.phone_input_name, "aria-label": this.aria_label, type: "text", inputmode: "numeric", maxlength: this.max_length, pattern: "[0-9]*", class: "dda-field-group-input", placeholder: this.placeholder, value: this.internalValue, disabled: this.disabled, onFocus: this.handleFocus.bind(this), onInput: (e) => this.handlephonenumberChange(e), onKeyDown: (e) => this.handleKeyDown(e), onBlur: () => this.handleBlur() })), 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))))));
|
|
264
273
|
}
|
|
265
274
|
static get watchers() { return {
|
|
266
275
|
"value": ["watchHandler"]
|