ms-design-system 0.0.34 → 0.0.35
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.
|
@@ -378,11 +378,11 @@ class MsDropdown {
|
|
|
378
378
|
this.isOpen = false;
|
|
379
379
|
}
|
|
380
380
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDropdown, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
381
|
-
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", btnWidth: "btnWidth", btnMinWidth: "btnMinWidth", btnMaxWidth: "btnMaxWidth", 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" }, 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\" [ngClass]=\"customClass\" [class.ms-disabled]=\"isDisabled\"\n (click)=\"onTriggerClick()\">\n <div class=\"ms-dropdown-field ms-d-flex ms-align-items-center\">\n <!-- allowMultiple && multiSelectDisplay === 'tags' -->\n <div class=\"ms-input-wrapper\" *ngIf=\"allowMultiple && multiSelectDisplay === 'tags'\"\n [style.width]=\"btnWidth\"\n [style.minWidth]=\"btnMinWidth\"\n [style.maxWidth]=\"btnMaxWidth\"\n [class.focused]=\"isFocused\"\n [class.error]=\"hasError\"\n [class.disabled]=\"disabled\"\n [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\"\n [ngStyle]=\"{'padding-right.px': inputFocusState || (selectedItems.length > 0) ? 42 : 0 }\"\n (click)=\"focusInput()\" [class.ms-dropdown-form-control]=\"visibleTags.length > 0\">\n\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-tags-wrapper-prefix-icon\">\n <span>\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + icon + '.svg'\" />\n\n </span>\n </span>\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 BUTTON -->\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 <input\n #tagInput\n class=\"ms-form-control ms-dropdown-input-field\"\n [disabled]=\"disabled\"\n (focus)=\"isFocused = true\"\n (blur)=\"isFocused = false\"\n placeholder=\"Select...\"\n *ngIf=\"selectedItems.length === 0\"\n />\n\n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-tags-wrapper-suffix-icon\">\n <span>\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + icon + '.svg'\" />\n\n </span>\n </span>\n </div>\n\n <!-- Input Field Trigger -->\n <div *ngIf=\"multiSelectDisplay !== 'tags'\" \n class=\"ms-dropdown-input-wrapper\"\n [class.ms-input-error]=\"inputErrorState || isSelectionRequired()\"\n [class.ms-input-warning]=\"inputWarningState\"\n [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\">\n <!-- <label *ngIf=\"inputLabel\" [for]=\"inputLabel\" class=\"ms-dropdown-input-label\">{{ inputLabel }} <span *ngIf=\"required\" class=\"ms-required\">*</span></label> -->\n <div class=\"ms-dropdown-input-field-wrapper\">\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-dropdown-input-prefix-icon\">\n <span >\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + icon + '.svg'\" />\n </span>\n </span>\n \n <input \n type=\"text\"\n class=\"ms-dropdown-input-field\"\n [class.ms-has-prefix-icon]=\"icon && iconPosition === 'prefix'\"\n [class.ms-has-suffix-icon]=\"icon && iconPosition === 'suffix'\"\n [placeholder]=\"inputPlaceholder\"\n [value]=\"selectedItem || text\"\n [disabled]=\"isDisabled\"\n [readonly]=\"true\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"ariaLabel\"\n [style.width]=\"btnWidth\" \n [style.minWidth]=\"btnMinWidth\" \n [style.maxWidth]=\"btnMaxWidth\"\n (click)=\"onTriggerClick(); $event.stopPropagation()\"\n (focus)=\"inputFocusState = true\"\n (blur)=\"onBlur()\" >\n \n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-dropdown-input-suffix-icon\">\n <span >\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + icon + '.svg'\" />\n </span>\n </span>\n </div>\n </div>\n\n <!-- Input Field with Tags -->\n <!-- <div *ngIf=\"allowMultiple\" \n class=\"ms-dropdown-input-wrapper ms-dropdown-input-tags\"\n [class.ms-input-error]=\"inputErrorState || isSelectionRequired()\"\n [class.ms-input-warning]=\"inputWarningState\"\n [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\"\n [style.width]=\"btnWidth\" \n [style.minWidth]=\"btnMinWidth\" [style.maxWidth]=\"btnMaxWidth\"\n (blur)=\"onBlur()\">\n <label *ngIf=\"inputLabel\" [for]=\"inputLabel\" class=\"ms-dropdown-input-label\">{{ inputLabel }} <span *ngIf=\"required\" class=\"ms-required\">*</span></label>\n <div class=\"ms-input-tags-field\" (click)=\"onTriggerClick(); $event.stopPropagation()\">\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 <span class=\"ms-tag ms-more-btn\"\n *ngIf=\"hiddenTagsCount() > 0\"\n (click)=\"toggleHiddenTags(); $event.stopPropagation()\">\n +{{ hiddenTagsCount() }} more\n </span>\n <div class=\"ms-hidden-tags-dropdown\"\n *ngIf=\"isHiddenTagsOpen\"\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 <span *ngIf=\"selectedItems.length == 0\" class=\"ms-input-placeholder\">{{ inputPlaceholder || text }}</span>\n </div>\n </div> --> <!-- Button Trigger (Default) -->\n <!-- <ms-button class=\"ms-dropdown-trigger ms-d-flex ms-align-items-center ms-justify-content-center ms-p-2\"\n [ngClass]=\"['ms-rounded-' + radiussize, variant ? 'ms-btn ms-btn-' + variant : '', 'ms-btn-' + size, iconOnly ? 'ms-icon-btn' : '']\"\n [disabled]=\"isDisabled\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"ariaLabel\" [style.width]=\"btnWidth\" \n [style.minWidth]=\"btnMinWidth\" [style.maxWidth]=\"btnMaxWidth\" *ngIf=\"!useInputField && multiSelectDisplay != 'tags'\">\n \n <ng-container *ngIf=\"icon && iconPosition === 'prefix'\">\n <span [inlineSVG]=\"icon\" class=\"ms-dropdown-icon\"></span>\n </ng-container>\n\n <span class=\"selectionClass\" *ngIf=\"!iconOnly\">\n {{ selectedItem || text }}\n </span>\n\n <ng-container *ngIf=\"icon && iconPosition === 'suffix'\">\n <span [inlineSVG]=\"icon\" class=\"ms-dropdown-icon ms-ml-2\"></span>\n </ng-container>\n\n <span *ngIf=\"icon\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\" class=\"ms-ml-2\"></span>\n </ms-button> -->\n </div>\n\n\n <div *ngIf=\"isOpen\" class=\"ms-dropdown-menu\" [ngClass]=\"dropdownMenuClass\"\n [style.maxHeight]=\"maxHeight\"\n [ngStyle]=\"{'overflowY': 'auto', 'overflowX': 'hidden', 'width': dropdownMenuWidth}\"\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 </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 <!-- \u2705 MULTI-SELECT CHECKBOX -->\n <input *ngIf=\"allowMultiple && !item.divider\"\n type=\"checkbox\"\n class=\"ms-me-2\"\n [checked]=\"item.selected\"/>\n <!-- <span *ngIf=\"item.icon\">\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + item.icon\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\" />\n </span> -->\n\n <!-- COUNTRY FLAG -->\n <img *ngIf=\"item.icon && showFlagImage\"\n [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/flags/' + (item.countryCode | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n alt=\"{{ item.label }}\" />\n\n <!-- COUNTRY NAME -->\n <span class=\"ms-country-label\">\n {{ item.label }}\n </span>\n\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-dropdown-input-wrapper{width:100%;display:flex;flex-direction:column;gap:6px}.ms-dropdown-input-wrapper.ms-input-error .ms-dropdown-input-field{border-color:#dc2626}.ms-dropdown-input-wrapper.ms-input-error .ms-dropdown-input-field:focus{border-color:#dc2626;box-shadow:0 0 0 3px #dc26261a}.ms-dropdown-input-wrapper.ms-input-error .ms-input-tags-field{border-color:#dc2626}.ms-dropdown-input-wrapper.ms-input-error .ms-input-tags-field:hover{box-shadow:0 0 0 2px #dc26261a}.ms-dropdown-input-wrapper.ms-input-error .ms-dropdown-input-label{color:#dc2626}.ms-dropdown-input-wrapper.ms-input-warning .ms-dropdown-input-field{border-color:#f59e0b}.ms-dropdown-input-wrapper.ms-input-warning .ms-dropdown-input-field:focus{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b1a}.ms-dropdown-input-wrapper.ms-input-warning .ms-input-tags-field{border-color:#f59e0b}.ms-dropdown-input-wrapper.ms-input-warning .ms-input-tags-field:hover{box-shadow:0 0 0 2px #f59e0b1a}.ms-dropdown-input-wrapper.ms-input-warning .ms-dropdown-input-label{color:#f59e0b}.ms-dropdown-input-wrapper.ms-input-focus .ms-dropdown-input-field{border-color:#3b82f6}.ms-dropdown-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{display:flex;align-items:center;justify-content:center;padding-right:12px;flex-shrink:0;color:#6b7280}.ms-tags-wrapper-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-dropdown-input-field{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-dropdown-input-field.ms-has-prefix-icon{padding-left:6px}.ms-dropdown-input-field.ms-has-suffix-icon{padding-right:0}.ms-dropdown-input-field:hover:not(:disabled){border-color:#3b82f6}.ms-dropdown-input-field:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-dropdown-input-field:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-dropdown-input-field::placeholder{color:#9ca3af}.ms-dropdown-input-tags .ms-input-tags-field{width:100%;min-height:40px;padding:8px 12px;border:1px solid #d1d5db;border-radius:4px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;background-color:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s;position:relative}.ms-dropdown-input-tags .ms-input-tags-field:hover{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.ms-dropdown-input-tags .ms-input-tags-field:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-dropdown-input-tags .ms-input-placeholder{color:#9ca3af;font-size:14px}.ms-dropdown-input-tags .ms-hidden-tags-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #d1d5db;border-radius:4px;padding:8px;margin-top:4px;display:flex;flex-wrap:wrap;gap:6px;z-index:10;box-shadow:0 2px 8px #0000001a}.ms-dropdown-menu{position:absolute;top:100%;left:0;right:0;z-index:1000;border-radius:8px;border-top:1px solid #E0E0E0;background-color:#fff;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0}.ms-dropdown-item{width:100%;text-align:left;padding:12px;background:none;border:none;cursor:pointer;transition:background-color .2s}.ms-dropdown-item:hover{background-color:#f5f5f5}.ms-dropdown-item.ms-selected{background:#0084ff1a}.ms-dropdown-search{width:-webkit-fill-available;padding:12px;margin:12px;border:1px solid #d1d5db;border-radius:4px}.ms-dropdown-search-container{position:sticky;top:0;background-color:#fff}.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}.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-placeholder{color:#9ca3af}.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;background:#fff;border:1px solid #dcdcdc;border-radius:4px;padding:4px;margin-top:4px;z-index:1000;display:flex;flex-wrap:wrap;gap:4px;height:60px;max-height:120px;overflow-y:auto}.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}:-moz-placeholder{color:#6a6b6d;opacity:1}.ms-hover{border:1px solid #0084FF;box-shadow:0 0 0 1px #b7dcff}.ms-dropdown-input-suffix-icon{position:absolute;right:0}.ms-input-wrapper{position:relative;display:flex;align-items:center}.ms-dropdown-input-prefix-icon,.ms-tags-wrapper-suffix-icon{position:absolute;right:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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: "pipe", type: i1.LowerCasePipe, name: "lowercase" }] });
|
|
381
|
+
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", btnWidth: "btnWidth", btnMinWidth: "btnMinWidth", btnMaxWidth: "btnMaxWidth", 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" }, 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\" [ngClass]=\"customClass\" [class.ms-disabled]=\"isDisabled\"\n (click)=\"onTriggerClick()\">\n <div class=\"ms-dropdown-field ms-d-flex ms-align-items-center\">\n <!-- allowMultiple && multiSelectDisplay === 'tags' -->\n <div class=\"ms-input-wrapper\" *ngIf=\"allowMultiple && multiSelectDisplay === 'tags'\"\n [style.width]=\"btnWidth\"\n [style.minWidth]=\"btnMinWidth\"\n [style.maxWidth]=\"btnMaxWidth\"\n [class.focused]=\"isFocused\"\n [class.error]=\"hasError\"\n [class.disabled]=\"disabled\"\n [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\"\n [ngStyle]=\"{'padding-right.px': inputFocusState || (selectedItems.length > 0) ? 42 : 0 }\"\n (click)=\"focusInput()\" [class.ms-dropdown-form-control]=\"visibleTags.length > 0\">\n\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-tags-wrapper-prefix-icon\">\n <span>\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + icon + '.svg'\" />\n\n </span>\n </span>\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 BUTTON -->\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 <input\n #tagInput\n class=\"ms-form-control ms-dropdown-input-field\"\n [disabled]=\"disabled\"\n [readonly]=\"true\"\n (focus)=\"isFocused = true\"\n (blur)=\"isFocused = false\"\n placeholder=\"Select...\"\n *ngIf=\"selectedItems.length === 0\"\n />\n\n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-tags-wrapper-suffix-icon\">\n <span>\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + icon + '.svg'\" />\n\n </span>\n </span>\n </div>\n\n <!-- Input Field Trigger -->\n <div *ngIf=\"multiSelectDisplay !== 'tags'\" \n class=\"ms-dropdown-input-wrapper\"\n [class.ms-input-error]=\"inputErrorState || isSelectionRequired()\"\n [class.ms-input-warning]=\"inputWarningState\"\n [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\">\n <!-- <label *ngIf=\"inputLabel\" [for]=\"inputLabel\" class=\"ms-dropdown-input-label\">{{ inputLabel }} <span *ngIf=\"required\" class=\"ms-required\">*</span></label> -->\n <div class=\"ms-dropdown-input-field-wrapper\">\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-dropdown-input-prefix-icon\">\n <span >\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + icon + '.svg'\" />\n </span>\n </span>\n \n <input \n type=\"text\"\n class=\"ms-dropdown-input-field\"\n [class.ms-has-prefix-icon]=\"icon && iconPosition === 'prefix'\"\n [class.ms-has-suffix-icon]=\"icon && iconPosition === 'suffix'\"\n [placeholder]=\"inputPlaceholder\"\n [value]=\"selectedItem || text\"\n [disabled]=\"isDisabled\"\n [readonly]=\"true\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"ariaLabel\"\n [style.width]=\"btnWidth\" \n [style.minWidth]=\"btnMinWidth\" \n [style.maxWidth]=\"btnMaxWidth\"\n (click)=\"onTriggerClick(); $event.stopPropagation()\"\n (focus)=\"inputFocusState = true\"\n (blur)=\"onBlur()\" >\n \n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-dropdown-input-suffix-icon\">\n <span >\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + icon + '.svg'\" />\n </span>\n </span>\n </div>\n </div>\n\n <!-- Input Field with Tags -->\n <!-- <div *ngIf=\"allowMultiple\" \n class=\"ms-dropdown-input-wrapper ms-dropdown-input-tags\"\n [class.ms-input-error]=\"inputErrorState || isSelectionRequired()\"\n [class.ms-input-warning]=\"inputWarningState\"\n [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\"\n [style.width]=\"btnWidth\" \n [style.minWidth]=\"btnMinWidth\" [style.maxWidth]=\"btnMaxWidth\"\n (blur)=\"onBlur()\">\n <label *ngIf=\"inputLabel\" [for]=\"inputLabel\" class=\"ms-dropdown-input-label\">{{ inputLabel }} <span *ngIf=\"required\" class=\"ms-required\">*</span></label>\n <div class=\"ms-input-tags-field\" (click)=\"onTriggerClick(); $event.stopPropagation()\">\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 <span class=\"ms-tag ms-more-btn\"\n *ngIf=\"hiddenTagsCount() > 0\"\n (click)=\"toggleHiddenTags(); $event.stopPropagation()\">\n +{{ hiddenTagsCount() }} more\n </span>\n <div class=\"ms-hidden-tags-dropdown\"\n *ngIf=\"isHiddenTagsOpen\"\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 <span *ngIf=\"selectedItems.length == 0\" class=\"ms-input-placeholder\">{{ inputPlaceholder || text }}</span>\n </div>\n </div> --> <!-- Button Trigger (Default) -->\n <!-- <ms-button class=\"ms-dropdown-trigger ms-d-flex ms-align-items-center ms-justify-content-center ms-p-2\"\n [ngClass]=\"['ms-rounded-' + radiussize, variant ? 'ms-btn ms-btn-' + variant : '', 'ms-btn-' + size, iconOnly ? 'ms-icon-btn' : '']\"\n [disabled]=\"isDisabled\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"ariaLabel\" [style.width]=\"btnWidth\" \n [style.minWidth]=\"btnMinWidth\" [style.maxWidth]=\"btnMaxWidth\" *ngIf=\"!useInputField && multiSelectDisplay != 'tags'\">\n \n <ng-container *ngIf=\"icon && iconPosition === 'prefix'\">\n <span [inlineSVG]=\"icon\" class=\"ms-dropdown-icon\"></span>\n </ng-container>\n\n <span class=\"selectionClass\" *ngIf=\"!iconOnly\">\n {{ selectedItem || text }}\n </span>\n\n <ng-container *ngIf=\"icon && iconPosition === 'suffix'\">\n <span [inlineSVG]=\"icon\" class=\"ms-dropdown-icon ms-ml-2\"></span>\n </ng-container>\n\n <span *ngIf=\"icon\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\" class=\"ms-ml-2\"></span>\n </ms-button> -->\n </div>\n\n\n <div *ngIf=\"isOpen\" class=\"ms-dropdown-menu\" [ngClass]=\"dropdownMenuClass\"\n [style.maxHeight]=\"maxHeight\"\n [ngStyle]=\"{'overflowY': 'auto', 'overflowX': 'hidden', 'width': dropdownMenuWidth}\"\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 </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 <!-- \u2705 MULTI-SELECT CHECKBOX -->\n <input *ngIf=\"allowMultiple && !item.divider\"\n type=\"checkbox\"\n class=\"ms-me-2\"\n [checked]=\"item.selected\"/>\n <!-- <span *ngIf=\"item.icon\">\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + item.icon\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\" />\n </span> -->\n\n <!-- COUNTRY FLAG -->\n <img *ngIf=\"item.icon && showFlagImage\"\n [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/flags/' + (item.countryCode | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n alt=\"{{ item.label }}\" />\n\n <!-- COUNTRY NAME -->\n <span class=\"ms-country-label\">\n {{ item.label }}\n </span>\n\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-dropdown-input-wrapper{width:100%;display:flex;flex-direction:column;gap:6px}.ms-dropdown-input-wrapper.ms-input-error .ms-dropdown-input-field{border-color:#dc2626}.ms-dropdown-input-wrapper.ms-input-error .ms-dropdown-input-field:focus{border-color:#dc2626;box-shadow:0 0 0 3px #dc26261a}.ms-dropdown-input-wrapper.ms-input-error .ms-input-tags-field{border-color:#dc2626}.ms-dropdown-input-wrapper.ms-input-error .ms-input-tags-field:hover{box-shadow:0 0 0 2px #dc26261a}.ms-dropdown-input-wrapper.ms-input-error .ms-dropdown-input-label{color:#dc2626}.ms-dropdown-input-wrapper.ms-input-warning .ms-dropdown-input-field{border-color:#f59e0b}.ms-dropdown-input-wrapper.ms-input-warning .ms-dropdown-input-field:focus{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b1a}.ms-dropdown-input-wrapper.ms-input-warning .ms-input-tags-field{border-color:#f59e0b}.ms-dropdown-input-wrapper.ms-input-warning .ms-input-tags-field:hover{box-shadow:0 0 0 2px #f59e0b1a}.ms-dropdown-input-wrapper.ms-input-warning .ms-dropdown-input-label{color:#f59e0b}.ms-dropdown-input-wrapper.ms-input-focus .ms-dropdown-input-field{border-color:#3b82f6}.ms-dropdown-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{display:flex;align-items:center;justify-content:center;padding-right:12px;flex-shrink:0;color:#6b7280}.ms-tags-wrapper-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-dropdown-input-field{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-dropdown-input-field.ms-has-prefix-icon{padding-left:6px}.ms-dropdown-input-field.ms-has-suffix-icon{padding-right:0}.ms-dropdown-input-field:hover:not(:disabled){border-color:#3b82f6}.ms-dropdown-input-field:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-dropdown-input-field:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-dropdown-input-field::placeholder{color:#9ca3af}.ms-dropdown-input-tags .ms-input-tags-field{width:100%;min-height:40px;padding:8px 12px;border:1px solid #d1d5db;border-radius:4px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;background-color:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s;position:relative}.ms-dropdown-input-tags .ms-input-tags-field:hover{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.ms-dropdown-input-tags .ms-input-tags-field:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-dropdown-input-tags .ms-input-placeholder{color:#9ca3af;font-size:14px}.ms-dropdown-input-tags .ms-hidden-tags-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #d1d5db;border-radius:4px;padding:8px;margin-top:4px;display:flex;flex-wrap:wrap;gap:6px;z-index:10;box-shadow:0 2px 8px #0000001a}.ms-dropdown-menu{position:absolute;top:100%;left:0;right:0;z-index:1000;border-radius:8px;border-top:1px solid #E0E0E0;background-color:#fff;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0}.ms-dropdown-item{width:100%;text-align:left;padding:12px;background:none;border:none;cursor:pointer;transition:background-color .2s}.ms-dropdown-item:hover{background-color:#f5f5f5}.ms-dropdown-item.ms-selected{background:#0084ff1a}.ms-dropdown-search{width:-webkit-fill-available;padding:12px;margin:12px;border:1px solid #d1d5db;border-radius:4px}.ms-dropdown-search-container{position:sticky;top:0;background-color:#fff}.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}.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-placeholder{color:#9ca3af}.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;background:#fff;border:1px solid #dcdcdc;border-radius:4px;padding:4px;margin-top:4px;z-index:1000;display:flex;flex-wrap:wrap;gap:4px;height:60px;max-height:120px;overflow-y:auto}.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}:-moz-placeholder{color:#6a6b6d;opacity:1}.ms-hover{border:1px solid #0084FF;box-shadow:0 0 0 1px #b7dcff}.ms-dropdown-input-suffix-icon{position:absolute;right:0}.ms-input-wrapper{position:relative;display:flex;align-items:center}.ms-dropdown-input-prefix-icon,.ms-tags-wrapper-suffix-icon{position:absolute;right:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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: "pipe", type: i1.LowerCasePipe, name: "lowercase" }] });
|
|
382
382
|
}
|
|
383
383
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDropdown, decorators: [{
|
|
384
384
|
type: Component,
|
|
385
|
-
args: [{ selector: 'ms-dropdown', standalone: true, imports: [CommonModule, FormsModule, MsButton, InlineSVGModule, MsSpinner], template: "<div class=\"ms-dropdown-wrapper\" [ngClass]=\"customClass\" [class.ms-disabled]=\"isDisabled\"\n (click)=\"onTriggerClick()\">\n <div class=\"ms-dropdown-field ms-d-flex ms-align-items-center\">\n <!-- allowMultiple && multiSelectDisplay === 'tags' -->\n <div class=\"ms-input-wrapper\" *ngIf=\"allowMultiple && multiSelectDisplay === 'tags'\"\n [style.width]=\"btnWidth\"\n [style.minWidth]=\"btnMinWidth\"\n [style.maxWidth]=\"btnMaxWidth\"\n [class.focused]=\"isFocused\"\n [class.error]=\"hasError\"\n [class.disabled]=\"disabled\"\n [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\"\n [ngStyle]=\"{'padding-right.px': inputFocusState || (selectedItems.length > 0) ? 42 : 0 }\"\n (click)=\"focusInput()\" [class.ms-dropdown-form-control]=\"visibleTags.length > 0\">\n\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-tags-wrapper-prefix-icon\">\n <span>\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + icon + '.svg'\" />\n\n </span>\n </span>\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 BUTTON -->\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 <input\n #tagInput\n class=\"ms-form-control ms-dropdown-input-field\"\n [disabled]=\"disabled\"\n (focus)=\"isFocused = true\"\n (blur)=\"isFocused = false\"\n placeholder=\"Select...\"\n *ngIf=\"selectedItems.length === 0\"\n />\n\n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-tags-wrapper-suffix-icon\">\n <span>\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + icon + '.svg'\" />\n\n </span>\n </span>\n </div>\n\n <!-- Input Field Trigger -->\n <div *ngIf=\"multiSelectDisplay !== 'tags'\" \n class=\"ms-dropdown-input-wrapper\"\n [class.ms-input-error]=\"inputErrorState || isSelectionRequired()\"\n [class.ms-input-warning]=\"inputWarningState\"\n [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\">\n <!-- <label *ngIf=\"inputLabel\" [for]=\"inputLabel\" class=\"ms-dropdown-input-label\">{{ inputLabel }} <span *ngIf=\"required\" class=\"ms-required\">*</span></label> -->\n <div class=\"ms-dropdown-input-field-wrapper\">\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-dropdown-input-prefix-icon\">\n <span >\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + icon + '.svg'\" />\n </span>\n </span>\n \n <input \n type=\"text\"\n class=\"ms-dropdown-input-field\"\n [class.ms-has-prefix-icon]=\"icon && iconPosition === 'prefix'\"\n [class.ms-has-suffix-icon]=\"icon && iconPosition === 'suffix'\"\n [placeholder]=\"inputPlaceholder\"\n [value]=\"selectedItem || text\"\n [disabled]=\"isDisabled\"\n [readonly]=\"true\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"ariaLabel\"\n [style.width]=\"btnWidth\" \n [style.minWidth]=\"btnMinWidth\" \n [style.maxWidth]=\"btnMaxWidth\"\n (click)=\"onTriggerClick(); $event.stopPropagation()\"\n (focus)=\"inputFocusState = true\"\n (blur)=\"onBlur()\" >\n \n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-dropdown-input-suffix-icon\">\n <span >\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + icon + '.svg'\" />\n </span>\n </span>\n </div>\n </div>\n\n <!-- Input Field with Tags -->\n <!-- <div *ngIf=\"allowMultiple\" \n class=\"ms-dropdown-input-wrapper ms-dropdown-input-tags\"\n [class.ms-input-error]=\"inputErrorState || isSelectionRequired()\"\n [class.ms-input-warning]=\"inputWarningState\"\n [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\"\n [style.width]=\"btnWidth\" \n [style.minWidth]=\"btnMinWidth\" [style.maxWidth]=\"btnMaxWidth\"\n (blur)=\"onBlur()\">\n <label *ngIf=\"inputLabel\" [for]=\"inputLabel\" class=\"ms-dropdown-input-label\">{{ inputLabel }} <span *ngIf=\"required\" class=\"ms-required\">*</span></label>\n <div class=\"ms-input-tags-field\" (click)=\"onTriggerClick(); $event.stopPropagation()\">\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 <span class=\"ms-tag ms-more-btn\"\n *ngIf=\"hiddenTagsCount() > 0\"\n (click)=\"toggleHiddenTags(); $event.stopPropagation()\">\n +{{ hiddenTagsCount() }} more\n </span>\n <div class=\"ms-hidden-tags-dropdown\"\n *ngIf=\"isHiddenTagsOpen\"\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 <span *ngIf=\"selectedItems.length == 0\" class=\"ms-input-placeholder\">{{ inputPlaceholder || text }}</span>\n </div>\n </div> --> <!-- Button Trigger (Default) -->\n <!-- <ms-button class=\"ms-dropdown-trigger ms-d-flex ms-align-items-center ms-justify-content-center ms-p-2\"\n [ngClass]=\"['ms-rounded-' + radiussize, variant ? 'ms-btn ms-btn-' + variant : '', 'ms-btn-' + size, iconOnly ? 'ms-icon-btn' : '']\"\n [disabled]=\"isDisabled\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"ariaLabel\" [style.width]=\"btnWidth\" \n [style.minWidth]=\"btnMinWidth\" [style.maxWidth]=\"btnMaxWidth\" *ngIf=\"!useInputField && multiSelectDisplay != 'tags'\">\n \n <ng-container *ngIf=\"icon && iconPosition === 'prefix'\">\n <span [inlineSVG]=\"icon\" class=\"ms-dropdown-icon\"></span>\n </ng-container>\n\n <span class=\"selectionClass\" *ngIf=\"!iconOnly\">\n {{ selectedItem || text }}\n </span>\n\n <ng-container *ngIf=\"icon && iconPosition === 'suffix'\">\n <span [inlineSVG]=\"icon\" class=\"ms-dropdown-icon ms-ml-2\"></span>\n </ng-container>\n\n <span *ngIf=\"icon\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\" class=\"ms-ml-2\"></span>\n </ms-button> -->\n </div>\n\n\n <div *ngIf=\"isOpen\" class=\"ms-dropdown-menu\" [ngClass]=\"dropdownMenuClass\"\n [style.maxHeight]=\"maxHeight\"\n [ngStyle]=\"{'overflowY': 'auto', 'overflowX': 'hidden', 'width': dropdownMenuWidth}\"\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 </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 <!-- \u2705 MULTI-SELECT CHECKBOX -->\n <input *ngIf=\"allowMultiple && !item.divider\"\n type=\"checkbox\"\n class=\"ms-me-2\"\n [checked]=\"item.selected\"/>\n <!-- <span *ngIf=\"item.icon\">\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + item.icon\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\" />\n </span> -->\n\n <!-- COUNTRY FLAG -->\n <img *ngIf=\"item.icon && showFlagImage\"\n [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/flags/' + (item.countryCode | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n alt=\"{{ item.label }}\" />\n\n <!-- COUNTRY NAME -->\n <span class=\"ms-country-label\">\n {{ item.label }}\n </span>\n\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-dropdown-input-wrapper{width:100%;display:flex;flex-direction:column;gap:6px}.ms-dropdown-input-wrapper.ms-input-error .ms-dropdown-input-field{border-color:#dc2626}.ms-dropdown-input-wrapper.ms-input-error .ms-dropdown-input-field:focus{border-color:#dc2626;box-shadow:0 0 0 3px #dc26261a}.ms-dropdown-input-wrapper.ms-input-error .ms-input-tags-field{border-color:#dc2626}.ms-dropdown-input-wrapper.ms-input-error .ms-input-tags-field:hover{box-shadow:0 0 0 2px #dc26261a}.ms-dropdown-input-wrapper.ms-input-error .ms-dropdown-input-label{color:#dc2626}.ms-dropdown-input-wrapper.ms-input-warning .ms-dropdown-input-field{border-color:#f59e0b}.ms-dropdown-input-wrapper.ms-input-warning .ms-dropdown-input-field:focus{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b1a}.ms-dropdown-input-wrapper.ms-input-warning .ms-input-tags-field{border-color:#f59e0b}.ms-dropdown-input-wrapper.ms-input-warning .ms-input-tags-field:hover{box-shadow:0 0 0 2px #f59e0b1a}.ms-dropdown-input-wrapper.ms-input-warning .ms-dropdown-input-label{color:#f59e0b}.ms-dropdown-input-wrapper.ms-input-focus .ms-dropdown-input-field{border-color:#3b82f6}.ms-dropdown-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{display:flex;align-items:center;justify-content:center;padding-right:12px;flex-shrink:0;color:#6b7280}.ms-tags-wrapper-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-dropdown-input-field{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-dropdown-input-field.ms-has-prefix-icon{padding-left:6px}.ms-dropdown-input-field.ms-has-suffix-icon{padding-right:0}.ms-dropdown-input-field:hover:not(:disabled){border-color:#3b82f6}.ms-dropdown-input-field:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-dropdown-input-field:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-dropdown-input-field::placeholder{color:#9ca3af}.ms-dropdown-input-tags .ms-input-tags-field{width:100%;min-height:40px;padding:8px 12px;border:1px solid #d1d5db;border-radius:4px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;background-color:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s;position:relative}.ms-dropdown-input-tags .ms-input-tags-field:hover{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.ms-dropdown-input-tags .ms-input-tags-field:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-dropdown-input-tags .ms-input-placeholder{color:#9ca3af;font-size:14px}.ms-dropdown-input-tags .ms-hidden-tags-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #d1d5db;border-radius:4px;padding:8px;margin-top:4px;display:flex;flex-wrap:wrap;gap:6px;z-index:10;box-shadow:0 2px 8px #0000001a}.ms-dropdown-menu{position:absolute;top:100%;left:0;right:0;z-index:1000;border-radius:8px;border-top:1px solid #E0E0E0;background-color:#fff;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0}.ms-dropdown-item{width:100%;text-align:left;padding:12px;background:none;border:none;cursor:pointer;transition:background-color .2s}.ms-dropdown-item:hover{background-color:#f5f5f5}.ms-dropdown-item.ms-selected{background:#0084ff1a}.ms-dropdown-search{width:-webkit-fill-available;padding:12px;margin:12px;border:1px solid #d1d5db;border-radius:4px}.ms-dropdown-search-container{position:sticky;top:0;background-color:#fff}.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}.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-placeholder{color:#9ca3af}.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;background:#fff;border:1px solid #dcdcdc;border-radius:4px;padding:4px;margin-top:4px;z-index:1000;display:flex;flex-wrap:wrap;gap:4px;height:60px;max-height:120px;overflow-y:auto}.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}:-moz-placeholder{color:#6a6b6d;opacity:1}.ms-hover{border:1px solid #0084FF;box-shadow:0 0 0 1px #b7dcff}.ms-dropdown-input-suffix-icon{position:absolute;right:0}.ms-input-wrapper{position:relative;display:flex;align-items:center}.ms-dropdown-input-prefix-icon,.ms-tags-wrapper-suffix-icon{position:absolute;right:5px}\n"] }]
|
|
385
|
+
args: [{ selector: 'ms-dropdown', standalone: true, imports: [CommonModule, FormsModule, MsButton, InlineSVGModule, MsSpinner], template: "<div class=\"ms-dropdown-wrapper\" [ngClass]=\"customClass\" [class.ms-disabled]=\"isDisabled\"\n (click)=\"onTriggerClick()\">\n <div class=\"ms-dropdown-field ms-d-flex ms-align-items-center\">\n <!-- allowMultiple && multiSelectDisplay === 'tags' -->\n <div class=\"ms-input-wrapper\" *ngIf=\"allowMultiple && multiSelectDisplay === 'tags'\"\n [style.width]=\"btnWidth\"\n [style.minWidth]=\"btnMinWidth\"\n [style.maxWidth]=\"btnMaxWidth\"\n [class.focused]=\"isFocused\"\n [class.error]=\"hasError\"\n [class.disabled]=\"disabled\"\n [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\"\n [ngStyle]=\"{'padding-right.px': inputFocusState || (selectedItems.length > 0) ? 42 : 0 }\"\n (click)=\"focusInput()\" [class.ms-dropdown-form-control]=\"visibleTags.length > 0\">\n\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-tags-wrapper-prefix-icon\">\n <span>\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + icon + '.svg'\" />\n\n </span>\n </span>\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 BUTTON -->\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 <input\n #tagInput\n class=\"ms-form-control ms-dropdown-input-field\"\n [disabled]=\"disabled\"\n [readonly]=\"true\"\n (focus)=\"isFocused = true\"\n (blur)=\"isFocused = false\"\n placeholder=\"Select...\"\n *ngIf=\"selectedItems.length === 0\"\n />\n\n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-tags-wrapper-suffix-icon\">\n <span>\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + icon + '.svg'\" />\n\n </span>\n </span>\n </div>\n\n <!-- Input Field Trigger -->\n <div *ngIf=\"multiSelectDisplay !== 'tags'\" \n class=\"ms-dropdown-input-wrapper\"\n [class.ms-input-error]=\"inputErrorState || isSelectionRequired()\"\n [class.ms-input-warning]=\"inputWarningState\"\n [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\">\n <!-- <label *ngIf=\"inputLabel\" [for]=\"inputLabel\" class=\"ms-dropdown-input-label\">{{ inputLabel }} <span *ngIf=\"required\" class=\"ms-required\">*</span></label> -->\n <div class=\"ms-dropdown-input-field-wrapper\">\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-dropdown-input-prefix-icon\">\n <span >\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + icon + '.svg'\" />\n </span>\n </span>\n \n <input \n type=\"text\"\n class=\"ms-dropdown-input-field\"\n [class.ms-has-prefix-icon]=\"icon && iconPosition === 'prefix'\"\n [class.ms-has-suffix-icon]=\"icon && iconPosition === 'suffix'\"\n [placeholder]=\"inputPlaceholder\"\n [value]=\"selectedItem || text\"\n [disabled]=\"isDisabled\"\n [readonly]=\"true\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"ariaLabel\"\n [style.width]=\"btnWidth\" \n [style.minWidth]=\"btnMinWidth\" \n [style.maxWidth]=\"btnMaxWidth\"\n (click)=\"onTriggerClick(); $event.stopPropagation()\"\n (focus)=\"inputFocusState = true\"\n (blur)=\"onBlur()\" >\n \n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-dropdown-input-suffix-icon\">\n <span >\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + icon + '.svg'\" />\n </span>\n </span>\n </div>\n </div>\n\n <!-- Input Field with Tags -->\n <!-- <div *ngIf=\"allowMultiple\" \n class=\"ms-dropdown-input-wrapper ms-dropdown-input-tags\"\n [class.ms-input-error]=\"inputErrorState || isSelectionRequired()\"\n [class.ms-input-warning]=\"inputWarningState\"\n [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\"\n [style.width]=\"btnWidth\" \n [style.minWidth]=\"btnMinWidth\" [style.maxWidth]=\"btnMaxWidth\"\n (blur)=\"onBlur()\">\n <label *ngIf=\"inputLabel\" [for]=\"inputLabel\" class=\"ms-dropdown-input-label\">{{ inputLabel }} <span *ngIf=\"required\" class=\"ms-required\">*</span></label>\n <div class=\"ms-input-tags-field\" (click)=\"onTriggerClick(); $event.stopPropagation()\">\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 <span class=\"ms-tag ms-more-btn\"\n *ngIf=\"hiddenTagsCount() > 0\"\n (click)=\"toggleHiddenTags(); $event.stopPropagation()\">\n +{{ hiddenTagsCount() }} more\n </span>\n <div class=\"ms-hidden-tags-dropdown\"\n *ngIf=\"isHiddenTagsOpen\"\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 <span *ngIf=\"selectedItems.length == 0\" class=\"ms-input-placeholder\">{{ inputPlaceholder || text }}</span>\n </div>\n </div> --> <!-- Button Trigger (Default) -->\n <!-- <ms-button class=\"ms-dropdown-trigger ms-d-flex ms-align-items-center ms-justify-content-center ms-p-2\"\n [ngClass]=\"['ms-rounded-' + radiussize, variant ? 'ms-btn ms-btn-' + variant : '', 'ms-btn-' + size, iconOnly ? 'ms-icon-btn' : '']\"\n [disabled]=\"isDisabled\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"ariaLabel\" [style.width]=\"btnWidth\" \n [style.minWidth]=\"btnMinWidth\" [style.maxWidth]=\"btnMaxWidth\" *ngIf=\"!useInputField && multiSelectDisplay != 'tags'\">\n \n <ng-container *ngIf=\"icon && iconPosition === 'prefix'\">\n <span [inlineSVG]=\"icon\" class=\"ms-dropdown-icon\"></span>\n </ng-container>\n\n <span class=\"selectionClass\" *ngIf=\"!iconOnly\">\n {{ selectedItem || text }}\n </span>\n\n <ng-container *ngIf=\"icon && iconPosition === 'suffix'\">\n <span [inlineSVG]=\"icon\" class=\"ms-dropdown-icon ms-ml-2\"></span>\n </ng-container>\n\n <span *ngIf=\"icon\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\" class=\"ms-ml-2\"></span>\n </ms-button> -->\n </div>\n\n\n <div *ngIf=\"isOpen\" class=\"ms-dropdown-menu\" [ngClass]=\"dropdownMenuClass\"\n [style.maxHeight]=\"maxHeight\"\n [ngStyle]=\"{'overflowY': 'auto', 'overflowX': 'hidden', 'width': dropdownMenuWidth}\"\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 </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 <!-- \u2705 MULTI-SELECT CHECKBOX -->\n <input *ngIf=\"allowMultiple && !item.divider\"\n type=\"checkbox\"\n class=\"ms-me-2\"\n [checked]=\"item.selected\"/>\n <!-- <span *ngIf=\"item.icon\">\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + item.icon\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\" />\n </span> -->\n\n <!-- COUNTRY FLAG -->\n <img *ngIf=\"item.icon && showFlagImage\"\n [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/flags/' + (item.countryCode | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n alt=\"{{ item.label }}\" />\n\n <!-- COUNTRY NAME -->\n <span class=\"ms-country-label\">\n {{ item.label }}\n </span>\n\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-dropdown-input-wrapper{width:100%;display:flex;flex-direction:column;gap:6px}.ms-dropdown-input-wrapper.ms-input-error .ms-dropdown-input-field{border-color:#dc2626}.ms-dropdown-input-wrapper.ms-input-error .ms-dropdown-input-field:focus{border-color:#dc2626;box-shadow:0 0 0 3px #dc26261a}.ms-dropdown-input-wrapper.ms-input-error .ms-input-tags-field{border-color:#dc2626}.ms-dropdown-input-wrapper.ms-input-error .ms-input-tags-field:hover{box-shadow:0 0 0 2px #dc26261a}.ms-dropdown-input-wrapper.ms-input-error .ms-dropdown-input-label{color:#dc2626}.ms-dropdown-input-wrapper.ms-input-warning .ms-dropdown-input-field{border-color:#f59e0b}.ms-dropdown-input-wrapper.ms-input-warning .ms-dropdown-input-field:focus{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b1a}.ms-dropdown-input-wrapper.ms-input-warning .ms-input-tags-field{border-color:#f59e0b}.ms-dropdown-input-wrapper.ms-input-warning .ms-input-tags-field:hover{box-shadow:0 0 0 2px #f59e0b1a}.ms-dropdown-input-wrapper.ms-input-warning .ms-dropdown-input-label{color:#f59e0b}.ms-dropdown-input-wrapper.ms-input-focus .ms-dropdown-input-field{border-color:#3b82f6}.ms-dropdown-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{display:flex;align-items:center;justify-content:center;padding-right:12px;flex-shrink:0;color:#6b7280}.ms-tags-wrapper-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-dropdown-input-field{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-dropdown-input-field.ms-has-prefix-icon{padding-left:6px}.ms-dropdown-input-field.ms-has-suffix-icon{padding-right:0}.ms-dropdown-input-field:hover:not(:disabled){border-color:#3b82f6}.ms-dropdown-input-field:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-dropdown-input-field:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-dropdown-input-field::placeholder{color:#9ca3af}.ms-dropdown-input-tags .ms-input-tags-field{width:100%;min-height:40px;padding:8px 12px;border:1px solid #d1d5db;border-radius:4px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;background-color:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s;position:relative}.ms-dropdown-input-tags .ms-input-tags-field:hover{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.ms-dropdown-input-tags .ms-input-tags-field:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-dropdown-input-tags .ms-input-placeholder{color:#9ca3af;font-size:14px}.ms-dropdown-input-tags .ms-hidden-tags-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #d1d5db;border-radius:4px;padding:8px;margin-top:4px;display:flex;flex-wrap:wrap;gap:6px;z-index:10;box-shadow:0 2px 8px #0000001a}.ms-dropdown-menu{position:absolute;top:100%;left:0;right:0;z-index:1000;border-radius:8px;border-top:1px solid #E0E0E0;background-color:#fff;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0}.ms-dropdown-item{width:100%;text-align:left;padding:12px;background:none;border:none;cursor:pointer;transition:background-color .2s}.ms-dropdown-item:hover{background-color:#f5f5f5}.ms-dropdown-item.ms-selected{background:#0084ff1a}.ms-dropdown-search{width:-webkit-fill-available;padding:12px;margin:12px;border:1px solid #d1d5db;border-radius:4px}.ms-dropdown-search-container{position:sticky;top:0;background-color:#fff}.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}.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-placeholder{color:#9ca3af}.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;background:#fff;border:1px solid #dcdcdc;border-radius:4px;padding:4px;margin-top:4px;z-index:1000;display:flex;flex-wrap:wrap;gap:4px;height:60px;max-height:120px;overflow-y:auto}.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}:-moz-placeholder{color:#6a6b6d;opacity:1}.ms-hover{border:1px solid #0084FF;box-shadow:0 0 0 1px #b7dcff}.ms-dropdown-input-suffix-icon{position:absolute;right:0}.ms-input-wrapper{position:relative;display:flex;align-items:center}.ms-dropdown-input-prefix-icon,.ms-tags-wrapper-suffix-icon{position:absolute;right:5px}\n"] }]
|
|
386
386
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { text: [{
|
|
387
387
|
type: Input
|
|
388
388
|
}], isDisabled: [{
|