@magic-xpa/angular-material-core 4.1200.0-dev4120.21 → 4.1200.0-dev4120.212

package/fesm2022/magic-xpa-angular-material-core.mjs

@@ -1,7 +1,9 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, HostListener, Injectable, Component, ViewChild, NgModule } from '@angular/core';
+import { Directive, HostListener, Input, Injectable, Component, ViewChild, forwardRef, NgModule } from '@angular/core';
+import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import * as i3 from '@angular/forms';
+import { FormGroup, FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@magic-xpa/angular';
 import { ComboboxMagicDirective, MagicDirective, TableMagicService, basicMagicProviders, TaskBaseMagicComponent, MagicModule } from '@magic-xpa/angular';
 import { filter } from 'rxjs/operators';
@@ -14,14 +16,21 @@ import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { SelectionModel } from '@angular/cdk/collections';
 import { isNullOrUndefined } from '@magic-xpa/mscorelib';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
+import * as i5 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i6 from '@angular/material/autocomplete';
+import { MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatListModule } from '@angular/material/list';
 import { MatTabsModule } from '@angular/material/tabs';
-import { MatSelectModule } from '@angular/material/select';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
 
+/**
+ * Directive for material-design checkboxes not on material-design table
+ */
 class MatCheckboxDirective {
     magicDirective;
     matCheckbox;
@@ -30,12 +39,18 @@ class MatCheckboxDirective {
     threeState = false;
     subscribeRefreshDom = null;
     indeterminate = false;
+    /**
+     * @ignore
+     */
     constructor(magicDirective, matCheckbox, task, element) {
         this.magicDirective = magicDirective;
         this.matCheckbox = matCheckbox;
         this.task = task;
         this.element = element;
     }
+    /**
+     * Handles the Checkbox 'change' event - pass it to the Magic engine
+     */
     onChange($event) {
         if (this.threeState) {
             this.handleThreeState();
@@ -89,16 +104,20 @@ class MatCheckboxDirective {
             this.matCheckbox.checked = true;
             value = 'checked';
         }
+        // @ts-ignore
         this.magicDirective.task.onCheckChanged(value, this.magicDirective.id, +this.magicDirective.rowId);
     }
+    /**
+     * Cleanup
+     */
     ngOnDestroy() {
         if (this.subscribeRefreshDom !== null)
             this.subscribeRefreshDom.unsubscribe();
     }
-    static ɵfac = function MatCheckboxDirective_Factory(t) { return new (t || MatCheckboxDirective)(i0.ɵɵdirectiveInject(i1.MagicDirective), i0.ɵɵdirectiveInject(i2.MatCheckbox), i0.ɵɵdirectiveInject(i1.TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-    static ɵdir = i0.ɵɵdefineDirective({ type: MatCheckboxDirective, selectors: [["mat-checkbox", "magic", "", 3, "noFormControl", ""]], hostBindings: function MatCheckboxDirective_HostBindings(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static ɵfac = function MatCheckboxDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MatCheckboxDirective)(i0.ɵɵdirectiveInject(i1.MagicDirective), i0.ɵɵdirectiveInject(i2.MatCheckbox), i0.ɵɵdirectiveInject(i1.TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+    /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: MatCheckboxDirective, selectors: [["mat-checkbox", "magic", "", 3, "noFormControl", ""]], hostBindings: function MatCheckboxDirective_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("change", function MatCheckboxDirective_change_HostBindingHandler($event) { return ctx.onChange($event); });
-        } }, inputs: { threeState: "threeState" } });
+        } }, inputs: { threeState: "threeState" }, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MatCheckboxDirective, [{
         type: Directive,
@@ -106,6 +125,7 @@ class MatCheckboxDirective {
                 selector: `
     mat-checkbox[magic]:not([noFormControl])
     `,
+                standalone: false
             }]
     }], () => [{ type: i1.MagicDirective }, { type: i2.MatCheckbox }, { type: i1.TaskMagicService }, { type: i0.ElementRef }], { threeState: [{
             type: Input
@@ -114,24 +134,35 @@ class MatCheckboxDirective {
             args: ['change', ['$event']]
         }] }); })();
 
+/**
+ * Directive for material-design comboboxes not on material-design table
+ */
 class MatComboboxDirective extends ComboboxMagicDirective {
+    /**
+     * Handles the "selectionChange" event - pass it to the "change" event handler
+     * @param $event
+     */
     onChange($event) {
         super.onChange($event);
     }
     onOpenedChanged($event) {
         MagicDirective.opened = $event;
     }
+    /**
+     * For mat-select do nothing
+     */
     onComboboxItemsListChanged() {
     }
-    static ɵfac = (() => { let ɵMatComboboxDirective_BaseFactory; return function MatComboboxDirective_Factory(t) { return (ɵMatComboboxDirective_BaseFactory || (ɵMatComboboxDirective_BaseFactory = i0.ɵɵgetInheritedFactory(MatComboboxDirective)))(t || MatComboboxDirective); }; })();
-    static ɵdir = i0.ɵɵdefineDirective({ type: MatComboboxDirective, selectors: [["mat-select", "magic", ""]], hostBindings: function MatComboboxDirective_HostBindings(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static ɵfac = /** @pureOrBreakMyCode */ (() => { let ɵMatComboboxDirective_BaseFactory; return function MatComboboxDirective_Factory(__ngFactoryType__) { return (ɵMatComboboxDirective_BaseFactory || (ɵMatComboboxDirective_BaseFactory = i0.ɵɵgetInheritedFactory(MatComboboxDirective)))(__ngFactoryType__ || MatComboboxDirective); }; })();
+    /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: MatComboboxDirective, selectors: [["mat-select", "magic", ""]], hostBindings: function MatComboboxDirective_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("selectionChange", function MatComboboxDirective_selectionChange_HostBindingHandler($event) { return ctx.onChange($event); })("openedChange", function MatComboboxDirective_openedChange_HostBindingHandler($event) { return ctx.onOpenedChanged($event); });
-        } }, features: [i0.ɵɵInheritDefinitionFeature] });
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MatComboboxDirective, [{
         type: Directive,
         args: [{
                 selector: `mat-select[magic]`,
+                standalone: false
             }]
     }], null, { onChange: [{
             type: HostListener,
@@ -141,63 +172,126 @@ class MatComboboxDirective extends ComboboxMagicDirective {
             args: ['openedChange', ['$event']]
         }] }); })();
 
+/**
+ * Extends the Magic table service to supply functionality for Material Design tables
+ */
 class MgMatTableService extends TableMagicService {
     componentList;
     task;
+    /**
+     * Table data source
+     */
     dataSource;
+    /**
+     * @ignore
+     */
     get DataSource() {
         return this.dataSource;
     }
+    /**
+     * @ignore
+     */
     set DataSource(dataSource) {
         this.dataSource = dataSource;
     }
+    /**
+     * Provides selection options for the table
+     */
     selection;
+    /**
+     * @ignore
+     */
     get Selection() {
         return this.selection;
     }
+    /**
+     * @ignore
+     */
     set Selection(selection) {
         this.selection = selection;
     }
+    /**
+     * Paginator to enable changing pages in the table
+     */
     paginator;
+    /**
+     * @ignore
+     */
     get Paginator() {
         return this.paginator;
     }
+    /**
+     * @ignore
+     */
     set Paginator(paginator) {
         this.paginator = paginator;
     }
+    /**
+     * @ignore
+     */
     constructor(componentList, task) {
         super(componentList, task);
         this.componentList = componentList;
         this.task = task;
     }
+    /**
+     * Connects the service to the elements of the table component
+     * @param dataSource Table data source
+     * @param paginator Table paginator
+     * @param selection table SelectionModel
+     */
     connect(dataSource, paginator, selection) {
         this.dataSource = dataSource;
         this.paginator = paginator;
         this.selection = selection;
     }
+    /**
+     * @ignore
+     */
     refreshDataSource() {
         if (!isNullOrUndefined(this.paginator))
             this.dataSource.paginator = this.paginator;
         this.dataSource.data = (this.task.mgAccessorService.isDataviewEmpty() ? [] : this.task.Records.list);
     }
+    /**
+     * returns the page size of the table
+     * @returns
+     */
     getPageSize() {
         if (isNullOrUndefined(this.paginator))
             return 10;
         return this.paginator.pageSize;
     }
+    /**
+     * Selects a table row
+     * @param guiRowid Id of row to be selected
+     */
     selectRow(guiRowid) {
         super.selectRow(guiRowid);
         this.selection.select(this.task.Records.list[guiRowid]);
         this.refreshDataSource();
     }
+    /**
+     * Displays the requested table page
+     * @param pageId Id of page to be selected
+     */
     selectPage(pageId) {
         if (!isNullOrUndefined(this.paginator))
             this.paginator.pageIndex = pageId;
         this.refreshDataSource();
     }
+    /**
+     * Returns the currently seleted row
+     * @returns
+     */
     selectedRow() {
         return this.selection.selected[0];
     }
+    /**
+     * Handle the paginator's "page" event
+     * @param e The event received from the UI
+     * @param changeSelectedRow The flag true or false to indicate change the row
+     */
     mgOnPaginateChange(e, changeSelectedRow) {
         if (this.task.oldPageSize != e.pageSize) {
             this.handleResize(e.pageIndex, e.previousPageIndex, e.pageSize);
@@ -220,16 +314,32 @@ class MgMatTableService extends TableMagicService {
                 this.getRowsIfNeeded(e.pageIndex, e.previousPageIndex, e.pageSize);
         }
     }
+    /**
+     * Handle resize and set table top index.
+     * @param pageIndex : New page index.
+     * @param prevPageIndex : Prev page index
+     * @param pageSize : PageSize
+     */
     handleResize(pageIndex, prevPageIndex, pageSize) {
         let requiredGuiRowId = pageIndex * pageSize;
         this.task.resize(pageSize, requiredGuiRowId);
     }
+    /**
+     * Execute getRows to fetch required chunk of records.
+     * @param pageIndex : New page index.
+     * @param prevPageIndex : Prev page index
+     * @param pageSize : PageSize
+     */
     getRowsIfNeeded(pageIndex, prevPageIndex, pageSize) {
         let guiEvent = getGuiEventObj("getRows", "", 0);
         guiEvent.Line = pageIndex * pageSize;
         this.task.insertEvent(guiEvent);
         this.setTableTopIndex(this.task.getDvRowId(pageSize * pageIndex));
     }
+    /**
+     * Handles the "matSortChange" event
+     * @param e The event received from the UI
+     */
     sortData(e) {
         let direction = 0;
         if (e.direction === 'asc')
@@ -239,8 +349,13 @@ class MgMatTableService extends TableMagicService {
         let guiEvent = getGuiEventObj("columnSort", e.active, direction);
         this.task.insertEvent(guiEvent);
     }
+    /**
+     * Change the number of lines in a table
+     * @param  size New number of lines in table
+     */
     updateTableSize(size) {
-        if (size === 0) {
+        if (size === 0) // never remove row 0 for now
+         {
             size = 1;
             this.task.Records.clearFirstTableRecord(this.task.template);
         }
@@ -250,41 +365,76 @@ class MgMatTableService extends TableMagicService {
         this.task.Records.updateSize(size);
         this.task.setIncludesFirst(false);
     }
+    /**
+     * Handle the selection of row and if needed move to respective page.
+     * @param  guiRowId New number of lines in table
+     */
     selectPageForGuiRowId(guiRowId) {
         let pageToBeSelected = 0;
         let prevSelectedRow = this.selectedRow();
         pageToBeSelected = Math.floor(guiRowId / this.getPageSize());
+        // Explicitly handle selection of page when it's not raised by using pagination
         if ((isNullOrUndefined(prevSelectedRow) || (!isNullOrUndefined(this.paginator) && pageToBeSelected != this.paginator.pageIndex)))
             this.selectPage(pageToBeSelected);
     }
+    /**
+     * @ignore
+     */
     setTableTopIndex(value) {
         this.task.Records.setGuiTopIndex(value);
         if (value >= 0)
             this.selectPageForGuiRowId(this.task.getGuiRowId(value, true));
     }
+    /**
+     * @ignore
+     */
     getTableTopIndex() {
         return this.task.Records.getGuiTopIndex();
     }
-    static ɵfac = function MgMatTableService_Factory(t) { return new (t || MgMatTableService)(i0.ɵɵinject(i1.ComponentListMagicService), i0.ɵɵinject(i1.TaskMagicService)); };
-    static ɵprov = i0.ɵɵdefineInjectable({ token: MgMatTableService, factory: MgMatTableService.ɵfac });
+    /** @nocollapse */ static ɵfac = function MgMatTableService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MgMatTableService)(i0.ɵɵinject(i1.ComponentListMagicService), i0.ɵɵinject(i1.TaskMagicService)); };
+    /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: MgMatTableService, factory: MgMatTableService.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MgMatTableService, [{
         type: Injectable
     }], () => [{ type: i1.ComponentListMagicService }, { type: i1.TaskMagicService }], null); })();
 
+/**
+ * @ignore
+ */
 const matMagicProviders = [
-    ...basicMagicProviders,
+    ...basicMagicProviders, // - created error Exported variable 'matMagicProviders' has or is using name 'MagicServices' from external module "D:/magicxpaproject/_Trunk/Sources/Webclient/dist/angular/src/services/magic.services" but cannot be named.
     { provide: TableMagicService, useClass: MgMatTableService }
 ];
 
+/**
+ * This component is the base component for forms which has a material-design table (grid)
+ */
 class BaseMatTableMagicComponent extends TaskBaseMagicComponent {
     ref;
     magicService;
+    /**
+     * Paginator to enable changing pages in the table
+     */
     paginator;
+    /**
+     * Provides the table sort capabilities
+     */
     sort;
+    /**
+     * List of table columns to be displayed
+     */
     displayedColumns;
+    /**
+     * Table data source
+     */
     dataSource;
+    /**
+     * Provides selection options for the table
+     */
     selection;
+    /**
+     * @ignore
+     */
     constructor(ref, magicService) {
         super(ref, magicService);
         this.ref = ref;
@@ -293,10 +443,16 @@ class BaseMatTableMagicComponent extends TaskBaseMagicComponent {
         this.dataSource = new MatTableDataSource(this.task.Records.list);
         this.selection = new SelectionModel(false, []);
     }
+    /**
+     * Initializer
+     */
     ngOnInit() {
         super.ngOnInit();
         this.magicService.tableService.connect(this.dataSource, this.paginator, this.selection);
     }
+    /**
+     * AfterContentChecked implementation
+     */
     ngAfterContentChecked() {
         if (!isNullOrUndefined(this.paginator) && !isNullOrUndefined(this.paginator.pageSize) &&
             this.paginator.pageSize != this.task.oldPageSize) {
@@ -304,21 +460,22 @@ class BaseMatTableMagicComponent extends TaskBaseMagicComponent {
             this.task.oldPageSize = this.paginator.pageSize;
         }
     }
-    static ɵfac = function BaseMatTableMagicComponent_Factory(t) { return new (t || BaseMatTableMagicComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.MagicServices)); };
-    static ɵcmp = i0.ɵɵdefineComponent({ type: BaseMatTableMagicComponent, selectors: [["ng-component"]], viewQuery: function BaseMatTableMagicComponent_Query(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static ɵfac = function BaseMatTableMagicComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BaseMatTableMagicComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.MagicServices)); };
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: BaseMatTableMagicComponent, selectors: [["ng-component"]], viewQuery: function BaseMatTableMagicComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(MatPaginator, 7);
             i0.ɵɵviewQuery(MatSort, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.paginator = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.sort = _t.first);
-        } }, features: [i0.ɵɵProvidersFeature(matMagicProviders), i0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function BaseMatTableMagicComponent_Template(rf, ctx) { }, encapsulation: 2 });
+        } }, standalone: false, features: [i0.ɵɵProvidersFeature(matMagicProviders), i0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function BaseMatTableMagicComponent_Template(rf, ctx) { }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseMatTableMagicComponent, [{
         type: Component,
         args: [{
                 providers: matMagicProviders,
-                template: ''
+                template: '',
+                standalone: false
             }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.MagicServices }], { paginator: [{
             type: ViewChild,
@@ -327,31 +484,205 @@ class BaseMatTableMagicComponent extends TaskBaseMagicComponent {
             type: ViewChild,
             args: [MatSort, { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BaseMatTableMagicComponent, { className: "BaseMatTableMagicComponent", filePath: "src\\components\\base-mat-table-magic.component.ts", lineNumber: 19 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BaseMatTableMagicComponent, { className: "BaseMatTableMagicComponent", filePath: "src/components/base-mat-table-magic.component.ts", lineNumber: 19 }); })();
 
+const _c0 = ["comboinput"];
+function EditableComboComponent_mat_option_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-option", 6);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const o_r2 = ctx.$implicit;
+    i0.ɵɵproperty("value", o_r2.displayValue);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", o_r2.displayValue, " ");
+} }
+class EditableComboComponent {
+    magicServices;
+    /**
+     * @ignore
+     */
+    controlId = "";
+    rowId = "0";
+    combo_input;
+    /**
+     * @ignore
+     */
+    set magic(val) {
+        this.controlId = val;
+    }
+    ;
+    set rowId1(val) {
+        this.rowId = val;
+    }
+    ;
+    placeholder = '';
+    formGroup = new FormGroup({});
+    // These are the functions required by ControlValueAccessor
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(magicServices) {
+        this.magicServices = magicServices;
+    }
+    /**
+     * Returns the Magic accessor service
+     * @returns
+     */
+    get mg() {
+        return this.magicServices.mgAccessorService;
+    }
+    /**
+     * Returns the Magic task service
+     * @returns
+     */
+    get task() {
+        return this.magicServices.task;
+    }
+    ngOnInit() {
+        this.formGroup.addControl("combo_fc", new FormControl());
+    }
+    // Write value method will be called when FormControl value is updated
+    writeValue(value) {
+        if (typeof value == 'number' && value >= 0) {
+            const options = this.mg.getItemListValues(this.controlId, this.rowId);
+            const matchingOption = options.find(option => option.index === value);
+            if (matchingOption != undefined)
+                this.formGroup.get("combo_fc")?.setValue(matchingOption.displayValue);
+            else
+                this.formGroup.get("combo_fc")?.setValue("");
+        }
+        else
+            this.formGroup.get("combo_fc")?.setValue("");
+    }
+    // Register onChange function to be triggered when the input value changes
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    // Register onTouched function to be triggered when the input is touched
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // Optional: Handle the touch event when the input is blurred
+    onBlur() {
+        this.onTouched();
+    }
+    onOptionSelected(event) {
+        const selectedVal = event.option.value;
+        const options = this.mg.getItemListValues(this.controlId, this.rowId);
+        const matchingOption = options.find(option => option.displayValue === selectedVal);
+        let selectedIndex = -1;
+        if (matchingOption != undefined)
+            selectedIndex = matchingOption.index;
+        this.onChange(selectedIndex);
+        let guiEvent = getGuiEventObj('selectionchanged', this.controlId, +this.rowId);
+        guiEvent.Value = selectedIndex.toString();
+        this.task.insertEvent(guiEvent);
+    }
+    onOpened() {
+        MagicDirective.noOfAutoCompleteBoxesOpened++;
+    }
+    onClosed() {
+        this.writeValue(this.mg.getValue(this.controlId, this.rowId));
+        MagicDirective.noOfAutoCompleteBoxesOpened--;
+    }
+    getFilteredListForChoiceControl() {
+        const elem = this.combo_input;
+        let value = elem ? elem.nativeElement.value : "";
+        let items = this.mg.getItemListValues(this.controlId, this.rowId);
+        if (value !== null && value !== "" && items instanceof Array) {
+            value = value.toLowerCase();
+            return items.filter(option => option.displayValue.toLowerCase().includes(value));
+        }
+        else
+            return items;
+    }
+    /** @nocollapse */ static ɵfac = function EditableComboComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EditableComboComponent)(i0.ɵɵdirectiveInject(i1.MagicServices)); };
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: EditableComboComponent, selectors: [["editable-combo"]], viewQuery: function EditableComboComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.combo_input = _t.first);
+        } }, inputs: { magic: "magic", rowId1: [0, "rowId", "rowId1"], placeholder: "placeholder" }, standalone: false, features: [i0.ɵɵProvidersFeature([
+                {
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef((() => EditableComboComponent)),
+                    multi: true
+                }
+            ])], decls: 7, vars: 4, consts: [["comboinput", ""], ["Editable_Combo", "matAutocomplete"], ["novalidate", "", 3, "formGroup"], ["matInput", "", "formControlName", "combo_fc", 3, "blur", "matAutocomplete", "placeholder"], ["requireSelection", "true", "autoActiveFirstOption", "true", 3, "optionSelected", "closed", "opened"], [3, "value", 4, "ngFor", "ngForOf"], [3, "value"]], template: function EditableComboComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 2)(1, "mat-form-field")(2, "input", 3, 0);
+            i0.ɵɵlistener("blur", function EditableComboComponent_Template_input_blur_2_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBlur()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "mat-autocomplete", 4, 1);
+            i0.ɵɵlistener("optionSelected", function EditableComboComponent_Template_mat_autocomplete_optionSelected_4_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onOptionSelected($event)); })("closed", function EditableComboComponent_Template_mat_autocomplete_closed_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onClosed()); })("opened", function EditableComboComponent_Template_mat_autocomplete_opened_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onOpened()); });
+            i0.ɵɵtemplate(6, EditableComboComponent_mat_option_6_Template, 2, 2, "mat-option", 5);
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            const Editable_Combo_r3 = i0.ɵɵreference(5);
+            i0.ɵɵproperty("formGroup", ctx.formGroup);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("matAutocomplete", Editable_Combo_r3)("placeholder", ctx.placeholder);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngForOf", ctx.getFilteredListForChoiceControl());
+        } }, dependencies: [i2$1.NgForOf, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgControlStatusGroup, i4.MatInput, i4.MatFormField, i5.MatOption, i6.MatAutocompleteTrigger, i6.MatAutocomplete, i3.FormGroupDirective, i3.FormControlName], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EditableComboComponent, [{
+        type: Component,
+        args: [{ selector: 'editable-combo', standalone: false, providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef((() => EditableComboComponent)),
+                        multi: true
+                    }
+                ], template: "<div\n  novalidate\n  [formGroup]=\"formGroup\"\n>\n  <mat-form-field>\n  <input\n    #comboinput\n    matInput\n    formControlName=\"combo_fc\"\n    [matAutocomplete]=\"Editable_Combo\"\n    (blur)=\"onBlur()\"\n    [placeholder]=\"placeholder\"\n  >\n<!--  <mat-icon matSuffix>arrow_drop_down</mat-icon>-->\n  <mat-autocomplete\n    #Editable_Combo=\"matAutocomplete\"\n    requireSelection=\"true\"\n    autoActiveFirstOption=\"true\"\n    (optionSelected)=\"onOptionSelected($event)\"\n    (closed)=\"onClosed()\"\n    (opened)=\"onOpened()\"\n  >\n    <mat-option\n      *ngFor=\"let o of getFilteredListForChoiceControl();\"\n      [value]=\"o.displayValue\"\n    >\n      {{o.displayValue}}\n    </mat-option>\n  </mat-autocomplete>\n</mat-form-field>\n</div>\n" }]
+    }], () => [{ type: i1.MagicServices }], { combo_input: [{
+            type: ViewChild,
+            args: ['comboinput']
+        }], magic: [{
+            type: Input,
+            args: ['magic']
+        }], rowId1: [{
+            type: Input,
+            args: ['rowId']
+        }], placeholder: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EditableComboComponent, { className: "EditableComboComponent", filePath: "src/components/editable-combo-component.ts", lineNumber: 25 }); })();
+
+/**
+ * Directive for material-design listboxes not on material-design table
+ */
 class MatListboxDirective {
     magicDirective;
     constructor(magicDirective) {
         this.magicDirective = magicDirective;
     }
+    /**
+     * Handles the "selectionChange" event - pass it to the "change" event handler
+     * @param $event
+     */
     onChange($event) {
         this.magicDirective.task.onListBoxSelectionChanged($event, this.magicDirective.id);
     }
-    static ɵfac = function MatListboxDirective_Factory(t) { return new (t || MatListboxDirective)(i0.ɵɵdirectiveInject(i1.MagicDirective)); };
-    static ɵdir = i0.ɵɵdefineDirective({ type: MatListboxDirective, selectors: [["mat-selection-list", "magic", ""]], hostBindings: function MatListboxDirective_HostBindings(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static ɵfac = function MatListboxDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MatListboxDirective)(i0.ɵɵdirectiveInject(i1.MagicDirective)); };
+    /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: MatListboxDirective, selectors: [["mat-selection-list", "magic", ""]], hostBindings: function MatListboxDirective_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("selectionChange", function MatListboxDirective_selectionChange_HostBindingHandler($event) { return ctx.onChange($event); });
-        } } });
+        } }, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MatListboxDirective, [{
         type: Directive,
         args: [{
                 selector: `mat-selection-list[magic]`,
+                standalone: false
             }]
     }], () => [{ type: i1.MagicDirective }], { onChange: [{
             type: HostListener,
             args: ['selectionChange', ['$event']]
         }] }); })();
 
+/**
+ * Directive for material-design autocomplete not on material-design table
+ */
 class MatMagicAutocompleteDirective {
     onOpenedChanged($event) {
         MagicDirective.noOfAutoCompleteBoxesOpened++;
@@ -359,15 +690,16 @@ class MatMagicAutocompleteDirective {
     onClosedChanged($event) {
         MagicDirective.noOfAutoCompleteBoxesOpened--;
     }
-    static ɵfac = function MatMagicAutocompleteDirective_Factory(t) { return new (t || MatMagicAutocompleteDirective)(); };
-    static ɵdir = i0.ɵɵdefineDirective({ type: MatMagicAutocompleteDirective, selectors: [["mat-autocomplete", "magic", ""]], hostBindings: function MatMagicAutocompleteDirective_HostBindings(rf, ctx) { if (rf & 1) {
+    /** @nocollapse */ static ɵfac = function MatMagicAutocompleteDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MatMagicAutocompleteDirective)(); };
+    /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: MatMagicAutocompleteDirective, selectors: [["mat-autocomplete", "magic", ""]], hostBindings: function MatMagicAutocompleteDirective_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("opened", function MatMagicAutocompleteDirective_opened_HostBindingHandler($event) { return ctx.onOpenedChanged($event); })("closed", function MatMagicAutocompleteDirective_closed_HostBindingHandler($event) { return ctx.onClosedChanged($event); });
-        } } });
+        } }, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MatMagicAutocompleteDirective, [{
         type: Directive,
         args: [{
-                selector: 'mat-autocomplete[magic]'
+                selector: 'mat-autocomplete[magic]',
+                standalone: false
             }]
     }], null, { onOpenedChanged: [{
             type: HostListener,
@@ -377,6 +709,9 @@ class MatMagicAutocompleteDirective {
             args: ['closed', ['$event']]
         }] }); })();
 
+/**
+ * @ignore
+ */
 const materialModules = [
     MatTableModule,
     MatPaginatorModule,
@@ -388,12 +723,28 @@ const materialModules = [
     MatSelectModule,
     MatDatepickerModule,
     MatNativeDateModule,
+    MatAutocompleteTrigger,
+    MatAutocomplete
 ];
+/**
+ * @ignore
+ */
 class MagicAngularMaterialModule {
-    static ɵfac = function MagicAngularMaterialModule_Factory(t) { return new (t || MagicAngularMaterialModule)(); };
-    static ɵmod = i0.ɵɵdefineNgModule({ type: MagicAngularMaterialModule });
-    static ɵinj = i0.ɵɵdefineInjector({ imports: [CommonModule,
-            FormsModule, materialModules, MagicModule] });
+    /** @nocollapse */ static ɵfac = function MagicAngularMaterialModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicAngularMaterialModule)(); };
+    /** @nocollapse */ static ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: MagicAngularMaterialModule });
+    /** @nocollapse */ static ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ imports: [CommonModule,
+            FormsModule, MatTableModule,
+            MatPaginatorModule,
+            MatInputModule,
+            MatButtonModule,
+            MatListModule,
+            MatCheckboxModule,
+            MatTabsModule,
+            MatSelectModule,
+            MatDatepickerModule,
+            MatNativeDateModule,
+            MatAutocomplete, MagicModule,
+            ReactiveFormsModule] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicAngularMaterialModule, [{
         type: NgModule,
@@ -404,19 +755,22 @@ class MagicAngularMaterialModule {
                     MatListboxDirective,
                     MatMagicAutocompleteDirective,
                     BaseMatTableMagicComponent,
+                    EditableComboComponent
                 ],
                 exports: [
                     MatCheckboxDirective,
                     MatComboboxDirective,
                     MatListboxDirective,
                     MatMagicAutocompleteDirective,
-                    BaseMatTableMagicComponent
+                    BaseMatTableMagicComponent,
+                    EditableComboComponent
                 ],
                 imports: [
                     CommonModule,
                     FormsModule,
                     ...materialModules,
-                    MagicModule
+                    MagicModule,
+                    ReactiveFormsModule,
                 ]
             }]
     }], null, null); })();
@@ -424,7 +778,8 @@ class MagicAngularMaterialModule {
         MatComboboxDirective,
         MatListboxDirective,
         MatMagicAutocompleteDirective,
-        BaseMatTableMagicComponent], imports: [CommonModule,
+        BaseMatTableMagicComponent,
+        EditableComboComponent], imports: [CommonModule,
         FormsModule, MatTableModule,
         MatPaginatorModule,
         MatInputModule,
@@ -434,11 +789,23 @@ class MagicAngularMaterialModule {
         MatTabsModule,
         MatSelectModule,
         MatDatepickerModule,
-        MatNativeDateModule, MagicModule], exports: [MatCheckboxDirective,
+        MatNativeDateModule,
+        MatAutocompleteTrigger,
+        MatAutocomplete, MagicModule,
+        ReactiveFormsModule], exports: [MatCheckboxDirective,
         MatComboboxDirective,
         MatListboxDirective,
         MatMagicAutocompleteDirective,
-        BaseMatTableMagicComponent] }); })();
+        BaseMatTableMagicComponent,
+        EditableComboComponent] }); })();
+
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
 
-export { BaseMatTableMagicComponent, MagicAngularMaterialModule, MatCheckboxDirective, MatComboboxDirective, MatListboxDirective, MatMagicAutocompleteDirective, MgMatTableService, matMagicProviders, materialModules };
+export { BaseMatTableMagicComponent, EditableComboComponent, MagicAngularMaterialModule, MatCheckboxDirective, MatComboboxDirective, MatListboxDirective, MatMagicAutocompleteDirective, MgMatTableService, matMagicProviders, materialModules };
 //# sourceMappingURL=magic-xpa-angular-material-core.mjs.map