ms-design-system 0.0.44 → 0.0.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/fesm2022/ms-design-system.mjs +96 -122
  2. package/fesm2022/ms-design-system.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/src/assets/scss/height.scss +22 -0
  5. package/src/assets/scss/margin.scss +179 -38
  6. package/src/assets/scss/padding.scss +180 -31
  7. package/src/assets/scss/style.scss +5 -1
  8. package/src/assets/scss/width.scss +22 -0
  9. package/src/styles.scss +19 -22
  10. package/types/ms-design-system.d.ts +18 -9
package/fesm2022/ms-design-system.mjs CHANGED
@@ -69,51 +69,62 @@ class MsIcon {
69
69
  size = 'small'; // default
70
70
  width = 16;
71
71
  height = 16;
72
- strokeWidth = 1.25;
72
+ strokeWidth = 'stroke-lg';
73
73
  constructor(sanitizer) {
74
74
  this.sanitizer = sanitizer;
75
75
  }
76
76
  ngOnInit() {
77
77
  const icon = ICONS[this.name] || '';
78
78
  this.svg = this.sanitizer.bypassSecurityTrustHtml(icon);
79
- console.log(this.svg, 'svg');
80
- console.log(ICONS, 'ICONS');
81
- console.log(this.name, 'name');
82
79
  this.getsize();
80
+ this.getsizeStroke();
83
81
  }
84
82
  ngOnChanges() {
85
83
  const icon = ICONS[this.name] || '';
86
84
  this.svg = this.sanitizer.bypassSecurityTrustHtml(icon);
87
85
  this.getsize();
88
- console.log(this.svg, 'svg');
89
- console.log(ICONS, 'ICONS');
90
- console.log(this.name, 'name');
86
+ this.getsizeStroke();
91
87
  }
92
88
  getsize() {
93
89
  switch (this.size) {
94
90
  case 'small':
95
91
  this.width = this.height = 16;
96
- this.strokeWidth = 1.25;
97
92
  break;
98
93
  case 'medium':
99
94
  this.width = this.height = 20;
100
- this.strokeWidth = 1.5;
101
95
  break;
102
96
  case 'large':
103
97
  this.width = this.height = 24;
104
- this.strokeWidth = 1.75;
105
98
  break;
106
99
  default:
107
100
  this.width = this.height = 20;
108
- this.strokeWidth = 1.5;
101
+ }
102
+ }
103
+ getsizeStroke() {
104
+ switch (this.size) {
105
+ case 'small':
106
+ this.width = this.height = 16;
107
+ this.strokeWidth = 'stroke-sm';
108
+ break;
109
+ case 'medium':
110
+ this.width = this.height = 20;
111
+ this.strokeWidth = 'stroke-md';
112
+ break;
113
+ case 'large':
114
+ this.width = this.height = 24;
115
+ this.strokeWidth = 'stroke-lg';
116
+ break;
117
+ default:
118
+ this.width = this.height = 20;
119
+ this.strokeWidth = 'stroke-lg';
109
120
  }
110
121
  }
111
122
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsIcon, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
112
- 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\" [ngStyle]=\"{'width.px': width, 'height.px': height, 'display':'inline-block'}\" [attr.stroke-width]=\"strokeWidth\" [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}\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 }] });
123
+ 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 }] });
113
124
  }
114
125
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsIcon, decorators: [{
115
126
  type: Component,
116
- args: [{ selector: 'ms-icon', imports: [CommonModule, FormsModule], template: "<span [innerHTML]=\"svg\" [ngStyle]=\"{'width.px': width, 'height.px': height, 'display':'inline-block'}\" [attr.stroke-width]=\"strokeWidth\" [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}\n"] }]
127
+ 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"] }]
117
128
  }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { name: [{
118
129
  type: Input
119
130
  }], color: [{
@@ -675,11 +686,11 @@ class MsDropdown {
675
686
  this.isOpen = false;
676
687
  }
677
688
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDropdown, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
678
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsDropdown, isStandalone: true, selector: "ms-dropdown", inputs: { text: "text", isDisabled: "isDisabled", items: "items", icon: "icon", iconPosition: "iconPosition", closeOnSelect: "closeOnSelect", closeOnClickOutside: "closeOnClickOutside", selectedItem: "selectedItem", allowMultiple: "allowMultiple", maxHeight: "maxHeight", loading: "loading", error: "error", ariaLabel: "ariaLabel", searchable: "searchable", searchPlaceholder: "searchPlaceholder", noResultsText: "noResultsText", customClass: "customClass", dropdownMenuClass: "dropdownMenuClass", dropdownMenuWidth: "dropdownMenuWidth", showFlagImage: "showFlagImage", multiSelectDisplay: "multiSelectDisplay", inputPlaceholder: "inputPlaceholder", inputLabel: "inputLabel", inputErrorState: "inputErrorState", inputWarningState: "inputWarningState", inputFocusState: "inputFocusState", required: "required", size: "size", variant: "variant", radiussize: "radiussize", iconOnly: "iconOnly", useInputField: "useInputField" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "tagInput", first: true, predicate: ["tagInput"], descendants: true }], ngImport: i0, template: "<div class=\"ms-dropdown-wrapper ms-w-100\" [ngClass]=\"customClass\"\n (click)=\"onTriggerClick()\">\n <div class=\"ms-dropdown-field ms-d-flex ms-align-items-center ms-w-100\">\n <!-- allowMultiple && multiSelectDisplay === 'tags' -->\n <div class=\"ms-input-wrapper\" *ngIf=\"allowMultiple && multiSelectDisplay === 'tags'\"\n [class.focused]=\"isFocused\"\n [class.error]=\"hasError\"\n [class.disabled]=\"isDisabled\"\n [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\"\n (click)=\"focusInput()\" [class.ms-dropdown-form-control]=\"visibleTags.length > 0\">\n\n <div class=\"ms-dropdown-display ms-d-flex ms-align-items-center ms-w-100\">\n\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-tags-wrapper-suffix-icon ms-me-3\">\n <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n\n <!-- Selected Flag -->\n <!-- <img *ngIf=\"showFlagImage && selectedItemObj?.countryCode\"\n [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.label | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n alt=\"{{ selectedItemObj?.label }}\" /> -->\n <ms-flag-icon *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"ms-country-flag ms-me-2\" [name]=\"selectedItemObj?.label | lowercase\"></ms-flag-icon>\n\n <!-- TAGS -->\n <span class=\"ms-tag ms-me-1\" *ngFor=\"let item of visibleTags\">\n {{ item.label }}\n <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n </span>\n\n <!-- +N MORE -->\n <span class=\"ms-tag ms-more-btn\"\n *ngIf=\"hiddenTagsCount() > 0\"\n (click)=\"toggleHiddenTags(); $event.stopPropagation()\">\n +{{ hiddenTagsCount() }} more\n </span>\n\n <!-- DROPDOWN FOR HIDDEN TAGS -->\n <div class=\"ms-hidden-tags-dropdown\"\n *ngIf=\"isHiddenTagsOpen && hiddenTagsCount() > 0\"\n (click)=\"$event.stopPropagation()\">\n <span class=\"ms-tag\" *ngFor=\"let item of hiddenTags\">\n {{ item.label }}\n <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n </span>\n </div>\n\n <!-- Placeholder -->\n <span *ngIf=\"selectedItems.length === 0\"\n class=\"ms-input-placeholder\">\n {{ inputPlaceholder || 'Default Dropdown' }}\n </span>\n\n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-tags-wrapper-suffix-icon\">\n <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center ms-ms-3\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n\n </div>\n\n </div>\n\n <!-- Input Field Trigger -->\n <div *ngIf=\"multiSelectDisplay !== 'tags'\" \n class=\"ms-dropdown-input-wrapper ms-w-100\"\n (click)=\"onTriggerClick(); $event.stopPropagation()\">\n\n <div class=\"ms-input-wrapper\" [class.ms-input-selected]=\"(selectedItems.length > 0)\" [class.ms-input-focus]=\"inputFocusState || isOpen\"\n [class.ms-input-error]=\"inputErrorState || isSelectionRequired()\"\n [class.ms-input-warning]=\"inputWarningState\" [class.disabled]=\"isDisabled\">\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-input-prefix-icon\">\n <!-- <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n\n <!-- Flag -->\n <span *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"flag_image_container\">\n <!-- <img\n [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.countryCode | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n [alt]=\"selectedItemObj.label || ''\" /> -->\n <ms-flag-icon class=\"ms-country-flag ms-me-2\" [name]=\"selectedItemObj?.label | lowercase\"></ms-flag-icon>\n </span>\n\n <!-- VALUE TEXT -->\n <span class=\"ms-input-value ms-me-3\"\n [class.ms-placeholder]=\"!(selectedItem || text)\">\n {{ selectedItem || text || inputPlaceholder }}\n </span>\n\n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-input-suffix-icon\">\n <!-- <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n </div>\n </div>\n </div>\n\n\n <div *ngIf=\"isOpen\" class=\"ms-dropdown-menu\" [ngClass]=\"[dropdownMenuClass || '', 'ms-dropdown-' + dropdownPosition()]\"\n [style.maxHeight]=\"maxHeight\"\n [ngStyle]=\"{'overflowY': 'auto', 'overflowX': 'hidden','padding': searchable ? '0px' : '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" }] });
689
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsDropdown, isStandalone: true, selector: "ms-dropdown", inputs: { text: "text", isDisabled: "isDisabled", items: "items", icon: "icon", iconPosition: "iconPosition", closeOnSelect: "closeOnSelect", closeOnClickOutside: "closeOnClickOutside", selectedItem: "selectedItem", allowMultiple: "allowMultiple", maxHeight: "maxHeight", loading: "loading", error: "error", ariaLabel: "ariaLabel", searchable: "searchable", searchPlaceholder: "searchPlaceholder", noResultsText: "noResultsText", customClass: "customClass", dropdownMenuClass: "dropdownMenuClass", dropdownMenuWidth: "dropdownMenuWidth", showFlagImage: "showFlagImage", multiSelectDisplay: "multiSelectDisplay", inputPlaceholder: "inputPlaceholder", inputLabel: "inputLabel", inputErrorState: "inputErrorState", inputWarningState: "inputWarningState", inputFocusState: "inputFocusState", required: "required", size: "size", variant: "variant", radiussize: "radiussize", iconOnly: "iconOnly", useInputField: "useInputField" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "tagInput", first: true, predicate: ["tagInput"], descendants: true }], ngImport: i0, template: "<div class=\"ms-dropdown-wrapper ms-w-100\" [ngClass]=\"customClass\"\n (click)=\"onTriggerClick()\">\n <div class=\"ms-dropdown-field ms-d-flex ms-align-items-center ms-w-100\">\n <!-- allowMultiple && multiSelectDisplay === 'tags' -->\n <div class=\"ms-input-wrapper\" *ngIf=\"allowMultiple && multiSelectDisplay === 'tags'\"\n [class.focused]=\"isFocused\"\n [class.error]=\"hasError\"\n [class.disabled]=\"isDisabled\"\n [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\"\n (click)=\"focusInput()\" [class.ms-dropdown-form-control]=\"visibleTags.length > 0\">\n\n <div class=\"ms-dropdown-display ms-d-flex ms-align-items-center ms-w-100\">\n\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-tags-wrapper-suffix-icon ms-me-3\">\n <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n\n <!-- Selected Flag -->\n <!-- <img *ngIf=\"showFlagImage && selectedItemObj?.countryCode\"\n [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.label | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n alt=\"{{ selectedItemObj?.label }}\" /> -->\n <ms-flag-icon *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"ms-country-flag ms-me-2\" [name]=\"selectedItemObj?.label | lowercase\"></ms-flag-icon>\n\n <!-- TAGS -->\n <span class=\"ms-tag ms-me-1\" *ngFor=\"let item of visibleTags\">\n {{ item.label }}\n <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n </span>\n\n <!-- +N MORE -->\n <span class=\"ms-tag ms-more-btn\"\n *ngIf=\"hiddenTagsCount() > 0\"\n (click)=\"toggleHiddenTags(); $event.stopPropagation()\">\n +{{ hiddenTagsCount() }} more\n </span>\n\n <!-- DROPDOWN FOR HIDDEN TAGS -->\n <div class=\"ms-hidden-tags-dropdown\"\n *ngIf=\"isHiddenTagsOpen && hiddenTagsCount() > 0\"\n (click)=\"$event.stopPropagation()\">\n <span class=\"ms-tag\" *ngFor=\"let item of hiddenTags\">\n {{ item.label }}\n <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n </span>\n </div>\n\n <!-- Placeholder -->\n <span *ngIf=\"selectedItems.length === 0\"\n class=\"ms-input-placeholder\">\n {{ inputPlaceholder || 'Default Dropdown' }}\n </span>\n\n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-tags-wrapper-suffix-icon\">\n <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center ms-ms-3\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n\n </div>\n\n </div>\n\n <!-- Input Field Trigger -->\n <div *ngIf=\"multiSelectDisplay !== 'tags'\" \n class=\"ms-dropdown-input-wrapper ms-w-100\"\n (click)=\"onTriggerClick(); $event.stopPropagation()\">\n\n <div class=\"ms-input-wrapper\" [class.ms-input-selected]=\"(selectedItems.length > 0)\" [class.ms-input-focus]=\"inputFocusState || isOpen\"\n [class.ms-input-error]=\"inputErrorState || isSelectionRequired()\"\n [class.ms-input-warning]=\"inputWarningState\" [class.disabled]=\"isDisabled\">\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-input-prefix-icon\">\n <!-- <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n\n <!-- Flag -->\n <span *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"flag_image_container\">\n <!-- <img\n [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.countryCode | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n [alt]=\"selectedItemObj.label || ''\" /> -->\n <ms-flag-icon class=\"ms-country-flag ms-me-2\" [name]=\"selectedItemObj?.label | lowercase\"></ms-flag-icon>\n </span>\n\n <!-- VALUE TEXT -->\n <span class=\"ms-input-value ms-me-3\"\n [class.ms-placeholder]=\"!(selectedItem || text)\">\n {{ selectedItem || text || inputPlaceholder }}\n </span>\n\n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-input-suffix-icon\">\n <!-- <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n </div>\n </div>\n </div>\n\n\n <div *ngIf=\"isOpen\" class=\"ms-dropdown-menu\" [ngClass]=\"[dropdownMenuClass || '', 'ms-dropdown-' + dropdownPosition()]\"\n [style.maxHeight]=\"maxHeight\"\n [ngStyle]=\"{'overflowY': 'auto', 'overflowX': 'hidden'}\"\n (click)=\"$event.stopPropagation()\">\n \n <!-- Loader -->\n <div *ngIf=\"loading\" class=\"ms-dropdown-loader\">\n <ms-spinner [color]=\"'primary'\" [size]=\"'md'\"></ms-spinner>\n </div>\n\n <!-- Dropdown content -->\n <ng-container *ngIf=\"!loading\">\n <!-- Search input -->\n <div *ngIf=\"searchable\" class=\"ms-dropdown-search-container\">\n <input type=\"text\" [(ngModel)]=\"searchTerm\"\n [placeholder]=\"searchPlaceholder\" class=\"ms-dropdown-search\" />\n <ms-icon class=\"ms_icon\" [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n </div>\n\n <!-- Dropdown items -->\n <ng-container *ngIf=\"filteredItems.length > 0; else noResults\">\n <button *ngFor=\"let item of filteredItems; let i = index\"\n class=\"ms-dropdown-item ms-d-flex ms-align-items-center\"\n [disabled]=\"item.disabled\"\n [class.ms-selected]=\"item.selected\"\n [class.ms-p-0]=\"item.divider\"\n (click)=\"selectItem(item)\">\n <!-- MULTI-SELECT TICK ICON -->\n <div>\n\n </div>\n <!-- <span *ngIf=\"item.icon && !showFlagImage\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + item.icon\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\"></span> -->\n <ms-icon *ngIf=\"item.icon && !showFlagImage\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\" [name]=\"item.icon\" [size]=\"'small'\"></ms-icon>\n\n <!-- COUNTRY FLAG -->\n <!-- <img *ngIf=\"item.icon && showFlagImage\"\n [src]=\"'../../../../assets/data-grid/flags/' + (item.countryCode | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n alt=\"{{ item.label }}\" /> -->\n <ms-flag-icon *ngIf=\"item.icon && showFlagImage\" [name]=\"item.label | lowercase\"></ms-flag-icon>\n <!-- <span>{{item.label | lowercase}}</span> -->\n <!-- COUNTRY NAME -->\n <span [style.padding-left.px]=\"showFlagImage || item.icon ? 10 : 0\" class=\"ms-country-label\">\n {{ item.label }}\n </span>\n <!-- <span *ngIf=\"item.selected\" [inlineSVG]=\"'../../../../assets/data-grid/icons/blue-check.svg'\" class=\"dropdown_tick_icon ms-d-flex ms-me-2\">\n <ms-icon [name]=\"'check'\" [size]=\"'small'\"></ms-icon> -->\n <ms-icon *ngIf=\"item.selected\" class=\"dropdown_tick_icon ms-d-flex ms-me-2\" [name]=\"'check'\" [color]=\"'ms-icon-blue'\" [size]=\"'small'\"></ms-icon>\n <!-- </span> -->\n <!-- {{ item.label }} -->\n </button>\n </ng-container>\n\n <ng-template #noResults>\n <div class=\"ms-dropdown-no-results\">{{ noResultsText }}</div>\n </ng-template>\n </ng-container>\n </div>\n</div>", styles: [".ms-dropdown-wrapper{position:relative;display:inline-block}.ms-dropdown-trigger{width:100%;cursor:pointer}.ms-input-wrapper.ms-input-error,.ms-input-wrapper.ms-input-error:hover{border-color:#dc2626}.ms-input-wrapper.ms-input-warning,.ms-input-wrapper.ms-input-warning:hover{border-color:#f59e0b}.ms-input-wrapper.ms-input-focus .ms-dropdown-input-field{border-color:#3b82f6}.ms-input-wrapper.ms-input-focus .ms-input-tags-field{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.ms-dropdown-input-label{font-size:14px;font-weight:500;color:#374151;margin:0}.ms-dropdown-input-label .ms-required{color:#dc2626;margin-left:2px}.ms-dropdown-input-field-wrapper{display:flex;align-items:center;position:relative;gap:0}.ms-dropdown-input-prefix-icon{display:flex;align-items:center;justify-content:center;padding-left:12px;flex-shrink:0;color:#6b7280}.ms-dropdown-input-prefix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-dropdown-input-suffix-icon{display:flex;align-items:center;justify-content:center;padding-right:12px;flex-shrink:0;color:#6b7280}.ms-dropdown-input-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-tags-wrapper-prefix-icon{display:flex;align-items:center;justify-content:center;padding-left:12px;flex-shrink:0;color:#6b7280}.ms-tags-wrapper-prefix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-tags-wrapper-suffix-icon{flex-shrink:0;color:#6b7280;margin-left:auto}.ms-tags-wrapper-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-input-wrapper{flex:1;padding:10px 12px;border:1px solid #E0E0E0;border-radius:8px;font-size:14px;color:#374151;background-color:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s}.ms-input-wrapper:hover:not(.disabled,.ms-input-error,.ms-input-warning){border-color:#3b82f6}.ms-input-wrapper:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-input-wrapper.disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-input-wrapper::placeholder{color:#9ca3af}.ms-input-wrapper.disabled:hover{border-color:#e0e0e0!important}.ms-dropdown-menu{position:absolute;left:0;right:0;z-index:1000;border-radius:12px;background-color:#fff;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0;padding:4px 0}.ms-dropdown-menu.ms-dropdown-down{top:100%;margin-top:6px}.ms-dropdown-menu.ms-dropdown-up{bottom:100%;margin-bottom:6px}.ms-dropdown-item{width:100%;text-align:left;padding:8px 12px;background:none;border:none;cursor:pointer;transition:background-color .2s;font-size:14px!important;font-weight:400}.ms-dropdown-item .ms-country-label{font-size:14px!important;color:#1b1f22;padding-left:10px}.ms-dropdown-item:hover{background-color:#f5f5f5}.ms-dropdown-item.ms-selected{background:#0084ff1a}.dropdown_tick_icon{margin-left:auto}.ms-dropdown-search{width:-webkit-fill-available;padding:12px;margin:12px;border:1px solid #d1d5db;border-radius:8px}.ms-dropdown-search-container{position:sticky;top:0;background-color:#fff}.ms-dropdown-search-container input{padding-left:40px}.ms-dropdown-search-container .ms_icon{position:absolute;z-index:99999999;top:25px;left:25px;bottom:0;width:16px;height:16px}.ms-dropdown-no-results{padding:6px 12px;color:#9ca3af;font-style:italic}.ms-country-flag{width:18px;height:14px;object-fit:cover;border-radius:2px}.flag_image_container{display:flex;align-items:center}.flag_image_container .ms-country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-country-dial{font-size:12px;color:#6b7280}.ms-dropdown-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:12px}.ms-dropdown-loader .ms-spinner{display:flex;align-items:center;justify-content:center}.ms-dropdown-loader .ms-spinner .ms-spinner-circle{width:30px;height:30px;border:3px solid #e5e7eb;border-top:3px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}.ms-loader-text{margin:0;font-size:14px;color:#6b7280;font-weight:500}@keyframes spin{to{transform:rotate(360deg)}}.ms-tag{border-radius:4px;padding:4px 8px;font-size:12px;display:inline-flex;align-items:center;background:#1f24281a;color:#1b1f22}.ms-tag .ms-tag-close{cursor:pointer}.ms-tag-remove{cursor:pointer;margin-left:6px;font-weight:700}.ms-tag-input{border:none;outline:none;min-width:60px}.ms-tag-container{border:1px solid gainsboro;border-radius:4px;padding:4px 8px}.ms-more-btn{background:#d1d5db;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-hidden-tags-dropdown{position:absolute;top:100%;left:0;right:0;border-radius:8px;padding:4px;margin-top:4px;z-index:1000;display:flex;flex-wrap:wrap;gap:4px;height:60px;max-height:120px;overflow-y:auto;border:1px solid #E0E0E0;background:#fff;box-shadow:0 2px 12px #00000014}.ms-hidden-tags-dropdown .ms-tag{width:fit-content;height:fit-content}.ms-dropdown-form-control{padding:.2rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;opacity:1;border-width:1px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::placeholder{color:#6a6b6d;opacity:1}::-webkit-input-placeholder{color:#6a6b6d}::-moz-placeholder{color:#6a6b6d;opacity:1}:-ms-input-placeholder{color:#6a6b6d}.ms-input-placeholder{font-size:14px!important}:-moz-placeholder{color:#6a6b6d;opacity:1}.ms-hover{border:1px solid #0084FF;box-shadow:0 0 0 1px #b7dcff}.ms-input-wrapper{position:relative;display:flex;align-items:center;height:36px;padding:0 8px;border-radius:8px;cursor:pointer;background:#fff;border:1px solid #E0E0E0;font-size:14px!important;min-width:200px;transition:border-color .2s,box-shadow .2s}.ms-input-wrapper:hover{border-color:#0084ff}.ms-input-selected{border-color:#0084ff;box-shadow:none}.ms-input-wrapper.ms-input-focus{border-color:#0084ff;box-shadow:0 0 0 1px #b7dcff}.ms-input-value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px!important}.ms-placeholder{color:#9ca3af}input:focus-visible{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "component", type: MsSpinner, selector: "ms-spinner", inputs: ["color", "size", "text"], outputs: ["htmlChange"] }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }, { kind: "component", type: MsFlagIcon, selector: "ms-flag-icon", inputs: ["name", "size"] }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }] });
679
690
  }
680
691
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDropdown, decorators: [{
681
692
  type: Component,
682
- args: [{ selector: 'ms-dropdown', standalone: true, imports: [CommonModule, FormsModule, MsButton, InlineSVGModule, MsSpinner, MsIcon, MsFlagIcon], template: "<div class=\"ms-dropdown-wrapper ms-w-100\" [ngClass]=\"customClass\"\n (click)=\"onTriggerClick()\">\n <div class=\"ms-dropdown-field ms-d-flex ms-align-items-center ms-w-100\">\n <!-- allowMultiple && multiSelectDisplay === 'tags' -->\n <div class=\"ms-input-wrapper\" *ngIf=\"allowMultiple && multiSelectDisplay === 'tags'\"\n [class.focused]=\"isFocused\"\n [class.error]=\"hasError\"\n [class.disabled]=\"isDisabled\"\n [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\"\n (click)=\"focusInput()\" [class.ms-dropdown-form-control]=\"visibleTags.length > 0\">\n\n <div class=\"ms-dropdown-display ms-d-flex ms-align-items-center ms-w-100\">\n\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-tags-wrapper-suffix-icon ms-me-3\">\n <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n\n <!-- Selected Flag -->\n <!-- <img *ngIf=\"showFlagImage && selectedItemObj?.countryCode\"\n [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.label | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n alt=\"{{ selectedItemObj?.label }}\" /> -->\n <ms-flag-icon *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"ms-country-flag ms-me-2\" [name]=\"selectedItemObj?.label | lowercase\"></ms-flag-icon>\n\n <!-- TAGS -->\n <span class=\"ms-tag ms-me-1\" *ngFor=\"let item of visibleTags\">\n {{ item.label }}\n <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n </span>\n\n <!-- +N MORE -->\n <span class=\"ms-tag ms-more-btn\"\n *ngIf=\"hiddenTagsCount() > 0\"\n (click)=\"toggleHiddenTags(); $event.stopPropagation()\">\n +{{ hiddenTagsCount() }} more\n </span>\n\n <!-- DROPDOWN FOR HIDDEN TAGS -->\n <div class=\"ms-hidden-tags-dropdown\"\n *ngIf=\"isHiddenTagsOpen && hiddenTagsCount() > 0\"\n (click)=\"$event.stopPropagation()\">\n <span class=\"ms-tag\" *ngFor=\"let item of hiddenTags\">\n {{ item.label }}\n <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n </span>\n </div>\n\n <!-- Placeholder -->\n <span *ngIf=\"selectedItems.length === 0\"\n class=\"ms-input-placeholder\">\n {{ inputPlaceholder || 'Default Dropdown' }}\n </span>\n\n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-tags-wrapper-suffix-icon\">\n <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center ms-ms-3\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n\n </div>\n\n </div>\n\n <!-- Input Field Trigger -->\n <div *ngIf=\"multiSelectDisplay !== 'tags'\" \n class=\"ms-dropdown-input-wrapper ms-w-100\"\n (click)=\"onTriggerClick(); $event.stopPropagation()\">\n\n <div class=\"ms-input-wrapper\" [class.ms-input-selected]=\"(selectedItems.length > 0)\" [class.ms-input-focus]=\"inputFocusState || isOpen\"\n [class.ms-input-error]=\"inputErrorState || isSelectionRequired()\"\n [class.ms-input-warning]=\"inputWarningState\" [class.disabled]=\"isDisabled\">\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-input-prefix-icon\">\n <!-- <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n\n <!-- Flag -->\n <span *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"flag_image_container\">\n <!-- <img\n [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.countryCode | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n [alt]=\"selectedItemObj.label || ''\" /> -->\n <ms-flag-icon class=\"ms-country-flag ms-me-2\" [name]=\"selectedItemObj?.label | lowercase\"></ms-flag-icon>\n </span>\n\n <!-- VALUE TEXT -->\n <span class=\"ms-input-value ms-me-3\"\n [class.ms-placeholder]=\"!(selectedItem || text)\">\n {{ selectedItem || text || inputPlaceholder }}\n </span>\n\n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-input-suffix-icon\">\n <!-- <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n </div>\n </div>\n </div>\n\n\n <div *ngIf=\"isOpen\" class=\"ms-dropdown-menu\" [ngClass]=\"[dropdownMenuClass || '', 'ms-dropdown-' + dropdownPosition()]\"\n [style.maxHeight]=\"maxHeight\"\n [ngStyle]=\"{'overflowY': 'auto', 'overflowX': 'hidden','padding': searchable ? '0px' : '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"] }]
693
+ args: [{ selector: 'ms-dropdown', standalone: true, imports: [CommonModule, FormsModule, MsButton, InlineSVGModule, MsSpinner, MsIcon, MsFlagIcon], template: "<div class=\"ms-dropdown-wrapper ms-w-100\" [ngClass]=\"customClass\"\n (click)=\"onTriggerClick()\">\n <div class=\"ms-dropdown-field ms-d-flex ms-align-items-center ms-w-100\">\n <!-- allowMultiple && multiSelectDisplay === 'tags' -->\n <div class=\"ms-input-wrapper\" *ngIf=\"allowMultiple && multiSelectDisplay === 'tags'\"\n [class.focused]=\"isFocused\"\n [class.error]=\"hasError\"\n [class.disabled]=\"isDisabled\"\n [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\"\n (click)=\"focusInput()\" [class.ms-dropdown-form-control]=\"visibleTags.length > 0\">\n\n <div class=\"ms-dropdown-display ms-d-flex ms-align-items-center ms-w-100\">\n\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-tags-wrapper-suffix-icon ms-me-3\">\n <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n\n <!-- Selected Flag -->\n <!-- <img *ngIf=\"showFlagImage && selectedItemObj?.countryCode\"\n [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.label | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n alt=\"{{ selectedItemObj?.label }}\" /> -->\n <ms-flag-icon *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"ms-country-flag ms-me-2\" [name]=\"selectedItemObj?.label | lowercase\"></ms-flag-icon>\n\n <!-- TAGS -->\n <span class=\"ms-tag ms-me-1\" *ngFor=\"let item of visibleTags\">\n {{ item.label }}\n <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n </span>\n\n <!-- +N MORE -->\n <span class=\"ms-tag ms-more-btn\"\n *ngIf=\"hiddenTagsCount() > 0\"\n (click)=\"toggleHiddenTags(); $event.stopPropagation()\">\n +{{ hiddenTagsCount() }} more\n </span>\n\n <!-- DROPDOWN FOR HIDDEN TAGS -->\n <div class=\"ms-hidden-tags-dropdown\"\n *ngIf=\"isHiddenTagsOpen && hiddenTagsCount() > 0\"\n (click)=\"$event.stopPropagation()\">\n <span class=\"ms-tag\" *ngFor=\"let item of hiddenTags\">\n {{ item.label }}\n <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n </span>\n </div>\n\n <!-- Placeholder -->\n <span *ngIf=\"selectedItems.length === 0\"\n class=\"ms-input-placeholder\">\n {{ inputPlaceholder || 'Default Dropdown' }}\n </span>\n\n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-tags-wrapper-suffix-icon\">\n <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center ms-ms-3\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n\n </div>\n\n </div>\n\n <!-- Input Field Trigger -->\n <div *ngIf=\"multiSelectDisplay !== 'tags'\" \n class=\"ms-dropdown-input-wrapper ms-w-100\"\n (click)=\"onTriggerClick(); $event.stopPropagation()\">\n\n <div class=\"ms-input-wrapper\" [class.ms-input-selected]=\"(selectedItems.length > 0)\" [class.ms-input-focus]=\"inputFocusState || isOpen\"\n [class.ms-input-error]=\"inputErrorState || isSelectionRequired()\"\n [class.ms-input-warning]=\"inputWarningState\" [class.disabled]=\"isDisabled\">\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-input-prefix-icon\">\n <!-- <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n\n <!-- Flag -->\n <span *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"flag_image_container\">\n <!-- <img\n [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.countryCode | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n [alt]=\"selectedItemObj.label || ''\" /> -->\n <ms-flag-icon class=\"ms-country-flag ms-me-2\" [name]=\"selectedItemObj?.label | lowercase\"></ms-flag-icon>\n </span>\n\n <!-- VALUE TEXT -->\n <span class=\"ms-input-value ms-me-3\"\n [class.ms-placeholder]=\"!(selectedItem || text)\">\n {{ selectedItem || text || inputPlaceholder }}\n </span>\n\n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-input-suffix-icon\">\n <!-- <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n </div>\n </div>\n </div>\n\n\n <div *ngIf=\"isOpen\" class=\"ms-dropdown-menu\" [ngClass]=\"[dropdownMenuClass || '', 'ms-dropdown-' + dropdownPosition()]\"\n [style.maxHeight]=\"maxHeight\"\n [ngStyle]=\"{'overflowY': 'auto', 'overflowX': 'hidden'}\"\n (click)=\"$event.stopPropagation()\">\n \n <!-- Loader -->\n <div *ngIf=\"loading\" class=\"ms-dropdown-loader\">\n <ms-spinner [color]=\"'primary'\" [size]=\"'md'\"></ms-spinner>\n </div>\n\n <!-- Dropdown content -->\n <ng-container *ngIf=\"!loading\">\n <!-- Search input -->\n <div *ngIf=\"searchable\" class=\"ms-dropdown-search-container\">\n <input type=\"text\" [(ngModel)]=\"searchTerm\"\n [placeholder]=\"searchPlaceholder\" class=\"ms-dropdown-search\" />\n <ms-icon class=\"ms_icon\" [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n </div>\n\n <!-- Dropdown items -->\n <ng-container *ngIf=\"filteredItems.length > 0; else noResults\">\n <button *ngFor=\"let item of filteredItems; let i = index\"\n class=\"ms-dropdown-item ms-d-flex ms-align-items-center\"\n [disabled]=\"item.disabled\"\n [class.ms-selected]=\"item.selected\"\n [class.ms-p-0]=\"item.divider\"\n (click)=\"selectItem(item)\">\n <!-- MULTI-SELECT TICK ICON -->\n <div>\n\n </div>\n <!-- <span *ngIf=\"item.icon && !showFlagImage\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + item.icon\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\"></span> -->\n <ms-icon *ngIf=\"item.icon && !showFlagImage\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\" [name]=\"item.icon\" [size]=\"'small'\"></ms-icon>\n\n <!-- COUNTRY FLAG -->\n <!-- <img *ngIf=\"item.icon && showFlagImage\"\n [src]=\"'../../../../assets/data-grid/flags/' + (item.countryCode | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n alt=\"{{ item.label }}\" /> -->\n <ms-flag-icon *ngIf=\"item.icon && showFlagImage\" [name]=\"item.label | lowercase\"></ms-flag-icon>\n <!-- <span>{{item.label | lowercase}}</span> -->\n <!-- COUNTRY NAME -->\n <span [style.padding-left.px]=\"showFlagImage || item.icon ? 10 : 0\" class=\"ms-country-label\">\n {{ item.label }}\n </span>\n <!-- <span *ngIf=\"item.selected\" [inlineSVG]=\"'../../../../assets/data-grid/icons/blue-check.svg'\" class=\"dropdown_tick_icon ms-d-flex ms-me-2\">\n <ms-icon [name]=\"'check'\" [size]=\"'small'\"></ms-icon> -->\n <ms-icon *ngIf=\"item.selected\" class=\"dropdown_tick_icon ms-d-flex ms-me-2\" [name]=\"'check'\" [color]=\"'ms-icon-blue'\" [size]=\"'small'\"></ms-icon>\n <!-- </span> -->\n <!-- {{ item.label }} -->\n </button>\n </ng-container>\n\n <ng-template #noResults>\n <div class=\"ms-dropdown-no-results\">{{ noResultsText }}</div>\n </ng-template>\n </ng-container>\n </div>\n</div>", styles: [".ms-dropdown-wrapper{position:relative;display:inline-block}.ms-dropdown-trigger{width:100%;cursor:pointer}.ms-input-wrapper.ms-input-error,.ms-input-wrapper.ms-input-error:hover{border-color:#dc2626}.ms-input-wrapper.ms-input-warning,.ms-input-wrapper.ms-input-warning:hover{border-color:#f59e0b}.ms-input-wrapper.ms-input-focus .ms-dropdown-input-field{border-color:#3b82f6}.ms-input-wrapper.ms-input-focus .ms-input-tags-field{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.ms-dropdown-input-label{font-size:14px;font-weight:500;color:#374151;margin:0}.ms-dropdown-input-label .ms-required{color:#dc2626;margin-left:2px}.ms-dropdown-input-field-wrapper{display:flex;align-items:center;position:relative;gap:0}.ms-dropdown-input-prefix-icon{display:flex;align-items:center;justify-content:center;padding-left:12px;flex-shrink:0;color:#6b7280}.ms-dropdown-input-prefix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-dropdown-input-suffix-icon{display:flex;align-items:center;justify-content:center;padding-right:12px;flex-shrink:0;color:#6b7280}.ms-dropdown-input-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-tags-wrapper-prefix-icon{display:flex;align-items:center;justify-content:center;padding-left:12px;flex-shrink:0;color:#6b7280}.ms-tags-wrapper-prefix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-tags-wrapper-suffix-icon{flex-shrink:0;color:#6b7280;margin-left:auto}.ms-tags-wrapper-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-input-wrapper{flex:1;padding:10px 12px;border:1px solid #E0E0E0;border-radius:8px;font-size:14px;color:#374151;background-color:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s}.ms-input-wrapper:hover:not(.disabled,.ms-input-error,.ms-input-warning){border-color:#3b82f6}.ms-input-wrapper:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-input-wrapper.disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-input-wrapper::placeholder{color:#9ca3af}.ms-input-wrapper.disabled:hover{border-color:#e0e0e0!important}.ms-dropdown-menu{position:absolute;left:0;right:0;z-index:1000;border-radius:12px;background-color:#fff;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0;padding:4px 0}.ms-dropdown-menu.ms-dropdown-down{top:100%;margin-top:6px}.ms-dropdown-menu.ms-dropdown-up{bottom:100%;margin-bottom:6px}.ms-dropdown-item{width:100%;text-align:left;padding:8px 12px;background:none;border:none;cursor:pointer;transition:background-color .2s;font-size:14px!important;font-weight:400}.ms-dropdown-item .ms-country-label{font-size:14px!important;color:#1b1f22;padding-left:10px}.ms-dropdown-item:hover{background-color:#f5f5f5}.ms-dropdown-item.ms-selected{background:#0084ff1a}.dropdown_tick_icon{margin-left:auto}.ms-dropdown-search{width:-webkit-fill-available;padding:12px;margin:12px;border:1px solid #d1d5db;border-radius:8px}.ms-dropdown-search-container{position:sticky;top:0;background-color:#fff}.ms-dropdown-search-container input{padding-left:40px}.ms-dropdown-search-container .ms_icon{position:absolute;z-index:99999999;top:25px;left:25px;bottom:0;width:16px;height:16px}.ms-dropdown-no-results{padding:6px 12px;color:#9ca3af;font-style:italic}.ms-country-flag{width:18px;height:14px;object-fit:cover;border-radius:2px}.flag_image_container{display:flex;align-items:center}.flag_image_container .ms-country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-country-dial{font-size:12px;color:#6b7280}.ms-dropdown-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:12px}.ms-dropdown-loader .ms-spinner{display:flex;align-items:center;justify-content:center}.ms-dropdown-loader .ms-spinner .ms-spinner-circle{width:30px;height:30px;border:3px solid #e5e7eb;border-top:3px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}.ms-loader-text{margin:0;font-size:14px;color:#6b7280;font-weight:500}@keyframes spin{to{transform:rotate(360deg)}}.ms-tag{border-radius:4px;padding:4px 8px;font-size:12px;display:inline-flex;align-items:center;background:#1f24281a;color:#1b1f22}.ms-tag .ms-tag-close{cursor:pointer}.ms-tag-remove{cursor:pointer;margin-left:6px;font-weight:700}.ms-tag-input{border:none;outline:none;min-width:60px}.ms-tag-container{border:1px solid gainsboro;border-radius:4px;padding:4px 8px}.ms-more-btn{background:#d1d5db;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-hidden-tags-dropdown{position:absolute;top:100%;left:0;right:0;border-radius:8px;padding:4px;margin-top:4px;z-index:1000;display:flex;flex-wrap:wrap;gap:4px;height:60px;max-height:120px;overflow-y:auto;border:1px solid #E0E0E0;background:#fff;box-shadow:0 2px 12px #00000014}.ms-hidden-tags-dropdown .ms-tag{width:fit-content;height:fit-content}.ms-dropdown-form-control{padding:.2rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;opacity:1;border-width:1px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::placeholder{color:#6a6b6d;opacity:1}::-webkit-input-placeholder{color:#6a6b6d}::-moz-placeholder{color:#6a6b6d;opacity:1}:-ms-input-placeholder{color:#6a6b6d}.ms-input-placeholder{font-size:14px!important}:-moz-placeholder{color:#6a6b6d;opacity:1}.ms-hover{border:1px solid #0084FF;box-shadow:0 0 0 1px #b7dcff}.ms-input-wrapper{position:relative;display:flex;align-items:center;height:36px;padding:0 8px;border-radius:8px;cursor:pointer;background:#fff;border:1px solid #E0E0E0;font-size:14px!important;min-width:200px;transition:border-color .2s,box-shadow .2s}.ms-input-wrapper:hover{border-color:#0084ff}.ms-input-selected{border-color:#0084ff;box-shadow:none}.ms-input-wrapper.ms-input-focus{border-color:#0084ff;box-shadow:0 0 0 1px #b7dcff}.ms-input-value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px!important}.ms-placeholder{color:#9ca3af}input:focus-visible{outline:none}\n"] }]
683
694
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { text: [{
684
695
  type: Input
685
696
  }], isDisabled: [{
@@ -836,7 +847,7 @@ class MsCheckbox {
836
847
  useExisting: forwardRef(() => MsCheckbox),
837
848
  multi: true
838
849
  }
839
- ], 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: [""] });
850
+ ], 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)}: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}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!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-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!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-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!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"] });
840
851
  }
841
852
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsCheckbox, decorators: [{
842
853
  type: Component,
@@ -851,7 +862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
851
862
  useExisting: forwardRef(() => MsCheckbox),
852
863
  multi: true
853
864
  }
854
- ], 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" }]
865
+ ], 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)}: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}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!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-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!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-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!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"] }]
855
866
  }], propDecorators: { label: [{
856
867
  type: Input
857
868
  }], disabled: [{
@@ -1202,7 +1213,7 @@ class MsRadioButton {
1202
1213
  useExisting: forwardRef(() => MsRadioButton),
1203
1214
  multi: true
1204
1215
  }
1205
- ], 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\";: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:12px;height:12px}::-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}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!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-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!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-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!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}.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}.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;border-bottom:1px solid #ddd;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;border-top:1px solid #ddd;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"] });
1216
+ ], 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)}: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}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!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-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!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-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!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"] });
1206
1217
  }
1207
1218
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsRadioButton, decorators: [{
1208
1219
  type: Component,
@@ -1217,7 +1228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
1217
1228
  useExisting: forwardRef(() => MsRadioButton),
1218
1229
  multi: true
1219
1230
  }
1220
- ], 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\";: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:12px;height:12px}::-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}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!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-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!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-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!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}.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}.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;border-bottom:1px solid #ddd;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;border-top:1px solid #ddd;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"] }]
1231
+ ], 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)}: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}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!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-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!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-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!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"] }]
1221
1232
  }], propDecorators: { label: [{
1222
1233
  type: Input
1223
1234
  }], name: [{
@@ -2985,11 +2996,11 @@ class MsPagination {
2985
2996
  });
2986
2997
  }
2987
2998
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
2988
- 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{color:#605e5c;font-size:14px!important}.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"] }] });
2999
+ 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"] }] });
2989
3000
  }
2990
3001
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsPagination, decorators: [{
2991
3002
  type: Component,
2992
- 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{color:#605e5c;font-size:14px!important}.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"] }]
3003
+ 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"] }]
2993
3004
  }], propDecorators: { totalItems: [{
2994
3005
  type: Input
2995
3006
  }], pageSize: [{
@@ -3242,11 +3253,11 @@ class MsSidebar {
3242
3253
  console.log(event);
3243
3254
  }
3244
3255
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsSidebar, deps: [{ token: i1.DomSanitizer }, { token: i2$1.Router }, { token: TopbarService }], target: i0.ɵɵFactoryTarget.Component });
3245
- 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-bottom:4px;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:600;border:1px solid #E0E0E0;background:#fff;box-shadow:0 1px 2px #00000014}.active-section .title{color:#000}.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}.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" }] });
3256
+ 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" }] });
3246
3257
  }
3247
3258
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsSidebar, decorators: [{
3248
3259
  type: Component,
3249
- 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-bottom:4px;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:600;border:1px solid #E0E0E0;background:#fff;box-shadow:0 1px 2px #00000014}.active-section .title{color:#000}.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}.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"] }]
3260
+ 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"] }]
3250
3261
  }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i2$1.Router }, { type: TopbarService }], propDecorators: { id: [{
3251
3262
  type: Input
3252
3263
  }], search: [{
@@ -3474,11 +3485,11 @@ class MsFileUploader {
3474
3485
  return this.accept.split(',').map(ext => ext.trim().toUpperCase()).join(', ');
3475
3486
  }
3476
3487
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsFileUploader, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
3477
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsFileUploader, isStandalone: true, selector: "ms-file-uploader", inputs: { label: "label", required: "required", readonly: "readonly", disabled: "disabled", accept: "accept", multiple: "multiple", maxFileSize: "maxFileSize", variant: "variant", skeleton: "skeleton" }, outputs: { uploadedFilesChange: "uploadedFilesChange" }, viewQueries: [{ propertyName: "fileInputButton", first: true, predicate: ["fileInputButton"], descendants: true }, { propertyName: "fileInputDragDrop", first: true, predicate: ["fileInputDragDrop"], descendants: true }], ngImport: i0, template: "@if (skeleton) {\n <div class=\"ms-file-uploader-skeleton\" [class]=\"variant\"></div>\n} @else {\n<div class=\"file-uploader-wrapper\">\n <!-- <div *ngIf=\"label\" class=\"file-uploader-label\">\n <label>{{ label }} <span *ngIf=\"required\" class=\"required\">*</span></label>\n </div> -->\n\n <!-- ===================== BUTTON VARIANT ===================== -->\n <ng-container *ngIf=\"variant === 'button'\">\n <!-- Instructions -->\n <div class=\"file-uploader-instructions button-variant\">\n <p class=\"ms-mb-2\">{{ label }}</p>\n <p class=\"instruction-text\">\n <span>Max file size:</span> {{ maxFileSize }} | \n <span>Accepted formats:</span> {{ getAcceptFormats() }}\n </p>\n </div>\n\n <!-- Button Upload Area -->\n <div class=\"button-upload-area\">\n <button \n type=\"button\"\n class=\"upload-button\"\n (click)=\"triggerFileInput()\"\n [disabled]=\"disabled\">\n <span [inlineSVG]=\"'https://ds-doc.sentrixbar.com/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]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/file-plus.svg'\"></span>\n <p class=\"upload-text\">Drag and drop your files here</p>\n <p class=\"upload-subtext\">or <span class=\"click-text\">click to browse</span></p>\n </div>\n\n <!-- Hidden File Input -->\n <input \n #fileInputDragDrop\n type=\"file\" \n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (change)=\"onFileInputChange($event)\"\n style=\"display: none;\">\n </div>\n </ng-container>\n\n <!-- Error Message -->\n <div *ngIf=\"showError\" class=\"error-message\">\n <p>This field is required. Please select at least one file.</p>\n </div>\n\n <!-- Uploaded Files List (Shared for both variants) -->\n <div *ngIf=\"uploadedFiles.length > 0\" class=\"uploaded-files\">\n <div class=\"files-list\">\n <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"file-item\">\n <div class=\"file-info\">\n <span [inlineSVG]=\"'https://ds-doc.sentrixbar.com/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]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/x.svg'\"></span>\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n}", styles: [".file-uploader-wrapper{display:flex;flex-direction:column;gap:10px;width:100%}.file-uploader-wrapper .file-uploader-label{display:flex;align-items:center;gap:4px;margin-bottom:8px}.file-uploader-wrapper .file-uploader-label label{font-size:14px;font-weight:600;color:#1f2937;margin:0}.file-uploader-wrapper .file-uploader-label .required{color:#ef4444;font-weight:700}.file-uploader-wrapper .file-uploader-instructions{padding:8px 0;border-radius:4px}.file-uploader-wrapper .file-uploader-instructions .instruction-text{font-size:13px!important;color:#6a6b6d;margin:0;line-height:1.5;font-weight:400}.file-uploader-wrapper .file-uploader-instructions .instruction-text span{font-size:13px!important}.file-uploader-wrapper .file-uploader-instructions .instruction-text strong{color:#374151;font-weight:600}.file-uploader-wrapper .file-uploader-instructions.button-variant{padding:12px 0!important}.file-uploader-wrapper .button-upload-area{display:flex;flex-direction:column;align-items:flex-start;gap:10px;border-radius:8px}.file-uploader-wrapper .button-upload-area .upload-button{display:flex;align-items:center;gap:8px;padding:10px 20px;background-color:#0084ff;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.file-uploader-wrapper .button-upload-area .upload-button svg{width:20px;height:20px}.file-uploader-wrapper .button-upload-area .upload-button:active:not(:disabled){transform:scale(.98)}.file-uploader-wrapper .button-upload-area .upload-button:disabled{background-color:#d1d5db;cursor:not-allowed;opacity:.6}.file-uploader-wrapper .button-upload-area .upload-button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.file-uploader-wrapper .button-upload-area .button-hint{font-size:13px;color:#6b7280;margin:0}.file-uploader-wrapper .file-uploader-dropzone{position:relative;padding:20px;border:3px dotted #CCCCCC;border-radius:8px;background-color:#fff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;min-height:170px}.file-uploader-wrapper .file-uploader-dropzone:hover:not(.disabled){border-color:#0084ff}.file-uploader-wrapper .file-uploader-dropzone.dragover:not(.disabled){border-color:#3b82f6;background-color:#eff6ff;transform:scale(1.02)}.file-uploader-wrapper .file-uploader-dropzone.disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled){border-color:#ef4444;background-color:#fef2f2}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled):hover{border-color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled) .dropzone-content .upload-icon{color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled) .dropzone-content .upload-text{color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled){border-color:#0084ff;outline-offset:2px}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error{border-color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error .dropzone-content .upload-icon{color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error .dropzone-content .upload-text{color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content{text-align:center;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:10px}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-icon{width:32px;height:32px;color:#6b7280;transition:color .3s ease}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-text{font-size:14px!important;font-weight:400!important;color:#6a6b6d;margin:0}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-subtext{font-size:14px;color:#6b7280;margin:0}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-subtext .click-text{color:#3b82f6;font-weight:600;cursor:pointer}.file-uploader-wrapper .file-uploader-dropzone:hover:not(.disabled) .upload-icon{color:#3b82f6}.file-uploader-wrapper .uploaded-files .uploaded-title{font-size:14px;font-weight:600;color:#1f2937;margin:0 0 12px}.file-uploader-wrapper .uploaded-files .files-list{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}.file-uploader-wrapper .uploaded-files .file-item{display:flex;align-items:center;justify-content:space-between;padding:4px 12px;border:1px solid #B7DCFF;border-radius:6px;background:#0084ff1a;transition:all .2s ease}.file-uploader-wrapper .uploaded-files .file-item .file-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-icon{width:24px;height:24px;color:#6b7280;flex-shrink:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details{display:flex;flex-direction:column;gap:4px;min-width:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details .file-name{font-size:14px!important;font-weight:400!important;color:#1b1f22;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details .file-size{font-size:14px!important;color:#9ca3af;margin:0}.file-uploader-wrapper .uploaded-files .file-item .file-actions{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0}.file-uploader-wrapper .uploaded-files .file-item .file-actions .success-tick{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#10b981;animation:scaleIn .3s ease-out}.file-uploader-wrapper .uploaded-files .file-item .file-actions .success-tick svg{width:20px;height:20px;stroke-width:3}.file-uploader-wrapper .uploaded-files .file-item .remove-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background-color:transparent;cursor:pointer;border-radius:4px;transition:all .2s ease;flex-shrink:0;border:none;box-shadow:none}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:focus-visible{border:none;box-shadow:none;outline:none}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:hover:not(:disabled){box-shadow:0 0 0 1px #b7dcff;border:1px solid #0084FF}.file-uploader-wrapper .uploaded-files .file-item .remove-btn span{width:16px;height:16px}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:disabled{cursor:not-allowed;opacity:.5}.file-uploader-wrapper .error-message{margin-top:8px;padding:8px 12px;background-color:#fef2f2;border-left:3px solid #ef4444;border-radius:4px}.file-uploader-wrapper .error-message p{font-size:13px;color:#dc2626;margin:0;font-weight:500}.ms-file-uploader-skeleton.button{width:150px;height:40px}.ms-file-uploader-skeleton.dragdrop{width:500px;height:215px}.ms-file-uploader-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes scaleIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i3.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "component", type: MsSpinner, selector: "ms-spinner", inputs: ["color", "size", "text"], outputs: ["htmlChange"] }] });
3488
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsFileUploader, isStandalone: true, selector: "ms-file-uploader", inputs: { label: "label", required: "required", readonly: "readonly", disabled: "disabled", accept: "accept", multiple: "multiple", maxFileSize: "maxFileSize", variant: "variant", skeleton: "skeleton" }, outputs: { uploadedFilesChange: "uploadedFilesChange" }, viewQueries: [{ propertyName: "fileInputButton", first: true, predicate: ["fileInputButton"], descendants: true }, { propertyName: "fileInputDragDrop", first: true, predicate: ["fileInputDragDrop"], descendants: true }], ngImport: i0, template: "@if (skeleton) {\n <div class=\"ms-file-uploader-skeleton\" [class]=\"variant\"></div>\n} @else {\n<div class=\"file-uploader-wrapper\">\n <!-- <div *ngIf=\"label\" class=\"file-uploader-label\">\n <label>{{ label }} <span *ngIf=\"required\" class=\"required\">*</span></label>\n </div> -->\n\n <!-- ===================== BUTTON VARIANT ===================== -->\n <ng-container *ngIf=\"variant === 'button'\">\n <!-- Instructions -->\n <div class=\"file-uploader-instructions button-variant\">\n <p class=\"ms-mb-2\">{{ label }}</p>\n <p class=\"instruction-text\">\n <span>Max file size:</span> {{ maxFileSize }} | \n <span>Accepted formats:</span> {{ getAcceptFormats() }}\n </p>\n </div>\n\n <!-- Button Upload Area -->\n <div class=\"button-upload-area\">\n <button \n type=\"button\"\n class=\"upload-button\"\n (click)=\"triggerFileInput()\"\n [disabled]=\"disabled\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/upload.svg'\"></span>\n <span>Upload file</span>\n </button>\n \n <!-- <p class=\"button-hint\">or drag and drop</p> -->\n </div>\n\n <!-- Hidden File Input -->\n <input \n #fileInputButton\n type=\"file\" \n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (change)=\"onFileInputChange($event)\"\n style=\"display: none;\">\n </ng-container>\n\n <!-- ===================== DRAG & DROP VARIANT ===================== -->\n <ng-container *ngIf=\"variant === 'dragdrop'\">\n <!-- Instructions outside the border -->\n <div class=\"file-uploader-instructions dragdrop-variant\">\n <p class=\"instruction-text\">\n <span>Max file size:</span> {{ maxFileSize }} | \n <span>Accepted formats:</span> {{ getAcceptFormats() }}\n </p>\n </div>\n\n <!-- Drag and Drop Area with Dotted Border -->\n <div \n class=\"file-uploader-dropzone\"\n [class.dragover]=\"isDragOver\"\n [class.disabled]=\"disabled\"\n [class.error]=\"showError || invalidFileError\"\n [class.focused]=\"isFocused\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDropFiles($event)\"\n (click)=\"triggerFileInput()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n tabindex=\"0\">\n \n <!-- Upload Icon and Text -->\n <div class=\"dropzone-content\">\n <span class=\"upload-icon\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/file-plus.svg'\"></span>\n <p class=\"upload-text\">Drag and drop your files here</p>\n <p class=\"upload-subtext\">or <span class=\"click-text\">click to browse</span></p>\n </div>\n\n <!-- Hidden File Input -->\n <input \n #fileInputDragDrop\n type=\"file\" \n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (change)=\"onFileInputChange($event)\"\n style=\"display: none;\">\n </div>\n </ng-container>\n\n <!-- Error Message -->\n <div *ngIf=\"showError\" class=\"error-message\">\n <p>This field is required. Please select at least one file.</p>\n </div>\n\n <!-- Uploaded Files List (Shared for both variants) -->\n <div *ngIf=\"uploadedFiles.length > 0\" class=\"uploaded-files\">\n <div class=\"files-list\">\n <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"file-item\">\n <div class=\"file-info\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/File-pdf.svg'\"></span>\n <div class=\"file-details\">\n <p class=\"file-name\" [title]=\"file.name\">{{ file.name }}</p>\n <p class=\"file-size\">{{ file.size }}</p>\n </div>\n </div>\n\n <div class=\"file-actions\">\n <!-- Loader State -->\n <div *ngIf=\"file.isLoading\" class=\"loader\">\n <ms-spinner [color]=\"'primary'\" [size]=\"'sm'\"></ms-spinner>\n </div>\n\n <!-- Success Tick State -->\n <div *ngIf=\"file.isSuccess && !file.isLoading\" class=\"success-tick\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </div>\n\n <!-- Remove Button State -->\n <button \n *ngIf=\"!file.isLoading && !file.isSuccess\"\n type=\"button\"\n class=\"remove-btn\"\n (click)=\"removeFile(i)\"\n [disabled]=\"disabled\">\n <span class=\"d-flex align-items-center\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/x.svg'\"></span>\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n}", styles: [".file-uploader-wrapper{display:flex;flex-direction:column;gap:10px;width:100%}.file-uploader-wrapper .file-uploader-label{display:flex;align-items:center;gap:4px;margin-bottom:8px}.file-uploader-wrapper .file-uploader-label label{font-size:14px;font-weight:600;color:#1f2937;margin:0}.file-uploader-wrapper .file-uploader-label .required{color:#ef4444;font-weight:700}.file-uploader-wrapper .file-uploader-instructions{padding:8px 0;border-radius:4px}.file-uploader-wrapper .file-uploader-instructions .instruction-text{font-size:13px!important;color:#6a6b6d;margin:0;line-height:1.5;font-weight:400}.file-uploader-wrapper .file-uploader-instructions .instruction-text span{font-size:13px!important}.file-uploader-wrapper .file-uploader-instructions .instruction-text strong{color:#374151;font-weight:600}.file-uploader-wrapper .file-uploader-instructions.button-variant{padding:12px 0!important}.file-uploader-wrapper .button-upload-area{display:flex;flex-direction:column;align-items:flex-start;gap:10px;border-radius:8px}.file-uploader-wrapper .button-upload-area .upload-button{display:flex;align-items:center;gap:8px;padding:10px 20px;background-color:#0084ff;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.file-uploader-wrapper .button-upload-area .upload-button svg{width:20px;height:20px}.file-uploader-wrapper .button-upload-area .upload-button:active:not(:disabled){transform:scale(.98)}.file-uploader-wrapper .button-upload-area .upload-button:disabled{background-color:#d1d5db;cursor:not-allowed;opacity:.6}.file-uploader-wrapper .button-upload-area .upload-button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.file-uploader-wrapper .button-upload-area .button-hint{font-size:13px;color:#6b7280;margin:0}.file-uploader-wrapper .file-uploader-dropzone{position:relative;padding:20px;border:3px dotted #CCCCCC;border-radius:8px;background-color:#fff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;min-height:170px}.file-uploader-wrapper .file-uploader-dropzone:hover:not(.disabled){border-color:#0084ff}.file-uploader-wrapper .file-uploader-dropzone.dragover:not(.disabled){border-color:#3b82f6;background-color:#eff6ff;transform:scale(1.02)}.file-uploader-wrapper .file-uploader-dropzone.disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled){border-color:#ef4444;background-color:#fef2f2}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled):hover{border-color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled) .dropzone-content .upload-icon{color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled) .dropzone-content .upload-text{color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled){border-color:#0084ff;outline-offset:2px}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error{border-color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error .dropzone-content .upload-icon{color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error .dropzone-content .upload-text{color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content{text-align:center;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:10px}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-icon{width:32px;height:32px;color:#6b7280;transition:color .3s ease}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-text{font-size:14px!important;font-weight:400!important;color:#6a6b6d;margin:0}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-subtext{font-size:14px;color:#6b7280;margin:0}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-subtext .click-text{color:#3b82f6;font-weight:600;cursor:pointer}.file-uploader-wrapper .file-uploader-dropzone:hover:not(.disabled) .upload-icon{color:#3b82f6}.file-uploader-wrapper .uploaded-files .uploaded-title{font-size:14px;font-weight:600;color:#1f2937;margin:0 0 12px}.file-uploader-wrapper .uploaded-files .files-list{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}.file-uploader-wrapper .uploaded-files .file-item{display:flex;align-items:center;justify-content:space-between;padding:4px 12px;border:1px solid #B7DCFF;border-radius:6px;background:#0084ff1a;transition:all .2s ease}.file-uploader-wrapper .uploaded-files .file-item .file-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-icon{width:24px;height:24px;color:#6b7280;flex-shrink:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details{display:flex;flex-direction:column;gap:4px;min-width:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details .file-name{font-size:14px!important;font-weight:400!important;color:#1b1f22;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details .file-size{font-size:14px!important;color:#9ca3af;margin:0}.file-uploader-wrapper .uploaded-files .file-item .file-actions{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0}.file-uploader-wrapper .uploaded-files .file-item .file-actions .success-tick{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#10b981;animation:scaleIn .3s ease-out}.file-uploader-wrapper .uploaded-files .file-item .file-actions .success-tick svg{width:20px;height:20px;stroke-width:3}.file-uploader-wrapper .uploaded-files .file-item .remove-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background-color:transparent;cursor:pointer;border-radius:4px;transition:all .2s ease;flex-shrink:0;border:none;box-shadow:none}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:focus-visible{border:none;box-shadow:none;outline:none}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:hover:not(:disabled){box-shadow:0 0 0 1px #b7dcff;border:1px solid #0084FF}.file-uploader-wrapper .uploaded-files .file-item .remove-btn span{width:16px;height:16px}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:disabled{cursor:not-allowed;opacity:.5}.file-uploader-wrapper .error-message{margin-top:8px;padding:8px 12px;background-color:#fef2f2;border-left:3px solid #ef4444;border-radius:4px}.file-uploader-wrapper .error-message p{font-size:13px;color:#dc2626;margin:0;font-weight:500}.ms-file-uploader-skeleton.button{width:150px;height:40px}.ms-file-uploader-skeleton.dragdrop{width:500px;height:215px}.ms-file-uploader-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes scaleIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i3.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "component", type: MsSpinner, selector: "ms-spinner", inputs: ["color", "size", "text"], outputs: ["htmlChange"] }] });
3478
3489
  }
3479
3490
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsFileUploader, decorators: [{
3480
3491
  type: Component,
3481
- 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-2\">{{ label }}</p>\n <p class=\"instruction-text\">\n <span>Max file size:</span> {{ maxFileSize }} | \n <span>Accepted formats:</span> {{ getAcceptFormats() }}\n </p>\n </div>\n\n <!-- Button Upload Area -->\n <div class=\"button-upload-area\">\n <button \n type=\"button\"\n class=\"upload-button\"\n (click)=\"triggerFileInput()\"\n [disabled]=\"disabled\">\n <span [inlineSVG]=\"'https://ds-doc.sentrixbar.com/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]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/file-plus.svg'\"></span>\n <p class=\"upload-text\">Drag and drop your files here</p>\n <p class=\"upload-subtext\">or <span class=\"click-text\">click to browse</span></p>\n </div>\n\n <!-- Hidden File Input -->\n <input \n #fileInputDragDrop\n type=\"file\" \n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (change)=\"onFileInputChange($event)\"\n style=\"display: none;\">\n </div>\n </ng-container>\n\n <!-- Error Message -->\n <div *ngIf=\"showError\" class=\"error-message\">\n <p>This field is required. Please select at least one file.</p>\n </div>\n\n <!-- Uploaded Files List (Shared for both variants) -->\n <div *ngIf=\"uploadedFiles.length > 0\" class=\"uploaded-files\">\n <div class=\"files-list\">\n <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"file-item\">\n <div class=\"file-info\">\n <span [inlineSVG]=\"'https://ds-doc.sentrixbar.com/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]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/x.svg'\"></span>\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n}", styles: [".file-uploader-wrapper{display:flex;flex-direction:column;gap:10px;width:100%}.file-uploader-wrapper .file-uploader-label{display:flex;align-items:center;gap:4px;margin-bottom:8px}.file-uploader-wrapper .file-uploader-label label{font-size:14px;font-weight:600;color:#1f2937;margin:0}.file-uploader-wrapper .file-uploader-label .required{color:#ef4444;font-weight:700}.file-uploader-wrapper .file-uploader-instructions{padding:8px 0;border-radius:4px}.file-uploader-wrapper .file-uploader-instructions .instruction-text{font-size:13px!important;color:#6a6b6d;margin:0;line-height:1.5;font-weight:400}.file-uploader-wrapper .file-uploader-instructions .instruction-text span{font-size:13px!important}.file-uploader-wrapper .file-uploader-instructions .instruction-text strong{color:#374151;font-weight:600}.file-uploader-wrapper .file-uploader-instructions.button-variant{padding:12px 0!important}.file-uploader-wrapper .button-upload-area{display:flex;flex-direction:column;align-items:flex-start;gap:10px;border-radius:8px}.file-uploader-wrapper .button-upload-area .upload-button{display:flex;align-items:center;gap:8px;padding:10px 20px;background-color:#0084ff;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.file-uploader-wrapper .button-upload-area .upload-button svg{width:20px;height:20px}.file-uploader-wrapper .button-upload-area .upload-button:active:not(:disabled){transform:scale(.98)}.file-uploader-wrapper .button-upload-area .upload-button:disabled{background-color:#d1d5db;cursor:not-allowed;opacity:.6}.file-uploader-wrapper .button-upload-area .upload-button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.file-uploader-wrapper .button-upload-area .button-hint{font-size:13px;color:#6b7280;margin:0}.file-uploader-wrapper .file-uploader-dropzone{position:relative;padding:20px;border:3px dotted #CCCCCC;border-radius:8px;background-color:#fff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;min-height:170px}.file-uploader-wrapper .file-uploader-dropzone:hover:not(.disabled){border-color:#0084ff}.file-uploader-wrapper .file-uploader-dropzone.dragover:not(.disabled){border-color:#3b82f6;background-color:#eff6ff;transform:scale(1.02)}.file-uploader-wrapper .file-uploader-dropzone.disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled){border-color:#ef4444;background-color:#fef2f2}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled):hover{border-color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled) .dropzone-content .upload-icon{color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled) .dropzone-content .upload-text{color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled){border-color:#0084ff;outline-offset:2px}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error{border-color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error .dropzone-content .upload-icon{color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error .dropzone-content .upload-text{color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content{text-align:center;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:10px}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-icon{width:32px;height:32px;color:#6b7280;transition:color .3s ease}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-text{font-size:14px!important;font-weight:400!important;color:#6a6b6d;margin:0}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-subtext{font-size:14px;color:#6b7280;margin:0}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-subtext .click-text{color:#3b82f6;font-weight:600;cursor:pointer}.file-uploader-wrapper .file-uploader-dropzone:hover:not(.disabled) .upload-icon{color:#3b82f6}.file-uploader-wrapper .uploaded-files .uploaded-title{font-size:14px;font-weight:600;color:#1f2937;margin:0 0 12px}.file-uploader-wrapper .uploaded-files .files-list{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}.file-uploader-wrapper .uploaded-files .file-item{display:flex;align-items:center;justify-content:space-between;padding:4px 12px;border:1px solid #B7DCFF;border-radius:6px;background:#0084ff1a;transition:all .2s ease}.file-uploader-wrapper .uploaded-files .file-item .file-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-icon{width:24px;height:24px;color:#6b7280;flex-shrink:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details{display:flex;flex-direction:column;gap:4px;min-width:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details .file-name{font-size:14px!important;font-weight:400!important;color:#1b1f22;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details .file-size{font-size:14px!important;color:#9ca3af;margin:0}.file-uploader-wrapper .uploaded-files .file-item .file-actions{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0}.file-uploader-wrapper .uploaded-files .file-item .file-actions .success-tick{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#10b981;animation:scaleIn .3s ease-out}.file-uploader-wrapper .uploaded-files .file-item .file-actions .success-tick svg{width:20px;height:20px;stroke-width:3}.file-uploader-wrapper .uploaded-files .file-item .remove-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background-color:transparent;cursor:pointer;border-radius:4px;transition:all .2s ease;flex-shrink:0;border:none;box-shadow:none}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:focus-visible{border:none;box-shadow:none;outline:none}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:hover:not(:disabled){box-shadow:0 0 0 1px #b7dcff;border:1px solid #0084FF}.file-uploader-wrapper .uploaded-files .file-item .remove-btn span{width:16px;height:16px}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:disabled{cursor:not-allowed;opacity:.5}.file-uploader-wrapper .error-message{margin-top:8px;padding:8px 12px;background-color:#fef2f2;border-left:3px solid #ef4444;border-radius:4px}.file-uploader-wrapper .error-message p{font-size:13px;color:#dc2626;margin:0;font-weight:500}.ms-file-uploader-skeleton.button{width:150px;height:40px}.ms-file-uploader-skeleton.dragdrop{width:500px;height:215px}.ms-file-uploader-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes scaleIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
3492
+ 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-2\">{{ label }}</p>\n <p class=\"instruction-text\">\n <span>Max file size:</span> {{ maxFileSize }} | \n <span>Accepted formats:</span> {{ getAcceptFormats() }}\n </p>\n </div>\n\n <!-- Button Upload Area -->\n <div class=\"button-upload-area\">\n <button \n type=\"button\"\n class=\"upload-button\"\n (click)=\"triggerFileInput()\"\n [disabled]=\"disabled\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/upload.svg'\"></span>\n <span>Upload file</span>\n </button>\n \n <!-- <p class=\"button-hint\">or drag and drop</p> -->\n </div>\n\n <!-- Hidden File Input -->\n <input \n #fileInputButton\n type=\"file\" \n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (change)=\"onFileInputChange($event)\"\n style=\"display: none;\">\n </ng-container>\n\n <!-- ===================== DRAG & DROP VARIANT ===================== -->\n <ng-container *ngIf=\"variant === 'dragdrop'\">\n <!-- Instructions outside the border -->\n <div class=\"file-uploader-instructions dragdrop-variant\">\n <p class=\"instruction-text\">\n <span>Max file size:</span> {{ maxFileSize }} | \n <span>Accepted formats:</span> {{ getAcceptFormats() }}\n </p>\n </div>\n\n <!-- Drag and Drop Area with Dotted Border -->\n <div \n class=\"file-uploader-dropzone\"\n [class.dragover]=\"isDragOver\"\n [class.disabled]=\"disabled\"\n [class.error]=\"showError || invalidFileError\"\n [class.focused]=\"isFocused\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDropFiles($event)\"\n (click)=\"triggerFileInput()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n tabindex=\"0\">\n \n <!-- Upload Icon and Text -->\n <div class=\"dropzone-content\">\n <span class=\"upload-icon\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/file-plus.svg'\"></span>\n <p class=\"upload-text\">Drag and drop your files here</p>\n <p class=\"upload-subtext\">or <span class=\"click-text\">click to browse</span></p>\n </div>\n\n <!-- Hidden File Input -->\n <input \n #fileInputDragDrop\n type=\"file\" \n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (change)=\"onFileInputChange($event)\"\n style=\"display: none;\">\n </div>\n </ng-container>\n\n <!-- Error Message -->\n <div *ngIf=\"showError\" class=\"error-message\">\n <p>This field is required. Please select at least one file.</p>\n </div>\n\n <!-- Uploaded Files List (Shared for both variants) -->\n <div *ngIf=\"uploadedFiles.length > 0\" class=\"uploaded-files\">\n <div class=\"files-list\">\n <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"file-item\">\n <div class=\"file-info\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/File-pdf.svg'\"></span>\n <div class=\"file-details\">\n <p class=\"file-name\" [title]=\"file.name\">{{ file.name }}</p>\n <p class=\"file-size\">{{ file.size }}</p>\n </div>\n </div>\n\n <div class=\"file-actions\">\n <!-- Loader State -->\n <div *ngIf=\"file.isLoading\" class=\"loader\">\n <ms-spinner [color]=\"'primary'\" [size]=\"'sm'\"></ms-spinner>\n </div>\n\n <!-- Success Tick State -->\n <div *ngIf=\"file.isSuccess && !file.isLoading\" class=\"success-tick\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </div>\n\n <!-- Remove Button State -->\n <button \n *ngIf=\"!file.isLoading && !file.isSuccess\"\n type=\"button\"\n class=\"remove-btn\"\n (click)=\"removeFile(i)\"\n [disabled]=\"disabled\">\n <span class=\"d-flex align-items-center\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/x.svg'\"></span>\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n}", styles: [".file-uploader-wrapper{display:flex;flex-direction:column;gap:10px;width:100%}.file-uploader-wrapper .file-uploader-label{display:flex;align-items:center;gap:4px;margin-bottom:8px}.file-uploader-wrapper .file-uploader-label label{font-size:14px;font-weight:600;color:#1f2937;margin:0}.file-uploader-wrapper .file-uploader-label .required{color:#ef4444;font-weight:700}.file-uploader-wrapper .file-uploader-instructions{padding:8px 0;border-radius:4px}.file-uploader-wrapper .file-uploader-instructions .instruction-text{font-size:13px!important;color:#6a6b6d;margin:0;line-height:1.5;font-weight:400}.file-uploader-wrapper .file-uploader-instructions .instruction-text span{font-size:13px!important}.file-uploader-wrapper .file-uploader-instructions .instruction-text strong{color:#374151;font-weight:600}.file-uploader-wrapper .file-uploader-instructions.button-variant{padding:12px 0!important}.file-uploader-wrapper .button-upload-area{display:flex;flex-direction:column;align-items:flex-start;gap:10px;border-radius:8px}.file-uploader-wrapper .button-upload-area .upload-button{display:flex;align-items:center;gap:8px;padding:10px 20px;background-color:#0084ff;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.file-uploader-wrapper .button-upload-area .upload-button svg{width:20px;height:20px}.file-uploader-wrapper .button-upload-area .upload-button:active:not(:disabled){transform:scale(.98)}.file-uploader-wrapper .button-upload-area .upload-button:disabled{background-color:#d1d5db;cursor:not-allowed;opacity:.6}.file-uploader-wrapper .button-upload-area .upload-button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.file-uploader-wrapper .button-upload-area .button-hint{font-size:13px;color:#6b7280;margin:0}.file-uploader-wrapper .file-uploader-dropzone{position:relative;padding:20px;border:3px dotted #CCCCCC;border-radius:8px;background-color:#fff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;min-height:170px}.file-uploader-wrapper .file-uploader-dropzone:hover:not(.disabled){border-color:#0084ff}.file-uploader-wrapper .file-uploader-dropzone.dragover:not(.disabled){border-color:#3b82f6;background-color:#eff6ff;transform:scale(1.02)}.file-uploader-wrapper .file-uploader-dropzone.disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled){border-color:#ef4444;background-color:#fef2f2}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled):hover{border-color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled) .dropzone-content .upload-icon{color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled) .dropzone-content .upload-text{color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled){border-color:#0084ff;outline-offset:2px}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error{border-color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error .dropzone-content .upload-icon{color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error .dropzone-content .upload-text{color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content{text-align:center;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:10px}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-icon{width:32px;height:32px;color:#6b7280;transition:color .3s ease}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-text{font-size:14px!important;font-weight:400!important;color:#6a6b6d;margin:0}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-subtext{font-size:14px;color:#6b7280;margin:0}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-subtext .click-text{color:#3b82f6;font-weight:600;cursor:pointer}.file-uploader-wrapper .file-uploader-dropzone:hover:not(.disabled) .upload-icon{color:#3b82f6}.file-uploader-wrapper .uploaded-files .uploaded-title{font-size:14px;font-weight:600;color:#1f2937;margin:0 0 12px}.file-uploader-wrapper .uploaded-files .files-list{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}.file-uploader-wrapper .uploaded-files .file-item{display:flex;align-items:center;justify-content:space-between;padding:4px 12px;border:1px solid #B7DCFF;border-radius:6px;background:#0084ff1a;transition:all .2s ease}.file-uploader-wrapper .uploaded-files .file-item .file-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-icon{width:24px;height:24px;color:#6b7280;flex-shrink:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details{display:flex;flex-direction:column;gap:4px;min-width:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details .file-name{font-size:14px!important;font-weight:400!important;color:#1b1f22;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details .file-size{font-size:14px!important;color:#9ca3af;margin:0}.file-uploader-wrapper .uploaded-files .file-item .file-actions{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0}.file-uploader-wrapper .uploaded-files .file-item .file-actions .success-tick{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#10b981;animation:scaleIn .3s ease-out}.file-uploader-wrapper .uploaded-files .file-item .file-actions .success-tick svg{width:20px;height:20px;stroke-width:3}.file-uploader-wrapper .uploaded-files .file-item .remove-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background-color:transparent;cursor:pointer;border-radius:4px;transition:all .2s ease;flex-shrink:0;border:none;box-shadow:none}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:focus-visible{border:none;box-shadow:none;outline:none}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:hover:not(:disabled){box-shadow:0 0 0 1px #b7dcff;border:1px solid #0084FF}.file-uploader-wrapper .uploaded-files .file-item .remove-btn span{width:16px;height:16px}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:disabled{cursor:not-allowed;opacity:.5}.file-uploader-wrapper .error-message{margin-top:8px;padding:8px 12px;background-color:#fef2f2;border-left:3px solid #ef4444;border-radius:4px}.file-uploader-wrapper .error-message p{font-size:13px;color:#dc2626;margin:0;font-weight:500}.ms-file-uploader-skeleton.button{width:150px;height:40px}.ms-file-uploader-skeleton.dragdrop{width:500px;height:215px}.ms-file-uploader-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes scaleIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
3482
3493
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
3483
3494
  type: Input
3484
3495
  }], required: [{
@@ -3977,11 +3988,11 @@ class Calendar {
3977
3988
  get leftDays() { return this.getDays(this.leftMonth, this.leftYear); }
3978
3989
  get rightDays() { return this.getDays(this.rightMonth, this.rightYear); }
3979
3990
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Calendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
3980
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: Calendar, isStandalone: true, selector: "app-calendar", inputs: { mode: "mode", selectedDate: "selectedDate", fromDate: "fromDate", toDate: "toDate", leftMonth: "leftMonth", leftYear: "leftYear", rightMonth: "rightMonth", rightYear: "rightYear" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<div class=\"calendar-wrapper\">\n\n <!-- SINGLE MODE -->\n <ng-container *ngIf=\"mode==='single'\">\n <div class=\"calendar single-calendar\">\n <div class=\"header\">\n <strong>{{ monthNames[leftMonth] }} {{ leftYear }}</strong>\n <div class=\"icons\">\n <!-- <span class=\"icon\" (click)=\"prevMonth()\">&lt;</span> -->\n <!-- <span class=\"icon\" (click)=\"nextMonth()\">&gt;</span> -->\n <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth()\" [name]=\"'chevron-right'\"></ms-icon>\n <ms-icon class=\"icon\" (click)=\"nextMonth()\" [name]=\"'chevron-right'\"></ms-icon>\n </div>\n </div>\n <div class=\"grid\">\n <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\"><strong>{{ d }}</strong>\n </div>\n <div class=\"day\" *ngFor=\"let d of getDays(leftMonth, leftYear)\"\n [class.selected]=\"isSameDate(d.date, selectedDate)\" [class.today]=\"isToday(d.date)\"\n [class.disabled]=\"d.type!=='current'\" (mousedown)=\"d.type==='current' && select(d.date)\">\n {{ d.date.getDate() }}\n <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n [style.background-color]=\"isSameDate(d.date, selectedDate) ? '#fff' : '#0084FF'\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n\n <ng-container *ngIf=\"mode === 'range'\">\n <div class=\"range-calendar\">\n\n <div class=\"calendars\">\n\n <!-- LEFT CALENDAR -->\n <div class=\"calendar\">\n <div class=\"header\">\n <strong>{{ monthNames[leftMonth] }} {{ leftYear }}</strong>\n <div class=\"icons\">\n <!-- <span class=\"icon\" (click)=\"prevMonth('left')\">&lt;</span>\n <span class=\"icon\" (click)=\"nextMonth('left')\">&gt;</span> -->\n <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth('left')\" [name]=\"'chevron-right'\"></ms-icon>\n <ms-icon class=\"icon\" (click)=\"nextMonth('left')\" [name]=\"'chevron-right'\"></ms-icon>\n </div>\n </div>\n\n <div class=\"grid\">\n <!-- Day names -->\n <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\">\n <strong>{{ d }}</strong>\n </div>\n\n <!-- Days -->\n <div *ngFor=\"let d of leftDays; let i = index\" [ngClass]=\"{\n 'is-in-range': isInRange(d.date),\n 'range-start': isRowRangeStart(i, leftDays),\n 'range-end': isRowRangeEnd(i, leftDays)\n }\" (click)=\"d.type === 'current' && select(d.date)\" class=\"day-outer\">\n\n <div class=\"day\" [ngClass]=\"getDayClasses(d, i, leftDays)\">\n <span>{{ d.date.getDate() }}</span>\n <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n [style.background-color]=\"(isInRange(d.date) && (isSameDate(d.date, fromDate) || isSameDate(d.date, toDate))) ? '#fff' : '#0084FF'\"></span>\n </div>\n\n </div>\n </div>\n </div>\n\n <!-- RIGHT CALENDAR -->\n <div class=\"calendar\">\n <div class=\"header\">\n <strong>{{ monthNames[rightMonth] }} {{ rightYear }}</strong>\n <div class=\"icons\">\n <!-- <span class=\"icon\" (click)=\"prevMonth('right')\">&lt;</span>\n <span class=\"icon\" (click)=\"nextMonth('right')\">&gt;</span> -->\n <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth('right')\" [name]=\"'chevron-right'\"></ms-icon>\n <ms-icon class=\"icon\" (click)=\"nextMonth('right')\" [name]=\"'chevron-right'\"></ms-icon>\n </div>\n </div>\n\n <div class=\"grid\">\n <!-- Day names -->\n <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\">\n <strong>{{ d }}</strong>\n </div>\n\n <!-- Days -->\n <div *ngFor=\"let d of rightDays; let i = index\" [ngClass]=\"{\n 'is-in-range': isInRange(d.date),\n 'range-start': isRowRangeStart(i, rightDays),\n 'range-end': isRowRangeEnd(i, rightDays)\n }\" (click)=\"d.type === 'current' && select(d.date)\" class=\"day-outer\">\n\n <div class=\"day\" [ngClass]=\"getDayClasses(d, i, rightDays)\">\n <span>{{ d.date.getDate() }}</span>\n <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n [style.background-color]=\"(isInRange(d.date) && (isSameDate(d.date, fromDate) || isSameDate(d.date, toDate))) ? '#fff' : '#0084FF'\"></span>\n </div>\n\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- RANGE ACTIONS -->\n <div class=\"range-actions\">\n <button class=\"btn cancel\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"btn apply\" (click)=\"onApply()\">Apply</button>\n </div>\n\n </div>\n </ng-container>\n\n\n</div>", styles: [".calendar-wrapper{display:flex;flex-direction:column;margin-top:4px}.calendars{display:flex;width:616px}.calendar{width:312px;min-height:320px;background:#fff;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.single-calendar{border:1px solid #E0E0E0;box-shadow:0 2px 12px #00000014;border-radius:12px;z-index:9999}.range-calendar{width:616px;height:440px;border:1px solid #E0E0E0;background:#fff;box-shadow:0 2px 12px #00000014;border-radius:12px;z-index:9999}.calendars .calendar{width:100%;background:#fff;border-radius:12px;display:flex;flex-direction:column;box-sizing:border-box}.header{width:100%;height:40px;display:flex;justify-content:space-between;align-items:center}.header strong{font-size:14px;font-weight:600}.icons{display:flex;gap:8px}.icon{width:40px;height:40px;display:flex;justify-content:center;align-items:center;font-size:20px;border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s}.icon:hover{background:#e0f0ff}.grid{display:grid;grid-template-columns:repeat(7,1fr);grid-column-gap:0;grid-row-gap:4px}.day-name{height:40px;display:flex;justify-content:center;align-items:center;font-size:12px;font-weight:500;color:#1b1f22}.day{position:relative;width:100%;height:40px;display:flex;justify-content:center;align-items:center;font-size:14px;font-weight:500;line-height:18px;color:#1b1f22;cursor:pointer;box-sizing:border-box;transition:background .15s,border .15s}.day:hover{background:#e0f0ff;border:1px solid #0084FF;border-radius:8px;flex-direction:column;color:#0084ff}.day.today{color:#0084ff}.dot{position:absolute;bottom:4px;width:3px;height:3px;border-radius:1px;background-color:#0084ff}.day.selected{background:#007bff;color:#fff;border-radius:8px}.day.selected.today{color:#fff}.day.selected.today .dot{background-color:#fff}.is-in-range{background:#0084ff1a}.is-in-range.range-start{border-top-left-radius:8px;border-bottom-left-radius:8px}.is-in-range.range-end{border-top-right-radius:8px;border-bottom-right-radius:8px}.day.range-first{background:#0084ff;color:#fff;border:4px solid #0084FF;border-radius:8px!important;box-sizing:border-box}.day.range-last{background:#0084ff;color:#fff;border:4px solid #0084FF;border-radius:8px;box-sizing:border-box}.day.disabled{color:#aaa;cursor:default;background:none}.range-actions{width:595px;height:32px;display:flex;justify-content:flex-end;gap:8px}.range-actions .btn{height:32px;padding:0 12px;border-radius:8px;border:1px solid #E0E0E0;background:#fff;cursor:pointer;font-size:13px}.range-actions .btn.apply{background-color:#007bff;color:#fff;border:none}.rotate-180{transform:rotate(180deg)}\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: MsDesignSystemModule }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
3991
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: Calendar, isStandalone: true, selector: "app-calendar", inputs: { mode: "mode", selectedDate: "selectedDate", fromDate: "fromDate", toDate: "toDate", leftMonth: "leftMonth", leftYear: "leftYear", rightMonth: "rightMonth", rightYear: "rightYear" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<div class=\"calendar-wrapper\">\n\n <!-- SINGLE MODE -->\n <ng-container *ngIf=\"mode==='single'\">\n <div class=\"calendar single-calendar\">\n <div class=\"header\">\n <strong>{{ monthNames[leftMonth] }} {{ leftYear }}</strong>\n <div class=\"icons\">\n <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth()\" [name]=\"'chevron-right'\" [size]=\"'medium'\"></ms-icon>\n <ms-icon class=\"icon\" (click)=\"nextMonth()\" [name]=\"'chevron-right'\" [size]=\"'medium'\"></ms-icon>\n </div>\n </div>\n <div class=\"grid\">\n <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\"><strong>{{ d }}</strong>\n </div>\n <div class=\"day\" *ngFor=\"let d of getDays(leftMonth, leftYear)\"\n [class.selected]=\"isSameDate(d.date, selectedDate)\" [class.today]=\"isToday(d.date)\"\n [class.disabled]=\"d.type!=='current'\" (mousedown)=\"d.type==='current' && select(d.date)\">\n {{ d.date.getDate() }}\n <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n [style.background-color]=\"isSameDate(d.date, selectedDate) ? '#fff' : '#0084FF'\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n\n <ng-container *ngIf=\"mode === 'range'\">\n <div class=\"range-calendar\">\n\n <div class=\"calendars\">\n\n <!-- LEFT CALENDAR -->\n <div class=\"calendar\">\n <div class=\"header\">\n <strong>{{ monthNames[leftMonth] }} {{ leftYear }}</strong>\n <div class=\"icons\">\n <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth('left')\" [name]=\"'chevron-right'\" [size]=\"'medium'\"></ms-icon>\n <ms-icon class=\"icon\" (click)=\"nextMonth('left')\" [name]=\"'chevron-right'\" [size]=\"'medium'\"></ms-icon>\n </div>\n </div>\n\n <div class=\"grid\">\n <!-- Day names -->\n <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\">\n <strong>{{ d }}</strong>\n </div>\n\n <!-- Days -->\n <div *ngFor=\"let d of leftDays; let i = index\" [ngClass]=\"{\n 'is-in-range': isInRange(d.date),\n 'range-start': isRowRangeStart(i, leftDays),\n 'range-end': isRowRangeEnd(i, leftDays)\n }\" (click)=\"d.type === 'current' && select(d.date)\" class=\"day-outer\">\n\n <div class=\"day\" [ngClass]=\"getDayClasses(d, i, leftDays)\">\n <span>{{ d.date.getDate() }}</span>\n <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n [style.background-color]=\"(isInRange(d.date) && (isSameDate(d.date, fromDate) || isSameDate(d.date, toDate))) ? '#fff' : '#0084FF'\"></span>\n </div>\n\n </div>\n </div>\n </div>\n\n <!-- RIGHT CALENDAR -->\n <div class=\"calendar\">\n <div class=\"header\">\n <strong>{{ monthNames[rightMonth] }} {{ rightYear }}</strong>\n <div class=\"icons\">\n <!-- <span class=\"icon\" (click)=\"prevMonth('right')\">&lt;</span>\n <span class=\"icon\" (click)=\"nextMonth('right')\">&gt;</span> -->\n <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth('right')\" [name]=\"'chevron-right'\" [size]=\"'medium'\"></ms-icon>\n <ms-icon class=\"icon\" (click)=\"nextMonth('right')\" [name]=\"'chevron-right'\" [size]=\"'medium'\"></ms-icon>\n </div>\n </div>\n\n <div class=\"grid\">\n <!-- Day names -->\n <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\">\n <strong>{{ d }}</strong>\n </div>\n\n <!-- Days -->\n <div *ngFor=\"let d of rightDays; let i = index\" [ngClass]=\"{\n 'is-in-range': isInRange(d.date),\n 'range-start': isRowRangeStart(i, rightDays),\n 'range-end': isRowRangeEnd(i, rightDays)\n }\" (click)=\"d.type === 'current' && select(d.date)\" class=\"day-outer\">\n\n <div class=\"day\" [ngClass]=\"getDayClasses(d, i, rightDays)\">\n <span>{{ d.date.getDate() }}</span>\n <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n [style.background-color]=\"(isInRange(d.date) && (isSameDate(d.date, fromDate) || isSameDate(d.date, toDate))) ? '#fff' : '#0084FF'\"></span>\n </div>\n\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- RANGE ACTIONS -->\n <div class=\"range-actions\">\n <button class=\"btn cancel\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"btn apply\" (click)=\"onApply()\">Apply</button>\n </div>\n\n </div>\n </ng-container>\n\n\n</div>", styles: [".calendar-wrapper{display:flex;flex-direction:column;margin-top:4px}.calendars{display:flex;width:616px}.calendar{width:312px;min-height:320px;background:#fff;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:4px;box-sizing:border-box}.single-calendar{border:1px solid #E0E0E0;box-shadow:0 2px 12px #00000014;border-radius:12px;z-index:9999}.range-calendar{width:616px;height:440px;border:1px solid #E0E0E0;background:#fff;box-shadow:0 2px 12px #00000014;border-radius:12px;z-index:9999}.calendars .calendar{width:100%;background:#fff;border-radius:12px;display:flex;flex-direction:column;box-sizing:border-box}.header{height:40px;display:flex;justify-content:space-between;align-items:center;padding:0 0 0 8px}.header strong{font-size:14px;font-weight:600}.icons{display:flex;gap:8px}.icon{width:40px;height:40px;display:flex;justify-content:center;align-items:center;font-size:20px;border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s}.icon:hover{background:#e0f0ff}.grid{display:grid;grid-template-columns:repeat(7,1fr);grid-column-gap:0;grid-row-gap:4px}.day-name{height:40px;display:flex;justify-content:center;align-items:center;font-size:14px!important;font-weight:500!important;color:#1b1f22}.day{position:relative;width:100%;height:40px;display:flex;justify-content:center;align-items:center;font-size:14px;font-weight:500;line-height:18px;color:#1b1f22;cursor:pointer;box-sizing:border-box;transition:background .15s,border .15s}.day:hover{background:#e0f0ff;border:1px solid #0084FF;border-radius:8px;flex-direction:column;color:#0084ff}.day.today{color:#0084ff}.dot{position:absolute;bottom:4px;width:3px;height:3px;border-radius:1px;background-color:#0084ff}.day.selected{background:#007bff;color:#fff;border-radius:8px}.day.selected.today{color:#fff}.day.selected.today .dot{background-color:#fff}.is-in-range{background:#0084ff1a}.is-in-range.range-start{border-top-left-radius:8px;border-bottom-left-radius:8px}.is-in-range.range-end{border-top-right-radius:8px;border-bottom-right-radius:8px}.day.range-first{background:#0084ff;color:#fff;border:4px solid #0084FF;border-radius:8px!important;box-sizing:border-box}.day.range-last{background:#0084ff;color:#fff;border:4px solid #0084FF;border-radius:8px;box-sizing:border-box}.day.disabled{color:#aaa;cursor:default;background:none}.range-actions{width:595px;height:32px;display:flex;justify-content:flex-end;gap:8px}.range-actions .btn{height:32px;padding:0 12px;border-radius:8px;border:1px solid #E0E0E0;background:#fff;cursor:pointer;font-size:13px}.range-actions .btn.apply{background-color:#007bff;color:#fff;border:none}.range-actions .btn.cancel{border:none}.rotate-180{transform:rotate(180deg)}\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: MsDesignSystemModule }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
3981
3992
  }
3982
3993
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Calendar, decorators: [{
3983
3994
  type: Component,
3984
- args: [{ selector: 'app-calendar', imports: [CommonModule, MsDesignSystemModule], template: "<div class=\"calendar-wrapper\">\n\n <!-- SINGLE MODE -->\n <ng-container *ngIf=\"mode==='single'\">\n <div class=\"calendar single-calendar\">\n <div class=\"header\">\n <strong>{{ monthNames[leftMonth] }} {{ leftYear }}</strong>\n <div class=\"icons\">\n <!-- <span class=\"icon\" (click)=\"prevMonth()\">&lt;</span> -->\n <!-- <span class=\"icon\" (click)=\"nextMonth()\">&gt;</span> -->\n <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth()\" [name]=\"'chevron-right'\"></ms-icon>\n <ms-icon class=\"icon\" (click)=\"nextMonth()\" [name]=\"'chevron-right'\"></ms-icon>\n </div>\n </div>\n <div class=\"grid\">\n <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\"><strong>{{ d }}</strong>\n </div>\n <div class=\"day\" *ngFor=\"let d of getDays(leftMonth, leftYear)\"\n [class.selected]=\"isSameDate(d.date, selectedDate)\" [class.today]=\"isToday(d.date)\"\n [class.disabled]=\"d.type!=='current'\" (mousedown)=\"d.type==='current' && select(d.date)\">\n {{ d.date.getDate() }}\n <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n [style.background-color]=\"isSameDate(d.date, selectedDate) ? '#fff' : '#0084FF'\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n\n <ng-container *ngIf=\"mode === 'range'\">\n <div class=\"range-calendar\">\n\n <div class=\"calendars\">\n\n <!-- LEFT CALENDAR -->\n <div class=\"calendar\">\n <div class=\"header\">\n <strong>{{ monthNames[leftMonth] }} {{ leftYear }}</strong>\n <div class=\"icons\">\n <!-- <span class=\"icon\" (click)=\"prevMonth('left')\">&lt;</span>\n <span class=\"icon\" (click)=\"nextMonth('left')\">&gt;</span> -->\n <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth('left')\" [name]=\"'chevron-right'\"></ms-icon>\n <ms-icon class=\"icon\" (click)=\"nextMonth('left')\" [name]=\"'chevron-right'\"></ms-icon>\n </div>\n </div>\n\n <div class=\"grid\">\n <!-- Day names -->\n <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\">\n <strong>{{ d }}</strong>\n </div>\n\n <!-- Days -->\n <div *ngFor=\"let d of leftDays; let i = index\" [ngClass]=\"{\n 'is-in-range': isInRange(d.date),\n 'range-start': isRowRangeStart(i, leftDays),\n 'range-end': isRowRangeEnd(i, leftDays)\n }\" (click)=\"d.type === 'current' && select(d.date)\" class=\"day-outer\">\n\n <div class=\"day\" [ngClass]=\"getDayClasses(d, i, leftDays)\">\n <span>{{ d.date.getDate() }}</span>\n <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n [style.background-color]=\"(isInRange(d.date) && (isSameDate(d.date, fromDate) || isSameDate(d.date, toDate))) ? '#fff' : '#0084FF'\"></span>\n </div>\n\n </div>\n </div>\n </div>\n\n <!-- RIGHT CALENDAR -->\n <div class=\"calendar\">\n <div class=\"header\">\n <strong>{{ monthNames[rightMonth] }} {{ rightYear }}</strong>\n <div class=\"icons\">\n <!-- <span class=\"icon\" (click)=\"prevMonth('right')\">&lt;</span>\n <span class=\"icon\" (click)=\"nextMonth('right')\">&gt;</span> -->\n <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth('right')\" [name]=\"'chevron-right'\"></ms-icon>\n <ms-icon class=\"icon\" (click)=\"nextMonth('right')\" [name]=\"'chevron-right'\"></ms-icon>\n </div>\n </div>\n\n <div class=\"grid\">\n <!-- Day names -->\n <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\">\n <strong>{{ d }}</strong>\n </div>\n\n <!-- Days -->\n <div *ngFor=\"let d of rightDays; let i = index\" [ngClass]=\"{\n 'is-in-range': isInRange(d.date),\n 'range-start': isRowRangeStart(i, rightDays),\n 'range-end': isRowRangeEnd(i, rightDays)\n }\" (click)=\"d.type === 'current' && select(d.date)\" class=\"day-outer\">\n\n <div class=\"day\" [ngClass]=\"getDayClasses(d, i, rightDays)\">\n <span>{{ d.date.getDate() }}</span>\n <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n [style.background-color]=\"(isInRange(d.date) && (isSameDate(d.date, fromDate) || isSameDate(d.date, toDate))) ? '#fff' : '#0084FF'\"></span>\n </div>\n\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- RANGE ACTIONS -->\n <div class=\"range-actions\">\n <button class=\"btn cancel\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"btn apply\" (click)=\"onApply()\">Apply</button>\n </div>\n\n </div>\n </ng-container>\n\n\n</div>", styles: [".calendar-wrapper{display:flex;flex-direction:column;margin-top:4px}.calendars{display:flex;width:616px}.calendar{width:312px;min-height:320px;background:#fff;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.single-calendar{border:1px solid #E0E0E0;box-shadow:0 2px 12px #00000014;border-radius:12px;z-index:9999}.range-calendar{width:616px;height:440px;border:1px solid #E0E0E0;background:#fff;box-shadow:0 2px 12px #00000014;border-radius:12px;z-index:9999}.calendars .calendar{width:100%;background:#fff;border-radius:12px;display:flex;flex-direction:column;box-sizing:border-box}.header{width:100%;height:40px;display:flex;justify-content:space-between;align-items:center}.header strong{font-size:14px;font-weight:600}.icons{display:flex;gap:8px}.icon{width:40px;height:40px;display:flex;justify-content:center;align-items:center;font-size:20px;border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s}.icon:hover{background:#e0f0ff}.grid{display:grid;grid-template-columns:repeat(7,1fr);grid-column-gap:0;grid-row-gap:4px}.day-name{height:40px;display:flex;justify-content:center;align-items:center;font-size:12px;font-weight:500;color:#1b1f22}.day{position:relative;width:100%;height:40px;display:flex;justify-content:center;align-items:center;font-size:14px;font-weight:500;line-height:18px;color:#1b1f22;cursor:pointer;box-sizing:border-box;transition:background .15s,border .15s}.day:hover{background:#e0f0ff;border:1px solid #0084FF;border-radius:8px;flex-direction:column;color:#0084ff}.day.today{color:#0084ff}.dot{position:absolute;bottom:4px;width:3px;height:3px;border-radius:1px;background-color:#0084ff}.day.selected{background:#007bff;color:#fff;border-radius:8px}.day.selected.today{color:#fff}.day.selected.today .dot{background-color:#fff}.is-in-range{background:#0084ff1a}.is-in-range.range-start{border-top-left-radius:8px;border-bottom-left-radius:8px}.is-in-range.range-end{border-top-right-radius:8px;border-bottom-right-radius:8px}.day.range-first{background:#0084ff;color:#fff;border:4px solid #0084FF;border-radius:8px!important;box-sizing:border-box}.day.range-last{background:#0084ff;color:#fff;border:4px solid #0084FF;border-radius:8px;box-sizing:border-box}.day.disabled{color:#aaa;cursor:default;background:none}.range-actions{width:595px;height:32px;display:flex;justify-content:flex-end;gap:8px}.range-actions .btn{height:32px;padding:0 12px;border-radius:8px;border:1px solid #E0E0E0;background:#fff;cursor:pointer;font-size:13px}.range-actions .btn.apply{background-color:#007bff;color:#fff;border:none}.rotate-180{transform:rotate(180deg)}\n"] }]
3995
+ args: [{ selector: 'app-calendar', imports: [CommonModule, MsDesignSystemModule], template: "<div class=\"calendar-wrapper\">\n\n <!-- SINGLE MODE -->\n <ng-container *ngIf=\"mode==='single'\">\n <div class=\"calendar single-calendar\">\n <div class=\"header\">\n <strong>{{ monthNames[leftMonth] }} {{ leftYear }}</strong>\n <div class=\"icons\">\n <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth()\" [name]=\"'chevron-right'\" [size]=\"'medium'\"></ms-icon>\n <ms-icon class=\"icon\" (click)=\"nextMonth()\" [name]=\"'chevron-right'\" [size]=\"'medium'\"></ms-icon>\n </div>\n </div>\n <div class=\"grid\">\n <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\"><strong>{{ d }}</strong>\n </div>\n <div class=\"day\" *ngFor=\"let d of getDays(leftMonth, leftYear)\"\n [class.selected]=\"isSameDate(d.date, selectedDate)\" [class.today]=\"isToday(d.date)\"\n [class.disabled]=\"d.type!=='current'\" (mousedown)=\"d.type==='current' && select(d.date)\">\n {{ d.date.getDate() }}\n <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n [style.background-color]=\"isSameDate(d.date, selectedDate) ? '#fff' : '#0084FF'\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n\n <ng-container *ngIf=\"mode === 'range'\">\n <div class=\"range-calendar\">\n\n <div class=\"calendars\">\n\n <!-- LEFT CALENDAR -->\n <div class=\"calendar\">\n <div class=\"header\">\n <strong>{{ monthNames[leftMonth] }} {{ leftYear }}</strong>\n <div class=\"icons\">\n <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth('left')\" [name]=\"'chevron-right'\" [size]=\"'medium'\"></ms-icon>\n <ms-icon class=\"icon\" (click)=\"nextMonth('left')\" [name]=\"'chevron-right'\" [size]=\"'medium'\"></ms-icon>\n </div>\n </div>\n\n <div class=\"grid\">\n <!-- Day names -->\n <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\">\n <strong>{{ d }}</strong>\n </div>\n\n <!-- Days -->\n <div *ngFor=\"let d of leftDays; let i = index\" [ngClass]=\"{\n 'is-in-range': isInRange(d.date),\n 'range-start': isRowRangeStart(i, leftDays),\n 'range-end': isRowRangeEnd(i, leftDays)\n }\" (click)=\"d.type === 'current' && select(d.date)\" class=\"day-outer\">\n\n <div class=\"day\" [ngClass]=\"getDayClasses(d, i, leftDays)\">\n <span>{{ d.date.getDate() }}</span>\n <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n [style.background-color]=\"(isInRange(d.date) && (isSameDate(d.date, fromDate) || isSameDate(d.date, toDate))) ? '#fff' : '#0084FF'\"></span>\n </div>\n\n </div>\n </div>\n </div>\n\n <!-- RIGHT CALENDAR -->\n <div class=\"calendar\">\n <div class=\"header\">\n <strong>{{ monthNames[rightMonth] }} {{ rightYear }}</strong>\n <div class=\"icons\">\n <!-- <span class=\"icon\" (click)=\"prevMonth('right')\">&lt;</span>\n <span class=\"icon\" (click)=\"nextMonth('right')\">&gt;</span> -->\n <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth('right')\" [name]=\"'chevron-right'\" [size]=\"'medium'\"></ms-icon>\n <ms-icon class=\"icon\" (click)=\"nextMonth('right')\" [name]=\"'chevron-right'\" [size]=\"'medium'\"></ms-icon>\n </div>\n </div>\n\n <div class=\"grid\">\n <!-- Day names -->\n <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\">\n <strong>{{ d }}</strong>\n </div>\n\n <!-- Days -->\n <div *ngFor=\"let d of rightDays; let i = index\" [ngClass]=\"{\n 'is-in-range': isInRange(d.date),\n 'range-start': isRowRangeStart(i, rightDays),\n 'range-end': isRowRangeEnd(i, rightDays)\n }\" (click)=\"d.type === 'current' && select(d.date)\" class=\"day-outer\">\n\n <div class=\"day\" [ngClass]=\"getDayClasses(d, i, rightDays)\">\n <span>{{ d.date.getDate() }}</span>\n <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n [style.background-color]=\"(isInRange(d.date) && (isSameDate(d.date, fromDate) || isSameDate(d.date, toDate))) ? '#fff' : '#0084FF'\"></span>\n </div>\n\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- RANGE ACTIONS -->\n <div class=\"range-actions\">\n <button class=\"btn cancel\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"btn apply\" (click)=\"onApply()\">Apply</button>\n </div>\n\n </div>\n </ng-container>\n\n\n</div>", styles: [".calendar-wrapper{display:flex;flex-direction:column;margin-top:4px}.calendars{display:flex;width:616px}.calendar{width:312px;min-height:320px;background:#fff;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:4px;box-sizing:border-box}.single-calendar{border:1px solid #E0E0E0;box-shadow:0 2px 12px #00000014;border-radius:12px;z-index:9999}.range-calendar{width:616px;height:440px;border:1px solid #E0E0E0;background:#fff;box-shadow:0 2px 12px #00000014;border-radius:12px;z-index:9999}.calendars .calendar{width:100%;background:#fff;border-radius:12px;display:flex;flex-direction:column;box-sizing:border-box}.header{height:40px;display:flex;justify-content:space-between;align-items:center;padding:0 0 0 8px}.header strong{font-size:14px;font-weight:600}.icons{display:flex;gap:8px}.icon{width:40px;height:40px;display:flex;justify-content:center;align-items:center;font-size:20px;border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s}.icon:hover{background:#e0f0ff}.grid{display:grid;grid-template-columns:repeat(7,1fr);grid-column-gap:0;grid-row-gap:4px}.day-name{height:40px;display:flex;justify-content:center;align-items:center;font-size:14px!important;font-weight:500!important;color:#1b1f22}.day{position:relative;width:100%;height:40px;display:flex;justify-content:center;align-items:center;font-size:14px;font-weight:500;line-height:18px;color:#1b1f22;cursor:pointer;box-sizing:border-box;transition:background .15s,border .15s}.day:hover{background:#e0f0ff;border:1px solid #0084FF;border-radius:8px;flex-direction:column;color:#0084ff}.day.today{color:#0084ff}.dot{position:absolute;bottom:4px;width:3px;height:3px;border-radius:1px;background-color:#0084ff}.day.selected{background:#007bff;color:#fff;border-radius:8px}.day.selected.today{color:#fff}.day.selected.today .dot{background-color:#fff}.is-in-range{background:#0084ff1a}.is-in-range.range-start{border-top-left-radius:8px;border-bottom-left-radius:8px}.is-in-range.range-end{border-top-right-radius:8px;border-bottom-right-radius:8px}.day.range-first{background:#0084ff;color:#fff;border:4px solid #0084FF;border-radius:8px!important;box-sizing:border-box}.day.range-last{background:#0084ff;color:#fff;border:4px solid #0084FF;border-radius:8px;box-sizing:border-box}.day.disabled{color:#aaa;cursor:default;background:none}.range-actions{width:595px;height:32px;display:flex;justify-content:flex-end;gap:8px}.range-actions .btn{height:32px;padding:0 12px;border-radius:8px;border:1px solid #E0E0E0;background:#fff;cursor:pointer;font-size:13px}.range-actions .btn.apply{background-color:#007bff;color:#fff;border:none}.range-actions .btn.cancel{border:none}.rotate-180{transform:rotate(180deg)}\n"] }]
3985
3996
  }], propDecorators: { mode: [{
3986
3997
  type: Input
3987
3998
  }], dateChange: [{
@@ -4025,11 +4036,42 @@ class MsDatePicker {
4025
4036
  leftYear = new Date().getFullYear();
4026
4037
  rightMonth = new Date().getMonth();
4027
4038
  rightYear = new Date().getFullYear();
4039
+ field = 'from';
4040
+ singleDateValue = '';
4041
+ rangeDate = '';
4042
+ fromDateInput = '';
4043
+ toDateInput = '';
4044
+ selectedDate = null;
4045
+ fromDate = null;
4046
+ toDate = null;
4047
+ currentCalendarPosition = 'normal';
4048
+ calendarStyle = {};
4049
+ calendarPosition = 'bottom';
4028
4050
  onInputClick(event) {
4029
4051
  event.stopPropagation();
4030
4052
  this.open('single');
4031
4053
  }
4054
+ setCalendarStyle() {
4055
+ if (this.calendarPosition === 'bottom') {
4056
+ this.calendarStyle = {
4057
+ top: this.currentCalendarPosition === 'firstOption' ? '28%' : '41%'
4058
+ };
4059
+ }
4060
+ else {
4061
+ this.calendarStyle = {
4062
+ bottom: this.currentCalendarPosition === 'firstOption' ? '87%' : '81%'
4063
+ };
4064
+ }
4065
+ }
4032
4066
  open(mode, field) {
4067
+ if (this.selectedSate === '' && this.dateType === 'datepicker') {
4068
+ this.currentCalendarPosition = 'firstOption';
4069
+ }
4070
+ else {
4071
+ this.currentCalendarPosition = 'normal';
4072
+ }
4073
+ this.setCalendarPosition();
4074
+ this.setCalendarStyle();
4033
4075
  if (this.mode !== mode) {
4034
4076
  this.mode = mode;
4035
4077
  this.showCalendar = true;
@@ -4037,12 +4079,21 @@ class MsDatePicker {
4037
4079
  }
4038
4080
  this.showCalendar = !this.showCalendar;
4039
4081
  }
4040
- field = 'from';
4041
- singleDateValue = '';
4042
- // singleDate: string = '';
4043
- rangeDate = '';
4044
- fromDateInput = '';
4045
- toDateInput = '';
4082
+ setCalendarPosition() {
4083
+ if (!this.container)
4084
+ return;
4085
+ const rect = this.container.nativeElement.getBoundingClientRect();
4086
+ const calendarHeight = 320;
4087
+ const spaceBelow = window.innerHeight - rect.bottom;
4088
+ const spaceAbove = rect.top;
4089
+ this.calendarPosition = spaceBelow >= calendarHeight ? 'bottom' : 'top';
4090
+ }
4091
+ onWindowScroll() {
4092
+ console.log('ok');
4093
+ if (this.showCalendar) {
4094
+ this.setCalendarPosition();
4095
+ }
4096
+ }
4046
4097
  onDateChange(value) {
4047
4098
  if (this.mode === 'single' && value instanceof Date) {
4048
4099
  this.singleDateValue = this.formatDate(value);
@@ -4068,13 +4119,6 @@ class MsDatePicker {
4068
4119
  }
4069
4120
  }
4070
4121
  }
4071
- get singleDate() {
4072
- return this.singleDateValue;
4073
- }
4074
- set singleDate(value) {
4075
- const regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
4076
- this.singleDateValue = regex.test(value) ? value : '';
4077
- }
4078
4122
  formatDate(date) {
4079
4123
  const mm = String(date.getMonth() + 1).padStart(2, '0');
4080
4124
  const dd = String(date.getDate()).padStart(2, '0');
@@ -4086,9 +4130,6 @@ class MsDatePicker {
4086
4130
  this.showCalendar = false;
4087
4131
  }
4088
4132
  }
4089
- selectedDate = null;
4090
- fromDate = null;
4091
- toDate = null;
4092
4133
  onSingleDateInput(event) {
4093
4134
  const input = event.target;
4094
4135
  const rawValue = input.value;
@@ -4134,18 +4175,6 @@ class MsDatePicker {
4134
4175
  else
4135
4176
  this.toDateInput = formatted;
4136
4177
  }
4137
- // onSingleDateBlur() {
4138
- // if (!this.isValidDate(this.singleDate)) {
4139
- // this.singleDate = '';
4140
- // this.selectedDate = null;
4141
- // }
4142
- // if (this.singleDate && !this.isValidDate(this.singleDate)) {
4143
- // this.selectedDate = null;
4144
- // }
4145
- // }
4146
- // onRangeDateBlur() {
4147
- // if (!this.isValidDate(this.rangeDate)) this.rangeDate = '';
4148
- // }
4149
4178
  onDualDateBlur(field) {
4150
4179
  if (field === 'from' && !this.isValidDate(this.fromDateInput))
4151
4180
  this.fromDateInput = '';
@@ -4189,39 +4218,6 @@ class MsDatePicker {
4189
4218
  // Join with dash if second exists
4190
4219
  return second ? `${first} - ${second}` : first;
4191
4220
  }
4192
- // private formatTypingDatePart(value: string): string {
4193
- // let digits = value.replace(/\D/g, '').substring(0, 8); // MMDDYYYY max
4194
- // let mm = '';
4195
- // let dd = '';
4196
- // let yyyy = '';
4197
- // // Month
4198
- // if (digits.length >= 1) {
4199
- // mm = digits.substring(0, 2);
4200
- // if (parseInt(mm) > 12) mm = '12';
4201
- // }
4202
- // // Day
4203
- // if (digits.length >= 3) {
4204
- // dd = digits.substring(2, 4);
4205
- // if (parseInt(dd) > 31) dd = '31';
4206
- // } else if (digits.length > 2) {
4207
- // dd = digits.substring(2);
4208
- // }
4209
- // // Year
4210
- // if (digits.length > 4) {
4211
- // yyyy = digits.substring(4, 8);
4212
- // if (yyyy.length === 4) {
4213
- // let yearNum = parseInt(yyyy);
4214
- // if (yearNum < 1900) yearNum = 1900;
4215
- // if (yearNum > 2099) yearNum = 2099;
4216
- // yyyy = yearNum.toString();
4217
- // }
4218
- // }
4219
- // let formatted = mm;
4220
- // if (dd) formatted += '/' + dd;
4221
- // if (yyyy) formatted += '/' + yyyy;
4222
- // // Limit to 10 characters
4223
- // return formatted.substring(0, 10);
4224
- // }
4225
4221
  formatTypingDatePart(value) {
4226
4222
  let digits = value.replace(/\D/g, '').substring(0, 8); // MMDDYYYY
4227
4223
  let mm = '';
@@ -4332,37 +4328,6 @@ class MsDatePicker {
4332
4328
  formatted += '/' + yyyy;
4333
4329
  return formatted.substring(0, 10); // MM/DD/YYYY
4334
4330
  }
4335
- // private formatTypingDate(value: string): string {
4336
- // let digits = value.replace(/\D/g, '').substring(0, 8);
4337
- // let mm = '';
4338
- // let dd = '';
4339
- // let yyyy = '';
4340
- // if (digits.length >= 1) {
4341
- // mm = digits.substring(0, 2);
4342
- // if (parseInt(mm) > 12) mm = '12';
4343
- // }
4344
- // if (digits.length >= 3) {
4345
- // dd = digits.substring(2, 4);
4346
- // if (parseInt(dd) > 31) dd = '31';
4347
- // } else if (digits.length > 2) {
4348
- // dd = digits.substring(2);
4349
- // }
4350
- // // Year
4351
- // if (digits.length > 4) {
4352
- // yyyy = digits.substring(4, 8);
4353
- // if (yyyy.length === 4) {
4354
- // let yearNum = parseInt(yyyy);
4355
- // if (yearNum < 1900) yearNum = 1900;
4356
- // if (yearNum > 2099) yearNum = 2099;
4357
- // yyyy = yearNum.toString();
4358
- // }
4359
- // }
4360
- // let formatted = mm;
4361
- // if (dd) formatted += '/' + dd;
4362
- // if (yyyy) formatted += '/' + yyyy;
4363
- // // Limit to 10 chars
4364
- // return formatted.substring(0, 10);
4365
- // }
4366
4331
  parseDateString(value) {
4367
4332
  const parts = value.split('/');
4368
4333
  if (parts.length === 3) {
@@ -4374,17 +4339,23 @@ class MsDatePicker {
4374
4339
  }
4375
4340
  return null;
4376
4341
  }
4377
- /** Validate final date */
4378
4342
  isValidDate(value) {
4379
4343
  const regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
4380
4344
  return regex.test(value);
4381
4345
  }
4346
+ get singleDate() {
4347
+ return this.singleDateValue;
4348
+ }
4349
+ set singleDate(value) {
4350
+ const regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
4351
+ this.singleDateValue = regex.test(value) ? value : '';
4352
+ }
4382
4353
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
4383
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsDatePicker, isStandalone: true, selector: "ms-date-picker", inputs: { required: "required", readonly: "readonly", pattern: "pattern", skeleton: "skeleton", prefix: "prefix", dateType: "dateType", disabled: "disabled", invalid: "invalid", selectedSate: "selectedSate", minDate: "minDate", maxDate: "maxDate", mode: "mode" }, outputs: { dateChange: "dateChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div #container class=\"ms-d-flex ms-flex-column ms-input-field-container\">\n\n <div *ngIf=\"dateType == 'datepicker'\" class=\"ms-date-field\" [class.ms-has-error]=\"invalid\" [class]=\"selectedSate\"\n [class.ms-has-focus]=\"selectedSate === 'ms-focus'\" [class.ms-has-prefix-container]=\"prefix\">\n <input type=\"text\" class=\"ms-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [class.disabled]=\"disabled\" [disabled]=\"disabled\"\n (click)=\"onInputClick($event)\" [attr.aria-invalid]=\"invalid\" [class]=\"selectedSate\" [(ngModel)]=\"singleDate\"\n [class.ms-file-uploader-skeleton]=\"skeleton\" (input)=\"onSingleDateInput($event)\">\n </div>\n <div *ngIf=\"dateType == 'datepicker-icon'\" class=\"ms-date-range-dual-wrapper\" [class.ms-has-suffix]=\"true\">\n\n <input type=\"text\" class=\"ms-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [(ngModel)]=\"singleDate\"\n [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\" [class.ms-file-uploader-skeleton]=\"skeleton\"\n (input)=\"onSingleDateInput($event)\">\n <span class=\"ms-date-suffix\" (click)=\"open('single')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n <div *ngIf=\"dateType == 'daterange'\" class=\"ms-date-range-dual-wrapper\">\n <input type=\"text\" class=\"ms-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"Select a range\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [(ngModel)]=\"rangeDate\"\n [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\" [class.ms-file-uploader-skeleton]=\"skeleton\"\n (input)=\"onRangeDateInput($event)\" maxlength=\"23\">\n <span class=\"ms-date-suffix\" (click)=\"open('range')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n <div *ngIf=\"dateType === 'daterange-dual'\" class=\"ms-date-range-from-to-wrapper\">\n <div>\n <label>From</label>\n <div class=\"ms-date-wrapper ms-me-3 ms-mt-2\">\n <input type=\"text\" class=\"ms-form-control\" placeholder=\"mm/dd/yyyy\" [required]=\"required\" [readonly]=\"readonly\"\n [pattern]=\"pattern\" [disabled]=\"disabled\" [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\"\n [(ngModel)]=\"fromDateInput\" [class.ms-file-uploader-skeleton]=\"skeleton\" />\n <span class=\"ms-date-suffix\" (click)=\"open('single', 'from')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n </div>\n\n <div>\n <label>To</label>\n <!-- TO DATE -->\n <div class=\"ms-date-wrapper ms-mt-2\">\n\n <input type=\"text\" class=\"ms-form-control\" placeholder=\"mm/dd/yyyy\" [required]=\"required\" [readonly]=\"readonly\"\n [pattern]=\"pattern\" [disabled]=\"disabled\" [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\"\n [(ngModel)]=\"toDateInput\" [class.ms-file-uploader-skeleton]=\"skeleton\" />\n <span class=\"ms-date-suffix\" (click)=\"open('single', 'to')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n </div>\n\n\n </div>\n\n\n <app-calendar *ngIf=\"showCalendar\" [mode]=\"mode\" [selectedDate]=\"selectedDate\" (dateChange)=\"onDateChange($event)\"\n [fromDate]=\"fromDate\" [toDate]=\"toDate\" [leftMonth]=\"leftMonth\" [leftYear]=\"leftYear\" [rightMonth]=\"rightMonth\"\n [rightYear]=\"rightYear\">\n </app-calendar>\n</div>", styles: [".ms-date-field,.ms-date-range-dual-wrapper,.ms-date-wrapper{display:flex;align-items:center;position:relative;width:240px;height:36px;border-radius:8px;background-color:#fff;border:1px solid #E0E0E0;padding:0;overflow:hidden;box-sizing:border-box;transition:border-color .2s,box-shadow .2s,background-color .2s;z-index:0}.ms-date-range-from-to-wrapper{display:flex;align-items:center;position:relative;background-color:#fff;padding:0;overflow:hidden;box-sizing:border-box;z-index:0}.ms-form-control{flex:1;border:none;outline:none;height:100%;font-size:14px;font-weight:500;color:#374151;background-color:transparent;padding:0 12px;box-sizing:border-box;z-index:2}.ms-form-control.ms-has-prefix{padding-left:40px}.ms-form-control.ms-has-suffix{padding-right:40px}.ms-form-control:disabled{color:#9ca3af;cursor:not-allowed;background-color:transparent}.ms-date-prefix,.ms-date-suffix{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;z-index:3}.ms-date-prefix img,.ms-date-suffix img{width:16px;height:16px}.ms-date-prefix{left:12px}.ms-date-suffix{right:12px}.ms-date-field,.ms-date-wrapper{display:flex;align-items:center;border:1px solid #d1d5db;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px}.ms-date-field.ms-has-focus,.ms-date-wrapper.ms-has-focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-date-field.ms-has-error,.ms-date-wrapper.ms-has-error{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.ms-date-field:hover:not(:disabled),.ms-date-wrapper:hover:not(:disabled){border-color:#3b82f6}.ms-date-field.ms-disabled,.ms-date-wrapper.ms-disabled{border:1px solid #d1d5db!important}.ms-date-field.ms-error,.ms-date-wrapper.ms-error{border:1px solid #ef4444!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: Calendar, selector: "app-calendar", inputs: ["mode", "selectedDate", "fromDate", "toDate", "leftMonth", "leftYear", "rightMonth", "rightYear"], outputs: ["dateChange"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MsDesignSystemModule }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
4354
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsDatePicker, isStandalone: true, selector: "ms-date-picker", inputs: { required: "required", readonly: "readonly", pattern: "pattern", skeleton: "skeleton", prefix: "prefix", dateType: "dateType", disabled: "disabled", invalid: "invalid", selectedSate: "selectedSate", minDate: "minDate", maxDate: "maxDate", mode: "mode" }, outputs: { dateChange: "dateChange" }, host: { listeners: { "window:scroll": "onWindowScroll()", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div #container class=\"ms-d-flex ms-flex-column ms-input-field-container\">\n\n <div *ngIf=\"dateType == 'datepicker'\" class=\"ms-date-field\" [class.ms-has-error]=\"invalid\" [class]=\"selectedSate\"\n [class.ms-has-focus]=\"selectedSate === 'ms-focus'\" [class.ms-has-prefix-container]=\"prefix\">\n <input type=\"text\" class=\"ms-date-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [class.disabled]=\"disabled\" [disabled]=\"disabled\"\n (click)=\"onInputClick($event)\" [attr.aria-invalid]=\"invalid\" [class]=\"selectedSate\" [(ngModel)]=\"singleDate\"\n [class.ms-file-uploader-skeleton]=\"skeleton\" (input)=\"onSingleDateInput($event)\">\n </div>\n <div *ngIf=\"dateType == 'datepicker-icon'\" class=\"ms-date-range-dual-wrapper\" [class.ms-has-suffix]=\"true\"\n [class.ms-has-error]=\"invalid\" [class]=\"selectedSate\" [class.ms-has-focus]=\"selectedSate === 'ms-focus'\">\n\n <input type=\"text\" class=\"ms-date-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [(ngModel)]=\"singleDate\"\n [attr.aria-invalid]=\"invalid\" [class]=\"selectedSate\" [class.ms-file-uploader-skeleton]=\"skeleton\"\n (input)=\"onSingleDateInput($event)\">\n <span class=\"ms-date-suffix\" (click)=\"open('single')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n <div *ngIf=\"dateType == 'daterange'\" class=\"ms-date-range-dual-wrapper\">\n <input type=\"text\" class=\"ms-date-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"Select a range\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [(ngModel)]=\"rangeDate\"\n [attr.aria-invalid]=\"invalid\" [class]=\"selectedSate\" [class.ms-file-uploader-skeleton]=\"skeleton\"\n (input)=\"onRangeDateInput($event)\" maxlength=\"23\">\n <span class=\"ms-date-suffix\" (click)=\"open('range')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n <div *ngIf=\"dateType === 'daterange-dual'\" class=\"ms-date-range-from-to-wrapper\">\n <div>\n <label>From</label>\n <div class=\"ms-date-wrapper ms-me-3 ms-mt-2\">\n <input type=\"text\" class=\"ms-date-form-control\" placeholder=\"mm/dd/yyyy\" [required]=\"required\"\n [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [attr.aria-invalid]=\"invalid\"\n [attr.data-state]=\"selectedSate\" [(ngModel)]=\"fromDateInput\" [class.ms-file-uploader-skeleton]=\"skeleton\" />\n <span class=\"ms-date-suffix\" (click)=\"open('single', 'from')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n </div>\n\n <div>\n <label>To</label>\n <!-- TO DATE -->\n <div class=\"ms-date-wrapper ms-mt-2\">\n\n <input type=\"text\" class=\"ms-date-form-control\" placeholder=\"mm/dd/yyyy\" [required]=\"required\"\n [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [attr.aria-invalid]=\"invalid\"\n [attr.data-state]=\"selectedSate\" [(ngModel)]=\"toDateInput\" [class.ms-file-uploader-skeleton]=\"skeleton\" />\n <span class=\"ms-date-suffix\" (click)=\"open('single', 'to')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n </div>\n\n\n </div>\n\n\n <app-calendar *ngIf=\"showCalendar\" [mode]=\"mode\" [selectedDate]=\"selectedDate\" (dateChange)=\"onDateChange($event)\"\n [fromDate]=\"fromDate\" [toDate]=\"toDate\" [leftMonth]=\"leftMonth\" [leftYear]=\"leftYear\" [rightMonth]=\"rightMonth\"\n [rightYear]=\"rightYear\" [ngStyle]=\"calendarStyle\">\n </app-calendar>\n</div>", styles: [".ms-date-field,.ms-date-range-dual-wrapper,.ms-date-wrapper{display:flex;align-items:center;position:relative;width:240px;height:36px;border-radius:8px;background-color:#fff;border:1px solid #E0E0E0;padding:0;overflow:hidden;box-sizing:border-box;transition:border-color .2s,box-shadow .2s,background-color .2s;z-index:0}.ms-date-range-from-to-wrapper{display:flex;align-items:center;position:relative;background-color:#fff;padding:0;overflow:hidden;box-sizing:border-box;z-index:0}.ms-date-form-control{flex:1;border:none;outline:none;height:100%;font-size:14px;font-weight:500;color:#374151;background-color:transparent;padding:0 12px;box-sizing:border-box;z-index:2}.ms-date-form-control.ms-has-prefix{padding-left:40px}.ms-date-form-control.ms-has-suffix{padding-right:40px}.ms-date-form-control:disabled{color:#9ca3af;cursor:not-allowed;background-color:transparent}.ms-date-prefix,.ms-date-suffix{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;z-index:3}.ms-date-prefix img,.ms-date-suffix img{width:16px;height:16px}.ms-date-prefix{left:12px}.ms-date-suffix{right:12px}.ms-date-field,.ms-date-wrapper,.ms-date-range-dual-wrapper{display:flex;align-items:center;border:1px solid #d1d5db;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px}.ms-date-field.ms-has-focus,.ms-date-wrapper.ms-has-focus,.ms-date-range-dual-wrapper.ms-has-focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-date-field.ms-has-error,.ms-date-wrapper.ms-has-error,.ms-date-range-dual-wrapper.ms-has-error{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.ms-date-field:hover:not(:disabled),.ms-date-wrapper:hover:not(:disabled),.ms-date-range-dual-wrapper:hover:not(:disabled){border-color:#3b82f6}.ms-date-field.ms-disabled,.ms-date-wrapper.ms-disabled,.ms-date-range-dual-wrapper.ms-disabled{border:1px solid #d1d5db!important}.ms-date-field.ms-error,.ms-date-wrapper.ms-error,.ms-date-range-dual-wrapper.ms-error{border:1px solid #ef4444!important}app-calendar{position:absolute;z-index:1000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Calendar, selector: "app-calendar", inputs: ["mode", "selectedDate", "fromDate", "toDate", "leftMonth", "leftYear", "rightMonth", "rightYear"], outputs: ["dateChange"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MsDesignSystemModule }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
4384
4355
  }
4385
4356
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDatePicker, decorators: [{
4386
4357
  type: Component,
4387
- args: [{ selector: 'ms-date-picker', imports: [CommonModule, Calendar, FormsModule, MsDesignSystemModule], template: "<div #container class=\"ms-d-flex ms-flex-column ms-input-field-container\">\n\n <div *ngIf=\"dateType == 'datepicker'\" class=\"ms-date-field\" [class.ms-has-error]=\"invalid\" [class]=\"selectedSate\"\n [class.ms-has-focus]=\"selectedSate === 'ms-focus'\" [class.ms-has-prefix-container]=\"prefix\">\n <input type=\"text\" class=\"ms-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [class.disabled]=\"disabled\" [disabled]=\"disabled\"\n (click)=\"onInputClick($event)\" [attr.aria-invalid]=\"invalid\" [class]=\"selectedSate\" [(ngModel)]=\"singleDate\"\n [class.ms-file-uploader-skeleton]=\"skeleton\" (input)=\"onSingleDateInput($event)\">\n </div>\n <div *ngIf=\"dateType == 'datepicker-icon'\" class=\"ms-date-range-dual-wrapper\" [class.ms-has-suffix]=\"true\">\n\n <input type=\"text\" class=\"ms-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [(ngModel)]=\"singleDate\"\n [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\" [class.ms-file-uploader-skeleton]=\"skeleton\"\n (input)=\"onSingleDateInput($event)\">\n <span class=\"ms-date-suffix\" (click)=\"open('single')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n <div *ngIf=\"dateType == 'daterange'\" class=\"ms-date-range-dual-wrapper\">\n <input type=\"text\" class=\"ms-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"Select a range\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [(ngModel)]=\"rangeDate\"\n [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\" [class.ms-file-uploader-skeleton]=\"skeleton\"\n (input)=\"onRangeDateInput($event)\" maxlength=\"23\">\n <span class=\"ms-date-suffix\" (click)=\"open('range')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n <div *ngIf=\"dateType === 'daterange-dual'\" class=\"ms-date-range-from-to-wrapper\">\n <div>\n <label>From</label>\n <div class=\"ms-date-wrapper ms-me-3 ms-mt-2\">\n <input type=\"text\" class=\"ms-form-control\" placeholder=\"mm/dd/yyyy\" [required]=\"required\" [readonly]=\"readonly\"\n [pattern]=\"pattern\" [disabled]=\"disabled\" [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\"\n [(ngModel)]=\"fromDateInput\" [class.ms-file-uploader-skeleton]=\"skeleton\" />\n <span class=\"ms-date-suffix\" (click)=\"open('single', 'from')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n </div>\n\n <div>\n <label>To</label>\n <!-- TO DATE -->\n <div class=\"ms-date-wrapper ms-mt-2\">\n\n <input type=\"text\" class=\"ms-form-control\" placeholder=\"mm/dd/yyyy\" [required]=\"required\" [readonly]=\"readonly\"\n [pattern]=\"pattern\" [disabled]=\"disabled\" [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\"\n [(ngModel)]=\"toDateInput\" [class.ms-file-uploader-skeleton]=\"skeleton\" />\n <span class=\"ms-date-suffix\" (click)=\"open('single', 'to')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n </div>\n\n\n </div>\n\n\n <app-calendar *ngIf=\"showCalendar\" [mode]=\"mode\" [selectedDate]=\"selectedDate\" (dateChange)=\"onDateChange($event)\"\n [fromDate]=\"fromDate\" [toDate]=\"toDate\" [leftMonth]=\"leftMonth\" [leftYear]=\"leftYear\" [rightMonth]=\"rightMonth\"\n [rightYear]=\"rightYear\">\n </app-calendar>\n</div>", styles: [".ms-date-field,.ms-date-range-dual-wrapper,.ms-date-wrapper{display:flex;align-items:center;position:relative;width:240px;height:36px;border-radius:8px;background-color:#fff;border:1px solid #E0E0E0;padding:0;overflow:hidden;box-sizing:border-box;transition:border-color .2s,box-shadow .2s,background-color .2s;z-index:0}.ms-date-range-from-to-wrapper{display:flex;align-items:center;position:relative;background-color:#fff;padding:0;overflow:hidden;box-sizing:border-box;z-index:0}.ms-form-control{flex:1;border:none;outline:none;height:100%;font-size:14px;font-weight:500;color:#374151;background-color:transparent;padding:0 12px;box-sizing:border-box;z-index:2}.ms-form-control.ms-has-prefix{padding-left:40px}.ms-form-control.ms-has-suffix{padding-right:40px}.ms-form-control:disabled{color:#9ca3af;cursor:not-allowed;background-color:transparent}.ms-date-prefix,.ms-date-suffix{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;z-index:3}.ms-date-prefix img,.ms-date-suffix img{width:16px;height:16px}.ms-date-prefix{left:12px}.ms-date-suffix{right:12px}.ms-date-field,.ms-date-wrapper{display:flex;align-items:center;border:1px solid #d1d5db;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px}.ms-date-field.ms-has-focus,.ms-date-wrapper.ms-has-focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-date-field.ms-has-error,.ms-date-wrapper.ms-has-error{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.ms-date-field:hover:not(:disabled),.ms-date-wrapper:hover:not(:disabled){border-color:#3b82f6}.ms-date-field.ms-disabled,.ms-date-wrapper.ms-disabled{border:1px solid #d1d5db!important}.ms-date-field.ms-error,.ms-date-wrapper.ms-error{border:1px solid #ef4444!important}\n"] }]
4358
+ args: [{ selector: 'ms-date-picker', imports: [CommonModule, Calendar, FormsModule, MsDesignSystemModule], template: "<div #container class=\"ms-d-flex ms-flex-column ms-input-field-container\">\n\n <div *ngIf=\"dateType == 'datepicker'\" class=\"ms-date-field\" [class.ms-has-error]=\"invalid\" [class]=\"selectedSate\"\n [class.ms-has-focus]=\"selectedSate === 'ms-focus'\" [class.ms-has-prefix-container]=\"prefix\">\n <input type=\"text\" class=\"ms-date-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [class.disabled]=\"disabled\" [disabled]=\"disabled\"\n (click)=\"onInputClick($event)\" [attr.aria-invalid]=\"invalid\" [class]=\"selectedSate\" [(ngModel)]=\"singleDate\"\n [class.ms-file-uploader-skeleton]=\"skeleton\" (input)=\"onSingleDateInput($event)\">\n </div>\n <div *ngIf=\"dateType == 'datepicker-icon'\" class=\"ms-date-range-dual-wrapper\" [class.ms-has-suffix]=\"true\"\n [class.ms-has-error]=\"invalid\" [class]=\"selectedSate\" [class.ms-has-focus]=\"selectedSate === 'ms-focus'\">\n\n <input type=\"text\" class=\"ms-date-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [(ngModel)]=\"singleDate\"\n [attr.aria-invalid]=\"invalid\" [class]=\"selectedSate\" [class.ms-file-uploader-skeleton]=\"skeleton\"\n (input)=\"onSingleDateInput($event)\">\n <span class=\"ms-date-suffix\" (click)=\"open('single')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n <div *ngIf=\"dateType == 'daterange'\" class=\"ms-date-range-dual-wrapper\">\n <input type=\"text\" class=\"ms-date-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"Select a range\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [(ngModel)]=\"rangeDate\"\n [attr.aria-invalid]=\"invalid\" [class]=\"selectedSate\" [class.ms-file-uploader-skeleton]=\"skeleton\"\n (input)=\"onRangeDateInput($event)\" maxlength=\"23\">\n <span class=\"ms-date-suffix\" (click)=\"open('range')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n <div *ngIf=\"dateType === 'daterange-dual'\" class=\"ms-date-range-from-to-wrapper\">\n <div>\n <label>From</label>\n <div class=\"ms-date-wrapper ms-me-3 ms-mt-2\">\n <input type=\"text\" class=\"ms-date-form-control\" placeholder=\"mm/dd/yyyy\" [required]=\"required\"\n [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [attr.aria-invalid]=\"invalid\"\n [attr.data-state]=\"selectedSate\" [(ngModel)]=\"fromDateInput\" [class.ms-file-uploader-skeleton]=\"skeleton\" />\n <span class=\"ms-date-suffix\" (click)=\"open('single', 'from')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n </div>\n\n <div>\n <label>To</label>\n <!-- TO DATE -->\n <div class=\"ms-date-wrapper ms-mt-2\">\n\n <input type=\"text\" class=\"ms-date-form-control\" placeholder=\"mm/dd/yyyy\" [required]=\"required\"\n [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [attr.aria-invalid]=\"invalid\"\n [attr.data-state]=\"selectedSate\" [(ngModel)]=\"toDateInput\" [class.ms-file-uploader-skeleton]=\"skeleton\" />\n <span class=\"ms-date-suffix\" (click)=\"open('single', 'to')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n </div>\n\n\n </div>\n\n\n <app-calendar *ngIf=\"showCalendar\" [mode]=\"mode\" [selectedDate]=\"selectedDate\" (dateChange)=\"onDateChange($event)\"\n [fromDate]=\"fromDate\" [toDate]=\"toDate\" [leftMonth]=\"leftMonth\" [leftYear]=\"leftYear\" [rightMonth]=\"rightMonth\"\n [rightYear]=\"rightYear\" [ngStyle]=\"calendarStyle\">\n </app-calendar>\n</div>", styles: [".ms-date-field,.ms-date-range-dual-wrapper,.ms-date-wrapper{display:flex;align-items:center;position:relative;width:240px;height:36px;border-radius:8px;background-color:#fff;border:1px solid #E0E0E0;padding:0;overflow:hidden;box-sizing:border-box;transition:border-color .2s,box-shadow .2s,background-color .2s;z-index:0}.ms-date-range-from-to-wrapper{display:flex;align-items:center;position:relative;background-color:#fff;padding:0;overflow:hidden;box-sizing:border-box;z-index:0}.ms-date-form-control{flex:1;border:none;outline:none;height:100%;font-size:14px;font-weight:500;color:#374151;background-color:transparent;padding:0 12px;box-sizing:border-box;z-index:2}.ms-date-form-control.ms-has-prefix{padding-left:40px}.ms-date-form-control.ms-has-suffix{padding-right:40px}.ms-date-form-control:disabled{color:#9ca3af;cursor:not-allowed;background-color:transparent}.ms-date-prefix,.ms-date-suffix{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;z-index:3}.ms-date-prefix img,.ms-date-suffix img{width:16px;height:16px}.ms-date-prefix{left:12px}.ms-date-suffix{right:12px}.ms-date-field,.ms-date-wrapper,.ms-date-range-dual-wrapper{display:flex;align-items:center;border:1px solid #d1d5db;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px}.ms-date-field.ms-has-focus,.ms-date-wrapper.ms-has-focus,.ms-date-range-dual-wrapper.ms-has-focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-date-field.ms-has-error,.ms-date-wrapper.ms-has-error,.ms-date-range-dual-wrapper.ms-has-error{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.ms-date-field:hover:not(:disabled),.ms-date-wrapper:hover:not(:disabled),.ms-date-range-dual-wrapper:hover:not(:disabled){border-color:#3b82f6}.ms-date-field.ms-disabled,.ms-date-wrapper.ms-disabled,.ms-date-range-dual-wrapper.ms-disabled{border:1px solid #d1d5db!important}.ms-date-field.ms-error,.ms-date-wrapper.ms-error,.ms-date-range-dual-wrapper.ms-error{border:1px solid #ef4444!important}app-calendar{position:absolute;z-index:1000}\n"] }]
4388
4359
  }], propDecorators: { container: [{
4389
4360
  type: ViewChild,
4390
4361
  args: ['container']
@@ -4414,6 +4385,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
4414
4385
  type: Input
4415
4386
  }], dateChange: [{
4416
4387
  type: Output
4388
+ }], onWindowScroll: [{
4389
+ type: HostListener,
4390
+ args: ['window:scroll']
4417
4391
  }], onDocumentClick: [{
4418
4392
  type: HostListener,
4419
4393
  args: ['document:click', ['$event']]