cloud-ide-element 1.0.20 → 1.0.22

package/fesm2022/cloud-ide-element.mjs

@@ -649,6 +649,12 @@ class CideInputComponent {
                 return value; // Already in correct format
             }
         }
+        else if (type === 'url' && typeof value === 'string' && value) {
+            // Normalize URL format - ensure it starts with http:// or https://
+            if (!value.startsWith('http://') && !value.startsWith('https://')) {
+                return `https://${value}`;
+            }
+        }
         return value;
     }
     /** @description for capitalization */
@@ -664,6 +670,10 @@ class CideInputComponent {
                 return this.capitalizePipe?.transform(value, "sentenceCase");
             }
         }
+        else if (type == 'url') {
+            // URLs should not be capitalized - return as is
+            return value;
+        }
         return value;
     }
     /** @description It is used to return the value is valid or not */
@@ -681,6 +691,21 @@ class CideInputComponent {
                 return false;
             }
         }
+        else if (type == 'url') {
+            if (typeof (value) == 'string') {
+                if (value?.length > 0) {
+                    // Validate URL format
+                    const urlRegex = /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/;
+                    return urlRegex.test(value);
+                }
+                else {
+                    return false;
+                }
+            }
+            else {
+                return false;
+            }
+        }
         else if (type == 'date') {
             if (typeof (value) == 'string') {
                 if (value?.length > 0) {
@@ -732,6 +757,32 @@ class CideInputComponent {
                 validation_status.validation.required = `required!`;
             }
         }
+        else if (this.type == 'url') {
+            if (typeof (value) == 'string' && value) {
+                // URL validation regex
+                const urlRegex = /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/;
+                if (!urlRegex.test(value)) {
+                    validation_status.status = true;
+                    validation_status.validation.required = `Please enter a valid URL (e.g., https://example.com)!`;
+                }
+                if (this.maxlength > 0) {
+                    if (value?.length > this.maxlength) {
+                        validation_status.status = true;
+                        validation_status.validation.maxlength = `maximum length is ${this.maxlength}!`;
+                    }
+                }
+                if (this.minlength > 0) {
+                    if (value?.length < this.minlength) {
+                        validation_status.status = true;
+                        validation_status.validation.minlength = `minimum length is ${this.minlength}!`;
+                    }
+                }
+            }
+            else if (this.required && !value) {
+                validation_status.status = true;
+                validation_status.validation.required = `URL is required!`;
+            }
+        }
         else if (this.type == 'date') {
             if (typeof (value) == 'string' && value) {
                 // Validate date format and parse
@@ -858,6 +909,12 @@ class CideInputComponent {
             this.trailingIconInternal = this.trailingIcon || "calendar_today";
             this.isTrailingIconAllwedClick = true; // Allow clicking calendar icon
         }
+        else if (this.type === 'url') {
+            this.typeInternal = "url";
+            // Set default link icon if no trailing icon specified
+            this.trailingIconInternal = this.trailingIcon || "link";
+            this.isTrailingIconAllwedClick = false; // URL type doesn't need clickable trailing icon
+        }
         else {
             this.typeInternal = this.type;
             this.trailingIconInternal = this.trailingIcon;
@@ -1559,6 +1616,12 @@ class CideSelectComponent {
     }
     writeValue(value) {
         this.ngModel = value;
+        if (this.searchable) {
+            this.searchChange.emit({
+                query: "",
+                value: value // emit raw value for external handlers
+            });
+        }
         this.validateValue(value);
     }
     registerOnChange(fn) {