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

package/dist/collection/components/dda-header-menu/dda-header-menu.css

@@ -1,127 +1,148 @@
 .dda-mega-menu {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    display: flex;
-    align-items: center;
-}
-.dda-mega-menu>li{
-    position: relative;
-}
-.dda-mega-menu>li>a {
-    display: block;
-    font-size: var(--font-body);
-    font-weight: var(--font-weight-regular);
-    color: var(--dda-on-surface-0);
-    padding: 20px 16px;
-    position: relative;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  align-items: center;
+}
+.dda-mega-menu > li {
+  position: relative;
+}
+.dda-mega-menu > li > a {
+  display: block;
+  font-size: var(--font-body);
+  font-weight: var(--font-weight-regular);
+  color: var(--dda-on-surface-0);
+  padding: 20px 16px;
+  position: relative;
 }
 
-.dda-mega-menu>li:hover>a,
-.dda-mega-menu>li>a.active {
-    color: var(--dda-color-primary-40);
+.dda-mega-menu > li:hover > a,
+.dda-mega-menu > li > a.active {
+  color: var(--dda-color-primary-40);
 }
 
-body.transparent .dda-mega-menu>li>a {
-    color: var(--dda-neutral-100);
+body.transparent .dda-mega-menu > li > a {
+  color: var(--dda-neutral-100);
 }
 
-.dda-mega-menu>li>a::after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    width: 0;
-    height: 4px;
-    background-color: var(--dda-color-primary-40);
-    border-radius: 8px 8px 0px 0px;
-    transform: translateX(-50%);
-    /* transition: all 0.25s ease-in-out; */
+.dda-mega-menu > li > a::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 4px;
+  background-color: var(--dda-color-primary-40);
+  border-radius: 8px 8px 0px 0px;
+  transform: translateX(-50%);
+  /* transition: all 0.25s ease-in-out; */
 }
 
-body.transparent .dda-mega-menu>li>a::after {
-    background-color: var(--dda-neutral-100);
+body.transparent .dda-mega-menu > li > a::after {
+  background-color: var(--dda-neutral-100);
 }
 
-.dda-mega-menu>li:hover>a::after,
-.dda-mega-menu>li>a:focus-visible:after,
-.dda-mega-menu>li>a.active::after {
-    width: calc(100% - 32px);
+.dda-mega-menu > li:hover > a::after,
+.dda-mega-menu > li > a:focus-visible:after,
+.dda-mega-menu > li > a.active::after {
+  width: calc(100% - 32px);
 }
 /********************************/
-.dda-header-menu li{
-    list-style: none;
+.dda-header-menu li {
+  list-style: none;
 }
-.dda-header-menu li::marker{
-    display: none;
+.dda-header-menu li::marker {
+  display: none;
 }
-.dda-default-submenu{
-    display: none;
-    min-width: 300px;
-    height: 325px;
-    overflow-x: hidden;
-    overflow-y: auto;
-    position: absolute;
-    top: 100%;
-    inset-inline-start: 0;
-    padding-top: 5px;
+.dda-default-submenu {
+  display: none;
+  min-width: 350px;
+  position: absolute;
+  top: 100%;
+  inset-inline-start: 0;
+  padding-top: 5px;
+}
+
+.dda-default-submenu ul {
+  max-height: 325px;
+  overflow: visible;
+  overflow-x: visible;
+  overflow-y: auto;
+}
+
+.dda-default-submenu ul::-webkit-scrollbar {
+  width: 6px;
+}
+
+.dda-default-submenu ul::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.dda-default-submenu ul::-webkit-scrollbar-thumb {
+    background: var(--dda-on-primary-98);
+}
+
+.dda-default-submenu:hover ul::-webkit-scrollbar-thumb {
+    background: var(--dda-on-primary-98);
 }
 
 .dda-default-submenu a,
-.dda-default-submenu .dda-submenu-title{
-    position: relative;
-    font-size: var(--font-body);
-    font-weight: var(--font-weight-regular);
+.dda-default-submenu .dda-submenu-title {
+  position: relative;
+  font-size: var(--font-body);
+  font-weight: var(--font-weight-regular);
 }
 
-.dda-default-submenu a.has-submenu::after{
-    content: "";
-    width: 6px;
-    height: 6px;
-    border-right: solid 1px var(--dda-color-primary-40);
-    border-bottom: solid 1px var(--dda-color-primary-40);
-    position: absolute;
-    top: 50%;
-    inset-inline-end: 9px;
-    margin-top: -4.5px;
-    transform: rotate(-45deg);
-}
-:root[dir='rtl'] .dda-default-submenu a.has-submenu::after{
-    transform: rotate(135deg);
+.dda-default-submenu a.has-submenu::after {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-right: solid 1px var(--dda-color-primary-40);
+  border-bottom: solid 1px var(--dda-color-primary-40);
+  position: absolute;
+  top: 50%;
+  inset-inline-end: 9px;
+  margin-top: -4.5px;
+  transform: rotate(-45deg);
+}
+:root[dir='rtl'] .dda-default-submenu a.has-submenu::after {
+  transform: rotate(135deg);
 }
 
-.dda-default-submenu span{
-    display: block;
-    border-bottom: solid 1px #ddd;
-    padding: 5px 8px 10px 8px;
-    margin-bottom: 5px;
+.dda-default-submenu span {
+  display: block;
+  border-bottom: solid 1px #ddd;
+  padding: 5px 8px 10px 8px;
+  margin-bottom: 5px;
 }
 
-.dda-default-submenu > ul{
-    width: 100%;
-    background-color: var(--dda-surface-100);
-    border-radius: 5px;
-    padding: 10px !important;
-    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.13);
+.dda-default-submenu > ul {
+  width: 100%;
+  max-width: 350px;
+  background-color: var(--dda-surface-100);
+  border-radius: 5px;
+  padding: 10px !important;
+  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.13);
 }
 
-.dda-default-submenu ul li{
-    list-style: none;
-    position: relative;
-    margin-bottom: 1px;
-}
-.dda-default-submenu ul li a{
-    font-size: var(--font-body);
-    font-weight: var(--font-weight-regular);
-    color: var(--dda-on-surface-0);
-    display: block;
-    padding: 10px 7px;
-    border-radius: 8px;
+.dda-default-submenu ul li {
+  list-style: none;
+  position: relative;
+  margin-bottom: 1px;
+}
+.dda-default-submenu ul li a {
+  font-size: var(--font-body);
+  font-weight: var(--font-weight-regular);
+  color: var(--dda-on-surface-0);
+  display: block;
+  padding: 10px 7px;
+  border-radius: 8px;
 }
 .dda-default-submenu ul li:hover > a,
-.dda-default-submenu ul li a.active{
-    background-color: var(--dda-on-primary-98);
-    color: var(--dda-on-primary-variant-40);
+.dda-default-submenu ul li a.active {
+  background-color: var(--dda-on-primary-98);
+  color: var(--dda-on-primary-variant-40);
 }
 
 .dda-default-subsubmenu {
@@ -134,123 +155,141 @@ body.transparent .dda-mega-menu>li>a::after {
 }
 .dda-default-subsubmenu.is-visible {
   display: block;
+  padding: 0px 5px;
 }
-.dda-default-subsubmenu .dda-default-subsubmenu-content{
-    width: 100%;
-    background-color: var(--dda-surface-100);
-    border-radius: 5px;
-    padding: 10px !important;
-    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.13);
+.dda-default-subsubmenu .dda-default-subsubmenu-content {
+  max-width: 100%;
+  background-color: var(--dda-surface-100);
+  border-radius: 5px;
+  padding: 10px !important;
+  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.13);
+  position: fixed;
+  width: 350px;
 }
-.dda-default-subsubmenu-content ol{
-    padding: 0px;
+.dda-default-subsubmenu-content ol {
+  padding: 0px;
 }
 
-.dda-main-megamenu{
-    display: none;
-    width: 100%;
-    position: fixed;
-    inset-inline-start: 0;
-}
-.dda-megamenu-wrap{
-    width: 90vw;
-    margin: 0 auto;
-    padding-top: 5px;
-}
-.dda-megamenu-content{
-    height: 300px;
-    overflow-x: hidden;
-    overflow-y: auto;
-    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-mega-menu >  li:hover .dda-default-submenu,
-.dda-mega-menu >  li:hover .dda-main-megamenu,
+.dda-main-megamenu {
+  display: none;
+  width: 100%;
+  position: fixed;
+  inset-inline-start: 0;
+}
+.dda-megamenu-wrap {
+  width: 90vw;
+  margin: 0 auto;
+  padding-top: 5px;
+}
+.dda-megamenu-content {
+  height: 300px;
+  overflow-x: visible;
+  overflow-y: auto;
+  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-megamenu-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.dda-megamenu-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.dda-megamenu-content::-webkit-scrollbar-thumb {
+    background: var(--dda-on-primary-98);
+}
+
+.dda-megamenu-content::-webkit-scrollbar-thumb:hover {
+    background: var(--dda-on-primary-98);
+}
+.dda-mega-menu > li:hover .dda-default-submenu,
+.dda-mega-menu > li:hover .dda-main-megamenu,
 .dda-default-submenu.is-visible,
-.dda-main-megamenu.is-visible{
-    display: block;
+.dda-main-megamenu.is-visible {
+  display: block;
 }
-.dda-megamenu-content ol{
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding: 0 !important;
+.dda-megamenu-content ol {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0 !important;
 }
-.dda-megamenu-content .megamemu-sub-title{
-    font-size: var(--font-h6);
-    font-weight: var(--font-weight-regular);
-    padding: 8px 15px 8px 15px;
+.dda-megamenu-content .megamemu-sub-title {
+  font-size: var(--font-h6);
+  font-weight: var(--font-weight-regular);
+  padding: 8px 15px 8px 15px;
 }
 
 .dda-megamenu-content .dda-mega-menu-link {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    padding: 10px 16px;
-    background: var(--dda-surface-100);
-    color: var(--dda-on-surface-0);
-    border-radius: 8px;
-    /* transition: all 500ms ease; */
-}
-.dda-megamenu-content .dda-mega-menu-link:hover{
-    background-color: var(--dda-on-primary-98);
-}
-.dda-mega-menu-link{
-    display: block;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding: 10px 16px;
+  background: var(--dda-surface-100);
+  color: var(--dda-on-surface-0);
+  border-radius: 8px;
+  /* transition: all 500ms ease; */
+}
+.dda-megamenu-content .dda-mega-menu-link:hover {
+  background-color: var(--dda-on-primary-98);
+}
+.dda-mega-menu-link {
+  display: block;
 }
 
 .dda-mega-menu-link .dda-mega-menu-icon {
-    width: 40px;
-    height: 40px;
-    background: var(--dda-on-primary-94);
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-	color: var(--dda-color-primary-40);
+  width: 40px;
+  height: 40px;
+  background: var(--dda-on-primary-94);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--dda-color-primary-40);
 }
 
 .dda-mega-menu-link .text-wrap {
-    display: flex;
-     flex: 1;
-    flex-direction: column;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
 }
 
 .dda-mega-menu-link .dda-mega-menu-text {
-    display: block;
-    font-size: var(--font-body);
-    font-weight: var(--font-weight-regular);
+  display: block;
+  font-size: var(--font-body);
+  font-weight: var(--font-weight-regular);
 }
 
 .dda-mega-menu-link .dda-mega-menu-desc {
-    font-size: var(--font-caption);
-    font-weight: var(--font-weight-regular);
-    color: var(--dda-on-surface-variant-30);
-    max-height: 40px;
-    overflow: hidden;
+  font-size: var(--font-caption);
+  font-weight: var(--font-weight-regular);
+  color: var(--dda-on-surface-variant-30);
+  max-height: 40px;
+  overflow: hidden;
 }
-.dda-mega-menu  a:focus-visible{
-    outline: solid 2px var(--dda-primary-variant-87) !important;
-    outline-offset: 0px;
+.dda-mega-menu a:focus-visible {
+  outline: solid 2px var(--dda-primary-variant-87) !important;
+  outline-offset: 0px;
 }
 
 @media (max-width: 1024px) {
-    .dda-mega-menu {
-        display: none;
-    }
+  .dda-mega-menu {
+    display: none;
+  }
 }
 
 @media (prefers-reduced-motion: no-preference) {
-    .dda-mega-menu>li>a::after {
-        transition: all 0.25s ease-in-out;
-    }
-    .dda-megamenu-content .dda-mega-menu-link {
-        transition: all 500ms ease;
-    }
-    
-}
+  .dda-mega-menu > li > a::after {
+    transition: all 0.25s ease-in-out;
+  }
+  .dda-megamenu-content .dda-mega-menu-link {
+    transition: all 500ms ease;
+  }
+}

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

@@ -10,6 +10,20 @@ export class DdaInput {
     async getValue() {
         return this.internalValue || this.value || '';
     }
+    watchValue(newValue) {
+        this.internalValue = newValue || '';
+    }
+    async setValue(val) {
+        this.internalValue = val;
+        this.inputChanged.emit(val);
+    }
+    async reset() {
+        this.internalValue = '';
+        this.inputChanged.emit('');
+    }
+    componentWillLoad() {
+        this.internalValue = this.value || '';
+    }
     componentDidLoad() {
         // Hide date input placeholder
         if (this.type === 'date') {
@@ -40,17 +54,18 @@ export class DdaInput {
             this.type === 'disabled' ? 'dda-input-disabled' : '',
             this.custom_class,
             this.component_mode,
-        ].filter(Boolean).join(' ');
+        ]
+            .filter(Boolean)
+            .join(' ');
         const describedByIds = [];
         if (this.helper_text)
             describedByIds.push(`${this.validation_id}-helper`);
         if (this.validation_type === 'error' && this.error_message)
             describedByIds.push(`${this.validation_id}-error`);
-        return (h(Host, { key: 'b9fb5ad1dafba6f7c6f84ac991fbe39906f3eecc' }, h("div", { key: 'd0ebec077208be7b411944c4383bfa6e9643fe48', class: inputClass }, this.label &&
-            h("label", { key: '1ea6a5732274284a5abedcbecc9ae6b1284b7cb4', htmlFor: this.input_id, class: "dda-input-label", id: `${this.input_id}-label` }, this.label), h("input", { key: 'a80e738b74bb6f5f65670ab40491a48028349176', 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 || this.value, "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: '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 => {
                 this.internalValue = event.target.value;
-                this.inputChanged.emit(event);
-            }, onBlur: (event) => {
+                this.inputChanged.emit(this.internalValue);
+            }, onBlur: event => {
                 const value = event.target.value.trim();
                 this.inputBlurred.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))))));
@@ -443,9 +458,53 @@ export class DdaInput {
                     "text": "",
                     "tags": []
                 }
+            },
+            "setValue": {
+                "complexType": {
+                    "signature": "(val: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "val",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "reset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "watchValue"
+            }];
+    }
 }
 //# sourceMappingURL=dda-input.js.map

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 } 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  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    ].filter(Boolean).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)\r\n      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 \r\n              htmlFor={this.input_id} \r\n              class=\"dda-input-label\"\r\n              id={`${this.input_id}-label`}\r\n            >\r\n              {this.label}\r\n            </label>}\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 || this.value}\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            }}\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 \r\n              class=\"dda-error-message\" \r\n              id={this.validation_id}\r\n              role=\"alert\"\r\n            >\r\n              {this.error_message}\r\n            </span>\r\n          ) : (\r\n            this.helper_text && (\r\n              <span \r\n                class=\"dda-helper-text\" \r\n                id={this.validation_id}\r\n              >\r\n                {this.helper_text}\r\n              </span>\r\n            )\r\n          )}\r\n        </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() 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"]}