@dubai-design-system/components-js 3.11.8 → 3.11.9

package/dist/cjs/dda-toggle.cjs.entry.js

@@ -11,15 +11,17 @@ const DdaToggle = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.toggleChanged = index.createEvent(this, "toggleChanged", 7);
+        this.onChanged = index.createEvent(this, "onChanged", 7);
         this.custom_class = '';
     }
     render() {
         const toggleClass = ['dda-toggle-btn', this.size ? `dda-toggle-${this.size}` : '', this.custom_class ? `${this.custom_class}` : '', this.component_mode]
             .filter(Boolean)
             .join(' ');
-        return (index.h(index.Host, { key: '7c3db88316052b19c146996798f7fcd73cd57603' }, index.h("label", { key: 'f685e06c7873a986343c68e65049aae955479e34', class: toggleClass, htmlFor: this.input_id }, index.h("input", { key: '175fb25ce0c6c2322d3125bbf265c4d88d963b4e', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked, onChange: event => {
+        return (index.h(index.Host, { key: '5548a49f32dea01195caf2a86f4a04f3f1b14a73' }, index.h("label", { key: '33608675617c7551fdcb519470e806109ef7209e', class: toggleClass, htmlFor: this.input_id }, index.h("input", { key: '5355df7fe3de4dcda50d2fd43920e95bbb4d0968', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked, onChange: event => {
                 this.toggleChanged.emit(event);
-            } }), index.h("span", { key: '410c2812dfa4c27eac881ac9402e66357a750e22', class: "toggle" }), index.h("p", { key: '0a87c75f7b1d525b91f511186f6baba5bc6f5828' }, index.h("span", { key: 'bfc55b0af5a746f40440e0b0d5e85a311210e98e', class: "toggle-title" }, "Radio Button Title"), index.h("span", { key: 'b61ca61425927c00da8643986e06a547f4b8d925', class: "toggle-supporting" }, "Supporting Text")))));
+                this.onChanged.emit(event);
+            } }), index.h("span", { key: 'ed36eef7bb72e28521786f0eda989e9c095d0bb9', class: "toggle" }), index.h("p", { key: 'cf52347775fe7ae54ceee0814f5b23ec66e0433b' }, index.h("span", { key: '3d99822b9da959875f8a7c555fe173525257587f', class: "toggle-title" }, "Radio Button Title"), index.h("span", { key: '9bba5e196b2ee9e0301c0f562e4d343cab20126f', class: "toggle-supporting" }, "Supporting Text")))));
     }
 };
 DdaToggle.style = DdaToggleStyle0;

package/dist/cjs/dda-toggle.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dda-toggle.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,mvEAAmvE,CAAC;AACzwE,wBAAe,YAAY;;MCMd,SAAS;IALtB;;;QAUU,iBAAY,GAAY,EAAE,CAAC;KAmCpC;IA3BC,MAAM;QACJ,MAAM,WAAW,GAAG,CAAC,gBAAgB,EAAE,IAAI,CAAC,IAAI,GAAG,cAAc,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,IAAI,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,EAAE,IAAI,CAAC,cAAc,CAAC;aACrJ,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAC;QAEb,QACEA,QAACC,UAAI,uDACHD,oEAAO,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IAC/CA,kFACc,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;gBACb,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aAChC,GACD,EACFA,mEAAM,KAAK,EAAC,QAAQ,GAAQ,EAC5BA,kEACEA,mEAAM,KAAK,EAAC,cAAc,yBAA0B,EACpDA,mEAAM,KAAK,EAAC,mBAAmB,sBAAuB,CACpD,CACE,CACH,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/dda-toggle/dda-toggle.css?tag=dda-toggle","src/components/dda-toggle/dda-toggle.tsx"],"sourcesContent":[".dda-toggle-btn {\r\n  display: inline-flex;\r\n  align-items: flex-start;\r\n  cursor: pointer;\r\n  position: relative;\r\n  gap: 10px;\r\n}\r\n.dda-toggle-btn p{\r\n  margin: 0;\r\n}\r\n.dda-toggle-btn .toggle {\r\n  width: 35px;\r\n  height: 20px;\r\n  vertical-align: sub;\r\n  display: inline-block;\r\n  background: var(--dda-neutral-variant-90);\r\n  border-radius: 60px;\r\n  cursor: pointer;\r\n  margin: 0px;\r\n  position: relative;\r\n}\r\n.dda-toggle-btn input {\r\n  position: absolute;\r\n  opacity: 0;\r\n  cursor: pointer;\r\n  height: 0;\r\n  width: 0;\r\n}\r\n.dda-toggle-btn .toggle::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  display: block;\r\n  /* -moz-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);\r\n  -o-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);\r\n  -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);\r\n  transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1); */\r\n  background: var(--dda-neutral-100);\r\n  height: 16px;\r\n  width: 16px;\r\n  top: 2px;\r\n  left: 2px;\r\n  border-radius: 60px;\r\n}\r\n.dda-toggle-btn input:checked~.toggle{\r\n  background: var(--dda-color-primary-40);\r\n  -webkit-box-shadow: 0px 0px 0px 3px var(--dda-primary-95);\r\n  -moz-box-shadow: 0px 0px 0px 3px var(--dda-primary-95);\r\n  box-shadow: 0px 0px 0px 3px var(--dda-primary-95);\r\n}\r\n.light-mode.dda-toggle-btn input:checked~.toggle{\r\n  background: var(--dda-primary-40);\r\n}\r\n.dda-toggle-btn input:checked~.toggle::after {\r\n  left: 17px;\r\n}\r\n\r\n.dda-toggle-sm .toggle{\r\n  width: 27px;\r\n  height: 16px;\r\n}\r\n.dda-toggle-sm .toggle::after{\r\n  width: 12px;\r\n  height: 12px;\r\n}\r\n.dda-toggle-sm input:checked~.toggle::after {\r\n  left: 13px;\r\n}\r\n\r\n.dda-toggle-md .toggle{\r\n  width: 35px;\r\n  height: 20px;\r\n}\r\n.dda-toggle-md .toggle::after{\r\n  height: 16px;\r\n  width: 16px;\r\n}\r\n.dda-toggle-md input:checked~.toggle::after {\r\n  left: 17px;\r\n}\r\n\r\n.dda-toggle-lg .toggle{\r\n  width: 45px;\r\n  height: 24px;\r\n}\r\n.dda-toggle-lg .toggle::after{\r\n  height: 20px;\r\n  width: 20px;\r\n}\r\n.dda-toggle-lg input:checked~.toggle::after {\r\n  left: 23px;\r\n}\r\n\r\n.toggle-title{\r\n  color: var(--dda-on-surface-0);\r\n  font-weight: var(--dda-fw-500);\r\n  display: block;\r\n}\r\n.light-mode .toggle-title{\r\n  color: var(--dda-neutral-0);\r\n}\r\n.toggle-supporting{\r\n  display: block;\r\n  color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .toggle-supporting{\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n.dda-toggle-sm .toggle-title, .dda-toggle-md .toggle-title{\r\n  font-size: var(--font-caption);\r\n}\r\n.dda-toggle-sm .toggle-supporting {\r\n  font-size: var(--dda-fs-label-lg);\r\n}\r\n.dda-toggle-lg .toggle-title {\r\n  font-size: var(--dda-fs-title-sm);\r\n}\r\n.dda-toggle-md .toggle-supporting,\r\n.dda-toggle-lg .toggle-supporting{\r\n  font-size: var(--font-caption);\r\n}\r\n\r\n\r\n@media (prefers-reduced-motion: no-preference) {\r\n  .dda-toggle-btn .toggle::after {\r\n    -moz-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);\r\n    -o-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);\r\n    -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);\r\n    transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);\r\n  } \r\n}","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-toggle',\r\n  styleUrls: ['dda-toggle.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaToggle {\r\n  @Prop() checked: boolean;\r\n  // @Prop() labelOn: string = 'On';\r\n  //@Prop() labelOff: string = 'Off';\r\n  @Prop() size?: string; // e.g., 'sm', 'md', 'lg'\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() group_name?: string;\r\n  @Prop() input_id?: string;\r\n  @Prop() component_mode?: string;\r\n  @Prop() aria_label: string;\r\n\r\n  @Event() toggleChanged: EventEmitter<any>;\r\n\r\n  render() {\r\n    const toggleClass = ['dda-toggle-btn', this.size ? `dda-toggle-${this.size}` : '', this.custom_class ? `${this.custom_class}` : '', this.component_mode]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    return (\r\n      <Host>\r\n        <label class={toggleClass} htmlFor={this.input_id}>\r\n          <input\r\n            aria-label={this.aria_label}\r\n            type=\"checkbox\"\r\n            id={this.input_id}\r\n            name={this.group_name}\r\n            checked={this.checked}\r\n            onChange={event => {\r\n              this.toggleChanged.emit(event);\r\n            }}\r\n          />\r\n          <span class=\"toggle\"></span>\r\n          <p>\r\n            <span class=\"toggle-title\">Radio Button Title</span>\r\n            <span class=\"toggle-supporting\">Supporting Text</span>\r\n          </p>\r\n        </label>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dda-toggle.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,mvEAAmvE,CAAC;AACzwE,wBAAe,YAAY;;MCMd,SAAS;IALtB;;;;QAUU,iBAAY,GAAY,EAAE,CAAC;KAsCpC;IA5BC,MAAM;QACJ,MAAM,WAAW,GAAG,CAAC,gBAAgB,EAAE,IAAI,CAAC,IAAI,GAAG,cAAc,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,IAAI,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,EAAE,IAAI,CAAC,cAAc,CAAC;aACrJ,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAC;QAEb,QACEA,QAACC,UAAI,uDACHD,oEAAO,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IAC/CA,kFACc,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;gBACb,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aAC5B,GACD,EACFA,mEAAM,KAAK,EAAC,QAAQ,GAAQ,EAC5BA,kEACEA,mEAAM,KAAK,EAAC,cAAc,yBAA0B,EACpDA,mEAAM,KAAK,EAAC,mBAAmB,sBAAuB,CACpD,CACE,CACH,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/dda-toggle/dda-toggle.css?tag=dda-toggle","src/components/dda-toggle/dda-toggle.tsx"],"sourcesContent":[".dda-toggle-btn {\r\n  display: inline-flex;\r\n  align-items: flex-start;\r\n  cursor: pointer;\r\n  position: relative;\r\n  gap: 10px;\r\n}\r\n.dda-toggle-btn p{\r\n  margin: 0;\r\n}\r\n.dda-toggle-btn .toggle {\r\n  width: 35px;\r\n  height: 20px;\r\n  vertical-align: sub;\r\n  display: inline-block;\r\n  background: var(--dda-neutral-variant-90);\r\n  border-radius: 60px;\r\n  cursor: pointer;\r\n  margin: 0px;\r\n  position: relative;\r\n}\r\n.dda-toggle-btn input {\r\n  position: absolute;\r\n  opacity: 0;\r\n  cursor: pointer;\r\n  height: 0;\r\n  width: 0;\r\n}\r\n.dda-toggle-btn .toggle::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  display: block;\r\n  /* -moz-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);\r\n  -o-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);\r\n  -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);\r\n  transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1); */\r\n  background: var(--dda-neutral-100);\r\n  height: 16px;\r\n  width: 16px;\r\n  top: 2px;\r\n  left: 2px;\r\n  border-radius: 60px;\r\n}\r\n.dda-toggle-btn input:checked~.toggle{\r\n  background: var(--dda-color-primary-40);\r\n  -webkit-box-shadow: 0px 0px 0px 3px var(--dda-primary-95);\r\n  -moz-box-shadow: 0px 0px 0px 3px var(--dda-primary-95);\r\n  box-shadow: 0px 0px 0px 3px var(--dda-primary-95);\r\n}\r\n.light-mode.dda-toggle-btn input:checked~.toggle{\r\n  background: var(--dda-primary-40);\r\n}\r\n.dda-toggle-btn input:checked~.toggle::after {\r\n  left: 17px;\r\n}\r\n\r\n.dda-toggle-sm .toggle{\r\n  width: 27px;\r\n  height: 16px;\r\n}\r\n.dda-toggle-sm .toggle::after{\r\n  width: 12px;\r\n  height: 12px;\r\n}\r\n.dda-toggle-sm input:checked~.toggle::after {\r\n  left: 13px;\r\n}\r\n\r\n.dda-toggle-md .toggle{\r\n  width: 35px;\r\n  height: 20px;\r\n}\r\n.dda-toggle-md .toggle::after{\r\n  height: 16px;\r\n  width: 16px;\r\n}\r\n.dda-toggle-md input:checked~.toggle::after {\r\n  left: 17px;\r\n}\r\n\r\n.dda-toggle-lg .toggle{\r\n  width: 45px;\r\n  height: 24px;\r\n}\r\n.dda-toggle-lg .toggle::after{\r\n  height: 20px;\r\n  width: 20px;\r\n}\r\n.dda-toggle-lg input:checked~.toggle::after {\r\n  left: 23px;\r\n}\r\n\r\n.toggle-title{\r\n  color: var(--dda-on-surface-0);\r\n  font-weight: var(--dda-fw-500);\r\n  display: block;\r\n}\r\n.light-mode .toggle-title{\r\n  color: var(--dda-neutral-0);\r\n}\r\n.toggle-supporting{\r\n  display: block;\r\n  color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .toggle-supporting{\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n.dda-toggle-sm .toggle-title, .dda-toggle-md .toggle-title{\r\n  font-size: var(--font-caption);\r\n}\r\n.dda-toggle-sm .toggle-supporting {\r\n  font-size: var(--dda-fs-label-lg);\r\n}\r\n.dda-toggle-lg .toggle-title {\r\n  font-size: var(--dda-fs-title-sm);\r\n}\r\n.dda-toggle-md .toggle-supporting,\r\n.dda-toggle-lg .toggle-supporting{\r\n  font-size: var(--font-caption);\r\n}\r\n\r\n\r\n@media (prefers-reduced-motion: no-preference) {\r\n  .dda-toggle-btn .toggle::after {\r\n    -moz-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);\r\n    -o-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);\r\n    -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);\r\n    transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);\r\n  } \r\n}","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"],"version":3}

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

@@ -15,11 +15,13 @@ export class DdaInput {
     }
     async setValue(val) {
         this.internalValue = val;
-        this.inputChanged.emit(val);
+        // this.inputChanged.emit(val);
+        this.onChanged.emit(val);
     }
     async reset() {
         this.internalValue = '';
-        this.inputChanged.emit('');
+        // this.inputChanged.emit('');
+        this.onChanged.emit('');
     }
     componentWillLoad() {
         this.internalValue = this.value || '';
@@ -62,12 +64,14 @@ export class DdaInput {
             describedByIds.push(`${this.validation_id}-helper`);
         if (this.validation_type === 'error' && this.error_message)
             describedByIds.push(`${this.validation_id}-error`);
-        return (h(Host, { key: '4e003cdf89adeda38b90792d6347e7eea6d66f38' }, h("div", { key: '592b69be98bbba7466d13eafe1a7d8f1aaa6dced', class: inputClass }, this.label && (h("label", { key: '2ade0edb9bf64d6afeb4c4fd108721f42cc88df8', htmlFor: this.input_id, class: "dda-input-label", id: `${this.input_id}-label` }, this.label)), h("input", { key: '03a91a4707af534a9fb20116e3af0f08e1ecfd27', id: this.input_id, name: this.input_name, class: `dda-input-field dda-input-text ${this.type === 'date' && this.value ? 'has-value' : ''}`, type: this.type, role: this.input_role, placeholder: this.placeholder, value: this.internalValue, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.validation_type === 'error' ? 'true' : 'false', "aria-describedby": `${this.input_id}-label`, "aria-label": !this.label ? this.aria_label : undefined, onInput: event => {
+        return (h(Host, { key: '050ec4a94d4ddce7ea14fc7911cf5225f79e1376' }, h("div", { key: '698dd6f4d8a00790a8ddb65964497dee11e6bf18', class: inputClass }, this.label && (h("label", { key: 'e5a8fefae383e688aa5a8254409da83d7cd2f163', htmlFor: this.input_id, class: "dda-input-label", id: `${this.input_id}-label` }, this.label)), h("input", { key: '390569412bb0b904acb174e2caabdbb1473fd6d1', id: this.input_id, name: this.input_name, class: `dda-input-field dda-input-text ${this.type === 'date' && this.value ? 'has-value' : ''}`, type: this.type, role: this.input_role, placeholder: this.placeholder, value: this.internalValue, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.validation_type === 'error' ? 'true' : 'false', "aria-describedby": `${this.input_id}-label`, "aria-label": !this.label ? this.aria_label : undefined, onInput: event => {
                 this.internalValue = event.target.value;
-                this.inputChanged.emit(this.internalValue);
+                this.inputChanged.emit(event);
+                this.onChanged.emit(event);
             }, onBlur: event => {
                 const value = event.target.value.trim();
                 this.inputBlurred.emit({ name: this.input_name, value });
+                this.onBlurred.emit({ name: this.input_name, value });
             } }), this.validation_type === 'error' && this.error_message ? (h("span", { class: "dda-error-message", id: this.validation_id, role: "alert" }, this.error_message)) : (this.helper_text && (h("span", { class: "dda-helper-text", id: this.validation_id }, this.helper_text))))));
     }
     static get is() { return "dda-input"; }
@@ -423,6 +427,21 @@ export class DdaInput {
                     "resolved": "any",
                     "references": {}
                 }
+            }, {
+                "method": "onChanged",
+                "name": "onChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
             }, {
                 "method": "inputBlurred",
                 "name": "inputBlurred",
@@ -438,6 +457,21 @@ export class DdaInput {
                     "resolved": "{ name: string; value: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "onBlurred",
+                "name": "onBlurred",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; value: string }",
+                    "resolved": "{ name: string; value: string; }",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

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

@@ -1 +1 @@
-{"version":3,"file":"dda-input.js","sourceRoot":"","sources":["../../../src/components/dda-input/dda-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Event, EventEmitter, Element, State, Method, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-input',\r\n  styleUrls: [],\r\n  shadow: false,\r\n})\r\nexport class DdaInput {\r\n  @Element() el: HTMLElement;\r\n\r\n  @Prop() label: string;\r\n  @Prop() placeholder: string;\r\n  @Prop() value: string;\r\n  @Prop() type: string = 'text';\r\n  @Prop() input_role: string = 'text';\r\n  @Prop() helper_text: string;\r\n  @Prop() error_message: string;\r\n  @Prop() validation_type?: string;\r\n  @Prop() validation_id: string = 'text';\r\n  @Prop() size?: string;\r\n  @Prop() input_status?: string;\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() required?: boolean = false;\r\n\r\n  @State() internalValue: string = '';\r\n\r\n  @Event() inputChanged: EventEmitter<any>;\r\n  @Event() inputBlurred: EventEmitter<{ name: string; value: string }>;\r\n\r\n  @Method()\r\n  async getValue() {\r\n    return this.internalValue || this.value || '';\r\n  }\r\n\r\n  @Watch('value')\r\n  watchValue(newValue: string) {\r\n    this.internalValue = newValue || '';\r\n  }\r\n\r\n  @Method()\r\n  async setValue(val: string) {\r\n    this.internalValue = val;\r\n    this.inputChanged.emit(val);\r\n  }\r\n\r\n  @Method()\r\n  async reset() {\r\n    this.internalValue = '';\r\n    this.inputChanged.emit('');\r\n  }\r\n  componentWillLoad() {\r\n    this.internalValue = this.value || '';\r\n  }\r\n  componentDidLoad() {\r\n    // Hide date input placeholder\r\n    if (this.type === 'date') {\r\n      const dateInput = this.el.querySelector('input[type=\"date\"]') as HTMLInputElement;\r\n      if (dateInput) {\r\n        dateInput.style.color = 'transparent';\r\n        dateInput.addEventListener('focus', () => {\r\n          dateInput.style.color = '#000';\r\n        });\r\n        dateInput.addEventListener('blur', () => {\r\n          if (!dateInput.value) {\r\n            dateInput.style.color = 'transparent';\r\n          }\r\n        });\r\n        dateInput.addEventListener('change', () => {\r\n          dateInput.style.color = '#000';\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const inputClass = [\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.type === 'Witherror' ? 'dda-validation-error' : '',\r\n      this.type === 'disabled' ? 'dda-input-disabled' : '',\r\n      this.custom_class,\r\n      this.component_mode,\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    const describedByIds: string[] = [];\r\n    if (this.helper_text) describedByIds.push(`${this.validation_id}-helper`);\r\n    if (this.validation_type === 'error' && this.error_message) describedByIds.push(`${this.validation_id}-error`);\r\n\r\n    return (\r\n      <Host>\r\n        <div class={inputClass}>\r\n          {this.label && (\r\n            <label htmlFor={this.input_id} class=\"dda-input-label\" id={`${this.input_id}-label`}>\r\n              {this.label}\r\n            </label>\r\n          )}\r\n          <input\r\n            id={this.input_id}\r\n            name={this.input_name}\r\n            class={`dda-input-field dda-input-text ${this.type === 'date' && this.value ? 'has-value' : ''}`}\r\n            type={this.type}\r\n            role={this.input_role}\r\n            placeholder={this.placeholder}\r\n            value={this.internalValue}\r\n            aria-required={this.required ? 'true' : undefined}\r\n            aria-invalid={this.validation_type === 'error' ? 'true' : 'false'}\r\n            aria-describedby={`${this.input_id}-label`}\r\n            aria-label={!this.label ? this.aria_label : undefined}\r\n            onInput={event => {\r\n              this.internalValue = (event.target as HTMLInputElement).value;\r\n              this.inputChanged.emit(this.internalValue);\r\n            }}\r\n            onBlur={event => {\r\n              const value = (event.target as HTMLInputElement).value.trim();\r\n              this.inputBlurred.emit({ name: this.input_name, value });\r\n            }}\r\n          />\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-input.js","sourceRoot":"","sources":["../../../src/components/dda-input/dda-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Event, EventEmitter, Element, State, Method, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-input',\r\n  styleUrls: [],\r\n  shadow: false,\r\n})\r\nexport class DdaInput {\r\n  @Element() el: HTMLElement;\r\n\r\n  @Prop() label: string;\r\n  @Prop() placeholder: string;\r\n  @Prop() value: string;\r\n  @Prop() type: string = 'text';\r\n  @Prop() input_role: string = 'text';\r\n  @Prop() helper_text: string;\r\n  @Prop() error_message: string;\r\n  @Prop() validation_type?: string;\r\n  @Prop() validation_id: string = 'text';\r\n  @Prop() size?: string;\r\n  @Prop() input_status?: string;\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() required?: boolean = false;\r\n\r\n  @State() internalValue: string = '';\r\n\r\n  @Event() inputChanged: EventEmitter<any>;\r\n  @Event() onChanged: EventEmitter<any>;\r\n\r\n  @Event() inputBlurred: EventEmitter<{ name: string; value: string }>;\r\n  @Event() onBlurred: EventEmitter<{ name: string; value: string }>;\r\n\r\n\r\n  @Method()\r\n  async getValue() {\r\n    return this.internalValue || this.value || '';\r\n  }\r\n\r\n  @Watch('value')\r\n  watchValue(newValue: string) {\r\n    this.internalValue = newValue || '';\r\n  }\r\n\r\n  @Method()\r\n  async setValue(val: string) {\r\n    this.internalValue = val;\r\n    // this.inputChanged.emit(val);\r\n    this.onChanged.emit(val);\r\n  }\r\n\r\n  @Method()\r\n  async reset() {\r\n    this.internalValue = '';\r\n    // this.inputChanged.emit('');\r\n    this.onChanged.emit('')\r\n  }\r\n  componentWillLoad() {\r\n    this.internalValue = this.value || '';\r\n  }\r\n  componentDidLoad() {\r\n    // Hide date input placeholder\r\n    if (this.type === 'date') {\r\n      const dateInput = this.el.querySelector('input[type=\"date\"]') as HTMLInputElement;\r\n      if (dateInput) {\r\n        dateInput.style.color = 'transparent';\r\n        dateInput.addEventListener('focus', () => {\r\n          dateInput.style.color = '#000';\r\n        });\r\n        dateInput.addEventListener('blur', () => {\r\n          if (!dateInput.value) {\r\n            dateInput.style.color = 'transparent';\r\n          }\r\n        });\r\n        dateInput.addEventListener('change', () => {\r\n          dateInput.style.color = '#000';\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const inputClass = [\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.type === 'Witherror' ? 'dda-validation-error' : '',\r\n      this.type === 'disabled' ? 'dda-input-disabled' : '',\r\n      this.custom_class,\r\n      this.component_mode,\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    const describedByIds: string[] = [];\r\n    if (this.helper_text) describedByIds.push(`${this.validation_id}-helper`);\r\n    if (this.validation_type === 'error' && this.error_message) describedByIds.push(`${this.validation_id}-error`);\r\n\r\n    return (\r\n      <Host>\r\n        <div class={inputClass}>\r\n          {this.label && (\r\n            <label htmlFor={this.input_id} class=\"dda-input-label\" id={`${this.input_id}-label`}>\r\n              {this.label}\r\n            </label>\r\n          )}\r\n          <input\r\n            id={this.input_id}\r\n            name={this.input_name}\r\n            class={`dda-input-field dda-input-text ${this.type === 'date' && this.value ? 'has-value' : ''}`}\r\n            type={this.type}\r\n            role={this.input_role}\r\n            placeholder={this.placeholder}\r\n            value={this.internalValue}\r\n            aria-required={this.required ? 'true' : undefined}\r\n            aria-invalid={this.validation_type === 'error' ? 'true' : 'false'}\r\n            aria-describedby={`${this.input_id}-label`}\r\n            aria-label={!this.label ? this.aria_label : undefined}\r\n            onInput={event => {\r\n              this.internalValue = (event.target as HTMLInputElement).value;\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.input_name, value });\r\n              this.onBlurred.emit({ name: this.input_name, value })\r\n            }}\r\n          />\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"]}

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

@@ -25,6 +25,10 @@ export class DdaPhoneField {
             name: this.phone_input_name,
             value: this.internalValue.trim()
         });
+        this.onBlurred.emit({
+            name: this.phone_input_name,
+            value: this.internalValue.trim()
+        });
     }
     watchHandler(newValue) {
         this.internalValue = newValue;
@@ -56,6 +60,10 @@ export class DdaPhoneField {
             name: this.phone_input_name,
             value: this.internalValue.trim()
         });
+        this.onBlurred.emit({
+            name: this.phone_input_name,
+            value: this.internalValue.trim()
+        });
     }
     handlephonenumberChange(event) {
         const target = event.target;
@@ -77,7 +85,7 @@ export class DdaPhoneField {
     }
     render() {
         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' : ''}`;
-        return (h(Host, { key: 'f5be18e3e19cda6fac831f24b0759630ee1257d9', ref: (el) => this.hostElement = el }, h("div", { key: '5f84163882ddabea8babe44909039e2dcad80235', class: `dda-input-container ${inputClass} ${this.custom_class} ${this.disabled ? 'dda-input-disabled' : ''}` }, this.label && h("label", { key: 'c66807dd9286a59470ed33c0326e2b6e4e639aa0', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: 'ebd45ded1e326c39a648927668b7a60d7a40111b', class: `dda-input-field-group dda-phone-field` }, h("div", { key: '5fb330c11cc0ac66d1bf509e54fa3b8fa4614bba', class: "dda-input-dropdown-btn" }, h("button", { key: '3e2d874847210e3d13fa1ea9b8df70800269dc66', type: "button", name: this.toggle_button_name, class: "dda-dropdown-select", onClick: () => this.toggleDropdown() }, h("img", { key: 'b1e5281a6a768f526914d3ab58cd31e10d2cb532', src: this.country_flag, alt: "", width: "20" }), " ", this.country_code, h("i", { key: 'c15bc60be39b9b9510eb76423efe6c75f05f9c07', class: "material-icons", "aria-hidden": "true" }, "keyboard_arrow_down")), this.dropdown_open && (h("div", { key: '6590903e56a9200b8a8ce01575df1765c8f3389e', 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: '947de6d7eb58346c44f37a69a76bf6e5c1bf851e', 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))))));
+        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))))));
     }
     static get is() { return "dda-phonefield"; }
     static get properties() {
@@ -475,6 +483,21 @@ export class DdaPhoneField {
                     "resolved": "{ name: string; value: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "onBlurred",
+                "name": "onBlurred",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; value: string }",
+                    "resolved": "{ name: string; value: string; }",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

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

@@ -1 +1 @@
-{"version":3,"file":"dda-phonefield.js","sourceRoot":"","sources":["../../../src/components/dda-phonefield/dda-phonefield.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, h, Host, Method, Watch } from '@stencil/core';\r\nimport { CountriesList } from '../../assets/countries';\r\n\r\n@Component({\r\n  tag: 'dda-phonefield',\r\n  styleUrls: [],\r\n  shadow: false,\r\n})\r\nexport class DdaPhoneField {\r\n  @Prop() label: string;\r\n  @Prop() placeholder: string = 'Enter phone number';\r\n  @Prop() helper_text: string;\r\n  @Prop() max_length: string;\r\n  @Prop() validation_type?: string;\r\n  @Prop() error_message: string;\r\n  @Prop() validation_id: string = 'text';\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() size?: string;\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() button_id?: string;\r\n  @Prop() button_aria_label: string;\r\n  @Prop() toggle_button_name: string;\r\n  @Prop() country_select_button_name: string;\r\n  @Prop() phone_input_name: string;\r\n  @Prop() value: string;\r\n\r\n  @State() country_code: string = '+971';\r\n  @State() country_flag: string = 'https://flagcdn.com/w320/ae.png';\r\n  @State() internalValue: string = '';\r\n  @State() is_focused: boolean = false;\r\n  @State() dropdown_open: boolean = false;\r\n  @State() countries: { code: string; flag: string }[] = [];\r\n  @State() hostElement: HTMLElement;\r\n\r\n  @Event() phoneBlurred: EventEmitter<{ name: string; value: string }>;\r\n\r\n  @Method()\r\n  async getValue() {\r\n    return this.internalValue || this.value || '';\r\n  }\r\n\r\n  @Method()\r\n  async validatePhoneField() {\r\n    this.phoneBlurred.emit({\r\n      name: this.phone_input_name,\r\n      value: this.internalValue.trim()\r\n    });\r\n  }\r\n\r\n  @Watch('value')\r\n  watchHandler(newValue: string) {\r\n    this.internalValue = newValue;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.countries = CountriesList;\r\n    this.internalValue = this.value || '';\r\n  }\r\n\r\n  componentDidLoad() {\r\n    document.addEventListener('click', this.handleDocumentClick);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleDocumentClick);\r\n  }\r\n\r\n  handleDocumentClick = (event: MouseEvent) => {\r\n    if (this.dropdown_open && this.hostElement && !this.hostElement.contains(event.target as Node)) {\r\n      this.dropdown_open = false;\r\n    }\r\n  }\r\n\r\n  toggleDropdown() {\r\n    this.dropdown_open = !this.dropdown_open;\r\n  }\r\n\r\n  selectCountry(country: { code: string; flag: string }) {\r\n    this.country_code = country.code;\r\n    this.country_flag = country.flag;\r\n    this.dropdown_open = false;\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    this.phoneBlurred.emit({\r\n      name: this.phone_input_name,\r\n      value: this.internalValue.trim()\r\n    });\r\n  }\r\n\r\n  handlephonenumberChange(event: Event) {\r\n    const target = event.target as HTMLInputElement;\r\n    const targetvalue = target.value.replace(/\\D/g, '');\r\n    this.internalValue = targetvalue;\r\n  }\r\n\r\n  handleKeyDown(event: KeyboardEvent) {\r\n  const allowedKeys = [\r\n    'Backspace', 'ArrowLeft', 'ArrowRight', 'Delete', 'Tab'\r\n  ];\r\n\r\n  if (\r\n    allowedKeys.includes(event.key) ||\r\n    (event.ctrlKey || event.metaKey) // Allow copy/paste shortcuts\r\n  ) {\r\n    return;\r\n  }\r\n\r\n  if (!/^\\d$/.test(event.key)) {\r\n    event.preventDefault();\r\n  }\r\n}\r\n\r\n  render() {\r\n    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' : ''}`;\r\n\r\n    return (\r\n      <Host ref={(el) => this.hostElement = el as HTMLElement}>\r\n        <div class={`dda-input-container ${inputClass} ${this.custom_class} ${this.disabled ? 'dda-input-disabled' : ''}`}>\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-phone-field`}>\r\n            <div class=\"dda-input-dropdown-btn\">\r\n              <button type=\"button\" name={this.toggle_button_name} class=\"dda-dropdown-select\" onClick={() => this.toggleDropdown()}>\r\n                <img src={this.country_flag} alt=\"\" width=\"20\" /> {this.country_code}\r\n                <i class=\"material-icons\" aria-hidden=\"true\">keyboard_arrow_down</i>\r\n              </button>\r\n              {this.dropdown_open && (\r\n                <div class=\"dda-input-dropdown-list\">\r\n                  {this.countries.map(country => (\r\n                    <button\r\n                      id={`countryCode${country.code}`}\r\n                      name={this.country_select_button_name}\r\n                      aria-label={this.button_aria_label}\r\n                      type=\"button\"\r\n                      class=\"country-select dda-input-dropdown-item\"\r\n                      onClick={() => this.selectCountry(country)}\r\n                    >\r\n                      <img src={country.flag} alt=\"\" width=\"20\" /> {country.code}\r\n                    </button>\r\n                  ))}\r\n                </div>\r\n              )}\r\n            </div>\r\n            <input\r\n              id={this.input_id}\r\n              name={this.phone_input_name}\r\n              aria-label={this.aria_label}\r\n              type=\"text\"\r\n              inputmode=\"numeric\"\r\n              maxlength={this.max_length}\r\n              pattern=\"[0-9]*\"\r\n              class=\"dda-field-group-input\"\r\n              placeholder={this.placeholder}\r\n              value={this.internalValue}\r\n              disabled={this.disabled}\r\n              onFocus={this.handleFocus.bind(this)}\r\n              onInput={(e) => this.handlephonenumberChange(e)}\r\n              onKeyDown={(e) => this.handleKeyDown(e)}\r\n              onBlur={() => this.handleBlur()}\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-phonefield.js","sourceRoot":"","sources":["../../../src/components/dda-phonefield/dda-phonefield.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, h, Host, Method, Watch } from '@stencil/core';\r\nimport { CountriesList } from '../../assets/countries';\r\n\r\n@Component({\r\n  tag: 'dda-phonefield',\r\n  styleUrls: [],\r\n  shadow: false,\r\n})\r\nexport class DdaPhoneField {\r\n  @Prop() label: string;\r\n  @Prop() placeholder: string = 'Enter phone number';\r\n  @Prop() helper_text: string;\r\n  @Prop() max_length: string;\r\n  @Prop() validation_type?: string;\r\n  @Prop() error_message: string;\r\n  @Prop() validation_id: string = 'text';\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() size?: string;\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() button_id?: string;\r\n  @Prop() button_aria_label: string;\r\n  @Prop() toggle_button_name: string;\r\n  @Prop() country_select_button_name: string;\r\n  @Prop() phone_input_name: string;\r\n  @Prop() value: string;\r\n\r\n  @State() country_code: string = '+971';\r\n  @State() country_flag: string = 'https://flagcdn.com/w320/ae.png';\r\n  @State() internalValue: string = '';\r\n  @State() is_focused: boolean = false;\r\n  @State() dropdown_open: boolean = false;\r\n  @State() countries: { code: string; flag: string }[] = [];\r\n  @State() hostElement: HTMLElement;\r\n\r\n  @Event() phoneBlurred: EventEmitter<{ name: string; value: string }>;\r\n  @Event() onBlurred: EventEmitter<{ name: string; value: string }>;\r\n\r\n\r\n  @Method()\r\n  async getValue() {\r\n    return this.internalValue || this.value || '';\r\n  }\r\n\r\n  @Method()\r\n  async validatePhoneField() {\r\n    this.phoneBlurred.emit({\r\n      name: this.phone_input_name,\r\n      value: this.internalValue.trim()\r\n    });\r\n     this.onBlurred.emit({\r\n      name: this.phone_input_name,\r\n      value: this.internalValue.trim()\r\n    });\r\n  }\r\n\r\n  @Watch('value')\r\n  watchHandler(newValue: string) {\r\n    this.internalValue = newValue;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.countries = CountriesList;\r\n    this.internalValue = this.value || '';\r\n  }\r\n\r\n  componentDidLoad() {\r\n    document.addEventListener('click', this.handleDocumentClick);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleDocumentClick);\r\n  }\r\n\r\n  handleDocumentClick = (event: MouseEvent) => {\r\n    if (this.dropdown_open && this.hostElement && !this.hostElement.contains(event.target as Node)) {\r\n      this.dropdown_open = false;\r\n    }\r\n  }\r\n\r\n  toggleDropdown() {\r\n    this.dropdown_open = !this.dropdown_open;\r\n  }\r\n\r\n  selectCountry(country: { code: string; flag: string }) {\r\n    this.country_code = country.code;\r\n    this.country_flag = country.flag;\r\n    this.dropdown_open = false;\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    this.phoneBlurred.emit({\r\n      name: this.phone_input_name,\r\n      value: this.internalValue.trim()\r\n    });\r\n     this.onBlurred.emit({\r\n      name: this.phone_input_name,\r\n      value: this.internalValue.trim()\r\n    });\r\n  }\r\n\r\n  handlephonenumberChange(event: Event) {\r\n    const target = event.target as HTMLInputElement;\r\n    const targetvalue = target.value.replace(/\\D/g, '');\r\n    this.internalValue = targetvalue;\r\n  }\r\n\r\n  handleKeyDown(event: KeyboardEvent) {\r\n  const allowedKeys = [\r\n    'Backspace', 'ArrowLeft', 'ArrowRight', 'Delete', 'Tab'\r\n  ];\r\n\r\n  if (\r\n    allowedKeys.includes(event.key) ||\r\n    (event.ctrlKey || event.metaKey) // Allow copy/paste shortcuts\r\n  ) {\r\n    return;\r\n  }\r\n\r\n  if (!/^\\d$/.test(event.key)) {\r\n    event.preventDefault();\r\n  }\r\n}\r\n\r\n  render() {\r\n    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' : ''}`;\r\n\r\n    return (\r\n      <Host ref={(el) => this.hostElement = el as HTMLElement}>\r\n        <div class={`dda-input-container ${inputClass} ${this.custom_class} ${this.disabled ? 'dda-input-disabled' : ''}`}>\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-phone-field`}>\r\n            <div class=\"dda-input-dropdown-btn\">\r\n              <button type=\"button\" name={this.toggle_button_name} class=\"dda-dropdown-select\" onClick={() => this.toggleDropdown()}>\r\n                <img src={this.country_flag} alt=\"\" width=\"20\" /> {this.country_code}\r\n                <i class=\"material-icons\" aria-hidden=\"true\">keyboard_arrow_down</i>\r\n              </button>\r\n              {this.dropdown_open && (\r\n                <div class=\"dda-input-dropdown-list\">\r\n                  {this.countries.map(country => (\r\n                    <button\r\n                      id={`countryCode${country.code}`}\r\n                      name={this.country_select_button_name}\r\n                      aria-label={this.button_aria_label}\r\n                      type=\"button\"\r\n                      class=\"country-select dda-input-dropdown-item\"\r\n                      onClick={() => this.selectCountry(country)}\r\n                    >\r\n                      <img src={country.flag} alt=\"\" width=\"20\" /> {country.code}\r\n                    </button>\r\n                  ))}\r\n                </div>\r\n              )}\r\n            </div>\r\n            <input\r\n              id={this.input_id}\r\n              name={this.phone_input_name}\r\n              aria-label={this.aria_label}\r\n              type=\"text\"\r\n              inputmode=\"numeric\"\r\n              maxlength={this.max_length}\r\n              pattern=\"[0-9]*\"\r\n              class=\"dda-field-group-input\"\r\n              placeholder={this.placeholder}\r\n              value={this.internalValue}\r\n              disabled={this.disabled}\r\n              onFocus={this.handleFocus.bind(this)}\r\n              onInput={(e) => this.handlephonenumberChange(e)}\r\n              onKeyDown={(e) => this.handleKeyDown(e)}\r\n              onBlur={() => this.handleBlur()}\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"]}

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

@@ -7,6 +7,7 @@ export class DdaRadiobutton {
         this.handleChange = (_e) => {
             this.checked = true;
             this.radioChange.emit({ checked: this.checked, input_id: this.input_id });
+            this.onChanged.emit({ checked: this.checked, input_id: this.input_id });
         };
     }
     render() {
@@ -21,7 +22,7 @@ export class DdaRadiobutton {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h(Host, { key: '85522a630d1149d55a95fdf72032da177c0fea3d' }, h("div", { key: '54d3a3e7de6cc0a2de8ded5bb3e22371a783fa91', class: radiobuttonClass }, h("input", { key: 'ed3cfc1bb593a3ffac000925ac32e2119c4bce96', type: "radio", id: this.input_id, name: this.group_name, "aria-label": this.aria_label, checked: this.checked, disabled: this.radio_status === 'disabled', onChange: this.handleChange }), h("label", { key: 'ff100b4783bbaa7fe9164c6db1221154ecd28034', htmlFor: this.input_id }, h("span", { key: '8ae0bab08e0e921871299818c022b602dd971b4d', class: "radio-circle" }), h("p", { key: '53c39483d826a5ca9122d7238015d46a144a0a6a' }, h("span", { key: '1e0089eb31d3da8f5b2fe477b075d67a366b3c4b', class: "radio-title" }, this.title_text), this.validation_type === 'error' && this.error_message ? (h("span", { class: "radio-error-message", id: this.validation_id }, this.error_message)) : (this.supporting && (h("span", { class: "dda-helper-text", id: this.validation_id }, this.supporting))))))));
+        return (h(Host, { key: '7b1bcd7a1e377d31e33f12e405ee04861482d77c' }, h("div", { key: '64ec9fc299aa076b781f955ed5a5e6027563baa2', class: radiobuttonClass }, h("input", { key: '9b79258b54cb0225a62acc99e42b6520accd6099', type: "radio", id: this.input_id, name: this.group_name, "aria-label": this.aria_label, checked: this.checked, disabled: this.radio_status === 'disabled', onChange: this.handleChange }), h("label", { key: '5621ff15e2c9e573c598273a02a52cb30f0f1283', htmlFor: this.input_id }, h("span", { key: 'd518df5e562c50e45404d4792015e1d1e5fe8d4f', class: "radio-circle" }), h("p", { key: 'f6c5d8b8b7114790cb1b6c71e14a23a83cb32db7' }, h("span", { key: '6c822559bbc8387d9f6530abbb9115e576201cf0', class: "radio-title" }, this.title_text), this.validation_type === 'error' && this.error_message ? (h("span", { class: "radio-error-message", id: this.validation_id }, this.error_message)) : (this.supporting && (h("span", { class: "dda-helper-text", id: this.validation_id }, this.supporting))))))));
     }
     static get is() { return "dda-radiobutton"; }
     static get originalStyleUrls() {
@@ -342,6 +343,21 @@ export class DdaRadiobutton {
                     "resolved": "{ checked: boolean; input_id: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "onChanged",
+                "name": "onChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ checked: boolean; input_id: string }",
+                    "resolved": "{ checked: boolean; input_id: string; }",
+                    "references": {}
+                }
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"dda-radiobutton.js","sourceRoot":"","sources":["../../../src/components/dda-radiobutton/dda-radiobutton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,GAAiB,MAAM,eAAe,CAAC;AAO/E,MAAM,OAAO,cAAc;IAL3B;QAU0C,YAAO,GAAY,KAAK,CAAC;QAIzD,kBAAa,GAAW,MAAM,CAAC;QAG/B,iBAAY,GAAY,EAAE,CAAC;QAQ3B,iBAAY,GAAG,CAAC,EAAS,EAAE,EAAE;YACnC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC5E,CAAC,CAAC;KAgDH;IA9CC,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,qBAAqB;YACrB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE;YACpE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;YACzC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE;YACjD,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE;YACzD,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE;YACzD,IAAI,CAAC,cAAc;SACpB;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAC;QAEb,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,8DACE,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAE,IAAI,CAAC,UAAU,gBACT,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,YAAY,KAAK,UAAU,EAC1C,QAAQ,EAAE,IAAI,CAAC,YAAY,GAC3B;gBACF,8DAAO,OAAO,EAAE,IAAI,CAAC,QAAQ;oBAC3B,6DAAM,KAAK,EAAC,cAAc,GAAQ;oBAClC;wBACE,6DAAM,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,UAAU,CAAQ;wBACjD,IAAI,CAAC,eAAe,KAAK,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACxD,YAAM,KAAK,EAAC,qBAAqB,EAAC,EAAE,EAAE,IAAI,CAAC,aAAa,IACrD,IAAI,CAAC,aAAa,CACd,CACR,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,UAAU,IAAI,CACjB,YAAM,KAAK,EAAC,iBAAiB,EAAC,EAAE,EAAE,IAAI,CAAC,aAAa,IACjD,IAAI,CAAC,UAAU,CACX,CACR,CACF,CACC,CACE,CACJ,CACD,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-radiobutton',\r\n  styleUrls: ['dda-radiobutton.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaRadiobutton {\r\n  @Prop() title_text: string;\r\n  @Prop() supporting?: string;\r\n  @Prop() group_name?: string;\r\n  @Prop() input_id?: string;\r\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\r\n  @Prop() radio_status?: string;\r\n  @Prop() error_message: string;\r\n  @Prop() validation_type?: string;\r\n  @Prop() validation_id: string = 'text';\r\n  @Prop() size?: string;\r\n  @Prop() variants?: string;\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() component_mode?: string;\r\n  @Prop() aria_label?: string;\r\n  @Prop() contrast_noraml_text?: string;\r\n\r\n  // Emits event to parent component\r\n  @Event() radioChange: EventEmitter<{ checked: boolean; input_id: string }>;\r\n\r\n  private handleChange = (_e: Event) => {\r\n    this.checked = true;\r\n    this.radioChange.emit({ checked: this.checked, input_id: this.input_id });\r\n  };\r\n\r\n  render() {\r\n    const radiobuttonClass = [\r\n      'dda-radio-container',\r\n      this.validation_type ? `dda-validation-${this.validation_type}` : '',\r\n      this.size ? `dda-radio-${this.size}` : '',\r\n      this.variants ? `dda-radio-${this.variants}` : '',\r\n      this.custom_class ? `dda-radio-${this.custom_class}` : '',\r\n      this.radio_status ? `dda-radio-${this.radio_status}` : '',\r\n      this.component_mode,\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    return (\r\n      <Host>\r\n        <div class={radiobuttonClass}>\r\n          <input\r\n            type=\"radio\"\r\n            id={this.input_id}\r\n            name={this.group_name}\r\n            aria-label={this.aria_label}\r\n            checked={this.checked}\r\n            disabled={this.radio_status === 'disabled'}\r\n            onChange={this.handleChange}\r\n          />\r\n          <label htmlFor={this.input_id}>\r\n            <span class=\"radio-circle\"></span>\r\n            <p>\r\n              <span class=\"radio-title\">{this.title_text}</span>\r\n              {this.validation_type === 'error' && this.error_message ? (\r\n                <span class=\"radio-error-message\" id={this.validation_id}>\r\n                  {this.error_message}\r\n                </span>\r\n              ) : (\r\n                this.supporting && (\r\n                  <span class=\"dda-helper-text\" id={this.validation_id}>\r\n                    {this.supporting}\r\n                  </span>\r\n                )\r\n              )}\r\n            </p>\r\n          </label>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"dda-radiobutton.js","sourceRoot":"","sources":["../../../src/components/dda-radiobutton/dda-radiobutton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Event, EventEmitter, } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-radiobutton',\r\n  styleUrls: ['dda-radiobutton.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaRadiobutton {\r\n  @Prop() title_text: string;\r\n  @Prop() supporting?: string;\r\n  @Prop() group_name?: string;\r\n  @Prop() input_id?: string;\r\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\r\n  @Prop() radio_status?: string;\r\n  @Prop() error_message: string;\r\n  @Prop() validation_type?: string;\r\n  @Prop() validation_id: string = 'text';\r\n  @Prop() size?: string;\r\n  @Prop() variants?: string;\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() component_mode?: string;\r\n  @Prop() aria_label?: string;\r\n  @Prop() contrast_noraml_text?: string;\r\n\r\n  // Emits event to parent component\r\n  @Event() radioChange: EventEmitter<{ checked: boolean; input_id: string }>;\r\n  @Event() onChanged: EventEmitter<{ checked: boolean; input_id: string }>;\r\n\r\n\r\n  private handleChange = (_e: Event) => {\r\n    this.checked = true;\r\n    this.radioChange.emit({ checked: this.checked, input_id: this.input_id });\r\n    this.onChanged.emit({ checked: this.checked, input_id: this.input_id });\r\n  };\r\n\r\n  render() {\r\n    const radiobuttonClass = [\r\n      'dda-radio-container',\r\n      this.validation_type ? `dda-validation-${this.validation_type}` : '',\r\n      this.size ? `dda-radio-${this.size}` : '',\r\n      this.variants ? `dda-radio-${this.variants}` : '',\r\n      this.custom_class ? `dda-radio-${this.custom_class}` : '',\r\n      this.radio_status ? `dda-radio-${this.radio_status}` : '',\r\n      this.component_mode,\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    return (\r\n      <Host>\r\n        <div class={radiobuttonClass}>\r\n          <input\r\n            type=\"radio\"\r\n            id={this.input_id}\r\n            name={this.group_name}\r\n            aria-label={this.aria_label}\r\n            checked={this.checked}\r\n            disabled={this.radio_status === 'disabled'}\r\n            onChange={this.handleChange}\r\n          />\r\n          <label htmlFor={this.input_id}>\r\n            <span class=\"radio-circle\"></span>\r\n            <p>\r\n              <span class=\"radio-title\">{this.title_text}</span>\r\n              {this.validation_type === 'error' && this.error_message ? (\r\n                <span class=\"radio-error-message\" id={this.validation_id}>\r\n                  {this.error_message}\r\n                </span>\r\n              ) : (\r\n                this.supporting && (\r\n                  <span class=\"dda-helper-text\" id={this.validation_id}>\r\n                    {this.supporting}\r\n                  </span>\r\n                )\r\n              )}\r\n            </p>\r\n          </label>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -42,31 +42,36 @@ export class DdaSearchInput {
             input.value = '';
             this.internalValue = '';
             this.hasInputValue = false;
-            this.inputChanged.emit('');
+            // this.inputChanged.emit('');
+            this.onChanged.emit('');
             input.focus();
         }
     }
     async reset() {
         this.internalValue = '';
         this.hasInputValue = false;
-        this.inputChanged.emit('');
+        // this.inputChanged.emit('');
+        this.onChanged.emit('');
     }
     async setValue(val) {
         this.internalValue = val;
         this.hasInputValue = !!val;
-        this.inputChanged.emit(val);
+        // this.inputChanged.emit(val);
+        this.onChanged.emit(val);
     }
     render() {
-        return (h(Host, { key: '8e2933267f74785a68d453074f3d6045718cf044' }, h("div", { key: '7f859a72924bdac3b6f103f27e4ed9621890ab6e', 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: '1eb03f8bb8d73fd0d0e2d7e9408ee3d10aac1918', htmlFor: this.button_id, class: "dda-input-label" }, this.label)), h("div", { key: 'f976030698beb92a46ee0b6e08d01ab3685cae38', class: "dda-search-area dda-search-action" }, h("i", { key: '364af87bba19b438240386b426bed5df62b99043', class: "material-icons icon-left", "aria-hidden": "true" }, "search"), h("input", { key: '004b38c78f854b77c86444c9147bd97fa9b06a2c', 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: '788e32324959a661a2e455b68ad5182596fd5425' }, h("div", { key: '14bf0a178e9c6ad063f099e50670469a848b7088', 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: '98f58b4a01e5f3b2ffefda00588586115852f507', htmlFor: this.button_id, class: "dda-input-label" }, this.label)), h("div", { key: '43393cf11cd9b1fe151190a92bdb1963a657873f', class: "dda-search-area dda-search-action" }, h("i", { key: 'e83ea59abe03acb5d871ad6d001b8d1a753dd593', class: "material-icons icon-left", "aria-hidden": "true" }, "search"), h("input", { key: 'a38947bc2567d5fb162705b4b8227d3f508a51a7', 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(this.internalValue);
+                this.inputChanged.emit(event);
+                this.onChanged.emit(event);
             }, onBlur: event => {
                 const value = event.target.value.trim();
                 this.inputBlurred.emit({ name: this.search_input_name, value });
-            } }), h("div", { key: '27e50509e83c04e26711ed440ddb58c60d3e982f', class: "dda-search-btngroup" }, this.hasInputValue && (h("button", { key: '55c2c8d16f1b7e4fe498969585edb7cc5fadbc59', 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: '3adc8ec4ce88ad46ff82204f153aecd3ee88542d', class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "close"))), this.show_button && (h("button", { key: 'f9d2aaafebe32c7b7a680afb442bb2a9ad0801ca', 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: 'f380efa88b73bc5f57852141b1d37a726955480e', class: "dda-helper-text", id: this.validation_id }, this.helper_text)), this.error_message && (h("span", { key: 'dad05b7e291794f023ddd94e5352d2ce1a977c39', class: "dda-error-message", id: this.validation_id }, this.error_message)))));
+                this.onBlurred.emit({ name: this.search_input_name, value });
+            } }), h("div", { key: 'a7b692b4c6ed2b8859ff0eef0069dea881363448', class: "dda-search-btngroup" }, this.hasInputValue && (h("button", { key: 'd8fb9737df78af6c4196e4dbd05ca9d74107e1d5', 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: '7c2f8c45df0060c2fa6d6f55bfab9d2dfa5bab28', class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "close"))), this.show_button && (h("button", { key: '10828f37a7569715fccd9ee69f245841423b0fd5', 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: '6c94b4c951409ad20a4e84b339ab81516855ef16', class: "dda-helper-text", id: this.validation_id }, this.helper_text)), this.error_message && (h("span", { key: 'ade9a6a691b2c013b23a8c9186b9d2822b6dd74c', class: "dda-error-message", id: this.validation_id }, this.error_message)))));
     }
     static get is() { return "dda-search-input"; }
     static get properties() {
@@ -480,6 +485,21 @@ export class DdaSearchInput {
                     "resolved": "any",
                     "references": {}
                 }
+            }, {
+                "method": "onChanged",
+                "name": "onChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
             }, {
                 "method": "buttonClicked",
                 "name": "buttonClicked",
@@ -510,6 +530,21 @@ export class DdaSearchInput {
                     "resolved": "{ name: string; value: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "onBlurred",
+                "name": "onBlurred",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; value: string }",
+                    "resolved": "{ name: string; value: string; }",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

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

@@ -1 +1 @@
-{"version":3,"file":"dda-search-input.js","sourceRoot":"","sources":["../../../src/components/dda-search-input/dda-search-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Element, State, 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() buttonClicked: EventEmitter<any>;\r\n  @Event() inputBlurred: EventEmitter<{ name: string; value: string }>;\r\n\r\n  @Element() el: HTMLElement;\r\n\r\n  @State() hasInputValue: boolean = false;\r\n  @State() internalValue: string = '';\r\n\r\n  handleInput = (event: Event) => {\r\n    const target = event.target as HTMLInputElement;\r\n    this.hasInputValue = target.value.length > 0;\r\n  };\r\n\r\n  handleKeyDown = (event: KeyboardEvent) => {\r\n    if (event.key === 'Enter') {\r\n      const target = event.target as HTMLInputElement;\r\n      console.log('Search input value (Enter):', target.value);\r\n    }\r\n  };\r\n\r\n  @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      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  }\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  }\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(this.internalValue);\r\n              }}\r\n              onBlur={event => {\r\n                const value = (event.target as HTMLInputElement).value.trim();\r\n                this.inputBlurred.emit({ name: this.search_input_name, value });\r\n              }}\r\n            />\r\n            <div class=\"dda-search-btngroup\">\r\n              {this.hasInputValue && (\r\n                <button\r\n                  name={this.close_button_name}\r\n                  aria-label={this.button_aria_label}\r\n                  id={this.button_id}\r\n                  type=\"button\"\r\n                  class=\"dda-search-close-icon\"\r\n                  onClick={() => this.clearInput()}\r\n                >\r\n                  <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">\r\n                    close\r\n                  </i>\r\n                </button>\r\n              )}\r\n              {this.show_button && (\r\n                <button name={this.search_button_name} type=\"button\" class=\"dda-btn btn-color-default-primary dda-btn-sm\" onClick={this.handleSearchClick}>\r\n                  {this.button_text}\r\n                </button>\r\n              )}\r\n            </div>\r\n          </div>\r\n          {this.helper_text && (\r\n            <span class=\"dda-helper-text\" id={this.validation_id}>\r\n              {this.helper_text}\r\n            </span>\r\n          )}\r\n          {this.error_message && (\r\n            <span class=\"dda-error-message\" id={this.validation_id}>\r\n              {this.error_message}\r\n            </span>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"dda-search-input.js","sourceRoot":"","sources":["../../../src/components/dda-search-input/dda-search-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Element, State, Event, EventEmitter, 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<{ name: string; value: string }>;\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({ name: this.search_input_name, value });\r\n              }}\r\n            />\r\n            <div class=\"dda-search-btngroup\">\r\n              {this.hasInputValue && (\r\n                <button\r\n                  name={this.close_button_name}\r\n                  aria-label={this.button_aria_label}\r\n                  id={this.button_id}\r\n                  type=\"button\"\r\n                  class=\"dda-search-close-icon\"\r\n                  onClick={() => this.clearInput()}\r\n                >\r\n                  <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">\r\n                    close\r\n                  </i>\r\n                </button>\r\n              )}\r\n              {this.show_button && (\r\n                <button name={this.search_button_name} type=\"button\" class=\"dda-btn btn-color-default-primary dda-btn-sm\" onClick={this.handleSearchClick}>\r\n                  {this.button_text}\r\n                </button>\r\n              )}\r\n            </div>\r\n          </div>\r\n          {this.helper_text && (\r\n            <span class=\"dda-helper-text\" id={this.validation_id}>\r\n              {this.helper_text}\r\n            </span>\r\n          )}\r\n          {this.error_message && (\r\n            <span class=\"dda-error-message\" id={this.validation_id}>\r\n              {this.error_message}\r\n            </span>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}