ms-design-system 0.0.46 → 0.0.47

package/fesm2022/ms-design-system.mjs

@@ -1,16 +1,16 @@
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, Component, EventEmitter, ContentChild, Output, signal, HostListener, ViewChild, forwardRef, booleanAttribute, Injectable, Directive, NgModule, makeEnvironmentProviders, createComponent } from '@angular/core';
+import { Input, Component, EventEmitter, ContentChild, Output, Injectable, signal, HostListener, ViewChild, forwardRef, booleanAttribute, Directive, NgModule, makeEnvironmentProviders, createComponent } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/platform-browser';
-import * as i3 from 'ng-inline-svg-2';
+import * as i2$1 from 'ng-inline-svg-2';
 import { InlineSVGModule } from 'ng-inline-svg-2';
-import * as i2$1 from '@angular/router';
+import { Subject, BehaviorSubject } from 'rxjs';
+import * as i2$2 from '@angular/router';
 import { NavigationEnd } from '@angular/router';
 import { filter } from 'rxjs/operators';
-import { BehaviorSubject } from 'rxjs';
 import * as i1$2 from 'ng-inline-svg';
 import { InlineSVGModule as InlineSVGModule$1 } from 'ng-inline-svg';
 
@@ -443,9 +443,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                 type: Input
             }] } });
 
+class MsDropdownService {
+    closeAllDropdowns$ = new Subject();
+    getCloseAllDropdowns$() {
+        return this.closeAllDropdowns$.asObservable();
+    }
+    closeOtherDropdowns(currentDropdownId) {
+        this.closeAllDropdowns$.next(currentDropdownId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDropdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDropdownService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDropdownService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class MsDropdown {
     el;
     cdr;
+    dropdownService;
+    dropdownId = `dropdown-${Math.random().toString(36).substr(2, 9)}`;
+    closeSubscription;
     text = '';
     isDisabled = false;
     // @Input() items: DropdownItem[] = [];
@@ -491,12 +512,23 @@ class MsDropdown {
         return this._items;
     }
     _items = [];
-    constructor(el, cdr) {
+    constructor(el, cdr, dropdownService) {
         this.el = el;
         this.cdr = cdr;
+        this.dropdownService = dropdownService;
     }
     ngOnInit() {
         this.initializeSelection();
+        // Subscribe to close events from other dropdowns
+        this.closeSubscription = this.dropdownService.getCloseAllDropdowns$().subscribe((openedDropdownId) => {
+            if (openedDropdownId !== this.dropdownId && this.isOpen) {
+                this.isOpen = false;
+                this.cdr.detectChanges();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.closeSubscription?.unsubscribe();
     }
     isOpen = false;
     searchTerm = '';
@@ -505,8 +537,12 @@ class MsDropdown {
         if (this.isDisabled)
             return;
         if (this.allowMultiple && this.multiSelectDisplay === 'tags') {
+            const wasOpen = this.isOpen;
             this.isOpen = !this.isOpen;
             if (this.isOpen) {
+                if (!wasOpen) {
+                    this.dropdownService.closeOtherDropdowns(this.dropdownId);
+                }
                 this.checkDropdownPosition();
             }
             return;
@@ -522,8 +558,10 @@ class MsDropdown {
     }
     toggleDropdown() {
         if (!this.isDisabled) {
+            const wasOpen = this.isOpen;
             this.isOpen = !this.isOpen;
-            if (this.isOpen) {
+            if (this.isOpen && !wasOpen) {
+                this.dropdownService.closeOtherDropdowns(this.dropdownId);
                 this.checkDropdownPosition();
             }
         }
@@ -685,13 +723,13 @@ class MsDropdown {
     close() {
         this.isOpen = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDropdown, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsDropdown, isStandalone: true, selector: "ms-dropdown", inputs: { text: "text", isDisabled: "isDisabled", items: "items", icon: "icon", iconPosition: "iconPosition", closeOnSelect: "closeOnSelect", closeOnClickOutside: "closeOnClickOutside", selectedItem: "selectedItem", allowMultiple: "allowMultiple", maxHeight: "maxHeight", loading: "loading", error: "error", ariaLabel: "ariaLabel", searchable: "searchable", searchPlaceholder: "searchPlaceholder", noResultsText: "noResultsText", customClass: "customClass", dropdownMenuClass: "dropdownMenuClass", dropdownMenuWidth: "dropdownMenuWidth", showFlagImage: "showFlagImage", multiSelectDisplay: "multiSelectDisplay", inputPlaceholder: "inputPlaceholder", inputLabel: "inputLabel", inputErrorState: "inputErrorState", inputWarningState: "inputWarningState", inputFocusState: "inputFocusState", required: "required", size: "size", variant: "variant", radiussize: "radiussize", iconOnly: "iconOnly", useInputField: "useInputField" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "tagInput", first: true, predicate: ["tagInput"], descendants: true }], ngImport: i0, template: "<div class=\"ms-dropdown-wrapper ms-w-100\" [ngClass]=\"customClass\"\n    (click)=\"onTriggerClick()\">\n    <div class=\"ms-dropdown-field ms-d-flex ms-align-items-center ms-w-100\">\n      <!-- allowMultiple && multiSelectDisplay === 'tags' -->\n      <div class=\"ms-input-wrapper\" *ngIf=\"allowMultiple && multiSelectDisplay === 'tags'\"\n        [class.focused]=\"isFocused\"\n        [class.error]=\"hasError\"\n        [class.disabled]=\"isDisabled\"\n        [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\"\n        (click)=\"focusInput()\" [class.ms-dropdown-form-control]=\"visibleTags.length > 0\">\n\n        <div class=\"ms-dropdown-display ms-d-flex ms-align-items-center ms-w-100\">\n\n        <!-- Prefix Icon -->\n        <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-tags-wrapper-suffix-icon ms-me-3\">\n          <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n          <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n        </span>\n\n        <!-- Selected Flag -->\n        <!-- <img *ngIf=\"showFlagImage && selectedItemObj?.countryCode\"\n            [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.label | lowercase) + '.svg'\"\n            class=\"ms-country-flag ms-me-2\"\n            alt=\"{{ selectedItemObj?.label }}\" /> -->\n        <ms-flag-icon *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"ms-country-flag ms-me-2\" [name]=\"selectedItemObj?.label | lowercase\"></ms-flag-icon>\n\n        <!-- TAGS -->\n        <span class=\"ms-tag ms-me-1\" *ngFor=\"let item of visibleTags\">\n          {{ item.label }}\n          <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n        </span>\n\n        <!-- +N MORE -->\n        <span class=\"ms-tag ms-more-btn\"\n              *ngIf=\"hiddenTagsCount() > 0\"\n              (click)=\"toggleHiddenTags(); $event.stopPropagation()\">\n          +{{ hiddenTagsCount() }} more\n        </span>\n\n        <!-- DROPDOWN FOR HIDDEN TAGS -->\n        <div class=\"ms-hidden-tags-dropdown\"\n            *ngIf=\"isHiddenTagsOpen && hiddenTagsCount() > 0\"\n            (click)=\"$event.stopPropagation()\">\n          <span class=\"ms-tag\" *ngFor=\"let item of hiddenTags\">\n            {{ item.label }}\n            <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n          </span>\n        </div>\n\n        <!-- Placeholder -->\n        <span *ngIf=\"selectedItems.length === 0\"\n              class=\"ms-input-placeholder\">\n          {{ inputPlaceholder || 'Default Dropdown' }}\n        </span>\n\n        <!-- Suffix Icon -->\n        <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-tags-wrapper-suffix-icon\">\n          <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n          <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center ms-ms-3\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n        </span>\n\n      </div>\n\n      </div>\n\n      <!-- Input Field Trigger -->\n      <div *ngIf=\"multiSelectDisplay !== 'tags'\" \n        class=\"ms-dropdown-input-wrapper ms-w-100\"\n        (click)=\"onTriggerClick(); $event.stopPropagation()\">\n\n        <div class=\"ms-input-wrapper\" [class.ms-input-selected]=\"(selectedItems.length > 0)\" [class.ms-input-focus]=\"inputFocusState || isOpen\"\n          [class.ms-input-error]=\"inputErrorState || isSelectionRequired()\"\n          [class.ms-input-warning]=\"inputWarningState\" [class.disabled]=\"isDisabled\">\n          <!-- Prefix Icon -->\n          <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-input-prefix-icon\">\n            <!-- <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n            <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n          </span>\n\n          <!-- Flag -->\n          <span *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"flag_image_container\">\n            <!-- <img\n              [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.countryCode | lowercase) + '.svg'\"\n              class=\"ms-country-flag ms-me-2\"\n              [alt]=\"selectedItemObj.label || ''\" /> -->\n              <ms-flag-icon class=\"ms-country-flag ms-me-2\" [name]=\"selectedItemObj?.label | lowercase\"></ms-flag-icon>\n          </span>\n\n          <!-- VALUE TEXT -->\n          <span class=\"ms-input-value ms-me-3\"\n                [class.ms-placeholder]=\"!(selectedItem || text)\">\n            {{ selectedItem || text || inputPlaceholder }}\n          </span>\n\n          <!-- Suffix Icon -->\n          <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-input-suffix-icon\">\n            <!-- <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n            <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n          </span>\n        </div>\n    </div>\n    </div>\n\n\n  <div *ngIf=\"isOpen\" class=\"ms-dropdown-menu\" [ngClass]=\"[dropdownMenuClass || '', 'ms-dropdown-' + dropdownPosition()]\"\n       [style.maxHeight]=\"maxHeight\"\n       [ngStyle]=\"{'overflowY': 'auto', 'overflowX': 'hidden'}\"\n       (click)=\"$event.stopPropagation()\">\n    \n    <!-- Loader -->\n    <div *ngIf=\"loading\" class=\"ms-dropdown-loader\">\n      <ms-spinner [color]=\"'primary'\" [size]=\"'md'\"></ms-spinner>\n    </div>\n\n    <!-- Dropdown content -->\n    <ng-container *ngIf=\"!loading\">\n    <!-- Search input -->\n     <div *ngIf=\"searchable\" class=\"ms-dropdown-search-container\">\n        <input type=\"text\" [(ngModel)]=\"searchTerm\"\n           [placeholder]=\"searchPlaceholder\" class=\"ms-dropdown-search\" />\n        <ms-icon class=\"ms_icon\" [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n     </div>\n\n    <!-- Dropdown items -->\n    <ng-container *ngIf=\"filteredItems.length > 0; else noResults\">\n      <button *ngFor=\"let item of filteredItems; let i = index\"\n            class=\"ms-dropdown-item ms-d-flex ms-align-items-center\"\n            [disabled]=\"item.disabled\"\n            [class.ms-selected]=\"item.selected\"\n            [class.ms-p-0]=\"item.divider\"\n            (click)=\"selectItem(item)\">\n          <!--  MULTI-SELECT TICK ICON -->\n          <div>\n\n          </div>\n          <!-- <span *ngIf=\"item.icon && !showFlagImage\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + item.icon\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\"></span> -->\n          <ms-icon *ngIf=\"item.icon && !showFlagImage\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\" [name]=\"item.icon\" [size]=\"'small'\"></ms-icon>\n\n             <!-- COUNTRY FLAG -->\n              <!-- <img *ngIf=\"item.icon && showFlagImage\"\n                  [src]=\"'../../../../assets/data-grid/flags/' + (item.countryCode | lowercase) + '.svg'\"\n                  class=\"ms-country-flag ms-me-2\"\n                  alt=\"{{ item.label }}\" /> -->\n              <ms-flag-icon *ngIf=\"item.icon && showFlagImage\" [name]=\"item.label | lowercase\"></ms-flag-icon>\n              <!-- <span>{{item.label | lowercase}}</span> -->\n              <!-- COUNTRY NAME -->\n              <span [style.padding-left.px]=\"showFlagImage || item.icon ? 10 : 0\" class=\"ms-country-label\">\n              {{ item.label }}\n              </span>\n              <!-- <span *ngIf=\"item.selected\" [inlineSVG]=\"'../../../../assets/data-grid/icons/blue-check.svg'\" class=\"dropdown_tick_icon ms-d-flex ms-me-2\">\n                <ms-icon [name]=\"'check'\" [size]=\"'small'\"></ms-icon> -->\n                <ms-icon *ngIf=\"item.selected\" class=\"dropdown_tick_icon ms-d-flex ms-me-2\" [name]=\"'check'\" [color]=\"'ms-icon-blue'\" [size]=\"'small'\"></ms-icon>\n              <!-- </span> -->\n          <!-- {{ item.label }} -->\n        </button>\n      </ng-container>\n\n    <ng-template #noResults>\n      <div class=\"ms-dropdown-no-results\">{{ noResultsText }}</div>\n    </ng-template>\n    </ng-container>\n  </div>\n</div>", styles: [".ms-dropdown-wrapper{position:relative;display:inline-block}.ms-dropdown-trigger{width:100%;cursor:pointer}.ms-input-wrapper.ms-input-error,.ms-input-wrapper.ms-input-error:hover{border-color:#dc2626}.ms-input-wrapper.ms-input-warning,.ms-input-wrapper.ms-input-warning:hover{border-color:#f59e0b}.ms-input-wrapper.ms-input-focus .ms-dropdown-input-field{border-color:#3b82f6}.ms-input-wrapper.ms-input-focus .ms-input-tags-field{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.ms-dropdown-input-label{font-size:14px;font-weight:500;color:#374151;margin:0}.ms-dropdown-input-label .ms-required{color:#dc2626;margin-left:2px}.ms-dropdown-input-field-wrapper{display:flex;align-items:center;position:relative;gap:0}.ms-dropdown-input-prefix-icon{display:flex;align-items:center;justify-content:center;padding-left:12px;flex-shrink:0;color:#6b7280}.ms-dropdown-input-prefix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-dropdown-input-suffix-icon{display:flex;align-items:center;justify-content:center;padding-right:12px;flex-shrink:0;color:#6b7280}.ms-dropdown-input-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-tags-wrapper-prefix-icon{display:flex;align-items:center;justify-content:center;padding-left:12px;flex-shrink:0;color:#6b7280}.ms-tags-wrapper-prefix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-tags-wrapper-suffix-icon{flex-shrink:0;color:#6b7280;margin-left:auto}.ms-tags-wrapper-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-input-wrapper{flex:1;padding:10px 12px;border:1px solid #E0E0E0;border-radius:8px;font-size:14px;color:#374151;background-color:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s}.ms-input-wrapper:hover:not(.disabled,.ms-input-error,.ms-input-warning){border-color:#3b82f6}.ms-input-wrapper:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-input-wrapper.disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-input-wrapper::placeholder{color:#9ca3af}.ms-input-wrapper.disabled:hover{border-color:#e0e0e0!important}.ms-dropdown-menu{position:absolute;left:0;right:0;z-index:1000;border-radius:12px;background-color:#fff;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0;padding:4px 0}.ms-dropdown-menu.ms-dropdown-down{top:100%;margin-top:6px}.ms-dropdown-menu.ms-dropdown-up{bottom:100%;margin-bottom:6px}.ms-dropdown-item{width:100%;text-align:left;padding:8px 12px;background:none;border:none;cursor:pointer;transition:background-color .2s;font-size:14px!important;font-weight:400}.ms-dropdown-item .ms-country-label{font-size:14px!important;color:#1b1f22;padding-left:10px}.ms-dropdown-item:hover{background-color:#f5f5f5}.ms-dropdown-item.ms-selected{background:#0084ff1a}.dropdown_tick_icon{margin-left:auto}.ms-dropdown-search{width:-webkit-fill-available;padding:12px;margin:12px;border:1px solid #d1d5db;border-radius:8px}.ms-dropdown-search-container{position:sticky;top:0;background-color:#fff}.ms-dropdown-search-container input{padding-left:40px}.ms-dropdown-search-container .ms_icon{position:absolute;z-index:99999999;top:25px;left:25px;bottom:0;width:16px;height:16px}.ms-dropdown-no-results{padding:6px 12px;color:#9ca3af;font-style:italic}.ms-country-flag{width:18px;height:14px;object-fit:cover;border-radius:2px}.flag_image_container{display:flex;align-items:center}.flag_image_container .ms-country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-country-dial{font-size:12px;color:#6b7280}.ms-dropdown-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:12px}.ms-dropdown-loader .ms-spinner{display:flex;align-items:center;justify-content:center}.ms-dropdown-loader .ms-spinner .ms-spinner-circle{width:30px;height:30px;border:3px solid #e5e7eb;border-top:3px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}.ms-loader-text{margin:0;font-size:14px;color:#6b7280;font-weight:500}@keyframes spin{to{transform:rotate(360deg)}}.ms-tag{border-radius:4px;padding:4px 8px;font-size:12px;display:inline-flex;align-items:center;background:#1f24281a;color:#1b1f22}.ms-tag .ms-tag-close{cursor:pointer}.ms-tag-remove{cursor:pointer;margin-left:6px;font-weight:700}.ms-tag-input{border:none;outline:none;min-width:60px}.ms-tag-container{border:1px solid gainsboro;border-radius:4px;padding:4px 8px}.ms-more-btn{background:#d1d5db;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-hidden-tags-dropdown{position:absolute;top:100%;left:0;right:0;border-radius:8px;padding:4px;margin-top:4px;z-index:1000;display:flex;flex-wrap:wrap;gap:4px;height:60px;max-height:120px;overflow-y:auto;border:1px solid #E0E0E0;background:#fff;box-shadow:0 2px 12px #00000014}.ms-hidden-tags-dropdown .ms-tag{width:fit-content;height:fit-content}.ms-dropdown-form-control{padding:.2rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;opacity:1;border-width:1px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::placeholder{color:#6a6b6d;opacity:1}::-webkit-input-placeholder{color:#6a6b6d}::-moz-placeholder{color:#6a6b6d;opacity:1}:-ms-input-placeholder{color:#6a6b6d}.ms-input-placeholder{font-size:14px!important}:-moz-placeholder{color:#6a6b6d;opacity:1}.ms-hover{border:1px solid #0084FF;box-shadow:0 0 0 1px #b7dcff}.ms-input-wrapper{position:relative;display:flex;align-items:center;height:36px;padding:0 8px;border-radius:8px;cursor:pointer;background:#fff;border:1px solid #E0E0E0;font-size:14px!important;min-width:200px;transition:border-color .2s,box-shadow .2s}.ms-input-wrapper:hover{border-color:#0084ff}.ms-input-selected{border-color:#0084ff;box-shadow:none}.ms-input-wrapper.ms-input-focus{border-color:#0084ff;box-shadow:0 0 0 1px #b7dcff}.ms-input-value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px!important}.ms-placeholder{color:#9ca3af}input:focus-visible{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "component", type: MsSpinner, selector: "ms-spinner", inputs: ["color", "size", "text"], outputs: ["htmlChange"] }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }, { kind: "component", type: MsFlagIcon, selector: "ms-flag-icon", inputs: ["name", "size"] }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDropdown, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: MsDropdownService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsDropdown, isStandalone: true, selector: "ms-dropdown", inputs: { text: "text", isDisabled: "isDisabled", items: "items", icon: "icon", iconPosition: "iconPosition", closeOnSelect: "closeOnSelect", closeOnClickOutside: "closeOnClickOutside", selectedItem: "selectedItem", allowMultiple: "allowMultiple", maxHeight: "maxHeight", loading: "loading", error: "error", ariaLabel: "ariaLabel", searchable: "searchable", searchPlaceholder: "searchPlaceholder", noResultsText: "noResultsText", customClass: "customClass", dropdownMenuClass: "dropdownMenuClass", dropdownMenuWidth: "dropdownMenuWidth", showFlagImage: "showFlagImage", multiSelectDisplay: "multiSelectDisplay", inputPlaceholder: "inputPlaceholder", inputLabel: "inputLabel", inputErrorState: "inputErrorState", inputWarningState: "inputWarningState", inputFocusState: "inputFocusState", required: "required", size: "size", variant: "variant", radiussize: "radiussize", iconOnly: "iconOnly", useInputField: "useInputField" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "tagInput", first: true, predicate: ["tagInput"], descendants: true }], ngImport: i0, template: "<div class=\"ms-dropdown-wrapper ms-w-100\" [ngClass]=\"customClass\"\n    (click)=\"onTriggerClick()\">\n    <div class=\"ms-dropdown-field ms-d-flex ms-align-items-center ms-w-100\">\n      <!-- allowMultiple && multiSelectDisplay === 'tags' -->\n       <!-- || (selectedItems.length > 0) -->\n      <div class=\"ms-input-wrapper\" *ngIf=\"allowMultiple && multiSelectDisplay === 'tags'\"\n        [class.focused]=\"isFocused\"\n        [class.error]=\"hasError\"\n        [class.disabled]=\"isDisabled\"\n        [class.ms-input-focus]=\"inputFocusState || isOpen\"\n        (click)=\"focusInput()\" [class.ms-dropdown-form-control]=\"visibleTags.length > 0\">\n\n        <div class=\"ms-dropdown-display ms-d-flex ms-align-items-center ms-w-100\">\n\n        <!-- Prefix Icon -->\n        <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-tags-wrapper-suffix-icon ms-me-3\">\n          <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n          <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n        </span>\n\n        <!-- Selected Flag -->\n        <!-- <img *ngIf=\"showFlagImage && selectedItemObj?.countryCode\"\n            [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.label | lowercase) + '.svg'\"\n            class=\"ms-country-flag ms-me-2\"\n            alt=\"{{ selectedItemObj?.label }}\" /> -->\n        <ms-flag-icon *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"ms-country-flag ms-me-2\" [name]=\"selectedItemObj?.label | lowercase\"></ms-flag-icon>\n\n        <!-- TAGS -->\n        <span class=\"ms-tag ms-me-1\" *ngFor=\"let item of visibleTags\">\n          {{ item.label }}\n          <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n        </span>\n\n        <!-- +N MORE -->\n        <span class=\"ms-tag ms-more-btn\"\n              *ngIf=\"hiddenTagsCount() > 0\"\n              (click)=\"toggleHiddenTags(); $event.stopPropagation()\">\n          +{{ hiddenTagsCount() }} more\n        </span>\n\n        <!-- DROPDOWN FOR HIDDEN TAGS -->\n        <div class=\"ms-hidden-tags-dropdown\"\n            *ngIf=\"isHiddenTagsOpen && hiddenTagsCount() > 0\"\n            (click)=\"$event.stopPropagation()\">\n          <span class=\"ms-tag\" *ngFor=\"let item of hiddenTags\">\n            {{ item.label }}\n            <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n          </span>\n        </div>\n\n        <!-- Placeholder -->\n        <span *ngIf=\"selectedItems.length === 0\"\n              class=\"ms-input-placeholder\">\n          {{ inputPlaceholder || 'Default Dropdown' }}\n        </span>\n\n        <!-- Suffix Icon -->\n        <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-tags-wrapper-suffix-icon\">\n          <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n          <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center ms-ms-3\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n        </span>\n\n      </div>\n\n      </div>\n\n      <!-- Input Field Trigger -->\n      <div *ngIf=\"multiSelectDisplay !== 'tags'\" \n        class=\"ms-dropdown-input-wrapper ms-w-100\"\n        (click)=\"onTriggerClick(); $event.stopPropagation()\">\n        <!-- [class.ms-input-selected]=\"(selectedItems.length > 0)\" -->\n        <div class=\"ms-input-wrapper\" [class.ms-input-focus]=\"inputFocusState || isOpen\"\n          [class.ms-input-error]=\"inputErrorState || isSelectionRequired()\"\n          [class.ms-input-warning]=\"inputWarningState\" [class.disabled]=\"isDisabled\">\n          <!-- Prefix Icon -->\n          <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-input-prefix-icon\">\n            <!-- <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n            <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n          </span>\n\n          <!-- Flag -->\n          <span *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"flag_image_container\">\n            <!-- <img\n              [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.countryCode | lowercase) + '.svg'\"\n              class=\"ms-country-flag ms-me-2\"\n              [alt]=\"selectedItemObj.label || ''\" /> -->\n              <ms-flag-icon class=\"ms-country-flag ms-me-2\" [name]=\"selectedItemObj?.label | lowercase\"></ms-flag-icon>\n          </span>\n\n          <!-- VALUE TEXT -->\n          <span class=\"ms-input-value ms-me-3\"\n                [class.ms-placeholder]=\"!(selectedItem || text)\">\n            {{ selectedItem || text || inputPlaceholder }}\n          </span>\n\n          <!-- Suffix Icon -->\n          <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-input-suffix-icon\">\n            <!-- <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n            <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n          </span>\n        </div>\n    </div>\n    </div>\n\n\n  <div *ngIf=\"isOpen\" class=\"ms-dropdown-menu\" [ngClass]=\"[dropdownMenuClass || '', 'ms-dropdown-' + dropdownPosition()]\"\n       [style.maxHeight]=\"maxHeight\"\n       [ngStyle]=\"{'overflowY': 'auto', 'overflowX': 'hidden', 'padding': searchable ? '0' : '4px 0' }\"\n       (click)=\"$event.stopPropagation()\">\n    \n    <!-- Loader -->\n    <div *ngIf=\"loading\" class=\"ms-dropdown-loader\">\n      <ms-spinner [color]=\"'primary'\" [size]=\"'md'\"></ms-spinner>\n    </div>\n\n    <!-- Dropdown content -->\n    <ng-container *ngIf=\"!loading\">\n    <!-- Search input -->\n     <div *ngIf=\"searchable\" class=\"ms-dropdown-search-container\">\n        <input type=\"text\" [(ngModel)]=\"searchTerm\"\n           [placeholder]=\"searchPlaceholder\" class=\"ms-dropdown-search\" />\n        <ms-icon class=\"ms_icon\" [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n     </div>\n\n    <!-- Dropdown items -->\n    <ng-container *ngIf=\"filteredItems.length > 0; else noResults\">\n      <button *ngFor=\"let item of filteredItems; let i = index\"\n            class=\"ms-dropdown-item ms-d-flex ms-align-items-center\"\n            [disabled]=\"item.disabled\"\n            [class.ms-selected]=\"item.selected\"\n            [class.ms-p-0]=\"item.divider\"\n            (click)=\"selectItem(item)\">\n          <!--  MULTI-SELECT TICK ICON -->\n          <div>\n\n          </div>\n          <!-- <span *ngIf=\"item.icon && !showFlagImage\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + item.icon\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\"></span> -->\n          <ms-icon *ngIf=\"item.icon && !showFlagImage\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\" [name]=\"item.icon\" [size]=\"'small'\"></ms-icon>\n\n             <!-- COUNTRY FLAG -->\n              <!-- <img *ngIf=\"item.icon && showFlagImage\"\n                  [src]=\"'../../../../assets/data-grid/flags/' + (item.countryCode | lowercase) + '.svg'\"\n                  class=\"ms-country-flag ms-me-2\"\n                  alt=\"{{ item.label }}\" /> -->\n              <ms-flag-icon *ngIf=\"item.icon && showFlagImage\" [name]=\"item.label | lowercase\"></ms-flag-icon>\n              <!-- <span>{{item.label | lowercase}}</span> -->\n              <!-- COUNTRY NAME -->\n              <span [style.padding-left.px]=\"showFlagImage || item.icon ? 10 : 0\" class=\"ms-country-label\">\n              {{ item.label }}\n              </span>\n              <!-- <span *ngIf=\"item.selected\" [inlineSVG]=\"'../../../../assets/data-grid/icons/blue-check.svg'\" class=\"dropdown_tick_icon ms-d-flex ms-me-2\">\n                <ms-icon [name]=\"'check'\" [size]=\"'small'\"></ms-icon> -->\n                <ms-icon *ngIf=\"item.selected\" class=\"dropdown_tick_icon ms-d-flex ms-me-2\" [name]=\"'check'\" [color]=\"'ms-icon-blue'\" [size]=\"'small'\"></ms-icon>\n              <!-- </span> -->\n          <!-- {{ item.label }} -->\n        </button>\n      </ng-container>\n\n    <ng-template #noResults>\n      <div class=\"ms-dropdown-no-results\">{{ noResultsText }}</div>\n    </ng-template>\n    </ng-container>\n  </div>\n</div>", styles: [".ms-dropdown-wrapper{position:relative;display:inline-block}.ms-dropdown-trigger{width:100%;cursor:pointer}.ms-input-wrapper.ms-input-error,.ms-input-wrapper.ms-input-error:hover{border-color:#dc2626}.ms-input-wrapper.ms-input-warning,.ms-input-wrapper.ms-input-warning:hover{border-color:#f59e0b}.ms-input-wrapper.ms-input-focus .ms-dropdown-input-field{border-color:#3b82f6}.ms-input-wrapper.ms-input-focus .ms-input-tags-field{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.ms-dropdown-input-label{font-size:14px;font-weight:500;color:#374151;margin:0}.ms-dropdown-input-label .ms-required{color:#dc2626;margin-left:2px}.ms-dropdown-input-field-wrapper{display:flex;align-items:center;position:relative;gap:0}.ms-dropdown-input-prefix-icon{display:flex;align-items:center;justify-content:center;padding-left:12px;flex-shrink:0;color:#6b7280}.ms-dropdown-input-prefix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-dropdown-input-suffix-icon{display:flex;align-items:center;justify-content:center;padding-right:12px;flex-shrink:0;color:#6b7280}.ms-dropdown-input-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-tags-wrapper-prefix-icon{display:flex;align-items:center;justify-content:center;padding-left:12px;flex-shrink:0;color:#6b7280}.ms-tags-wrapper-prefix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-tags-wrapper-suffix-icon{flex-shrink:0;color:#6b7280;margin-left:auto}.ms-tags-wrapper-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-input-wrapper{flex:1;padding:10px 12px;border:1px solid #E0E0E0;border-radius:8px;font-size:14px;color:#374151;background-color:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s}.ms-input-wrapper:hover:not(.disabled,.ms-input-error,.ms-input-warning){border-color:#3b82f6}.ms-input-wrapper:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-input-wrapper.disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-input-wrapper::placeholder{color:#9ca3af}.ms-input-wrapper.disabled:hover{border-color:#e0e0e0!important}.ms-dropdown-menu{position:absolute;left:0;right:0;z-index:1000;border-radius:12px;background-color:#fff;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0;padding:4px 0}.ms-dropdown-menu.ms-dropdown-down{top:100%;margin-top:6px}.ms-dropdown-menu.ms-dropdown-up{bottom:100%;margin-bottom:6px}.ms-dropdown-item{width:100%;text-align:left;padding:8px 12px;background:none;border:none;cursor:pointer;transition:background-color .2s;font-size:14px!important;font-weight:400}.ms-dropdown-item .ms-country-label{font-size:14px!important;color:#1b1f22;padding-left:10px}.ms-dropdown-item:hover{background-color:#f5f5f5}.ms-dropdown-item.ms-selected{background:#0084ff1a}.dropdown_tick_icon{margin-left:auto}.ms-dropdown-search{width:-webkit-fill-available;padding:12px;margin:12px;border:1px solid #d1d5db;border-radius:8px}.ms-dropdown-search-container{position:sticky;top:0;background-color:#fff}.ms-dropdown-search-container input{padding-left:40px}.ms-dropdown-search-container .ms_icon{position:absolute;z-index:99999999;top:25px;left:25px;bottom:0;width:16px;height:16px}.ms-dropdown-no-results{padding:6px 12px;color:#9ca3af;font-style:italic}.ms-country-flag{width:18px;height:14px;object-fit:cover;border-radius:2px}.flag_image_container{display:flex;align-items:center}.flag_image_container .ms-country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-country-dial{font-size:12px;color:#6b7280}.ms-dropdown-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:12px}.ms-dropdown-loader .ms-spinner{display:flex;align-items:center;justify-content:center}.ms-dropdown-loader .ms-spinner .ms-spinner-circle{width:30px;height:30px;border:3px solid #e5e7eb;border-top:3px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}.ms-loader-text{margin:0;font-size:14px;color:#6b7280;font-weight:500}@keyframes spin{to{transform:rotate(360deg)}}.ms-tag{border-radius:4px;padding:4px 8px;font-size:12px;display:inline-flex;align-items:center;background:#1f24281a;color:#1b1f22}.ms-tag .ms-tag-close{cursor:pointer}.ms-tag-remove{cursor:pointer;margin-left:6px;font-weight:700}.ms-tag-input{border:none;outline:none;min-width:60px}.ms-tag-container{border:1px solid gainsboro;border-radius:4px;padding:4px 8px}.ms-more-btn{background:#d1d5db;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-hidden-tags-dropdown{position:absolute;top:100%;left:0;right:0;border-radius:8px;padding:4px;margin-top:4px;z-index:1000;display:flex;flex-wrap:wrap;gap:4px;height:60px;max-height:120px;overflow-y:auto;border:1px solid #E0E0E0;background:#fff;box-shadow:0 2px 12px #00000014}.ms-hidden-tags-dropdown .ms-tag{width:fit-content;height:fit-content}.ms-dropdown-form-control{padding:.2rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;opacity:1;border-width:1px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::placeholder{color:#6a6b6d;opacity:1}::-webkit-input-placeholder{color:#6a6b6d}::-moz-placeholder{color:#6a6b6d;opacity:1}:-ms-input-placeholder{color:#6a6b6d}.ms-input-placeholder{font-size:14px!important}:-moz-placeholder{color:#6a6b6d;opacity:1}.ms-hover{border:1px solid #0084FF;box-shadow:0 0 0 1px #b7dcff}.ms-input-wrapper{position:relative;display:flex;align-items:center;height:36px;padding:0 8px;border-radius:8px;cursor:pointer;background:#fff;border:1px solid #E0E0E0;font-size:14px!important;min-width:200px;transition:border-color .2s,box-shadow .2s}.ms-input-wrapper:hover{border-color:#0084ff}.ms-input-selected{border-color:#0084ff;box-shadow:none}.ms-input-wrapper.ms-input-focus{border-color:#0084ff;box-shadow:0 0 0 1px #b7dcff}.ms-input-value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px!important}.ms-placeholder{color:#9ca3af}input:focus-visible{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "component", type: MsSpinner, selector: "ms-spinner", inputs: ["color", "size", "text"], outputs: ["htmlChange"] }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }, { kind: "component", type: MsFlagIcon, selector: "ms-flag-icon", inputs: ["name", "size"] }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDropdown, decorators: [{
             type: Component,
-            args: [{ selector: 'ms-dropdown', standalone: true, imports: [CommonModule, FormsModule, MsButton, InlineSVGModule, MsSpinner, MsIcon, MsFlagIcon], template: "<div class=\"ms-dropdown-wrapper ms-w-100\" [ngClass]=\"customClass\"\n    (click)=\"onTriggerClick()\">\n    <div class=\"ms-dropdown-field ms-d-flex ms-align-items-center ms-w-100\">\n      <!-- allowMultiple && multiSelectDisplay === 'tags' -->\n      <div class=\"ms-input-wrapper\" *ngIf=\"allowMultiple && multiSelectDisplay === 'tags'\"\n        [class.focused]=\"isFocused\"\n        [class.error]=\"hasError\"\n        [class.disabled]=\"isDisabled\"\n        [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\"\n        (click)=\"focusInput()\" [class.ms-dropdown-form-control]=\"visibleTags.length > 0\">\n\n        <div class=\"ms-dropdown-display ms-d-flex ms-align-items-center ms-w-100\">\n\n        <!-- Prefix Icon -->\n        <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-tags-wrapper-suffix-icon ms-me-3\">\n          <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n          <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n        </span>\n\n        <!-- Selected Flag -->\n        <!-- <img *ngIf=\"showFlagImage && selectedItemObj?.countryCode\"\n            [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.label | lowercase) + '.svg'\"\n            class=\"ms-country-flag ms-me-2\"\n            alt=\"{{ selectedItemObj?.label }}\" /> -->\n        <ms-flag-icon *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"ms-country-flag ms-me-2\" [name]=\"selectedItemObj?.label | lowercase\"></ms-flag-icon>\n\n        <!-- TAGS -->\n        <span class=\"ms-tag ms-me-1\" *ngFor=\"let item of visibleTags\">\n          {{ item.label }}\n          <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n        </span>\n\n        <!-- +N MORE -->\n        <span class=\"ms-tag ms-more-btn\"\n              *ngIf=\"hiddenTagsCount() > 0\"\n              (click)=\"toggleHiddenTags(); $event.stopPropagation()\">\n          +{{ hiddenTagsCount() }} more\n        </span>\n\n        <!-- DROPDOWN FOR HIDDEN TAGS -->\n        <div class=\"ms-hidden-tags-dropdown\"\n            *ngIf=\"isHiddenTagsOpen && hiddenTagsCount() > 0\"\n            (click)=\"$event.stopPropagation()\">\n          <span class=\"ms-tag\" *ngFor=\"let item of hiddenTags\">\n            {{ item.label }}\n            <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n          </span>\n        </div>\n\n        <!-- Placeholder -->\n        <span *ngIf=\"selectedItems.length === 0\"\n              class=\"ms-input-placeholder\">\n          {{ inputPlaceholder || 'Default Dropdown' }}\n        </span>\n\n        <!-- Suffix Icon -->\n        <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-tags-wrapper-suffix-icon\">\n          <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n          <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center ms-ms-3\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n        </span>\n\n      </div>\n\n      </div>\n\n      <!-- Input Field Trigger -->\n      <div *ngIf=\"multiSelectDisplay !== 'tags'\" \n        class=\"ms-dropdown-input-wrapper ms-w-100\"\n        (click)=\"onTriggerClick(); $event.stopPropagation()\">\n\n        <div class=\"ms-input-wrapper\" [class.ms-input-selected]=\"(selectedItems.length > 0)\" [class.ms-input-focus]=\"inputFocusState || isOpen\"\n          [class.ms-input-error]=\"inputErrorState || isSelectionRequired()\"\n          [class.ms-input-warning]=\"inputWarningState\" [class.disabled]=\"isDisabled\">\n          <!-- Prefix Icon -->\n          <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-input-prefix-icon\">\n            <!-- <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n            <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n          </span>\n\n          <!-- Flag -->\n          <span *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"flag_image_container\">\n            <!-- <img\n              [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.countryCode | lowercase) + '.svg'\"\n              class=\"ms-country-flag ms-me-2\"\n              [alt]=\"selectedItemObj.label || ''\" /> -->\n              <ms-flag-icon class=\"ms-country-flag ms-me-2\" [name]=\"selectedItemObj?.label | lowercase\"></ms-flag-icon>\n          </span>\n\n          <!-- VALUE TEXT -->\n          <span class=\"ms-input-value ms-me-3\"\n                [class.ms-placeholder]=\"!(selectedItem || text)\">\n            {{ selectedItem || text || inputPlaceholder }}\n          </span>\n\n          <!-- Suffix Icon -->\n          <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-input-suffix-icon\">\n            <!-- <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n            <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n          </span>\n        </div>\n    </div>\n    </div>\n\n\n  <div *ngIf=\"isOpen\" class=\"ms-dropdown-menu\" [ngClass]=\"[dropdownMenuClass || '', 'ms-dropdown-' + dropdownPosition()]\"\n       [style.maxHeight]=\"maxHeight\"\n       [ngStyle]=\"{'overflowY': 'auto', 'overflowX': 'hidden'}\"\n       (click)=\"$event.stopPropagation()\">\n    \n    <!-- Loader -->\n    <div *ngIf=\"loading\" class=\"ms-dropdown-loader\">\n      <ms-spinner [color]=\"'primary'\" [size]=\"'md'\"></ms-spinner>\n    </div>\n\n    <!-- Dropdown content -->\n    <ng-container *ngIf=\"!loading\">\n    <!-- Search input -->\n     <div *ngIf=\"searchable\" class=\"ms-dropdown-search-container\">\n        <input type=\"text\" [(ngModel)]=\"searchTerm\"\n           [placeholder]=\"searchPlaceholder\" class=\"ms-dropdown-search\" />\n        <ms-icon class=\"ms_icon\" [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n     </div>\n\n    <!-- Dropdown items -->\n    <ng-container *ngIf=\"filteredItems.length > 0; else noResults\">\n      <button *ngFor=\"let item of filteredItems; let i = index\"\n            class=\"ms-dropdown-item ms-d-flex ms-align-items-center\"\n            [disabled]=\"item.disabled\"\n            [class.ms-selected]=\"item.selected\"\n            [class.ms-p-0]=\"item.divider\"\n            (click)=\"selectItem(item)\">\n          <!--  MULTI-SELECT TICK ICON -->\n          <div>\n\n          </div>\n          <!-- <span *ngIf=\"item.icon && !showFlagImage\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + item.icon\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\"></span> -->\n          <ms-icon *ngIf=\"item.icon && !showFlagImage\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\" [name]=\"item.icon\" [size]=\"'small'\"></ms-icon>\n\n             <!-- COUNTRY FLAG -->\n              <!-- <img *ngIf=\"item.icon && showFlagImage\"\n                  [src]=\"'../../../../assets/data-grid/flags/' + (item.countryCode | lowercase) + '.svg'\"\n                  class=\"ms-country-flag ms-me-2\"\n                  alt=\"{{ item.label }}\" /> -->\n              <ms-flag-icon *ngIf=\"item.icon && showFlagImage\" [name]=\"item.label | lowercase\"></ms-flag-icon>\n              <!-- <span>{{item.label | lowercase}}</span> -->\n              <!-- COUNTRY NAME -->\n              <span [style.padding-left.px]=\"showFlagImage || item.icon ? 10 : 0\" class=\"ms-country-label\">\n              {{ item.label }}\n              </span>\n              <!-- <span *ngIf=\"item.selected\" [inlineSVG]=\"'../../../../assets/data-grid/icons/blue-check.svg'\" class=\"dropdown_tick_icon ms-d-flex ms-me-2\">\n                <ms-icon [name]=\"'check'\" [size]=\"'small'\"></ms-icon> -->\n                <ms-icon *ngIf=\"item.selected\" class=\"dropdown_tick_icon ms-d-flex ms-me-2\" [name]=\"'check'\" [color]=\"'ms-icon-blue'\" [size]=\"'small'\"></ms-icon>\n              <!-- </span> -->\n          <!-- {{ item.label }} -->\n        </button>\n      </ng-container>\n\n    <ng-template #noResults>\n      <div class=\"ms-dropdown-no-results\">{{ noResultsText }}</div>\n    </ng-template>\n    </ng-container>\n  </div>\n</div>", styles: [".ms-dropdown-wrapper{position:relative;display:inline-block}.ms-dropdown-trigger{width:100%;cursor:pointer}.ms-input-wrapper.ms-input-error,.ms-input-wrapper.ms-input-error:hover{border-color:#dc2626}.ms-input-wrapper.ms-input-warning,.ms-input-wrapper.ms-input-warning:hover{border-color:#f59e0b}.ms-input-wrapper.ms-input-focus .ms-dropdown-input-field{border-color:#3b82f6}.ms-input-wrapper.ms-input-focus .ms-input-tags-field{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.ms-dropdown-input-label{font-size:14px;font-weight:500;color:#374151;margin:0}.ms-dropdown-input-label .ms-required{color:#dc2626;margin-left:2px}.ms-dropdown-input-field-wrapper{display:flex;align-items:center;position:relative;gap:0}.ms-dropdown-input-prefix-icon{display:flex;align-items:center;justify-content:center;padding-left:12px;flex-shrink:0;color:#6b7280}.ms-dropdown-input-prefix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-dropdown-input-suffix-icon{display:flex;align-items:center;justify-content:center;padding-right:12px;flex-shrink:0;color:#6b7280}.ms-dropdown-input-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-tags-wrapper-prefix-icon{display:flex;align-items:center;justify-content:center;padding-left:12px;flex-shrink:0;color:#6b7280}.ms-tags-wrapper-prefix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-tags-wrapper-suffix-icon{flex-shrink:0;color:#6b7280;margin-left:auto}.ms-tags-wrapper-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-input-wrapper{flex:1;padding:10px 12px;border:1px solid #E0E0E0;border-radius:8px;font-size:14px;color:#374151;background-color:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s}.ms-input-wrapper:hover:not(.disabled,.ms-input-error,.ms-input-warning){border-color:#3b82f6}.ms-input-wrapper:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-input-wrapper.disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-input-wrapper::placeholder{color:#9ca3af}.ms-input-wrapper.disabled:hover{border-color:#e0e0e0!important}.ms-dropdown-menu{position:absolute;left:0;right:0;z-index:1000;border-radius:12px;background-color:#fff;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0;padding:4px 0}.ms-dropdown-menu.ms-dropdown-down{top:100%;margin-top:6px}.ms-dropdown-menu.ms-dropdown-up{bottom:100%;margin-bottom:6px}.ms-dropdown-item{width:100%;text-align:left;padding:8px 12px;background:none;border:none;cursor:pointer;transition:background-color .2s;font-size:14px!important;font-weight:400}.ms-dropdown-item .ms-country-label{font-size:14px!important;color:#1b1f22;padding-left:10px}.ms-dropdown-item:hover{background-color:#f5f5f5}.ms-dropdown-item.ms-selected{background:#0084ff1a}.dropdown_tick_icon{margin-left:auto}.ms-dropdown-search{width:-webkit-fill-available;padding:12px;margin:12px;border:1px solid #d1d5db;border-radius:8px}.ms-dropdown-search-container{position:sticky;top:0;background-color:#fff}.ms-dropdown-search-container input{padding-left:40px}.ms-dropdown-search-container .ms_icon{position:absolute;z-index:99999999;top:25px;left:25px;bottom:0;width:16px;height:16px}.ms-dropdown-no-results{padding:6px 12px;color:#9ca3af;font-style:italic}.ms-country-flag{width:18px;height:14px;object-fit:cover;border-radius:2px}.flag_image_container{display:flex;align-items:center}.flag_image_container .ms-country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-country-dial{font-size:12px;color:#6b7280}.ms-dropdown-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:12px}.ms-dropdown-loader .ms-spinner{display:flex;align-items:center;justify-content:center}.ms-dropdown-loader .ms-spinner .ms-spinner-circle{width:30px;height:30px;border:3px solid #e5e7eb;border-top:3px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}.ms-loader-text{margin:0;font-size:14px;color:#6b7280;font-weight:500}@keyframes spin{to{transform:rotate(360deg)}}.ms-tag{border-radius:4px;padding:4px 8px;font-size:12px;display:inline-flex;align-items:center;background:#1f24281a;color:#1b1f22}.ms-tag .ms-tag-close{cursor:pointer}.ms-tag-remove{cursor:pointer;margin-left:6px;font-weight:700}.ms-tag-input{border:none;outline:none;min-width:60px}.ms-tag-container{border:1px solid gainsboro;border-radius:4px;padding:4px 8px}.ms-more-btn{background:#d1d5db;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-hidden-tags-dropdown{position:absolute;top:100%;left:0;right:0;border-radius:8px;padding:4px;margin-top:4px;z-index:1000;display:flex;flex-wrap:wrap;gap:4px;height:60px;max-height:120px;overflow-y:auto;border:1px solid #E0E0E0;background:#fff;box-shadow:0 2px 12px #00000014}.ms-hidden-tags-dropdown .ms-tag{width:fit-content;height:fit-content}.ms-dropdown-form-control{padding:.2rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;opacity:1;border-width:1px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::placeholder{color:#6a6b6d;opacity:1}::-webkit-input-placeholder{color:#6a6b6d}::-moz-placeholder{color:#6a6b6d;opacity:1}:-ms-input-placeholder{color:#6a6b6d}.ms-input-placeholder{font-size:14px!important}:-moz-placeholder{color:#6a6b6d;opacity:1}.ms-hover{border:1px solid #0084FF;box-shadow:0 0 0 1px #b7dcff}.ms-input-wrapper{position:relative;display:flex;align-items:center;height:36px;padding:0 8px;border-radius:8px;cursor:pointer;background:#fff;border:1px solid #E0E0E0;font-size:14px!important;min-width:200px;transition:border-color .2s,box-shadow .2s}.ms-input-wrapper:hover{border-color:#0084ff}.ms-input-selected{border-color:#0084ff;box-shadow:none}.ms-input-wrapper.ms-input-focus{border-color:#0084ff;box-shadow:0 0 0 1px #b7dcff}.ms-input-value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px!important}.ms-placeholder{color:#9ca3af}input:focus-visible{outline:none}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { text: [{
+            args: [{ selector: 'ms-dropdown', standalone: true, imports: [CommonModule, FormsModule, MsButton, InlineSVGModule, MsSpinner, MsIcon, MsFlagIcon], template: "<div class=\"ms-dropdown-wrapper ms-w-100\" [ngClass]=\"customClass\"\n    (click)=\"onTriggerClick()\">\n    <div class=\"ms-dropdown-field ms-d-flex ms-align-items-center ms-w-100\">\n      <!-- allowMultiple && multiSelectDisplay === 'tags' -->\n       <!-- || (selectedItems.length > 0) -->\n      <div class=\"ms-input-wrapper\" *ngIf=\"allowMultiple && multiSelectDisplay === 'tags'\"\n        [class.focused]=\"isFocused\"\n        [class.error]=\"hasError\"\n        [class.disabled]=\"isDisabled\"\n        [class.ms-input-focus]=\"inputFocusState || isOpen\"\n        (click)=\"focusInput()\" [class.ms-dropdown-form-control]=\"visibleTags.length > 0\">\n\n        <div class=\"ms-dropdown-display ms-d-flex ms-align-items-center ms-w-100\">\n\n        <!-- Prefix Icon -->\n        <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-tags-wrapper-suffix-icon ms-me-3\">\n          <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n          <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n        </span>\n\n        <!-- Selected Flag -->\n        <!-- <img *ngIf=\"showFlagImage && selectedItemObj?.countryCode\"\n            [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.label | lowercase) + '.svg'\"\n            class=\"ms-country-flag ms-me-2\"\n            alt=\"{{ selectedItemObj?.label }}\" /> -->\n        <ms-flag-icon *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"ms-country-flag ms-me-2\" [name]=\"selectedItemObj?.label | lowercase\"></ms-flag-icon>\n\n        <!-- TAGS -->\n        <span class=\"ms-tag ms-me-1\" *ngFor=\"let item of visibleTags\">\n          {{ item.label }}\n          <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n        </span>\n\n        <!-- +N MORE -->\n        <span class=\"ms-tag ms-more-btn\"\n              *ngIf=\"hiddenTagsCount() > 0\"\n              (click)=\"toggleHiddenTags(); $event.stopPropagation()\">\n          +{{ hiddenTagsCount() }} more\n        </span>\n\n        <!-- DROPDOWN FOR HIDDEN TAGS -->\n        <div class=\"ms-hidden-tags-dropdown\"\n            *ngIf=\"isHiddenTagsOpen && hiddenTagsCount() > 0\"\n            (click)=\"$event.stopPropagation()\">\n          <span class=\"ms-tag\" *ngFor=\"let item of hiddenTags\">\n            {{ item.label }}\n            <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n          </span>\n        </div>\n\n        <!-- Placeholder -->\n        <span *ngIf=\"selectedItems.length === 0\"\n              class=\"ms-input-placeholder\">\n          {{ inputPlaceholder || 'Default Dropdown' }}\n        </span>\n\n        <!-- Suffix Icon -->\n        <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-tags-wrapper-suffix-icon\">\n          <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n          <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center ms-ms-3\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n        </span>\n\n      </div>\n\n      </div>\n\n      <!-- Input Field Trigger -->\n      <div *ngIf=\"multiSelectDisplay !== 'tags'\" \n        class=\"ms-dropdown-input-wrapper ms-w-100\"\n        (click)=\"onTriggerClick(); $event.stopPropagation()\">\n        <!-- [class.ms-input-selected]=\"(selectedItems.length > 0)\" -->\n        <div class=\"ms-input-wrapper\" [class.ms-input-focus]=\"inputFocusState || isOpen\"\n          [class.ms-input-error]=\"inputErrorState || isSelectionRequired()\"\n          [class.ms-input-warning]=\"inputWarningState\" [class.disabled]=\"isDisabled\">\n          <!-- Prefix Icon -->\n          <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-input-prefix-icon\">\n            <!-- <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n            <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n          </span>\n\n          <!-- Flag -->\n          <span *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"flag_image_container\">\n            <!-- <img\n              [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.countryCode | lowercase) + '.svg'\"\n              class=\"ms-country-flag ms-me-2\"\n              [alt]=\"selectedItemObj.label || ''\" /> -->\n              <ms-flag-icon class=\"ms-country-flag ms-me-2\" [name]=\"selectedItemObj?.label | lowercase\"></ms-flag-icon>\n          </span>\n\n          <!-- VALUE TEXT -->\n          <span class=\"ms-input-value ms-me-3\"\n                [class.ms-placeholder]=\"!(selectedItem || text)\">\n            {{ selectedItem || text || inputPlaceholder }}\n          </span>\n\n          <!-- Suffix Icon -->\n          <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-input-suffix-icon\">\n            <!-- <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n            <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n          </span>\n        </div>\n    </div>\n    </div>\n\n\n  <div *ngIf=\"isOpen\" class=\"ms-dropdown-menu\" [ngClass]=\"[dropdownMenuClass || '', 'ms-dropdown-' + dropdownPosition()]\"\n       [style.maxHeight]=\"maxHeight\"\n       [ngStyle]=\"{'overflowY': 'auto', 'overflowX': 'hidden', 'padding': searchable ? '0' : '4px 0' }\"\n       (click)=\"$event.stopPropagation()\">\n    \n    <!-- Loader -->\n    <div *ngIf=\"loading\" class=\"ms-dropdown-loader\">\n      <ms-spinner [color]=\"'primary'\" [size]=\"'md'\"></ms-spinner>\n    </div>\n\n    <!-- Dropdown content -->\n    <ng-container *ngIf=\"!loading\">\n    <!-- Search input -->\n     <div *ngIf=\"searchable\" class=\"ms-dropdown-search-container\">\n        <input type=\"text\" [(ngModel)]=\"searchTerm\"\n           [placeholder]=\"searchPlaceholder\" class=\"ms-dropdown-search\" />\n        <ms-icon class=\"ms_icon\" [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n     </div>\n\n    <!-- Dropdown items -->\n    <ng-container *ngIf=\"filteredItems.length > 0; else noResults\">\n      <button *ngFor=\"let item of filteredItems; let i = index\"\n            class=\"ms-dropdown-item ms-d-flex ms-align-items-center\"\n            [disabled]=\"item.disabled\"\n            [class.ms-selected]=\"item.selected\"\n            [class.ms-p-0]=\"item.divider\"\n            (click)=\"selectItem(item)\">\n          <!--  MULTI-SELECT TICK ICON -->\n          <div>\n\n          </div>\n          <!-- <span *ngIf=\"item.icon && !showFlagImage\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + item.icon\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\"></span> -->\n          <ms-icon *ngIf=\"item.icon && !showFlagImage\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\" [name]=\"item.icon\" [size]=\"'small'\"></ms-icon>\n\n             <!-- COUNTRY FLAG -->\n              <!-- <img *ngIf=\"item.icon && showFlagImage\"\n                  [src]=\"'../../../../assets/data-grid/flags/' + (item.countryCode | lowercase) + '.svg'\"\n                  class=\"ms-country-flag ms-me-2\"\n                  alt=\"{{ item.label }}\" /> -->\n              <ms-flag-icon *ngIf=\"item.icon && showFlagImage\" [name]=\"item.label | lowercase\"></ms-flag-icon>\n              <!-- <span>{{item.label | lowercase}}</span> -->\n              <!-- COUNTRY NAME -->\n              <span [style.padding-left.px]=\"showFlagImage || item.icon ? 10 : 0\" class=\"ms-country-label\">\n              {{ item.label }}\n              </span>\n              <!-- <span *ngIf=\"item.selected\" [inlineSVG]=\"'../../../../assets/data-grid/icons/blue-check.svg'\" class=\"dropdown_tick_icon ms-d-flex ms-me-2\">\n                <ms-icon [name]=\"'check'\" [size]=\"'small'\"></ms-icon> -->\n                <ms-icon *ngIf=\"item.selected\" class=\"dropdown_tick_icon ms-d-flex ms-me-2\" [name]=\"'check'\" [color]=\"'ms-icon-blue'\" [size]=\"'small'\"></ms-icon>\n              <!-- </span> -->\n          <!-- {{ item.label }} -->\n        </button>\n      </ng-container>\n\n    <ng-template #noResults>\n      <div class=\"ms-dropdown-no-results\">{{ noResultsText }}</div>\n    </ng-template>\n    </ng-container>\n  </div>\n</div>", styles: [".ms-dropdown-wrapper{position:relative;display:inline-block}.ms-dropdown-trigger{width:100%;cursor:pointer}.ms-input-wrapper.ms-input-error,.ms-input-wrapper.ms-input-error:hover{border-color:#dc2626}.ms-input-wrapper.ms-input-warning,.ms-input-wrapper.ms-input-warning:hover{border-color:#f59e0b}.ms-input-wrapper.ms-input-focus .ms-dropdown-input-field{border-color:#3b82f6}.ms-input-wrapper.ms-input-focus .ms-input-tags-field{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.ms-dropdown-input-label{font-size:14px;font-weight:500;color:#374151;margin:0}.ms-dropdown-input-label .ms-required{color:#dc2626;margin-left:2px}.ms-dropdown-input-field-wrapper{display:flex;align-items:center;position:relative;gap:0}.ms-dropdown-input-prefix-icon{display:flex;align-items:center;justify-content:center;padding-left:12px;flex-shrink:0;color:#6b7280}.ms-dropdown-input-prefix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-dropdown-input-suffix-icon{display:flex;align-items:center;justify-content:center;padding-right:12px;flex-shrink:0;color:#6b7280}.ms-dropdown-input-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-tags-wrapper-prefix-icon{display:flex;align-items:center;justify-content:center;padding-left:12px;flex-shrink:0;color:#6b7280}.ms-tags-wrapper-prefix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-tags-wrapper-suffix-icon{flex-shrink:0;color:#6b7280;margin-left:auto}.ms-tags-wrapper-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-input-wrapper{flex:1;padding:10px 12px;border:1px solid #E0E0E0;border-radius:8px;font-size:14px;color:#374151;background-color:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s}.ms-input-wrapper:hover:not(.disabled,.ms-input-error,.ms-input-warning){border-color:#3b82f6}.ms-input-wrapper:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-input-wrapper.disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-input-wrapper::placeholder{color:#9ca3af}.ms-input-wrapper.disabled:hover{border-color:#e0e0e0!important}.ms-dropdown-menu{position:absolute;left:0;right:0;z-index:1000;border-radius:12px;background-color:#fff;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0;padding:4px 0}.ms-dropdown-menu.ms-dropdown-down{top:100%;margin-top:6px}.ms-dropdown-menu.ms-dropdown-up{bottom:100%;margin-bottom:6px}.ms-dropdown-item{width:100%;text-align:left;padding:8px 12px;background:none;border:none;cursor:pointer;transition:background-color .2s;font-size:14px!important;font-weight:400}.ms-dropdown-item .ms-country-label{font-size:14px!important;color:#1b1f22;padding-left:10px}.ms-dropdown-item:hover{background-color:#f5f5f5}.ms-dropdown-item.ms-selected{background:#0084ff1a}.dropdown_tick_icon{margin-left:auto}.ms-dropdown-search{width:-webkit-fill-available;padding:12px;margin:12px;border:1px solid #d1d5db;border-radius:8px}.ms-dropdown-search-container{position:sticky;top:0;background-color:#fff}.ms-dropdown-search-container input{padding-left:40px}.ms-dropdown-search-container .ms_icon{position:absolute;z-index:99999999;top:25px;left:25px;bottom:0;width:16px;height:16px}.ms-dropdown-no-results{padding:6px 12px;color:#9ca3af;font-style:italic}.ms-country-flag{width:18px;height:14px;object-fit:cover;border-radius:2px}.flag_image_container{display:flex;align-items:center}.flag_image_container .ms-country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-country-dial{font-size:12px;color:#6b7280}.ms-dropdown-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:12px}.ms-dropdown-loader .ms-spinner{display:flex;align-items:center;justify-content:center}.ms-dropdown-loader .ms-spinner .ms-spinner-circle{width:30px;height:30px;border:3px solid #e5e7eb;border-top:3px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}.ms-loader-text{margin:0;font-size:14px;color:#6b7280;font-weight:500}@keyframes spin{to{transform:rotate(360deg)}}.ms-tag{border-radius:4px;padding:4px 8px;font-size:12px;display:inline-flex;align-items:center;background:#1f24281a;color:#1b1f22}.ms-tag .ms-tag-close{cursor:pointer}.ms-tag-remove{cursor:pointer;margin-left:6px;font-weight:700}.ms-tag-input{border:none;outline:none;min-width:60px}.ms-tag-container{border:1px solid gainsboro;border-radius:4px;padding:4px 8px}.ms-more-btn{background:#d1d5db;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-hidden-tags-dropdown{position:absolute;top:100%;left:0;right:0;border-radius:8px;padding:4px;margin-top:4px;z-index:1000;display:flex;flex-wrap:wrap;gap:4px;height:60px;max-height:120px;overflow-y:auto;border:1px solid #E0E0E0;background:#fff;box-shadow:0 2px 12px #00000014}.ms-hidden-tags-dropdown .ms-tag{width:fit-content;height:fit-content}.ms-dropdown-form-control{padding:.2rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;opacity:1;border-width:1px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::placeholder{color:#6a6b6d;opacity:1}::-webkit-input-placeholder{color:#6a6b6d}::-moz-placeholder{color:#6a6b6d;opacity:1}:-ms-input-placeholder{color:#6a6b6d}.ms-input-placeholder{font-size:14px!important}:-moz-placeholder{color:#6a6b6d;opacity:1}.ms-hover{border:1px solid #0084FF;box-shadow:0 0 0 1px #b7dcff}.ms-input-wrapper{position:relative;display:flex;align-items:center;height:36px;padding:0 8px;border-radius:8px;cursor:pointer;background:#fff;border:1px solid #E0E0E0;font-size:14px!important;min-width:200px;transition:border-color .2s,box-shadow .2s}.ms-input-wrapper:hover{border-color:#0084ff}.ms-input-selected{border-color:#0084ff;box-shadow:none}.ms-input-wrapper.ms-input-focus{border-color:#0084ff;box-shadow:0 0 0 1px #b7dcff}.ms-input-value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px!important}.ms-placeholder{color:#9ca3af}input:focus-visible{outline:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: MsDropdownService }], propDecorators: { text: [{
                 type: Input
             }], isDisabled: [{
                 type: Input
@@ -1721,7 +1759,15 @@ class MsPhoneInput {
     }
     handleInput(event) {
         const target = event.target;
-        const newVal = target.value;
+        let newVal = target.value;
+        // Allow only numbers and common phone formatting characters: +, -, (, ), and spaces
+        const allowedChars = /[^0-9\+\-\(\)\s]/g;
+        const cleanedVal = newVal.replace(allowedChars, '');
+        // If invalid characters were removed, update the input value
+        if (newVal !== cleanedVal) {
+            target.value = cleanedVal;
+            newVal = cleanedVal;
+        }
         this.value = newVal;
         // Real-time validation
         if (this.required && !newVal.trim()) {
@@ -1809,11 +1855,11 @@ class MsPhoneInput {
         this.isChildFocused = true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsPhoneInput, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsPhoneInput, isStandalone: true, selector: "app-ms-phone-input", inputs: { id: "id", name: "name", placeholder: "placeholder", state: "state", readonly: "readonly", disabled: "disabled", required: "required", skeleton: "skeleton", invalid: "invalid", pattern: "pattern", value: "value", countryList: "countryList", selectedCountry: "selectedCountry" }, outputs: { change: "change", focus: "focus", blur: "blur", keydown: "keydown", keyup: "keyup", countryChange: "countryChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<!-- Phone Number Input with Country Selector -->\n<div class=\"ms-phone-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\">\n  <div class=\"ms-phone-input-group ms-common-hover ms-d-flex\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.ms-focus]=\"isChildFocused || state === 'ms-focus'\">\n    \n    <!-- Country Selector Dropdown (Left Side) -->\n    <div class=\"phone-country-selector-wrapper\">\n      <!-- Selector Button -->\n      <button\n        type=\"button\"\n        class=\"country-selector-button\"\n        [class.disabled]=\"disabled\"\n        [class.active]=\"isDropdownOpen\"\n        (click)=\"toggleDropdown()\"\n        [disabled]=\"disabled\">\n        \n        <!-- Selected Country Flag -->\n        <!-- <img\n          *ngIf=\"selectedCountry?.countryCode\"\n          [src]=\"getCountryFlagPath(selectedCountry)\"\n          [alt]=\"selectedCountry?.label\"\n          class=\"country-flag\" /> -->\n        <ms-flag-icon *ngIf=\"selectedCountry?.countryCode\" class=\"country-flag\" [size]=\"'small'\" [name]=\"selectedCountry?.label | lowercase\"></ms-flag-icon>\n        \n        <!-- Country Code -->\n        <span class=\"country-code\">{{ selectedCountry?.dialCode || 'US' }}</span>\n        \n        <!-- Chevron Icon -->\n        <span class=\"chevron-icon\">\n          <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/chevron-down.svg'\" alt=\"Icon\" >\n        </span>\n      </button>\n\n      <!-- Dropdown Menu -->\n      <div class=\"country-dropdown\" *ngIf=\"isDropdownOpen\">\n        <!-- Search Input -->\n        <div class=\"ms-position-relative phone-input-search\">\n          <input\n          type=\"text\"\n          class=\"country-search\"\n          placeholder=\"Search country...\"\n          [value]=\"searchTerm\"\n          (input)=\"onSearch($event)\" />\n          <!-- <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/search.svg'\"></span> -->\n          <ms-icon class=\"ms_icon\" [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n        </div>\n        \n\n        <!-- Countries List -->\n        <div class=\"countries-list\">\n          <button\n            *ngFor=\"let country of filteredCountries\"\n            type=\"button\"\n            class=\"country-item\"\n            [class.active]=\"selectedCountry?.countryCode === country.countryCode\"\n            (click)=\"selectCountry(country)\">\n            \n            <!-- Flag -->\n            <!-- <img\n              [src]=\"getCountryFlagPath(country)\"\n              [alt]=\"country.label\"\n              class=\"country-flag-small\" /> -->\n              <ms-flag-icon class=\"country-flag-small\" [size]=\"'small'\" [name]=\"country?.label | lowercase\"></ms-flag-icon>\n            \n            <!-- Country Label and Code -->\n            <div class=\"country-info\">\n              <span class=\"country-label\">{{ country.label }}</span>\n              <!-- <span class=\"country-code-dial\">{{ country.countryCode }} \u2022 {{ country.dialCode }}</span> -->\n            </div>\n          </button>\n        </div>\n\n        <!-- No Results -->\n        <div *ngIf=\"filteredCountries.length === 0\" class=\"no-results\">\n          No countries found\n        </div>\n      </div>\n    </div>\n\n    <!-- Phone Number Input -->\n    <input\n      type=\"tel\"\n      class=\"ms-phone-input-field\"\n      [attr.id]=\"id || null\"\n      [attr.name]=\"name || null\"\n      [placeholder]=\"placeholder\"\n      [attr.pattern]=\"pattern || '[0-9\\-\\(\\)\\+\\s]*'\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      [value]=\"value\"\n      (input)=\"handleInput($event)\"\n      (change)=\"change.emit($event)\"\n      (focus)=\"focus.emit($event);onChildFocus()\"\n      (blur)=\"handleBlur($event)\"\n      (keydown)=\"keydown.emit($event)\"\n      (keyup)=\"keyup.emit($event)\" />\n  </div>\n</div>\n", styles: [".ms-phone-input-container{display:flex;flex-direction:column;width:100%}.ms-phone-input-container .ms-phone-input-group{position:relative}.ms-phone-input-container .ms-phone-input-group .ms-phone-country-selector{flex-shrink:0;border-right:1px solid var(--semantics-border-neutral-default, #CCCCCC)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper{display:inline-block;flex-shrink:0;border-right:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button{display:flex;align-items:center;gap:.5rem;padding:8px;background:none;border:none;cursor:pointer;border-radius:4px 0 0 4px;transition:all .2s ease;color:var(--semantic-fg-neutral-strong, #333333);font-size:.875rem;font-weight:400;white-space:nowrap}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.disabled{opacity:.5;cursor:not-allowed}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-code{font-weight:500!important;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon{width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;transition:transform .2s}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon svg{width:100%;height:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.active .chevron-icon{transform:rotate(180deg)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown{position:absolute;left:0;right:0;background:#fff;border-radius:12px;z-index:1000;min-width:280px;max-height:400px;overflow-y:auto;margin-top:.5rem;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search{padding:.75rem;margin:12px;font-size:.875rem;outline:none;background:#fff;box-sizing:border-box;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;width:-webkit-fill-available;padding-left:40px;font-weight:400}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search:focus{background-color:#fff}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search::placeholder{color:#6a6b6d}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .countries-list{display:flex;flex-direction:column}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item{display:flex;align-items:center;gap:.75rem;padding:8px 12px;background:none;border:none;cursor:pointer;text-align:left;transition:all .2s;color:#1b1f22;font-size:14px}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:last-child{border-bottom:none}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:hover:not(.active){background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active{background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active .country-label{color:var(--semantics-border-brand-default, #0084FF);font-weight:600}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info{display:flex;flex-direction:column;gap:.125rem;flex:1;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-label{font-size:.875rem;font-weight:500;color:var(--semantic-fg-neutral-strong, #333333)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-code-dial{font-size:.75rem;color:var(--semantic-fg-neutral-default, #666666)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .no-results{padding:1rem;text-align:center;color:var(--semantic-fg-neutral-default, #666666);font-size:.875rem}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-group.ms-common-hover:has(.ms-phone-input-field):focus{border:1px solid #D33C3C}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field{flex:1;border:none;background:none;padding:8px;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);font-family:inherit;outline:none}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field:disabled{cursor:not-allowed;opacity:.6}.ms-phone-input-container.ms-has-error .ms-phone-input-group{border-color:var(--semantic-fg-error-default, #D33C3C)!important;box-shadow:0 0 0 1px #da3e3740!important}.ms-phone-input-container.ms-has-success:not(.ms-has-error) .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #00935C)!important;background-color:#36b37e05!important;box-shadow:0 0 0 1px #da3e3740}.ms-phone-input-container.ms-focus .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus{border-color:#0084ff;box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus .phone-country-selector-wrapper{border-right:1px solid #0084FF}.ms-phone-input-container.ms-has-success .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #00935C}.ms-phone-input-container.ms-has-success .ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #00935C}.ms-phone-input-container.ms-has-error .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #D33C3C}.ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #0084FF}.phone-input-search .ms_icon{position:absolute;z-index:99999999;top:25px;left:25px;bottom:0;width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "component", type: MsFlagIcon, selector: "ms-flag-icon", inputs: ["name", "size"] }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsPhoneInput, isStandalone: true, selector: "app-ms-phone-input", inputs: { id: "id", name: "name", placeholder: "placeholder", state: "state", readonly: "readonly", disabled: "disabled", required: "required", skeleton: "skeleton", invalid: "invalid", pattern: "pattern", value: "value", countryList: "countryList", selectedCountry: "selectedCountry" }, outputs: { change: "change", focus: "focus", blur: "blur", keydown: "keydown", keyup: "keyup", countryChange: "countryChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<!-- Phone Number Input with Country Selector -->\n<div class=\"ms-phone-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\">\n  <div class=\"ms-phone-input-group ms-common-hover ms-d-flex\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.ms-focus]=\"isChildFocused || state === 'ms-focus'\">\n    \n    <!-- Country Selector Dropdown (Left Side) -->\n    <div class=\"phone-country-selector-wrapper\">\n      <!-- Selector Button -->\n      <button\n        type=\"button\"\n        class=\"country-selector-button\"\n        [class.disabled]=\"disabled\"\n        [class.active]=\"isDropdownOpen\"\n        (click)=\"toggleDropdown()\"\n        [disabled]=\"disabled\">\n        \n        <!-- Selected Country Flag -->\n        <!-- <img\n          *ngIf=\"selectedCountry?.countryCode\"\n          [src]=\"getCountryFlagPath(selectedCountry)\"\n          [alt]=\"selectedCountry?.label\"\n          class=\"country-flag\" /> -->\n        <ms-flag-icon *ngIf=\"selectedCountry?.countryCode\" class=\"country-flag\" [size]=\"'small'\" [name]=\"selectedCountry?.label | lowercase\"></ms-flag-icon>\n        \n        <!-- Country Code -->\n        <span class=\"country-code\">{{ selectedCountry?.dialCode || 'US' }}</span>\n        \n        <!-- Chevron Icon -->\n        <span class=\"chevron-icon\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/chevron-down.svg'\"></span>\n      </button>\n\n      <!-- Dropdown Menu -->\n      <div class=\"country-dropdown\" *ngIf=\"isDropdownOpen\">\n        <!-- Search Input -->\n        <div class=\"ms-position-relative phone-input-search\">\n          <input\n          type=\"text\"\n          class=\"country-search\"\n          placeholder=\"Search country...\"\n          [value]=\"searchTerm\"\n          (input)=\"onSearch($event)\" />\n          <!-- <span [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/search.svg'\"></span> -->\n          <ms-icon class=\"ms_icon\" [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n        </div>\n        \n\n        <!-- Countries List -->\n        <div class=\"countries-list\">\n          <button\n            *ngFor=\"let country of filteredCountries\"\n            type=\"button\"\n            class=\"country-item\"\n            [class.active]=\"selectedCountry?.countryCode === country.countryCode\"\n            (click)=\"selectCountry(country)\">\n            \n            <!-- Flag -->\n            <!-- <img\n              [src]=\"getCountryFlagPath(country)\"\n              [alt]=\"country.label\"\n              class=\"country-flag-small\" /> -->\n              <ms-flag-icon class=\"country-flag-small\" [size]=\"'small'\" [name]=\"country?.label | lowercase\"></ms-flag-icon>\n            \n            <!-- Country Label and Code -->\n            <div class=\"country-info\">\n              <span class=\"country-label\">{{ country.label }}</span>\n              <!-- <span class=\"country-code-dial\">{{ country.countryCode }} \u2022 {{ country.dialCode }}</span> -->\n            </div>\n          </button>\n        </div>\n\n        <!-- No Results -->\n        <div *ngIf=\"filteredCountries.length === 0\" class=\"no-results\">\n          No countries found\n        </div>\n      </div>\n    </div>\n\n    <!-- Phone Number Input -->\n    <input\n      type=\"tel\"\n      class=\"ms-phone-input-field\"\n      [attr.id]=\"id || null\"\n      [attr.name]=\"name || null\"\n      [placeholder]=\"placeholder\"\n      [attr.pattern]=\"pattern || '[0-9\\\\-\\\\(\\\\)\\\\+\\\\s]*'\"\n      [attr.inputmode]=\"'numeric'\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      [value]=\"value\"\n      (input)=\"handleInput($event)\"\n      (change)=\"change.emit($event)\"\n      (focus)=\"focus.emit($event);onChildFocus()\"\n      (blur)=\"handleBlur($event)\"\n      (keydown)=\"keydown.emit($event)\"\n      (keyup)=\"keyup.emit($event)\" />\n  </div>\n</div>\n", styles: [".ms-phone-input-container{display:flex;flex-direction:column;width:100%}.ms-phone-input-container .ms-phone-input-group{position:relative}.ms-phone-input-container .ms-phone-input-group .ms-phone-country-selector{flex-shrink:0;border-right:1px solid var(--semantics-border-neutral-default, #CCCCCC)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper{display:inline-block;flex-shrink:0;border-right:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button{display:flex;align-items:center;gap:.5rem;padding:8px;background:none;border:none;cursor:pointer;border-radius:4px 0 0 4px;transition:all .2s ease;color:var(--semantic-fg-neutral-strong, #333333);font-size:.875rem;font-weight:400;white-space:nowrap}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.disabled{opacity:.5;cursor:not-allowed}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-code{font-weight:500!important;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon{width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;transition:transform .2s}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon svg{width:100%;height:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.active .chevron-icon{transform:rotate(180deg)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown{position:absolute;left:0;right:0;background:#fff;border-radius:12px;z-index:1000;min-width:280px;max-height:400px;overflow-y:auto;margin-top:.5rem;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search{padding:.75rem;margin:12px;font-size:.875rem;outline:none;background:#fff;box-sizing:border-box;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;width:-webkit-fill-available;padding-left:40px;font-weight:400}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search:focus{background-color:#fff}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search::placeholder{color:#6a6b6d}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .countries-list{display:flex;flex-direction:column}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item{display:flex;align-items:center;gap:.75rem;padding:8px 12px;background:none;border:none;cursor:pointer;text-align:left;transition:all .2s;color:#1b1f22;font-size:14px}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:last-child{border-bottom:none}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:hover:not(.active){background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active{background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active .country-label{color:var(--semantics-border-brand-default, #0084FF);font-weight:600}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info{display:flex;flex-direction:column;gap:.125rem;flex:1;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-label{font-size:.875rem;font-weight:500;color:var(--semantic-fg-neutral-strong, #333333)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-code-dial{font-size:.75rem;color:var(--semantic-fg-neutral-default, #666666)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .no-results{padding:1rem;text-align:center;color:var(--semantic-fg-neutral-default, #666666);font-size:.875rem}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-group.ms-common-hover:has(.ms-phone-input-field):focus{border:1px solid #D33C3C}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field{flex:1;border:none;background:none;padding:8px;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);font-family:inherit;outline:none}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field:disabled{cursor:not-allowed;opacity:.6}.ms-phone-input-container.ms-has-error .ms-phone-input-group{border-color:var(--semantic-fg-error-default, #D33C3C)!important;box-shadow:0 0 0 1px #da3e3740!important}.ms-phone-input-container.ms-has-success:not(.ms-has-error) .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #0084FF)!important}.ms-phone-input-container.ms-focus .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus{border-color:#0084ff;box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus .phone-country-selector-wrapper,.ms-phone-input-container.ms-has-success .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #0084FF}.ms-phone-input-container.ms-has-success .ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #0084FF}.ms-phone-input-container.ms-has-error .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #D33C3C}.ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #0084FF}.phone-input-search .ms_icon{position:absolute;z-index:99999999;top:25px;left:25px;bottom:0;width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i2$1.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "component", type: MsFlagIcon, selector: "ms-flag-icon", inputs: ["name", "size"] }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsPhoneInput, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ms-phone-input', imports: [CommonModule, FormsModule, InlineSVGModule, MsFlagIcon, MsIcon], template: "<!-- Phone Number Input with Country Selector -->\n<div class=\"ms-phone-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\">\n  <div class=\"ms-phone-input-group ms-common-hover ms-d-flex\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.ms-focus]=\"isChildFocused || state === 'ms-focus'\">\n    \n    <!-- Country Selector Dropdown (Left Side) -->\n    <div class=\"phone-country-selector-wrapper\">\n      <!-- Selector Button -->\n      <button\n        type=\"button\"\n        class=\"country-selector-button\"\n        [class.disabled]=\"disabled\"\n        [class.active]=\"isDropdownOpen\"\n        (click)=\"toggleDropdown()\"\n        [disabled]=\"disabled\">\n        \n        <!-- Selected Country Flag -->\n        <!-- <img\n          *ngIf=\"selectedCountry?.countryCode\"\n          [src]=\"getCountryFlagPath(selectedCountry)\"\n          [alt]=\"selectedCountry?.label\"\n          class=\"country-flag\" /> -->\n        <ms-flag-icon *ngIf=\"selectedCountry?.countryCode\" class=\"country-flag\" [size]=\"'small'\" [name]=\"selectedCountry?.label | lowercase\"></ms-flag-icon>\n        \n        <!-- Country Code -->\n        <span class=\"country-code\">{{ selectedCountry?.dialCode || 'US' }}</span>\n        \n        <!-- Chevron Icon -->\n        <span class=\"chevron-icon\">\n          <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/chevron-down.svg'\" alt=\"Icon\" >\n        </span>\n      </button>\n\n      <!-- Dropdown Menu -->\n      <div class=\"country-dropdown\" *ngIf=\"isDropdownOpen\">\n        <!-- Search Input -->\n        <div class=\"ms-position-relative phone-input-search\">\n          <input\n          type=\"text\"\n          class=\"country-search\"\n          placeholder=\"Search country...\"\n          [value]=\"searchTerm\"\n          (input)=\"onSearch($event)\" />\n          <!-- <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/search.svg'\"></span> -->\n          <ms-icon class=\"ms_icon\" [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n        </div>\n        \n\n        <!-- Countries List -->\n        <div class=\"countries-list\">\n          <button\n            *ngFor=\"let country of filteredCountries\"\n            type=\"button\"\n            class=\"country-item\"\n            [class.active]=\"selectedCountry?.countryCode === country.countryCode\"\n            (click)=\"selectCountry(country)\">\n            \n            <!-- Flag -->\n            <!-- <img\n              [src]=\"getCountryFlagPath(country)\"\n              [alt]=\"country.label\"\n              class=\"country-flag-small\" /> -->\n              <ms-flag-icon class=\"country-flag-small\" [size]=\"'small'\" [name]=\"country?.label | lowercase\"></ms-flag-icon>\n            \n            <!-- Country Label and Code -->\n            <div class=\"country-info\">\n              <span class=\"country-label\">{{ country.label }}</span>\n              <!-- <span class=\"country-code-dial\">{{ country.countryCode }} \u2022 {{ country.dialCode }}</span> -->\n            </div>\n          </button>\n        </div>\n\n        <!-- No Results -->\n        <div *ngIf=\"filteredCountries.length === 0\" class=\"no-results\">\n          No countries found\n        </div>\n      </div>\n    </div>\n\n    <!-- Phone Number Input -->\n    <input\n      type=\"tel\"\n      class=\"ms-phone-input-field\"\n      [attr.id]=\"id || null\"\n      [attr.name]=\"name || null\"\n      [placeholder]=\"placeholder\"\n      [attr.pattern]=\"pattern || '[0-9\\-\\(\\)\\+\\s]*'\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      [value]=\"value\"\n      (input)=\"handleInput($event)\"\n      (change)=\"change.emit($event)\"\n      (focus)=\"focus.emit($event);onChildFocus()\"\n      (blur)=\"handleBlur($event)\"\n      (keydown)=\"keydown.emit($event)\"\n      (keyup)=\"keyup.emit($event)\" />\n  </div>\n</div>\n", styles: [".ms-phone-input-container{display:flex;flex-direction:column;width:100%}.ms-phone-input-container .ms-phone-input-group{position:relative}.ms-phone-input-container .ms-phone-input-group .ms-phone-country-selector{flex-shrink:0;border-right:1px solid var(--semantics-border-neutral-default, #CCCCCC)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper{display:inline-block;flex-shrink:0;border-right:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button{display:flex;align-items:center;gap:.5rem;padding:8px;background:none;border:none;cursor:pointer;border-radius:4px 0 0 4px;transition:all .2s ease;color:var(--semantic-fg-neutral-strong, #333333);font-size:.875rem;font-weight:400;white-space:nowrap}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.disabled{opacity:.5;cursor:not-allowed}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-code{font-weight:500!important;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon{width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;transition:transform .2s}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon svg{width:100%;height:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.active .chevron-icon{transform:rotate(180deg)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown{position:absolute;left:0;right:0;background:#fff;border-radius:12px;z-index:1000;min-width:280px;max-height:400px;overflow-y:auto;margin-top:.5rem;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search{padding:.75rem;margin:12px;font-size:.875rem;outline:none;background:#fff;box-sizing:border-box;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;width:-webkit-fill-available;padding-left:40px;font-weight:400}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search:focus{background-color:#fff}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search::placeholder{color:#6a6b6d}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .countries-list{display:flex;flex-direction:column}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item{display:flex;align-items:center;gap:.75rem;padding:8px 12px;background:none;border:none;cursor:pointer;text-align:left;transition:all .2s;color:#1b1f22;font-size:14px}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:last-child{border-bottom:none}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:hover:not(.active){background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active{background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active .country-label{color:var(--semantics-border-brand-default, #0084FF);font-weight:600}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info{display:flex;flex-direction:column;gap:.125rem;flex:1;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-label{font-size:.875rem;font-weight:500;color:var(--semantic-fg-neutral-strong, #333333)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-code-dial{font-size:.75rem;color:var(--semantic-fg-neutral-default, #666666)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .no-results{padding:1rem;text-align:center;color:var(--semantic-fg-neutral-default, #666666);font-size:.875rem}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-group.ms-common-hover:has(.ms-phone-input-field):focus{border:1px solid #D33C3C}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field{flex:1;border:none;background:none;padding:8px;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);font-family:inherit;outline:none}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field:disabled{cursor:not-allowed;opacity:.6}.ms-phone-input-container.ms-has-error .ms-phone-input-group{border-color:var(--semantic-fg-error-default, #D33C3C)!important;box-shadow:0 0 0 1px #da3e3740!important}.ms-phone-input-container.ms-has-success:not(.ms-has-error) .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #00935C)!important;background-color:#36b37e05!important;box-shadow:0 0 0 1px #da3e3740}.ms-phone-input-container.ms-focus .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus{border-color:#0084ff;box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus .phone-country-selector-wrapper{border-right:1px solid #0084FF}.ms-phone-input-container.ms-has-success .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #00935C}.ms-phone-input-container.ms-has-success .ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #00935C}.ms-phone-input-container.ms-has-error .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #D33C3C}.ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #0084FF}.phone-input-search .ms_icon{position:absolute;z-index:99999999;top:25px;left:25px;bottom:0;width:16px;height:16px}\n"] }]
+            args: [{ selector: 'app-ms-phone-input', imports: [CommonModule, FormsModule, InlineSVGModule, MsFlagIcon, MsIcon], template: "<!-- Phone Number Input with Country Selector -->\n<div class=\"ms-phone-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\">\n  <div class=\"ms-phone-input-group ms-common-hover ms-d-flex\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.ms-focus]=\"isChildFocused || state === 'ms-focus'\">\n    \n    <!-- Country Selector Dropdown (Left Side) -->\n    <div class=\"phone-country-selector-wrapper\">\n      <!-- Selector Button -->\n      <button\n        type=\"button\"\n        class=\"country-selector-button\"\n        [class.disabled]=\"disabled\"\n        [class.active]=\"isDropdownOpen\"\n        (click)=\"toggleDropdown()\"\n        [disabled]=\"disabled\">\n        \n        <!-- Selected Country Flag -->\n        <!-- <img\n          *ngIf=\"selectedCountry?.countryCode\"\n          [src]=\"getCountryFlagPath(selectedCountry)\"\n          [alt]=\"selectedCountry?.label\"\n          class=\"country-flag\" /> -->\n        <ms-flag-icon *ngIf=\"selectedCountry?.countryCode\" class=\"country-flag\" [size]=\"'small'\" [name]=\"selectedCountry?.label | lowercase\"></ms-flag-icon>\n        \n        <!-- Country Code -->\n        <span class=\"country-code\">{{ selectedCountry?.dialCode || 'US' }}</span>\n        \n        <!-- Chevron Icon -->\n        <span class=\"chevron-icon\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/chevron-down.svg'\"></span>\n      </button>\n\n      <!-- Dropdown Menu -->\n      <div class=\"country-dropdown\" *ngIf=\"isDropdownOpen\">\n        <!-- Search Input -->\n        <div class=\"ms-position-relative phone-input-search\">\n          <input\n          type=\"text\"\n          class=\"country-search\"\n          placeholder=\"Search country...\"\n          [value]=\"searchTerm\"\n          (input)=\"onSearch($event)\" />\n          <!-- <span [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/search.svg'\"></span> -->\n          <ms-icon class=\"ms_icon\" [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n        </div>\n        \n\n        <!-- Countries List -->\n        <div class=\"countries-list\">\n          <button\n            *ngFor=\"let country of filteredCountries\"\n            type=\"button\"\n            class=\"country-item\"\n            [class.active]=\"selectedCountry?.countryCode === country.countryCode\"\n            (click)=\"selectCountry(country)\">\n            \n            <!-- Flag -->\n            <!-- <img\n              [src]=\"getCountryFlagPath(country)\"\n              [alt]=\"country.label\"\n              class=\"country-flag-small\" /> -->\n              <ms-flag-icon class=\"country-flag-small\" [size]=\"'small'\" [name]=\"country?.label | lowercase\"></ms-flag-icon>\n            \n            <!-- Country Label and Code -->\n            <div class=\"country-info\">\n              <span class=\"country-label\">{{ country.label }}</span>\n              <!-- <span class=\"country-code-dial\">{{ country.countryCode }} \u2022 {{ country.dialCode }}</span> -->\n            </div>\n          </button>\n        </div>\n\n        <!-- No Results -->\n        <div *ngIf=\"filteredCountries.length === 0\" class=\"no-results\">\n          No countries found\n        </div>\n      </div>\n    </div>\n\n    <!-- Phone Number Input -->\n    <input\n      type=\"tel\"\n      class=\"ms-phone-input-field\"\n      [attr.id]=\"id || null\"\n      [attr.name]=\"name || null\"\n      [placeholder]=\"placeholder\"\n      [attr.pattern]=\"pattern || '[0-9\\\\-\\\\(\\\\)\\\\+\\\\s]*'\"\n      [attr.inputmode]=\"'numeric'\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      [value]=\"value\"\n      (input)=\"handleInput($event)\"\n      (change)=\"change.emit($event)\"\n      (focus)=\"focus.emit($event);onChildFocus()\"\n      (blur)=\"handleBlur($event)\"\n      (keydown)=\"keydown.emit($event)\"\n      (keyup)=\"keyup.emit($event)\" />\n  </div>\n</div>\n", styles: [".ms-phone-input-container{display:flex;flex-direction:column;width:100%}.ms-phone-input-container .ms-phone-input-group{position:relative}.ms-phone-input-container .ms-phone-input-group .ms-phone-country-selector{flex-shrink:0;border-right:1px solid var(--semantics-border-neutral-default, #CCCCCC)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper{display:inline-block;flex-shrink:0;border-right:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button{display:flex;align-items:center;gap:.5rem;padding:8px;background:none;border:none;cursor:pointer;border-radius:4px 0 0 4px;transition:all .2s ease;color:var(--semantic-fg-neutral-strong, #333333);font-size:.875rem;font-weight:400;white-space:nowrap}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.disabled{opacity:.5;cursor:not-allowed}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-code{font-weight:500!important;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon{width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;transition:transform .2s}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon svg{width:100%;height:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.active .chevron-icon{transform:rotate(180deg)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown{position:absolute;left:0;right:0;background:#fff;border-radius:12px;z-index:1000;min-width:280px;max-height:400px;overflow-y:auto;margin-top:.5rem;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search{padding:.75rem;margin:12px;font-size:.875rem;outline:none;background:#fff;box-sizing:border-box;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;width:-webkit-fill-available;padding-left:40px;font-weight:400}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search:focus{background-color:#fff}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search::placeholder{color:#6a6b6d}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .countries-list{display:flex;flex-direction:column}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item{display:flex;align-items:center;gap:.75rem;padding:8px 12px;background:none;border:none;cursor:pointer;text-align:left;transition:all .2s;color:#1b1f22;font-size:14px}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:last-child{border-bottom:none}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:hover:not(.active){background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active{background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active .country-label{color:var(--semantics-border-brand-default, #0084FF);font-weight:600}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info{display:flex;flex-direction:column;gap:.125rem;flex:1;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-label{font-size:.875rem;font-weight:500;color:var(--semantic-fg-neutral-strong, #333333)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-code-dial{font-size:.75rem;color:var(--semantic-fg-neutral-default, #666666)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .no-results{padding:1rem;text-align:center;color:var(--semantic-fg-neutral-default, #666666);font-size:.875rem}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-group.ms-common-hover:has(.ms-phone-input-field):focus{border:1px solid #D33C3C}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field{flex:1;border:none;background:none;padding:8px;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);font-family:inherit;outline:none}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field:disabled{cursor:not-allowed;opacity:.6}.ms-phone-input-container.ms-has-error .ms-phone-input-group{border-color:var(--semantic-fg-error-default, #D33C3C)!important;box-shadow:0 0 0 1px #da3e3740!important}.ms-phone-input-container.ms-has-success:not(.ms-has-error) .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #0084FF)!important}.ms-phone-input-container.ms-focus .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus{border-color:#0084ff;box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus .phone-country-selector-wrapper,.ms-phone-input-container.ms-has-success .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #0084FF}.ms-phone-input-container.ms-has-success .ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #0084FF}.ms-phone-input-container.ms-has-error .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #D33C3C}.ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #0084FF}.phone-input-search .ms_icon{position:absolute;z-index:99999999;top:25px;left:25px;bottom:0;width:16px;height:16px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -1899,6 +1945,7 @@ class MsInputField {
     // File input state
     selectedFiles = [];
     fileNames = [];
+    fileErrorMessage = '';
     // value = signal<string>('');
     hasError = signal(false, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
     isSuccess = signal(false, ...(ngDevMode ? [{ debugName: "isSuccess" }] : []));
@@ -1928,7 +1975,7 @@ class MsInputField {
         console.log('InputField initialized', this.showPasswordRequirements);
         console.log('InputField type', this.type);
         if (this.state === 'ms-success') {
-            this.isSuccess.set(true); // ✅ border green
+            this.isSuccess.set(true);
         }
         if (this.fieldType === 'quantity' && this.value === '') {
             this.value = this.minValue;
@@ -1987,8 +2034,8 @@ class MsInputField {
     handleInput(event) {
         const target = event.target;
         let newVal = target.value;
-        // Validate that only numbers are allowed when prefix is present
-        if (this.prefix && newVal) {
+        // Validate that only numbers are allowed when prefix is present (but not for search type)
+        if (this.prefix && this.type !== 'search' && newVal) {
             const numericOnly = newVal.replace(/\D/g, '');
             if (newVal !== numericOnly) {
                 target.value = numericOnly;
@@ -2008,10 +2055,12 @@ class MsInputField {
         if ((this.type === 'email' || this.type === 'password') && this.pattern) {
             const regex = new RegExp(this.pattern);
             if (regex.test(newVal)) {
-                this.isSuccess.set(true); // ✅ border green
+                this.isSuccess.set(true);
+                this.hasError.set(false); // ✅ border green
             }
             else {
-                this.hasError.set(true); // ❌ border red
+                this.hasError.set(true);
+                this.isSuccess.set(false); // ❌ border red
             }
             if (this.state === 'ms-success') {
                 this.isSuccess.set(true); // ✅ border green
@@ -2059,29 +2108,43 @@ class MsInputField {
         const files = target.files;
         if (files && files.length > 0) {
             // Validate file types against accept property
-            const validFiles = this.validateFiles(files);
-            if (validFiles.length === 0) {
+            const validationResult = this.validateFiles(files);
+            if (validationResult.validFiles.length === 0) {
                 // Show error state for invalid files
                 this.hasError.set(true);
+                this.fileErrorMessage = validationResult.errorMessage;
+                this.selectedFiles = [];
+                this.fileNames = [];
+                // Clear the input
+                target.value = '';
                 return;
             }
-            this.selectedFiles = validFiles;
+            // Show warning if some files were rejected
+            if (validationResult.validFiles.length < Array.from(files).length) {
+                this.fileErrorMessage = validationResult.errorMessage;
+                this.hasError.set(true);
+            }
+            else {
+                this.fileErrorMessage = '';
+                this.hasError.set(false);
+            }
+            this.selectedFiles = validationResult.validFiles;
             this.fileNames = this.selectedFiles.map(f => f.name);
             this.fileChange.emit(this.selectedFiles);
-            this.hasError.set(false);
-            this.isSuccess.set(true);
-            if (this.required) {
+            this.isSuccess.set(validationResult.validFiles.length > 0);
+            if (this.required && validationResult.validFiles.length > 0) {
                 this.hasError.set(false);
             }
         }
     }
     validateFiles(files) {
         if (!this.accept) {
-            return Array.from(files);
+            return { validFiles: Array.from(files), errorMessage: '' };
         }
         const allowedExtensions = this.accept
             .split(',')
             .map(ext => ext.trim().toLowerCase());
+        const invalidFiles = [];
         const validFiles = Array.from(files).filter(file => {
             const fileExt = '.' + file.name.split('.').pop()?.toLowerCase();
             const mimeType = file.type.toLowerCase();
@@ -2103,13 +2166,18 @@ class MsInputField {
                 }
                 return false;
             });
-            return extensionMatch || mimeMatch;
+            const isValid = extensionMatch || mimeMatch;
+            if (!isValid) {
+                invalidFiles.push(file.name);
+            }
+            return isValid;
         });
-        // Alert user if some files were rejected
-        // if (validFiles.length < Array.from(files).length) {
-        //   alert(`Invalid file type(s). Allowed formats: ${this.getAcceptFormats()}`);
-        // }
-        return validFiles;
+        let errorMessage = '';
+        if (invalidFiles.length > 0) {
+            const fileList = invalidFiles.join(', ');
+            errorMessage = `Invalid file type: ${fileList}. Allowed formats: ${this.getAcceptFormats()}`;
+        }
+        return { validFiles, errorMessage };
     }
     /**
      * Returns a formatted string of accepted file types for display
@@ -2125,8 +2193,10 @@ class MsInputField {
     removeFile(index) {
         this.selectedFiles.splice(index, 1);
         this.fileNames.splice(index, 1);
+        this.fileErrorMessage = '';
         if (this.selectedFiles.length === 0) {
             this.hasError.set(this.required);
+            this.isSuccess.set(false);
         }
     }
     clearFiles() {
@@ -2146,17 +2216,17 @@ class MsInputField {
                 useExisting: forwardRef(() => MsInputField),
                 multi: true,
             },
-        ], ngImport: i0, template: "<ng-container *ngIf=\"!loading; else skeleton\">\n  @if(fieldType === 'quantity'){\n    <div class=\"ms-quantity-field\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\"\n         [class.ms-has-error]=\"invalid\"\n         [class.ms-has-warning]=\"state === 'ms-warning'\"\n         [class.ms-has-focus]=\"state === 'ms-focus'\">\n     \n      <input\n        type=\"number\"\n        class=\"ms-quantity-input ms-form-control ms-100\"\n        [(ngModel)]=\"value\"\n        [min]=\"minValue\"\n        [max]=\"maxValue\"\n        [step]=\"step\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [attr.aria-invalid]=\"invalid\"\n        [attr.data-state]=\"state\"\n        (change)=\"onInputChange($event)\"\n        placeholder=\"{{placeholder}}\">\n     \n      <div class=\"ms-quantity-controls\">\n        <button\n          type=\"button\"\n          class=\"ms-quantity-btn ms-quantity-plus\"\n          [disabled]=\"disabled || (getNumValue() >= maxValue)\"\n          (click)=\"increment()\"\n          [attr.aria-label]=\"'Increase quantity'\">\n          <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/plus.svg'\">+</span>\n        </button>\n        <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/suffix-divider.svg'\"></span>\n        <button\n          type=\"button\"\n          class=\"ms-quantity-btn ms-quantity-minus\"\n          [disabled]=\"disabled || (getNumValue() <= minValue)\"\n          (click)=\"decrement()\"\n          [attr.aria-label]=\"'Decrease quantity'\">\n          <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/minus.svg'\"></span>\n        </button>\n      </div>\n    </div>\n  }@else if(type === 'file'){\n    <div class=\"ms-file-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\">\n      <input\n        type=\"file\"\n        class=\"ms-file-input-hidden\"\n        [attr.id]=\"id || null\"\n        [attr.name]=\"name || null\"\n        [attr.accept]=\"accept || null\"\n        [multiple]=\"multiple\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        (change)=\"onFileChange($event)\"\n        (focus)=\"focus.emit($event)\"\n        (blur)=\"blur.emit($event)\"\n        #fileInputElement />\n      \n      <!-- File Input Field with Display and Button -->\n      <div class=\"ms-file-input-field ms-d-flex ms-common-hover ms-overflow-hidden\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.focused]=\"state === 'ms-focus'\">\n        <button \n          type=\"button\"\n          class=\"ms-file-choose-btn\"\n          (click)=\"fileInputElement.click()\"\n          [disabled]=\"disabled\">\n          Choose File\n        </button>\n        <input\n          type=\"button\"\n          class=\"ms-file-input-display ms-w-100\"\n          [value]=\"fileNames.length > 0 ? fileNames[0] : (placeholder || 'No file selected')\"\n          (click)=\"fileInputElement.click()\"\n          [disabled]=\"disabled\"\n          [class.has-file]=\"fileNames.length > 0\" />\n      </div>\n\n      <!-- Selected Files List (for multiple files) -->\n      <div *ngIf=\"multiple && fileNames.length > 1\" class=\"ms-file-list\">\n        <div *ngFor=\"let fileName of fileNames; let i = index\" class=\"ms-file-item\">\n          <span class=\"ms-file-name\">{{ fileName }}</span>\n          <button \n            type=\"button\" \n            class=\"ms-file-remove\"\n            (click)=\"removeFile(i)\"\n            [disabled]=\"disabled\"\n            aria-label=\"Remove file\">\n            \u00D7\n          </button>\n        </div>\n      </div>\n    </div>\n    }@else if(type == 'password'){\n      <app-ms-password-field\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [value]=\"value\"\n        [autocomplete]=\"passwordAutocomplete\"\n        [showRequirements]=\"showPasswordRequirements\"\n        [minLength]=\"passwordMinLength\"\n        [requireUppercase]=\"passwordRequireUppercase\"\n        [requireLowercase]=\"passwordRequireLowercase\"\n        [requireNumbers]=\"passwordRequireNumbers\"\n        [requireSpecialChars]=\"passwordRequireSpecialChars\"\n        (change)=\"change.emit($event)\"\n        (focus)=\"focus.emit($event)\"\n        (blur)=\"blur.emit($event)\"\n        (keydown)=\"keydown.emit($event)\"\n        (keyup)=\"keyup.emit($event)\"\n        (passwordStrengthChange)=\"passwordStrengthChange.emit($event)\">\n      </app-ms-password-field>\n    }@else if(type === 'phone'){\n      <app-ms-phone-input\n        [placeholder]=\"placeholder\"\n        [pattern]=\"pattern\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [state]=\"state\"\n        [countryList]=\"countryList\"\n        [value]=\"value\"\n        (change)=\"change.emit($event)\"\n        (focus)=\"focus.emit($event)\"\n        (blur)=\"blur.emit($event)\"\n        (keydown)=\"keydown.emit($event)\"\n        (keyup)=\"keyup.emit($event)\"\n        (countryChange)=\"countryChange.emit($event)\">\n      </app-ms-phone-input>\n    }\n    <!-- @else if(type === 'search'){\n      <div class=\"ms-search-input-wrapper\">\n        <input\n          type=\"search\"\n          class=\"ms-form-control ms-search-input\"\n          [class.ms-error]=\"hasError()\"\n          [class.ms-success]=\"isSuccess()\"\n          [class]=\"state\"\n          [attr.id]=\"id || null\"\n          [attr.name]=\"name || null\"\n          [attr.placeholder]=\"placeholder || 'Search...'\"\n          [attr.autocomplete]=\"autocomplete || 'off'\"\n          [class.invalid]=\"invalid\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          [required]=\"required\"\n          [value]=\"value\"\n          (input)=\"handleInput($event)\"\n          (change)=\"change.emit($event)\"\n          (focus)=\"focus.emit($event)\"\n          (blur)=\"handleBlur($event)\"\n          (keydown)=\"keydown.emit($event)\"\n          (keyup)=\"keyup.emit($event)\"\n        />\n        <span class=\"ms-search-icon\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/search.svg'\"></span>\n      </div>\n    } -->\n    @else if(fieldType === 'inline-editing'){\n      <app-ms-inline-edit\n        [placeholder]=\"placeholder\"\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        [value]=\"value\"\n        [required]=\"required\"\n        [pattern]=\"pattern\"\n        [minlength]=\"minlength\"\n        [maxlength]=\"maxlength\"\n        (change)=\"valueChange.emit($event)\">\n      </app-ms-inline-edit>\n    }@else if(prefix || suffix || type === 'search'){\n      <div class=\"ms-input-wrapper\" [class.ms-has-prefix-container]=\"prefix\" [class.ms-has-suffix-container]=\"suffix\" [class.ms-has-search-icon]=\"type === 'search'\">\n       <span *ngIf=\"prefix\" class=\"ms-input-prefix\">\n         <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + prefix + '.svg'\" alt=\"prefix\" />\n       </span>\n       <input\n       class=\"ms-form-control\"\n       [class.ms-error]=\"hasError()\"\n       [class.ms-success]=\"isSuccess()\"\n       [class]=\"state\"\n       [attr.type]=\"type\"\n       [class.ms-has-prefix]=\"prefix\"\n       [class.ms-has-suffix]=\"suffix\"\n       [attr.id]=\"id || null\"\n       [attr.name]=\"name || null\"\n       [attr.placeholder]=\"placeholder || null\"\n       [attr.autocomplete]=\"autocomplete || null\"\n        [attr.min]=\"min ?? null\"\n        [attr.max]=\"max ?? null\"\n        [attr.step]=\"step ?? null\"\n        [attr.minlength]=\"minlength ?? null\"\n        [attr.maxlength]=\"maxlength ?? null\"\n        [class.invalid]=\"invalid\"\n       [attr.pattern]=\"prefix ? '\\\\d+' : (pattern || null)\"\n       [attr.inputmode]=\"prefix ? 'numeric' : (inputmode || null)\"\n       [readonly]=\"readonly\"\n       [disabled]=\"disabled\"\n       [required]=\"required\"\n       [value]=\"value\"\n       (input)=\"handleInput($event)\"\n       (change)=\"change.emit($event)\"\n       (focus)=\"focus.emit($event)\"\n       (blur)=\"handleBlur($event)\"\n       (keydown)=\"keydown.emit($event)\"\n       (keyup)=\"keyup.emit($event)\"\n     />\n     <span *ngIf=\"suffix\" class=\"ms-input-suffix\">\n         <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + suffix + '.svg'\" alt=\"suffix\" />\n    </span>\n     </div>\n    }\n    @else{\n      <input\n        class=\"ms-form-control\"\n        [class.ms-error]=\"hasError()\"\n        [class.ms-success]=\"isSuccess()\"\n        [class]=\"state\"\n        [attr.type]=\"type\"\n        [attr.id]=\"id || null\"\n        [attr.name]=\"name || null\"\n        [attr.placeholder]=\"placeholder || null\"\n        [attr.autocomplete]=\"autocomplete || null\"\n        [attr.min]=\"min ?? null\"\n        [attr.max]=\"max ?? null\"\n        [attr.step]=\"step ?? null\"\n        [attr.minlength]=\"minlength ?? null\"\n        [attr.maxlength]=\"maxlength ?? null\"\n        [class.invalid]=\"invalid\"\n        [attr.pattern]=\"pattern || null\"\n        [attr.inputmode]=\"inputmode || null\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [value]=\"value\"\n        (input)=\"handleInput($event)\"\n        (change)=\"change.emit($event)\"\n        (focus)=\"focus.emit($event)\"\n        (blur)=\"handleBlur($event)\"\n        (keydown)=\"keydown.emit($event)\"\n        (keyup)=\"keyup.emit($event)\"\n      />\n    }\n</ng-container>\n \n<ng-template #skeleton>\n  <div class=\"ms-skeleton-input\"></div>\n</ng-template>", styles: [".ms-active,.ms-hover{border:1px solid var(--semantics-border-brand-default, #0084FF)}.ms-focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33}.ms-skeleton-input{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-success{border:1px solid var(--semantics-border-brand-default, #00935C);box-shadow:0 0 0 2px #36b37e33}.ms-form-control.ms-success{border-color:#00935c;box-shadow:0 0 0 2px #36b37e33}.ms-warning{box-shadow:0 0 0 1px #ffe1bf;border:1px solid var(--semantics-border-brand-default, #F58600)}.ms-error{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-brand-default, #dc2626)}.ms-input-field-container label{font-size:14px;font-weight:500;color:#1b1f22}.ms-input-wrapper{display:flex;align-items:center;position:relative;width:100%;border-radius:4px;background-color:#fff;transition:border-color .2s;height:36px}.ms-input-wrapper:focus-within{border-color:#3b82f6}.ms-form-control{padding:8px}.ms-form-control.ms-has-suffix{padding-right:32px}.ms-has-suffix-container .ms-input-suffix{position:absolute;right:0}.ms-input-prefix,.ms-input-suffix{display:flex;align-items:center;justify-content:center;padding:0 9px;flex-shrink:0;color:#6b7280}.ms-input-prefix img,.ms-input-suffix img{width:18px;height:18px;display:block}.ms-quantity-field{display:flex;align-items:center;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border-radius:8px}.ms-quantity-controls{display:flex;align-items:center;gap:0;padding:0 4px;flex-shrink:0;position:absolute;right:0}.ms-quantity-btn{background:none;border:none;padding:0 8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#374151;font-size:16px;font-weight:600;transition:background-color .2s,color .2s;flex-shrink:0;height:32px;width:32px;border-radius:3px}.ms-file-uploader-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-input-prefix{display:flex;align-items:center;justify-content:center;padding:0 9px;flex-shrink:0;color:#6b7280}.ms-input-prefix img{width:18px;height:18px;display:block}.ms-form-control.ms-has-prefix{padding-left:32px}.ms-has-prefix-container .ms-input-prefix{position:absolute}.ms-quantity-field{position:relative;display:flex;align-items:center;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border-radius:8px}.ms-quantity-field.ms-has-focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-quantity-field.ms-has-warning{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b1a}.ms-quantity-field.ms-has-error{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.ms-quantity-btn{background:none;border:none;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#374151;font-size:16px;font-weight:600;transition:background-color .2s,color .2s;flex-shrink:0;height:32px;width:32px;border-radius:3px}.ms-quantity-btn:disabled{cursor:not-allowed;color:#d1d5db}.ms-quantity-input{flex:1;text-align:left;font-size:14px;font-weight:500;color:#374151;padding:0 12px;height:100%;background-color:transparent}.ms-quantity-input:focus{outline:none}.ms-quantity-input:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-quantity-input::-webkit-outer-spin-button,.ms-quantity-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ms-quantity-input[type=number]{-moz-appearance:textfield}.ms-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-file-input-container .ms-file-input-hidden{display:none}.ms-file-input-container .ms-file-input-field{height:36px}.ms-file-input-container .ms-file-input-field .ms-file-input-display{background:none;border:none;padding:8px;font-size:14px;color:#ababab;cursor:pointer;text-align:left}.ms-file-input-container .ms-file-input-field .ms-file-input-display.has-file{color:var(--semantic-fg-neutral-strong, #333333);font-weight:500}.ms-file-input-container .ms-file-input-field .ms-file-input-display:disabled{cursor:not-allowed}.ms-file-input-container .ms-file-input-field .ms-file-choose-btn{padding:8px;border:none;border-right:1px solid #E0E0E0;background-color:#fff;color:#0084ff;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.ms-file-input-container .ms-file-input-field .ms-file-choose-btn:disabled{opacity:.5;cursor:not-allowed}.ms-file-input-container .ms-file-list{display:flex;flex-direction:column;gap:.5rem}.ms-file-input-container .ms-file-list .ms-file-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);border:1px solid var(--semantics-border-neutral-default, #CCCCCC);border-radius:4px;gap:.5rem}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-name{font-size:.875rem;color:var(--semantic-fg-neutral-default, #666666);word-break:break-all;flex:1}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove{background:none;border:none;color:#999;font-size:1.25rem;cursor:pointer;padding:0;min-width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;transition:color .2s}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove:hover:not(:disabled){color:var(--semantic-fg-error-default, #D33C3C)}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove:disabled{opacity:.5;cursor:not-allowed}.ms-file-input-container.ms-has-error .ms-file-input-field{border-color:var(--semantic-fg-error-default, #D33C3C);background-color:#d33c3c05}.ms-file-input-container.ms-has-success .ms-file-input-field{border-color:var(--semantics-border-brand-default, #0084FF);background-color:#fff}.ms-file-input-container.ms-focus .ms-file-input-field{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-common-hover{border:1px solid #E0E0E0;border-radius:8px;background-color:#fff;transition:all .2s ease;overflow:hidden}.ms-common-hover:hover:not(.disabled){border-color:#0084ff}.ms-common-hover:hover:not(.disabled) .ms-file-choose-btn{border-right:1px solid #0084FF}.ms-common-hover.focused{border-color:#0084ff;box-shadow:0 0 0 2px #0084ff33}.ms-common-hover.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e37}.ms-common-hover.ms-error:hover:not(.disabled){border-color:#da3e37}.ms-common-hover.disabled{opacity:.5;cursor:not-allowed;background:var(--semantics-surface-subtle-primary-disabled, #F5F5F5)}.ms-file-input-container.ms-has-error .ms-common-hover .ms-file-choose-btn{border-right:1px solid #D33C3C}.ms-file-input-container.ms-has-success .ms-common-hover .ms-file-choose-btn{border-right:1px solid #0084FF}.ms-has-search-icon{height:36px}.ms-has-search-icon input{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MsInlineEdit, selector: "app-ms-inline-edit", inputs: ["value", "placeholder", "fieldType", "disabled", "required", "readonly", "pattern", "minlength", "maxlength", "state"], outputs: ["change", "saved", "cancelled"] }, { kind: "component", type: MsPasswordField, selector: "app-ms-password-field", inputs: ["id", "name", "placeholder", "state", "autocomplete", "disabled", "required", "readonly", "skeleton", "value", "showRequirements", "minLength", "requireUppercase", "requireLowercase", "requireNumbers", "requireSpecialChars"], outputs: ["change", "focus", "blur", "keydown", "keyup", "passwordStrengthChange"] }, { kind: "component", type: MsPhoneInput, selector: "app-ms-phone-input", inputs: ["id", "name", "placeholder", "state", "readonly", "disabled", "required", "skeleton", "invalid", "pattern", "value", "countryList", "selectedCountry"], outputs: ["change", "focus", "blur", "keydown", "keyup", "countryChange"] }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i3.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }] });
+        ], ngImport: i0, template: "<ng-container *ngIf=\"!loading; else skeleton\">\n  @if(fieldType === 'quantity'){\n    <div class=\"ms-quantity-field\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\"\n         [class.ms-has-error]=\"invalid\"\n         [class.ms-has-warning]=\"state === 'ms-warning'\"\n         [class.ms-has-focus]=\"state === 'ms-focus'\">\n     \n      <input\n        type=\"number\"\n        class=\"ms-quantity-input ms-form-control ms-100\"\n        [(ngModel)]=\"value\"\n        [min]=\"minValue\"\n        [max]=\"maxValue\"\n        [step]=\"step\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [attr.aria-invalid]=\"invalid\"\n        [attr.data-state]=\"state\"\n        (change)=\"onInputChange($event)\"\n        placeholder=\"{{placeholder}}\">\n     \n      <div class=\"ms-quantity-controls\">\n        <button\n          type=\"button\"\n          class=\"ms-quantity-btn ms-quantity-plus\"\n          [disabled]=\"disabled || (getNumValue() >= maxValue)\"\n          (click)=\"increment()\"\n          [attr.aria-label]=\"'Increase quantity'\">\n          <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/plus.svg'\">+</span>\n        </button>\n        <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/suffix-divider.svg'\"></span>\n        <button\n          type=\"button\"\n          class=\"ms-quantity-btn ms-quantity-minus\"\n          [disabled]=\"disabled || (getNumValue() <= minValue)\"\n          (click)=\"decrement()\"\n          [attr.aria-label]=\"'Decrease quantity'\">\n          <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/minus.svg'\"></span>\n        </button>\n      </div>\n    </div>\n  }@else if(type === 'file'){\n    <div class=\"ms-file-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\">\n      <input\n        type=\"file\"\n        class=\"ms-file-input-hidden\"\n        [attr.id]=\"id || null\"\n        [attr.name]=\"name || null\"\n        [attr.accept]=\"accept || null\"\n        [multiple]=\"multiple\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        (change)=\"onFileChange($event)\"\n        (focus)=\"focus.emit($event)\"\n        (blur)=\"blur.emit($event)\"\n        #fileInputElement />\n      \n      <!-- File Input Field with Display and Button -->\n      <div class=\"ms-file-input-field ms-d-flex ms-common-hover ms-overflow-hidden\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.focused]=\"state === 'ms-focus'\">\n        <button \n          type=\"button\"\n          class=\"ms-file-choose-btn\"\n          (click)=\"fileInputElement.click()\"\n          [disabled]=\"disabled\">\n          Choose File\n        </button>\n        <input\n          type=\"button\"\n          class=\"ms-file-input-display ms-w-100\"\n          [value]=\"fileNames.length > 0 ? fileNames[0] : (placeholder || 'No file selected')\"\n          (click)=\"fileInputElement.click()\"\n          [disabled]=\"disabled\"\n          [class.has-file]=\"fileNames.length > 0\" />\n      </div>\n\n      <!-- Selected Files List (for multiple files) -->\n      <div *ngIf=\"fileNames.length > 0\" class=\"ms-file-list\">\n        <div *ngFor=\"let fileName of fileNames; let i = index\" class=\"ms-file-item\">\n          <ms-icon (click)=\"removeFile(i)\" class=\"ms_icon\" [color]=\"'ms-icon-black'\" [name]=\"'close'\" [size]=\"'small'\"></ms-icon>\n          <!-- <span class=\"ms-file-name\">{{ fileName }}</span>\n          <button \n            type=\"button\" \n            class=\"ms-file-remove\"\n            (click)=\"removeFile(i)\"\n            [disabled]=\"disabled\"\n            aria-label=\"Remove file\">\n            <ms-icon (click)=\"removeFile(i)\" class=\"ms_icon\" [name]=\"'close'\" [size]=\"'small'\"></ms-icon>\n          </button> -->\n        </div>\n      </div>\n      \n      <!-- Error Message -->\n      <div *ngIf=\"hasError() && fileErrorMessage\" class=\"ms-file-error-message\">\n        {{ fileErrorMessage }}\n      </div>\n    </div>\n    }@else if(type == 'password'){\n      <app-ms-password-field\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [value]=\"value\"\n        [autocomplete]=\"passwordAutocomplete\"\n        [showRequirements]=\"showPasswordRequirements\"\n        [minLength]=\"passwordMinLength\"\n        [requireUppercase]=\"passwordRequireUppercase\"\n        [requireLowercase]=\"passwordRequireLowercase\"\n        [requireNumbers]=\"passwordRequireNumbers\"\n        [requireSpecialChars]=\"passwordRequireSpecialChars\"\n        (change)=\"change.emit($event)\"\n        (focus)=\"focus.emit($event)\"\n        (blur)=\"blur.emit($event)\"\n        (keydown)=\"keydown.emit($event)\"\n        (keyup)=\"keyup.emit($event)\"\n        (passwordStrengthChange)=\"passwordStrengthChange.emit($event)\">\n      </app-ms-password-field>\n    }@else if(type === 'phone'){\n      <app-ms-phone-input\n        [placeholder]=\"placeholder\"\n        [pattern]=\"pattern\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [state]=\"state\"\n        [countryList]=\"countryList\"\n        [value]=\"value\"\n        (change)=\"change.emit($event)\"\n        (focus)=\"focus.emit($event)\"\n        (blur)=\"blur.emit($event)\"\n        (keydown)=\"keydown.emit($event)\"\n        (keyup)=\"keyup.emit($event)\"\n        (countryChange)=\"countryChange.emit($event)\">\n      </app-ms-phone-input>\n    }\n    <!-- @else if(type === 'search'){\n      <div class=\"ms-search-input-wrapper\">\n        <input\n          type=\"search\"\n          class=\"ms-form-control ms-search-input\"\n          [class.ms-error]=\"hasError()\"\n          [class.ms-success]=\"isSuccess()\"\n          [class]=\"state\"\n          [attr.id]=\"id || null\"\n          [attr.name]=\"name || null\"\n          [attr.placeholder]=\"placeholder || 'Search...'\"\n          [attr.autocomplete]=\"autocomplete || 'off'\"\n          [class.invalid]=\"invalid\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          [required]=\"required\"\n          [value]=\"value\"\n          (input)=\"handleInput($event)\"\n          (change)=\"change.emit($event)\"\n          (focus)=\"focus.emit($event)\"\n          (blur)=\"handleBlur($event)\"\n          (keydown)=\"keydown.emit($event)\"\n          (keyup)=\"keyup.emit($event)\"\n        />\n        <span class=\"ms-search-icon\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/search.svg'\"></span>\n      </div>\n    } -->\n    @else if(fieldType === 'inline-editing'){\n      <app-ms-inline-edit\n        [placeholder]=\"placeholder\"\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        [value]=\"value\"\n        [required]=\"required\"\n        [pattern]=\"pattern\"\n        [minlength]=\"minlength\"\n        [maxlength]=\"maxlength\"\n        (change)=\"valueChange.emit($event)\">\n      </app-ms-inline-edit>\n    }@else if(prefix || suffix || type === 'search'){\n      <div class=\"ms-input-wrapper\" [class.ms-has-prefix-container]=\"prefix\" [class.ms-has-suffix-container]=\"suffix\" [class.ms-has-search-icon]=\"type === 'search'\">\n       <span *ngIf=\"prefix\" class=\"ms-input-prefix\">\n         <!-- <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + prefix + '.svg'\" alt=\"prefix\" /> -->\n        <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"prefix\" [size]=\"'small'\"></ms-icon>\n       </span>\n       <input\n       class=\"ms-form-control\"\n       [class.ms-error]=\"hasError()\"\n       [class.ms-success]=\"isSuccess()\"\n       [class]=\"state\"\n       [attr.type]=\"type\"\n       [class.ms-has-prefix]=\"prefix\"\n       [class.ms-has-suffix]=\"suffix\"\n       [attr.id]=\"id || null\"\n       [attr.name]=\"name || null\"\n       [attr.placeholder]=\"placeholder || null\"\n       [attr.autocomplete]=\"autocomplete || null\"\n        [attr.min]=\"min ?? null\"\n        [attr.max]=\"max ?? null\"\n        [attr.step]=\"step ?? null\"\n        [attr.minlength]=\"minlength ?? null\"\n        [attr.maxlength]=\"maxlength ?? null\"\n        [class.invalid]=\"invalid\"\n       [attr.pattern]=\"type === 'search' ? (pattern || null) : (prefix ? '\\\\d+' : (pattern || null))\"\n       [attr.inputmode]=\"type === 'search' ? (inputmode || null) : (prefix ? 'numeric' : (inputmode || null))\"\n       [readonly]=\"readonly\"\n       [disabled]=\"disabled\"\n       [required]=\"required\"\n       [value]=\"value\"\n       (input)=\"handleInput($event)\"\n       (change)=\"change.emit($event)\"\n       (focus)=\"focus.emit($event)\"\n       (blur)=\"handleBlur($event)\"\n       (keydown)=\"keydown.emit($event)\"\n       (keyup)=\"keyup.emit($event)\"\n     />\n     <span *ngIf=\"suffix\" class=\"ms-input-suffix\">\n         <!-- <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + suffix + '.svg'\" alt=\"suffix\" /> -->\n          <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"suffix\" [size]=\"'small'\"></ms-icon>\n    </span>\n     </div>\n    }\n    @else{\n      <input\n        class=\"ms-form-control\"\n        [class.ms-error]=\"hasError()\"\n        [class.ms-success]=\"isSuccess()\"\n        [class]=\"state\"\n        [attr.type]=\"type\"\n        [attr.id]=\"id || null\"\n        [attr.name]=\"name || null\"\n        [attr.placeholder]=\"placeholder || null\"\n        [attr.autocomplete]=\"autocomplete || null\"\n        [attr.min]=\"min ?? null\"\n        [attr.max]=\"max ?? null\"\n        [attr.step]=\"step ?? null\"\n        [attr.minlength]=\"minlength ?? null\"\n        [attr.maxlength]=\"maxlength ?? null\"\n        [class.invalid]=\"invalid\"\n        [attr.pattern]=\"pattern || null\"\n        [attr.inputmode]=\"inputmode || null\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [value]=\"value\"\n        (input)=\"handleInput($event)\"\n        (change)=\"change.emit($event)\"\n        (focus)=\"focus.emit($event)\"\n        (blur)=\"handleBlur($event)\"\n        (keydown)=\"keydown.emit($event)\"\n        (keyup)=\"keyup.emit($event)\"\n      />\n    }\n</ng-container>\n \n<ng-template #skeleton>\n  <div class=\"ms-skeleton-input\"></div>\n</ng-template>", styles: ["@charset \"UTF-8\";.ms-active,.ms-hover{border:1px solid var(--semantics-border-brand-default, #0084FF)}.ms-focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33}.ms-skeleton-input{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-success{border:1px solid var(--semantics-border-brand-default, #00935C);box-shadow:0 0 0 2px #36b37e33}.ms-form-control.ms-success{border-color:#00935c;box-shadow:0 0 0 2px #36b37e33}.ms-warning{box-shadow:0 0 0 1px #ffe1bf;border:1px solid var(--semantics-border-brand-default, #F58600)}.ms-error{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-brand-default, #dc2626)}.ms-input-field-container label{font-size:14px;font-weight:500;color:#1b1f22}.ms-input-wrapper{display:flex;align-items:center;position:relative;width:100%;border-radius:4px;background-color:#fff;transition:border-color .2s;height:36px}.ms-input-wrapper:focus-within{border-color:#3b82f6}.ms-form-control{padding:8px}.ms-form-control.ms-has-suffix{padding-right:32px}.ms-has-suffix-container .ms-input-suffix{position:absolute;right:0}.ms-input-prefix,.ms-input-suffix{display:flex;align-items:center;justify-content:center;padding:0 9px;flex-shrink:0;color:#6b7280}.ms-input-prefix img,.ms-input-suffix img{width:18px;height:18px;display:block}.ms-quantity-field{display:flex;align-items:center;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border-radius:8px}.ms-quantity-controls{display:flex;align-items:center;gap:0;padding:0 4px;flex-shrink:0;position:absolute;right:0}.ms-quantity-btn{background:none;border:none;padding:0 8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#374151;font-size:16px;font-weight:600;transition:background-color .2s,color .2s;flex-shrink:0;height:32px;width:32px;border-radius:3px}.ms-file-uploader-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-input-prefix{display:flex;align-items:center;justify-content:center;padding:0 9px;flex-shrink:0;color:#6b7280}.ms-input-prefix img{width:18px;height:18px;display:block}.ms-form-control.ms-has-prefix{padding-left:32px}.ms-has-prefix-container .ms-input-prefix{position:absolute}.ms-quantity-field{position:relative;display:flex;align-items:center;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border-radius:8px}.ms-quantity-field.ms-has-focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-quantity-field.ms-has-warning{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b1a}.ms-quantity-field.ms-has-error{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.ms-quantity-btn{background:none;border:none;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#374151;font-size:16px;font-weight:600;transition:background-color .2s,color .2s;flex-shrink:0;height:32px;width:32px;border-radius:3px}.ms-quantity-btn:disabled{cursor:not-allowed;color:#d1d5db}.ms-quantity-input{flex:1;text-align:left;font-size:14px;font-weight:500;color:#374151;padding:0 12px;height:100%;background-color:transparent}.ms-quantity-input:focus{outline:none}.ms-quantity-input:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-quantity-input::-webkit-outer-spin-button,.ms-quantity-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ms-quantity-input[type=number]{-moz-appearance:textfield}.ms-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-file-input-container{position:relative}.ms-file-input-container .ms-file-input-hidden{display:none}.ms-file-input-container .ms-file-input-field{height:36px}.ms-file-input-container .ms-file-input-field .ms-file-input-display{background:none;border:none;padding:8px 30px 8px 8px;font-size:14px;color:#ababab;cursor:pointer;text-align:left;background-color:#fff}.ms-file-input-container .ms-file-input-field .ms-file-input-display.has-file{color:var(--semantic-fg-neutral-strong, #333333);font-weight:500}.ms-file-input-container .ms-file-input-field .ms-file-input-display:disabled{cursor:not-allowed}.ms-file-input-container .ms-file-input-field .ms-file-choose-btn{padding:8px;border:none;border-right:1px solid #E0E0E0;background-color:#fff;color:#0084ff;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.ms-file-input-container .ms-file-input-field .ms-file-choose-btn:disabled{opacity:.5;cursor:not-allowed}.ms-file-input-container .ms-file-list{position:absolute;top:4px;right:8px;bottom:0;display:flex;align-items:center;cursor:pointer}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-name{font-size:.875rem;color:var(--semantic-fg-neutral-default, #666666);word-break:break-all;flex:1}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove{background:none;border:none;color:#999;font-size:1.25rem;cursor:pointer;padding:0;min-width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;transition:color .2s}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove:hover:not(:disabled){color:var(--semantic-fg-error-default, #D33C3C)}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove:disabled{opacity:.5;cursor:not-allowed}.ms-file-input-container.ms-has-error .ms-file-input-field{border-color:var(--semantic-fg-error-default, #D33C3C);background-color:#d33c3c05}.ms-file-input-container.ms-has-success .ms-file-input-field{border-color:var(--semantics-border-brand-default, #0084FF);background-color:#fff}.ms-file-input-container.ms-focus .ms-file-input-field{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-file-error-message{margin-top:8px;padding:8px 12px;background-color:#fef2f2;border:1px solid #FCA5A5;border-radius:6px;color:#da3e37;font-size:13px;display:flex;align-items:flex-start}.ms-file-error-message:before{content:\"\\26a0\";margin-right:8px;font-size:16px}.ms-common-hover{border:1px solid #E0E0E0;border-radius:8px;background-color:#fff;transition:all .2s ease;overflow:hidden}.ms-common-hover:hover:not(.disabled){border-color:#0084ff}.ms-common-hover:hover:not(.disabled) .ms-file-choose-btn{border-right:1px solid #0084FF}.ms-common-hover.focused{border-color:#0084ff;box-shadow:0 0 0 2px #0084ff33}.ms-common-hover.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e37}.ms-common-hover.ms-error:hover:not(.disabled){border-color:#da3e37}.ms-common-hover.disabled{opacity:.5;cursor:not-allowed;background:var(--semantics-surface-subtle-primary-disabled, #F5F5F5)}.ms-file-input-container.ms-has-error .ms-common-hover .ms-file-choose-btn{border-right:1px solid #D33C3C}.ms-file-input-container.ms-has-success .ms-common-hover .ms-file-choose-btn{border-right:1px solid #0084FF}.ms-has-search-icon{height:36px}.ms-has-search-icon input{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MsInlineEdit, selector: "app-ms-inline-edit", inputs: ["value", "placeholder", "fieldType", "disabled", "required", "readonly", "pattern", "minlength", "maxlength", "state"], outputs: ["change", "saved", "cancelled"] }, { kind: "component", type: MsPasswordField, selector: "app-ms-password-field", inputs: ["id", "name", "placeholder", "state", "autocomplete", "disabled", "required", "readonly", "skeleton", "value", "showRequirements", "minLength", "requireUppercase", "requireLowercase", "requireNumbers", "requireSpecialChars"], outputs: ["change", "focus", "blur", "keydown", "keyup", "passwordStrengthChange"] }, { kind: "component", type: MsPhoneInput, selector: "app-ms-phone-input", inputs: ["id", "name", "placeholder", "state", "readonly", "disabled", "required", "skeleton", "invalid", "pattern", "value", "countryList", "selectedCountry"], outputs: ["change", "focus", "blur", "keydown", "keyup", "countryChange"] }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i2$1.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsInputField, decorators: [{
             type: Component,
-            args: [{ selector: 'ms-input-field', standalone: true, imports: [CommonModule, FormsModule, MsInlineEdit, MsPasswordField, MsPhoneInput, InlineSVGModule], providers: [
+            args: [{ selector: 'ms-input-field', standalone: true, imports: [CommonModule, FormsModule, MsInlineEdit, MsPasswordField, MsPhoneInput, InlineSVGModule, MsIcon], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => MsInputField),
                             multi: true,
                         },
-                    ], template: "<ng-container *ngIf=\"!loading; else skeleton\">\n  @if(fieldType === 'quantity'){\n    <div class=\"ms-quantity-field\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\"\n         [class.ms-has-error]=\"invalid\"\n         [class.ms-has-warning]=\"state === 'ms-warning'\"\n         [class.ms-has-focus]=\"state === 'ms-focus'\">\n     \n      <input\n        type=\"number\"\n        class=\"ms-quantity-input ms-form-control ms-100\"\n        [(ngModel)]=\"value\"\n        [min]=\"minValue\"\n        [max]=\"maxValue\"\n        [step]=\"step\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [attr.aria-invalid]=\"invalid\"\n        [attr.data-state]=\"state\"\n        (change)=\"onInputChange($event)\"\n        placeholder=\"{{placeholder}}\">\n     \n      <div class=\"ms-quantity-controls\">\n        <button\n          type=\"button\"\n          class=\"ms-quantity-btn ms-quantity-plus\"\n          [disabled]=\"disabled || (getNumValue() >= maxValue)\"\n          (click)=\"increment()\"\n          [attr.aria-label]=\"'Increase quantity'\">\n          <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/plus.svg'\">+</span>\n        </button>\n        <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/suffix-divider.svg'\"></span>\n        <button\n          type=\"button\"\n          class=\"ms-quantity-btn ms-quantity-minus\"\n          [disabled]=\"disabled || (getNumValue() <= minValue)\"\n          (click)=\"decrement()\"\n          [attr.aria-label]=\"'Decrease quantity'\">\n          <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/minus.svg'\"></span>\n        </button>\n      </div>\n    </div>\n  }@else if(type === 'file'){\n    <div class=\"ms-file-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\">\n      <input\n        type=\"file\"\n        class=\"ms-file-input-hidden\"\n        [attr.id]=\"id || null\"\n        [attr.name]=\"name || null\"\n        [attr.accept]=\"accept || null\"\n        [multiple]=\"multiple\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        (change)=\"onFileChange($event)\"\n        (focus)=\"focus.emit($event)\"\n        (blur)=\"blur.emit($event)\"\n        #fileInputElement />\n      \n      <!-- File Input Field with Display and Button -->\n      <div class=\"ms-file-input-field ms-d-flex ms-common-hover ms-overflow-hidden\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.focused]=\"state === 'ms-focus'\">\n        <button \n          type=\"button\"\n          class=\"ms-file-choose-btn\"\n          (click)=\"fileInputElement.click()\"\n          [disabled]=\"disabled\">\n          Choose File\n        </button>\n        <input\n          type=\"button\"\n          class=\"ms-file-input-display ms-w-100\"\n          [value]=\"fileNames.length > 0 ? fileNames[0] : (placeholder || 'No file selected')\"\n          (click)=\"fileInputElement.click()\"\n          [disabled]=\"disabled\"\n          [class.has-file]=\"fileNames.length > 0\" />\n      </div>\n\n      <!-- Selected Files List (for multiple files) -->\n      <div *ngIf=\"multiple && fileNames.length > 1\" class=\"ms-file-list\">\n        <div *ngFor=\"let fileName of fileNames; let i = index\" class=\"ms-file-item\">\n          <span class=\"ms-file-name\">{{ fileName }}</span>\n          <button \n            type=\"button\" \n            class=\"ms-file-remove\"\n            (click)=\"removeFile(i)\"\n            [disabled]=\"disabled\"\n            aria-label=\"Remove file\">\n            \u00D7\n          </button>\n        </div>\n      </div>\n    </div>\n    }@else if(type == 'password'){\n      <app-ms-password-field\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [value]=\"value\"\n        [autocomplete]=\"passwordAutocomplete\"\n        [showRequirements]=\"showPasswordRequirements\"\n        [minLength]=\"passwordMinLength\"\n        [requireUppercase]=\"passwordRequireUppercase\"\n        [requireLowercase]=\"passwordRequireLowercase\"\n        [requireNumbers]=\"passwordRequireNumbers\"\n        [requireSpecialChars]=\"passwordRequireSpecialChars\"\n        (change)=\"change.emit($event)\"\n        (focus)=\"focus.emit($event)\"\n        (blur)=\"blur.emit($event)\"\n        (keydown)=\"keydown.emit($event)\"\n        (keyup)=\"keyup.emit($event)\"\n        (passwordStrengthChange)=\"passwordStrengthChange.emit($event)\">\n      </app-ms-password-field>\n    }@else if(type === 'phone'){\n      <app-ms-phone-input\n        [placeholder]=\"placeholder\"\n        [pattern]=\"pattern\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [state]=\"state\"\n        [countryList]=\"countryList\"\n        [value]=\"value\"\n        (change)=\"change.emit($event)\"\n        (focus)=\"focus.emit($event)\"\n        (blur)=\"blur.emit($event)\"\n        (keydown)=\"keydown.emit($event)\"\n        (keyup)=\"keyup.emit($event)\"\n        (countryChange)=\"countryChange.emit($event)\">\n      </app-ms-phone-input>\n    }\n    <!-- @else if(type === 'search'){\n      <div class=\"ms-search-input-wrapper\">\n        <input\n          type=\"search\"\n          class=\"ms-form-control ms-search-input\"\n          [class.ms-error]=\"hasError()\"\n          [class.ms-success]=\"isSuccess()\"\n          [class]=\"state\"\n          [attr.id]=\"id || null\"\n          [attr.name]=\"name || null\"\n          [attr.placeholder]=\"placeholder || 'Search...'\"\n          [attr.autocomplete]=\"autocomplete || 'off'\"\n          [class.invalid]=\"invalid\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          [required]=\"required\"\n          [value]=\"value\"\n          (input)=\"handleInput($event)\"\n          (change)=\"change.emit($event)\"\n          (focus)=\"focus.emit($event)\"\n          (blur)=\"handleBlur($event)\"\n          (keydown)=\"keydown.emit($event)\"\n          (keyup)=\"keyup.emit($event)\"\n        />\n        <span class=\"ms-search-icon\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/search.svg'\"></span>\n      </div>\n    } -->\n    @else if(fieldType === 'inline-editing'){\n      <app-ms-inline-edit\n        [placeholder]=\"placeholder\"\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        [value]=\"value\"\n        [required]=\"required\"\n        [pattern]=\"pattern\"\n        [minlength]=\"minlength\"\n        [maxlength]=\"maxlength\"\n        (change)=\"valueChange.emit($event)\">\n      </app-ms-inline-edit>\n    }@else if(prefix || suffix || type === 'search'){\n      <div class=\"ms-input-wrapper\" [class.ms-has-prefix-container]=\"prefix\" [class.ms-has-suffix-container]=\"suffix\" [class.ms-has-search-icon]=\"type === 'search'\">\n       <span *ngIf=\"prefix\" class=\"ms-input-prefix\">\n         <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + prefix + '.svg'\" alt=\"prefix\" />\n       </span>\n       <input\n       class=\"ms-form-control\"\n       [class.ms-error]=\"hasError()\"\n       [class.ms-success]=\"isSuccess()\"\n       [class]=\"state\"\n       [attr.type]=\"type\"\n       [class.ms-has-prefix]=\"prefix\"\n       [class.ms-has-suffix]=\"suffix\"\n       [attr.id]=\"id || null\"\n       [attr.name]=\"name || null\"\n       [attr.placeholder]=\"placeholder || null\"\n       [attr.autocomplete]=\"autocomplete || null\"\n        [attr.min]=\"min ?? null\"\n        [attr.max]=\"max ?? null\"\n        [attr.step]=\"step ?? null\"\n        [attr.minlength]=\"minlength ?? null\"\n        [attr.maxlength]=\"maxlength ?? null\"\n        [class.invalid]=\"invalid\"\n       [attr.pattern]=\"prefix ? '\\\\d+' : (pattern || null)\"\n       [attr.inputmode]=\"prefix ? 'numeric' : (inputmode || null)\"\n       [readonly]=\"readonly\"\n       [disabled]=\"disabled\"\n       [required]=\"required\"\n       [value]=\"value\"\n       (input)=\"handleInput($event)\"\n       (change)=\"change.emit($event)\"\n       (focus)=\"focus.emit($event)\"\n       (blur)=\"handleBlur($event)\"\n       (keydown)=\"keydown.emit($event)\"\n       (keyup)=\"keyup.emit($event)\"\n     />\n     <span *ngIf=\"suffix\" class=\"ms-input-suffix\">\n         <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + suffix + '.svg'\" alt=\"suffix\" />\n    </span>\n     </div>\n    }\n    @else{\n      <input\n        class=\"ms-form-control\"\n        [class.ms-error]=\"hasError()\"\n        [class.ms-success]=\"isSuccess()\"\n        [class]=\"state\"\n        [attr.type]=\"type\"\n        [attr.id]=\"id || null\"\n        [attr.name]=\"name || null\"\n        [attr.placeholder]=\"placeholder || null\"\n        [attr.autocomplete]=\"autocomplete || null\"\n        [attr.min]=\"min ?? null\"\n        [attr.max]=\"max ?? null\"\n        [attr.step]=\"step ?? null\"\n        [attr.minlength]=\"minlength ?? null\"\n        [attr.maxlength]=\"maxlength ?? null\"\n        [class.invalid]=\"invalid\"\n        [attr.pattern]=\"pattern || null\"\n        [attr.inputmode]=\"inputmode || null\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [value]=\"value\"\n        (input)=\"handleInput($event)\"\n        (change)=\"change.emit($event)\"\n        (focus)=\"focus.emit($event)\"\n        (blur)=\"handleBlur($event)\"\n        (keydown)=\"keydown.emit($event)\"\n        (keyup)=\"keyup.emit($event)\"\n      />\n    }\n</ng-container>\n \n<ng-template #skeleton>\n  <div class=\"ms-skeleton-input\"></div>\n</ng-template>", styles: [".ms-active,.ms-hover{border:1px solid var(--semantics-border-brand-default, #0084FF)}.ms-focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33}.ms-skeleton-input{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-success{border:1px solid var(--semantics-border-brand-default, #00935C);box-shadow:0 0 0 2px #36b37e33}.ms-form-control.ms-success{border-color:#00935c;box-shadow:0 0 0 2px #36b37e33}.ms-warning{box-shadow:0 0 0 1px #ffe1bf;border:1px solid var(--semantics-border-brand-default, #F58600)}.ms-error{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-brand-default, #dc2626)}.ms-input-field-container label{font-size:14px;font-weight:500;color:#1b1f22}.ms-input-wrapper{display:flex;align-items:center;position:relative;width:100%;border-radius:4px;background-color:#fff;transition:border-color .2s;height:36px}.ms-input-wrapper:focus-within{border-color:#3b82f6}.ms-form-control{padding:8px}.ms-form-control.ms-has-suffix{padding-right:32px}.ms-has-suffix-container .ms-input-suffix{position:absolute;right:0}.ms-input-prefix,.ms-input-suffix{display:flex;align-items:center;justify-content:center;padding:0 9px;flex-shrink:0;color:#6b7280}.ms-input-prefix img,.ms-input-suffix img{width:18px;height:18px;display:block}.ms-quantity-field{display:flex;align-items:center;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border-radius:8px}.ms-quantity-controls{display:flex;align-items:center;gap:0;padding:0 4px;flex-shrink:0;position:absolute;right:0}.ms-quantity-btn{background:none;border:none;padding:0 8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#374151;font-size:16px;font-weight:600;transition:background-color .2s,color .2s;flex-shrink:0;height:32px;width:32px;border-radius:3px}.ms-file-uploader-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-input-prefix{display:flex;align-items:center;justify-content:center;padding:0 9px;flex-shrink:0;color:#6b7280}.ms-input-prefix img{width:18px;height:18px;display:block}.ms-form-control.ms-has-prefix{padding-left:32px}.ms-has-prefix-container .ms-input-prefix{position:absolute}.ms-quantity-field{position:relative;display:flex;align-items:center;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border-radius:8px}.ms-quantity-field.ms-has-focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-quantity-field.ms-has-warning{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b1a}.ms-quantity-field.ms-has-error{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.ms-quantity-btn{background:none;border:none;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#374151;font-size:16px;font-weight:600;transition:background-color .2s,color .2s;flex-shrink:0;height:32px;width:32px;border-radius:3px}.ms-quantity-btn:disabled{cursor:not-allowed;color:#d1d5db}.ms-quantity-input{flex:1;text-align:left;font-size:14px;font-weight:500;color:#374151;padding:0 12px;height:100%;background-color:transparent}.ms-quantity-input:focus{outline:none}.ms-quantity-input:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-quantity-input::-webkit-outer-spin-button,.ms-quantity-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ms-quantity-input[type=number]{-moz-appearance:textfield}.ms-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-file-input-container .ms-file-input-hidden{display:none}.ms-file-input-container .ms-file-input-field{height:36px}.ms-file-input-container .ms-file-input-field .ms-file-input-display{background:none;border:none;padding:8px;font-size:14px;color:#ababab;cursor:pointer;text-align:left}.ms-file-input-container .ms-file-input-field .ms-file-input-display.has-file{color:var(--semantic-fg-neutral-strong, #333333);font-weight:500}.ms-file-input-container .ms-file-input-field .ms-file-input-display:disabled{cursor:not-allowed}.ms-file-input-container .ms-file-input-field .ms-file-choose-btn{padding:8px;border:none;border-right:1px solid #E0E0E0;background-color:#fff;color:#0084ff;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.ms-file-input-container .ms-file-input-field .ms-file-choose-btn:disabled{opacity:.5;cursor:not-allowed}.ms-file-input-container .ms-file-list{display:flex;flex-direction:column;gap:.5rem}.ms-file-input-container .ms-file-list .ms-file-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);border:1px solid var(--semantics-border-neutral-default, #CCCCCC);border-radius:4px;gap:.5rem}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-name{font-size:.875rem;color:var(--semantic-fg-neutral-default, #666666);word-break:break-all;flex:1}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove{background:none;border:none;color:#999;font-size:1.25rem;cursor:pointer;padding:0;min-width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;transition:color .2s}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove:hover:not(:disabled){color:var(--semantic-fg-error-default, #D33C3C)}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove:disabled{opacity:.5;cursor:not-allowed}.ms-file-input-container.ms-has-error .ms-file-input-field{border-color:var(--semantic-fg-error-default, #D33C3C);background-color:#d33c3c05}.ms-file-input-container.ms-has-success .ms-file-input-field{border-color:var(--semantics-border-brand-default, #0084FF);background-color:#fff}.ms-file-input-container.ms-focus .ms-file-input-field{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-common-hover{border:1px solid #E0E0E0;border-radius:8px;background-color:#fff;transition:all .2s ease;overflow:hidden}.ms-common-hover:hover:not(.disabled){border-color:#0084ff}.ms-common-hover:hover:not(.disabled) .ms-file-choose-btn{border-right:1px solid #0084FF}.ms-common-hover.focused{border-color:#0084ff;box-shadow:0 0 0 2px #0084ff33}.ms-common-hover.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e37}.ms-common-hover.ms-error:hover:not(.disabled){border-color:#da3e37}.ms-common-hover.disabled{opacity:.5;cursor:not-allowed;background:var(--semantics-surface-subtle-primary-disabled, #F5F5F5)}.ms-file-input-container.ms-has-error .ms-common-hover .ms-file-choose-btn{border-right:1px solid #D33C3C}.ms-file-input-container.ms-has-success .ms-common-hover .ms-file-choose-btn{border-right:1px solid #0084FF}.ms-has-search-icon{height:36px}.ms-has-search-icon input{height:100%}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!loading; else skeleton\">\n  @if(fieldType === 'quantity'){\n    <div class=\"ms-quantity-field\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\"\n         [class.ms-has-error]=\"invalid\"\n         [class.ms-has-warning]=\"state === 'ms-warning'\"\n         [class.ms-has-focus]=\"state === 'ms-focus'\">\n     \n      <input\n        type=\"number\"\n        class=\"ms-quantity-input ms-form-control ms-100\"\n        [(ngModel)]=\"value\"\n        [min]=\"minValue\"\n        [max]=\"maxValue\"\n        [step]=\"step\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [attr.aria-invalid]=\"invalid\"\n        [attr.data-state]=\"state\"\n        (change)=\"onInputChange($event)\"\n        placeholder=\"{{placeholder}}\">\n     \n      <div class=\"ms-quantity-controls\">\n        <button\n          type=\"button\"\n          class=\"ms-quantity-btn ms-quantity-plus\"\n          [disabled]=\"disabled || (getNumValue() >= maxValue)\"\n          (click)=\"increment()\"\n          [attr.aria-label]=\"'Increase quantity'\">\n          <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/plus.svg'\">+</span>\n        </button>\n        <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/suffix-divider.svg'\"></span>\n        <button\n          type=\"button\"\n          class=\"ms-quantity-btn ms-quantity-minus\"\n          [disabled]=\"disabled || (getNumValue() <= minValue)\"\n          (click)=\"decrement()\"\n          [attr.aria-label]=\"'Decrease quantity'\">\n          <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/minus.svg'\"></span>\n        </button>\n      </div>\n    </div>\n  }@else if(type === 'file'){\n    <div class=\"ms-file-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\">\n      <input\n        type=\"file\"\n        class=\"ms-file-input-hidden\"\n        [attr.id]=\"id || null\"\n        [attr.name]=\"name || null\"\n        [attr.accept]=\"accept || null\"\n        [multiple]=\"multiple\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        (change)=\"onFileChange($event)\"\n        (focus)=\"focus.emit($event)\"\n        (blur)=\"blur.emit($event)\"\n        #fileInputElement />\n      \n      <!-- File Input Field with Display and Button -->\n      <div class=\"ms-file-input-field ms-d-flex ms-common-hover ms-overflow-hidden\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.focused]=\"state === 'ms-focus'\">\n        <button \n          type=\"button\"\n          class=\"ms-file-choose-btn\"\n          (click)=\"fileInputElement.click()\"\n          [disabled]=\"disabled\">\n          Choose File\n        </button>\n        <input\n          type=\"button\"\n          class=\"ms-file-input-display ms-w-100\"\n          [value]=\"fileNames.length > 0 ? fileNames[0] : (placeholder || 'No file selected')\"\n          (click)=\"fileInputElement.click()\"\n          [disabled]=\"disabled\"\n          [class.has-file]=\"fileNames.length > 0\" />\n      </div>\n\n      <!-- Selected Files List (for multiple files) -->\n      <div *ngIf=\"fileNames.length > 0\" class=\"ms-file-list\">\n        <div *ngFor=\"let fileName of fileNames; let i = index\" class=\"ms-file-item\">\n          <ms-icon (click)=\"removeFile(i)\" class=\"ms_icon\" [color]=\"'ms-icon-black'\" [name]=\"'close'\" [size]=\"'small'\"></ms-icon>\n          <!-- <span class=\"ms-file-name\">{{ fileName }}</span>\n          <button \n            type=\"button\" \n            class=\"ms-file-remove\"\n            (click)=\"removeFile(i)\"\n            [disabled]=\"disabled\"\n            aria-label=\"Remove file\">\n            <ms-icon (click)=\"removeFile(i)\" class=\"ms_icon\" [name]=\"'close'\" [size]=\"'small'\"></ms-icon>\n          </button> -->\n        </div>\n      </div>\n      \n      <!-- Error Message -->\n      <div *ngIf=\"hasError() && fileErrorMessage\" class=\"ms-file-error-message\">\n        {{ fileErrorMessage }}\n      </div>\n    </div>\n    }@else if(type == 'password'){\n      <app-ms-password-field\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [value]=\"value\"\n        [autocomplete]=\"passwordAutocomplete\"\n        [showRequirements]=\"showPasswordRequirements\"\n        [minLength]=\"passwordMinLength\"\n        [requireUppercase]=\"passwordRequireUppercase\"\n        [requireLowercase]=\"passwordRequireLowercase\"\n        [requireNumbers]=\"passwordRequireNumbers\"\n        [requireSpecialChars]=\"passwordRequireSpecialChars\"\n        (change)=\"change.emit($event)\"\n        (focus)=\"focus.emit($event)\"\n        (blur)=\"blur.emit($event)\"\n        (keydown)=\"keydown.emit($event)\"\n        (keyup)=\"keyup.emit($event)\"\n        (passwordStrengthChange)=\"passwordStrengthChange.emit($event)\">\n      </app-ms-password-field>\n    }@else if(type === 'phone'){\n      <app-ms-phone-input\n        [placeholder]=\"placeholder\"\n        [pattern]=\"pattern\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [state]=\"state\"\n        [countryList]=\"countryList\"\n        [value]=\"value\"\n        (change)=\"change.emit($event)\"\n        (focus)=\"focus.emit($event)\"\n        (blur)=\"blur.emit($event)\"\n        (keydown)=\"keydown.emit($event)\"\n        (keyup)=\"keyup.emit($event)\"\n        (countryChange)=\"countryChange.emit($event)\">\n      </app-ms-phone-input>\n    }\n    <!-- @else if(type === 'search'){\n      <div class=\"ms-search-input-wrapper\">\n        <input\n          type=\"search\"\n          class=\"ms-form-control ms-search-input\"\n          [class.ms-error]=\"hasError()\"\n          [class.ms-success]=\"isSuccess()\"\n          [class]=\"state\"\n          [attr.id]=\"id || null\"\n          [attr.name]=\"name || null\"\n          [attr.placeholder]=\"placeholder || 'Search...'\"\n          [attr.autocomplete]=\"autocomplete || 'off'\"\n          [class.invalid]=\"invalid\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          [required]=\"required\"\n          [value]=\"value\"\n          (input)=\"handleInput($event)\"\n          (change)=\"change.emit($event)\"\n          (focus)=\"focus.emit($event)\"\n          (blur)=\"handleBlur($event)\"\n          (keydown)=\"keydown.emit($event)\"\n          (keyup)=\"keyup.emit($event)\"\n        />\n        <span class=\"ms-search-icon\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/search.svg'\"></span>\n      </div>\n    } -->\n    @else if(fieldType === 'inline-editing'){\n      <app-ms-inline-edit\n        [placeholder]=\"placeholder\"\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        [value]=\"value\"\n        [required]=\"required\"\n        [pattern]=\"pattern\"\n        [minlength]=\"minlength\"\n        [maxlength]=\"maxlength\"\n        (change)=\"valueChange.emit($event)\">\n      </app-ms-inline-edit>\n    }@else if(prefix || suffix || type === 'search'){\n      <div class=\"ms-input-wrapper\" [class.ms-has-prefix-container]=\"prefix\" [class.ms-has-suffix-container]=\"suffix\" [class.ms-has-search-icon]=\"type === 'search'\">\n       <span *ngIf=\"prefix\" class=\"ms-input-prefix\">\n         <!-- <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + prefix + '.svg'\" alt=\"prefix\" /> -->\n        <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"prefix\" [size]=\"'small'\"></ms-icon>\n       </span>\n       <input\n       class=\"ms-form-control\"\n       [class.ms-error]=\"hasError()\"\n       [class.ms-success]=\"isSuccess()\"\n       [class]=\"state\"\n       [attr.type]=\"type\"\n       [class.ms-has-prefix]=\"prefix\"\n       [class.ms-has-suffix]=\"suffix\"\n       [attr.id]=\"id || null\"\n       [attr.name]=\"name || null\"\n       [attr.placeholder]=\"placeholder || null\"\n       [attr.autocomplete]=\"autocomplete || null\"\n        [attr.min]=\"min ?? null\"\n        [attr.max]=\"max ?? null\"\n        [attr.step]=\"step ?? null\"\n        [attr.minlength]=\"minlength ?? null\"\n        [attr.maxlength]=\"maxlength ?? null\"\n        [class.invalid]=\"invalid\"\n       [attr.pattern]=\"type === 'search' ? (pattern || null) : (prefix ? '\\\\d+' : (pattern || null))\"\n       [attr.inputmode]=\"type === 'search' ? (inputmode || null) : (prefix ? 'numeric' : (inputmode || null))\"\n       [readonly]=\"readonly\"\n       [disabled]=\"disabled\"\n       [required]=\"required\"\n       [value]=\"value\"\n       (input)=\"handleInput($event)\"\n       (change)=\"change.emit($event)\"\n       (focus)=\"focus.emit($event)\"\n       (blur)=\"handleBlur($event)\"\n       (keydown)=\"keydown.emit($event)\"\n       (keyup)=\"keyup.emit($event)\"\n     />\n     <span *ngIf=\"suffix\" class=\"ms-input-suffix\">\n         <!-- <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + suffix + '.svg'\" alt=\"suffix\" /> -->\n          <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"suffix\" [size]=\"'small'\"></ms-icon>\n    </span>\n     </div>\n    }\n    @else{\n      <input\n        class=\"ms-form-control\"\n        [class.ms-error]=\"hasError()\"\n        [class.ms-success]=\"isSuccess()\"\n        [class]=\"state\"\n        [attr.type]=\"type\"\n        [attr.id]=\"id || null\"\n        [attr.name]=\"name || null\"\n        [attr.placeholder]=\"placeholder || null\"\n        [attr.autocomplete]=\"autocomplete || null\"\n        [attr.min]=\"min ?? null\"\n        [attr.max]=\"max ?? null\"\n        [attr.step]=\"step ?? null\"\n        [attr.minlength]=\"minlength ?? null\"\n        [attr.maxlength]=\"maxlength ?? null\"\n        [class.invalid]=\"invalid\"\n        [attr.pattern]=\"pattern || null\"\n        [attr.inputmode]=\"inputmode || null\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [value]=\"value\"\n        (input)=\"handleInput($event)\"\n        (change)=\"change.emit($event)\"\n        (focus)=\"focus.emit($event)\"\n        (blur)=\"handleBlur($event)\"\n        (keydown)=\"keydown.emit($event)\"\n        (keyup)=\"keyup.emit($event)\"\n      />\n    }\n</ng-container>\n \n<ng-template #skeleton>\n  <div class=\"ms-skeleton-input\"></div>\n</ng-template>", styles: ["@charset \"UTF-8\";.ms-active,.ms-hover{border:1px solid var(--semantics-border-brand-default, #0084FF)}.ms-focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33}.ms-skeleton-input{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-success{border:1px solid var(--semantics-border-brand-default, #00935C);box-shadow:0 0 0 2px #36b37e33}.ms-form-control.ms-success{border-color:#00935c;box-shadow:0 0 0 2px #36b37e33}.ms-warning{box-shadow:0 0 0 1px #ffe1bf;border:1px solid var(--semantics-border-brand-default, #F58600)}.ms-error{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-brand-default, #dc2626)}.ms-input-field-container label{font-size:14px;font-weight:500;color:#1b1f22}.ms-input-wrapper{display:flex;align-items:center;position:relative;width:100%;border-radius:4px;background-color:#fff;transition:border-color .2s;height:36px}.ms-input-wrapper:focus-within{border-color:#3b82f6}.ms-form-control{padding:8px}.ms-form-control.ms-has-suffix{padding-right:32px}.ms-has-suffix-container .ms-input-suffix{position:absolute;right:0}.ms-input-prefix,.ms-input-suffix{display:flex;align-items:center;justify-content:center;padding:0 9px;flex-shrink:0;color:#6b7280}.ms-input-prefix img,.ms-input-suffix img{width:18px;height:18px;display:block}.ms-quantity-field{display:flex;align-items:center;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border-radius:8px}.ms-quantity-controls{display:flex;align-items:center;gap:0;padding:0 4px;flex-shrink:0;position:absolute;right:0}.ms-quantity-btn{background:none;border:none;padding:0 8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#374151;font-size:16px;font-weight:600;transition:background-color .2s,color .2s;flex-shrink:0;height:32px;width:32px;border-radius:3px}.ms-file-uploader-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-input-prefix{display:flex;align-items:center;justify-content:center;padding:0 9px;flex-shrink:0;color:#6b7280}.ms-input-prefix img{width:18px;height:18px;display:block}.ms-form-control.ms-has-prefix{padding-left:32px}.ms-has-prefix-container .ms-input-prefix{position:absolute}.ms-quantity-field{position:relative;display:flex;align-items:center;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border-radius:8px}.ms-quantity-field.ms-has-focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-quantity-field.ms-has-warning{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b1a}.ms-quantity-field.ms-has-error{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.ms-quantity-btn{background:none;border:none;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#374151;font-size:16px;font-weight:600;transition:background-color .2s,color .2s;flex-shrink:0;height:32px;width:32px;border-radius:3px}.ms-quantity-btn:disabled{cursor:not-allowed;color:#d1d5db}.ms-quantity-input{flex:1;text-align:left;font-size:14px;font-weight:500;color:#374151;padding:0 12px;height:100%;background-color:transparent}.ms-quantity-input:focus{outline:none}.ms-quantity-input:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-quantity-input::-webkit-outer-spin-button,.ms-quantity-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ms-quantity-input[type=number]{-moz-appearance:textfield}.ms-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-file-input-container{position:relative}.ms-file-input-container .ms-file-input-hidden{display:none}.ms-file-input-container .ms-file-input-field{height:36px}.ms-file-input-container .ms-file-input-field .ms-file-input-display{background:none;border:none;padding:8px 30px 8px 8px;font-size:14px;color:#ababab;cursor:pointer;text-align:left;background-color:#fff}.ms-file-input-container .ms-file-input-field .ms-file-input-display.has-file{color:var(--semantic-fg-neutral-strong, #333333);font-weight:500}.ms-file-input-container .ms-file-input-field .ms-file-input-display:disabled{cursor:not-allowed}.ms-file-input-container .ms-file-input-field .ms-file-choose-btn{padding:8px;border:none;border-right:1px solid #E0E0E0;background-color:#fff;color:#0084ff;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.ms-file-input-container .ms-file-input-field .ms-file-choose-btn:disabled{opacity:.5;cursor:not-allowed}.ms-file-input-container .ms-file-list{position:absolute;top:4px;right:8px;bottom:0;display:flex;align-items:center;cursor:pointer}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-name{font-size:.875rem;color:var(--semantic-fg-neutral-default, #666666);word-break:break-all;flex:1}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove{background:none;border:none;color:#999;font-size:1.25rem;cursor:pointer;padding:0;min-width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;transition:color .2s}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove:hover:not(:disabled){color:var(--semantic-fg-error-default, #D33C3C)}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove:disabled{opacity:.5;cursor:not-allowed}.ms-file-input-container.ms-has-error .ms-file-input-field{border-color:var(--semantic-fg-error-default, #D33C3C);background-color:#d33c3c05}.ms-file-input-container.ms-has-success .ms-file-input-field{border-color:var(--semantics-border-brand-default, #0084FF);background-color:#fff}.ms-file-input-container.ms-focus .ms-file-input-field{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-file-error-message{margin-top:8px;padding:8px 12px;background-color:#fef2f2;border:1px solid #FCA5A5;border-radius:6px;color:#da3e37;font-size:13px;display:flex;align-items:flex-start}.ms-file-error-message:before{content:\"\\26a0\";margin-right:8px;font-size:16px}.ms-common-hover{border:1px solid #E0E0E0;border-radius:8px;background-color:#fff;transition:all .2s ease;overflow:hidden}.ms-common-hover:hover:not(.disabled){border-color:#0084ff}.ms-common-hover:hover:not(.disabled) .ms-file-choose-btn{border-right:1px solid #0084FF}.ms-common-hover.focused{border-color:#0084ff;box-shadow:0 0 0 2px #0084ff33}.ms-common-hover.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e37}.ms-common-hover.ms-error:hover:not(.disabled){border-color:#da3e37}.ms-common-hover.disabled{opacity:.5;cursor:not-allowed;background:var(--semantics-surface-subtle-primary-disabled, #F5F5F5)}.ms-file-input-container.ms-has-error .ms-common-hover .ms-file-choose-btn{border-right:1px solid #D33C3C}.ms-file-input-container.ms-has-success .ms-common-hover .ms-file-choose-btn{border-right:1px solid #0084FF}.ms-has-search-icon{height:36px}.ms-has-search-icon input{height:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { type: [{
                 type: Input
             }], id: [{
@@ -2248,6 +2318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
             }] } });
 
 class MsTextArea {
+    elementRef;
     id;
     name;
     placeholder;
@@ -2311,6 +2382,9 @@ class MsTextArea {
     // CVA hooks
     onChange = () => { };
     onTouched = () => { };
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
     ngOnInit() {
         if (this.state === 'ms-error') {
             this.hasError.set(true); // ✅ border green
@@ -2534,8 +2608,27 @@ class MsTextArea {
         this.imageAlt = '';
         this.closeImageDropdown();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTextArea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsTextArea, isStandalone: true, selector: "ms-text-area", inputs: { id: "id", name: "name", placeholder: "placeholder", autocomplete: "autocomplete", readonly: "readonly", disabled: "disabled", required: "required", loading: "loading", invalid: "invalid", skeleton: "skeleton", minlength: "minlength", maxlength: "maxlength", ms_rows: "ms_rows", ms_cols: "ms_cols", autoResize: "autoResize", resize: "resize", scrollable: "scrollable", showResizeIcon: "showResizeIcon", state: "state", isDisabled: "isDisabled", showFormatOptions: "showFormatOptions", maxWidth: "maxWidth", maxHeight: "maxHeight" }, providers: [
+    onDocumentClick(event) {
+        const target = event.target;
+        // Check if click is on link button or inside link dropdown
+        const linkButton = target.closest('button[title="Insert Link"]');
+        const linkDropdown = this.elementRef.nativeElement.querySelector('.link-dropdown');
+        const clickedInsideLinkDropdown = linkDropdown?.contains(target);
+        // Check if click is on image button or inside image dropdown
+        const imageButton = target.closest('button[title="Insert Image"]');
+        const imageDropdown = this.elementRef.nativeElement.querySelector('.image-dropdown');
+        const clickedInsideImageDropdown = imageDropdown?.contains(target);
+        // Close link dropdown if clicked outside (including other dropdowns)
+        if (this.showLinkDropdown && !clickedInsideLinkDropdown && !linkButton) {
+            this.showLinkDropdown = false;
+        }
+        // Close image dropdown if clicked outside (including other dropdowns)
+        if (this.showImageDropdown && !clickedInsideImageDropdown && !imageButton) {
+            this.showImageDropdown = false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTextArea, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsTextArea, isStandalone: true, selector: "ms-text-area", inputs: { id: "id", name: "name", placeholder: "placeholder", autocomplete: "autocomplete", readonly: "readonly", disabled: "disabled", required: "required", loading: "loading", invalid: "invalid", skeleton: "skeleton", minlength: "minlength", maxlength: "maxlength", ms_rows: "ms_rows", ms_cols: "ms_cols", autoResize: "autoResize", resize: "resize", scrollable: "scrollable", showResizeIcon: "showResizeIcon", state: "state", isDisabled: "isDisabled", showFormatOptions: "showFormatOptions", maxWidth: "maxWidth", maxHeight: "maxHeight" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MsTextArea),
@@ -2552,7 +2645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                             multi: true,
                         },
                     ], template: "<ng-container *ngIf=\"!loading; else skeleton\">\n  @if(!showFormatOptions){\n    <textarea\n       class=\"ms-textArea\"\n      [class.ms-error]=\"hasError()\"\n      [class.invalid]=\"invalid\"\n      [class]=\"state\"\n      [id]=\"id\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      [autocomplete]=\"autocomplete\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      [attr.minlength]=\"minlength ?? null\"\n      [attr.maxlength]=\"maxlength ?? null\"\n      [rows]=\"ms_rows\"\n      [cols]=\"ms_cols\"\n      [value]=\"value()\"\n      (input)=\"handleInput($event)\"\n      (blur)=\"handleBlur($event)\"\n      [style.resize]=\"showResizeIcon ? 'vertical' : 'none'\"\n      [style.overflowY]=\"scrollable ? 'auto' : 'hidden'\"\n    \n    ></textarea>\n  }@else if(showFormatOptions){\n  <div class=\"ms-position-relative textarea-container\" [class]=\"state\">\n  <div class=\"formatting-toolbar ms-position-absolute ms-d-flex ms-gap-2 ms-align-items-center ms-border\" style=\"background-color: #f9fafb; border-start-start-radius: 20px;\n    border-start-end-radius: 20px;\" >\n    <!-- Paragraph Type Dropdown -->\n\n    <ms-dropdown [items]=\"paraTypeItems\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Paragraph'\" [closeOnClickOutside]=\"true\"  (selectionChange)=\"onSelectPara($event)\"></ms-dropdown>\n\n    <div class=\"formatting-divider\"></div>\n\n    <!-- Bold Button -->\n    <ms-button \n      (click)=\"toggleBold()\" \n      [class.active]=\"isBold\"\n      class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n      title=\"Bold\">\n      B\n    </ms-button>\n\n    <div class=\"formatting-divider\"></div>\n\n    <!-- Italic Button -->\n    <ms-button \n      (click)=\"toggleItalic()\" \n      [class.active]=\"isItalic\"\n      class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n      title=\"Italic\">\n      I\n    </ms-button>\n\n    <div class=\"formatting-divider\"></div>\n\n    <!-- Underline Button -->\n    <ms-button \n      (click)=\"toggleUnderline()\" \n      [class.active]=\"isUnderline\"\n      class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n      title=\"Underline\">\n      U\n    </ms-button>\n\n    <div class=\"formatting-divider\"></div>\n\n    <!-- Text Alignment Dropdown -->\n    <ms-dropdown [items]=\"formattingItems\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Left align'\" [closeOnClickOutside]=\"true\" (selectionChange)=\"onSelectItem($event)\"></ms-dropdown>\n\n    <div class=\"formatting-divider\"></div>\n\n    <ms-dropdown [items]=\"listTypeItems\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Bulleted List'\" [closeOnClickOutside]=\"true\"  (selectionChange)=\"onSelectlistType($event)\"></ms-dropdown>\n\n    <div class=\"formatting-divider\"></div>\n        <!-- Link Button -->\n    <div class=\"ms-position-relative\">\n      <ms-button \n        (click)=\"toggleLinkDropdown()\" \n        class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n        title=\"Insert Link\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"></path>\n          <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"></path>\n        </svg>\n      </ms-button>\n\n      <!-- Link Dropdown -->\n      <div *ngIf=\"showLinkDropdown\" class=\"insertion-dropdown link-dropdown\">\n        <div class=\"dropdown-form-group\">\n          <label>Link Text:</label>\n          <input type=\"text\" [(ngModel)]=\"linkText\" placeholder=\"Enter link text\" />\n        </div>\n        <div class=\"dropdown-form-group\">\n          <label>URL:</label>\n          <input type=\"text\" [(ngModel)]=\"linkUrl\" placeholder=\"https://example.com\" />\n        </div>\n        <div class=\"dropdown-buttons\">\n          <ms-button (click)=\"insertLink()\" class=\"btn-insert ms-d-flex ms-align-items-center ms-justify-content-center\">Insert</ms-button>\n          <ms-button (click)=\"closeLinkDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n        </div>\n      </div>\n    </div>\n\n    <!-- Image Button -->\n    <div class=\"ms-position-relative\">\n      <ms-button \n        (click)=\"toggleImageDropdown()\" \n        class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n        title=\"Insert Image\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n          <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"></circle>\n          <polyline points=\"21 15 16 10 5 21\"></polyline>\n        </svg>\n      </ms-button>\n\n      <!-- Image Dropdown -->\n      <div *ngIf=\"showImageDropdown\" class=\"insertion-dropdown image-dropdown\">\n        <div class=\"dropdown-form-group\">\n          <label>Image URL:</label>\n          <input type=\"text\" [(ngModel)]=\"imageUrl\" placeholder=\"https://example.com/image.jpg\" />\n        </div>\n        <div class=\"dropdown-form-group\">\n          <label>Alt Text:</label>\n          <input type=\"text\" [(ngModel)]=\"imageAlt\" placeholder=\"Image description\" />\n        </div>\n        <div class=\"dropdown-buttons\">\n          <ms-button (click)=\"insertImage()\" class=\"btn-insert ms-d-flex ms-align-items-center ms-justify-content-center\">Insert</ms-button>\n          <ms-button (click)=\"closeImageDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <textarea\n    #textArea\n    placeholder=\"Enter name\"\n    [(ngModel)]=\"textValue\"\n    [attr.rows]=\"ms_rows\"\n    [attr.cols]=\"ms_cols\"\n    [attr.maxlength]=\"maxlength\"\n    [attr.readonly]=\"readonly ? true : null\"\n    [attr.disabled]=\"disabled ? true : null\"\n    [style.resize]=\"autoResize ? 'both' : 'none'\"\n    [style.overflow]=\"scrollable ? 'auto' : 'hidden'\"\n    [style.textAlign]=\"textAlignment\"\n    [style.fontSize]=\"fontSize\"\n    [style.fontWeight]=\"isBold ? 'bold' : fontWeight\"\n    [style.fontStyle]=\"isItalic ? 'italic' : 'normal'\"\n    [style.textDecoration]=\"isUnderline ? 'underline' : 'none'\"\n    [style.paddingLeft]=\"listType !== 'none' ? '32px' : '12px'\"\n    [ngClass]=\"'list-' + listType\" (keydown.enter)=\"handleEnter($event)\"\n    class=\"ms-textArea\" \n    [ngStyle]=\"{ \n      'max-width': maxWidth ? maxWidth + 'px' : 'auto',\n      'max-height': maxHeight ? maxHeight + 'px' : 'auto',\n      'padding-top': showFormatOptions ? '55px' : '', \n      'border-radius': '20px', 'overflowY': 'auto'\n    }\"></textarea>\n</div>\n  }\n\n</ng-container>\n\n<ng-template #skeleton>\n  <div class=\"ms-skeleton-text\"></div>\n</ng-template>", styles: [".textarea-container{width:fit-content}.textarea-container .formatting-toolbar{top:0;left:0;right:0;background:#f5f5f5;border-bottom:1px solid #E0E0E0;height:45px}.textarea-container .formatting-toolbar .formatting-select{border:none!important;background:transparent!important}.textarea-container .formatting-toolbar .formatting-divider{width:1px;height:24px;background-color:#d1d5db;margin:0 7px}.textarea-container .formatting-toolbar .formatting-btn{cursor:pointer;border:none;height:32px;width:32px;background:transparent;border-radius:4px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;color:#374151}.textarea-container .formatting-toolbar .formatting-btn:hover{background-color:#e5e7eb}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper{position:relative;display:inline-flex;align-items:center}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-dropdown{position:absolute;opacity:0;width:32px;height:32px;cursor:pointer;z-index:10}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-dropdown option{padding:8px;background:#fff;color:#000}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-dropdown option:checked{background:#d6d6d6;color:#000}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-icon-display{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid #d1d5db;border-radius:4px;background:#fff;cursor:pointer;pointer-events:none}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-icon-display svg{width:16px;height:16px;stroke:#374151;color:#374151}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-icon-display:hover{background-color:#e5e7eb}.textarea-container .formatting-toolbar .list-dropdown-wrapper{position:relative;display:inline-flex;align-items:center}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-dropdown{position:absolute;opacity:0;width:32px;height:32px;cursor:pointer;z-index:10}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-dropdown option{padding:8px;background:#fff;color:#000}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-dropdown option:checked{background:#d6d6d6;color:#000}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-icon-display{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid #d1d5db;border-radius:4px;background:#fff;cursor:pointer;pointer-events:none}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-icon-display svg{width:16px;height:16px;stroke:#374151;color:#374151;fill:none}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-icon-display:hover{background-color:#e5e7eb}.formatting-btn.active{background:#d6d6d6!important;border-radius:6px;color:#000}.ms-textArea{max-width:100%;width:-webkit-fill-available}.ms-textArea.list-bulleted{list-style-type:disc}.ms-textArea.list-numbered{list-style-type:decimal}.ms-textArea.list-lettered{list-style-type:lower-alpha}.insertion-dropdown{position:absolute;background:#fff;border:1px solid #d1d5db;border-radius:4px;padding:12px;min-width:250px;box-shadow:0 4px 6px -1px #0000001a;z-index:100;top:45px}.insertion-dropdown.link-dropdown,.insertion-dropdown.image-dropdown{right:0}.insertion-dropdown .dropdown-form-group{margin-bottom:12px}.insertion-dropdown .dropdown-form-group label{display:block;margin-bottom:6px;font-size:12px;font-weight:500;color:#374151}.insertion-dropdown .dropdown-form-group input{width:100%;padding:6px 8px;border:1px solid #d1d5db;border-radius:3px;font-size:13px;box-sizing:border-box;transition:border-color .2s ease}.insertion-dropdown .dropdown-form-group input:focus{outline:none;border-color:#3b82f6}.insertion-dropdown .dropdown-buttons{display:flex;gap:6px;margin-top:12px}.insertion-dropdown .dropdown-buttons ms-button{flex:1;padding:6px 10px;border:none;border-radius:3px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease}.insertion-dropdown .dropdown-buttons ms-button.btn-insert{background-color:#3b82f6;color:#fff}.insertion-dropdown .dropdown-buttons ms-button.btn-insert:hover{background-color:#2563eb}.insertion-dropdown .dropdown-buttons ms-button.btn-cancel{background-color:#e5e7eb;color:#374151}.insertion-dropdown .dropdown-buttons ms-button.btn-cancel:hover{background-color:#d1d5db}.ms-active,.ms-hover{border:1px solid var(--semantics-border-brand-default, #0084FF)}.ms-focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33}.ms-success{border:1px solid var(--semantics-border-brand-default, #00935C);box-shadow:0 0 0 2px #36b37e33}.ms-form-control.ms-success{border-color:#00935c;box-shadow:0 0 0 2px #36b37e33}.ms-warning{box-shadow:0 0 0 1px #ffe1bf;border:1px solid var(--semantics-border-brand-default, #F58600)}.ms-error{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-brand-default, #dc2626)}ms-dropdown ::ng-deep .ms-dropdown-input-field{width:70px;background:transparent;border:none}.ms-skeleton-input{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
-        }], propDecorators: { id: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { id: [{
                 type: Input
             }], name: [{
                 type: Input
@@ -2601,6 +2694,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
             }], textArea: [{
                 type: ViewChild,
                 args: ['textArea']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
 class MsAvatar {
@@ -3252,13 +3348,13 @@ class MsSidebar {
     onSelectionChange(event) {
         console.log(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsSidebar, deps: [{ token: i1.DomSanitizer }, { token: i2$1.Router }, { token: TopbarService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsSidebar, deps: [{ token: i1.DomSanitizer }, { token: i2$2.Router }, { token: TopbarService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsSidebar, isStandalone: true, selector: "ms-sidebar", inputs: { id: "id", search: "search", setting: "setting", userDetail: "userDetail", country: "country", userDetailList: "userDetailList", badge: "badge", details: "details", flagsLists: "flagsLists" }, outputs: { select: "select" }, ngImport: i0, template: "<div class=\"ms-sidebar\" [ngClass]=\"{'collapsed': isCollapsed, 'expanded': !isCollapsed}\">\n   <div class=\"ms-d-flex ms-justify-content-between\">\n      <img src=\"https://ds-doc.sentrixbar.com/logo.svg\" alt=\"Logo\" class=\"logo\" *ngIf=\"!isCollapsed\">\n      <img src=\"https://ds-doc.sentrixbar.com/logo-small.svg\" alt=\"Logo\" class=\"logo\" *ngIf=\"isCollapsed\" (click)=\"toggleSidebar()\">\n      <button class=\"toggle-btn\" (click)=\"toggleSidebar()\" *ngIf=\"!isCollapsed\">\n      <img src=\"https://ds-doc.sentrixbar.com/assets/svg/sidebar-left-expand.svg\" alt=\"Toggle\" class=\"icon\">\n      </button>\n   </div>\n\n\n\n\n\n\n\n\n\n\n\n@if(country){\n  <div class=\"ms-mt-3\" [ngClass]=\"{'ms-mb-3': !isCollapsed}\">\n    <ms-dropdown *ngIf=\"!isCollapsed\"\n    [text]=\"'Country'\"\n    [isDisabled]=\"false\"\n    [selectedItem]=\"selectedCountry\"\n    [multiSelectDisplay]=\"'text'\"\n    [allowMultiple]=\"false\"\n    [icon]=\"'chevron-down'\"\n    [iconPosition]=\"'suffix'\"\n    [items]=\"flagsLists\"\n    [closeOnSelect]=\"true\"\n    [closeOnClickOutside]=\"true\"\n    [showFlagImage]=\"true\"\n    [searchable]=\"true\"\n    (selectionChange)=\"onSelectionChange($event)\">\n  </ms-dropdown>\n  @if(isCollapsed){\n    <div class=\"menu-section-country\">\n      <div class=\"menu-item-country\">\n        <ms-flag-icon [name]=\"selectedContry?.label | lowercase \"></ms-flag-icon>\n      </div>\n    </div>\n  }\n  </div>\n}\n\n   @if(search){\n     <div class=\"ms-d-flex ms-justify-content-between ms-mb-2\" [ngClass]=\"{'search-hidden': !isSearchVisible}\" >\n       <div class=\"search-wrapper\" *ngIf=\"!isCollapsed\">\n         <input type=\"text\" placeholder=\"Search...\" class=\"search-input \"  [(ngModel)]=\"searchText\"\n  (input)=\"filterMenu()\">\n         <span class=\"search-icon\">\n<ms-icon [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n</span>\n</div>\n</div>\n}\n<div class=\"menu-container\" >\n  <div *ngFor=\"let section of filteredMenuData\" class=\"menu-section\">\n    <div class=\"menu-item \" (click)=\"toggleSection(section, $event)\"\n    [ngClass]=\"{'active-section':selectedSectionId === section.id}\">\n    <span  class=\"\" [ngClass]=\"{'ms-me-2': !isCollapsed}\">\n      <ms-icon [name]=\"section.icon\" ></ms-icon>\n\n    </span>\n    <span class=\"title ms-f-w-500\">{{ section.title }}</span>\n    <span class=\"badge\" *ngIf=\"section?.sub_menu?.length > 0 && section?.sub_menu?.length > 0 && !isCollapsed\">{{ section?.sub_menu?.length }}</span>\n    <span alt=\"Chevron\" class=\"\" (click)=\"rotating(section)\" *ngIf=\"!isCollapsed && section.sub_menu?.length > 0\">\n    <ms-icon [name]=\"'chevron-up'\" [size]=\"'small'\" *ngIf=\"rotate[section.id]\"></ms-icon>\n    <ms-icon [name]=\"'chevron-down'\" [size]=\"'small'\" *ngIf=\"!rotate[section.id]\"></ms-icon>\n      </span>\n   </div>\n  <ul class=\"submenu\" *ngIf=\"openSections[section.id] && !isCollapsed\">\n  <li class=\"submenu-item \" *ngFor=\"let item of section.sub_menu\"\n      (click)=\"selectItem(item , section)\"\n      [ngClass]=\"{'active-section': activeItem === item.id}\">\n      {{ item.label }}\n  </li>\n</ul>\n\n\n</div>\n   </div>\n<div class=\"\" [ngClass]=\"{'ms-sidebar-footer': userDetail || setting}\">\n  @if(setting){\n    <div class=\"Settings-section menu-item \"  >\n       <img src=\"https://ds-doc.sentrixbar.com/assets/svg/sparkles.svg\" alt=\"Settings\" class=\"ms-me-2 icon\">\n       <span class=\"user-name  ms-f-w-500\" *ngIf=\"!isCollapsed\">Settings</span>\n    </div>\n  }\n  @if(userDetail && userDetailList){\n    <div class=\"profile-section menu-item\" #profileSection [ngClass]=\"{'active-section': profileFlyoutVisible}\" (click)=\"toggleProfileFlyout()\">\n      <div class=\"user-avatar\">{{ userInitials }}</div>\n      <span class=\"user-name  ms-f-w-500 \" *ngIf=\"!isCollapsed\">{{ userName || 'User Name' }}</span>\n      <div class=\"profile-flyout\" *ngIf=\"profileFlyoutVisible\">\n        <div class=\"flyout-item\" (click)=\"viewProfile()\">View Profile</div>\n        <div class=\"flyout-item\" (click)=\"accountSettings()\">Account Settings</div>\n        <div class=\"flyout-item\" (click)=\"documentation()\">Documentation</div>\n        <hr class=\"flyout-divider\">\n        <div class=\"flyout-section\">\n          <div class=\"flyout-title\">Switch Account</div>\n          <div *ngFor=\"let account of accounts; let i = index\" class=\"account-item\">\n             <div class=\"account-info\">\n               <div class=\"account-avatar\">{{ getInitials(account.name) }}</div>\n               <div class=\"account-details\">\n                 <div class=\"account-name ms-f-w-500\">{{ account.name }}</div>\n                 <div class=\"account-email ms-fs-12\">{{ account.email }}</div>\n               </div>\n             </div>\n            <input type=\"radio\" [checked]=\"account.selected\" (change)=\"selectAccount(i)\" name=\"account\">\n          </div>\n        </div>\n        <button class=\"flyout-button\" >Add Account</button>\n         <hr class=\"flyout-divider\">\n        <div class=\"flyout-item sign-out\" >Sign Out</div>\n      </div>\n    </div>\n  }\n</div>\n</div>\n<ul class=\"submenu-flyout\"\n    *ngIf=\"isCollapsed && flyoutSectionId && flyoutItems?.length > 0\"\n    [style.top.px]=\"flyoutTop\">\n  <li *ngFor=\"let item of flyoutItems\"\n      (click)=\"selectItem(item, flyoutItems)\">\n      {{ item.label }}\n  </li>\n</ul>", styles: [".ms-sidebar{display:flex;flex-direction:column;top:0;left:0;height:100vh;border:1px solid #dee2e6;transition:width .3s ease;z-index:1000}.menu-container{flex:1;overflow-y:auto;scrollbar-width:none}.menu-container::-webkit-scrollbar{display:none}.ms-sidebar.collapsed{width:60px;padding:10px;display:flex;align-items:center}.ms-sidebar.expanded{width:250px;padding:10px}.toggle-btn{padding:10px;background:none;border:none;cursor:pointer}.menu-item{display:flex;align-items:center;padding:12px;font-size:14px!important;color:#6a6b6d;cursor:pointer;margin:4px 1px;transition:all .3s ease}.menu-item:hover{border-radius:8px;background:#ebebeb}.menu-item-country{display:flex;align-items:center;padding:12px;font-size:14px!important;cursor:pointer;margin-bottom:4px;transition:all .3s ease;border-radius:8px;background:#fff;border:1px solid #E0E0E0}.menu-item-country ms-flag-icon{display:flex!important}.active-section{border-radius:8px;font-weight:500;outline:1px solid #E0E0E0;background:#fff;box-shadow:0 1px 2px #00000014;color:#1b1f22}.title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.collapsed .title{display:none}.submenu{list-style:none;padding-left:22px;color:#6a6b6d;font-size:14px!important;margin:0 0 4px;position:relative}.submenu:before{content:\"\";position:absolute;left:15px;top:0;width:2px;height:100%;background-color:#ccc;animation:slideDown .3s ease-out}@keyframes slideDown{0%{height:0}to{height:100%}}.submenu-item{padding:12px 12px 12px 10px;border-radius:8px;display:flex;align-items:center;cursor:pointer;margin:1px}.submenu-item:hover{background-color:#ebebeb}ms-icon{display:flex}.badge{background-color:#1b1f22;padding:6px;font-size:12px!important;color:#fff;border-radius:8px;width:10px;height:10px;display:flex;align-items:center;justify-content:center;font-weight:500;margin-left:8px;margin-right:8px;flex-shrink:0}.search-wrapper{position:relative;width:100%}.search-input{border:none;border-bottom:1px solid #dee2e6;background:transparent;padding:8px 8px 8px 22px;font-size:14px;color:#6a6b6d;outline:none;transition:border-color .3s ease;width:218px}.search-icon{position:absolute;left:0;top:50%;transform:translateY(-50%);width:16px;height:16px;opacity:.5}.search-input:hover{border-bottom-color:#adb5bd}.search-input:focus{border-bottom-color:#007bff}.search-input:active{border-bottom-color:#0056b3}.search-input:disabled{border-bottom-color:#e9ecef;color:#adb5bd;cursor:not-allowed}.search-hidden{transform:translateY(-100%);opacity:0;transition:all .3s ease}.submenu-flyout{position:fixed;transform:translate(63px);border-radius:12px;background:#fff;border:1px solid #dee2e6;box-shadow:0 2px 8px #0000001a;z-index:1001;min-width:200px;list-style:none;padding:4px;margin:0;max-height:50vh;overflow-y:auto}.submenu-flyout li{padding:12px;color:#6a6b6d;cursor:pointer}.submenu-flyout li:hover,.submenu-flyout li:active{background:#f5f5f5;color:#1b1f22;border-radius:8px}.ms-sidebar-footer{padding-top:10px;border-top:1px solid #dee2e6;background:inherit}.Settings-section{display:flex;align-items:center}.profile-section{display:flex;align-items:center;margin-bottom:10px;position:relative;cursor:pointer}.user-avatar{width:20px;height:20px;border-radius:50%;margin-right:10px;background-color:#007bff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px!important;font-weight:700}.user-name{font-size:14px;color:#6a6b6d}.profile-flyout{position:absolute;border-radius:8px;bottom:100%;left:262px;background:#fff;border:1px solid #dee2e6;box-shadow:0 2px 8px #0000001a;z-index:1001;min-width:250px;padding:10px}.flyout-item{padding:10px 15px;cursor:pointer;font-size:14px}.flyout-item:hover{background:#e0e0e0;border-radius:12px}.flyout-divider{border:none;border-top:1px solid #dee2e6;margin:5px 0}.flyout-section{padding:0 15px}.flyout-title{font-size:14px!important;font-weight:700!important;margin-bottom:5px!important;color:#6a6b6d!important}.account-item{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;padding:10px 0 10px 10px}.account-item:hover{background:#e0e0e0;border-radius:12px}.account-item input{margin-right:10px;margin-top:5px}.account-info{display:flex;align-items:center}.account-avatar{width:20px;height:20px;border-radius:50%;margin-right:10px;background-color:#007bff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px!important;font-weight:700}.account-details{display:flex;flex-direction:column}.account-name{font-size:12px;font-weight:500;color:#333}.account-email{font-size:10px;color:#666}.flyout-button{width:calc(100% - 30px);margin:10px 15px;padding:8px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.flyout-button:hover{background:#0056b3}.sign-out{color:#dc3545;text-align:center}.sign-out:hover{background:#f8d7da}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MsDropdown, selector: "ms-dropdown", inputs: ["text", "isDisabled", "items", "icon", "iconPosition", "closeOnSelect", "closeOnClickOutside", "selectedItem", "allowMultiple", "maxHeight", "loading", "error", "ariaLabel", "searchable", "searchPlaceholder", "noResultsText", "customClass", "dropdownMenuClass", "dropdownMenuWidth", "showFlagImage", "multiSelectDisplay", "inputPlaceholder", "inputLabel", "inputErrorState", "inputWarningState", "inputFocusState", "required", "size", "variant", "radiussize", "iconOnly", "useInputField"], outputs: ["selectionChange"] }, { kind: "component", type: MsFlagIcon, selector: "ms-flag-icon", inputs: ["name", "size"] }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsSidebar, decorators: [{
             type: Component,
             args: [{ selector: 'ms-sidebar', standalone: true, imports: [CommonModule, FormsModule, MsDropdown, MsFlagIcon, MsIcon], template: "<div class=\"ms-sidebar\" [ngClass]=\"{'collapsed': isCollapsed, 'expanded': !isCollapsed}\">\n   <div class=\"ms-d-flex ms-justify-content-between\">\n      <img src=\"https://ds-doc.sentrixbar.com/logo.svg\" alt=\"Logo\" class=\"logo\" *ngIf=\"!isCollapsed\">\n      <img src=\"https://ds-doc.sentrixbar.com/logo-small.svg\" alt=\"Logo\" class=\"logo\" *ngIf=\"isCollapsed\" (click)=\"toggleSidebar()\">\n      <button class=\"toggle-btn\" (click)=\"toggleSidebar()\" *ngIf=\"!isCollapsed\">\n      <img src=\"https://ds-doc.sentrixbar.com/assets/svg/sidebar-left-expand.svg\" alt=\"Toggle\" class=\"icon\">\n      </button>\n   </div>\n\n\n\n\n\n\n\n\n\n\n\n@if(country){\n  <div class=\"ms-mt-3\" [ngClass]=\"{'ms-mb-3': !isCollapsed}\">\n    <ms-dropdown *ngIf=\"!isCollapsed\"\n    [text]=\"'Country'\"\n    [isDisabled]=\"false\"\n    [selectedItem]=\"selectedCountry\"\n    [multiSelectDisplay]=\"'text'\"\n    [allowMultiple]=\"false\"\n    [icon]=\"'chevron-down'\"\n    [iconPosition]=\"'suffix'\"\n    [items]=\"flagsLists\"\n    [closeOnSelect]=\"true\"\n    [closeOnClickOutside]=\"true\"\n    [showFlagImage]=\"true\"\n    [searchable]=\"true\"\n    (selectionChange)=\"onSelectionChange($event)\">\n  </ms-dropdown>\n  @if(isCollapsed){\n    <div class=\"menu-section-country\">\n      <div class=\"menu-item-country\">\n        <ms-flag-icon [name]=\"selectedContry?.label | lowercase \"></ms-flag-icon>\n      </div>\n    </div>\n  }\n  </div>\n}\n\n   @if(search){\n     <div class=\"ms-d-flex ms-justify-content-between ms-mb-2\" [ngClass]=\"{'search-hidden': !isSearchVisible}\" >\n       <div class=\"search-wrapper\" *ngIf=\"!isCollapsed\">\n         <input type=\"text\" placeholder=\"Search...\" class=\"search-input \"  [(ngModel)]=\"searchText\"\n  (input)=\"filterMenu()\">\n         <span class=\"search-icon\">\n<ms-icon [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n</span>\n</div>\n</div>\n}\n<div class=\"menu-container\" >\n  <div *ngFor=\"let section of filteredMenuData\" class=\"menu-section\">\n    <div class=\"menu-item \" (click)=\"toggleSection(section, $event)\"\n    [ngClass]=\"{'active-section':selectedSectionId === section.id}\">\n    <span  class=\"\" [ngClass]=\"{'ms-me-2': !isCollapsed}\">\n      <ms-icon [name]=\"section.icon\" ></ms-icon>\n\n    </span>\n    <span class=\"title ms-f-w-500\">{{ section.title }}</span>\n    <span class=\"badge\" *ngIf=\"section?.sub_menu?.length > 0 && section?.sub_menu?.length > 0 && !isCollapsed\">{{ section?.sub_menu?.length }}</span>\n    <span alt=\"Chevron\" class=\"\" (click)=\"rotating(section)\" *ngIf=\"!isCollapsed && section.sub_menu?.length > 0\">\n    <ms-icon [name]=\"'chevron-up'\" [size]=\"'small'\" *ngIf=\"rotate[section.id]\"></ms-icon>\n    <ms-icon [name]=\"'chevron-down'\" [size]=\"'small'\" *ngIf=\"!rotate[section.id]\"></ms-icon>\n      </span>\n   </div>\n  <ul class=\"submenu\" *ngIf=\"openSections[section.id] && !isCollapsed\">\n  <li class=\"submenu-item \" *ngFor=\"let item of section.sub_menu\"\n      (click)=\"selectItem(item , section)\"\n      [ngClass]=\"{'active-section': activeItem === item.id}\">\n      {{ item.label }}\n  </li>\n</ul>\n\n\n</div>\n   </div>\n<div class=\"\" [ngClass]=\"{'ms-sidebar-footer': userDetail || setting}\">\n  @if(setting){\n    <div class=\"Settings-section menu-item \"  >\n       <img src=\"https://ds-doc.sentrixbar.com/assets/svg/sparkles.svg\" alt=\"Settings\" class=\"ms-me-2 icon\">\n       <span class=\"user-name  ms-f-w-500\" *ngIf=\"!isCollapsed\">Settings</span>\n    </div>\n  }\n  @if(userDetail && userDetailList){\n    <div class=\"profile-section menu-item\" #profileSection [ngClass]=\"{'active-section': profileFlyoutVisible}\" (click)=\"toggleProfileFlyout()\">\n      <div class=\"user-avatar\">{{ userInitials }}</div>\n      <span class=\"user-name  ms-f-w-500 \" *ngIf=\"!isCollapsed\">{{ userName || 'User Name' }}</span>\n      <div class=\"profile-flyout\" *ngIf=\"profileFlyoutVisible\">\n        <div class=\"flyout-item\" (click)=\"viewProfile()\">View Profile</div>\n        <div class=\"flyout-item\" (click)=\"accountSettings()\">Account Settings</div>\n        <div class=\"flyout-item\" (click)=\"documentation()\">Documentation</div>\n        <hr class=\"flyout-divider\">\n        <div class=\"flyout-section\">\n          <div class=\"flyout-title\">Switch Account</div>\n          <div *ngFor=\"let account of accounts; let i = index\" class=\"account-item\">\n             <div class=\"account-info\">\n               <div class=\"account-avatar\">{{ getInitials(account.name) }}</div>\n               <div class=\"account-details\">\n                 <div class=\"account-name ms-f-w-500\">{{ account.name }}</div>\n                 <div class=\"account-email ms-fs-12\">{{ account.email }}</div>\n               </div>\n             </div>\n            <input type=\"radio\" [checked]=\"account.selected\" (change)=\"selectAccount(i)\" name=\"account\">\n          </div>\n        </div>\n        <button class=\"flyout-button\" >Add Account</button>\n         <hr class=\"flyout-divider\">\n        <div class=\"flyout-item sign-out\" >Sign Out</div>\n      </div>\n    </div>\n  }\n</div>\n</div>\n<ul class=\"submenu-flyout\"\n    *ngIf=\"isCollapsed && flyoutSectionId && flyoutItems?.length > 0\"\n    [style.top.px]=\"flyoutTop\">\n  <li *ngFor=\"let item of flyoutItems\"\n      (click)=\"selectItem(item, flyoutItems)\">\n      {{ item.label }}\n  </li>\n</ul>", styles: [".ms-sidebar{display:flex;flex-direction:column;top:0;left:0;height:100vh;border:1px solid #dee2e6;transition:width .3s ease;z-index:1000}.menu-container{flex:1;overflow-y:auto;scrollbar-width:none}.menu-container::-webkit-scrollbar{display:none}.ms-sidebar.collapsed{width:60px;padding:10px;display:flex;align-items:center}.ms-sidebar.expanded{width:250px;padding:10px}.toggle-btn{padding:10px;background:none;border:none;cursor:pointer}.menu-item{display:flex;align-items:center;padding:12px;font-size:14px!important;color:#6a6b6d;cursor:pointer;margin:4px 1px;transition:all .3s ease}.menu-item:hover{border-radius:8px;background:#ebebeb}.menu-item-country{display:flex;align-items:center;padding:12px;font-size:14px!important;cursor:pointer;margin-bottom:4px;transition:all .3s ease;border-radius:8px;background:#fff;border:1px solid #E0E0E0}.menu-item-country ms-flag-icon{display:flex!important}.active-section{border-radius:8px;font-weight:500;outline:1px solid #E0E0E0;background:#fff;box-shadow:0 1px 2px #00000014;color:#1b1f22}.title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.collapsed .title{display:none}.submenu{list-style:none;padding-left:22px;color:#6a6b6d;font-size:14px!important;margin:0 0 4px;position:relative}.submenu:before{content:\"\";position:absolute;left:15px;top:0;width:2px;height:100%;background-color:#ccc;animation:slideDown .3s ease-out}@keyframes slideDown{0%{height:0}to{height:100%}}.submenu-item{padding:12px 12px 12px 10px;border-radius:8px;display:flex;align-items:center;cursor:pointer;margin:1px}.submenu-item:hover{background-color:#ebebeb}ms-icon{display:flex}.badge{background-color:#1b1f22;padding:6px;font-size:12px!important;color:#fff;border-radius:8px;width:10px;height:10px;display:flex;align-items:center;justify-content:center;font-weight:500;margin-left:8px;margin-right:8px;flex-shrink:0}.search-wrapper{position:relative;width:100%}.search-input{border:none;border-bottom:1px solid #dee2e6;background:transparent;padding:8px 8px 8px 22px;font-size:14px;color:#6a6b6d;outline:none;transition:border-color .3s ease;width:218px}.search-icon{position:absolute;left:0;top:50%;transform:translateY(-50%);width:16px;height:16px;opacity:.5}.search-input:hover{border-bottom-color:#adb5bd}.search-input:focus{border-bottom-color:#007bff}.search-input:active{border-bottom-color:#0056b3}.search-input:disabled{border-bottom-color:#e9ecef;color:#adb5bd;cursor:not-allowed}.search-hidden{transform:translateY(-100%);opacity:0;transition:all .3s ease}.submenu-flyout{position:fixed;transform:translate(63px);border-radius:12px;background:#fff;border:1px solid #dee2e6;box-shadow:0 2px 8px #0000001a;z-index:1001;min-width:200px;list-style:none;padding:4px;margin:0;max-height:50vh;overflow-y:auto}.submenu-flyout li{padding:12px;color:#6a6b6d;cursor:pointer}.submenu-flyout li:hover,.submenu-flyout li:active{background:#f5f5f5;color:#1b1f22;border-radius:8px}.ms-sidebar-footer{padding-top:10px;border-top:1px solid #dee2e6;background:inherit}.Settings-section{display:flex;align-items:center}.profile-section{display:flex;align-items:center;margin-bottom:10px;position:relative;cursor:pointer}.user-avatar{width:20px;height:20px;border-radius:50%;margin-right:10px;background-color:#007bff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px!important;font-weight:700}.user-name{font-size:14px;color:#6a6b6d}.profile-flyout{position:absolute;border-radius:8px;bottom:100%;left:262px;background:#fff;border:1px solid #dee2e6;box-shadow:0 2px 8px #0000001a;z-index:1001;min-width:250px;padding:10px}.flyout-item{padding:10px 15px;cursor:pointer;font-size:14px}.flyout-item:hover{background:#e0e0e0;border-radius:12px}.flyout-divider{border:none;border-top:1px solid #dee2e6;margin:5px 0}.flyout-section{padding:0 15px}.flyout-title{font-size:14px!important;font-weight:700!important;margin-bottom:5px!important;color:#6a6b6d!important}.account-item{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;padding:10px 0 10px 10px}.account-item:hover{background:#e0e0e0;border-radius:12px}.account-item input{margin-right:10px;margin-top:5px}.account-info{display:flex;align-items:center}.account-avatar{width:20px;height:20px;border-radius:50%;margin-right:10px;background-color:#007bff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px!important;font-weight:700}.account-details{display:flex;flex-direction:column}.account-name{font-size:12px;font-weight:500;color:#333}.account-email{font-size:10px;color:#666}.flyout-button{width:calc(100% - 30px);margin:10px 15px;padding:8px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.flyout-button:hover{background:#0056b3}.sign-out{color:#dc3545;text-align:center}.sign-out:hover{background:#f8d7da}\n"] }]
-        }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i2$1.Router }, { type: TopbarService }], propDecorators: { id: [{
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i2$2.Router }, { type: TopbarService }], propDecorators: { id: [{
                 type: Input
             }], search: [{
                 type: Input
@@ -3485,7 +3581,7 @@ class MsFileUploader {
         return this.accept.split(',').map(ext => ext.trim().toUpperCase()).join(', ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsFileUploader, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsFileUploader, isStandalone: true, selector: "ms-file-uploader", inputs: { label: "label", required: "required", readonly: "readonly", disabled: "disabled", accept: "accept", multiple: "multiple", maxFileSize: "maxFileSize", variant: "variant", skeleton: "skeleton" }, outputs: { uploadedFilesChange: "uploadedFilesChange" }, viewQueries: [{ propertyName: "fileInputButton", first: true, predicate: ["fileInputButton"], descendants: true }, { propertyName: "fileInputDragDrop", first: true, predicate: ["fileInputDragDrop"], descendants: true }], ngImport: i0, template: "@if (skeleton) {\n    <div class=\"ms-file-uploader-skeleton\" [class]=\"variant\"></div>\n} @else {\n<div class=\"file-uploader-wrapper\">\n  <!-- <div *ngIf=\"label\" class=\"file-uploader-label\">\n    <label>{{ label }} <span *ngIf=\"required\" class=\"required\">*</span></label>\n  </div> -->\n\n  <!-- ===================== BUTTON VARIANT ===================== -->\n  <ng-container *ngIf=\"variant === 'button'\">\n    <!-- Instructions -->\n    <div class=\"file-uploader-instructions button-variant\">\n      <p class=\"ms-mb-2\">{{ label }}</p>\n      <p class=\"instruction-text\">\n        <span>Max file size:</span> {{ maxFileSize }} | \n        <span>Accepted formats:</span> {{ getAcceptFormats() }}\n      </p>\n    </div>\n\n    <!-- Button Upload Area -->\n    <div class=\"button-upload-area\">\n      <button \n        type=\"button\"\n        class=\"upload-button\"\n        (click)=\"triggerFileInput()\"\n        [disabled]=\"disabled\">\n        <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/upload.svg'\"></span>\n        <span>Upload file</span>\n      </button>\n      \n      <!-- <p class=\"button-hint\">or drag and drop</p> -->\n    </div>\n\n    <!-- Hidden File Input -->\n    <input \n      #fileInputButton\n      type=\"file\" \n      [accept]=\"accept\"\n      [multiple]=\"multiple\"\n      [disabled]=\"disabled\"\n      (change)=\"onFileInputChange($event)\"\n      style=\"display: none;\">\n  </ng-container>\n\n  <!-- ===================== DRAG & DROP VARIANT ===================== -->\n  <ng-container *ngIf=\"variant === 'dragdrop'\">\n    <!-- Instructions outside the border -->\n    <div class=\"file-uploader-instructions dragdrop-variant\">\n      <p class=\"instruction-text\">\n        <span>Max file size:</span> {{ maxFileSize }} | \n        <span>Accepted formats:</span> {{ getAcceptFormats() }}\n      </p>\n    </div>\n\n    <!-- Drag and Drop Area with Dotted Border -->\n    <div \n      class=\"file-uploader-dropzone\"\n      [class.dragover]=\"isDragOver\"\n      [class.disabled]=\"disabled\"\n      [class.error]=\"showError || invalidFileError\"\n      [class.focused]=\"isFocused\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDropFiles($event)\"\n      (click)=\"triggerFileInput()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      tabindex=\"0\">\n      \n      <!-- Upload Icon and Text -->\n      <div class=\"dropzone-content\">\n        <span class=\"upload-icon\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/file-plus.svg'\"></span>\n        <p class=\"upload-text\">Drag and drop your files here</p>\n        <p class=\"upload-subtext\">or <span class=\"click-text\">click to browse</span></p>\n      </div>\n\n      <!-- Hidden File Input -->\n      <input \n        #fileInputDragDrop\n        type=\"file\" \n        [accept]=\"accept\"\n        [multiple]=\"multiple\"\n        [disabled]=\"disabled\"\n        (change)=\"onFileInputChange($event)\"\n        style=\"display: none;\">\n    </div>\n  </ng-container>\n\n  <!-- Error Message -->\n  <div *ngIf=\"showError\" class=\"error-message\">\n    <p>This field is required. Please select at least one file.</p>\n  </div>\n\n  <!-- Uploaded Files List (Shared for both variants) -->\n  <div *ngIf=\"uploadedFiles.length > 0\" class=\"uploaded-files\">\n    <div class=\"files-list\">\n      <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"file-item\">\n        <div class=\"file-info\">\n          <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/File-pdf.svg'\"></span>\n          <div class=\"file-details\">\n            <p class=\"file-name\" [title]=\"file.name\">{{ file.name }}</p>\n            <p class=\"file-size\">{{ file.size }}</p>\n          </div>\n        </div>\n\n        <div class=\"file-actions\">\n          <!-- Loader State -->\n          <div *ngIf=\"file.isLoading\" class=\"loader\">\n            <ms-spinner [color]=\"'primary'\" [size]=\"'sm'\"></ms-spinner>\n          </div>\n\n          <!-- Success Tick State -->\n          <div *ngIf=\"file.isSuccess && !file.isLoading\" class=\"success-tick\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <polyline points=\"20 6 9 17 4 12\"></polyline>\n            </svg>\n          </div>\n\n          <!-- Remove Button State -->\n          <button \n            *ngIf=\"!file.isLoading && !file.isSuccess\"\n            type=\"button\"\n            class=\"remove-btn\"\n            (click)=\"removeFile(i)\"\n            [disabled]=\"disabled\">\n            <span class=\"d-flex align-items-center\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/x.svg'\"></span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}", styles: [".file-uploader-wrapper{display:flex;flex-direction:column;gap:10px;width:100%}.file-uploader-wrapper .file-uploader-label{display:flex;align-items:center;gap:4px;margin-bottom:8px}.file-uploader-wrapper .file-uploader-label label{font-size:14px;font-weight:600;color:#1f2937;margin:0}.file-uploader-wrapper .file-uploader-label .required{color:#ef4444;font-weight:700}.file-uploader-wrapper .file-uploader-instructions{padding:8px 0;border-radius:4px}.file-uploader-wrapper .file-uploader-instructions .instruction-text{font-size:13px!important;color:#6a6b6d;margin:0;line-height:1.5;font-weight:400}.file-uploader-wrapper .file-uploader-instructions .instruction-text span{font-size:13px!important}.file-uploader-wrapper .file-uploader-instructions .instruction-text strong{color:#374151;font-weight:600}.file-uploader-wrapper .file-uploader-instructions.button-variant{padding:12px 0!important}.file-uploader-wrapper .button-upload-area{display:flex;flex-direction:column;align-items:flex-start;gap:10px;border-radius:8px}.file-uploader-wrapper .button-upload-area .upload-button{display:flex;align-items:center;gap:8px;padding:10px 20px;background-color:#0084ff;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.file-uploader-wrapper .button-upload-area .upload-button svg{width:20px;height:20px}.file-uploader-wrapper .button-upload-area .upload-button:active:not(:disabled){transform:scale(.98)}.file-uploader-wrapper .button-upload-area .upload-button:disabled{background-color:#d1d5db;cursor:not-allowed;opacity:.6}.file-uploader-wrapper .button-upload-area .upload-button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.file-uploader-wrapper .button-upload-area .button-hint{font-size:13px;color:#6b7280;margin:0}.file-uploader-wrapper .file-uploader-dropzone{position:relative;padding:20px;border:3px dotted #CCCCCC;border-radius:8px;background-color:#fff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;min-height:170px}.file-uploader-wrapper .file-uploader-dropzone:hover:not(.disabled){border-color:#0084ff}.file-uploader-wrapper .file-uploader-dropzone.dragover:not(.disabled){border-color:#3b82f6;background-color:#eff6ff;transform:scale(1.02)}.file-uploader-wrapper .file-uploader-dropzone.disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled){border-color:#ef4444;background-color:#fef2f2}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled):hover{border-color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled) .dropzone-content .upload-icon{color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled) .dropzone-content .upload-text{color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled){border-color:#0084ff;outline-offset:2px}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error{border-color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error .dropzone-content .upload-icon{color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error .dropzone-content .upload-text{color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content{text-align:center;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:10px}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-icon{width:32px;height:32px;color:#6b7280;transition:color .3s ease}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-text{font-size:14px!important;font-weight:400!important;color:#6a6b6d;margin:0}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-subtext{font-size:14px;color:#6b7280;margin:0}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-subtext .click-text{color:#3b82f6;font-weight:600;cursor:pointer}.file-uploader-wrapper .file-uploader-dropzone:hover:not(.disabled) .upload-icon{color:#3b82f6}.file-uploader-wrapper .uploaded-files .uploaded-title{font-size:14px;font-weight:600;color:#1f2937;margin:0 0 12px}.file-uploader-wrapper .uploaded-files .files-list{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}.file-uploader-wrapper .uploaded-files .file-item{display:flex;align-items:center;justify-content:space-between;padding:4px 12px;border:1px solid #B7DCFF;border-radius:6px;background:#0084ff1a;transition:all .2s ease}.file-uploader-wrapper .uploaded-files .file-item .file-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-icon{width:24px;height:24px;color:#6b7280;flex-shrink:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details{display:flex;flex-direction:column;gap:4px;min-width:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details .file-name{font-size:14px!important;font-weight:400!important;color:#1b1f22;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details .file-size{font-size:14px!important;color:#9ca3af;margin:0}.file-uploader-wrapper .uploaded-files .file-item .file-actions{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0}.file-uploader-wrapper .uploaded-files .file-item .file-actions .success-tick{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#10b981;animation:scaleIn .3s ease-out}.file-uploader-wrapper .uploaded-files .file-item .file-actions .success-tick svg{width:20px;height:20px;stroke-width:3}.file-uploader-wrapper .uploaded-files .file-item .remove-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background-color:transparent;cursor:pointer;border-radius:4px;transition:all .2s ease;flex-shrink:0;border:none;box-shadow:none}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:focus-visible{border:none;box-shadow:none;outline:none}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:hover:not(:disabled){box-shadow:0 0 0 1px #b7dcff;border:1px solid #0084FF}.file-uploader-wrapper .uploaded-files .file-item .remove-btn span{width:16px;height:16px}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:disabled{cursor:not-allowed;opacity:.5}.file-uploader-wrapper .error-message{margin-top:8px;padding:8px 12px;background-color:#fef2f2;border-left:3px solid #ef4444;border-radius:4px}.file-uploader-wrapper .error-message p{font-size:13px;color:#dc2626;margin:0;font-weight:500}.ms-file-uploader-skeleton.button{width:150px;height:40px}.ms-file-uploader-skeleton.dragdrop{width:500px;height:215px}.ms-file-uploader-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes scaleIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i3.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "component", type: MsSpinner, selector: "ms-spinner", inputs: ["color", "size", "text"], outputs: ["htmlChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsFileUploader, isStandalone: true, selector: "ms-file-uploader", inputs: { label: "label", required: "required", readonly: "readonly", disabled: "disabled", accept: "accept", multiple: "multiple", maxFileSize: "maxFileSize", variant: "variant", skeleton: "skeleton" }, outputs: { uploadedFilesChange: "uploadedFilesChange" }, viewQueries: [{ propertyName: "fileInputButton", first: true, predicate: ["fileInputButton"], descendants: true }, { propertyName: "fileInputDragDrop", first: true, predicate: ["fileInputDragDrop"], descendants: true }], ngImport: i0, template: "@if (skeleton) {\n    <div class=\"ms-file-uploader-skeleton\" [class]=\"variant\"></div>\n} @else {\n<div class=\"file-uploader-wrapper\">\n  <!-- <div *ngIf=\"label\" class=\"file-uploader-label\">\n    <label>{{ label }} <span *ngIf=\"required\" class=\"required\">*</span></label>\n  </div> -->\n\n  <!-- ===================== BUTTON VARIANT ===================== -->\n  <ng-container *ngIf=\"variant === 'button'\">\n    <!-- Instructions -->\n    <div class=\"file-uploader-instructions button-variant\">\n      <p class=\"ms-mb-2\">{{ label }}</p>\n      <p class=\"instruction-text\">\n        <span>Max file size:</span> {{ maxFileSize }} | \n        <span>Accepted formats:</span> {{ getAcceptFormats() }}\n      </p>\n    </div>\n\n    <!-- Button Upload Area -->\n    <div class=\"button-upload-area\">\n      <button \n        type=\"button\"\n        class=\"upload-button\"\n        (click)=\"triggerFileInput()\"\n        [disabled]=\"disabled\">\n        <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/upload.svg'\"></span>\n        <span>Upload file</span>\n      </button>\n      \n      <!-- <p class=\"button-hint\">or drag and drop</p> -->\n    </div>\n\n    <!-- Hidden File Input -->\n    <input \n      #fileInputButton\n      type=\"file\" \n      [accept]=\"accept\"\n      [multiple]=\"multiple\"\n      [disabled]=\"disabled\"\n      (change)=\"onFileInputChange($event)\"\n      style=\"display: none;\">\n  </ng-container>\n\n  <!-- ===================== DRAG & DROP VARIANT ===================== -->\n  <ng-container *ngIf=\"variant === 'dragdrop'\">\n    <!-- Instructions outside the border -->\n    <div class=\"file-uploader-instructions dragdrop-variant\">\n      <p class=\"instruction-text\">\n        <span>Max file size:</span> {{ maxFileSize }} | \n        <span>Accepted formats:</span> {{ getAcceptFormats() }}\n      </p>\n    </div>\n\n    <!-- Drag and Drop Area with Dotted Border -->\n    <div \n      class=\"file-uploader-dropzone\"\n      [class.dragover]=\"isDragOver\"\n      [class.disabled]=\"disabled\"\n      [class.error]=\"showError || invalidFileError\"\n      [class.focused]=\"isFocused\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDropFiles($event)\"\n      (click)=\"triggerFileInput()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      tabindex=\"0\">\n      \n      <!-- Upload Icon and Text -->\n      <div class=\"dropzone-content\">\n        <span class=\"upload-icon\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/file-plus.svg'\"></span>\n        <p class=\"upload-text\">Drag and drop your files here</p>\n        <p class=\"upload-subtext\">or <span class=\"click-text\">click to browse</span></p>\n      </div>\n\n      <!-- Hidden File Input -->\n      <input \n        #fileInputDragDrop\n        type=\"file\" \n        [accept]=\"accept\"\n        [multiple]=\"multiple\"\n        [disabled]=\"disabled\"\n        (change)=\"onFileInputChange($event)\"\n        style=\"display: none;\">\n    </div>\n  </ng-container>\n\n  <!-- Error Message -->\n  <div *ngIf=\"showError\" class=\"error-message\">\n    <p>This field is required. Please select at least one file.</p>\n  </div>\n\n  <!-- Uploaded Files List (Shared for both variants) -->\n  <div *ngIf=\"uploadedFiles.length > 0\" class=\"uploaded-files\">\n    <div class=\"files-list\">\n      <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"file-item\">\n        <div class=\"file-info\">\n          <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/File-pdf.svg'\"></span>\n          <div class=\"file-details\">\n            <p class=\"file-name\" [title]=\"file.name\">{{ file.name }}</p>\n            <p class=\"file-size\">{{ file.size }}</p>\n          </div>\n        </div>\n\n        <div class=\"file-actions\">\n          <!-- Loader State -->\n          <div *ngIf=\"file.isLoading\" class=\"loader\">\n            <ms-spinner [color]=\"'primary'\" [size]=\"'sm'\"></ms-spinner>\n          </div>\n\n          <!-- Success Tick State -->\n          <div *ngIf=\"file.isSuccess && !file.isLoading\" class=\"success-tick\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <polyline points=\"20 6 9 17 4 12\"></polyline>\n            </svg>\n          </div>\n\n          <!-- Remove Button State -->\n          <button \n            *ngIf=\"!file.isLoading && !file.isSuccess\"\n            type=\"button\"\n            class=\"remove-btn\"\n            (click)=\"removeFile(i)\"\n            [disabled]=\"disabled\">\n            <span class=\"d-flex align-items-center\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/x.svg'\"></span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}", styles: [".file-uploader-wrapper{display:flex;flex-direction:column;gap:10px;width:100%}.file-uploader-wrapper .file-uploader-label{display:flex;align-items:center;gap:4px;margin-bottom:8px}.file-uploader-wrapper .file-uploader-label label{font-size:14px;font-weight:600;color:#1f2937;margin:0}.file-uploader-wrapper .file-uploader-label .required{color:#ef4444;font-weight:700}.file-uploader-wrapper .file-uploader-instructions{padding:8px 0;border-radius:4px}.file-uploader-wrapper .file-uploader-instructions .instruction-text{font-size:13px!important;color:#6a6b6d;margin:0;line-height:1.5;font-weight:400}.file-uploader-wrapper .file-uploader-instructions .instruction-text span{font-size:13px!important}.file-uploader-wrapper .file-uploader-instructions .instruction-text strong{color:#374151;font-weight:600}.file-uploader-wrapper .file-uploader-instructions.button-variant{padding:12px 0!important}.file-uploader-wrapper .button-upload-area{display:flex;flex-direction:column;align-items:flex-start;gap:10px;border-radius:8px}.file-uploader-wrapper .button-upload-area .upload-button{display:flex;align-items:center;gap:8px;padding:10px 20px;background-color:#0084ff;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.file-uploader-wrapper .button-upload-area .upload-button svg{width:20px;height:20px}.file-uploader-wrapper .button-upload-area .upload-button:active:not(:disabled){transform:scale(.98)}.file-uploader-wrapper .button-upload-area .upload-button:disabled{background-color:#d1d5db;cursor:not-allowed;opacity:.6}.file-uploader-wrapper .button-upload-area .upload-button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.file-uploader-wrapper .button-upload-area .button-hint{font-size:13px;color:#6b7280;margin:0}.file-uploader-wrapper .file-uploader-dropzone{position:relative;padding:20px;border:3px dotted #CCCCCC;border-radius:8px;background-color:#fff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;min-height:170px}.file-uploader-wrapper .file-uploader-dropzone:hover:not(.disabled){border-color:#0084ff}.file-uploader-wrapper .file-uploader-dropzone.dragover:not(.disabled){border-color:#3b82f6;background-color:#eff6ff;transform:scale(1.02)}.file-uploader-wrapper .file-uploader-dropzone.disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled){border-color:#ef4444;background-color:#fef2f2}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled):hover{border-color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled) .dropzone-content .upload-icon{color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled) .dropzone-content .upload-text{color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled){border-color:#0084ff;outline-offset:2px}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error{border-color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error .dropzone-content .upload-icon{color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error .dropzone-content .upload-text{color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content{text-align:center;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:10px}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-icon{width:32px;height:32px;color:#6b7280;transition:color .3s ease}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-text{font-size:14px!important;font-weight:400!important;color:#6a6b6d;margin:0}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-subtext{font-size:14px;color:#6b7280;margin:0}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-subtext .click-text{color:#3b82f6;font-weight:600;cursor:pointer}.file-uploader-wrapper .file-uploader-dropzone:hover:not(.disabled) .upload-icon{color:#3b82f6}.file-uploader-wrapper .uploaded-files .uploaded-title{font-size:14px;font-weight:600;color:#1f2937;margin:0 0 12px}.file-uploader-wrapper .uploaded-files .files-list{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}.file-uploader-wrapper .uploaded-files .file-item{display:flex;align-items:center;justify-content:space-between;padding:4px 12px;border:1px solid #B7DCFF;border-radius:6px;background:#0084ff1a;transition:all .2s ease}.file-uploader-wrapper .uploaded-files .file-item .file-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-icon{width:24px;height:24px;color:#6b7280;flex-shrink:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details{display:flex;flex-direction:column;gap:4px;min-width:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details .file-name{font-size:14px!important;font-weight:400!important;color:#1b1f22;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details .file-size{font-size:14px!important;color:#9ca3af;margin:0}.file-uploader-wrapper .uploaded-files .file-item .file-actions{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0}.file-uploader-wrapper .uploaded-files .file-item .file-actions .success-tick{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#10b981;animation:scaleIn .3s ease-out}.file-uploader-wrapper .uploaded-files .file-item .file-actions .success-tick svg{width:20px;height:20px;stroke-width:3}.file-uploader-wrapper .uploaded-files .file-item .remove-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background-color:transparent;cursor:pointer;border-radius:4px;transition:all .2s ease;flex-shrink:0;border:none;box-shadow:none}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:focus-visible{border:none;box-shadow:none;outline:none}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:hover:not(:disabled){box-shadow:0 0 0 1px #b7dcff;border:1px solid #0084FF}.file-uploader-wrapper .uploaded-files .file-item .remove-btn span{width:16px;height:16px}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:disabled{cursor:not-allowed;opacity:.5}.file-uploader-wrapper .error-message{margin-top:8px;padding:8px 12px;background-color:#fef2f2;border-left:3px solid #ef4444;border-radius:4px}.file-uploader-wrapper .error-message p{font-size:13px;color:#dc2626;margin:0;font-weight:500}.ms-file-uploader-skeleton.button{width:150px;height:40px}.ms-file-uploader-skeleton.dragdrop{width:500px;height:215px}.ms-file-uploader-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes scaleIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i2$1.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "component", type: MsSpinner, selector: "ms-spinner", inputs: ["color", "size", "text"], outputs: ["htmlChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsFileUploader, decorators: [{
             type: Component,