lib-portal-angular 0.0.53 → 0.0.55

package/fesm2022/lib-portal-angular.mjs

@@ -78,11 +78,11 @@ class CustomSwitchComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomSwitchComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomSwitchComponent, selector: "argenta-custom-switch", inputs: { checked: "checked", label: "label", permissions: "permissions" }, outputs: { switchChange: "switchChange" }, ngImport: i0, template: "<ng-container *ngIf=\"hasPermission()\">\n  <div class=\"form-check form-switch\">\n    <input \n      class=\"form-check-input\" \n      type=\"checkbox\" \n      [checked]=\"checked\" \n      (change)=\"toggleSwitch()\" \n      id=\"flexSwitchCheckDefault\" \n    />\n    <label class=\"form-check-label\" for=\"flexSwitchCheckDefault\">\n      {{ label }}\n    </label>\n  </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";.form-check{display:flex;align-items:center}.form-check-input{width:50px;height:24px;margin-right:10px;cursor:pointer}.form-check-input:checked{background-color:#00444c;border-color:#00444c}.form-check-input:not(:checked){border-color:#3ec9d6;box-shadow:0 0 5px #e5e5e5}.form-check-label{color:#00444c;font-family:Inter,sans-serif;font-size:16px;font-weight:600;height:24px;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomSwitchComponent, selector: "argenta-custom-switch", inputs: { checked: "checked", label: "label", permissions: "permissions" }, outputs: { switchChange: "switchChange" }, ngImport: i0, template: "<ng-container *ngIf=\"hasPermission()\">\n  <div class=\"form-check form-switch\">\n    <input \n      class=\"form-check-input\" \n      type=\"checkbox\" \n      [checked]=\"checked\" \n      (change)=\"toggleSwitch()\" \n      id=\"flexSwitchCheckDefault\" \n    />\n    <label class=\"form-check-label\" for=\"flexSwitchCheckDefault\">\n      {{ label }}\n    </label>\n  </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";.form-check{display:flex;align-items:center}.form-check-input{width:60px;height:34px;margin-right:10px;cursor:pointer;position:relative;appearance:none;background-color:#e5e5e5;border:2px solid #00444C;border-radius:34px;outline:none;transition:background-color .3s,border-color .3s}.form-check-input:focus{outline:none;box-shadow:none}.form-check-input:checked{background-color:#00444c;border-color:#00444c}.form-check-input:before{content:\"\";position:absolute;width:26px;height:26px;background-color:#00444c;border-radius:50%;top:3px;left:3px;transition:transform .3s,background-color .3s}.form-check-input:checked:before{transform:translate(26px);background-color:#fff}.form-check-label{color:#00444c;font-family:Inter,sans-serif;font-size:16px;font-weight:600;height:24px;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'argenta-custom-switch', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"hasPermission()\">\n  <div class=\"form-check form-switch\">\n    <input \n      class=\"form-check-input\" \n      type=\"checkbox\" \n      [checked]=\"checked\" \n      (change)=\"toggleSwitch()\" \n      id=\"flexSwitchCheckDefault\" \n    />\n    <label class=\"form-check-label\" for=\"flexSwitchCheckDefault\">\n      {{ label }}\n    </label>\n  </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";.form-check{display:flex;align-items:center}.form-check-input{width:50px;height:24px;margin-right:10px;cursor:pointer}.form-check-input:checked{background-color:#00444c;border-color:#00444c}.form-check-input:not(:checked){border-color:#3ec9d6;box-shadow:0 0 5px #e5e5e5}.form-check-label{color:#00444c;font-family:Inter,sans-serif;font-size:16px;font-weight:600;height:24px;line-height:24px}\n"] }]
+            args: [{ selector: 'argenta-custom-switch', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"hasPermission()\">\n  <div class=\"form-check form-switch\">\n    <input \n      class=\"form-check-input\" \n      type=\"checkbox\" \n      [checked]=\"checked\" \n      (change)=\"toggleSwitch()\" \n      id=\"flexSwitchCheckDefault\" \n    />\n    <label class=\"form-check-label\" for=\"flexSwitchCheckDefault\">\n      {{ label }}\n    </label>\n  </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";.form-check{display:flex;align-items:center}.form-check-input{width:60px;height:34px;margin-right:10px;cursor:pointer;position:relative;appearance:none;background-color:#e5e5e5;border:2px solid #00444C;border-radius:34px;outline:none;transition:background-color .3s,border-color .3s}.form-check-input:focus{outline:none;box-shadow:none}.form-check-input:checked{background-color:#00444c;border-color:#00444c}.form-check-input:before{content:\"\";position:absolute;width:26px;height:26px;background-color:#00444c;border-radius:50%;top:3px;left:3px;transition:transform .3s,background-color .3s}.form-check-input:checked:before{transform:translate(26px);background-color:#fff}.form-check-label{color:#00444c;font-family:Inter,sans-serif;font-size:16px;font-weight:600;height:24px;line-height:24px}\n"] }]
         }], ctorParameters: function () { return [{ type: AuthService }]; }, propDecorators: { checked: [{
                 type: Input
             }], label: [{
@@ -1106,19 +1106,19 @@ class MultiSelectComponent {
         this.label = 'Multi Select';
         this.data = []; // Accepts an array of generic objects
         this.placeholder = 'Select items';
-        this.selected = []; // The selected variable should be an array
         this.id = 'multiSelectId';
         this.bindLabel = ''; // Generic dynamic label
         this.bindValue = ''; // Generic dynamic value
         this.closeOnSelect = false; // New property to control dropdown close behavior
         this.searchUrl = ''; // URL for backend search
+        this.multiple = true; // New property to control single or multiple selection
+        this.searchParams = {}; // Parâmetros de busca dinâmicos
         this.keyupEvent = new EventEmitter();
-        this.originalData = []; // Store the original list
+        this.backupData = []; // Backup of the initial data
         this.allItems = []; // Store the combined list
         this.items = of([]); // Initialization of the property
         this.filteredItems = of([]); // Filtered items
         this.searchTerms = new Subject(); // For search debounce
-        this.backendItems = []; // Items found from backend
         this.onChangeCallback = () => { };
         this.onTouchedCallback = () => { };
         this.isCourseEntered = false;
@@ -1127,11 +1127,61 @@ class MultiSelectComponent {
         };
     }
     ngOnInit() {
-        this.originalData = [...this.data]; // Preserve the original data
-        this.allItems = [...this.data]; // Initialize allItems with the original data
+        this.backupData = [...this.data]; // Backup initial data
+        this.allItems = [...this.data]; // Initialize allItems with the initial data
         this.items = of(this.allItems);
-        this.filteredItems = this.searchTerms.pipe(debounceTime(700), startWith(''), // Start with an empty search to load the original list
-        switchMap(term => this.search(term)));
+        this.fetchInitialData().subscribe(data => {
+            this.updateData(data);
+            this.filteredItems = this.searchTerms.pipe(debounceTime(700), startWith(''), // Start with an empty search to load the original list
+            switchMap(term => this.search(term)));
+            // Adicionar itens selecionados à lista após buscar dados iniciais
+            this.addSelectedItemsToData();
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['selected'] && !changes['selected'].isFirstChange()) {
+            this.addSelectedItemsToData();
+        }
+    }
+    fetchInitialData() {
+        return this.http.get(this.searchUrl).pipe(map((response) => {
+            if (response && response.length > 0) {
+                return response.map((item) => ({
+                    [this.bindValue]: item[this.bindValue],
+                    [this.bindLabel]: item[this.bindLabel]
+                }));
+            }
+            return [];
+        }), catchError((error) => {
+            console.error('Error fetching initial data from backend:', error);
+            return of([]);
+        }));
+    }
+    updateData(newData) {
+        newData.forEach((item) => {
+            const existsInList = this.allItems.some(listItem => this.compareFn(listItem, item));
+            if (!existsInList) {
+                this.allItems.push(item);
+            }
+        });
+        this.items = of(this.allItems);
+    }
+    addSelectedItemsToData() {
+        if (this.selected) {
+            const selectedItems = this.multiple ? this.selected : [this.selected];
+            selectedItems.forEach((item) => {
+                const existsInList = this.allItems.some(listItem => this.compareFn(listItem, item));
+                if (!existsInList) {
+                    const newItem = {
+                        [this.bindValue]: item[this.bindValue] || item,
+                        [this.bindLabel]: item[this.bindLabel] || item
+                    };
+                    this.data.push(newItem);
+                    this.allItems.push(newItem);
+                }
+            });
+            this.items = of(this.allItems);
+        }
     }
     onFocus() {
         this.isCourseEntered = true;
@@ -1143,25 +1193,25 @@ class MultiSelectComponent {
         this.keyupEvent.emit(event);
     }
     onSelectedChange(event) {
-        const newlySelectedItems = event.filter((item) => !this.selected.includes(item));
-        this.selected = event;
-        // Check if any newly selected item is from backendItems
-        const addedFromBackend = this.backendItems.filter((item) => newlySelectedItems.includes(item));
-        if (addedFromBackend.length > 0) {
-            // Transform the backend items to match the format expected by the component
-            const transformedItems = addedFromBackend.map((item) => ({
-                [this.bindValue]: item[this.bindValue],
-                [this.bindLabel]: item[this.bindLabel]
-            }));
-            // Add backend items to the allItems list and update the observable
-            this.originalData = [...this.originalData, ...transformedItems];
-            this.allItems = [...this.originalData];
-            this.items = of(this.allItems); // Update the observable with new data
-            this.backendItems = []; // Clear backend items after processing
-            this.searchTerms.next(''); // Reset the search term to update the list
-            console.log('Added items from backend to the list and reset the dropdown.');
+        const previousSelected = this.selected;
+        if (this.multiple) {
+            this.selected = event;
+        }
+        else {
+            this.selected = event ? event : null;
         }
         this.onChangeCallback(this.selected);
+        // Verificar se um item foi removido
+        if (previousSelected && Array.isArray(previousSelected) && previousSelected.length > event.length) {
+            const removedItems = previousSelected.filter(item => !event.includes(item));
+            removedItems.forEach(item => {
+                const existsInData = this.data.some(dataItem => this.compareFn(dataItem, item));
+                if (!existsInData) {
+                    this.data.push(item);
+                    this.allItems.push(item); // Adicionar de volta aos itens disponíveis
+                }
+            });
+        }
     }
     onInputChange(event) {
         const input = event.target.value;
@@ -1169,41 +1219,52 @@ class MultiSelectComponent {
     }
     search(term) {
         if (!term.trim()) {
-            // If the search term is empty, show the complete list
+            // Se o termo de busca estiver vazio, retorna a lista completa
             return of(this.allItems);
         }
+        // Filtra os itens localmente
         const filtered = this.allItems.filter((item) => item[this.bindLabel].toLowerCase().includes(term.toLowerCase()));
         if (filtered.length > 0) {
             console.log('Items filtered locally.');
             return of(filtered);
         }
         else if (this.searchUrl) {
-            return this.http.get(`${this.searchUrl}?term=${term}`).pipe(map((response) => {
+            // Construir os parâmetros de busca dinamicamente
+            const params = new URLSearchParams(this.searchParams);
+            params.append('term', term);
+            return this.http.get(`${this.searchUrl}?${params.toString()}`).pipe(map((response) => {
                 if (response && response.length > 0) {
-                    // Transform the backend items to match the format expected by the component
+                    // Transforma os itens do backend para o formato esperado pelo componente
                     const transformedItems = response.map((item) => ({
                         [this.bindValue]: item[this.bindValue],
                         [this.bindLabel]: item[this.bindLabel]
                     }));
-                    this.backendItems = transformedItems;
-                    return [...filtered, ...transformedItems];
+                    // Atualiza os dados com os novos itens buscados
+                    this.updateData(transformedItems);
+                    return this.allItems;
                 }
                 else {
                     console.log('No items found in the backend search.');
-                    return filtered;
+                    return this.allItems;
                 }
             }), catchError((error) => {
                 console.error('Error fetching from backend:', error);
-                return of(filtered);
+                return of(this.allItems);
             }));
         }
         else {
             console.log('No search URL provided and no items found locally.');
-            return of(filtered);
+            return of(this.allItems);
         }
     }
     writeValue(value) {
-        this.selected = value || [];
+        if (this.multiple) {
+            this.selected = value || [];
+        }
+        else {
+            this.selected = value || null;
+        }
+        this.addSelectedItemsToData();
     }
     registerOnChange(fn) {
         this.onChangeCallback = fn;
@@ -1232,77 +1293,23 @@ class MultiSelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: AuthService }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectComponent, selector: "argenta-custom-multi-select", inputs: { label: "label", data: "data", placeholder: "placeholder", selected: "selected", id: "id", bindLabel: "bindLabel", bindValue: "bindValue", permissions: "permissions", closeOnSelect: "closeOnSelect", searchUrl: "searchUrl" }, outputs: { keyupEvent: "keyupEvent" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectComponent, selector: "argenta-custom-multi-select", inputs: { label: "label", data: "data", placeholder: "placeholder", selected: "selected", id: "id", bindLabel: "bindLabel", bindValue: "bindValue", permissions: "permissions", closeOnSelect: "closeOnSelect", searchUrl: "searchUrl", multiple: "multiple", searchParams: "searchParams" }, outputs: { keyupEvent: "keyupEvent" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MultiSelectComponent),
                 multi: true
             }
-        ], ngImport: i0, template: `
-    <div *ngIf="hasPermission()" class="form-group">
-      <label [for]="id" class="form-label">{{ label }}</label>
-      <ng-select
-        [class.course-entry]="isCourseEntered"
-        class="ng-select"
-        [items]="filteredItems | async"
-        [multiple]="true"
-        [closeOnSelect]="closeOnSelect"
-        [hideSelected]="true"
-        [bindLabel]="bindLabel"
-        [bindValue]="bindValue"
-        [(ngModel)]="selected"
-        [compareWith]="compareFn"
-        (change)="onSelectedChange($event)"
-        (keyup)="onKeyUp($event)"
-        (input)="onInputChange($event)"
-        [id]="id"
-        [placeholder]="selected && selected.length === 0 ? placeholder : ''"
-        (focus)="onFocus()"
-        (blur)="onBlur()"
-      >
-        <ng-template ng-option-tmp let-item="item">
-          {{ item[bindLabel] }}
-        </ng-template>
-      </ng-select>
-    </div>
-  `, isInline: true, styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem 2rem .5rem .5rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none;background-repeat:no-repeat;background-position:right .5rem center}.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.select-container{position:relative;display:inline-block;width:100%}.select-container lucide-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#5e6366}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"hasPermission()\" class=\"form-group\">\n  <label [for]=\"id\" class=\"form-label\" style=\"margin-top: 1rem;\">{{ label }}</label>\n  <ng-select\n    [class.course-entry]=\"isCourseEntered\"\n    class=\"ng-select custom-ng-select\"\n    [items]=\"filteredItems | async\"\n    [multiple]=\"multiple\"\n    [closeOnSelect]=\"closeOnSelect\"\n    [hideSelected]=\"true\"\n    [bindLabel]=\"bindLabel\"\n    [bindValue]=\"bindValue\"\n    [(ngModel)]=\"selected\"\n    [compareWith]=\"compareFn\"\n    (change)=\"onSelectedChange($event)\"\n    (keyup)=\"onKeyUp($event)\"\n    (input)=\"onInputChange($event)\"\n    [id]=\"id\"\n    [placeholder]=\"selected && (multiple ? selected.length === 0 : !selected) ? placeholder : ''\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\">\n    <ng-template ng-option-tmp let-item=\"item\">\n      {{ item[bindLabel] }}\n    </ng-template>\n  </ng-select>\n</div>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem 2rem .5rem .5rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none;background-repeat:no-repeat;background-position:right .5rem center}.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.select-container{position:relative;display:inline-block;width:100%}.select-container lucide-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#5e6366}.ng-select{display:block;width:100%;font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem}.ng-select .ng-select-container{display:flex;align-items:center;border:1px solid #ccc;border-radius:4px;padding:.5rem;background-color:#fff;color:#333}.ng-select .ng-select-container .ng-value-container{display:flex;align-items:center;flex-grow:1}.ng-select .ng-select-container .ng-clear{display:none}.ng-select .ng-select-container .ng-input{flex-grow:1;border:none;outline:none}.custom-ng-select.ng-select .ng-select-container .ng-input>input{box-sizing:border-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:.5rem!important;cursor:default;width:100%}.ng-select .ng-dropdown-panel{border:1px solid #ccc;border-radius:4px;background-color:#fff;color:#333;box-shadow:0 2px 4px #0000001a}.ng-select .ng-dropdown-panel .ng-option{padding:8px;cursor:pointer}.ng-select .ng-dropdown-panel .ng-option:hover{background-color:#f1f1f1}.ng-select .ng-dropdown-panel .ng-option.selected{background-color:#007bff;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'argenta-custom-multi-select', template: `
-    <div *ngIf="hasPermission()" class="form-group">
-      <label [for]="id" class="form-label">{{ label }}</label>
-      <ng-select
-        [class.course-entry]="isCourseEntered"
-        class="ng-select"
-        [items]="filteredItems | async"
-        [multiple]="true"
-        [closeOnSelect]="closeOnSelect"
-        [hideSelected]="true"
-        [bindLabel]="bindLabel"
-        [bindValue]="bindValue"
-        [(ngModel)]="selected"
-        [compareWith]="compareFn"
-        (change)="onSelectedChange($event)"
-        (keyup)="onKeyUp($event)"
-        (input)="onInputChange($event)"
-        [id]="id"
-        [placeholder]="selected && selected.length === 0 ? placeholder : ''"
-        (focus)="onFocus()"
-        (blur)="onBlur()"
-      >
-        <ng-template ng-option-tmp let-item="item">
-          {{ item[bindLabel] }}
-        </ng-template>
-      </ng-select>
-    </div>
-  `, providers: [
+            args: [{ selector: 'argenta-custom-multi-select', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => MultiSelectComponent),
                             multi: true
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem 2rem .5rem .5rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none;background-repeat:no-repeat;background-position:right .5rem center}.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.select-container{position:relative;display:inline-block;width:100%}.select-container lucide-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#5e6366}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"hasPermission()\" class=\"form-group\">\n  <label [for]=\"id\" class=\"form-label\" style=\"margin-top: 1rem;\">{{ label }}</label>\n  <ng-select\n    [class.course-entry]=\"isCourseEntered\"\n    class=\"ng-select custom-ng-select\"\n    [items]=\"filteredItems | async\"\n    [multiple]=\"multiple\"\n    [closeOnSelect]=\"closeOnSelect\"\n    [hideSelected]=\"true\"\n    [bindLabel]=\"bindLabel\"\n    [bindValue]=\"bindValue\"\n    [(ngModel)]=\"selected\"\n    [compareWith]=\"compareFn\"\n    (change)=\"onSelectedChange($event)\"\n    (keyup)=\"onKeyUp($event)\"\n    (input)=\"onInputChange($event)\"\n    [id]=\"id\"\n    [placeholder]=\"selected && (multiple ? selected.length === 0 : !selected) ? placeholder : ''\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\">\n    <ng-template ng-option-tmp let-item=\"item\">\n      {{ item[bindLabel] }}\n    </ng-template>\n  </ng-select>\n</div>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem 2rem .5rem .5rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none;background-repeat:no-repeat;background-position:right .5rem center}.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.select-container{position:relative;display:inline-block;width:100%}.select-container lucide-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#5e6366}.ng-select{display:block;width:100%;font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem}.ng-select .ng-select-container{display:flex;align-items:center;border:1px solid #ccc;border-radius:4px;padding:.5rem;background-color:#fff;color:#333}.ng-select .ng-select-container .ng-value-container{display:flex;align-items:center;flex-grow:1}.ng-select .ng-select-container .ng-clear{display:none}.ng-select .ng-select-container .ng-input{flex-grow:1;border:none;outline:none}.custom-ng-select.ng-select .ng-select-container .ng-input>input{box-sizing:border-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:.5rem!important;cursor:default;width:100%}.ng-select .ng-dropdown-panel{border:1px solid #ccc;border-radius:4px;background-color:#fff;color:#333;box-shadow:0 2px 4px #0000001a}.ng-select .ng-dropdown-panel .ng-option{padding:8px;cursor:pointer}.ng-select .ng-dropdown-panel .ng-option:hover{background-color:#f1f1f1}.ng-select .ng-dropdown-panel .ng-option.selected{background-color:#007bff;color:#fff}\n"] }]
         }], ctorParameters: function () { return [{ type: AuthService }, { type: i2.HttpClient }]; }, propDecorators: { label: [{
                 type: Input
             }], data: [{
@@ -1323,6 +1330,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], searchUrl: [{
                 type: Input
+            }], multiple: [{
+                type: Input
+            }], searchParams: [{
+                type: Input
             }], keyupEvent: [{
                 type: Output
             }] } });