cloud-ide-element 1.0.19 → 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) {
@@ -4567,13 +4630,15 @@ class CideEleDropdownComponent {
     }
     closeDropdown() {
         console.log('🔵 closeDropdown called, setting isOpen to false');
-        this.isOpen.set(false);
-        // Destroy portal if it exists
-        if (this.config.usePortal) {
-            this.destroyPortalDropdown();
-        }
-        this.dropdownManager.unregisterDropdown(this.dropdownId);
-        this.dropdownToggle.emit(false);
+        setTimeout(() => {
+            this.isOpen.set(false);
+            // Destroy portal if it exists
+            if (this.config.usePortal) {
+                this.destroyPortalDropdown();
+            }
+            this.dropdownManager.unregisterDropdown(this.dropdownId);
+            this.dropdownToggle.emit(false);
+        }, 100);
     }
     getItemClasses(item) {
         const baseClasses = 'tw-flex tw-items-center tw-w-full tw-px-3 tw-py-2 tw-text-sm tw-transition-colors tw-duration-150';
@@ -4601,6 +4666,18 @@ class CideEleDropdownComponent {
             this.currentPosition.set(newPosition);
         }
     }
+    ngOnDestroy() {
+        // Cleanup portal if it exists
+        if (this.config.usePortal) {
+            this.destroyPortalDropdown();
+        }
+        // Close dropdown and unregister
+        if (this.isOpen()) {
+            this.closeDropdown();
+        }
+        // Ensure dropdown is unregistered
+        this.dropdownManager.unregisterDropdown(this.dropdownId);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleDropdownComponent, isStandalone: true, selector: "cide-ele-dropdown", inputs: { items: "items", config: "config", triggerTemplate: "triggerTemplate", menuTemplate: "menuTemplate" }, outputs: { itemClick: "itemClick", dropdownToggle: "dropdownToggle" }, host: { listeners: { "window:resize": "onWindowResize()", "window:scroll": "onWindowScroll()" } }, viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true, isSignal: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true, isSignal: true }, { propertyName: "dropdownMenuTemplate", first: true, predicate: ["dropdownMenuTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="tw-relative" #dropdownContainer>