ms-design-system 0.0.49 → 0.0.51

package/fesm2022/ms-design-system.mjs

@@ -1,7 +1,7 @@
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, Component, EventEmitter, ContentChild, Output, Injectable, signal, HostListener, ViewChild, forwardRef, booleanAttribute, Directive, NgModule, makeEnvironmentProviders, createComponent } from '@angular/core';
+import { Input, Component, EventEmitter, Output, Injectable, signal, HostListener, ViewChild, forwardRef, booleanAttribute, ContentChild, 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';
@@ -120,11 +120,11 @@ class MsIcon {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsIcon, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsIcon, isStandalone: true, selector: "ms-icon", inputs: { name: "name", color: "color", size: "size" }, usesOnChanges: true, ngImport: i0, template: "<span [innerHTML]=\"svg\" [class]=\"strokeWidth\" [ngStyle]=\"{'width.px': width, 'height.px': height, 'display':'inline-block'}\" [ngClass]=\"color\"></span>", styles: ["span{display:inline-block;width:24px;height:24px}.ms-icon-gray{color:#6a6b6d!important}.ms-icon-black{color:#1b1f22!important}.ms-icon-red{color:#da3e37!important}.ms-icon-blue{color:#0084ff!important}.ms-icon-white{color:#fff!important}.stroke-sm ::ng-deep path{stroke-width:1.25!important}.stroke-md ::ng-deep path{stroke-width:1.5!important}.stroke-lg sv::ng-deep path{stroke-width:1.75!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsIcon, isStandalone: true, selector: "ms-icon", inputs: { name: "name", color: "color", size: "size" }, usesOnChanges: true, ngImport: i0, template: "<span [innerHTML]=\"svg\" [class]=\"strokeWidth\" [ngStyle]=\"{'width.px': width, 'height.px': height, 'display':'inline-block'}\" [ngClass]=\"color\"></span>", styles: ["span{display:inline-block;width:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsIcon, decorators: [{
             type: Component,
-            args: [{ selector: 'ms-icon', imports: [CommonModule, FormsModule], template: "<span [innerHTML]=\"svg\" [class]=\"strokeWidth\" [ngStyle]=\"{'width.px': width, 'height.px': height, 'display':'inline-block'}\" [ngClass]=\"color\"></span>", styles: ["span{display:inline-block;width:24px;height:24px}.ms-icon-gray{color:#6a6b6d!important}.ms-icon-black{color:#1b1f22!important}.ms-icon-red{color:#da3e37!important}.ms-icon-blue{color:#0084ff!important}.ms-icon-white{color:#fff!important}.stroke-sm ::ng-deep path{stroke-width:1.25!important}.stroke-md ::ng-deep path{stroke-width:1.5!important}.stroke-lg sv::ng-deep path{stroke-width:1.75!important}\n"] }]
+            args: [{ selector: 'ms-icon', imports: [CommonModule, FormsModule], template: "<span [innerHTML]=\"svg\" [class]=\"strokeWidth\" [ngStyle]=\"{'width.px': width, 'height.px': height, 'display':'inline-block'}\" [ngClass]=\"color\"></span>", styles: ["span{display:inline-block;width:24px;height:24px}\n"] }]
         }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { name: [{
                 type: Input
             }], color: [{
@@ -138,137 +138,87 @@ class MsButton {
     type = 'button';
     variant = '';
     size = '';
-    // @Input() radiussize: string = '';
     block = false;
     disabled = false;
     isBorder = false;
     textSrc = '';
-    // Icon support
-    icon = null; // e.g. 'fa fa-plus' or 'bi bi-search'
-    iconPosition = 'prefix'; // 'prefix' or 'suffix'
-    iconOnly = false; // icon-only mode (no text)
+    icon = null;
+    iconPosition = 'prefix';
+    iconOnly = false;
     class = '';
     buttonType = '';
     htmlChange = new EventEmitter();
     click = new EventEmitter();
-    projectedContent;
     radiussize = 'md';
-    /** Dynamic class computation */
+    constructor(el) {
+        this.el = el;
+    }
+    /* ---------------- CLASSES ---------------- */
     get classes() {
-        const radiusClass = this.radiussize !== 'none' ? `ms-rounded-${this.radiussize}` : '';
-        const variant = this.variant !== 'default' ? `ms-btn-${this.variant}` : '';
-        const link = this.variant !== 'link' ? `ms-btn` : '';
-        const size = this.size !== '' ? `ms-btn-${this.size}` : '';
-        const isBorder = this.isBorder ? `ms-border` : '';
         return [
-            link,
-            variant,
-            size,
-            radiusClass,
+            this.variant !== 'link' ? 'ms-btn' : '',
+            this.variant && this.variant !== 'default' ? `ms-btn-${this.variant}` : '',
+            this.size ? `ms-btn-${this.size}` : 'ms-btn-md',
+            this.radiussize !== 'none' ? `ms-rounded-${this.radiussize}` : '',
             this.block ? 'block' : '',
-            isBorder,
+            this.isBorder ? 'ms-border' : '',
             this.iconOnly ? 'icon-only' : ''
-        ]
-            .filter(Boolean)
-            .join(' ')
-            .trim();
+        ].filter(Boolean).join(' ');
     }
     get userClass() {
-        console.log(this.class, 'class');
-        return this.class;
-    }
-    /** Generate HTML string */
-    getHtmlString() {
-        const disabledAttr = this.disabled ? ' disabled' : '';
-        const iconHtml = this.icon
-            ? `<i class="${this.icon}"></i>`
-            : '';
-        let innerHtml = '';
-        if (this.iconOnly) {
-            // Icon-only → just icon, centered
-            innerHtml = `<ms-icon [name]="'${this.icon}'" [color]="'${this.getColor()}'"></ms-icon>`;
-        }
-        else if (this.icon && this.iconPosition === 'prefix') {
-            // Prefix → icon before text
-            innerHtml = `<ms-icon [name]="'${this.icon}'" [color]="'${this.getColor()}'" class="ms-me-1"></ms-icon> ${this.textSrc}`;
-        }
-        else if (this.icon && this.iconPosition === 'suffix') {
-            // Suffix → icon after text
-            innerHtml = `${this.textSrc} <ms-icon [name]="'${this.icon}'" [color]="'${this.getColor()}'" class="ms-ms-1"></ms-icon>`;
-        }
-        else {
-            // Text only
-            innerHtml = this.textSrc;
-        }
-        return `<ms-button type="${this.type}" class="${this.classes}"${disabledAttr}>${innerHtml}</ms-button>`;
-    }
-    constructor(el) {
-        this.el = el;
-    }
-    ngOnChanges(changes) {
-        this.htmlChange.emit(this.getHtmlString());
-        //  if(this.radiussize === 'none' || this.radiussize === 'xs' || this.radiussize === 'default'){
-        //   this.radiussize = ''
-        // }
-        // if(this.variant === 'default'){
-        //   this.variant = ''
-        // }else{
-        //   this.variant = `-${this.variant}`
-        // }
+        return this.class || '';
     }
+    /* ---------------- LIFECYCLE ---------------- */
     ngOnInit() {
-        this.htmlChange.emit(this.getHtmlString());
-        // if(this.radiussize === 'none' || this.radiussize === 'xs' || this.radiussize === 'default'){
-        //   this.radiussize = ''
-        // }
-        // if(this.variant === 'default'){
-        //   this.variant = ''
-        // }else{
-        //   this.variant = `-${this.variant}`
-        // }
+        this.emitHtml();
+        this.setProjectedText();
     }
-    ngAfterContentInit() {
-        const inner = this.el.nativeElement.innerText.trim();
-        if (inner && !this.textSrc) {
-            this.textSrc = inner;
-        }
-        //  if(this.radiussize === 'none' || this.radiussize === 'xs' || this.radiussize === 'default'){
-        //   this.radiussize = ''
-        // }
-        // if(this.variant === 'default'){
-        //   this.variant = ''
-        // }else{
-        //   this.variant = `-${this.variant}`
-        // }
+    ngOnChanges(changes) {
+        this.emitHtml();
     }
+    /* ---------------- METHODS ---------------- */
     onClick(event) {
-        if (!this.disabled) {
-            this.click.emit(event);
-        }
-        else {
+        if (this.disabled) {
             event.preventDefault();
+            return;
         }
+        this.click.emit(event);
     }
     getColor() {
-        if (this.variant === 'label') {
-            return 'ms-icon-black';
+        return ['label', 'default', 'light'].includes(this.variant)
+            ? 'ms-icon-black'
+            : 'ms-icon-white';
+    }
+    setProjectedText() {
+        const inner = this.el.nativeElement.innerText?.trim();
+        if (inner && !this.textSrc) {
+            this.textSrc = inner;
         }
-        else if (this.variant === 'default') {
-            return 'ms-icon-black';
+    }
+    emitHtml() {
+        this.htmlChange.emit(this.getHtmlString());
+    }
+    /* ---------------- HTML STRING ---------------- */
+    getHtmlString() {
+        const disabled = this.disabled ? ' disabled' : '';
+        let content = this.textSrc;
+        if (this.iconOnly && this.icon) {
+            content = `<ms-icon name="${this.icon}"></ms-icon>`;
         }
-        else if (this.variant === 'light') {
-            return 'ms-icon-black';
+        else if (this.icon && this.iconPosition === 'prefix') {
+            content = `<ms-icon name="${this.icon}"></ms-icon> ${this.textSrc}`;
         }
-        {
-            return 'ms-icon-white';
+        else if (this.icon && this.iconPosition === 'suffix') {
+            content = `${this.textSrc} <ms-icon name="${this.icon}"></ms-icon>`;
         }
+        return `<ms-button type="${this.type}" class="${this.classes}"${disabled}>${content}</ms-button>`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsButton, isStandalone: true, selector: "ms-button", inputs: { type: "type", variant: "variant", size: "size", block: "block", disabled: "disabled", isBorder: "isBorder", textSrc: "textSrc", icon: "icon", iconPosition: "iconPosition", iconOnly: "iconOnly", class: "class", buttonType: "buttonType" }, outputs: { htmlChange: "htmlChange", click: "click" }, queries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (buttonType ==='Playground') {\n  <a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\"  (click)=\"onClick($event)\">\n\n  @if (icon && iconPosition === 'prefix' && variant != 'link') {\n     <ms-icon [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n    }\n    @if (!iconOnly && !textSrc) {\n      <span><ng-content></ng-content></span>\n    }\n    @if (!iconOnly && textSrc) {\n      <span [ngClass]=\"{'ms-mg-lif': icon && iconPosition === 'prefix', 'ms-mg-rig': icon && iconPosition === 'suffix'}\">{{ textSrc }}</span>\n    }\n    @if (icon && iconPosition === 'suffix' && variant != 'link') {\n    <ms-icon [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n  }\n</a>\n}@else {\n  <ng-content [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\"  (click)=\"onClick($event)\" class=\"sdfsd\">\n    <!-- @if (icon && iconPosition === 'prefix' && variant != 'link') {\n        <ms-icon [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n  }\n  @if (!iconOnly && !textSrc) {\n    <span><ng-content></ng-content></span>\n  }\n  @if (!iconOnly && textSrc) {\n    <span class=\"ms-inline-btn\">\n      {{ textSrc }}\n    </span>\n  }\n  @if (icon && iconPosition === 'suffix' && variant != 'link') {\n    <ms-icon [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n  } -->\n</ng-content>\n}", styles: ["ms-icon{display:flex}.ms-mg-lif{margin-left:6px!important}.ms-mg-rig{margin-right:6px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsButton, isStandalone: true, selector: "ms-button", inputs: { type: "type", variant: "variant", size: "size", block: "block", disabled: "disabled", isBorder: "isBorder", textSrc: "textSrc", icon: "icon", iconPosition: "iconPosition", iconOnly: "iconOnly", class: "class", buttonType: "buttonType" }, outputs: { htmlChange: "htmlChange", click: "click" }, usesOnChanges: true, ngImport: i0, template: "\n<a *ngIf=\"buttonType === 'Playground'; else projected\"\n   class=\"ms-btn-inner\"\n   [attr.type]=\"type\"\n   [class]=\"classes + ' ' + userClass\"\n   [class.disabled]=\"disabled\"\n   (click)=\"onClick($event)\">\n\n  <ng-container *ngIf=\"icon && iconPosition === 'prefix' && variant !== 'link'\">\n    <ms-icon class=\"ms-btn-icon\" [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n  </ng-container>\n\n  <ng-container *ngIf=\"!iconOnly\">\n    <span class=\"ms-btn-text\" *ngIf=\"textSrc\">{{ textSrc }}</span>\n    <span class=\"ms-btn-text\" *ngIf=\"!textSrc\"><ng-content></ng-content></span>\n  </ng-container>\n\n  <ng-container *ngIf=\"icon && iconPosition === 'suffix' && variant !== 'link'\">\n    <ms-icon class=\"ms-btn-icon\" [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n  </ng-container>\n\n</a>\n\n\n<ng-template #projected>\n  <ng-content [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\"  (click)=\"onClick($event)\"></ng-content>\n</ng-template>\n", styles: ["ms-icon{display:flex}.ms-mg-lif{margin-left:6px!important}.ms-mg-rig{margin-right:6px!important}.ms-btn-inner{display:inline-flex;align-items:center;justify-content:center;gap:6px}.ms-btn-icon{display:inline-flex;align-items:center}.ms-btn-text{display:inline-block;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsButton, decorators: [{
             type: Component,
-            args: [{ selector: 'ms-button', imports: [CommonModule, MsIcon], template: "@if (buttonType ==='Playground') {\n  <a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\"  (click)=\"onClick($event)\">\n\n  @if (icon && iconPosition === 'prefix' && variant != 'link') {\n     <ms-icon [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n    }\n    @if (!iconOnly && !textSrc) {\n      <span><ng-content></ng-content></span>\n    }\n    @if (!iconOnly && textSrc) {\n      <span [ngClass]=\"{'ms-mg-lif': icon && iconPosition === 'prefix', 'ms-mg-rig': icon && iconPosition === 'suffix'}\">{{ textSrc }}</span>\n    }\n    @if (icon && iconPosition === 'suffix' && variant != 'link') {\n    <ms-icon [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n  }\n</a>\n}@else {\n  <ng-content [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\"  (click)=\"onClick($event)\" class=\"sdfsd\">\n    <!-- @if (icon && iconPosition === 'prefix' && variant != 'link') {\n        <ms-icon [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n  }\n  @if (!iconOnly && !textSrc) {\n    <span><ng-content></ng-content></span>\n  }\n  @if (!iconOnly && textSrc) {\n    <span class=\"ms-inline-btn\">\n      {{ textSrc }}\n    </span>\n  }\n  @if (icon && iconPosition === 'suffix' && variant != 'link') {\n    <ms-icon [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n  } -->\n</ng-content>\n}", styles: ["ms-icon{display:flex}.ms-mg-lif{margin-left:6px!important}.ms-mg-rig{margin-right:6px!important}\n"] }]
+            args: [{ selector: 'ms-button', standalone: true, imports: [CommonModule, MsIcon], template: "\n<a *ngIf=\"buttonType === 'Playground'; else projected\"\n   class=\"ms-btn-inner\"\n   [attr.type]=\"type\"\n   [class]=\"classes + ' ' + userClass\"\n   [class.disabled]=\"disabled\"\n   (click)=\"onClick($event)\">\n\n  <ng-container *ngIf=\"icon && iconPosition === 'prefix' && variant !== 'link'\">\n    <ms-icon class=\"ms-btn-icon\" [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n  </ng-container>\n\n  <ng-container *ngIf=\"!iconOnly\">\n    <span class=\"ms-btn-text\" *ngIf=\"textSrc\">{{ textSrc }}</span>\n    <span class=\"ms-btn-text\" *ngIf=\"!textSrc\"><ng-content></ng-content></span>\n  </ng-container>\n\n  <ng-container *ngIf=\"icon && iconPosition === 'suffix' && variant !== 'link'\">\n    <ms-icon class=\"ms-btn-icon\" [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n  </ng-container>\n\n</a>\n\n\n<ng-template #projected>\n  <ng-content [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\"  (click)=\"onClick($event)\"></ng-content>\n</ng-template>\n", styles: ["ms-icon{display:flex}.ms-mg-lif{margin-left:6px!important}.ms-mg-rig{margin-right:6px!important}.ms-btn-inner{display:inline-flex;align-items:center;justify-content:center;gap:6px}.ms-btn-icon{display:inline-flex;align-items:center}.ms-btn-text{display:inline-block;line-height:1}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { type: [{
                 type: Input
             }], variant: [{
@@ -297,9 +247,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                 type: Output
             }], click: [{
                 type: Output
-            }], projectedContent: [{
-                type: ContentChild,
-                args: ['projectedContent', { static: false }]
             }] } });
 
 class MsSpinner {
@@ -723,11 +670,11 @@ class MsDropdown {
         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 }, { 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" }] });
+    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-dropdown-selection-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-dropdown-selection-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: [""], 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       <!-- || (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"] }]
+            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-dropdown-selection-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-dropdown-selection-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>" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: MsDropdownService }], propDecorators: { text: [{
                 type: Input
             }], isDisabled: [{
@@ -884,7 +831,7 @@ class MsCheckbox {
                 useExisting: forwardRef(() => MsCheckbox),
                 multi: true
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<label\n  class=\"ms-checkbox\"\n  [class.disabled]=\"disabled\"\n  [class.invalid]=\"invalid\"\n  [class.checkbox-skeleton]=\"skeleton\"\n>\n  @if (skeleton) {\n    <div class=\"ms-checkbox-skeleton\"></div>\n  } @else {\n\n    <input style=\"width: 16px;height: 16px;\"\n      type=\"checkbox\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled\"\n      (change)=\"toggle()\"\n      (blur)=\"markTouched()\"\n    />\n\n    <span class=\"ms-checkbox-box\">\n      @if (indeterminate) {\n        <span class=\"ms-indeterminate\"></span>\n      } @else if (checked) {\n        <span class=\"ms-checkmark\">&#10003;</span>\n      }\n    </span>\n\n    @if (label) {\n      <span class=\"ms-label\">{{ label }}</span>\n    }\n  }\n</label>\n\n", styles: ["@charset \"UTF-8\";.ms-content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.ms-content.collapsed{width:1590px!important}@media(min-width:992px){.ms-content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.ms-content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.ms-content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.ms-content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2)}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}.ms-h-0{height:0%!important}.ms-h-5{height:5%!important}.ms-h-10{height:10%!important}.ms-h-15{height:15%!important}.ms-h-20{height:20%!important}.ms-h-25{height:25%!important}.ms-h-30{height:30%!important}.ms-h-35{height:35%!important}.ms-h-40{height:40%!important}.ms-h-45{height:45%!important}.ms-h-50{height:50%!important}.ms-h-55{height:55%!important}.ms-h-60{height:60%!important}.ms-h-65{height:65%!important}.ms-h-70{height:70%!important}.ms-h-75{height:75%!important}.ms-h-80{height:80%!important}.ms-h-85{height:85%!important}.ms-h-90{height:90%!important}.ms-h-95{height:95%!important}.ms-h-100{height:100%!important}.ms-w-auto{width:auto!important}.ms-w-0{width:0%!important}.ms-w-5{width:5%!important}.ms-w-10{width:10%!important}.ms-w-15{width:15%!important}.ms-w-20{width:20%!important}.ms-w-25{width:25%!important}.ms-w-30{width:30%!important}.ms-w-35{width:35%!important}.ms-w-40{width:40%!important}.ms-w-45{width:45%!important}.ms-w-50{width:50%!important}.ms-w-55{width:55%!important}.ms-w-60{width:60%!important}.ms-w-65{width:65%!important}.ms-w-70{width:70%!important}.ms-w-75{width:75%!important}.ms-w-80{width:80%!important}.ms-w-85{width:85%!important}.ms-w-90{width:90%!important}.ms-w-95{width:95%!important}.ms-w-100{width:100%!important}.ms-p-0{margin:0!important}.ms-pt-0{margin-top:0!important}.ms-pb-0{margin-bottom:0!important}.ms-ps-0{margin-left:0!important}.ms-pe-0{margin-right:0!important}.ms-px-0{margin-left:0!important;margin-right:0!important}.ms-py-0{margin-top:0!important;margin-bottom:0!important}.ms-p-1{margin:.25rem!important}.ms-pt-1{margin-top:.25rem!important}.ms-pb-1{margin-bottom:.25rem!important}.ms-ps-1{margin-left:.25rem!important}.ms-pe-1{margin-right:.25rem!important}.ms-px-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-py-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-p-2{margin:.5rem!important}.ms-pt-2{margin-top:.5rem!important}.ms-pb-2{margin-bottom:.5rem!important}.ms-ps-2{margin-left:.5rem!important}.ms-pe-2{margin-right:.5rem!important}.ms-px-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-py-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-p-3{margin:1rem!important}.ms-pt-3{margin-top:1rem!important}.ms-pb-3{margin-bottom:1rem!important}.ms-ps-3{margin-left:1rem!important}.ms-pe-3{margin-right:1rem!important}.ms-px-3{margin-left:1rem!important;margin-right:1rem!important}.ms-py-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-p-4{margin:1.5rem!important}.ms-pt-4{margin-top:1.5rem!important}.ms-pb-4{margin-bottom:1.5rem!important}.ms-ps-4{margin-left:1.5rem!important}.ms-pe-4{margin-right:1.5rem!important}.ms-px-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-py-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-p-5{margin:3rem!important}.ms-pt-5{margin-top:3rem!important}.ms-pb-5{margin-bottom:3rem!important}.ms-ps-5{margin-left:3rem!important}.ms-pe-5{margin-right:3rem!important}.ms-px-5{margin-left:3rem!important;margin-right:3rem!important}.ms-py-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-p-6{margin:3.5rem!important}.ms-pt-6{margin-top:3.5rem!important}.ms-pb-6{margin-bottom:3.5rem!important}.ms-ps-6{margin-left:3.5rem!important}.ms-pe-6{margin-right:3.5rem!important}.ms-px-6{margin-left:3.5rem!important;margin-right:3.5rem!important}.ms-py-6{margin-top:3.5rem!important;margin-bottom:3.5rem!important}.ms-p-7{margin:4rem!important}.ms-pt-7{margin-top:4rem!important}.ms-pb-7{margin-bottom:4rem!important}.ms-ps-7{margin-left:4rem!important}.ms-pe-7{margin-right:4rem!important}.ms-px-7{margin-left:4rem!important;margin-right:4rem!important}.ms-py-7{margin-top:4rem!important;margin-bottom:4rem!important}.ms-p-8{margin:4.5rem!important}.ms-pt-8{margin-top:4.5rem!important}.ms-pb-8{margin-bottom:4.5rem!important}.ms-ps-8{margin-left:4.5rem!important}.ms-pe-8{margin-right:4.5rem!important}.ms-px-8{margin-left:4.5rem!important;margin-right:4.5rem!important}.ms-py-8{margin-top:4.5rem!important;margin-bottom:4.5rem!important}.ms-p-9{margin:5rem!important}.ms-pt-9{margin-top:5rem!important}.ms-pb-9{margin-bottom:5rem!important}.ms-ps-9{margin-left:5rem!important}.ms-pe-9{margin-right:5rem!important}.ms-px-9{margin-left:5rem!important;margin-right:5rem!important}.ms-py-9{margin-top:5rem!important;margin-bottom:5rem!important}.ms-p-10{margin:5.5rem!important}.ms-pt-10{margin-top:5.5rem!important}.ms-pb-10{margin-bottom:5.5rem!important}.ms-ps-10{margin-left:5.5rem!important}.ms-pe-10{margin-right:5.5rem!important}.ms-px-10{margin-left:5.5rem!important;margin-right:5.5rem!important}.ms-py-10{margin-top:5.5rem!important;margin-bottom:5.5rem!important}.ms-p-11{margin:6rem!important}.ms-pt-11{margin-top:6rem!important}.ms-pb-11{margin-bottom:6rem!important}.ms-ps-11{margin-left:6rem!important}.ms-pe-11{margin-right:6rem!important}.ms-px-11{margin-left:6rem!important;margin-right:6rem!important}.ms-py-11{margin-top:6rem!important;margin-bottom:6rem!important}.ms-p-12{margin:6.5rem!important}.ms-pt-12{margin-top:6.5rem!important}.ms-pb-12{margin-bottom:6.5rem!important}.ms-ps-12{margin-left:6.5rem!important}.ms-pe-12{margin-right:6.5rem!important}.ms-px-12{margin-left:6.5rem!important;margin-right:6.5rem!important}.ms-py-12{margin-top:6.5rem!important;margin-bottom:6.5rem!important}.ms-p-13{margin:7rem!important}.ms-pt-13{margin-top:7rem!important}.ms-pb-13{margin-bottom:7rem!important}.ms-ps-13{margin-left:7rem!important}.ms-pe-13{margin-right:7rem!important}.ms-px-13{margin-left:7rem!important;margin-right:7rem!important}.ms-py-13{margin-top:7rem!important;margin-bottom:7rem!important}.ms-p-14{margin:7.5rem!important}.ms-pt-14{margin-top:7.5rem!important}.ms-pb-14{margin-bottom:7.5rem!important}.ms-ps-14{margin-left:7.5rem!important}.ms-pe-14{margin-right:7.5rem!important}.ms-px-14{margin-left:7.5rem!important;margin-right:7.5rem!important}.ms-py-14{margin-top:7.5rem!important;margin-bottom:7.5rem!important}.ms-p-15{margin:8rem!important}.ms-pt-15{margin-top:8rem!important}.ms-pb-15{margin-bottom:8rem!important}.ms-ps-15{margin-left:8rem!important}.ms-pe-15{margin-right:8rem!important}.ms-px-15{margin-left:8rem!important;margin-right:8rem!important}.ms-py-15{margin-top:8rem!important;margin-bottom:8rem!important}.ms-p-16{margin:8.5rem!important}.ms-pt-16{margin-top:8.5rem!important}.ms-pb-16{margin-bottom:8.5rem!important}.ms-ps-16{margin-left:8.5rem!important}.ms-pe-16{margin-right:8.5rem!important}.ms-px-16{margin-left:8.5rem!important;margin-right:8.5rem!important}.ms-py-16{margin-top:8.5rem!important;margin-bottom:8.5rem!important}.ms-p-17{margin:9rem!important}.ms-pt-17{margin-top:9rem!important}.ms-pb-17{margin-bottom:9rem!important}.ms-ps-17{margin-left:9rem!important}.ms-pe-17{margin-right:9rem!important}.ms-px-17{margin-left:9rem!important;margin-right:9rem!important}.ms-py-17{margin-top:9rem!important;margin-bottom:9rem!important}.ms-p-18{margin:9.5rem!important}.ms-pt-18{margin-top:9.5rem!important}.ms-pb-18{margin-bottom:9.5rem!important}.ms-ps-18{margin-left:9.5rem!important}.ms-pe-18{margin-right:9.5rem!important}.ms-px-18{margin-left:9.5rem!important;margin-right:9.5rem!important}.ms-py-18{margin-top:9.5rem!important;margin-bottom:9.5rem!important}.ms-p-19{margin:10rem!important}.ms-pt-19{margin-top:10rem!important}.ms-pb-19{margin-bottom:10rem!important}.ms-ps-19{margin-left:10rem!important}.ms-pe-19{margin-right:10rem!important}.ms-px-19{margin-left:10rem!important;margin-right:10rem!important}.ms-py-19{margin-top:10rem!important;margin-bottom:10rem!important}.ms-p-20{margin:10.5rem!important}.ms-pt-20{margin-top:10.5rem!important}.ms-pb-20{margin-bottom:10.5rem!important}.ms-ps-20{margin-left:10.5rem!important}.ms-pe-20{margin-right:10.5rem!important}.ms-px-20{margin-left:10.5rem!important;margin-right:10.5rem!important}.ms-py-20{margin-top:10.5rem!important;margin-bottom:10.5rem!important}.ms-m-auto{margin:auto!important}.ms-mt-auto{margin-top:auto!important}.ms-mb-auto{margin-bottom:auto!important}.ms-ms-auto{margin-left:auto!important}.ms-me-auto{margin-right:auto!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-my-auto{margin-top:auto!important;margin-bottom:auto!important}.ms-p-0{padding:0!important}.ms-pt-0{padding-top:0!important}.ms-pb-0{padding-bottom:0!important}.ms-ps-0{padding-left:0!important}.ms-pe-0{padding-right:0!important}.ms-px-0{padding-left:0!important;padding-right:0!important}.ms-py-0{padding-top:0!important;padding-bottom:0!important}.ms-p-1{padding:.25rem!important}.ms-pt-1{padding-top:.25rem!important}.ms-pb-1{padding-bottom:.25rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-px-1{padding-left:.25rem!important;padding-right:.25rem!important}.ms-py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-pb-2{padding-bottom:.5rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-px-2{padding-left:.5rem!important;padding-right:.5rem!important}.ms-py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ms-p-3{padding:1rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-ps-3{padding-left:1rem!important}.ms-pe-3{padding-right:1rem!important}.ms-px-3{padding-left:1rem!important;padding-right:1rem!important}.ms-py-3{padding-top:1rem!important;padding-bottom:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pb-4{padding-bottom:1.5rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-px-4{padding-left:1.5rem!important;padding-right:1.5rem!important}.ms-py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pb-5{padding-bottom:3rem!important}.ms-ps-5{padding-left:3rem!important}.ms-pe-5{padding-right:3rem!important}.ms-px-5{padding-left:3rem!important;padding-right:3rem!important}.ms-py-5{padding-top:3rem!important;padding-bottom:3rem!important}.ms-p-6{padding:3.5rem!important}.ms-pt-6{padding-top:3.5rem!important}.ms-pb-6{padding-bottom:3.5rem!important}.ms-ps-6{padding-left:3.5rem!important}.ms-pe-6{padding-right:3.5rem!important}.ms-px-6{padding-left:3.5rem!important;padding-right:3.5rem!important}.ms-py-6{padding-top:3.5rem!important;padding-bottom:3.5rem!important}.ms-p-7{padding:4rem!important}.ms-pt-7{padding-top:4rem!important}.ms-pb-7{padding-bottom:4rem!important}.ms-ps-7{padding-left:4rem!important}.ms-pe-7{padding-right:4rem!important}.ms-px-7{padding-left:4rem!important;padding-right:4rem!important}.ms-py-7{padding-top:4rem!important;padding-bottom:4rem!important}.ms-p-8{padding:4.5rem!important}.ms-pt-8{padding-top:4.5rem!important}.ms-pb-8{padding-bottom:4.5rem!important}.ms-ps-8{padding-left:4.5rem!important}.ms-pe-8{padding-right:4.5rem!important}.ms-px-8{padding-left:4.5rem!important;padding-right:4.5rem!important}.ms-py-8{padding-top:4.5rem!important;padding-bottom:4.5rem!important}.ms-p-9{padding:5rem!important}.ms-pt-9{padding-top:5rem!important}.ms-pb-9{padding-bottom:5rem!important}.ms-ps-9{padding-left:5rem!important}.ms-pe-9{padding-right:5rem!important}.ms-px-9{padding-left:5rem!important;padding-right:5rem!important}.ms-py-9{padding-top:5rem!important;padding-bottom:5rem!important}.ms-p-10{padding:5.5rem!important}.ms-pt-10{padding-top:5.5rem!important}.ms-pb-10{padding-bottom:5.5rem!important}.ms-ps-10{padding-left:5.5rem!important}.ms-pe-10{padding-right:5.5rem!important}.ms-px-10{padding-left:5.5rem!important;padding-right:5.5rem!important}.ms-py-10{padding-top:5.5rem!important;padding-bottom:5.5rem!important}.ms-p-11{padding:6rem!important}.ms-pt-11{padding-top:6rem!important}.ms-pb-11{padding-bottom:6rem!important}.ms-ps-11{padding-left:6rem!important}.ms-pe-11{padding-right:6rem!important}.ms-px-11{padding-left:6rem!important;padding-right:6rem!important}.ms-py-11{padding-top:6rem!important;padding-bottom:6rem!important}.ms-p-12{padding:6.5rem!important}.ms-pt-12{padding-top:6.5rem!important}.ms-pb-12{padding-bottom:6.5rem!important}.ms-ps-12{padding-left:6.5rem!important}.ms-pe-12{padding-right:6.5rem!important}.ms-px-12{padding-left:6.5rem!important;padding-right:6.5rem!important}.ms-py-12{padding-top:6.5rem!important;padding-bottom:6.5rem!important}.ms-p-13{padding:7rem!important}.ms-pt-13{padding-top:7rem!important}.ms-pb-13{padding-bottom:7rem!important}.ms-ps-13{padding-left:7rem!important}.ms-pe-13{padding-right:7rem!important}.ms-px-13{padding-left:7rem!important;padding-right:7rem!important}.ms-py-13{padding-top:7rem!important;padding-bottom:7rem!important}.ms-p-14{padding:7.5rem!important}.ms-pt-14{padding-top:7.5rem!important}.ms-pb-14{padding-bottom:7.5rem!important}.ms-ps-14{padding-left:7.5rem!important}.ms-pe-14{padding-right:7.5rem!important}.ms-px-14{padding-left:7.5rem!important;padding-right:7.5rem!important}.ms-py-14{padding-top:7.5rem!important;padding-bottom:7.5rem!important}.ms-p-15{padding:8rem!important}.ms-pt-15{padding-top:8rem!important}.ms-pb-15{padding-bottom:8rem!important}.ms-ps-15{padding-left:8rem!important}.ms-pe-15{padding-right:8rem!important}.ms-px-15{padding-left:8rem!important;padding-right:8rem!important}.ms-py-15{padding-top:8rem!important;padding-bottom:8rem!important}.ms-p-16{padding:8.5rem!important}.ms-pt-16{padding-top:8.5rem!important}.ms-pb-16{padding-bottom:8.5rem!important}.ms-ps-16{padding-left:8.5rem!important}.ms-pe-16{padding-right:8.5rem!important}.ms-px-16{padding-left:8.5rem!important;padding-right:8.5rem!important}.ms-py-16{padding-top:8.5rem!important;padding-bottom:8.5rem!important}.ms-p-17{padding:9rem!important}.ms-pt-17{padding-top:9rem!important}.ms-pb-17{padding-bottom:9rem!important}.ms-ps-17{padding-left:9rem!important}.ms-pe-17{padding-right:9rem!important}.ms-px-17{padding-left:9rem!important;padding-right:9rem!important}.ms-py-17{padding-top:9rem!important;padding-bottom:9rem!important}.ms-p-18{padding:9.5rem!important}.ms-pt-18{padding-top:9.5rem!important}.ms-pb-18{padding-bottom:9.5rem!important}.ms-ps-18{padding-left:9.5rem!important}.ms-pe-18{padding-right:9.5rem!important}.ms-px-18{padding-left:9.5rem!important;padding-right:9.5rem!important}.ms-py-18{padding-top:9.5rem!important;padding-bottom:9.5rem!important}.ms-p-19{padding:10rem!important}.ms-pt-19{padding-top:10rem!important}.ms-pb-19{padding-bottom:10rem!important}.ms-ps-19{padding-left:10rem!important}.ms-pe-19{padding-right:10rem!important}.ms-px-19{padding-left:10rem!important;padding-right:10rem!important}.ms-py-19{padding-top:10rem!important;padding-bottom:10rem!important}.ms-p-20{padding:10.5rem!important}.ms-pt-20{padding-top:10.5rem!important}.ms-pb-20{padding-bottom:10.5rem!important}.ms-ps-20{padding-left:10.5rem!important}.ms-pe-20{padding-right:10.5rem!important}.ms-px-20{padding-left:10.5rem!important;padding-right:10.5rem!important}.ms-py-20{padding-top:10.5rem!important;padding-bottom:10.5rem!important}.ms-p-auto{padding:auto!important}.ms-pt-auto{padding-top:auto!important}.ms-pb-auto{padding-bottom:auto!important}.ms-ps-auto{padding-left:auto!important}.ms-pe-auto{padding-right:auto!important}.ms-px-auto{padding-left:auto!important;padding-right:auto!important}.ms-py-auto{padding-top:auto!important;padding-bottom:auto!important}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent;border-radius:6px}::-webkit-scrollbar-thumb{border-radius:6px;background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843))}::-webkit-scrollbar-thumb:hover{background:#cfcfcf}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px;line-height:40px;font-weight:600;letter-spacing:-1%;margin:0%}h2{font-size:24px;line-height:30px;font-weight:600;letter-spacing:-1%;margin:0%}h3{font-size:20px;line-height:25px;font-weight:600;letter-spacing:-1%;margin:0%}p,div,span{font-size:14px;line-height:20px;font-weight:400;letter-spacing:0%}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;height:30px}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;height:32px}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:0px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;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;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control: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;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;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;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea: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;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{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-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}\n"] });
+        ], usesOnChanges: true, ngImport: i0, template: "<label\n  class=\"ms-checkbox\"\n  [class.disabled]=\"disabled\"\n  [class.invalid]=\"invalid\"\n  [class.checkbox-skeleton]=\"skeleton\"\n>\n  @if (skeleton) {\n    <div class=\"ms-checkbox-skeleton\"></div>\n  } @else {\n\n    <input style=\"width: 16px;height: 16px;\"\n      type=\"checkbox\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled\"\n      (change)=\"toggle()\"\n      (blur)=\"markTouched()\"\n    />\n\n    <span class=\"ms-checkbox-box\">\n      @if (indeterminate) {\n        <span class=\"ms-indeterminate\"></span>\n      } @else if (checked) {\n        <span class=\"ms-checkmark\">&#10003;</span>\n      }\n    </span>\n\n    @if (label) {\n      <span class=\"ms-label\">{{ label }}</span>\n    }\n  }\n</label>\n\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsCheckbox, decorators: [{
             type: Component,
@@ -899,7 +846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                             useExisting: forwardRef(() => MsCheckbox),
                             multi: true
                         }
-                    ], template: "<label\n  class=\"ms-checkbox\"\n  [class.disabled]=\"disabled\"\n  [class.invalid]=\"invalid\"\n  [class.checkbox-skeleton]=\"skeleton\"\n>\n  @if (skeleton) {\n    <div class=\"ms-checkbox-skeleton\"></div>\n  } @else {\n\n    <input style=\"width: 16px;height: 16px;\"\n      type=\"checkbox\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled\"\n      (change)=\"toggle()\"\n      (blur)=\"markTouched()\"\n    />\n\n    <span class=\"ms-checkbox-box\">\n      @if (indeterminate) {\n        <span class=\"ms-indeterminate\"></span>\n      } @else if (checked) {\n        <span class=\"ms-checkmark\">&#10003;</span>\n      }\n    </span>\n\n    @if (label) {\n      <span class=\"ms-label\">{{ label }}</span>\n    }\n  }\n</label>\n\n", styles: ["@charset \"UTF-8\";.ms-content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.ms-content.collapsed{width:1590px!important}@media(min-width:992px){.ms-content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.ms-content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.ms-content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.ms-content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2)}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}.ms-h-0{height:0%!important}.ms-h-5{height:5%!important}.ms-h-10{height:10%!important}.ms-h-15{height:15%!important}.ms-h-20{height:20%!important}.ms-h-25{height:25%!important}.ms-h-30{height:30%!important}.ms-h-35{height:35%!important}.ms-h-40{height:40%!important}.ms-h-45{height:45%!important}.ms-h-50{height:50%!important}.ms-h-55{height:55%!important}.ms-h-60{height:60%!important}.ms-h-65{height:65%!important}.ms-h-70{height:70%!important}.ms-h-75{height:75%!important}.ms-h-80{height:80%!important}.ms-h-85{height:85%!important}.ms-h-90{height:90%!important}.ms-h-95{height:95%!important}.ms-h-100{height:100%!important}.ms-w-auto{width:auto!important}.ms-w-0{width:0%!important}.ms-w-5{width:5%!important}.ms-w-10{width:10%!important}.ms-w-15{width:15%!important}.ms-w-20{width:20%!important}.ms-w-25{width:25%!important}.ms-w-30{width:30%!important}.ms-w-35{width:35%!important}.ms-w-40{width:40%!important}.ms-w-45{width:45%!important}.ms-w-50{width:50%!important}.ms-w-55{width:55%!important}.ms-w-60{width:60%!important}.ms-w-65{width:65%!important}.ms-w-70{width:70%!important}.ms-w-75{width:75%!important}.ms-w-80{width:80%!important}.ms-w-85{width:85%!important}.ms-w-90{width:90%!important}.ms-w-95{width:95%!important}.ms-w-100{width:100%!important}.ms-p-0{margin:0!important}.ms-pt-0{margin-top:0!important}.ms-pb-0{margin-bottom:0!important}.ms-ps-0{margin-left:0!important}.ms-pe-0{margin-right:0!important}.ms-px-0{margin-left:0!important;margin-right:0!important}.ms-py-0{margin-top:0!important;margin-bottom:0!important}.ms-p-1{margin:.25rem!important}.ms-pt-1{margin-top:.25rem!important}.ms-pb-1{margin-bottom:.25rem!important}.ms-ps-1{margin-left:.25rem!important}.ms-pe-1{margin-right:.25rem!important}.ms-px-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-py-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-p-2{margin:.5rem!important}.ms-pt-2{margin-top:.5rem!important}.ms-pb-2{margin-bottom:.5rem!important}.ms-ps-2{margin-left:.5rem!important}.ms-pe-2{margin-right:.5rem!important}.ms-px-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-py-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-p-3{margin:1rem!important}.ms-pt-3{margin-top:1rem!important}.ms-pb-3{margin-bottom:1rem!important}.ms-ps-3{margin-left:1rem!important}.ms-pe-3{margin-right:1rem!important}.ms-px-3{margin-left:1rem!important;margin-right:1rem!important}.ms-py-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-p-4{margin:1.5rem!important}.ms-pt-4{margin-top:1.5rem!important}.ms-pb-4{margin-bottom:1.5rem!important}.ms-ps-4{margin-left:1.5rem!important}.ms-pe-4{margin-right:1.5rem!important}.ms-px-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-py-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-p-5{margin:3rem!important}.ms-pt-5{margin-top:3rem!important}.ms-pb-5{margin-bottom:3rem!important}.ms-ps-5{margin-left:3rem!important}.ms-pe-5{margin-right:3rem!important}.ms-px-5{margin-left:3rem!important;margin-right:3rem!important}.ms-py-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-p-6{margin:3.5rem!important}.ms-pt-6{margin-top:3.5rem!important}.ms-pb-6{margin-bottom:3.5rem!important}.ms-ps-6{margin-left:3.5rem!important}.ms-pe-6{margin-right:3.5rem!important}.ms-px-6{margin-left:3.5rem!important;margin-right:3.5rem!important}.ms-py-6{margin-top:3.5rem!important;margin-bottom:3.5rem!important}.ms-p-7{margin:4rem!important}.ms-pt-7{margin-top:4rem!important}.ms-pb-7{margin-bottom:4rem!important}.ms-ps-7{margin-left:4rem!important}.ms-pe-7{margin-right:4rem!important}.ms-px-7{margin-left:4rem!important;margin-right:4rem!important}.ms-py-7{margin-top:4rem!important;margin-bottom:4rem!important}.ms-p-8{margin:4.5rem!important}.ms-pt-8{margin-top:4.5rem!important}.ms-pb-8{margin-bottom:4.5rem!important}.ms-ps-8{margin-left:4.5rem!important}.ms-pe-8{margin-right:4.5rem!important}.ms-px-8{margin-left:4.5rem!important;margin-right:4.5rem!important}.ms-py-8{margin-top:4.5rem!important;margin-bottom:4.5rem!important}.ms-p-9{margin:5rem!important}.ms-pt-9{margin-top:5rem!important}.ms-pb-9{margin-bottom:5rem!important}.ms-ps-9{margin-left:5rem!important}.ms-pe-9{margin-right:5rem!important}.ms-px-9{margin-left:5rem!important;margin-right:5rem!important}.ms-py-9{margin-top:5rem!important;margin-bottom:5rem!important}.ms-p-10{margin:5.5rem!important}.ms-pt-10{margin-top:5.5rem!important}.ms-pb-10{margin-bottom:5.5rem!important}.ms-ps-10{margin-left:5.5rem!important}.ms-pe-10{margin-right:5.5rem!important}.ms-px-10{margin-left:5.5rem!important;margin-right:5.5rem!important}.ms-py-10{margin-top:5.5rem!important;margin-bottom:5.5rem!important}.ms-p-11{margin:6rem!important}.ms-pt-11{margin-top:6rem!important}.ms-pb-11{margin-bottom:6rem!important}.ms-ps-11{margin-left:6rem!important}.ms-pe-11{margin-right:6rem!important}.ms-px-11{margin-left:6rem!important;margin-right:6rem!important}.ms-py-11{margin-top:6rem!important;margin-bottom:6rem!important}.ms-p-12{margin:6.5rem!important}.ms-pt-12{margin-top:6.5rem!important}.ms-pb-12{margin-bottom:6.5rem!important}.ms-ps-12{margin-left:6.5rem!important}.ms-pe-12{margin-right:6.5rem!important}.ms-px-12{margin-left:6.5rem!important;margin-right:6.5rem!important}.ms-py-12{margin-top:6.5rem!important;margin-bottom:6.5rem!important}.ms-p-13{margin:7rem!important}.ms-pt-13{margin-top:7rem!important}.ms-pb-13{margin-bottom:7rem!important}.ms-ps-13{margin-left:7rem!important}.ms-pe-13{margin-right:7rem!important}.ms-px-13{margin-left:7rem!important;margin-right:7rem!important}.ms-py-13{margin-top:7rem!important;margin-bottom:7rem!important}.ms-p-14{margin:7.5rem!important}.ms-pt-14{margin-top:7.5rem!important}.ms-pb-14{margin-bottom:7.5rem!important}.ms-ps-14{margin-left:7.5rem!important}.ms-pe-14{margin-right:7.5rem!important}.ms-px-14{margin-left:7.5rem!important;margin-right:7.5rem!important}.ms-py-14{margin-top:7.5rem!important;margin-bottom:7.5rem!important}.ms-p-15{margin:8rem!important}.ms-pt-15{margin-top:8rem!important}.ms-pb-15{margin-bottom:8rem!important}.ms-ps-15{margin-left:8rem!important}.ms-pe-15{margin-right:8rem!important}.ms-px-15{margin-left:8rem!important;margin-right:8rem!important}.ms-py-15{margin-top:8rem!important;margin-bottom:8rem!important}.ms-p-16{margin:8.5rem!important}.ms-pt-16{margin-top:8.5rem!important}.ms-pb-16{margin-bottom:8.5rem!important}.ms-ps-16{margin-left:8.5rem!important}.ms-pe-16{margin-right:8.5rem!important}.ms-px-16{margin-left:8.5rem!important;margin-right:8.5rem!important}.ms-py-16{margin-top:8.5rem!important;margin-bottom:8.5rem!important}.ms-p-17{margin:9rem!important}.ms-pt-17{margin-top:9rem!important}.ms-pb-17{margin-bottom:9rem!important}.ms-ps-17{margin-left:9rem!important}.ms-pe-17{margin-right:9rem!important}.ms-px-17{margin-left:9rem!important;margin-right:9rem!important}.ms-py-17{margin-top:9rem!important;margin-bottom:9rem!important}.ms-p-18{margin:9.5rem!important}.ms-pt-18{margin-top:9.5rem!important}.ms-pb-18{margin-bottom:9.5rem!important}.ms-ps-18{margin-left:9.5rem!important}.ms-pe-18{margin-right:9.5rem!important}.ms-px-18{margin-left:9.5rem!important;margin-right:9.5rem!important}.ms-py-18{margin-top:9.5rem!important;margin-bottom:9.5rem!important}.ms-p-19{margin:10rem!important}.ms-pt-19{margin-top:10rem!important}.ms-pb-19{margin-bottom:10rem!important}.ms-ps-19{margin-left:10rem!important}.ms-pe-19{margin-right:10rem!important}.ms-px-19{margin-left:10rem!important;margin-right:10rem!important}.ms-py-19{margin-top:10rem!important;margin-bottom:10rem!important}.ms-p-20{margin:10.5rem!important}.ms-pt-20{margin-top:10.5rem!important}.ms-pb-20{margin-bottom:10.5rem!important}.ms-ps-20{margin-left:10.5rem!important}.ms-pe-20{margin-right:10.5rem!important}.ms-px-20{margin-left:10.5rem!important;margin-right:10.5rem!important}.ms-py-20{margin-top:10.5rem!important;margin-bottom:10.5rem!important}.ms-m-auto{margin:auto!important}.ms-mt-auto{margin-top:auto!important}.ms-mb-auto{margin-bottom:auto!important}.ms-ms-auto{margin-left:auto!important}.ms-me-auto{margin-right:auto!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-my-auto{margin-top:auto!important;margin-bottom:auto!important}.ms-p-0{padding:0!important}.ms-pt-0{padding-top:0!important}.ms-pb-0{padding-bottom:0!important}.ms-ps-0{padding-left:0!important}.ms-pe-0{padding-right:0!important}.ms-px-0{padding-left:0!important;padding-right:0!important}.ms-py-0{padding-top:0!important;padding-bottom:0!important}.ms-p-1{padding:.25rem!important}.ms-pt-1{padding-top:.25rem!important}.ms-pb-1{padding-bottom:.25rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-px-1{padding-left:.25rem!important;padding-right:.25rem!important}.ms-py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-pb-2{padding-bottom:.5rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-px-2{padding-left:.5rem!important;padding-right:.5rem!important}.ms-py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ms-p-3{padding:1rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-ps-3{padding-left:1rem!important}.ms-pe-3{padding-right:1rem!important}.ms-px-3{padding-left:1rem!important;padding-right:1rem!important}.ms-py-3{padding-top:1rem!important;padding-bottom:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pb-4{padding-bottom:1.5rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-px-4{padding-left:1.5rem!important;padding-right:1.5rem!important}.ms-py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pb-5{padding-bottom:3rem!important}.ms-ps-5{padding-left:3rem!important}.ms-pe-5{padding-right:3rem!important}.ms-px-5{padding-left:3rem!important;padding-right:3rem!important}.ms-py-5{padding-top:3rem!important;padding-bottom:3rem!important}.ms-p-6{padding:3.5rem!important}.ms-pt-6{padding-top:3.5rem!important}.ms-pb-6{padding-bottom:3.5rem!important}.ms-ps-6{padding-left:3.5rem!important}.ms-pe-6{padding-right:3.5rem!important}.ms-px-6{padding-left:3.5rem!important;padding-right:3.5rem!important}.ms-py-6{padding-top:3.5rem!important;padding-bottom:3.5rem!important}.ms-p-7{padding:4rem!important}.ms-pt-7{padding-top:4rem!important}.ms-pb-7{padding-bottom:4rem!important}.ms-ps-7{padding-left:4rem!important}.ms-pe-7{padding-right:4rem!important}.ms-px-7{padding-left:4rem!important;padding-right:4rem!important}.ms-py-7{padding-top:4rem!important;padding-bottom:4rem!important}.ms-p-8{padding:4.5rem!important}.ms-pt-8{padding-top:4.5rem!important}.ms-pb-8{padding-bottom:4.5rem!important}.ms-ps-8{padding-left:4.5rem!important}.ms-pe-8{padding-right:4.5rem!important}.ms-px-8{padding-left:4.5rem!important;padding-right:4.5rem!important}.ms-py-8{padding-top:4.5rem!important;padding-bottom:4.5rem!important}.ms-p-9{padding:5rem!important}.ms-pt-9{padding-top:5rem!important}.ms-pb-9{padding-bottom:5rem!important}.ms-ps-9{padding-left:5rem!important}.ms-pe-9{padding-right:5rem!important}.ms-px-9{padding-left:5rem!important;padding-right:5rem!important}.ms-py-9{padding-top:5rem!important;padding-bottom:5rem!important}.ms-p-10{padding:5.5rem!important}.ms-pt-10{padding-top:5.5rem!important}.ms-pb-10{padding-bottom:5.5rem!important}.ms-ps-10{padding-left:5.5rem!important}.ms-pe-10{padding-right:5.5rem!important}.ms-px-10{padding-left:5.5rem!important;padding-right:5.5rem!important}.ms-py-10{padding-top:5.5rem!important;padding-bottom:5.5rem!important}.ms-p-11{padding:6rem!important}.ms-pt-11{padding-top:6rem!important}.ms-pb-11{padding-bottom:6rem!important}.ms-ps-11{padding-left:6rem!important}.ms-pe-11{padding-right:6rem!important}.ms-px-11{padding-left:6rem!important;padding-right:6rem!important}.ms-py-11{padding-top:6rem!important;padding-bottom:6rem!important}.ms-p-12{padding:6.5rem!important}.ms-pt-12{padding-top:6.5rem!important}.ms-pb-12{padding-bottom:6.5rem!important}.ms-ps-12{padding-left:6.5rem!important}.ms-pe-12{padding-right:6.5rem!important}.ms-px-12{padding-left:6.5rem!important;padding-right:6.5rem!important}.ms-py-12{padding-top:6.5rem!important;padding-bottom:6.5rem!important}.ms-p-13{padding:7rem!important}.ms-pt-13{padding-top:7rem!important}.ms-pb-13{padding-bottom:7rem!important}.ms-ps-13{padding-left:7rem!important}.ms-pe-13{padding-right:7rem!important}.ms-px-13{padding-left:7rem!important;padding-right:7rem!important}.ms-py-13{padding-top:7rem!important;padding-bottom:7rem!important}.ms-p-14{padding:7.5rem!important}.ms-pt-14{padding-top:7.5rem!important}.ms-pb-14{padding-bottom:7.5rem!important}.ms-ps-14{padding-left:7.5rem!important}.ms-pe-14{padding-right:7.5rem!important}.ms-px-14{padding-left:7.5rem!important;padding-right:7.5rem!important}.ms-py-14{padding-top:7.5rem!important;padding-bottom:7.5rem!important}.ms-p-15{padding:8rem!important}.ms-pt-15{padding-top:8rem!important}.ms-pb-15{padding-bottom:8rem!important}.ms-ps-15{padding-left:8rem!important}.ms-pe-15{padding-right:8rem!important}.ms-px-15{padding-left:8rem!important;padding-right:8rem!important}.ms-py-15{padding-top:8rem!important;padding-bottom:8rem!important}.ms-p-16{padding:8.5rem!important}.ms-pt-16{padding-top:8.5rem!important}.ms-pb-16{padding-bottom:8.5rem!important}.ms-ps-16{padding-left:8.5rem!important}.ms-pe-16{padding-right:8.5rem!important}.ms-px-16{padding-left:8.5rem!important;padding-right:8.5rem!important}.ms-py-16{padding-top:8.5rem!important;padding-bottom:8.5rem!important}.ms-p-17{padding:9rem!important}.ms-pt-17{padding-top:9rem!important}.ms-pb-17{padding-bottom:9rem!important}.ms-ps-17{padding-left:9rem!important}.ms-pe-17{padding-right:9rem!important}.ms-px-17{padding-left:9rem!important;padding-right:9rem!important}.ms-py-17{padding-top:9rem!important;padding-bottom:9rem!important}.ms-p-18{padding:9.5rem!important}.ms-pt-18{padding-top:9.5rem!important}.ms-pb-18{padding-bottom:9.5rem!important}.ms-ps-18{padding-left:9.5rem!important}.ms-pe-18{padding-right:9.5rem!important}.ms-px-18{padding-left:9.5rem!important;padding-right:9.5rem!important}.ms-py-18{padding-top:9.5rem!important;padding-bottom:9.5rem!important}.ms-p-19{padding:10rem!important}.ms-pt-19{padding-top:10rem!important}.ms-pb-19{padding-bottom:10rem!important}.ms-ps-19{padding-left:10rem!important}.ms-pe-19{padding-right:10rem!important}.ms-px-19{padding-left:10rem!important;padding-right:10rem!important}.ms-py-19{padding-top:10rem!important;padding-bottom:10rem!important}.ms-p-20{padding:10.5rem!important}.ms-pt-20{padding-top:10.5rem!important}.ms-pb-20{padding-bottom:10.5rem!important}.ms-ps-20{padding-left:10.5rem!important}.ms-pe-20{padding-right:10.5rem!important}.ms-px-20{padding-left:10.5rem!important;padding-right:10.5rem!important}.ms-py-20{padding-top:10.5rem!important;padding-bottom:10.5rem!important}.ms-p-auto{padding:auto!important}.ms-pt-auto{padding-top:auto!important}.ms-pb-auto{padding-bottom:auto!important}.ms-ps-auto{padding-left:auto!important}.ms-pe-auto{padding-right:auto!important}.ms-px-auto{padding-left:auto!important;padding-right:auto!important}.ms-py-auto{padding-top:auto!important;padding-bottom:auto!important}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent;border-radius:6px}::-webkit-scrollbar-thumb{border-radius:6px;background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843))}::-webkit-scrollbar-thumb:hover{background:#cfcfcf}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px;line-height:40px;font-weight:600;letter-spacing:-1%;margin:0%}h2{font-size:24px;line-height:30px;font-weight:600;letter-spacing:-1%;margin:0%}h3{font-size:20px;line-height:25px;font-weight:600;letter-spacing:-1%;margin:0%}p,div,span{font-size:14px;line-height:20px;font-weight:400;letter-spacing:0%}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;height:30px}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;height:32px}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:0px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;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;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control: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;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;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;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea: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;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{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-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}\n"] }]
+                    ], template: "<label\n  class=\"ms-checkbox\"\n  [class.disabled]=\"disabled\"\n  [class.invalid]=\"invalid\"\n  [class.checkbox-skeleton]=\"skeleton\"\n>\n  @if (skeleton) {\n    <div class=\"ms-checkbox-skeleton\"></div>\n  } @else {\n\n    <input style=\"width: 16px;height: 16px;\"\n      type=\"checkbox\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled\"\n      (change)=\"toggle()\"\n      (blur)=\"markTouched()\"\n    />\n\n    <span class=\"ms-checkbox-box\">\n      @if (indeterminate) {\n        <span class=\"ms-indeterminate\"></span>\n      } @else if (checked) {\n        <span class=\"ms-checkmark\">&#10003;</span>\n      }\n    </span>\n\n    @if (label) {\n      <span class=\"ms-label\">{{ label }}</span>\n    }\n  }\n</label>\n\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], disabled: [{
@@ -1250,7 +1197,7 @@ class MsRadioButton {
                 useExisting: forwardRef(() => MsRadioButton),
                 multi: true
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<label class=\"ms-radio\"\n       [class.checked]=\"checked\"\n       [class.disabled]=\"disabled\"\n        [class.radio-skeleton]=\"skeleton\"\n       [class.invalid]=\"invalid\">\n       \n  @if (skeleton) {\n    <div class=\"ms-radio-skeleton\"></div>\n  } @else {\n  <input\n    type=\"radio\"\n    [name]=\"name\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    (change)=\"select()\"\n    (blur)=\"markTouched()\"\n  />\n\n  <span class=\"ms-radio-circle\">\n    <span class=\"ms-radio-dot\"></span>\n  </span>\n\n    @if (label) {\n      <span class=\"ms-label\">{{ label }}</span>\n    }\n}\n</label>\n", styles: ["@charset \"UTF-8\";.ms-content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.ms-content.collapsed{width:1590px!important}@media(min-width:992px){.ms-content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.ms-content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.ms-content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.ms-content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2)}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}.ms-h-0{height:0%!important}.ms-h-5{height:5%!important}.ms-h-10{height:10%!important}.ms-h-15{height:15%!important}.ms-h-20{height:20%!important}.ms-h-25{height:25%!important}.ms-h-30{height:30%!important}.ms-h-35{height:35%!important}.ms-h-40{height:40%!important}.ms-h-45{height:45%!important}.ms-h-50{height:50%!important}.ms-h-55{height:55%!important}.ms-h-60{height:60%!important}.ms-h-65{height:65%!important}.ms-h-70{height:70%!important}.ms-h-75{height:75%!important}.ms-h-80{height:80%!important}.ms-h-85{height:85%!important}.ms-h-90{height:90%!important}.ms-h-95{height:95%!important}.ms-h-100{height:100%!important}.ms-w-auto{width:auto!important}.ms-w-0{width:0%!important}.ms-w-5{width:5%!important}.ms-w-10{width:10%!important}.ms-w-15{width:15%!important}.ms-w-20{width:20%!important}.ms-w-25{width:25%!important}.ms-w-30{width:30%!important}.ms-w-35{width:35%!important}.ms-w-40{width:40%!important}.ms-w-45{width:45%!important}.ms-w-50{width:50%!important}.ms-w-55{width:55%!important}.ms-w-60{width:60%!important}.ms-w-65{width:65%!important}.ms-w-70{width:70%!important}.ms-w-75{width:75%!important}.ms-w-80{width:80%!important}.ms-w-85{width:85%!important}.ms-w-90{width:90%!important}.ms-w-95{width:95%!important}.ms-w-100{width:100%!important}.ms-p-0{margin:0!important}.ms-pt-0{margin-top:0!important}.ms-pb-0{margin-bottom:0!important}.ms-ps-0{margin-left:0!important}.ms-pe-0{margin-right:0!important}.ms-px-0{margin-left:0!important;margin-right:0!important}.ms-py-0{margin-top:0!important;margin-bottom:0!important}.ms-p-1{margin:.25rem!important}.ms-pt-1{margin-top:.25rem!important}.ms-pb-1{margin-bottom:.25rem!important}.ms-ps-1{margin-left:.25rem!important}.ms-pe-1{margin-right:.25rem!important}.ms-px-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-py-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-p-2{margin:.5rem!important}.ms-pt-2{margin-top:.5rem!important}.ms-pb-2{margin-bottom:.5rem!important}.ms-ps-2{margin-left:.5rem!important}.ms-pe-2{margin-right:.5rem!important}.ms-px-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-py-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-p-3{margin:1rem!important}.ms-pt-3{margin-top:1rem!important}.ms-pb-3{margin-bottom:1rem!important}.ms-ps-3{margin-left:1rem!important}.ms-pe-3{margin-right:1rem!important}.ms-px-3{margin-left:1rem!important;margin-right:1rem!important}.ms-py-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-p-4{margin:1.5rem!important}.ms-pt-4{margin-top:1.5rem!important}.ms-pb-4{margin-bottom:1.5rem!important}.ms-ps-4{margin-left:1.5rem!important}.ms-pe-4{margin-right:1.5rem!important}.ms-px-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-py-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-p-5{margin:3rem!important}.ms-pt-5{margin-top:3rem!important}.ms-pb-5{margin-bottom:3rem!important}.ms-ps-5{margin-left:3rem!important}.ms-pe-5{margin-right:3rem!important}.ms-px-5{margin-left:3rem!important;margin-right:3rem!important}.ms-py-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-p-6{margin:3.5rem!important}.ms-pt-6{margin-top:3.5rem!important}.ms-pb-6{margin-bottom:3.5rem!important}.ms-ps-6{margin-left:3.5rem!important}.ms-pe-6{margin-right:3.5rem!important}.ms-px-6{margin-left:3.5rem!important;margin-right:3.5rem!important}.ms-py-6{margin-top:3.5rem!important;margin-bottom:3.5rem!important}.ms-p-7{margin:4rem!important}.ms-pt-7{margin-top:4rem!important}.ms-pb-7{margin-bottom:4rem!important}.ms-ps-7{margin-left:4rem!important}.ms-pe-7{margin-right:4rem!important}.ms-px-7{margin-left:4rem!important;margin-right:4rem!important}.ms-py-7{margin-top:4rem!important;margin-bottom:4rem!important}.ms-p-8{margin:4.5rem!important}.ms-pt-8{margin-top:4.5rem!important}.ms-pb-8{margin-bottom:4.5rem!important}.ms-ps-8{margin-left:4.5rem!important}.ms-pe-8{margin-right:4.5rem!important}.ms-px-8{margin-left:4.5rem!important;margin-right:4.5rem!important}.ms-py-8{margin-top:4.5rem!important;margin-bottom:4.5rem!important}.ms-p-9{margin:5rem!important}.ms-pt-9{margin-top:5rem!important}.ms-pb-9{margin-bottom:5rem!important}.ms-ps-9{margin-left:5rem!important}.ms-pe-9{margin-right:5rem!important}.ms-px-9{margin-left:5rem!important;margin-right:5rem!important}.ms-py-9{margin-top:5rem!important;margin-bottom:5rem!important}.ms-p-10{margin:5.5rem!important}.ms-pt-10{margin-top:5.5rem!important}.ms-pb-10{margin-bottom:5.5rem!important}.ms-ps-10{margin-left:5.5rem!important}.ms-pe-10{margin-right:5.5rem!important}.ms-px-10{margin-left:5.5rem!important;margin-right:5.5rem!important}.ms-py-10{margin-top:5.5rem!important;margin-bottom:5.5rem!important}.ms-p-11{margin:6rem!important}.ms-pt-11{margin-top:6rem!important}.ms-pb-11{margin-bottom:6rem!important}.ms-ps-11{margin-left:6rem!important}.ms-pe-11{margin-right:6rem!important}.ms-px-11{margin-left:6rem!important;margin-right:6rem!important}.ms-py-11{margin-top:6rem!important;margin-bottom:6rem!important}.ms-p-12{margin:6.5rem!important}.ms-pt-12{margin-top:6.5rem!important}.ms-pb-12{margin-bottom:6.5rem!important}.ms-ps-12{margin-left:6.5rem!important}.ms-pe-12{margin-right:6.5rem!important}.ms-px-12{margin-left:6.5rem!important;margin-right:6.5rem!important}.ms-py-12{margin-top:6.5rem!important;margin-bottom:6.5rem!important}.ms-p-13{margin:7rem!important}.ms-pt-13{margin-top:7rem!important}.ms-pb-13{margin-bottom:7rem!important}.ms-ps-13{margin-left:7rem!important}.ms-pe-13{margin-right:7rem!important}.ms-px-13{margin-left:7rem!important;margin-right:7rem!important}.ms-py-13{margin-top:7rem!important;margin-bottom:7rem!important}.ms-p-14{margin:7.5rem!important}.ms-pt-14{margin-top:7.5rem!important}.ms-pb-14{margin-bottom:7.5rem!important}.ms-ps-14{margin-left:7.5rem!important}.ms-pe-14{margin-right:7.5rem!important}.ms-px-14{margin-left:7.5rem!important;margin-right:7.5rem!important}.ms-py-14{margin-top:7.5rem!important;margin-bottom:7.5rem!important}.ms-p-15{margin:8rem!important}.ms-pt-15{margin-top:8rem!important}.ms-pb-15{margin-bottom:8rem!important}.ms-ps-15{margin-left:8rem!important}.ms-pe-15{margin-right:8rem!important}.ms-px-15{margin-left:8rem!important;margin-right:8rem!important}.ms-py-15{margin-top:8rem!important;margin-bottom:8rem!important}.ms-p-16{margin:8.5rem!important}.ms-pt-16{margin-top:8.5rem!important}.ms-pb-16{margin-bottom:8.5rem!important}.ms-ps-16{margin-left:8.5rem!important}.ms-pe-16{margin-right:8.5rem!important}.ms-px-16{margin-left:8.5rem!important;margin-right:8.5rem!important}.ms-py-16{margin-top:8.5rem!important;margin-bottom:8.5rem!important}.ms-p-17{margin:9rem!important}.ms-pt-17{margin-top:9rem!important}.ms-pb-17{margin-bottom:9rem!important}.ms-ps-17{margin-left:9rem!important}.ms-pe-17{margin-right:9rem!important}.ms-px-17{margin-left:9rem!important;margin-right:9rem!important}.ms-py-17{margin-top:9rem!important;margin-bottom:9rem!important}.ms-p-18{margin:9.5rem!important}.ms-pt-18{margin-top:9.5rem!important}.ms-pb-18{margin-bottom:9.5rem!important}.ms-ps-18{margin-left:9.5rem!important}.ms-pe-18{margin-right:9.5rem!important}.ms-px-18{margin-left:9.5rem!important;margin-right:9.5rem!important}.ms-py-18{margin-top:9.5rem!important;margin-bottom:9.5rem!important}.ms-p-19{margin:10rem!important}.ms-pt-19{margin-top:10rem!important}.ms-pb-19{margin-bottom:10rem!important}.ms-ps-19{margin-left:10rem!important}.ms-pe-19{margin-right:10rem!important}.ms-px-19{margin-left:10rem!important;margin-right:10rem!important}.ms-py-19{margin-top:10rem!important;margin-bottom:10rem!important}.ms-p-20{margin:10.5rem!important}.ms-pt-20{margin-top:10.5rem!important}.ms-pb-20{margin-bottom:10.5rem!important}.ms-ps-20{margin-left:10.5rem!important}.ms-pe-20{margin-right:10.5rem!important}.ms-px-20{margin-left:10.5rem!important;margin-right:10.5rem!important}.ms-py-20{margin-top:10.5rem!important;margin-bottom:10.5rem!important}.ms-m-auto{margin:auto!important}.ms-mt-auto{margin-top:auto!important}.ms-mb-auto{margin-bottom:auto!important}.ms-ms-auto{margin-left:auto!important}.ms-me-auto{margin-right:auto!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-my-auto{margin-top:auto!important;margin-bottom:auto!important}.ms-p-0{padding:0!important}.ms-pt-0{padding-top:0!important}.ms-pb-0{padding-bottom:0!important}.ms-ps-0{padding-left:0!important}.ms-pe-0{padding-right:0!important}.ms-px-0{padding-left:0!important;padding-right:0!important}.ms-py-0{padding-top:0!important;padding-bottom:0!important}.ms-p-1{padding:.25rem!important}.ms-pt-1{padding-top:.25rem!important}.ms-pb-1{padding-bottom:.25rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-px-1{padding-left:.25rem!important;padding-right:.25rem!important}.ms-py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-pb-2{padding-bottom:.5rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-px-2{padding-left:.5rem!important;padding-right:.5rem!important}.ms-py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ms-p-3{padding:1rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-ps-3{padding-left:1rem!important}.ms-pe-3{padding-right:1rem!important}.ms-px-3{padding-left:1rem!important;padding-right:1rem!important}.ms-py-3{padding-top:1rem!important;padding-bottom:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pb-4{padding-bottom:1.5rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-px-4{padding-left:1.5rem!important;padding-right:1.5rem!important}.ms-py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pb-5{padding-bottom:3rem!important}.ms-ps-5{padding-left:3rem!important}.ms-pe-5{padding-right:3rem!important}.ms-px-5{padding-left:3rem!important;padding-right:3rem!important}.ms-py-5{padding-top:3rem!important;padding-bottom:3rem!important}.ms-p-6{padding:3.5rem!important}.ms-pt-6{padding-top:3.5rem!important}.ms-pb-6{padding-bottom:3.5rem!important}.ms-ps-6{padding-left:3.5rem!important}.ms-pe-6{padding-right:3.5rem!important}.ms-px-6{padding-left:3.5rem!important;padding-right:3.5rem!important}.ms-py-6{padding-top:3.5rem!important;padding-bottom:3.5rem!important}.ms-p-7{padding:4rem!important}.ms-pt-7{padding-top:4rem!important}.ms-pb-7{padding-bottom:4rem!important}.ms-ps-7{padding-left:4rem!important}.ms-pe-7{padding-right:4rem!important}.ms-px-7{padding-left:4rem!important;padding-right:4rem!important}.ms-py-7{padding-top:4rem!important;padding-bottom:4rem!important}.ms-p-8{padding:4.5rem!important}.ms-pt-8{padding-top:4.5rem!important}.ms-pb-8{padding-bottom:4.5rem!important}.ms-ps-8{padding-left:4.5rem!important}.ms-pe-8{padding-right:4.5rem!important}.ms-px-8{padding-left:4.5rem!important;padding-right:4.5rem!important}.ms-py-8{padding-top:4.5rem!important;padding-bottom:4.5rem!important}.ms-p-9{padding:5rem!important}.ms-pt-9{padding-top:5rem!important}.ms-pb-9{padding-bottom:5rem!important}.ms-ps-9{padding-left:5rem!important}.ms-pe-9{padding-right:5rem!important}.ms-px-9{padding-left:5rem!important;padding-right:5rem!important}.ms-py-9{padding-top:5rem!important;padding-bottom:5rem!important}.ms-p-10{padding:5.5rem!important}.ms-pt-10{padding-top:5.5rem!important}.ms-pb-10{padding-bottom:5.5rem!important}.ms-ps-10{padding-left:5.5rem!important}.ms-pe-10{padding-right:5.5rem!important}.ms-px-10{padding-left:5.5rem!important;padding-right:5.5rem!important}.ms-py-10{padding-top:5.5rem!important;padding-bottom:5.5rem!important}.ms-p-11{padding:6rem!important}.ms-pt-11{padding-top:6rem!important}.ms-pb-11{padding-bottom:6rem!important}.ms-ps-11{padding-left:6rem!important}.ms-pe-11{padding-right:6rem!important}.ms-px-11{padding-left:6rem!important;padding-right:6rem!important}.ms-py-11{padding-top:6rem!important;padding-bottom:6rem!important}.ms-p-12{padding:6.5rem!important}.ms-pt-12{padding-top:6.5rem!important}.ms-pb-12{padding-bottom:6.5rem!important}.ms-ps-12{padding-left:6.5rem!important}.ms-pe-12{padding-right:6.5rem!important}.ms-px-12{padding-left:6.5rem!important;padding-right:6.5rem!important}.ms-py-12{padding-top:6.5rem!important;padding-bottom:6.5rem!important}.ms-p-13{padding:7rem!important}.ms-pt-13{padding-top:7rem!important}.ms-pb-13{padding-bottom:7rem!important}.ms-ps-13{padding-left:7rem!important}.ms-pe-13{padding-right:7rem!important}.ms-px-13{padding-left:7rem!important;padding-right:7rem!important}.ms-py-13{padding-top:7rem!important;padding-bottom:7rem!important}.ms-p-14{padding:7.5rem!important}.ms-pt-14{padding-top:7.5rem!important}.ms-pb-14{padding-bottom:7.5rem!important}.ms-ps-14{padding-left:7.5rem!important}.ms-pe-14{padding-right:7.5rem!important}.ms-px-14{padding-left:7.5rem!important;padding-right:7.5rem!important}.ms-py-14{padding-top:7.5rem!important;padding-bottom:7.5rem!important}.ms-p-15{padding:8rem!important}.ms-pt-15{padding-top:8rem!important}.ms-pb-15{padding-bottom:8rem!important}.ms-ps-15{padding-left:8rem!important}.ms-pe-15{padding-right:8rem!important}.ms-px-15{padding-left:8rem!important;padding-right:8rem!important}.ms-py-15{padding-top:8rem!important;padding-bottom:8rem!important}.ms-p-16{padding:8.5rem!important}.ms-pt-16{padding-top:8.5rem!important}.ms-pb-16{padding-bottom:8.5rem!important}.ms-ps-16{padding-left:8.5rem!important}.ms-pe-16{padding-right:8.5rem!important}.ms-px-16{padding-left:8.5rem!important;padding-right:8.5rem!important}.ms-py-16{padding-top:8.5rem!important;padding-bottom:8.5rem!important}.ms-p-17{padding:9rem!important}.ms-pt-17{padding-top:9rem!important}.ms-pb-17{padding-bottom:9rem!important}.ms-ps-17{padding-left:9rem!important}.ms-pe-17{padding-right:9rem!important}.ms-px-17{padding-left:9rem!important;padding-right:9rem!important}.ms-py-17{padding-top:9rem!important;padding-bottom:9rem!important}.ms-p-18{padding:9.5rem!important}.ms-pt-18{padding-top:9.5rem!important}.ms-pb-18{padding-bottom:9.5rem!important}.ms-ps-18{padding-left:9.5rem!important}.ms-pe-18{padding-right:9.5rem!important}.ms-px-18{padding-left:9.5rem!important;padding-right:9.5rem!important}.ms-py-18{padding-top:9.5rem!important;padding-bottom:9.5rem!important}.ms-p-19{padding:10rem!important}.ms-pt-19{padding-top:10rem!important}.ms-pb-19{padding-bottom:10rem!important}.ms-ps-19{padding-left:10rem!important}.ms-pe-19{padding-right:10rem!important}.ms-px-19{padding-left:10rem!important;padding-right:10rem!important}.ms-py-19{padding-top:10rem!important;padding-bottom:10rem!important}.ms-p-20{padding:10.5rem!important}.ms-pt-20{padding-top:10.5rem!important}.ms-pb-20{padding-bottom:10.5rem!important}.ms-ps-20{padding-left:10.5rem!important}.ms-pe-20{padding-right:10.5rem!important}.ms-px-20{padding-left:10.5rem!important;padding-right:10.5rem!important}.ms-py-20{padding-top:10.5rem!important;padding-bottom:10.5rem!important}.ms-p-auto{padding:auto!important}.ms-pt-auto{padding-top:auto!important}.ms-pb-auto{padding-bottom:auto!important}.ms-ps-auto{padding-left:auto!important}.ms-pe-auto{padding-right:auto!important}.ms-px-auto{padding-left:auto!important;padding-right:auto!important}.ms-py-auto{padding-top:auto!important;padding-bottom:auto!important}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent;border-radius:6px}::-webkit-scrollbar-thumb{border-radius:6px;background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843))}::-webkit-scrollbar-thumb:hover{background:#cfcfcf}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px;line-height:40px;font-weight:600;letter-spacing:-1%;margin:0%}h2{font-size:24px;line-height:30px;font-weight:600;letter-spacing:-1%;margin:0%}h3{font-size:20px;line-height:25px;font-weight:600;letter-spacing:-1%;margin:0%}p,div,span{font-size:14px;line-height:20px;font-weight:400;letter-spacing:0%}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;height:30px}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;height:32px}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:0px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;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;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control: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;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;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;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea: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;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{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}.ms-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}.radio-skeleton{border-radius:50%;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] });
+        ], usesOnChanges: true, ngImport: i0, template: "<label class=\"ms-radio\"\n       [class.checked]=\"checked\"\n       [class.disabled]=\"disabled\"\n        [class.radio-skeleton]=\"skeleton\"\n       [class.invalid]=\"invalid\">\n       \n  @if (skeleton) {\n    <div class=\"ms-radio-skeleton\"></div>\n  } @else {\n  <input\n    type=\"radio\"\n    [name]=\"name\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    (change)=\"select()\"\n    (blur)=\"markTouched()\"\n  />\n\n  <span class=\"ms-radio-circle\">\n    <span class=\"ms-radio-dot\"></span>\n  </span>\n\n    @if (label) {\n      <span class=\"ms-label\">{{ label }}</span>\n    }\n}\n</label>\n", styles: [".radio-skeleton{border-radius:50%;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsRadioButton, decorators: [{
             type: Component,
@@ -1265,7 +1212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                             useExisting: forwardRef(() => MsRadioButton),
                             multi: true
                         }
-                    ], template: "<label class=\"ms-radio\"\n       [class.checked]=\"checked\"\n       [class.disabled]=\"disabled\"\n        [class.radio-skeleton]=\"skeleton\"\n       [class.invalid]=\"invalid\">\n       \n  @if (skeleton) {\n    <div class=\"ms-radio-skeleton\"></div>\n  } @else {\n  <input\n    type=\"radio\"\n    [name]=\"name\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    (change)=\"select()\"\n    (blur)=\"markTouched()\"\n  />\n\n  <span class=\"ms-radio-circle\">\n    <span class=\"ms-radio-dot\"></span>\n  </span>\n\n    @if (label) {\n      <span class=\"ms-label\">{{ label }}</span>\n    }\n}\n</label>\n", styles: ["@charset \"UTF-8\";.ms-content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.ms-content.collapsed{width:1590px!important}@media(min-width:992px){.ms-content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.ms-content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.ms-content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.ms-content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2)}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}.ms-h-0{height:0%!important}.ms-h-5{height:5%!important}.ms-h-10{height:10%!important}.ms-h-15{height:15%!important}.ms-h-20{height:20%!important}.ms-h-25{height:25%!important}.ms-h-30{height:30%!important}.ms-h-35{height:35%!important}.ms-h-40{height:40%!important}.ms-h-45{height:45%!important}.ms-h-50{height:50%!important}.ms-h-55{height:55%!important}.ms-h-60{height:60%!important}.ms-h-65{height:65%!important}.ms-h-70{height:70%!important}.ms-h-75{height:75%!important}.ms-h-80{height:80%!important}.ms-h-85{height:85%!important}.ms-h-90{height:90%!important}.ms-h-95{height:95%!important}.ms-h-100{height:100%!important}.ms-w-auto{width:auto!important}.ms-w-0{width:0%!important}.ms-w-5{width:5%!important}.ms-w-10{width:10%!important}.ms-w-15{width:15%!important}.ms-w-20{width:20%!important}.ms-w-25{width:25%!important}.ms-w-30{width:30%!important}.ms-w-35{width:35%!important}.ms-w-40{width:40%!important}.ms-w-45{width:45%!important}.ms-w-50{width:50%!important}.ms-w-55{width:55%!important}.ms-w-60{width:60%!important}.ms-w-65{width:65%!important}.ms-w-70{width:70%!important}.ms-w-75{width:75%!important}.ms-w-80{width:80%!important}.ms-w-85{width:85%!important}.ms-w-90{width:90%!important}.ms-w-95{width:95%!important}.ms-w-100{width:100%!important}.ms-p-0{margin:0!important}.ms-pt-0{margin-top:0!important}.ms-pb-0{margin-bottom:0!important}.ms-ps-0{margin-left:0!important}.ms-pe-0{margin-right:0!important}.ms-px-0{margin-left:0!important;margin-right:0!important}.ms-py-0{margin-top:0!important;margin-bottom:0!important}.ms-p-1{margin:.25rem!important}.ms-pt-1{margin-top:.25rem!important}.ms-pb-1{margin-bottom:.25rem!important}.ms-ps-1{margin-left:.25rem!important}.ms-pe-1{margin-right:.25rem!important}.ms-px-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-py-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-p-2{margin:.5rem!important}.ms-pt-2{margin-top:.5rem!important}.ms-pb-2{margin-bottom:.5rem!important}.ms-ps-2{margin-left:.5rem!important}.ms-pe-2{margin-right:.5rem!important}.ms-px-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-py-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-p-3{margin:1rem!important}.ms-pt-3{margin-top:1rem!important}.ms-pb-3{margin-bottom:1rem!important}.ms-ps-3{margin-left:1rem!important}.ms-pe-3{margin-right:1rem!important}.ms-px-3{margin-left:1rem!important;margin-right:1rem!important}.ms-py-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-p-4{margin:1.5rem!important}.ms-pt-4{margin-top:1.5rem!important}.ms-pb-4{margin-bottom:1.5rem!important}.ms-ps-4{margin-left:1.5rem!important}.ms-pe-4{margin-right:1.5rem!important}.ms-px-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-py-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-p-5{margin:3rem!important}.ms-pt-5{margin-top:3rem!important}.ms-pb-5{margin-bottom:3rem!important}.ms-ps-5{margin-left:3rem!important}.ms-pe-5{margin-right:3rem!important}.ms-px-5{margin-left:3rem!important;margin-right:3rem!important}.ms-py-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-p-6{margin:3.5rem!important}.ms-pt-6{margin-top:3.5rem!important}.ms-pb-6{margin-bottom:3.5rem!important}.ms-ps-6{margin-left:3.5rem!important}.ms-pe-6{margin-right:3.5rem!important}.ms-px-6{margin-left:3.5rem!important;margin-right:3.5rem!important}.ms-py-6{margin-top:3.5rem!important;margin-bottom:3.5rem!important}.ms-p-7{margin:4rem!important}.ms-pt-7{margin-top:4rem!important}.ms-pb-7{margin-bottom:4rem!important}.ms-ps-7{margin-left:4rem!important}.ms-pe-7{margin-right:4rem!important}.ms-px-7{margin-left:4rem!important;margin-right:4rem!important}.ms-py-7{margin-top:4rem!important;margin-bottom:4rem!important}.ms-p-8{margin:4.5rem!important}.ms-pt-8{margin-top:4.5rem!important}.ms-pb-8{margin-bottom:4.5rem!important}.ms-ps-8{margin-left:4.5rem!important}.ms-pe-8{margin-right:4.5rem!important}.ms-px-8{margin-left:4.5rem!important;margin-right:4.5rem!important}.ms-py-8{margin-top:4.5rem!important;margin-bottom:4.5rem!important}.ms-p-9{margin:5rem!important}.ms-pt-9{margin-top:5rem!important}.ms-pb-9{margin-bottom:5rem!important}.ms-ps-9{margin-left:5rem!important}.ms-pe-9{margin-right:5rem!important}.ms-px-9{margin-left:5rem!important;margin-right:5rem!important}.ms-py-9{margin-top:5rem!important;margin-bottom:5rem!important}.ms-p-10{margin:5.5rem!important}.ms-pt-10{margin-top:5.5rem!important}.ms-pb-10{margin-bottom:5.5rem!important}.ms-ps-10{margin-left:5.5rem!important}.ms-pe-10{margin-right:5.5rem!important}.ms-px-10{margin-left:5.5rem!important;margin-right:5.5rem!important}.ms-py-10{margin-top:5.5rem!important;margin-bottom:5.5rem!important}.ms-p-11{margin:6rem!important}.ms-pt-11{margin-top:6rem!important}.ms-pb-11{margin-bottom:6rem!important}.ms-ps-11{margin-left:6rem!important}.ms-pe-11{margin-right:6rem!important}.ms-px-11{margin-left:6rem!important;margin-right:6rem!important}.ms-py-11{margin-top:6rem!important;margin-bottom:6rem!important}.ms-p-12{margin:6.5rem!important}.ms-pt-12{margin-top:6.5rem!important}.ms-pb-12{margin-bottom:6.5rem!important}.ms-ps-12{margin-left:6.5rem!important}.ms-pe-12{margin-right:6.5rem!important}.ms-px-12{margin-left:6.5rem!important;margin-right:6.5rem!important}.ms-py-12{margin-top:6.5rem!important;margin-bottom:6.5rem!important}.ms-p-13{margin:7rem!important}.ms-pt-13{margin-top:7rem!important}.ms-pb-13{margin-bottom:7rem!important}.ms-ps-13{margin-left:7rem!important}.ms-pe-13{margin-right:7rem!important}.ms-px-13{margin-left:7rem!important;margin-right:7rem!important}.ms-py-13{margin-top:7rem!important;margin-bottom:7rem!important}.ms-p-14{margin:7.5rem!important}.ms-pt-14{margin-top:7.5rem!important}.ms-pb-14{margin-bottom:7.5rem!important}.ms-ps-14{margin-left:7.5rem!important}.ms-pe-14{margin-right:7.5rem!important}.ms-px-14{margin-left:7.5rem!important;margin-right:7.5rem!important}.ms-py-14{margin-top:7.5rem!important;margin-bottom:7.5rem!important}.ms-p-15{margin:8rem!important}.ms-pt-15{margin-top:8rem!important}.ms-pb-15{margin-bottom:8rem!important}.ms-ps-15{margin-left:8rem!important}.ms-pe-15{margin-right:8rem!important}.ms-px-15{margin-left:8rem!important;margin-right:8rem!important}.ms-py-15{margin-top:8rem!important;margin-bottom:8rem!important}.ms-p-16{margin:8.5rem!important}.ms-pt-16{margin-top:8.5rem!important}.ms-pb-16{margin-bottom:8.5rem!important}.ms-ps-16{margin-left:8.5rem!important}.ms-pe-16{margin-right:8.5rem!important}.ms-px-16{margin-left:8.5rem!important;margin-right:8.5rem!important}.ms-py-16{margin-top:8.5rem!important;margin-bottom:8.5rem!important}.ms-p-17{margin:9rem!important}.ms-pt-17{margin-top:9rem!important}.ms-pb-17{margin-bottom:9rem!important}.ms-ps-17{margin-left:9rem!important}.ms-pe-17{margin-right:9rem!important}.ms-px-17{margin-left:9rem!important;margin-right:9rem!important}.ms-py-17{margin-top:9rem!important;margin-bottom:9rem!important}.ms-p-18{margin:9.5rem!important}.ms-pt-18{margin-top:9.5rem!important}.ms-pb-18{margin-bottom:9.5rem!important}.ms-ps-18{margin-left:9.5rem!important}.ms-pe-18{margin-right:9.5rem!important}.ms-px-18{margin-left:9.5rem!important;margin-right:9.5rem!important}.ms-py-18{margin-top:9.5rem!important;margin-bottom:9.5rem!important}.ms-p-19{margin:10rem!important}.ms-pt-19{margin-top:10rem!important}.ms-pb-19{margin-bottom:10rem!important}.ms-ps-19{margin-left:10rem!important}.ms-pe-19{margin-right:10rem!important}.ms-px-19{margin-left:10rem!important;margin-right:10rem!important}.ms-py-19{margin-top:10rem!important;margin-bottom:10rem!important}.ms-p-20{margin:10.5rem!important}.ms-pt-20{margin-top:10.5rem!important}.ms-pb-20{margin-bottom:10.5rem!important}.ms-ps-20{margin-left:10.5rem!important}.ms-pe-20{margin-right:10.5rem!important}.ms-px-20{margin-left:10.5rem!important;margin-right:10.5rem!important}.ms-py-20{margin-top:10.5rem!important;margin-bottom:10.5rem!important}.ms-m-auto{margin:auto!important}.ms-mt-auto{margin-top:auto!important}.ms-mb-auto{margin-bottom:auto!important}.ms-ms-auto{margin-left:auto!important}.ms-me-auto{margin-right:auto!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-my-auto{margin-top:auto!important;margin-bottom:auto!important}.ms-p-0{padding:0!important}.ms-pt-0{padding-top:0!important}.ms-pb-0{padding-bottom:0!important}.ms-ps-0{padding-left:0!important}.ms-pe-0{padding-right:0!important}.ms-px-0{padding-left:0!important;padding-right:0!important}.ms-py-0{padding-top:0!important;padding-bottom:0!important}.ms-p-1{padding:.25rem!important}.ms-pt-1{padding-top:.25rem!important}.ms-pb-1{padding-bottom:.25rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-px-1{padding-left:.25rem!important;padding-right:.25rem!important}.ms-py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-pb-2{padding-bottom:.5rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-px-2{padding-left:.5rem!important;padding-right:.5rem!important}.ms-py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.ms-p-3{padding:1rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-ps-3{padding-left:1rem!important}.ms-pe-3{padding-right:1rem!important}.ms-px-3{padding-left:1rem!important;padding-right:1rem!important}.ms-py-3{padding-top:1rem!important;padding-bottom:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pb-4{padding-bottom:1.5rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-px-4{padding-left:1.5rem!important;padding-right:1.5rem!important}.ms-py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pb-5{padding-bottom:3rem!important}.ms-ps-5{padding-left:3rem!important}.ms-pe-5{padding-right:3rem!important}.ms-px-5{padding-left:3rem!important;padding-right:3rem!important}.ms-py-5{padding-top:3rem!important;padding-bottom:3rem!important}.ms-p-6{padding:3.5rem!important}.ms-pt-6{padding-top:3.5rem!important}.ms-pb-6{padding-bottom:3.5rem!important}.ms-ps-6{padding-left:3.5rem!important}.ms-pe-6{padding-right:3.5rem!important}.ms-px-6{padding-left:3.5rem!important;padding-right:3.5rem!important}.ms-py-6{padding-top:3.5rem!important;padding-bottom:3.5rem!important}.ms-p-7{padding:4rem!important}.ms-pt-7{padding-top:4rem!important}.ms-pb-7{padding-bottom:4rem!important}.ms-ps-7{padding-left:4rem!important}.ms-pe-7{padding-right:4rem!important}.ms-px-7{padding-left:4rem!important;padding-right:4rem!important}.ms-py-7{padding-top:4rem!important;padding-bottom:4rem!important}.ms-p-8{padding:4.5rem!important}.ms-pt-8{padding-top:4.5rem!important}.ms-pb-8{padding-bottom:4.5rem!important}.ms-ps-8{padding-left:4.5rem!important}.ms-pe-8{padding-right:4.5rem!important}.ms-px-8{padding-left:4.5rem!important;padding-right:4.5rem!important}.ms-py-8{padding-top:4.5rem!important;padding-bottom:4.5rem!important}.ms-p-9{padding:5rem!important}.ms-pt-9{padding-top:5rem!important}.ms-pb-9{padding-bottom:5rem!important}.ms-ps-9{padding-left:5rem!important}.ms-pe-9{padding-right:5rem!important}.ms-px-9{padding-left:5rem!important;padding-right:5rem!important}.ms-py-9{padding-top:5rem!important;padding-bottom:5rem!important}.ms-p-10{padding:5.5rem!important}.ms-pt-10{padding-top:5.5rem!important}.ms-pb-10{padding-bottom:5.5rem!important}.ms-ps-10{padding-left:5.5rem!important}.ms-pe-10{padding-right:5.5rem!important}.ms-px-10{padding-left:5.5rem!important;padding-right:5.5rem!important}.ms-py-10{padding-top:5.5rem!important;padding-bottom:5.5rem!important}.ms-p-11{padding:6rem!important}.ms-pt-11{padding-top:6rem!important}.ms-pb-11{padding-bottom:6rem!important}.ms-ps-11{padding-left:6rem!important}.ms-pe-11{padding-right:6rem!important}.ms-px-11{padding-left:6rem!important;padding-right:6rem!important}.ms-py-11{padding-top:6rem!important;padding-bottom:6rem!important}.ms-p-12{padding:6.5rem!important}.ms-pt-12{padding-top:6.5rem!important}.ms-pb-12{padding-bottom:6.5rem!important}.ms-ps-12{padding-left:6.5rem!important}.ms-pe-12{padding-right:6.5rem!important}.ms-px-12{padding-left:6.5rem!important;padding-right:6.5rem!important}.ms-py-12{padding-top:6.5rem!important;padding-bottom:6.5rem!important}.ms-p-13{padding:7rem!important}.ms-pt-13{padding-top:7rem!important}.ms-pb-13{padding-bottom:7rem!important}.ms-ps-13{padding-left:7rem!important}.ms-pe-13{padding-right:7rem!important}.ms-px-13{padding-left:7rem!important;padding-right:7rem!important}.ms-py-13{padding-top:7rem!important;padding-bottom:7rem!important}.ms-p-14{padding:7.5rem!important}.ms-pt-14{padding-top:7.5rem!important}.ms-pb-14{padding-bottom:7.5rem!important}.ms-ps-14{padding-left:7.5rem!important}.ms-pe-14{padding-right:7.5rem!important}.ms-px-14{padding-left:7.5rem!important;padding-right:7.5rem!important}.ms-py-14{padding-top:7.5rem!important;padding-bottom:7.5rem!important}.ms-p-15{padding:8rem!important}.ms-pt-15{padding-top:8rem!important}.ms-pb-15{padding-bottom:8rem!important}.ms-ps-15{padding-left:8rem!important}.ms-pe-15{padding-right:8rem!important}.ms-px-15{padding-left:8rem!important;padding-right:8rem!important}.ms-py-15{padding-top:8rem!important;padding-bottom:8rem!important}.ms-p-16{padding:8.5rem!important}.ms-pt-16{padding-top:8.5rem!important}.ms-pb-16{padding-bottom:8.5rem!important}.ms-ps-16{padding-left:8.5rem!important}.ms-pe-16{padding-right:8.5rem!important}.ms-px-16{padding-left:8.5rem!important;padding-right:8.5rem!important}.ms-py-16{padding-top:8.5rem!important;padding-bottom:8.5rem!important}.ms-p-17{padding:9rem!important}.ms-pt-17{padding-top:9rem!important}.ms-pb-17{padding-bottom:9rem!important}.ms-ps-17{padding-left:9rem!important}.ms-pe-17{padding-right:9rem!important}.ms-px-17{padding-left:9rem!important;padding-right:9rem!important}.ms-py-17{padding-top:9rem!important;padding-bottom:9rem!important}.ms-p-18{padding:9.5rem!important}.ms-pt-18{padding-top:9.5rem!important}.ms-pb-18{padding-bottom:9.5rem!important}.ms-ps-18{padding-left:9.5rem!important}.ms-pe-18{padding-right:9.5rem!important}.ms-px-18{padding-left:9.5rem!important;padding-right:9.5rem!important}.ms-py-18{padding-top:9.5rem!important;padding-bottom:9.5rem!important}.ms-p-19{padding:10rem!important}.ms-pt-19{padding-top:10rem!important}.ms-pb-19{padding-bottom:10rem!important}.ms-ps-19{padding-left:10rem!important}.ms-pe-19{padding-right:10rem!important}.ms-px-19{padding-left:10rem!important;padding-right:10rem!important}.ms-py-19{padding-top:10rem!important;padding-bottom:10rem!important}.ms-p-20{padding:10.5rem!important}.ms-pt-20{padding-top:10.5rem!important}.ms-pb-20{padding-bottom:10.5rem!important}.ms-ps-20{padding-left:10.5rem!important}.ms-pe-20{padding-right:10.5rem!important}.ms-px-20{padding-left:10.5rem!important;padding-right:10.5rem!important}.ms-py-20{padding-top:10.5rem!important;padding-bottom:10.5rem!important}.ms-p-auto{padding:auto!important}.ms-pt-auto{padding-top:auto!important}.ms-pb-auto{padding-bottom:auto!important}.ms-ps-auto{padding-left:auto!important}.ms-pe-auto{padding-right:auto!important}.ms-px-auto{padding-left:auto!important;padding-right:auto!important}.ms-py-auto{padding-top:auto!important;padding-bottom:auto!important}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent;border-radius:6px}::-webkit-scrollbar-thumb{border-radius:6px;background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843))}::-webkit-scrollbar-thumb:hover{background:#cfcfcf}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px;line-height:40px;font-weight:600;letter-spacing:-1%;margin:0%}h2{font-size:24px;line-height:30px;font-weight:600;letter-spacing:-1%;margin:0%}h3{font-size:20px;line-height:25px;font-weight:600;letter-spacing:-1%;margin:0%}p,div,span{font-size:14px;line-height:20px;font-weight:400;letter-spacing:0%}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;height:30px}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;height:32px}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:0px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;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;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control: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;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;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;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea: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;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{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}.ms-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}.radio-skeleton{border-radius:50%;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+                    ], template: "<label class=\"ms-radio\"\n       [class.checked]=\"checked\"\n       [class.disabled]=\"disabled\"\n        [class.radio-skeleton]=\"skeleton\"\n       [class.invalid]=\"invalid\">\n       \n  @if (skeleton) {\n    <div class=\"ms-radio-skeleton\"></div>\n  } @else {\n  <input\n    type=\"radio\"\n    [name]=\"name\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    (change)=\"select()\"\n    (blur)=\"markTouched()\"\n  />\n\n  <span class=\"ms-radio-circle\">\n    <span class=\"ms-radio-dot\"></span>\n  </span>\n\n    @if (label) {\n      <span class=\"ms-label\">{{ label }}</span>\n    }\n}\n</label>\n", styles: [".radio-skeleton{border-radius:50%;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], name: [{
@@ -2215,7 +2162,7 @@ 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()\">\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"] }] });
+        ], 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: [""], 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,
@@ -2225,7 +2172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                             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()\">\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"] }]
+                    ], 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>" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { type: [{
                 type: Input
             }], id: [{
@@ -2633,7 +2580,7 @@ class MsTextArea {
                 useExisting: forwardRef(() => MsTextArea),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }], ngImport: i0, 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\" [showFlagImage]=\"false\" [searchable]=\"false\" (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\" [showFlagImage]=\"false\" [searchable]=\"false\" [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\" [showFlagImage]=\"false\" [searchable]=\"false\" [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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: MsButton, selector: "ms-button", inputs: ["type", "variant", "size", "block", "disabled", "isBorder", "textSrc", "icon", "iconPosition", "iconOnly", "class", "buttonType"], outputs: ["htmlChange", "click"] }, { 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"] }] });
+        ], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }], ngImport: i0, 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\" [showFlagImage]=\"false\" [searchable]=\"false\" (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\" [showFlagImage]=\"false\" [searchable]=\"false\" [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\" [showFlagImage]=\"false\" [searchable]=\"false\" [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: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: MsButton, selector: "ms-button", inputs: ["type", "variant", "size", "block", "disabled", "isBorder", "textSrc", "icon", "iconPosition", "iconOnly", "class", "buttonType"], outputs: ["htmlChange", "click"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTextArea, decorators: [{
             type: Component,
@@ -2643,7 +2590,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                             useExisting: forwardRef(() => MsTextArea),
                             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\" [showFlagImage]=\"false\" [searchable]=\"false\" (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\" [showFlagImage]=\"false\" [searchable]=\"false\" [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\" [showFlagImage]=\"false\" [searchable]=\"false\" [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"] }]
+                    ], 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\" [showFlagImage]=\"false\" [searchable]=\"false\" (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\" [showFlagImage]=\"false\" [searchable]=\"false\" [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\" [showFlagImage]=\"false\" [searchable]=\"false\" [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>" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -3091,11 +3038,11 @@ class MsPagination {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsPagination, isStandalone: true, selector: "ms-pagination", inputs: { totalItems: "totalItems", pageSize: "pageSize", currentPage: "currentPage", pageSizeOptions: "pageSizeOptions", loading: "loading", disabled: "disabled" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ms-pagination\" [class.disabled]=\"disabled\">\n    <div class=\"ms-page-size\">\n        <div class=\"custom-select\" [class.open-up]=\"openUp\">\n            <div class=\"selected\" (click)=\"toggleDropdown($event)\">\n                <span>\n                    {{ selectedPageSize }}\n                </span>\n                <div class=\"arrow-icon\">\n                    <ms-icon [name]=\"'chevron-down'\" *ngIf=\"!dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n                    <ms-icon [name]=\"'chevron-up'\" *ngIf=\"dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n                </div>\n            </div>\n            <ul class=\"options\" *ngIf=\"dropdownOpen\">\n                <li *ngFor=\"let s of pageSizeOptions\" (click)=\"changePageSize(s)\">\n                    {{ s }}\n                    <span *ngIf=\"s === selectedPageSize\" class=\"tick-icon\">\n                        <ms-icon [name]=\"'check'\" [color]=\"'ms-icon-blue'\"></ms-icon>\n                    </span>\n                </li>\n            </ul>\n        </div>\n        <span class=\"ms-muted\">per page</span>\n        <div class=\"ms-vl\"></div>\n\n        <div class=\"ms-results\">\n            Showing {{ fromRecord }}\u2013{{ toRecord }} of {{ totalItems }} results\n        </div>\n    </div>\n    <div class=\"ms-pages\">\n        <button class=\"ms-page-btn\" (click)=\"prev()\" [disabled]=\"currentPage === 1 || loading || disabled\">\u2039</button>\n        <button *ngFor=\"let p of pages\" class=\"ms-page-btn\" [class.active]=\"p === currentPage\"\n            [disabled]=\"isEllipsis(p) || loading || disabled\" (click)=\"changePage(p)\">\n            {{ p }}\n        </button>\n        <button class=\"ms-page-btn\" (click)=\"next()\"\n            [disabled]=\"currentPage === totalPages || loading || disabled\">\u203A</button>\n    </div>\n    <div class=\"loader\" *ngIf=\"loading\">Loading...</div>\n</div>", styles: [".ms-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;color:#323130}.ms-page-size{display:flex;align-items:center;gap:6px}.ms-select:focus{border-color:#0084ff!important}.ms-select:focus-visible{outline-color:#0084ff!important}.ms-muted,.ms-results{font-size:14px!important;font-weight:400!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)}.ms-pages{display:flex;align-items:center;gap:4px}.ms-page-btn{min-width:32px;height:32px;padding:0 6px;border:1px solid transparent;background:transparent;border-radius:8px;font-size:14px;color:#6a6b6d;cursor:pointer}.ms-page-btn:hover:not(.active):not(.disabled){background-color:#f5f5f5!important}.ms-page-btn.active{border:1px solid #ccc;color:#1b1f22}.ms-page-btn.disabled{color:#a19f9d;cursor:not-allowed}.ms-page-btn:focus{border:1px solid #0084FF!important}.ms-ellipsis{padding:0 4px;color:#605e5c}.ms-vl{height:20px;width:1px;background-color:#ccc!important}.custom-select{position:relative;width:55px;height:26px;padding:2px 8px!important;font-size:14px;border:1px solid #c8c6c4;border-radius:8px;background-color:#fff;font-weight:500!important;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.selected{margin-top:2px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.options{position:absolute;top:100%;left:0;width:100%;border:1px solid #ccc;background:#fff;list-style:none;margin:4px 0 0;padding:0;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.options li{padding:5px 10px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:#1b1f22;font-family:Family/Sans;font-weight:500!important;font-style:Regular;font-size:14px!important;line-height:18px!important;letter-spacing:0%}.tick-icon{color:green;font-weight:700}.arrow-icon ::ng-deep svg{margin-top:2px}.custom-select:not(.open-up) .options{top:100%}.custom-select.open-up .options{bottom: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: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsPagination, isStandalone: true, selector: "ms-pagination", inputs: { totalItems: "totalItems", pageSize: "pageSize", currentPage: "currentPage", pageSizeOptions: "pageSizeOptions", loading: "loading", disabled: "disabled" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ms-pagination\" [class.disabled]=\"disabled\">\n    <div class=\"ms-page-size\">\n        <div class=\"custom-select\" [class.open-up]=\"openUp\">\n            <div class=\"selected\" (click)=\"toggleDropdown($event)\">\n                <span>\n                    {{ selectedPageSize }}\n                </span>\n                <div class=\"arrow-icon\">\n                    <ms-icon [name]=\"'chevron-down'\" *ngIf=\"!dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n                    <ms-icon [name]=\"'chevron-up'\" *ngIf=\"dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n                </div>\n            </div>\n            <ul class=\"options\" *ngIf=\"dropdownOpen\">\n                <li *ngFor=\"let s of pageSizeOptions\" (click)=\"changePageSize(s)\">\n                    {{ s }}\n                    <span *ngIf=\"s === selectedPageSize\" class=\"tick-icon\">\n                        <ms-icon [name]=\"'check'\" [color]=\"'ms-icon-blue'\"></ms-icon>\n                    </span>\n                </li>\n            </ul>\n        </div>\n        <span class=\"ms-muted\">per page</span>\n        <div class=\"ms-vl\"></div>\n\n        <div class=\"ms-results\">\n            Showing {{ fromRecord }}\u2013{{ toRecord }} of {{ totalItems }} results\n        </div>\n    </div>\n    <div class=\"ms-pages\">\n        <button class=\"ms-page-btn\" (click)=\"prev()\" [disabled]=\"currentPage === 1 || loading || disabled\">\u2039</button>\n        <button *ngFor=\"let p of pages\" class=\"ms-page-btn\" [class.active]=\"p === currentPage\"\n            [disabled]=\"isEllipsis(p) || loading || disabled\" (click)=\"changePage(p)\">\n            {{ p }}\n        </button>\n        <button class=\"ms-page-btn\" (click)=\"next()\"\n            [disabled]=\"currentPage === totalPages || loading || disabled\">\u203A</button>\n    </div>\n    <div class=\"loader\" *ngIf=\"loading\">Loading...</div>\n</div>", styles: [""], 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: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsPagination, decorators: [{
             type: Component,
-            args: [{ selector: 'ms-pagination', imports: [CommonModule, FormsModule, MsIcon], template: "<div class=\"ms-pagination\" [class.disabled]=\"disabled\">\n    <div class=\"ms-page-size\">\n        <div class=\"custom-select\" [class.open-up]=\"openUp\">\n            <div class=\"selected\" (click)=\"toggleDropdown($event)\">\n                <span>\n                    {{ selectedPageSize }}\n                </span>\n                <div class=\"arrow-icon\">\n                    <ms-icon [name]=\"'chevron-down'\" *ngIf=\"!dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n                    <ms-icon [name]=\"'chevron-up'\" *ngIf=\"dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n                </div>\n            </div>\n            <ul class=\"options\" *ngIf=\"dropdownOpen\">\n                <li *ngFor=\"let s of pageSizeOptions\" (click)=\"changePageSize(s)\">\n                    {{ s }}\n                    <span *ngIf=\"s === selectedPageSize\" class=\"tick-icon\">\n                        <ms-icon [name]=\"'check'\" [color]=\"'ms-icon-blue'\"></ms-icon>\n                    </span>\n                </li>\n            </ul>\n        </div>\n        <span class=\"ms-muted\">per page</span>\n        <div class=\"ms-vl\"></div>\n\n        <div class=\"ms-results\">\n            Showing {{ fromRecord }}\u2013{{ toRecord }} of {{ totalItems }} results\n        </div>\n    </div>\n    <div class=\"ms-pages\">\n        <button class=\"ms-page-btn\" (click)=\"prev()\" [disabled]=\"currentPage === 1 || loading || disabled\">\u2039</button>\n        <button *ngFor=\"let p of pages\" class=\"ms-page-btn\" [class.active]=\"p === currentPage\"\n            [disabled]=\"isEllipsis(p) || loading || disabled\" (click)=\"changePage(p)\">\n            {{ p }}\n        </button>\n        <button class=\"ms-page-btn\" (click)=\"next()\"\n            [disabled]=\"currentPage === totalPages || loading || disabled\">\u203A</button>\n    </div>\n    <div class=\"loader\" *ngIf=\"loading\">Loading...</div>\n</div>", styles: [".ms-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;color:#323130}.ms-page-size{display:flex;align-items:center;gap:6px}.ms-select:focus{border-color:#0084ff!important}.ms-select:focus-visible{outline-color:#0084ff!important}.ms-muted,.ms-results{font-size:14px!important;font-weight:400!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)}.ms-pages{display:flex;align-items:center;gap:4px}.ms-page-btn{min-width:32px;height:32px;padding:0 6px;border:1px solid transparent;background:transparent;border-radius:8px;font-size:14px;color:#6a6b6d;cursor:pointer}.ms-page-btn:hover:not(.active):not(.disabled){background-color:#f5f5f5!important}.ms-page-btn.active{border:1px solid #ccc;color:#1b1f22}.ms-page-btn.disabled{color:#a19f9d;cursor:not-allowed}.ms-page-btn:focus{border:1px solid #0084FF!important}.ms-ellipsis{padding:0 4px;color:#605e5c}.ms-vl{height:20px;width:1px;background-color:#ccc!important}.custom-select{position:relative;width:55px;height:26px;padding:2px 8px!important;font-size:14px;border:1px solid #c8c6c4;border-radius:8px;background-color:#fff;font-weight:500!important;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.selected{margin-top:2px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.options{position:absolute;top:100%;left:0;width:100%;border:1px solid #ccc;background:#fff;list-style:none;margin:4px 0 0;padding:0;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.options li{padding:5px 10px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:#1b1f22;font-family:Family/Sans;font-weight:500!important;font-style:Regular;font-size:14px!important;line-height:18px!important;letter-spacing:0%}.tick-icon{color:green;font-weight:700}.arrow-icon ::ng-deep svg{margin-top:2px}.custom-select:not(.open-up) .options{top:100%}.custom-select.open-up .options{bottom:100%}\n"] }]
+            args: [{ selector: 'ms-pagination', imports: [CommonModule, FormsModule, MsIcon], template: "<div class=\"ms-pagination\" [class.disabled]=\"disabled\">\n    <div class=\"ms-page-size\">\n        <div class=\"custom-select\" [class.open-up]=\"openUp\">\n            <div class=\"selected\" (click)=\"toggleDropdown($event)\">\n                <span>\n                    {{ selectedPageSize }}\n                </span>\n                <div class=\"arrow-icon\">\n                    <ms-icon [name]=\"'chevron-down'\" *ngIf=\"!dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n                    <ms-icon [name]=\"'chevron-up'\" *ngIf=\"dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n                </div>\n            </div>\n            <ul class=\"options\" *ngIf=\"dropdownOpen\">\n                <li *ngFor=\"let s of pageSizeOptions\" (click)=\"changePageSize(s)\">\n                    {{ s }}\n                    <span *ngIf=\"s === selectedPageSize\" class=\"tick-icon\">\n                        <ms-icon [name]=\"'check'\" [color]=\"'ms-icon-blue'\"></ms-icon>\n                    </span>\n                </li>\n            </ul>\n        </div>\n        <span class=\"ms-muted\">per page</span>\n        <div class=\"ms-vl\"></div>\n\n        <div class=\"ms-results\">\n            Showing {{ fromRecord }}\u2013{{ toRecord }} of {{ totalItems }} results\n        </div>\n    </div>\n    <div class=\"ms-pages\">\n        <button class=\"ms-page-btn\" (click)=\"prev()\" [disabled]=\"currentPage === 1 || loading || disabled\">\u2039</button>\n        <button *ngFor=\"let p of pages\" class=\"ms-page-btn\" [class.active]=\"p === currentPage\"\n            [disabled]=\"isEllipsis(p) || loading || disabled\" (click)=\"changePage(p)\">\n            {{ p }}\n        </button>\n        <button class=\"ms-page-btn\" (click)=\"next()\"\n            [disabled]=\"currentPage === totalPages || loading || disabled\">\u203A</button>\n    </div>\n    <div class=\"loader\" *ngIf=\"loading\">Loading...</div>\n</div>" }]
         }], propDecorators: { totalItems: [{
                 type: Input
             }], pageSize: [{
@@ -3348,11 +3295,11 @@ class MsSidebar {
         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$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" }] });
+    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: [""], 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"] }]
+            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>" }]
         }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i2$2.Router }, { type: TopbarService }], propDecorators: { id: [{
                 type: Input
             }], search: [{
@@ -3387,11 +3334,11 @@ class MsTooltip {
         return this.text.split('\n').slice(1, 4); // max 3 lines
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsTooltip, isStandalone: true, selector: "ms-tooltip", inputs: { text: "text", position: "position", bgColor: "bgColor", showArrow: "showArrow" }, ngImport: i0, template: "<div class=\"tooltip-container\" \n     [ngClass]=\"[position, showArrow ? 'with-arrow' : 'no-arrow']\"\n     [ngStyle]=\"{'background-color': bgColor}\">\n  <div class=\"tooltip-title\">{{ title }}</div>\n  <div class=\"tooltip-paragraph\">\n    <div *ngFor=\"let line of paragraphLines\" class=\"tooltip-line\">\n      {{ line }}\n    </div>\n  </div>\n</div>\n", styles: [".tooltip-trigger{cursor:pointer;border:none;background:#007bff;color:#fff;padding:6px 12px;font-size:14px;border-radius:4px}.tooltip-wrapper:hover .tooltip-container{display:block}.top{bottom:100%;left:50%;transform:translate(-50%);margin-bottom:8px}.bottom{top:100%;left:50%;transform:translate(-50%);margin-top:8px}.left{right:100%;top:50%;transform:translateY(-50%);margin-right:8px}.right{left:100%;top:50%;transform:translateY(-50%);margin-left:8px}.top-left{bottom:100%;left:0;margin-bottom:8px;transform:none}.top-right{bottom:100%;right:0;margin-bottom:8px;transform:none}.bottom-left{top:100%;left:0;margin-top:8px;transform:none}.bottom-right{top:100%;right:0;margin-top:8px;transform:none}.tooltip-container.with-arrow:after{content:\"\";position:absolute;border-style:solid}.tooltip-container.no-arrow:after{display:none}.top.with-arrow:after{top:100%;left:50%;transform:translate(-50%);border-width:6px 6px 0 6px;border-color:#0E0F10 transparent transparent transparent}.bottom.with-arrow:after{bottom:100%;left:50%;transform:translate(-50%);border-width:0 6px 6px 6px;border-color:transparent transparent #0E0F10 transparent}.left.with-arrow:after{top:50%;left:100%;transform:translateY(-50%);border-width:6px 0 6px 6px;border-color:transparent transparent transparent #0E0F10}.right.with-arrow:after{top:50%;right:100%;transform:translateY(-50%);border-width:6px 6px 6px 0;border-color:transparent #0E0F10 transparent transparent}.top-left.with-arrow:after{top:100%;left:16px;transform:none;border-width:6px 6px 0 6px;border-color:#0E0F10 transparent transparent transparent}.top-right.with-arrow:after{top:100%;right:16px;transform:none;border-width:6px 6px 0 6px;border-color:#0E0F10 transparent transparent transparent}.bottom-left.with-arrow:after{bottom:100%;left:16px;transform:none;border-width:0 6px 6px 6px;border-color:transparent transparent #0E0F10 transparent}.bottom-right.with-arrow:after{bottom:100%;right:16px;transform:none;border-width:0 6px 6px 6px;border-color:transparent transparent #0E0F10 transparent}.tooltip-title{font-weight:700;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tooltip-paragraph{display:flex;flex-direction:column;text-align:left}.tooltip-line{line-height:1.2;margin-bottom:2px;word-wrap:break-word;overflow-wrap:break-word;text-align:left}.tooltip-wrapper{position:relative;display:inline-block}.tooltip-container{position:absolute;padding:6px 10px;color:#fff;font-size:12px;border-radius:4px;white-space:nowrap;z-index:1000;box-shadow:0 2px 6px #0000004d;background-color:#0e0f10}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsTooltip, isStandalone: true, selector: "ms-tooltip", inputs: { text: "text", position: "position", bgColor: "bgColor", showArrow: "showArrow" }, ngImport: i0, template: "<div class=\"tooltip-container\" \n     [ngClass]=\"[position, showArrow ? 'with-arrow' : 'no-arrow']\"\n     [ngStyle]=\"{'background-color': bgColor}\">\n  <div class=\"tooltip-title\">{{ title }}</div>\n  <div class=\"tooltip-paragraph\">\n    <div *ngFor=\"let line of paragraphLines\" class=\"tooltip-line\">\n      {{ line }}\n    </div>\n  </div>\n</div>\n", styles: [""], 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTooltip, decorators: [{
             type: Component,
-            args: [{ selector: 'ms-tooltip', imports: [CommonModule], template: "<div class=\"tooltip-container\" \n     [ngClass]=\"[position, showArrow ? 'with-arrow' : 'no-arrow']\"\n     [ngStyle]=\"{'background-color': bgColor}\">\n  <div class=\"tooltip-title\">{{ title }}</div>\n  <div class=\"tooltip-paragraph\">\n    <div *ngFor=\"let line of paragraphLines\" class=\"tooltip-line\">\n      {{ line }}\n    </div>\n  </div>\n</div>\n", styles: [".tooltip-trigger{cursor:pointer;border:none;background:#007bff;color:#fff;padding:6px 12px;font-size:14px;border-radius:4px}.tooltip-wrapper:hover .tooltip-container{display:block}.top{bottom:100%;left:50%;transform:translate(-50%);margin-bottom:8px}.bottom{top:100%;left:50%;transform:translate(-50%);margin-top:8px}.left{right:100%;top:50%;transform:translateY(-50%);margin-right:8px}.right{left:100%;top:50%;transform:translateY(-50%);margin-left:8px}.top-left{bottom:100%;left:0;margin-bottom:8px;transform:none}.top-right{bottom:100%;right:0;margin-bottom:8px;transform:none}.bottom-left{top:100%;left:0;margin-top:8px;transform:none}.bottom-right{top:100%;right:0;margin-top:8px;transform:none}.tooltip-container.with-arrow:after{content:\"\";position:absolute;border-style:solid}.tooltip-container.no-arrow:after{display:none}.top.with-arrow:after{top:100%;left:50%;transform:translate(-50%);border-width:6px 6px 0 6px;border-color:#0E0F10 transparent transparent transparent}.bottom.with-arrow:after{bottom:100%;left:50%;transform:translate(-50%);border-width:0 6px 6px 6px;border-color:transparent transparent #0E0F10 transparent}.left.with-arrow:after{top:50%;left:100%;transform:translateY(-50%);border-width:6px 0 6px 6px;border-color:transparent transparent transparent #0E0F10}.right.with-arrow:after{top:50%;right:100%;transform:translateY(-50%);border-width:6px 6px 6px 0;border-color:transparent #0E0F10 transparent transparent}.top-left.with-arrow:after{top:100%;left:16px;transform:none;border-width:6px 6px 0 6px;border-color:#0E0F10 transparent transparent transparent}.top-right.with-arrow:after{top:100%;right:16px;transform:none;border-width:6px 6px 0 6px;border-color:#0E0F10 transparent transparent transparent}.bottom-left.with-arrow:after{bottom:100%;left:16px;transform:none;border-width:0 6px 6px 6px;border-color:transparent transparent #0E0F10 transparent}.bottom-right.with-arrow:after{bottom:100%;right:16px;transform:none;border-width:0 6px 6px 6px;border-color:transparent transparent #0E0F10 transparent}.tooltip-title{font-weight:700;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tooltip-paragraph{display:flex;flex-direction:column;text-align:left}.tooltip-line{line-height:1.2;margin-bottom:2px;word-wrap:break-word;overflow-wrap:break-word;text-align:left}.tooltip-wrapper{position:relative;display:inline-block}.tooltip-container{position:absolute;padding:6px 10px;color:#fff;font-size:12px;border-radius:4px;white-space:nowrap;z-index:1000;box-shadow:0 2px 6px #0000004d;background-color:#0e0f10}\n"] }]
+            args: [{ selector: 'ms-tooltip', imports: [CommonModule], template: "<div class=\"tooltip-container\" \n     [ngClass]=\"[position, showArrow ? 'with-arrow' : 'no-arrow']\"\n     [ngStyle]=\"{'background-color': bgColor}\">\n  <div class=\"tooltip-title\">{{ title }}</div>\n  <div class=\"tooltip-paragraph\">\n    <div *ngFor=\"let line of paragraphLines\" class=\"tooltip-line\">\n      {{ line }}\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { text: [{
                 type: Input
             }], position: [{
@@ -3589,11 +3536,11 @@ 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-1\">{{ 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  <!-- Invalid File Type Error Message -->\n  <div *ngIf=\"invalidFileError && invalidFileErrorMessage\" class=\"invalid-file-error-message\">\n    <p>{{ invalidFileErrorMessage }}</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: ["@charset \"UTF-8\";.file-uploader-wrapper{display:flex;flex-direction:column;gap:16px;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-top:4px;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 p{margin-top:0}.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:1px dashed #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}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-icon{width:24px;height:24px;color:#6b7280;transition:color .3s ease;padding-bottom:4px}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-text{font-size:14px!important;font-weight:400!important;color:#6a6b6d;margin:0;padding-bottom:8px}.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:400;cursor:pointer;text-decoration:underline}.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}.file-uploader-wrapper .invalid-file-error-message{padding:8px 12px;background-color:#fef2f2;border:1px solid #FCA5A5;border-radius:6px}.file-uploader-wrapper .invalid-file-error-message p{color:#dc2626;font-size:13px;margin:0;font-weight:500}.file-uploader-wrapper .invalid-file-error-message p:before{content:\"\\26a0\";margin-right:8px}.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"] }] });
+    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-1\">{{ 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  <!-- Invalid File Type Error Message -->\n  <div *ngIf=\"invalidFileError && invalidFileErrorMessage\" class=\"invalid-file-error-message\">\n    <p>{{ invalidFileErrorMessage }}</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: [""], 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,
-            args: [{ selector: 'ms-file-uploader', imports: [CommonModule, FormsModule, ReactiveFormsModule, InlineSVGModule, MsSpinner], 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-1\">{{ 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  <!-- Invalid File Type Error Message -->\n  <div *ngIf=\"invalidFileError && invalidFileErrorMessage\" class=\"invalid-file-error-message\">\n    <p>{{ invalidFileErrorMessage }}</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: ["@charset \"UTF-8\";.file-uploader-wrapper{display:flex;flex-direction:column;gap:16px;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-top:4px;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 p{margin-top:0}.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:1px dashed #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}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-icon{width:24px;height:24px;color:#6b7280;transition:color .3s ease;padding-bottom:4px}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-text{font-size:14px!important;font-weight:400!important;color:#6a6b6d;margin:0;padding-bottom:8px}.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:400;cursor:pointer;text-decoration:underline}.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}.file-uploader-wrapper .invalid-file-error-message{padding:8px 12px;background-color:#fef2f2;border:1px solid #FCA5A5;border-radius:6px}.file-uploader-wrapper .invalid-file-error-message p{color:#dc2626;font-size:13px;margin:0;font-weight:500}.file-uploader-wrapper .invalid-file-error-message p:before{content:\"\\26a0\";margin-right:8px}.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"] }]
+            args: [{ selector: 'ms-file-uploader', imports: [CommonModule, FormsModule, ReactiveFormsModule, InlineSVGModule, MsSpinner], 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-1\">{{ 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  <!-- Invalid File Type Error Message -->\n  <div *ngIf=\"invalidFileError && invalidFileErrorMessage\" class=\"invalid-file-error-message\">\n    <p>{{ invalidFileErrorMessage }}</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}" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], required: [{
@@ -3646,11 +3593,11 @@ class MsTopbar {
         this.searchChange.emit('');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTopbar, deps: [{ token: TopbarService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsTopbar, isStandalone: true, selector: "ms-topbar", inputs: { variant: "variant", title: "title", breadcrumb: "breadcrumb", detail: "detail" }, outputs: { searchChange: "searchChange" }, usesOnChanges: true, ngImport: i0, template: "@if(variant ==='detail'){\n<div class=\"ms-topbar-container ms-card-header\">\n    <div class=\"ms-topbar-title-lg\">\n        <div class=\"ms-title-lg\">\n            {{detail?.title}}\n        </div>\n        <div class=\"ms-description\">\n            {{detail?.description}}\n        </div>\n    </div>\n</div>\n} @else if(variant ==='title'){\n<div class=\"ms-topbar-container ms-card-header\">\n    <div class=\"ms-topbar-title-sm\">\n        <ms-icon [name]=\"'layers'\"></ms-icon>\n        <div class=\"ms-title-sm\">\n            {{detail?.title}}\n        </div>\n    </div>\n    <div class=\"ms-search\">\n        <div class=\"search-container\">\n            \n             <span class=\"search-icon\">\n<ms-icon [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n</span>\n            <input type=\"text\" class=\"search-input\" placeholder=\"Search\" required (input)=\"onSearch($event)\">\n            <button type=\"button\" class=\"clear-btn\" (click)=\"clear()\"\n                onclick=\"this.previousElementSibling.value=''; this.previousElementSibling.focus();\">&times;</button>\n        </div>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"#1B1F22\" stroke-width=\"1.25\" stroke-linejoin=\"round\" />\n            <path\n                d=\"M8.00024 4.3335L8.0003 3.7085H8.00024V4.3335ZM8.24438 4.34229L8.73773 4.726C8.87974 4.54341 8.9093 4.29732 8.81455 4.08629C8.71981 3.87527 8.51626 3.73383 8.28545 3.71864L8.24438 4.34229ZM7.33325 7.00049H6.70825V7.00054L7.33325 7.00049ZM10.0676 11.0269L10.4206 11.5426C10.6113 11.4121 10.7144 11.1872 10.6888 10.9576C10.6632 10.7281 10.5131 10.5313 10.2985 10.446L10.0676 11.0269ZM8.00024 11.6665V12.2915H8.0003L8.00024 11.6665ZM4.33325 8.00049H3.70825V8.00054L4.33325 8.00049ZM8.00024 4.3335L8.00019 4.9585C8.06491 4.9585 8.13205 4.96124 8.20332 4.96593L8.24438 4.34229L8.28545 3.71864C8.19529 3.7127 8.09969 3.7085 8.0003 3.7085L8.00024 4.3335ZM8.24438 4.34229L7.75104 3.95857C7.09798 4.79822 6.70825 5.85471 6.70825 7.00049H7.33325H7.95825C7.95825 6.14265 8.2491 5.35423 8.73773 4.726L8.24438 4.34229ZM7.33325 7.00049L6.70825 7.00054C6.70841 9.09376 8.00599 10.8801 9.8368 11.6077L10.0676 11.0269L10.2985 10.446C8.92647 9.90079 7.95837 8.56342 7.95825 7.00044L7.33325 7.00049ZM10.0676 11.0269L9.71461 10.5111C9.22599 10.8456 8.63689 11.0414 8.00019 11.0415L8.00024 11.6665L8.0003 12.2915C8.89814 12.2914 9.73183 12.0141 10.4206 11.5426L10.0676 11.0269ZM8.00024 11.6665V11.0415C6.32032 11.0415 4.9584 9.68003 4.95825 8.00043L4.33325 8.00049L3.70825 8.00054C3.70846 10.3707 5.63029 12.2915 8.00024 12.2915V11.6665ZM4.33325 8.00049H4.95825C4.95825 6.32062 6.32038 4.9585 8.00024 4.9585V4.3335V3.7085C5.63002 3.7085 3.70825 5.63027 3.70825 8.00049H4.33325Z\"\n                fill=\"#1B1F22\" />\n        </svg>\n    </div>\n</div>\n} @else if(variant ==='breadcrumb'){\n<div class=\"ms-topbar-container ms-card-header\">\n    <nav class=\"ms-breadcrumb\">\n        <ng-container *ngFor=\"let item of detail?.BreadcrumbItem; let last = last\">\n            <a *ngIf=\"!last\" [ngClass]=\"{active: item?.router}\" class=\"ms-breadcrumb-item\">\n                {{ item.label }}\n            </a>\n            <span *ngIf=\"last\" class=\"ms-breadcrumb-item active\">\n                <span class=\"breadcrumb-icon\">\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                        <path d=\"M3 11.5L12 4l9 7.5\"></path>\n                        <path d=\"M5 10.5V20h5v-6h4v6h5V10.5\"></path>\n                    </svg>\n                </span>\n                {{ item.label }}\n            </span>\n            <span *ngIf=\"!last\" class=\"breadcrumb-separator\">/</span>\n        </ng-container>\n    </nav>\n    <div class=\"ms-search\">\n        <div class=\"search-container\">\n            <svg class=\"search-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n            </svg>\n            <input type=\"text\" class=\"search-input\" placeholder=\"Search\" required (input)=\"onSearch($event)\">\n            <button type=\"button\" class=\"clear-btn\" (click)=\"clear()\"\n                onclick=\"this.previousElementSibling.value=''; this.previousElementSibling.focus();\">&times;</button>\n        </div>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"#1B1F22\" stroke-width=\"1.25\" stroke-linejoin=\"round\" />\n            <path\n                d=\"M8.00024 4.3335L8.0003 3.7085H8.00024V4.3335ZM8.24438 4.34229L8.73773 4.726C8.87974 4.54341 8.9093 4.29732 8.81455 4.08629C8.71981 3.87527 8.51626 3.73383 8.28545 3.71864L8.24438 4.34229ZM7.33325 7.00049H6.70825V7.00054L7.33325 7.00049ZM10.0676 11.0269L10.4206 11.5426C10.6113 11.4121 10.7144 11.1872 10.6888 10.9576C10.6632 10.7281 10.5131 10.5313 10.2985 10.446L10.0676 11.0269ZM8.00024 11.6665V12.2915H8.0003L8.00024 11.6665ZM4.33325 8.00049H3.70825V8.00054L4.33325 8.00049ZM8.00024 4.3335L8.00019 4.9585C8.06491 4.9585 8.13205 4.96124 8.20332 4.96593L8.24438 4.34229L8.28545 3.71864C8.19529 3.7127 8.09969 3.7085 8.0003 3.7085L8.00024 4.3335ZM8.24438 4.34229L7.75104 3.95857C7.09798 4.79822 6.70825 5.85471 6.70825 7.00049H7.33325H7.95825C7.95825 6.14265 8.2491 5.35423 8.73773 4.726L8.24438 4.34229ZM7.33325 7.00049L6.70825 7.00054C6.70841 9.09376 8.00599 10.8801 9.8368 11.6077L10.0676 11.0269L10.2985 10.446C8.92647 9.90079 7.95837 8.56342 7.95825 7.00044L7.33325 7.00049ZM10.0676 11.0269L9.71461 10.5111C9.22599 10.8456 8.63689 11.0414 8.00019 11.0415L8.00024 11.6665L8.0003 12.2915C8.89814 12.2914 9.73183 12.0141 10.4206 11.5426L10.0676 11.0269ZM8.00024 11.6665V11.0415C6.32032 11.0415 4.9584 9.68003 4.95825 8.00043L4.33325 8.00049L3.70825 8.00054C3.70846 10.3707 5.63029 12.2915 8.00024 12.2915V11.6665ZM4.33325 8.00049H4.95825C4.95825 6.32062 6.32038 4.9585 8.00024 4.9585V4.3335V3.7085C5.63002 3.7085 3.70825 5.63027 3.70825 8.00049H4.33325Z\"\n                fill=\"#1B1F22\" />\n        </svg>\n    </div>\n</div>\n}", styles: ["@charset \"UTF-8\";.ms-topbar-container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:24px 32px;height:70px!important;border-radius:11px 11px 0 0/11px 11px 0px 0px}.ms-breadcrumb{display:flex;align-items:center;gap:4px;font-size:14px;color:#6a6b6d}.ms-breadcrumb-item{display:inline-flex;align-items:center;gap:6px;color:#6a6b6d;text-decoration:none;font-weight:400}.breadcrumb-icon{font-size:14px;padding-top:4px}.breadcrumb-separator{color:#6a6b6d}.ms-breadcrumb-item:hover{text-decoration:underline;color:#1b1f22}.ms-breadcrumb-item.active{cursor:default;text-decoration:none;font-size:14px!important;color:#1b1f22}.breadcrumb-icon svg{width:16px;height:16px;fill:none;stroke:#6a6b6d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ms-breadcrumb-item:focus-visible{outline:2px solid #0084FF;outline-offset:2px;border-radius:2px}.ms-breadcrumb-item:focus{outline:2px solid #0084FF;outline-offset:2px;border-radius:2px}.breadcrumb-separator-icon svg{width:14px;height:14px;fill:none;stroke:#6a6b6d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;padding-top:4px}.search-container{position:relative;width:240px}.search-input{width:100%;padding:8px 12px 8px 36px;font-size:14px;border:1px solid #E0E0E0;border-radius:8px;background-color:#fff;outline:none;box-sizing:border-box;transition:border-color .3s ease}.search-input:focus{border-color:#999}.search-input::placeholder{color:#aaa}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none}ms-icon{display:flex}.search-input:valid~.clear-btn,.search-input:focus~.clear-btn{display:block}.clear-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:24px;color:#999;cursor:pointer;display:none;width:24px;height:24px;line-height:20px;text-align:center}.ms-search{display:flex;align-items:center;gap:10px}.ms-topbar-title-sm{display:flex}.ms-title-sm{font-size:16px;font-weight:600;margin-left:6px;color:#1b1f22}.ms-title-lg{font-size:32px!important;font-weight:550!important;color:#1b1f22;margin-bottom:10px}.ms-description{font-size:16px!important;color:#6a6b6d!important}\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: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsTopbar, isStandalone: true, selector: "ms-topbar", inputs: { variant: "variant", title: "title", breadcrumb: "breadcrumb", detail: "detail" }, outputs: { searchChange: "searchChange" }, usesOnChanges: true, ngImport: i0, template: "@if(variant ==='detail'){\n<div class=\"ms-topbar-container ms-card-header\">\n    <div class=\"ms-topbar-title-lg\">\n        <div class=\"ms-title-lg\">\n            {{detail?.title}}\n        </div>\n        <div class=\"ms-description\">\n            {{detail?.description}}\n        </div>\n    </div>\n</div>\n} @else if(variant ==='title'){\n<div class=\"ms-topbar-container ms-card-header\">\n    <div class=\"ms-topbar-title-sm\">\n        <ms-icon [name]=\"'layers'\"></ms-icon>\n        <div class=\"ms-title-sm\">\n            {{detail?.title}}\n        </div>\n    </div>\n    <div class=\"ms-search\">\n        <div class=\"search-container\">\n            \n             <span class=\"search-icon\">\n<ms-icon [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n</span>\n            <input type=\"text\" class=\"search-input\" placeholder=\"Search\" required (input)=\"onSearch($event)\">\n            <button type=\"button\" class=\"clear-btn\" (click)=\"clear()\"\n                onclick=\"this.previousElementSibling.value=''; this.previousElementSibling.focus();\">&times;</button>\n        </div>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"#1B1F22\" stroke-width=\"1.25\" stroke-linejoin=\"round\" />\n            <path\n                d=\"M8.00024 4.3335L8.0003 3.7085H8.00024V4.3335ZM8.24438 4.34229L8.73773 4.726C8.87974 4.54341 8.9093 4.29732 8.81455 4.08629C8.71981 3.87527 8.51626 3.73383 8.28545 3.71864L8.24438 4.34229ZM7.33325 7.00049H6.70825V7.00054L7.33325 7.00049ZM10.0676 11.0269L10.4206 11.5426C10.6113 11.4121 10.7144 11.1872 10.6888 10.9576C10.6632 10.7281 10.5131 10.5313 10.2985 10.446L10.0676 11.0269ZM8.00024 11.6665V12.2915H8.0003L8.00024 11.6665ZM4.33325 8.00049H3.70825V8.00054L4.33325 8.00049ZM8.00024 4.3335L8.00019 4.9585C8.06491 4.9585 8.13205 4.96124 8.20332 4.96593L8.24438 4.34229L8.28545 3.71864C8.19529 3.7127 8.09969 3.7085 8.0003 3.7085L8.00024 4.3335ZM8.24438 4.34229L7.75104 3.95857C7.09798 4.79822 6.70825 5.85471 6.70825 7.00049H7.33325H7.95825C7.95825 6.14265 8.2491 5.35423 8.73773 4.726L8.24438 4.34229ZM7.33325 7.00049L6.70825 7.00054C6.70841 9.09376 8.00599 10.8801 9.8368 11.6077L10.0676 11.0269L10.2985 10.446C8.92647 9.90079 7.95837 8.56342 7.95825 7.00044L7.33325 7.00049ZM10.0676 11.0269L9.71461 10.5111C9.22599 10.8456 8.63689 11.0414 8.00019 11.0415L8.00024 11.6665L8.0003 12.2915C8.89814 12.2914 9.73183 12.0141 10.4206 11.5426L10.0676 11.0269ZM8.00024 11.6665V11.0415C6.32032 11.0415 4.9584 9.68003 4.95825 8.00043L4.33325 8.00049L3.70825 8.00054C3.70846 10.3707 5.63029 12.2915 8.00024 12.2915V11.6665ZM4.33325 8.00049H4.95825C4.95825 6.32062 6.32038 4.9585 8.00024 4.9585V4.3335V3.7085C5.63002 3.7085 3.70825 5.63027 3.70825 8.00049H4.33325Z\"\n                fill=\"#1B1F22\" />\n        </svg>\n    </div>\n</div>\n} @else if(variant ==='breadcrumb'){\n<div class=\"ms-topbar-container ms-card-header\">\n    <nav class=\"ms-breadcrumb\">\n        <ng-container *ngFor=\"let item of detail?.BreadcrumbItem; let last = last\">\n            <a *ngIf=\"!last\" [ngClass]=\"{active: item?.router}\" class=\"ms-breadcrumb-item\">\n                {{ item.label }}\n            </a>\n            <span *ngIf=\"last\" class=\"ms-breadcrumb-item active\">\n                <span class=\"breadcrumb-icon\">\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                        <path d=\"M3 11.5L12 4l9 7.5\"></path>\n                        <path d=\"M5 10.5V20h5v-6h4v6h5V10.5\"></path>\n                    </svg>\n                </span>\n                {{ item.label }}\n            </span>\n            <span *ngIf=\"!last\" class=\"breadcrumb-separator\">/</span>\n        </ng-container>\n    </nav>\n    <div class=\"ms-search\">\n        <div class=\"search-container\">\n            <svg class=\"search-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n            </svg>\n            <input type=\"text\" class=\"search-input\" placeholder=\"Search\" required (input)=\"onSearch($event)\">\n            <button type=\"button\" class=\"clear-btn\" (click)=\"clear()\"\n                onclick=\"this.previousElementSibling.value=''; this.previousElementSibling.focus();\">&times;</button>\n        </div>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"#1B1F22\" stroke-width=\"1.25\" stroke-linejoin=\"round\" />\n            <path\n                d=\"M8.00024 4.3335L8.0003 3.7085H8.00024V4.3335ZM8.24438 4.34229L8.73773 4.726C8.87974 4.54341 8.9093 4.29732 8.81455 4.08629C8.71981 3.87527 8.51626 3.73383 8.28545 3.71864L8.24438 4.34229ZM7.33325 7.00049H6.70825V7.00054L7.33325 7.00049ZM10.0676 11.0269L10.4206 11.5426C10.6113 11.4121 10.7144 11.1872 10.6888 10.9576C10.6632 10.7281 10.5131 10.5313 10.2985 10.446L10.0676 11.0269ZM8.00024 11.6665V12.2915H8.0003L8.00024 11.6665ZM4.33325 8.00049H3.70825V8.00054L4.33325 8.00049ZM8.00024 4.3335L8.00019 4.9585C8.06491 4.9585 8.13205 4.96124 8.20332 4.96593L8.24438 4.34229L8.28545 3.71864C8.19529 3.7127 8.09969 3.7085 8.0003 3.7085L8.00024 4.3335ZM8.24438 4.34229L7.75104 3.95857C7.09798 4.79822 6.70825 5.85471 6.70825 7.00049H7.33325H7.95825C7.95825 6.14265 8.2491 5.35423 8.73773 4.726L8.24438 4.34229ZM7.33325 7.00049L6.70825 7.00054C6.70841 9.09376 8.00599 10.8801 9.8368 11.6077L10.0676 11.0269L10.2985 10.446C8.92647 9.90079 7.95837 8.56342 7.95825 7.00044L7.33325 7.00049ZM10.0676 11.0269L9.71461 10.5111C9.22599 10.8456 8.63689 11.0414 8.00019 11.0415L8.00024 11.6665L8.0003 12.2915C8.89814 12.2914 9.73183 12.0141 10.4206 11.5426L10.0676 11.0269ZM8.00024 11.6665V11.0415C6.32032 11.0415 4.9584 9.68003 4.95825 8.00043L4.33325 8.00049L3.70825 8.00054C3.70846 10.3707 5.63029 12.2915 8.00024 12.2915V11.6665ZM4.33325 8.00049H4.95825C4.95825 6.32062 6.32038 4.9585 8.00024 4.9585V4.3335V3.7085C5.63002 3.7085 3.70825 5.63027 3.70825 8.00049H4.33325Z\"\n                fill=\"#1B1F22\" />\n        </svg>\n    </div>\n</div>\n}", styles: [""], 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: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTopbar, decorators: [{
             type: Component,
-            args: [{ selector: 'ms-topbar', imports: [CommonModule, FormsModule, MsIcon], template: "@if(variant ==='detail'){\n<div class=\"ms-topbar-container ms-card-header\">\n    <div class=\"ms-topbar-title-lg\">\n        <div class=\"ms-title-lg\">\n            {{detail?.title}}\n        </div>\n        <div class=\"ms-description\">\n            {{detail?.description}}\n        </div>\n    </div>\n</div>\n} @else if(variant ==='title'){\n<div class=\"ms-topbar-container ms-card-header\">\n    <div class=\"ms-topbar-title-sm\">\n        <ms-icon [name]=\"'layers'\"></ms-icon>\n        <div class=\"ms-title-sm\">\n            {{detail?.title}}\n        </div>\n    </div>\n    <div class=\"ms-search\">\n        <div class=\"search-container\">\n            \n             <span class=\"search-icon\">\n<ms-icon [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n</span>\n            <input type=\"text\" class=\"search-input\" placeholder=\"Search\" required (input)=\"onSearch($event)\">\n            <button type=\"button\" class=\"clear-btn\" (click)=\"clear()\"\n                onclick=\"this.previousElementSibling.value=''; this.previousElementSibling.focus();\">&times;</button>\n        </div>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"#1B1F22\" stroke-width=\"1.25\" stroke-linejoin=\"round\" />\n            <path\n                d=\"M8.00024 4.3335L8.0003 3.7085H8.00024V4.3335ZM8.24438 4.34229L8.73773 4.726C8.87974 4.54341 8.9093 4.29732 8.81455 4.08629C8.71981 3.87527 8.51626 3.73383 8.28545 3.71864L8.24438 4.34229ZM7.33325 7.00049H6.70825V7.00054L7.33325 7.00049ZM10.0676 11.0269L10.4206 11.5426C10.6113 11.4121 10.7144 11.1872 10.6888 10.9576C10.6632 10.7281 10.5131 10.5313 10.2985 10.446L10.0676 11.0269ZM8.00024 11.6665V12.2915H8.0003L8.00024 11.6665ZM4.33325 8.00049H3.70825V8.00054L4.33325 8.00049ZM8.00024 4.3335L8.00019 4.9585C8.06491 4.9585 8.13205 4.96124 8.20332 4.96593L8.24438 4.34229L8.28545 3.71864C8.19529 3.7127 8.09969 3.7085 8.0003 3.7085L8.00024 4.3335ZM8.24438 4.34229L7.75104 3.95857C7.09798 4.79822 6.70825 5.85471 6.70825 7.00049H7.33325H7.95825C7.95825 6.14265 8.2491 5.35423 8.73773 4.726L8.24438 4.34229ZM7.33325 7.00049L6.70825 7.00054C6.70841 9.09376 8.00599 10.8801 9.8368 11.6077L10.0676 11.0269L10.2985 10.446C8.92647 9.90079 7.95837 8.56342 7.95825 7.00044L7.33325 7.00049ZM10.0676 11.0269L9.71461 10.5111C9.22599 10.8456 8.63689 11.0414 8.00019 11.0415L8.00024 11.6665L8.0003 12.2915C8.89814 12.2914 9.73183 12.0141 10.4206 11.5426L10.0676 11.0269ZM8.00024 11.6665V11.0415C6.32032 11.0415 4.9584 9.68003 4.95825 8.00043L4.33325 8.00049L3.70825 8.00054C3.70846 10.3707 5.63029 12.2915 8.00024 12.2915V11.6665ZM4.33325 8.00049H4.95825C4.95825 6.32062 6.32038 4.9585 8.00024 4.9585V4.3335V3.7085C5.63002 3.7085 3.70825 5.63027 3.70825 8.00049H4.33325Z\"\n                fill=\"#1B1F22\" />\n        </svg>\n    </div>\n</div>\n} @else if(variant ==='breadcrumb'){\n<div class=\"ms-topbar-container ms-card-header\">\n    <nav class=\"ms-breadcrumb\">\n        <ng-container *ngFor=\"let item of detail?.BreadcrumbItem; let last = last\">\n            <a *ngIf=\"!last\" [ngClass]=\"{active: item?.router}\" class=\"ms-breadcrumb-item\">\n                {{ item.label }}\n            </a>\n            <span *ngIf=\"last\" class=\"ms-breadcrumb-item active\">\n                <span class=\"breadcrumb-icon\">\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                        <path d=\"M3 11.5L12 4l9 7.5\"></path>\n                        <path d=\"M5 10.5V20h5v-6h4v6h5V10.5\"></path>\n                    </svg>\n                </span>\n                {{ item.label }}\n            </span>\n            <span *ngIf=\"!last\" class=\"breadcrumb-separator\">/</span>\n        </ng-container>\n    </nav>\n    <div class=\"ms-search\">\n        <div class=\"search-container\">\n            <svg class=\"search-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n            </svg>\n            <input type=\"text\" class=\"search-input\" placeholder=\"Search\" required (input)=\"onSearch($event)\">\n            <button type=\"button\" class=\"clear-btn\" (click)=\"clear()\"\n                onclick=\"this.previousElementSibling.value=''; this.previousElementSibling.focus();\">&times;</button>\n        </div>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"#1B1F22\" stroke-width=\"1.25\" stroke-linejoin=\"round\" />\n            <path\n                d=\"M8.00024 4.3335L8.0003 3.7085H8.00024V4.3335ZM8.24438 4.34229L8.73773 4.726C8.87974 4.54341 8.9093 4.29732 8.81455 4.08629C8.71981 3.87527 8.51626 3.73383 8.28545 3.71864L8.24438 4.34229ZM7.33325 7.00049H6.70825V7.00054L7.33325 7.00049ZM10.0676 11.0269L10.4206 11.5426C10.6113 11.4121 10.7144 11.1872 10.6888 10.9576C10.6632 10.7281 10.5131 10.5313 10.2985 10.446L10.0676 11.0269ZM8.00024 11.6665V12.2915H8.0003L8.00024 11.6665ZM4.33325 8.00049H3.70825V8.00054L4.33325 8.00049ZM8.00024 4.3335L8.00019 4.9585C8.06491 4.9585 8.13205 4.96124 8.20332 4.96593L8.24438 4.34229L8.28545 3.71864C8.19529 3.7127 8.09969 3.7085 8.0003 3.7085L8.00024 4.3335ZM8.24438 4.34229L7.75104 3.95857C7.09798 4.79822 6.70825 5.85471 6.70825 7.00049H7.33325H7.95825C7.95825 6.14265 8.2491 5.35423 8.73773 4.726L8.24438 4.34229ZM7.33325 7.00049L6.70825 7.00054C6.70841 9.09376 8.00599 10.8801 9.8368 11.6077L10.0676 11.0269L10.2985 10.446C8.92647 9.90079 7.95837 8.56342 7.95825 7.00044L7.33325 7.00049ZM10.0676 11.0269L9.71461 10.5111C9.22599 10.8456 8.63689 11.0414 8.00019 11.0415L8.00024 11.6665L8.0003 12.2915C8.89814 12.2914 9.73183 12.0141 10.4206 11.5426L10.0676 11.0269ZM8.00024 11.6665V11.0415C6.32032 11.0415 4.9584 9.68003 4.95825 8.00043L4.33325 8.00049L3.70825 8.00054C3.70846 10.3707 5.63029 12.2915 8.00024 12.2915V11.6665ZM4.33325 8.00049H4.95825C4.95825 6.32062 6.32038 4.9585 8.00024 4.9585V4.3335V3.7085C5.63002 3.7085 3.70825 5.63027 3.70825 8.00049H4.33325Z\"\n                fill=\"#1B1F22\" />\n        </svg>\n    </div>\n</div>\n}", styles: ["@charset \"UTF-8\";.ms-topbar-container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:24px 32px;height:70px!important;border-radius:11px 11px 0 0/11px 11px 0px 0px}.ms-breadcrumb{display:flex;align-items:center;gap:4px;font-size:14px;color:#6a6b6d}.ms-breadcrumb-item{display:inline-flex;align-items:center;gap:6px;color:#6a6b6d;text-decoration:none;font-weight:400}.breadcrumb-icon{font-size:14px;padding-top:4px}.breadcrumb-separator{color:#6a6b6d}.ms-breadcrumb-item:hover{text-decoration:underline;color:#1b1f22}.ms-breadcrumb-item.active{cursor:default;text-decoration:none;font-size:14px!important;color:#1b1f22}.breadcrumb-icon svg{width:16px;height:16px;fill:none;stroke:#6a6b6d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ms-breadcrumb-item:focus-visible{outline:2px solid #0084FF;outline-offset:2px;border-radius:2px}.ms-breadcrumb-item:focus{outline:2px solid #0084FF;outline-offset:2px;border-radius:2px}.breadcrumb-separator-icon svg{width:14px;height:14px;fill:none;stroke:#6a6b6d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;padding-top:4px}.search-container{position:relative;width:240px}.search-input{width:100%;padding:8px 12px 8px 36px;font-size:14px;border:1px solid #E0E0E0;border-radius:8px;background-color:#fff;outline:none;box-sizing:border-box;transition:border-color .3s ease}.search-input:focus{border-color:#999}.search-input::placeholder{color:#aaa}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none}ms-icon{display:flex}.search-input:valid~.clear-btn,.search-input:focus~.clear-btn{display:block}.clear-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:24px;color:#999;cursor:pointer;display:none;width:24px;height:24px;line-height:20px;text-align:center}.ms-search{display:flex;align-items:center;gap:10px}.ms-topbar-title-sm{display:flex}.ms-title-sm{font-size:16px;font-weight:600;margin-left:6px;color:#1b1f22}.ms-title-lg{font-size:32px!important;font-weight:550!important;color:#1b1f22;margin-bottom:10px}.ms-description{font-size:16px!important;color:#6a6b6d!important}\n"] }]
+            args: [{ selector: 'ms-topbar', imports: [CommonModule, FormsModule, MsIcon], template: "@if(variant ==='detail'){\n<div class=\"ms-topbar-container ms-card-header\">\n    <div class=\"ms-topbar-title-lg\">\n        <div class=\"ms-title-lg\">\n            {{detail?.title}}\n        </div>\n        <div class=\"ms-description\">\n            {{detail?.description}}\n        </div>\n    </div>\n</div>\n} @else if(variant ==='title'){\n<div class=\"ms-topbar-container ms-card-header\">\n    <div class=\"ms-topbar-title-sm\">\n        <ms-icon [name]=\"'layers'\"></ms-icon>\n        <div class=\"ms-title-sm\">\n            {{detail?.title}}\n        </div>\n    </div>\n    <div class=\"ms-search\">\n        <div class=\"search-container\">\n            \n             <span class=\"search-icon\">\n<ms-icon [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n</span>\n            <input type=\"text\" class=\"search-input\" placeholder=\"Search\" required (input)=\"onSearch($event)\">\n            <button type=\"button\" class=\"clear-btn\" (click)=\"clear()\"\n                onclick=\"this.previousElementSibling.value=''; this.previousElementSibling.focus();\">&times;</button>\n        </div>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"#1B1F22\" stroke-width=\"1.25\" stroke-linejoin=\"round\" />\n            <path\n                d=\"M8.00024 4.3335L8.0003 3.7085H8.00024V4.3335ZM8.24438 4.34229L8.73773 4.726C8.87974 4.54341 8.9093 4.29732 8.81455 4.08629C8.71981 3.87527 8.51626 3.73383 8.28545 3.71864L8.24438 4.34229ZM7.33325 7.00049H6.70825V7.00054L7.33325 7.00049ZM10.0676 11.0269L10.4206 11.5426C10.6113 11.4121 10.7144 11.1872 10.6888 10.9576C10.6632 10.7281 10.5131 10.5313 10.2985 10.446L10.0676 11.0269ZM8.00024 11.6665V12.2915H8.0003L8.00024 11.6665ZM4.33325 8.00049H3.70825V8.00054L4.33325 8.00049ZM8.00024 4.3335L8.00019 4.9585C8.06491 4.9585 8.13205 4.96124 8.20332 4.96593L8.24438 4.34229L8.28545 3.71864C8.19529 3.7127 8.09969 3.7085 8.0003 3.7085L8.00024 4.3335ZM8.24438 4.34229L7.75104 3.95857C7.09798 4.79822 6.70825 5.85471 6.70825 7.00049H7.33325H7.95825C7.95825 6.14265 8.2491 5.35423 8.73773 4.726L8.24438 4.34229ZM7.33325 7.00049L6.70825 7.00054C6.70841 9.09376 8.00599 10.8801 9.8368 11.6077L10.0676 11.0269L10.2985 10.446C8.92647 9.90079 7.95837 8.56342 7.95825 7.00044L7.33325 7.00049ZM10.0676 11.0269L9.71461 10.5111C9.22599 10.8456 8.63689 11.0414 8.00019 11.0415L8.00024 11.6665L8.0003 12.2915C8.89814 12.2914 9.73183 12.0141 10.4206 11.5426L10.0676 11.0269ZM8.00024 11.6665V11.0415C6.32032 11.0415 4.9584 9.68003 4.95825 8.00043L4.33325 8.00049L3.70825 8.00054C3.70846 10.3707 5.63029 12.2915 8.00024 12.2915V11.6665ZM4.33325 8.00049H4.95825C4.95825 6.32062 6.32038 4.9585 8.00024 4.9585V4.3335V3.7085C5.63002 3.7085 3.70825 5.63027 3.70825 8.00049H4.33325Z\"\n                fill=\"#1B1F22\" />\n        </svg>\n    </div>\n</div>\n} @else if(variant ==='breadcrumb'){\n<div class=\"ms-topbar-container ms-card-header\">\n    <nav class=\"ms-breadcrumb\">\n        <ng-container *ngFor=\"let item of detail?.BreadcrumbItem; let last = last\">\n            <a *ngIf=\"!last\" [ngClass]=\"{active: item?.router}\" class=\"ms-breadcrumb-item\">\n                {{ item.label }}\n            </a>\n            <span *ngIf=\"last\" class=\"ms-breadcrumb-item active\">\n                <span class=\"breadcrumb-icon\">\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                        <path d=\"M3 11.5L12 4l9 7.5\"></path>\n                        <path d=\"M5 10.5V20h5v-6h4v6h5V10.5\"></path>\n                    </svg>\n                </span>\n                {{ item.label }}\n            </span>\n            <span *ngIf=\"!last\" class=\"breadcrumb-separator\">/</span>\n        </ng-container>\n    </nav>\n    <div class=\"ms-search\">\n        <div class=\"search-container\">\n            <svg class=\"search-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n            </svg>\n            <input type=\"text\" class=\"search-input\" placeholder=\"Search\" required (input)=\"onSearch($event)\">\n            <button type=\"button\" class=\"clear-btn\" (click)=\"clear()\"\n                onclick=\"this.previousElementSibling.value=''; this.previousElementSibling.focus();\">&times;</button>\n        </div>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"#1B1F22\" stroke-width=\"1.25\" stroke-linejoin=\"round\" />\n            <path\n                d=\"M8.00024 4.3335L8.0003 3.7085H8.00024V4.3335ZM8.24438 4.34229L8.73773 4.726C8.87974 4.54341 8.9093 4.29732 8.81455 4.08629C8.71981 3.87527 8.51626 3.73383 8.28545 3.71864L8.24438 4.34229ZM7.33325 7.00049H6.70825V7.00054L7.33325 7.00049ZM10.0676 11.0269L10.4206 11.5426C10.6113 11.4121 10.7144 11.1872 10.6888 10.9576C10.6632 10.7281 10.5131 10.5313 10.2985 10.446L10.0676 11.0269ZM8.00024 11.6665V12.2915H8.0003L8.00024 11.6665ZM4.33325 8.00049H3.70825V8.00054L4.33325 8.00049ZM8.00024 4.3335L8.00019 4.9585C8.06491 4.9585 8.13205 4.96124 8.20332 4.96593L8.24438 4.34229L8.28545 3.71864C8.19529 3.7127 8.09969 3.7085 8.0003 3.7085L8.00024 4.3335ZM8.24438 4.34229L7.75104 3.95857C7.09798 4.79822 6.70825 5.85471 6.70825 7.00049H7.33325H7.95825C7.95825 6.14265 8.2491 5.35423 8.73773 4.726L8.24438 4.34229ZM7.33325 7.00049L6.70825 7.00054C6.70841 9.09376 8.00599 10.8801 9.8368 11.6077L10.0676 11.0269L10.2985 10.446C8.92647 9.90079 7.95837 8.56342 7.95825 7.00044L7.33325 7.00049ZM10.0676 11.0269L9.71461 10.5111C9.22599 10.8456 8.63689 11.0414 8.00019 11.0415L8.00024 11.6665L8.0003 12.2915C8.89814 12.2914 9.73183 12.0141 10.4206 11.5426L10.0676 11.0269ZM8.00024 11.6665V11.0415C6.32032 11.0415 4.9584 9.68003 4.95825 8.00043L4.33325 8.00049L3.70825 8.00054C3.70846 10.3707 5.63029 12.2915 8.00024 12.2915V11.6665ZM4.33325 8.00049H4.95825C4.95825 6.32062 6.32038 4.9585 8.00024 4.9585V4.3335V3.7085C5.63002 3.7085 3.70825 5.63027 3.70825 8.00049H4.33325Z\"\n                fill=\"#1B1F22\" />\n        </svg>\n    </div>\n</div>\n}" }]
         }], ctorParameters: () => [{ type: TopbarService }], propDecorators: { variant: [{
                 type: Input
             }], title: [{
@@ -3681,11 +3628,11 @@ class MsTabs {
         this.select.emit(selectedTab);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsTabs, isStandalone: true, selector: "ms-tabs", inputs: { tabsType: "tabsType", styleType: "styleType", tabsList: "tabsList", skeleton: "skeleton", disabled: "disabled" }, outputs: { select: "select" }, ngImport: i0, template: "@if(!skeleton && tabsType === 'horizontel'){\n@if(styleType === 'default'){\n<div class=\"ms-default-tabs\">\n    <div class=\"tabs\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}@else if (styleType === 'pill'){\n<div class=\"ms-pill-tabs\">\n    <div class=\"tabs\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}@else if (styleType === 'line'){\n<div class=\"ms-line-tabs\">\n    <div class=\"ms-tabs\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"ms-tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}\n}@else if (!skeleton && tabsType === 'vertical'){\n@if(styleType === 'default'){\n<div class=\"ms-default-vertical-tabs\">\n    <div class=\"tabs-vertical\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}@else if (styleType === 'pill'){\n<div class=\"ms-pill-vertical-tabs\">\n    <div class=\"tabs-vertical\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}@else if (styleType === 'line'){\n<div class=\"ms-line-tabs\">\n    <div class=\"ms-tabs-vertical\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"ms-tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}\n}@else if(skeleton){\n<div class=\"ms-default-tabs\">\n    <div class=\"tabs\">\n        <div class=\"tab skeleton\"></div>\n    </div>\n</div>\n}", styles: [".ms-default-tabs .tabs{display:flex;gap:20px}.ms-default-tabs input[type=radio]{display:none}.ms-default-tabs .tab{padding:7px 12px;border-radius:6px;color:#6a6b6d!important;border:1px solid rgba(42,47,58,0);cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-default-tabs .tab:hover{background:#f5f5f5;color:#1b1f22!important}.ms-default-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-default-tabs .tab.disabled{background:#ebebeb;color:#ababab!important;cursor:not-allowed}.ms-default-tabs .tab.skeleton{background:#ebebeb;padding:7px 24px}.ms-pill-tabs .tabs{display:flex;gap:20px}.ms-pill-tabs input[type=radio]{display:none}.ms-pill-tabs .tab{padding:7px 12px;border-radius:6px;background:#fff;color:#1b1f22;border:1px solid #0084FF;cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-pill-tabs .tab:hover{background:#f5f5f5;color:#1b1f22}.ms-pill-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-line-tabs .ms-tabs{display:flex;gap:20px}.ms-line-tabs .ms-tab:hover{color:#1b1f22!important;border-bottom:2px solid #E0E0E0}.ms-line-tabs input[type=radio]:checked+.ms-tab{color:#1b1f22!important;border-bottom:2px solid #0084FF}.ms-default-vertical-tabs .tabs-vertical{display:flex;gap:20px;flex-wrap:nowrap;flex-direction:column}.ms-default-vertical-tabs input[type=radio]{display:none}.ms-default-vertical-tabs .tab{padding:7px 12px;border-radius:6px;color:#6a6b6d!important;border:1px solid rgba(42,47,58,0);cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-default-vertical-tabs .tab:hover{background:#f5f5f5;color:#1b1f22!important}.ms-default-vertical-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-default-vertical-tabs .tab.disabled{background:#ebebeb;color:#ababab!important;cursor:not-allowed}.ms-default-vertical-tabs .tab.skeleton{background:#ebebeb;padding:16px 24px}.ms-pill-vertical-tabs .tabs-vertical{display:flex;gap:20px;flex-wrap:nowrap;flex-direction:column}.ms-pill-vertical-tabs input[type=radio]{display:none}.ms-pill-vertical-tabs .tab{padding:7px 12px;border-radius:6px;background:#fff;color:#1b1f22;border:1px solid #0084FF;cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-pill-vertical-tabs .tab:hover{background:#f5f5f5;color:#1b1f22}.ms-pill-vertical-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-line-tabs .ms-tabs-vertical{display:flex;gap:20px;flex-wrap:nowrap;flex-direction:column}.ms-line-tabs input[type=radio]{display:none}.ms-line-tabs .ms-tab{padding:7px 12px;background:none;color:#6a6b6d!important;border:0;cursor:pointer;font-size:14px;font-weight:450}.ms-line-tabs .ms-tab:hover{color:#1b1f22;border-bottom:2px solid #E0E0E0}.ms-line-tabs input[type=radio]:checked+.ms-tab{color:#1b1f22;border-bottom:2px solid #0084FF}.ms-line-tabs .ms-tab.disabled{color:#1b1f22;border-bottom:2px solid #0084FF;outline:1px solid #0084FF!important;outline-color:#0084ff!important;border-radius:6px;cursor:not-allowed}\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: "ngmodule", type: FormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsTabs, isStandalone: true, selector: "ms-tabs", inputs: { tabsType: "tabsType", styleType: "styleType", tabsList: "tabsList", skeleton: "skeleton", disabled: "disabled" }, outputs: { select: "select" }, ngImport: i0, template: "@if(!skeleton && tabsType === 'horizontel'){\n@if(styleType === 'default'){\n<div class=\"ms-default-tabs\">\n    <div class=\"tabs\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}@else if (styleType === 'pill'){\n<div class=\"ms-pill-tabs\">\n    <div class=\"tabs\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}@else if (styleType === 'line'){\n<div class=\"ms-line-tabs\">\n    <div class=\"ms-tabs\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"ms-tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}\n}@else if (!skeleton && tabsType === 'vertical'){\n@if(styleType === 'default'){\n<div class=\"ms-default-vertical-tabs\">\n    <div class=\"tabs-vertical\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}@else if (styleType === 'pill'){\n<div class=\"ms-pill-vertical-tabs\">\n    <div class=\"tabs-vertical\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}@else if (styleType === 'line'){\n<div class=\"ms-line-tabs\">\n    <div class=\"ms-tabs-vertical\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"ms-tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}\n}@else if(skeleton){\n<div class=\"ms-default-tabs\">\n    <div class=\"tabs\">\n        <div class=\"tab skeleton\"></div>\n    </div>\n</div>\n}", styles: [""], 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: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTabs, decorators: [{
             type: Component,
-            args: [{ selector: 'ms-tabs', imports: [CommonModule, FormsModule], template: "@if(!skeleton && tabsType === 'horizontel'){\n@if(styleType === 'default'){\n<div class=\"ms-default-tabs\">\n    <div class=\"tabs\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}@else if (styleType === 'pill'){\n<div class=\"ms-pill-tabs\">\n    <div class=\"tabs\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}@else if (styleType === 'line'){\n<div class=\"ms-line-tabs\">\n    <div class=\"ms-tabs\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"ms-tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}\n}@else if (!skeleton && tabsType === 'vertical'){\n@if(styleType === 'default'){\n<div class=\"ms-default-vertical-tabs\">\n    <div class=\"tabs-vertical\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}@else if (styleType === 'pill'){\n<div class=\"ms-pill-vertical-tabs\">\n    <div class=\"tabs-vertical\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}@else if (styleType === 'line'){\n<div class=\"ms-line-tabs\">\n    <div class=\"ms-tabs-vertical\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"ms-tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}\n}@else if(skeleton){\n<div class=\"ms-default-tabs\">\n    <div class=\"tabs\">\n        <div class=\"tab skeleton\"></div>\n    </div>\n</div>\n}", styles: [".ms-default-tabs .tabs{display:flex;gap:20px}.ms-default-tabs input[type=radio]{display:none}.ms-default-tabs .tab{padding:7px 12px;border-radius:6px;color:#6a6b6d!important;border:1px solid rgba(42,47,58,0);cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-default-tabs .tab:hover{background:#f5f5f5;color:#1b1f22!important}.ms-default-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-default-tabs .tab.disabled{background:#ebebeb;color:#ababab!important;cursor:not-allowed}.ms-default-tabs .tab.skeleton{background:#ebebeb;padding:7px 24px}.ms-pill-tabs .tabs{display:flex;gap:20px}.ms-pill-tabs input[type=radio]{display:none}.ms-pill-tabs .tab{padding:7px 12px;border-radius:6px;background:#fff;color:#1b1f22;border:1px solid #0084FF;cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-pill-tabs .tab:hover{background:#f5f5f5;color:#1b1f22}.ms-pill-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-line-tabs .ms-tabs{display:flex;gap:20px}.ms-line-tabs .ms-tab:hover{color:#1b1f22!important;border-bottom:2px solid #E0E0E0}.ms-line-tabs input[type=radio]:checked+.ms-tab{color:#1b1f22!important;border-bottom:2px solid #0084FF}.ms-default-vertical-tabs .tabs-vertical{display:flex;gap:20px;flex-wrap:nowrap;flex-direction:column}.ms-default-vertical-tabs input[type=radio]{display:none}.ms-default-vertical-tabs .tab{padding:7px 12px;border-radius:6px;color:#6a6b6d!important;border:1px solid rgba(42,47,58,0);cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-default-vertical-tabs .tab:hover{background:#f5f5f5;color:#1b1f22!important}.ms-default-vertical-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-default-vertical-tabs .tab.disabled{background:#ebebeb;color:#ababab!important;cursor:not-allowed}.ms-default-vertical-tabs .tab.skeleton{background:#ebebeb;padding:16px 24px}.ms-pill-vertical-tabs .tabs-vertical{display:flex;gap:20px;flex-wrap:nowrap;flex-direction:column}.ms-pill-vertical-tabs input[type=radio]{display:none}.ms-pill-vertical-tabs .tab{padding:7px 12px;border-radius:6px;background:#fff;color:#1b1f22;border:1px solid #0084FF;cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-pill-vertical-tabs .tab:hover{background:#f5f5f5;color:#1b1f22}.ms-pill-vertical-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-line-tabs .ms-tabs-vertical{display:flex;gap:20px;flex-wrap:nowrap;flex-direction:column}.ms-line-tabs input[type=radio]{display:none}.ms-line-tabs .ms-tab{padding:7px 12px;background:none;color:#6a6b6d!important;border:0;cursor:pointer;font-size:14px;font-weight:450}.ms-line-tabs .ms-tab:hover{color:#1b1f22;border-bottom:2px solid #E0E0E0}.ms-line-tabs input[type=radio]:checked+.ms-tab{color:#1b1f22;border-bottom:2px solid #0084FF}.ms-line-tabs .ms-tab.disabled{color:#1b1f22;border-bottom:2px solid #0084FF;outline:1px solid #0084FF!important;outline-color:#0084ff!important;border-radius:6px;cursor:not-allowed}\n"] }]
+            args: [{ selector: 'ms-tabs', imports: [CommonModule, FormsModule], template: "@if(!skeleton && tabsType === 'horizontel'){\n@if(styleType === 'default'){\n<div class=\"ms-default-tabs\">\n    <div class=\"tabs\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}@else if (styleType === 'pill'){\n<div class=\"ms-pill-tabs\">\n    <div class=\"tabs\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}@else if (styleType === 'line'){\n<div class=\"ms-line-tabs\">\n    <div class=\"ms-tabs\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"ms-tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}\n}@else if (!skeleton && tabsType === 'vertical'){\n@if(styleType === 'default'){\n<div class=\"ms-default-vertical-tabs\">\n    <div class=\"tabs-vertical\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}@else if (styleType === 'pill'){\n<div class=\"ms-pill-vertical-tabs\">\n    <div class=\"tabs-vertical\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}@else if (styleType === 'line'){\n<div class=\"ms-line-tabs\">\n    <div class=\"ms-tabs-vertical\">\n        <div *ngFor=\"let item of tabsList; let i = index\">\n            <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n                (click)=\"onSelect(item , i )\" />\n            <label [for]=\"item.id\" class=\"ms-tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n                {{ item.name }}\n            </label>\n        </div>\n    </div>\n</div>\n}\n}@else if(skeleton){\n<div class=\"ms-default-tabs\">\n    <div class=\"tabs\">\n        <div class=\"tab skeleton\"></div>\n    </div>\n</div>\n}" }]
         }], propDecorators: { tabsType: [{
                 type: Input
             }], styleType: [{
@@ -3712,11 +3659,11 @@ class MsBreadcrumb {
         this.itemsChange.emit(newItems);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsBreadcrumb, isStandalone: true, selector: "ms-breadcrumb", inputs: { items: "items", separatorType: "separatorType" }, outputs: { itemsChange: "itemsChange" }, ngImport: i0, template: "<nav class=\"ms-breadcrumb\">\n    <ng-container *ngFor=\"let item of items; let i = index; let last = last\">\n\n        <!-- Clickable items -->\n        <a *ngIf=\"!last\" class=\"ms-breadcrumb-item\" (click)=\"onItemClick(i, item)\">\n\n            <!-- Home icon only for first -->\n            <span *ngIf=\"i === 0\" class=\"breadcrumb-icon\">\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path d=\"M3 11.5L12 4l9 7.5\"></path>\n                    <path d=\"M5 10.5V20h5v-6h4v6h5V10.5\"></path>\n                </svg>\n            </span>\n\n            {{ item.label }}\n        </a>\n\n        <!-- Last item -->\n        <span *ngIf=\"last\" class=\"ms-breadcrumb-item active\">\n\n            @if(separatorType === 'separator'){\n            <span *ngIf=\"i === 0\" class=\"breadcrumb-icon\">\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path d=\"M3 11.5L12 4l9 7.5\"></path>\n                    <path d=\"M5 10.5V20h5v-6h4v6h5V10.5\"></path>\n                </svg>\n            </span>\n            }@else if(separatorType === 'separator-arrow'){\n            <span *ngIf=\"i === 0\" class=\"breadcrumb-separator-icon\">\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path d=\"M9 6l6 6-6 6\"></path>\n                </svg>\n            </span>\n            }\n\n            {{ item.label }}\n        </span>\n\n        <!-- Separator -->\n        @if(separatorType === 'separator'){\n        <span *ngIf=\"!last\" class=\"breadcrumb-separator\">/</span>\n        }@else if(separatorType === 'separator-arrow'){\n        <span *ngIf=\"!last\" class=\"breadcrumb-separator-icon\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path d=\"M9 6l6 6-6 6\"></path>\n            </svg>\n        </span>\n\n        }\n\n    </ng-container>\n</nav>", styles: [".ms-breadcrumb{display:flex;align-items:center;gap:4px;font-size:14px;color:#6a6b6d}.ms-breadcrumb-item{display:inline-flex;align-items:center;gap:6px;color:#6a6b6d;text-decoration:none;font-weight:400}.breadcrumb-icon{font-size:14px;padding-top:4px}.breadcrumb-separator{color:#6a6b6d}.ms-breadcrumb-item:hover{text-decoration:underline;color:#1b1f22}.ms-breadcrumb-item.active{cursor:default;text-decoration:none;font-size:14px!important;color:#1b1f22}.breadcrumb-icon svg{width:16px;height:16px;fill:none;stroke:#6a6b6d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ms-breadcrumb-item:focus-visible{outline:2px solid #0084FF;outline-offset:2px;border-radius:2px}.ms-breadcrumb-item:focus{outline:2px solid #0084FF;outline-offset:2px;border-radius:2px}.breadcrumb-separator-icon svg{width:14px;height:14px;fill:none;stroke:#6a6b6d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;padding-top:4px}\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 }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsBreadcrumb, isStandalone: true, selector: "ms-breadcrumb", inputs: { items: "items", separatorType: "separatorType" }, outputs: { itemsChange: "itemsChange" }, ngImport: i0, template: "<nav class=\"ms-breadcrumb\">\n    <ng-container *ngFor=\"let item of items; let i = index; let last = last\">\n\n        <!-- Clickable items -->\n        <a *ngIf=\"!last\" class=\"ms-breadcrumb-item\" (click)=\"onItemClick(i, item)\">\n\n            <!-- Home icon only for first -->\n            <span *ngIf=\"i === 0\" class=\"breadcrumb-icon\">\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path d=\"M3 11.5L12 4l9 7.5\"></path>\n                    <path d=\"M5 10.5V20h5v-6h4v6h5V10.5\"></path>\n                </svg>\n            </span>\n\n            {{ item.label }}\n        </a>\n\n        <!-- Last item -->\n        <span *ngIf=\"last\" class=\"ms-breadcrumb-item active\">\n\n            @if(separatorType === 'separator'){\n            <span *ngIf=\"i === 0\" class=\"breadcrumb-icon\">\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path d=\"M3 11.5L12 4l9 7.5\"></path>\n                    <path d=\"M5 10.5V20h5v-6h4v6h5V10.5\"></path>\n                </svg>\n            </span>\n            }@else if(separatorType === 'separator-arrow'){\n            <span *ngIf=\"i === 0\" class=\"breadcrumb-separator-icon\">\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path d=\"M9 6l6 6-6 6\"></path>\n                </svg>\n            </span>\n            }\n\n            {{ item.label }}\n        </span>\n\n        <!-- Separator -->\n        @if(separatorType === 'separator'){\n        <span *ngIf=\"!last\" class=\"breadcrumb-separator\">/</span>\n        }@else if(separatorType === 'separator-arrow'){\n        <span *ngIf=\"!last\" class=\"breadcrumb-separator-icon\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path d=\"M9 6l6 6-6 6\"></path>\n            </svg>\n        </span>\n\n        }\n\n    </ng-container>\n</nav>", styles: [""], 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 }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsBreadcrumb, decorators: [{
             type: Component,
-            args: [{ selector: 'ms-breadcrumb', imports: [CommonModule, FormsModule], template: "<nav class=\"ms-breadcrumb\">\n    <ng-container *ngFor=\"let item of items; let i = index; let last = last\">\n\n        <!-- Clickable items -->\n        <a *ngIf=\"!last\" class=\"ms-breadcrumb-item\" (click)=\"onItemClick(i, item)\">\n\n            <!-- Home icon only for first -->\n            <span *ngIf=\"i === 0\" class=\"breadcrumb-icon\">\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path d=\"M3 11.5L12 4l9 7.5\"></path>\n                    <path d=\"M5 10.5V20h5v-6h4v6h5V10.5\"></path>\n                </svg>\n            </span>\n\n            {{ item.label }}\n        </a>\n\n        <!-- Last item -->\n        <span *ngIf=\"last\" class=\"ms-breadcrumb-item active\">\n\n            @if(separatorType === 'separator'){\n            <span *ngIf=\"i === 0\" class=\"breadcrumb-icon\">\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path d=\"M3 11.5L12 4l9 7.5\"></path>\n                    <path d=\"M5 10.5V20h5v-6h4v6h5V10.5\"></path>\n                </svg>\n            </span>\n            }@else if(separatorType === 'separator-arrow'){\n            <span *ngIf=\"i === 0\" class=\"breadcrumb-separator-icon\">\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path d=\"M9 6l6 6-6 6\"></path>\n                </svg>\n            </span>\n            }\n\n            {{ item.label }}\n        </span>\n\n        <!-- Separator -->\n        @if(separatorType === 'separator'){\n        <span *ngIf=\"!last\" class=\"breadcrumb-separator\">/</span>\n        }@else if(separatorType === 'separator-arrow'){\n        <span *ngIf=\"!last\" class=\"breadcrumb-separator-icon\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path d=\"M9 6l6 6-6 6\"></path>\n            </svg>\n        </span>\n\n        }\n\n    </ng-container>\n</nav>", styles: [".ms-breadcrumb{display:flex;align-items:center;gap:4px;font-size:14px;color:#6a6b6d}.ms-breadcrumb-item{display:inline-flex;align-items:center;gap:6px;color:#6a6b6d;text-decoration:none;font-weight:400}.breadcrumb-icon{font-size:14px;padding-top:4px}.breadcrumb-separator{color:#6a6b6d}.ms-breadcrumb-item:hover{text-decoration:underline;color:#1b1f22}.ms-breadcrumb-item.active{cursor:default;text-decoration:none;font-size:14px!important;color:#1b1f22}.breadcrumb-icon svg{width:16px;height:16px;fill:none;stroke:#6a6b6d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ms-breadcrumb-item:focus-visible{outline:2px solid #0084FF;outline-offset:2px;border-radius:2px}.ms-breadcrumb-item:focus{outline:2px solid #0084FF;outline-offset:2px;border-radius:2px}.breadcrumb-separator-icon svg{width:14px;height:14px;fill:none;stroke:#6a6b6d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;padding-top:4px}\n"] }]
+            args: [{ selector: 'ms-breadcrumb', imports: [CommonModule, FormsModule], template: "<nav class=\"ms-breadcrumb\">\n    <ng-container *ngFor=\"let item of items; let i = index; let last = last\">\n\n        <!-- Clickable items -->\n        <a *ngIf=\"!last\" class=\"ms-breadcrumb-item\" (click)=\"onItemClick(i, item)\">\n\n            <!-- Home icon only for first -->\n            <span *ngIf=\"i === 0\" class=\"breadcrumb-icon\">\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path d=\"M3 11.5L12 4l9 7.5\"></path>\n                    <path d=\"M5 10.5V20h5v-6h4v6h5V10.5\"></path>\n                </svg>\n            </span>\n\n            {{ item.label }}\n        </a>\n\n        <!-- Last item -->\n        <span *ngIf=\"last\" class=\"ms-breadcrumb-item active\">\n\n            @if(separatorType === 'separator'){\n            <span *ngIf=\"i === 0\" class=\"breadcrumb-icon\">\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path d=\"M3 11.5L12 4l9 7.5\"></path>\n                    <path d=\"M5 10.5V20h5v-6h4v6h5V10.5\"></path>\n                </svg>\n            </span>\n            }@else if(separatorType === 'separator-arrow'){\n            <span *ngIf=\"i === 0\" class=\"breadcrumb-separator-icon\">\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path d=\"M9 6l6 6-6 6\"></path>\n                </svg>\n            </span>\n            }\n\n            {{ item.label }}\n        </span>\n\n        <!-- Separator -->\n        @if(separatorType === 'separator'){\n        <span *ngIf=\"!last\" class=\"breadcrumb-separator\">/</span>\n        }@else if(separatorType === 'separator-arrow'){\n        <span *ngIf=\"!last\" class=\"breadcrumb-separator-icon\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path d=\"M9 6l6 6-6 6\"></path>\n            </svg>\n        </span>\n\n        }\n\n    </ng-container>\n</nav>" }]
         }], propDecorators: { items: [{
                 type: Input
             }], separatorType: [{
@@ -3758,11 +3705,11 @@ class MsToaster {
         clearTimeout(this.timeoutId);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsToaster, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsToaster, isStandalone: true, selector: "ms-toaster", inputs: { type: "type", icon: "icon", title: "title", message: "message", duration: "duration", position: "position" }, outputs: { close: "close" }, ngImport: i0, template: " <div class=\"ms-toaster-wrapper\" [ngClass]=\"position\">\n  <div class=\"ms-toaster-container\" [ngClass]=\"type\">\n    <div class=\"ms-content-wrapper\">\n      <div class=\"ms-icon-section icon-2x ms-me-2\">\n        @if(type !== 'danger') {\n            <!-- <ms-icon name=\"check\" size=\"small\"></ms-icon> -->\n          <!-- <span [inlineSVG]=\"getIconClass()\"></span> -->\n           <ms-icon [name]=\"getIconClass()\" [color]=\"'ms-icon-white'\"></ms-icon>\n        }\n        @if (type === 'danger') {\n            <ms-icon [name]=\"'information'\" [color]=\"'ms-icon-white'\"></ms-icon>\n          <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/infoIconNew.svg'\"></span> -->\n        }\n      </div>\n\n      <div class=\"ms-text-section\">\n        @if(title) {\n          <h4 class=\"ms-toaster-title\">{{ title }}</h4>\n        }\n        <p class=\"ms-toaster-message\">{{ message }}</p>\n      </div>\n    </div>\n\n    <div class=\"ms-action-section\">\n      <button class=\"ms-close-btn\" (click)=\"closeToaster()\">\u00D7</button>\n    </div>\n  </div>\n</div>\n\n \n\n\n ", styles: [".ms-toaster-wrapper{position:fixed;z-index:9999;padding:10px}.ms-toaster-wrapper.top-right{top:20px;right:20px}.ms-toaster-wrapper.top-left{top:20px;left:20px}.ms-toaster-wrapper.bottom-right{bottom:20px;right:20px}.ms-toaster-wrapper.bottom-left{bottom:20px;left:20px}.ms-toaster-wrapper.top-center{top:20px;left:50%;transform:translate(-50%)}.ms-toaster-wrapper.bottom-center{bottom:20px;left:50%;transform:translate(-50%)}.ms-toaster-container{position:relative;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:8px;min-width:300px;color:#fff;font-family:sans-serif;height:44px}.ms-toaster-container.black{background-color:#121212}.ms-toaster-container.primary{background-color:#3b82f6}.ms-toaster-container.success{background-color:#22c55e}.ms-toaster-container.danger{background-color:#e5484d}.ms-toaster-container .ms-content-wrapper{display:flex;align-items:center;gap:12px}.ms-toaster-container .ms-text-section{display:flex;flex-direction:column}.ms-toaster-container .ms-text-section .ms-toaster-title{margin:0;font-size:14px;font-weight:600}.ms-toaster-container .ms-text-section .ms-toaster-message{margin:0;font-size:13px;opacity:.9}.ms-toaster-container .ms-action-section{display:flex;align-items:center;gap:10px}.ms-toaster-container .ms-action-section .ms-action-btn{background:none;border:none;color:#fff;cursor:pointer;font-weight:500}.ms-toaster-container .ms-action-section .ms-close-btn{background:none;border:none;color:#fff;cursor:pointer;font-size:18px}.ms-custom{position:relative}.ms-icon-section{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsToaster, isStandalone: true, selector: "ms-toaster", inputs: { type: "type", icon: "icon", title: "title", message: "message", duration: "duration", position: "position" }, outputs: { close: "close" }, ngImport: i0, template: " <div class=\"ms-toaster-wrapper\" [ngClass]=\"position\">\n  <div class=\"ms-toaster-container\" [ngClass]=\"type\">\n    <div class=\"ms-content-wrapper\">\n      <div class=\"ms-icon-section icon-2x ms-me-2\">\n        @if(type !== 'danger') {\n            <!-- <ms-icon name=\"check\" size=\"small\"></ms-icon> -->\n          <!-- <span [inlineSVG]=\"getIconClass()\"></span> -->\n           <ms-icon [name]=\"getIconClass()\" [color]=\"'ms-icon-white'\"></ms-icon>\n        }\n        @if (type === 'danger') {\n            <ms-icon [name]=\"'information'\" [color]=\"'ms-icon-white'\"></ms-icon>\n          <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/infoIconNew.svg'\"></span> -->\n        }\n      </div>\n\n      <div class=\"ms-text-section\">\n        @if(title) {\n          <h4 class=\"ms-toaster-title\">{{ title }}</h4>\n        }\n        <p class=\"ms-toaster-message\">{{ message }}</p>\n      </div>\n    </div>\n\n    <div class=\"ms-action-section\">\n      <button class=\"ms-close-btn\" (click)=\"closeToaster()\">\u00D7</button>\n    </div>\n  </div>\n</div>\n\n \n\n\n ", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsToaster, decorators: [{
             type: Component,
-            args: [{ selector: 'ms-toaster', imports: [CommonModule, MsIcon], template: " <div class=\"ms-toaster-wrapper\" [ngClass]=\"position\">\n  <div class=\"ms-toaster-container\" [ngClass]=\"type\">\n    <div class=\"ms-content-wrapper\">\n      <div class=\"ms-icon-section icon-2x ms-me-2\">\n        @if(type !== 'danger') {\n            <!-- <ms-icon name=\"check\" size=\"small\"></ms-icon> -->\n          <!-- <span [inlineSVG]=\"getIconClass()\"></span> -->\n           <ms-icon [name]=\"getIconClass()\" [color]=\"'ms-icon-white'\"></ms-icon>\n        }\n        @if (type === 'danger') {\n            <ms-icon [name]=\"'information'\" [color]=\"'ms-icon-white'\"></ms-icon>\n          <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/infoIconNew.svg'\"></span> -->\n        }\n      </div>\n\n      <div class=\"ms-text-section\">\n        @if(title) {\n          <h4 class=\"ms-toaster-title\">{{ title }}</h4>\n        }\n        <p class=\"ms-toaster-message\">{{ message }}</p>\n      </div>\n    </div>\n\n    <div class=\"ms-action-section\">\n      <button class=\"ms-close-btn\" (click)=\"closeToaster()\">\u00D7</button>\n    </div>\n  </div>\n</div>\n\n \n\n\n ", styles: [".ms-toaster-wrapper{position:fixed;z-index:9999;padding:10px}.ms-toaster-wrapper.top-right{top:20px;right:20px}.ms-toaster-wrapper.top-left{top:20px;left:20px}.ms-toaster-wrapper.bottom-right{bottom:20px;right:20px}.ms-toaster-wrapper.bottom-left{bottom:20px;left:20px}.ms-toaster-wrapper.top-center{top:20px;left:50%;transform:translate(-50%)}.ms-toaster-wrapper.bottom-center{bottom:20px;left:50%;transform:translate(-50%)}.ms-toaster-container{position:relative;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:8px;min-width:300px;color:#fff;font-family:sans-serif;height:44px}.ms-toaster-container.black{background-color:#121212}.ms-toaster-container.primary{background-color:#3b82f6}.ms-toaster-container.success{background-color:#22c55e}.ms-toaster-container.danger{background-color:#e5484d}.ms-toaster-container .ms-content-wrapper{display:flex;align-items:center;gap:12px}.ms-toaster-container .ms-text-section{display:flex;flex-direction:column}.ms-toaster-container .ms-text-section .ms-toaster-title{margin:0;font-size:14px;font-weight:600}.ms-toaster-container .ms-text-section .ms-toaster-message{margin:0;font-size:13px;opacity:.9}.ms-toaster-container .ms-action-section{display:flex;align-items:center;gap:10px}.ms-toaster-container .ms-action-section .ms-action-btn{background:none;border:none;color:#fff;cursor:pointer;font-weight:500}.ms-toaster-container .ms-action-section .ms-close-btn{background:none;border:none;color:#fff;cursor:pointer;font-size:18px}.ms-custom{position:relative}.ms-icon-section{display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'ms-toaster', imports: [CommonModule, MsIcon], template: " <div class=\"ms-toaster-wrapper\" [ngClass]=\"position\">\n  <div class=\"ms-toaster-container\" [ngClass]=\"type\">\n    <div class=\"ms-content-wrapper\">\n      <div class=\"ms-icon-section icon-2x ms-me-2\">\n        @if(type !== 'danger') {\n            <!-- <ms-icon name=\"check\" size=\"small\"></ms-icon> -->\n          <!-- <span [inlineSVG]=\"getIconClass()\"></span> -->\n           <ms-icon [name]=\"getIconClass()\" [color]=\"'ms-icon-white'\"></ms-icon>\n        }\n        @if (type === 'danger') {\n            <ms-icon [name]=\"'information'\" [color]=\"'ms-icon-white'\"></ms-icon>\n          <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/infoIconNew.svg'\"></span> -->\n        }\n      </div>\n\n      <div class=\"ms-text-section\">\n        @if(title) {\n          <h4 class=\"ms-toaster-title\">{{ title }}</h4>\n        }\n        <p class=\"ms-toaster-message\">{{ message }}</p>\n      </div>\n    </div>\n\n    <div class=\"ms-action-section\">\n      <button class=\"ms-close-btn\" (click)=\"closeToaster()\">\u00D7</button>\n    </div>\n  </div>\n</div>\n\n \n\n\n " }]
         }], propDecorators: { type: [{
                 type: Input
             }], icon: [{