npm - verben-ng-ui - Versions diffs - 0.8.1 → 0.8.2 - Mend

verben-ng-ui 0.8.1 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/esm2022/lib/components/data-import/data-import.component.mjs CHANGED Viewed

@@ -6,9 +6,10 @@ import * as i2 from "../card/card.component";
 import * as i3 from "../verben-dialogue/verben-dialogue.component";
 import * as i4 from "../data-table/data-table.component";
 import * as i5 from "../data-table/column.directive";
-import * as i6 from "../drop-down/drop-down.component";
-import * as i7 from "@angular/forms";
-import * as i8 from "../svg/svg.component";
+import * as i6 from "../../Verbena-input/verbena-input.component";
+import * as i7 from "../drop-down/drop-down.component";
+import * as i8 from "@angular/forms";
+import * as i9 from "../svg/svg.component";
 export class DataImportComponent {
     previewColumns = input();
     formGroupConfig = input();
@@ -17,6 +18,7 @@ export class DataImportComponent {
     previewData = input();
     exportTemplateEvent = output();
     importEvent = output();
+    importEventData = output();
     previewColumnsList = [];
     forms = new FormArray([]);
     uniqueIdentifiers = signal([]);
@@ -54,6 +56,7 @@ export class DataImportComponent {
     }
     reset() { }
     save() {
+        this.importEventData.emit(this.previewData() || []);
         this.showPreview = true;
     }
     getControlNames() {
@@ -73,10 +76,10 @@ export class DataImportComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataImportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: DataImportComponent, selector: "lib-data-import", inputs: { previewColumns: { classPropertyName: "previewColumns", publicName: "previewColumns", isSignal: true, isRequired: false, transformFunction: null }, formGroupConfig: { classPropertyName: "formGroupConfig", publicName: "formGroupConfig", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, previewData: { classPropertyName: "previewData", publicName: "previewData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportTemplateEvent: "exportTemplateEvent", importEvent: "importEvent" }, ngImport: i0, template: "<verben-card\n  width=\"24rem\"\n  borderRadius=\"1rem\"\n  [border]=\"'1px solid #D4A007'\"\n  bgColor=\"#FFFFFF\"\n  class=\"export-card\"\n>\n  <div card-header class=\"card-header\">\n    <h4 class=\"header-title\">Import</h4>\n    <button\n      class=\"reset-button\"\n      [style.color]=\"'#3479E9'\"\n      [style.background-color]=\"'transparent'\"\n      [style.border]=\"'none'\"\n      [style.cursor]=\"'pointer'\"\n      [style.font-size]=\"'12px'\"\n      (click)=\"reset()\"\n    >\n      Reset\n    </button>\n  </div>\n  <div card-body class=\"card-body\">\n    <div class=\"flex gap-4 justify-between\">\n      <button class=\"export-button\" (click)=\"handleTemplateExport()\">\n        Download Template\n      </button>\n      <button class=\"export-button\" (click)=\"save()\">Upload File</button>\n    </div>\n    <hr class=\"divider\" />\n    <section class=\"section\">\n      <div\n        class=\"drop-area\"\n        (dragover)=\"onDragOver($event)\"\n        (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\"\n      >\n        <p>\n          Drag and drop files here or\n          <label for=\"fileInput\">click to browse</label>\n        </p>\n        <input\n          type=\"file\"\n          id=\"fileInput\"\n          (change)=\"onFileSelected($event)\"\n          style=\"display: none\"\n          accept=\".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\n          multiple\n        />\n      </div>\n      <div *ngIf=\"files.length > 0\">\n        <h3>Uploaded Files:</h3>\n        <ul>\n          <li *ngFor=\"let file of files\">{{ file.name }}</li>\n        </ul>\n      </div>\n    </section>\n  </div>\n  <div card-footer class=\"card-footer\">\n    <button class=\"export-button\" (click)=\"save()\">Import</button>\n  </div>\n</verben-card>\n\n<!-- Modal Component -->\n<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'large'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'my-modal-custom-class'\"\n  [disableFooter]=\"false\"\n  [modalData]=\"[{ data: { first_name: 'verben-ng', last_name: 'verbena' } }]\"\n  [isVisible]=\"showPreview\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n>\n  <a download=\"\"></a>\n</verben-dialogue>\n\n<!-- Define templates -->\n<ng-template #headerTemplate>\n  <h2>Upload Preview</h2>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"flex gap-4 items-center justify-between\">\n    <p class=\"\">Total Items: {{ previewData()?.length }}</p>\n\n    <verben-drop-down\n      [multiselect]=\"true\"\n      placeholder=\"Find duplicates by\"\n      [options]=\"fields()\"\n      [ngModel]=\"uniqueIdentifiers()\"\n      (ngModelChange)=\"uniqueIdentifiers.set($event)\"\n    ></verben-drop-down>\n  </div>\n  <lib-data-table\n    [data]=\"previewData() ?? []\"\n    [columns]=\"previewColumns() ?? []\"\n    [formGroupConfig]=\"formGroupConfig()\"\n  >\n    @for (column of previewColumns(); track column.id) {\n    <ng-container [libColumn]=\"column.id\">\n      <!-- <ng-template #cell let-value=\"value\" let-row=\"row\">\n        <p>{{ value }}</p>\n      </ng-template> -->\n      @if (column.formControlName || column.accessorKey) {\n      <ng-template\n        #cell\n        let-value=\"value\"\n        let-row=\"row\"\n        let-formControl=\"formControl\"\n      >\n        @if (formControl) {\n        <input type=\"text\" [formControl]=\"formControl\" />\n        } @else if (column.accessorKey) {\n        <input type=\"text\" [ngModel]=\"value\" />\n        } @else if (column.cellEditTemplate) {\n        <ng-container\n          [ngTemplateOutlet]=\"column.cellEditTemplate\"\n          [ngTemplateOutletContext]=\"formControl\"\n        ></ng-container>\n        }\n      </ng-template>\n\n      <ng-template\n        #cellEdit\n        let-value=\"value\"\n        let-row=\"row\"\n        let-formControl=\"formControl\"\n      >\n        @if (formControl) {\n        <input type=\"text\" [formControl]=\"formControl\" />\n        } @else if (column.accessorKey) {\n        <input type=\"text\" [ngModel]=\"value\" />\n        } @else if (column.cellEditTemplate) {\n        <ng-container\n          [ngTemplateOutlet]=\"column.cellEditTemplate\"\n          [ngTemplateOutletContext]=\"formControl\"\n        ></ng-container>\n        }\n      </ng-template>\n      }\n    </ng-container>\n    }\n\n    <ng-container libColumn=\"actions\">\n      <ng-template\n        #cell\n        let-value\n        let-deleteRow=\"deleteRow\"\n        let-isEditing=\"isEditing\"\n        let-toggleRowEdit=\"toggleRowEdit\"\n        let-row=\"row\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <div class=\"flex gap-6\">\n          <verben-svg\n            (click)=\"toggleRowEdit()\"\n            icon=\"edit\"\n            [width]=\"15\"\n            [height]=\"15\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n\n          <verben-svg\n            icon=\"delete\"\n            [width]=\"15\"\n            [height]=\"15\"\n            (click)=\"deleteRow()\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n        </div>\n      </ng-template>\n\n      <ng-template\n        #cellEdit\n        let-value\n        let-deleteRow\n        let-isEditing=\"isEditing\"\n        let-toggleRowEdit=\"toggleRowEdit\"\n        let-row=\"row\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <div class=\"flex gap-6\">\n          <verben-svg\n            (click)=\"toggleRowEdit()\"\n            icon=\"tick\"\n            [width]=\"15\"\n            [height]=\"15\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n\n          <verben-svg\n            icon=\"delete\"\n            [width]=\"15\"\n            [height]=\"15\"\n            (click)=\"toggleRowEdit()\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n        </div>\n      </ng-template>\n    </ng-container>\n  </lib-data-table>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <!-- <button class=\"btn btn-secondary\" (click)=\"onModalClose($event)\">Cancel</button>\n  <button class=\"btn btn-primary\" (click)=\"onConfirm()\">Confirm</button> -->\n</ng-template>\n", styles: [".drop-area{border:2px dashed #ccc;padding:20px;text-align:center;cursor:pointer}.drop-area.drag-active{background-color:#eee}.export-card{font-size:.75rem;z-index:10}.card-header{display:flex;justify-content:space-between;align-items:center;background-color:transparent;padding:4px!important}.header-title{font-weight:600;font-size:.8125rem}.card-body{display:flex;flex-direction:column;gap:.5rem;padding-top:-8px!important}.section{display:flex;flex-direction:column;gap:.5rem}.section-header{display:flex;justify-content:space-between;align-items:center}.section-title{font-size:.8125rem}.item{display:flex;justify-content:space-between;align-items:center}.item-label{display:flex;align-items:center;gap:.5rem}.checkbox-label{line-height:1}.item-actions{display:flex;gap:.5rem}.show-more{display:flex;gap:.5em;align-items:center;color:#6b7280;cursor:pointer}.divider{border:none;border-top:1px solid #e8eaf1}.operation-grid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.add-button{margin-top:.5rem;margin-left:auto;outline:none;border:none;background-color:transparent;color:#3479e9;font-size:.75rem;font-weight:500;cursor:pointer}.card-footer{display:flex;justify-content:flex-end;background-color:transparent}.export-button{margin-top:.5rem;outline:none;border:none;padding:.2rem 1.6rem;background-color:#ffe681;color:#404040;font-size:.75rem;font-weight:600;cursor:pointer}.value-range{display:flex;gap:.5rem;align-items:center}\n"], dependencies: [{ 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.CardComponent, selector: "verben-card", inputs: ["pd", "mg", "height", "width", "textColor", "bgColor", "border", "borderRadius", "disabled", "aspectRatio"] }, { kind: "component", type: i3.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "component", type: i4.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowDelete", "selectionChange"] }, { kind: "directive", type: i5.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i6.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: DataImportComponent, selector: "lib-data-import", inputs: { previewColumns: { classPropertyName: "previewColumns", publicName: "previewColumns", isSignal: true, isRequired: false, transformFunction: null }, formGroupConfig: { classPropertyName: "formGroupConfig", publicName: "formGroupConfig", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, previewData: { classPropertyName: "previewData", publicName: "previewData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportTemplateEvent: "exportTemplateEvent", importEvent: "importEvent", importEventData: "importEventData" }, ngImport: i0, template: "<verben-card\n  width=\"24rem\"\n  borderRadius=\"1rem\"\n  [border]=\"'1px solid #D4A007'\"\n  bgColor=\"#FFFFFF\"\n  class=\"export-card\"\n>\n  <div card-header class=\"card-header\">\n    <h4 class=\"header-title\">Import</h4>\n    <button\n      class=\"reset-button\"\n      [style.color]=\"'#3479E9'\"\n      [style.background-color]=\"'transparent'\"\n      [style.border]=\"'none'\"\n      [style.cursor]=\"'pointer'\"\n      [style.font-size]=\"'12px'\"\n      (click)=\"reset()\"\n    >\n      Reset\n    </button>\n  </div>\n  <div card-body class=\"card-body\">\n    <div class=\"flex gap-4 justify-between\">\n      <button class=\"export-button\" (click)=\"handleTemplateExport()\">\n        Download Template\n      </button>\n      <button class=\"export-button\" (click)=\"save()\">Upload File</button>\n    </div>\n    <hr class=\"divider\" />\n    <section class=\"section\">\n      <div\n        class=\"drop-area\"\n        (dragover)=\"onDragOver($event)\"\n        (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\"\n      >\n        <p>\n          Drag and drop files here or\n          <label for=\"fileInput\">click to browse</label>\n        </p>\n        <input\n          type=\"file\"\n          id=\"fileInput\"\n          (change)=\"onFileSelected($event)\"\n          style=\"display: none\"\n          accept=\".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\n          multiple\n        />\n      </div>\n      <div *ngIf=\"files.length > 0\">\n        <h3>Uploaded Files:</h3>\n        <ul>\n          <li *ngFor=\"let file of files\">{{ file.name }}</li>\n        </ul>\n      </div>\n    </section>\n  </div>\n  <div card-footer class=\"card-footer\">\n    <button class=\"export-button\" (click)=\"save()\">Import</button>\n  </div>\n</verben-card>\n\n<!-- Modal Component -->\n<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'large'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'my-modal-custom-class'\"\n  [disableFooter]=\"false\"\n  [modalData]=\"[{ data: { first_name: 'verben-ng', last_name: 'verbena' } }]\"\n  [isVisible]=\"showPreview\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n>\n  <a download=\"\"></a>\n</verben-dialogue>\n\n<!-- Define templates -->\n<ng-template #headerTemplate>\n  <h2>Upload Preview</h2>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"flex gap-4 items-center justify-between\">\n    <p class=\"\">Total Items: {{ previewData()?.length }}</p>\n\n    <verben-drop-down\n      [multiselect]=\"true\"\n      placeholder=\"Find duplicates by\"\n      [options]=\"fields()\"\n      [ngModel]=\"uniqueIdentifiers()\"\n      (ngModelChange)=\"uniqueIdentifiers.set($event)\"\n    ></verben-drop-down>\n  </div>\n  <lib-data-table\n    [data]=\"previewData() ?? []\"\n    [columns]=\"previewColumns() ?? []\"\n    [formGroupConfig]=\"formGroupConfig()\"\n  >\n    @for (column of previewColumns(); track column.id) {\n    <ng-container [libColumn]=\"column.id\">\n      <ng-template\n        #cell\n        let-value=\"value\"\n        let-row=\"row\"\n        let-formControl=\"formControl\"\n        let-updateValue=\"updateValue\"\n      >\n        <verbena-input\n          [value]=\"value\"\n          (valueChange)=\"updateValue($event)\"\n        ></verbena-input>\n      </ng-template>\n      <!-- @if (column.formControlName || column.accessorKey) {\n      <ng-template\n        #cell\n        let-value=\"value\"\n        let-row=\"row\"\n        let-formControl=\"formControl\"\n      >\n        @if (formControl) {\n        <input type=\"text\" [formControl]=\"formControl\" />\n        } @else if (column.accessorKey) {\n        <input type=\"text\" [ngModel]=\"value\" />\n        } @else if (column.cellEditTemplate) {\n        <ng-container\n          [ngTemplateOutlet]=\"column.cellEditTemplate\"\n          [ngTemplateOutletContext]=\"formControl\"\n        ></ng-container>\n        }\n      </ng-template>\n\n      <ng-template\n        #cellEdit\n        let-value=\"value\"\n        let-row=\"row\"\n        let-formControl=\"formControl\"\n      >\n        @if (formControl) {\n        <input type=\"text\" [formControl]=\"formControl\" />\n        } @else if (column.accessorKey) {\n        <input type=\"text\" [ngModel]=\"value\" />\n        } @else if (column.cellEditTemplate) {\n        <ng-container\n          [ngTemplateOutlet]=\"column.cellEditTemplate\"\n          [ngTemplateOutletContext]=\"formControl\"\n        ></ng-container>\n        }\n      </ng-template>\n      } -->\n    </ng-container>\n    }\n\n    <ng-container libColumn=\"actions\">\n      <ng-template\n        #cell\n        let-value\n        let-deleteRow=\"deleteRow\"\n        let-isEditing=\"isEditing\"\n        let-toggleRowEdit=\"toggleRowEdit\"\n        let-row=\"row\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <div class=\"flex gap-6\">\n          <verben-svg\n            (click)=\"toggleRowEdit()\"\n            icon=\"edit\"\n            [width]=\"15\"\n            [height]=\"15\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n\n          <verben-svg\n            icon=\"delete\"\n            [width]=\"15\"\n            [height]=\"15\"\n            (click)=\"deleteRow()\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n        </div>\n      </ng-template>\n\n      <ng-template\n        #cellEdit\n        let-value\n        let-deleteRow\n        let-isEditing=\"isEditing\"\n        let-toggleRowEdit=\"toggleRowEdit\"\n        let-row=\"row\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <div class=\"flex gap-6\">\n          <verben-svg\n            (click)=\"toggleRowEdit()\"\n            icon=\"tick\"\n            [width]=\"15\"\n            [height]=\"15\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n\n          <verben-svg\n            icon=\"delete\"\n            [width]=\"15\"\n            [height]=\"15\"\n            (click)=\"toggleRowEdit()\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n        </div>\n      </ng-template>\n    </ng-container>\n  </lib-data-table>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <button class=\"btn btn-secondary\" (click)=\"showPreview = false\">\n    Cancel\n  </button>\n  <button class=\"btn btn-primary\" (click)=\"save()\">Complete</button>\n</ng-template>\n", styles: [".drop-area{border:2px dashed #ccc;padding:20px;text-align:center;cursor:pointer}.drop-area.drag-active{background-color:#eee}.export-card{font-size:.75rem;z-index:10}.card-header{display:flex;justify-content:space-between;align-items:center;background-color:transparent;padding:4px!important}.header-title{font-weight:600;font-size:.8125rem}.card-body{display:flex;flex-direction:column;gap:.5rem;padding-top:-8px!important}.section{display:flex;flex-direction:column;gap:.5rem}.section-header{display:flex;justify-content:space-between;align-items:center}.section-title{font-size:.8125rem}.item{display:flex;justify-content:space-between;align-items:center}.item-label{display:flex;align-items:center;gap:.5rem}.checkbox-label{line-height:1}.item-actions{display:flex;gap:.5rem}.show-more{display:flex;gap:.5em;align-items:center;color:#6b7280;cursor:pointer}.divider{border:none;border-top:1px solid #e8eaf1}.operation-grid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.add-button{margin-top:.5rem;margin-left:auto;outline:none;border:none;background-color:transparent;color:#3479e9;font-size:.75rem;font-weight:500;cursor:pointer}.card-footer{display:flex;justify-content:flex-end;background-color:transparent}.export-button{margin-top:.5rem;outline:none;border:none;padding:.2rem 1.6rem;background-color:#ffe681;color:#404040;font-size:.75rem;font-weight:600;cursor:pointer}.value-range{display:flex;gap:.5rem;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.CardComponent, selector: "verben-card", inputs: ["pd", "mg", "height", "width", "textColor", "bgColor", "border", "borderRadius", "disabled", "aspectRatio"] }, { kind: "component", type: i3.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "component", type: i4.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowDelete", "selectionChange"] }, { kind: "directive", type: i5.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i6.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "fontSize", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i7.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataImportComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-data-import', template: "<verben-card\n  width=\"24rem\"\n  borderRadius=\"1rem\"\n  [border]=\"'1px solid #D4A007'\"\n  bgColor=\"#FFFFFF\"\n  class=\"export-card\"\n>\n  <div card-header class=\"card-header\">\n    <h4 class=\"header-title\">Import</h4>\n    <button\n      class=\"reset-button\"\n      [style.color]=\"'#3479E9'\"\n      [style.background-color]=\"'transparent'\"\n      [style.border]=\"'none'\"\n      [style.cursor]=\"'pointer'\"\n      [style.font-size]=\"'12px'\"\n      (click)=\"reset()\"\n    >\n      Reset\n    </button>\n  </div>\n  <div card-body class=\"card-body\">\n    <div class=\"flex gap-4 justify-between\">\n      <button class=\"export-button\" (click)=\"handleTemplateExport()\">\n        Download Template\n      </button>\n      <button class=\"export-button\" (click)=\"save()\">Upload File</button>\n    </div>\n    <hr class=\"divider\" />\n    <section class=\"section\">\n      <div\n        class=\"drop-area\"\n        (dragover)=\"onDragOver($event)\"\n        (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\"\n      >\n        <p>\n          Drag and drop files here or\n          <label for=\"fileInput\">click to browse</label>\n        </p>\n        <input\n          type=\"file\"\n          id=\"fileInput\"\n          (change)=\"onFileSelected($event)\"\n          style=\"display: none\"\n          accept=\".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\n          multiple\n        />\n      </div>\n      <div *ngIf=\"files.length > 0\">\n        <h3>Uploaded Files:</h3>\n        <ul>\n          <li *ngFor=\"let file of files\">{{ file.name }}</li>\n        </ul>\n      </div>\n    </section>\n  </div>\n  <div card-footer class=\"card-footer\">\n    <button class=\"export-button\" (click)=\"save()\">Import</button>\n  </div>\n</verben-card>\n\n<!-- Modal Component -->\n<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'large'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'my-modal-custom-class'\"\n  [disableFooter]=\"false\"\n  [modalData]=\"[{ data: { first_name: 'verben-ng', last_name: 'verbena' } }]\"\n  [isVisible]=\"showPreview\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n>\n  <a download=\"\"></a>\n</verben-dialogue>\n\n<!-- Define templates -->\n<ng-template #headerTemplate>\n  <h2>Upload Preview</h2>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"flex gap-4 items-center justify-between\">\n    <p class=\"\">Total Items: {{ previewData()?.length }}</p>\n\n    <verben-drop-down\n      [multiselect]=\"true\"\n      placeholder=\"Find duplicates by\"\n      [options]=\"fields()\"\n      [ngModel]=\"uniqueIdentifiers()\"\n      (ngModelChange)=\"uniqueIdentifiers.set($event)\"\n    ></verben-drop-down>\n  </div>\n  <lib-data-table\n    [data]=\"previewData() ?? []\"\n    [columns]=\"previewColumns() ?? []\"\n    [formGroupConfig]=\"formGroupConfig()\"\n  >\n    @for (column of previewColumns(); track column.id) {\n    <ng-container [libColumn]=\"column.id\">\n      <!-- <ng-template #cell let-value=\"value\" let-row=\"row\">\n        <p>{{ value }}</p>\n      </ng-template> -->\n      @if (column.formControlName || column.accessorKey) {\n      <ng-template\n        #cell\n        let-value=\"value\"\n        let-row=\"row\"\n        let-formControl=\"formControl\"\n      >\n        @if (formControl) {\n        <input type=\"text\" [formControl]=\"formControl\" />\n        } @else if (column.accessorKey) {\n        <input type=\"text\" [ngModel]=\"value\" />\n        } @else if (column.cellEditTemplate) {\n        <ng-container\n          [ngTemplateOutlet]=\"column.cellEditTemplate\"\n          [ngTemplateOutletContext]=\"formControl\"\n        ></ng-container>\n        }\n      </ng-template>\n\n      <ng-template\n        #cellEdit\n        let-value=\"value\"\n        let-row=\"row\"\n        let-formControl=\"formControl\"\n      >\n        @if (formControl) {\n        <input type=\"text\" [formControl]=\"formControl\" />\n        } @else if (column.accessorKey) {\n        <input type=\"text\" [ngModel]=\"value\" />\n        } @else if (column.cellEditTemplate) {\n        <ng-container\n          [ngTemplateOutlet]=\"column.cellEditTemplate\"\n          [ngTemplateOutletContext]=\"formControl\"\n        ></ng-container>\n        }\n      </ng-template>\n      }\n    </ng-container>\n    }\n\n    <ng-container libColumn=\"actions\">\n      <ng-template\n        #cell\n        let-value\n        let-deleteRow=\"deleteRow\"\n        let-isEditing=\"isEditing\"\n        let-toggleRowEdit=\"toggleRowEdit\"\n        let-row=\"row\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <div class=\"flex gap-6\">\n          <verben-svg\n            (click)=\"toggleRowEdit()\"\n            icon=\"edit\"\n            [width]=\"15\"\n            [height]=\"15\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n\n          <verben-svg\n            icon=\"delete\"\n            [width]=\"15\"\n            [height]=\"15\"\n            (click)=\"deleteRow()\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n        </div>\n      </ng-template>\n\n      <ng-template\n        #cellEdit\n        let-value\n        let-deleteRow\n        let-isEditing=\"isEditing\"\n        let-toggleRowEdit=\"toggleRowEdit\"\n        let-row=\"row\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <div class=\"flex gap-6\">\n          <verben-svg\n            (click)=\"toggleRowEdit()\"\n            icon=\"tick\"\n            [width]=\"15\"\n            [height]=\"15\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n\n          <verben-svg\n            icon=\"delete\"\n            [width]=\"15\"\n            [height]=\"15\"\n            (click)=\"toggleRowEdit()\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n        </div>\n      </ng-template>\n    </ng-container>\n  </lib-data-table>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <!-- <button class=\"btn btn-secondary\" (click)=\"onModalClose($event)\">Cancel</button>\n  <button class=\"btn btn-primary\" (click)=\"onConfirm()\">Confirm</button> -->\n</ng-template>\n", styles: [".drop-area{border:2px dashed #ccc;padding:20px;text-align:center;cursor:pointer}.drop-area.drag-active{background-color:#eee}.export-card{font-size:.75rem;z-index:10}.card-header{display:flex;justify-content:space-between;align-items:center;background-color:transparent;padding:4px!important}.header-title{font-weight:600;font-size:.8125rem}.card-body{display:flex;flex-direction:column;gap:.5rem;padding-top:-8px!important}.section{display:flex;flex-direction:column;gap:.5rem}.section-header{display:flex;justify-content:space-between;align-items:center}.section-title{font-size:.8125rem}.item{display:flex;justify-content:space-between;align-items:center}.item-label{display:flex;align-items:center;gap:.5rem}.checkbox-label{line-height:1}.item-actions{display:flex;gap:.5rem}.show-more{display:flex;gap:.5em;align-items:center;color:#6b7280;cursor:pointer}.divider{border:none;border-top:1px solid #e8eaf1}.operation-grid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.add-button{margin-top:.5rem;margin-left:auto;outline:none;border:none;background-color:transparent;color:#3479e9;font-size:.75rem;font-weight:500;cursor:pointer}.card-footer{display:flex;justify-content:flex-end;background-color:transparent}.export-button{margin-top:.5rem;outline:none;border:none;padding:.2rem 1.6rem;background-color:#ffe681;color:#404040;font-size:.75rem;font-weight:600;cursor:pointer}.value-range{display:flex;gap:.5rem;align-items:center}\n"] }]
+            args: [{ selector: 'lib-data-import', template: "<verben-card\n  width=\"24rem\"\n  borderRadius=\"1rem\"\n  [border]=\"'1px solid #D4A007'\"\n  bgColor=\"#FFFFFF\"\n  class=\"export-card\"\n>\n  <div card-header class=\"card-header\">\n    <h4 class=\"header-title\">Import</h4>\n    <button\n      class=\"reset-button\"\n      [style.color]=\"'#3479E9'\"\n      [style.background-color]=\"'transparent'\"\n      [style.border]=\"'none'\"\n      [style.cursor]=\"'pointer'\"\n      [style.font-size]=\"'12px'\"\n      (click)=\"reset()\"\n    >\n      Reset\n    </button>\n  </div>\n  <div card-body class=\"card-body\">\n    <div class=\"flex gap-4 justify-between\">\n      <button class=\"export-button\" (click)=\"handleTemplateExport()\">\n        Download Template\n      </button>\n      <button class=\"export-button\" (click)=\"save()\">Upload File</button>\n    </div>\n    <hr class=\"divider\" />\n    <section class=\"section\">\n      <div\n        class=\"drop-area\"\n        (dragover)=\"onDragOver($event)\"\n        (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\"\n      >\n        <p>\n          Drag and drop files here or\n          <label for=\"fileInput\">click to browse</label>\n        </p>\n        <input\n          type=\"file\"\n          id=\"fileInput\"\n          (change)=\"onFileSelected($event)\"\n          style=\"display: none\"\n          accept=\".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\n          multiple\n        />\n      </div>\n      <div *ngIf=\"files.length > 0\">\n        <h3>Uploaded Files:</h3>\n        <ul>\n          <li *ngFor=\"let file of files\">{{ file.name }}</li>\n        </ul>\n      </div>\n    </section>\n  </div>\n  <div card-footer class=\"card-footer\">\n    <button class=\"export-button\" (click)=\"save()\">Import</button>\n  </div>\n</verben-card>\n\n<!-- Modal Component -->\n<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'large'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'my-modal-custom-class'\"\n  [disableFooter]=\"false\"\n  [modalData]=\"[{ data: { first_name: 'verben-ng', last_name: 'verbena' } }]\"\n  [isVisible]=\"showPreview\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n>\n  <a download=\"\"></a>\n</verben-dialogue>\n\n<!-- Define templates -->\n<ng-template #headerTemplate>\n  <h2>Upload Preview</h2>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"flex gap-4 items-center justify-between\">\n    <p class=\"\">Total Items: {{ previewData()?.length }}</p>\n\n    <verben-drop-down\n      [multiselect]=\"true\"\n      placeholder=\"Find duplicates by\"\n      [options]=\"fields()\"\n      [ngModel]=\"uniqueIdentifiers()\"\n      (ngModelChange)=\"uniqueIdentifiers.set($event)\"\n    ></verben-drop-down>\n  </div>\n  <lib-data-table\n    [data]=\"previewData() ?? []\"\n    [columns]=\"previewColumns() ?? []\"\n    [formGroupConfig]=\"formGroupConfig()\"\n  >\n    @for (column of previewColumns(); track column.id) {\n    <ng-container [libColumn]=\"column.id\">\n      <ng-template\n        #cell\n        let-value=\"value\"\n        let-row=\"row\"\n        let-formControl=\"formControl\"\n        let-updateValue=\"updateValue\"\n      >\n        <verbena-input\n          [value]=\"value\"\n          (valueChange)=\"updateValue($event)\"\n        ></verbena-input>\n      </ng-template>\n      <!-- @if (column.formControlName || column.accessorKey) {\n      <ng-template\n        #cell\n        let-value=\"value\"\n        let-row=\"row\"\n        let-formControl=\"formControl\"\n      >\n        @if (formControl) {\n        <input type=\"text\" [formControl]=\"formControl\" />\n        } @else if (column.accessorKey) {\n        <input type=\"text\" [ngModel]=\"value\" />\n        } @else if (column.cellEditTemplate) {\n        <ng-container\n          [ngTemplateOutlet]=\"column.cellEditTemplate\"\n          [ngTemplateOutletContext]=\"formControl\"\n        ></ng-container>\n        }\n      </ng-template>\n\n      <ng-template\n        #cellEdit\n        let-value=\"value\"\n        let-row=\"row\"\n        let-formControl=\"formControl\"\n      >\n        @if (formControl) {\n        <input type=\"text\" [formControl]=\"formControl\" />\n        } @else if (column.accessorKey) {\n        <input type=\"text\" [ngModel]=\"value\" />\n        } @else if (column.cellEditTemplate) {\n        <ng-container\n          [ngTemplateOutlet]=\"column.cellEditTemplate\"\n          [ngTemplateOutletContext]=\"formControl\"\n        ></ng-container>\n        }\n      </ng-template>\n      } -->\n    </ng-container>\n    }\n\n    <ng-container libColumn=\"actions\">\n      <ng-template\n        #cell\n        let-value\n        let-deleteRow=\"deleteRow\"\n        let-isEditing=\"isEditing\"\n        let-toggleRowEdit=\"toggleRowEdit\"\n        let-row=\"row\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <div class=\"flex gap-6\">\n          <verben-svg\n            (click)=\"toggleRowEdit()\"\n            icon=\"edit\"\n            [width]=\"15\"\n            [height]=\"15\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n\n          <verben-svg\n            icon=\"delete\"\n            [width]=\"15\"\n            [height]=\"15\"\n            (click)=\"deleteRow()\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n        </div>\n      </ng-template>\n\n      <ng-template\n        #cellEdit\n        let-value\n        let-deleteRow\n        let-isEditing=\"isEditing\"\n        let-toggleRowEdit=\"toggleRowEdit\"\n        let-row=\"row\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <div class=\"flex gap-6\">\n          <verben-svg\n            (click)=\"toggleRowEdit()\"\n            icon=\"tick\"\n            [width]=\"15\"\n            [height]=\"15\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n\n          <verben-svg\n            icon=\"delete\"\n            [width]=\"15\"\n            [height]=\"15\"\n            (click)=\"toggleRowEdit()\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n        </div>\n      </ng-template>\n    </ng-container>\n  </lib-data-table>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <button class=\"btn btn-secondary\" (click)=\"showPreview = false\">\n    Cancel\n  </button>\n  <button class=\"btn btn-primary\" (click)=\"save()\">Complete</button>\n</ng-template>\n", styles: [".drop-area{border:2px dashed #ccc;padding:20px;text-align:center;cursor:pointer}.drop-area.drag-active{background-color:#eee}.export-card{font-size:.75rem;z-index:10}.card-header{display:flex;justify-content:space-between;align-items:center;background-color:transparent;padding:4px!important}.header-title{font-weight:600;font-size:.8125rem}.card-body{display:flex;flex-direction:column;gap:.5rem;padding-top:-8px!important}.section{display:flex;flex-direction:column;gap:.5rem}.section-header{display:flex;justify-content:space-between;align-items:center}.section-title{font-size:.8125rem}.item{display:flex;justify-content:space-between;align-items:center}.item-label{display:flex;align-items:center;gap:.5rem}.checkbox-label{line-height:1}.item-actions{display:flex;gap:.5rem}.show-more{display:flex;gap:.5em;align-items:center;color:#6b7280;cursor:pointer}.divider{border:none;border-top:1px solid #e8eaf1}.operation-grid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.add-button{margin-top:.5rem;margin-left:auto;outline:none;border:none;background-color:transparent;color:#3479e9;font-size:.75rem;font-weight:500;cursor:pointer}.card-footer{display:flex;justify-content:flex-end;background-color:transparent}.export-button{margin-top:.5rem;outline:none;border:none;padding:.2rem 1.6rem;background-color:#ffe681;color:#404040;font-size:.75rem;font-weight:600;cursor:pointer}.value-range{display:flex;gap:.5rem;align-items:center}\n"] }]
         }], ctorParameters: () => [] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YS1pbXBvcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdmVyYmVuLW5nLXVpL3NyYy9saWIvY29tcG9uZW50cy9kYXRhLWltcG9ydC9kYXRhLWltcG9ydC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4tbmctdWkvc3JjL2xpYi9jb21wb25lbnRzL2RhdGEtaW1wb3J0L2RhdGEtaW1wb3J0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsTUFBTSxFQUNOLEtBQUssRUFDTCxNQUFNLEVBQ04sTUFBTSxHQUVQLE1BQU0sZUFBZSxDQUFDO0FBS3ZCLE9BQU8sRUFFTCxTQUFTLEdBR1YsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7Ozs7OztBQU94QixNQUFNLE9BQU8sbUJBQW1CO0lBQzlCLGNBQWMsR0FBRyxLQUFLLEVBQXlCLENBQUM7SUFDaEQsZUFBZSxHQUFHLEtBQUssRUFJcEIsQ0FBQztJQUNKLE1BQU0sR0FBRyxLQUFLLENBQVcsRUFBRSxDQUFDLENBQUM7SUFDN0IsS0FBSyxHQUFHLEtBQUssRUFBVSxDQUFDO0lBQ3hCLFdBQVcsR0FBRyxLQUFLLEVBQU8sQ0FBQztJQUMzQixtQkFBbUIsR0FBRyxNQUFNLEVBQVksQ0FBQztJQUN6QyxXQUFXLEdBQUcsTUFBTSxFQUFRLENBQUM7SUFFN0Isa0JBQWtCLEdBQTBCLEVBQUUsQ0FBQztJQUMvQyxLQUFLLEdBQUcsSUFBSSxTQUFTLENBQVksRUFBRSxDQUFDLENBQUM7SUFDckMsaUJBQWlCLEdBQTZCLE1BQU0sQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUVqRCxJQUFJLEdBQTJCLE1BQU0sQ0FBQztJQUU5QyxLQUFLLEdBQVcsRUFBRSxDQUFDO0lBQ25CLFVBQVUsR0FBRyxLQUFLLENBQUM7SUFDbkIsV0FBVyxHQUFHLEtBQUssQ0FBQztJQUVwQjtRQUNFLE1BQU0sQ0FBQyxHQUFHLEVBQUU7WUFDVixJQUFJLENBQUMsV0FBVyxFQUFFLEVBQUUsT0FBTyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUU7Z0JBQ3BDLE9BQU8sQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDckIsQ0FBQyxDQUFDLENBQUM7WUFFSCxPQUFPLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQyxDQUFDO1FBQ3JDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELFVBQVUsQ0FBQyxLQUFnQjtRQUN6QixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUM7SUFDekIsQ0FBQztJQUVELFdBQVcsQ0FBQyxLQUFnQjtRQUMxQixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUM7SUFDMUIsQ0FBQztJQUVELE1BQU0sQ0FBQyxLQUFnQjtRQUNyQixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUM7UUFDeEIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxZQUFhLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDbkQsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ3JDLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDO0lBQzFCLENBQUM7SUFFRCxjQUFjLENBQUMsS0FBVTtRQUN2QixJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM1QyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDckMsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUM7SUFDMUIsQ0FBQztJQUVELEtBQUssS0FBSSxDQUFDO0lBRVYsSUFBSTtRQUNGLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDO0lBQzFCLENBQUM7SUFFRCxlQUFlO1FBQ2IsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxFQUFFLFFBQVEsQ0FBQztRQUNsRCxJQUFJLFFBQVEsRUFBRSxDQUFDO1lBQ2IsT0FBTyxNQUFNLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQy9CLENBQUM7UUFDRCxPQUFPLEVBQUUsQ0FBQztJQUNaLENBQUM7SUFFRCxvQkFBb0I7UUFDbEIsTUFBTSxFQUFFLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxFQUFFLFFBQVEsQ0FBQztRQUM1QyxJQUFJLEVBQUUsRUFBRSxDQUFDO1lBQ1AsSUFBSSxDQUFDLG1CQUFtQixDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDakQsQ0FBQzthQUFNLENBQUM7WUFDTixJQUFJLENBQUMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQyxDQUFDO1FBQy9DLENBQUM7SUFDSCxDQUFDO3dHQTlFVSxtQkFBbUI7NEZBQW5CLG1CQUFtQiw4ekJDeEJoQyxzck1BbU5BOzs0RkQzTGEsbUJBQW1CO2tCQUwvQixTQUFTOytCQUNFLGlCQUFpQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgZWZmZWN0LFxuICBpbnB1dCxcbiAgb3V0cHV0LFxuICBzaWduYWwsXG4gIFdyaXRhYmxlU2lnbmFsLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gIENvbHVtbkRlZmluaXRpb24sXG4gIEZvcm1Hcm91cENvbmZpZyxcbn0gZnJvbSAnLi4vZGF0YS10YWJsZS9kYXRhLXRhYmxlLnR5cGVzJztcbmltcG9ydCB7XG4gIEFic3RyYWN0Q29udHJvbCxcbiAgRm9ybUFycmF5LFxuICBGb3JtQ29udHJvbCxcbiAgRm9ybUdyb3VwLFxufSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2xpYi1kYXRhLWltcG9ydCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9kYXRhLWltcG9ydC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9kYXRhLWltcG9ydC5jb21wb25lbnQuY3NzJyxcbn0pXG5leHBvcnQgY2xhc3MgRGF0YUltcG9ydENvbXBvbmVudDxUPiB7XG4gIHByZXZpZXdDb2x1bW5zID0gaW5wdXQ8Q29sdW1uRGVmaW5pdGlvbjxUPltdPigpO1xuICBmb3JtR3JvdXBDb25maWcgPSBpbnB1dDxcbiAgICBGb3JtR3JvdXBDb25maWc8e1xuICAgICAgW0sgaW4ga2V5b2YgVF06IEFic3RyYWN0Q29udHJvbDtcbiAgICB9PlxuICA+KCk7XG4gIGZpZWxkcyA9IGlucHV0PHN0cmluZ1tdPihbXSk7XG4gIHRpdGxlID0gaW5wdXQ8c3RyaW5nPigpO1xuICBwcmV2aWV3RGF0YSA9IGlucHV0PFRbXT4oKTtcbiAgZXhwb3J0VGVtcGxhdGVFdmVudCA9IG91dHB1dDxzdHJpbmdbXT4oKTtcbiAgaW1wb3J0RXZlbnQgPSBvdXRwdXQ8RmlsZT4oKTtcblxuICBwcmV2aWV3Q29sdW1uc0xpc3Q6IENvbHVtbkRlZmluaXRpb248VD5bXSA9IFtdO1xuICBmb3JtcyA9IG5ldyBGb3JtQXJyYXk8Rm9ybUdyb3VwPihbXSk7XG4gIHVuaXF1ZUlkZW50aWZpZXJzOiBXcml0YWJsZVNpZ25hbDxzdHJpbmdbXT4gPSBzaWduYWwoW10pO1xuXG4gIHByaXZhdGUgX2V4dDogJ3hsc3gnIHwgJ3hscycgfCAnY3N2JyA9ICd4bHN4JztcblxuICBmaWxlczogRmlsZVtdID0gW107XG4gIGlzRHJhZ2dpbmcgPSBmYWxzZTtcbiAgc2hvd1ByZXZpZXcgPSBmYWxzZTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBlZmZlY3QoKCkgPT4ge1xuICAgICAgdGhpcy5wcmV2aWV3RGF0YSgpPy5mb3JFYWNoKChkYXR1bSkgPT4ge1xuICAgICAgICBjb25zb2xlLmxvZyhkYXR1bSk7XG4gICAgICB9KTtcblxuICAgICAgY29uc29sZS5sb2codGhpcy5wcmV2aWV3Q29sdW1ucygpKTtcbiAgICB9KTtcbiAgfVxuXG4gIG9uRHJhZ092ZXIoZXZlbnQ6IERyYWdFdmVudCkge1xuICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgdGhpcy5pc0RyYWdnaW5nID0gdHJ1ZTtcbiAgfVxuXG4gIG9uRHJhZ0xlYXZlKGV2ZW50OiBEcmFnRXZlbnQpIHtcbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIHRoaXMuaXNEcmFnZ2luZyA9IGZhbHNlO1xuICB9XG5cbiAgb25Ecm9wKGV2ZW50OiBEcmFnRXZlbnQpIHtcbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIHRoaXMuaXNEcmFnZ2luZyA9IGZhbHNlO1xuICAgIHRoaXMuZmlsZXMgPSBBcnJheS5mcm9tKGV2ZW50LmRhdGFUcmFuc2ZlciEuZmlsZXMpO1xuICAgIHRoaXMuaW1wb3J0RXZlbnQuZW1pdCh0aGlzLmZpbGVzWzBdKTtcbiAgICB0aGlzLnNob3dQcmV2aWV3ID0gdHJ1ZTtcbiAgfVxuXG4gIG9uRmlsZVNlbGVjdGVkKGV2ZW50OiBhbnkpIHtcbiAgICB0aGlzLmZpbGVzID0gQXJyYXkuZnJvbShldmVudC50YXJnZXQuZmlsZXMpO1xuICAgIHRoaXMuaW1wb3J0RXZlbnQuZW1pdCh0aGlzLmZpbGVzWzBdKTtcbiAgICB0aGlzLnNob3dQcmV2aWV3ID0gdHJ1ZTtcbiAgfVxuXG4gIHJlc2V0KCkge31cblxuICBzYXZlKCkge1xuICAgIHRoaXMuc2hvd1ByZXZpZXcgPSB0cnVlO1xuICB9XG5cbiAgZ2V0Q29udHJvbE5hbWVzKCkge1xuICAgIGNvbnN0IGNvbnRyb2xzID0gdGhpcy5mb3JtR3JvdXBDb25maWcoKT8uY29udHJvbHM7XG4gICAgaWYgKGNvbnRyb2xzKSB7XG4gICAgICByZXR1cm4gT2JqZWN0LmtleXMoY29udHJvbHMpO1xuICAgIH1cbiAgICByZXR1cm4gW107XG4gIH1cblxuICBoYW5kbGVUZW1wbGF0ZUV4cG9ydCgpIHtcbiAgICBjb25zdCBmZyA9IHRoaXMuZm9ybUdyb3VwQ29uZmlnKCk/LmNvbnRyb2xzO1xuICAgIGlmIChmZykge1xuICAgICAgdGhpcy5leHBvcnRUZW1wbGF0ZUV2ZW50LmVtaXQoT2JqZWN0LmtleXMoZmcpKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5leHBvcnRUZW1wbGF0ZUV2ZW50LmVtaXQodGhpcy5maWVsZHMoKSk7XG4gICAgfVxuICB9XG5cbiAgLy8gZ2V0Rm9ybUNvbnRyb2woaW5kZXg6IG51bWJlciwgZmllbGQ6IHN0cmluZykge1xuICAvLyAgIGNvbnN0IGNvbnRyb2wgPSB0aGlzLi5nZXQoaW5kZXgpPy5nZXQoZmllbGQpIGFzIEZvcm1Db250cm9sPGFueT47XG4gIC8vICAgY29uc29sZS5sb2coY29udHJvbCk7XG4gIC8vICAgcmV0dXJuIGNvbnRyb2w7XG4gIC8vIH1cbn1cbiIsIjx2ZXJiZW4tY2FyZFxuICB3aWR0aD1cIjI0cmVtXCJcbiAgYm9yZGVyUmFkaXVzPVwiMXJlbVwiXG4gIFtib3JkZXJdPVwiJzFweCBzb2xpZCAjRDRBMDA3J1wiXG4gIGJnQ29sb3I9XCIjRkZGRkZGXCJcbiAgY2xhc3M9XCJleHBvcnQtY2FyZFwiXG4+XG4gIDxkaXYgY2FyZC1oZWFkZXIgY2xhc3M9XCJjYXJkLWhlYWRlclwiPlxuICAgIDxoNCBjbGFzcz1cImhlYWRlci10aXRsZVwiPkltcG9ydDwvaDQ+XG4gICAgPGJ1dHRvblxuICAgICAgY2xhc3M9XCJyZXNldC1idXR0b25cIlxuICAgICAgW3N0eWxlLmNvbG9yXT1cIicjMzQ3OUU5J1wiXG4gICAgICBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCIndHJhbnNwYXJlbnQnXCJcbiAgICAgIFtzdHlsZS5ib3JkZXJdPVwiJ25vbmUnXCJcbiAgICAgIFtzdHlsZS5jdXJzb3JdPVwiJ3BvaW50ZXInXCJcbiAgICAgIFtzdHlsZS5mb250LXNpemVdPVwiJzEycHgnXCJcbiAgICAgIChjbGljayk9XCJyZXNldCgpXCJcbiAgICA+XG4gICAgICBSZXNldFxuICAgIDwvYnV0dG9uPlxuICA8L2Rpdj5cbiAgPGRpdiBjYXJkLWJvZHkgY2xhc3M9XCJjYXJkLWJvZHlcIj5cbiAgICA8ZGl2IGNsYXNzPVwiZmxleCBnYXAtNCBqdXN0aWZ5LWJldHdlZW5cIj5cbiAgICAgIDxidXR0b24gY2xhc3M9XCJleHBvcnQtYnV0dG9uXCIgKGNsaWNrKT1cImhhbmRsZVRlbXBsYXRlRXhwb3J0KClcIj5cbiAgICAgICAgRG93bmxvYWQgVGVtcGxhdGVcbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPGJ1dHRvbiBjbGFzcz1cImV4cG9ydC1idXR0b25cIiAoY2xpY2spPVwic2F2ZSgpXCI+VXBsb2FkIEZpbGU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgICA8aHIgY2xhc3M9XCJkaXZpZGVyXCIgLz5cbiAgICA8c2VjdGlvbiBjbGFzcz1cInNlY3Rpb25cIj5cbiAgICAgIDxkaXZcbiAgICAgICAgY2xhc3M9XCJkcm9wLWFyZWFcIlxuICAgICAgICAoZHJhZ292ZXIpPVwib25EcmFnT3ZlcigkZXZlbnQpXCJcbiAgICAgICAgKGRyYWdsZWF2ZSk9XCJvbkRyYWdMZWF2ZSgkZXZlbnQpXCJcbiAgICAgICAgKGRyb3ApPVwib25Ecm9wKCRldmVudClcIlxuICAgICAgPlxuICAgICAgICA8cD5cbiAgICAgICAgICBEcmFnIGFuZCBkcm9wIGZpbGVzIGhlcmUgb3JcbiAgICAgICAgICA8bGFiZWwgZm9yPVwiZmlsZUlucHV0XCI+Y2xpY2sgdG8gYnJvd3NlPC9sYWJlbD5cbiAgICAgICAgPC9wPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICB0eXBlPVwiZmlsZVwiXG4gICAgICAgICAgaWQ9XCJmaWxlSW5wdXRcIlxuICAgICAgICAgIChjaGFuZ2UpPVwib25GaWxlU2VsZWN0ZWQoJGV2ZW50KVwiXG4gICAgICAgICAgc3R5bGU9XCJkaXNwbGF5OiBub25lXCJcbiAgICAgICAgICBhY2NlcHQ9XCIuY3N2LCBhcHBsaWNhdGlvbi92bmQub3BlbnhtbGZvcm1hdHMtb2ZmaWNlZG9jdW1lbnQuc3ByZWFkc2hlZXRtbC5zaGVldCwgYXBwbGljYXRpb24vdm5kLm1zLWV4Y2VsXCJcbiAgICAgICAgICBtdWx0aXBsZVxuICAgICAgICAvPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2ICpuZ0lmPVwiZmlsZXMubGVuZ3RoID4gMFwiPlxuICAgICAgICA8aDM+VXBsb2FkZWQgRmlsZXM6PC9oMz5cbiAgICAgICAgPHVsPlxuICAgICAgICAgIDxsaSAqbmdGb3I9XCJsZXQgZmlsZSBvZiBmaWxlc1wiPnt7IGZpbGUubmFtZSB9fTwvbGk+XG4gICAgICAgIDwvdWw+XG4gICAgICA8L2Rpdj5cbiAgICA8L3NlY3Rpb24+XG4gIDwvZGl2PlxuICA8ZGl2IGNhcmQtZm9vdGVyIGNsYXNzPVwiY2FyZC1mb290ZXJcIj5cbiAgICA8YnV0dG9uIGNsYXNzPVwiZXhwb3J0LWJ1dHRvblwiIChjbGljayk9XCJzYXZlKClcIj5JbXBvcnQ8L2J1dHRvbj5cbiAgPC9kaXY+XG48L3ZlcmJlbi1jYXJkPlxuXG48IS0tIE1vZGFsIENvbXBvbmVudCAtLT5cbjx2ZXJiZW4tZGlhbG9ndWVcbiAgW3Nob3dDbG9zZUljb25dPVwidHJ1ZVwiXG4gIFtkaXNtaXNzT3V0c2lkZUNsaWNrXT1cInRydWVcIlxuICBbY2xvc2VPbkVzY2FwZV09XCJ0cnVlXCJcbiAgW3NpemVdPVwiJ2xhcmdlJ1wiXG4gIFttb2RlXT1cIidkaWFsb2d1ZSdcIlxuICBbY3VzdG9tQ2xhc3NdPVwiJ215LW1vZGFsLWN1c3RvbS1jbGFzcydcIlxuICBbZGlzYWJsZUZvb3Rlcl09XCJmYWxzZVwiXG4gIFttb2RhbERhdGFdPVwiW3sgZGF0YTogeyBmaXJzdF9uYW1lOiAndmVyYmVuLW5nJywgbGFzdF9uYW1lOiAndmVyYmVuYScgfSB9XVwiXG4gIFtpc1Zpc2libGVdPVwic2hvd1ByZXZpZXdcIlxuICBbaGVhZGVyVGVtcGxhdGVdPVwiaGVhZGVyVGVtcGxhdGVcIlxuICBbYm9keVRlbXBsYXRlXT1cImJvZHlUZW1wbGF0ZVwiXG4gIFtmb290ZXJUZW1wbGF0ZV09XCJmb290ZXJUZW1wbGF0ZVwiXG4+XG4gIDxhIGRvd25sb2FkPVwiXCI+PC9hPlxuPC92ZXJiZW4tZGlhbG9ndWU+XG5cbjwhLS0gRGVmaW5lIHRlbXBsYXRlcyAtLT5cbjxuZy10ZW1wbGF0ZSAjaGVhZGVyVGVtcGxhdGU+XG4gIDxoMj5VcGxvYWQgUHJldmlldzwvaDI+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI2JvZHlUZW1wbGF0ZT5cbiAgPGRpdiBjbGFzcz1cImZsZXggZ2FwLTQgaXRlbXMtY2VudGVyIGp1c3RpZnktYmV0d2VlblwiPlxuICAgIDxwIGNsYXNzPVwiXCI+VG90YWwgSXRlbXM6IHt7IHByZXZpZXdEYXRhKCk/Lmxlbmd0aCB9fTwvcD5cblxuICAgIDx2ZXJiZW4tZHJvcC1kb3duXG4gICAgICBbbXVsdGlzZWxlY3RdPVwidHJ1ZVwiXG4gICAgICBwbGFjZWhvbGRlcj1cIkZpbmQgZHVwbGljYXRlcyBieVwiXG4gICAgICBbb3B0aW9uc109XCJmaWVsZHMoKVwiXG4gICAgICBbbmdNb2RlbF09XCJ1bmlxdWVJZGVudGlmaWVycygpXCJcbiAgICAgIChuZ01vZGVsQ2hhbmdlKT1cInVuaXF1ZUlkZW50aWZpZXJzLnNldCgkZXZlbnQpXCJcbiAgICA+PC92ZXJiZW4tZHJvcC1kb3duPlxuICA8L2Rpdj5cbiAgPGxpYi1kYXRhLXRhYmxlXG4gICAgW2RhdGFdPVwicHJldmlld0RhdGEoKSA/PyBbXVwiXG4gICAgW2NvbHVtbnNdPVwicHJldmlld0NvbHVtbnMoKSA/PyBbXVwiXG4gICAgW2Zvcm1Hcm91cENvbmZpZ109XCJmb3JtR3JvdXBDb25maWcoKVwiXG4gID5cbiAgICBAZm9yIChjb2x1bW4gb2YgcHJldmlld0NvbHVtbnMoKTsgdHJhY2sgY29sdW1uLmlkKSB7XG4gICAgPG5nLWNvbnRhaW5lciBbbGliQ29sdW1uXT1cImNvbHVtbi5pZFwiPlxuICAgICAgPCEtLSA8bmctdGVtcGxhdGUgI2NlbGwgbGV0LXZhbHVlPVwidmFsdWVcIiBsZXQtcm93PVwicm93XCI+XG4gICAgICAgIDxwPnt7IHZhbHVlIH19PC9wPlxuICAgICAgPC9uZy10ZW1wbGF0ZT4gLS0+XG4gICAgICBAaWYgKGNvbHVtbi5mb3JtQ29udHJvbE5hbWUgfHwgY29sdW1uLmFjY2Vzc29yS2V5KSB7XG4gICAgICA8bmctdGVtcGxhdGVcbiAgICAgICAgI2NlbGxcbiAgICAgICAgbGV0LXZhbHVlPVwidmFsdWVcIlxuICAgICAgICBsZXQtcm93PVwicm93XCJcbiAgICAgICAgbGV0LWZvcm1Db250cm9sPVwiZm9ybUNvbnRyb2xcIlxuICAgICAgPlxuICAgICAgICBAaWYgKGZvcm1Db250cm9sKSB7XG4gICAgICAgIDxpbnB1dCB0eXBlPVwidGV4dFwiIFtmb3JtQ29udHJvbF09XCJmb3JtQ29udHJvbFwiIC8+XG4gICAgICAgIH0gQGVsc2UgaWYgKGNvbHVtbi5hY2Nlc3NvcktleSkge1xuICAgICAgICA8aW5wdXQgdHlwZT1cInRleHRcIiBbbmdNb2RlbF09XCJ2YWx1ZVwiIC8+XG4gICAgICAgIH0gQGVsc2UgaWYgKGNvbHVtbi5jZWxsRWRpdFRlbXBsYXRlKSB7XG4gICAgICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgICBbbmdUZW1wbGF0ZU91dGxldF09XCJjb2x1bW4uY2VsbEVkaXRUZW1wbGF0ZVwiXG4gICAgICAgICAgW25nVGVtcGxhdGVPdXRsZXRDb250ZXh0XT1cImZvcm1Db250cm9sXCJcbiAgICAgICAgPjwvbmctY29udGFpbmVyPlxuICAgICAgICB9XG4gICAgICA8L25nLXRlbXBsYXRlPlxuXG4gICAgICA8bmctdGVtcGxhdGVcbiAgICAgICAgI2NlbGxFZGl0XG4gICAgICAgIGxldC12YWx1ZT1cInZhbHVlXCJcbiAgICAgICAgbGV0LXJvdz1cInJvd1wiXG4gICAgICAgIGxldC1mb3JtQ29udHJvbD1cImZvcm1Db250cm9sXCJcbiAgICAgID5cbiAgICAgICAgQGlmIChmb3JtQ29udHJvbCkge1xuICAgICAgICA8aW5wdXQgdHlwZT1cInRleHRcIiBbZm9ybUNvbnRyb2xdPVwiZm9ybUNvbnRyb2xcIiAvPlxuICAgICAgICB9IEBlbHNlIGlmIChjb2x1bW4uYWNjZXNzb3JLZXkpIHtcbiAgICAgICAgPGlucHV0IHR5cGU9XCJ0ZXh0XCIgW25nTW9kZWxdPVwidmFsdWVcIiAvPlxuICAgICAgICB9IEBlbHNlIGlmIChjb2x1bW4uY2VsbEVkaXRUZW1wbGF0ZSkge1xuICAgICAgICA8bmctY29udGFpbmVyXG4gICAgICAgICAgW25nVGVtcGxhdGVPdXRsZXRdPVwiY29sdW1uLmNlbGxFZGl0VGVtcGxhdGVcIlxuICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJmb3JtQ29udHJvbFwiXG4gICAgICAgID48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgfVxuICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICAgIH1cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgICB9XG5cbiAgICA8bmctY29udGFpbmVyIGxpYkNvbHVtbj1cImFjdGlvbnNcIj5cbiAgICAgIDxuZy10ZW1wbGF0ZVxuICAgICAgICAjY2VsbFxuICAgICAgICBsZXQtdmFsdWVcbiAgICAgICAgbGV0LWRlbGV0ZVJvdz1cImRlbGV0ZVJvd1wiXG4gICAgICAgIGxldC1pc0VkaXRpbmc9XCJpc0VkaXRpbmdcIlxuICAgICAgICBsZXQtdG9nZ2xlUm93RWRpdD1cInRvZ2dsZVJvd0VkaXRcIlxuICAgICAgICBsZXQtcm93PVwicm93XCJcbiAgICAgICAgbGV0LXJvd0luZGV4PVwicm93SW5kZXhcIlxuICAgICAgPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBnYXAtNlwiPlxuICAgICAgICAgIDx2ZXJiZW4tc3ZnXG4gICAgICAgICAgICAoY2xpY2spPVwidG9nZ2xlUm93RWRpdCgpXCJcbiAgICAgICAgICAgIGljb249XCJlZGl0XCJcbiAgICAgICAgICAgIFt3aWR0aF09XCIxNVwiXG4gICAgICAgICAgICBbaGVpZ2h0XT1cIjE1XCJcbiAgICAgICAgICAgIGNsYXNzPVwiY3Vyc29yLXBvaW50ZXJcIlxuICAgICAgICAgID48L3ZlcmJlbi1zdmc+XG5cbiAgICAgICAgICA8dmVyYmVuLXN2Z1xuICAgICAgICAgICAgaWNvbj1cImRlbGV0ZVwiXG4gICAgICAgICAgICBbd2lkdGhdPVwiMTVcIlxuICAgICAgICAgICAgW2hlaWdodF09XCIxNVwiXG4gICAgICAgICAgICAoY2xpY2spPVwiZGVsZXRlUm93KClcIlxuICAgICAgICAgICAgY2xhc3M9XCJjdXJzb3ItcG9pbnRlclwiXG4gICAgICAgICAgPjwvdmVyYmVuLXN2Zz5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L25nLXRlbXBsYXRlPlxuXG4gICAgICA8bmctdGVtcGxhdGVcbiAgICAgICAgI2NlbGxFZGl0XG4gICAgICAgIGxldC12YWx1ZVxuICAgICAgICBsZXQtZGVsZXRlUm93XG4gICAgICAgIGxldC1pc0VkaXRpbmc9XCJpc0VkaXRpbmdcIlxuICAgICAgICBsZXQtdG9nZ2xlUm93RWRpdD1cInRvZ2dsZVJvd0VkaXRcIlxuICAgICAgICBsZXQtcm93PVwicm93XCJcbiAgICAgICAgbGV0LXJvd0luZGV4PVwicm93SW5kZXhcIlxuICAgICAgPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBnYXAtNlwiPlxuICAgICAgICAgIDx2ZXJiZW4tc3ZnXG4gICAgICAgICAgICAoY2xpY2spPVwidG9nZ2xlUm93RWRpdCgpXCJcbiAgICAgICAgICAgIGljb249XCJ0aWNrXCJcbiAgICAgICAgICAgIFt3aWR0aF09XCIxNVwiXG4gICAgICAgICAgICBbaGVpZ2h0XT1cIjE1XCJcbiAgICAgICAgICAgIGNsYXNzPVwiY3Vyc29yLXBvaW50ZXJcIlxuICAgICAgICAgID48L3ZlcmJlbi1zdmc+XG5cbiAgICAgICAgICA8dmVyYmVuLXN2Z1xuICAgICAgICAgICAgaWNvbj1cImRlbGV0ZVwiXG4gICAgICAgICAgICBbd2lkdGhdPVwiMTVcIlxuICAgICAgICAgICAgW2hlaWdodF09XCIxNVwiXG4gICAgICAgICAgICAoY2xpY2spPVwidG9nZ2xlUm93RWRpdCgpXCJcbiAgICAgICAgICAgIGNsYXNzPVwiY3Vyc29yLXBvaW50ZXJcIlxuICAgICAgICAgID48L3ZlcmJlbi1zdmc+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgPC9saWItZGF0YS10YWJsZT5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjZm9vdGVyVGVtcGxhdGU+XG4gIDwhLS0gPGJ1dHRvbiBjbGFzcz1cImJ0biBidG4tc2Vjb25kYXJ5XCIgKGNsaWNrKT1cIm9uTW9kYWxDbG9zZSgkZXZlbnQpXCI+Q2FuY2VsPC9idXR0b24+XG4gIDxidXR0b24gY2xhc3M9XCJidG4gYnRuLXByaW1hcnlcIiAoY2xpY2spPVwib25Db25maXJtKClcIj5Db25maXJtPC9idXR0b24+IC0tPlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YS1pbXBvcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdmVyYmVuLW5nLXVpL3NyYy9saWIvY29tcG9uZW50cy9kYXRhLWltcG9ydC9kYXRhLWltcG9ydC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4tbmctdWkvc3JjL2xpYi9jb21wb25lbnRzL2RhdGEtaW1wb3J0L2RhdGEtaW1wb3J0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsTUFBTSxFQUNOLEtBQUssRUFDTCxNQUFNLEVBQ04sTUFBTSxHQUVQLE1BQU0sZUFBZSxDQUFDO0FBS3ZCLE9BQU8sRUFFTCxTQUFTLEdBR1YsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7Ozs7Ozs7QUFPeEIsTUFBTSxPQUFPLG1CQUFtQjtJQUM5QixjQUFjLEdBQUcsS0FBSyxFQUF5QixDQUFDO0lBQ2hELGVBQWUsR0FBRyxLQUFLLEVBSXBCLENBQUM7SUFDSixNQUFNLEdBQUcsS0FBSyxDQUFXLEVBQUUsQ0FBQyxDQUFDO0lBQzdCLEtBQUssR0FBRyxLQUFLLEVBQVUsQ0FBQztJQUN4QixXQUFXLEdBQUcsS0FBSyxFQUFPLENBQUM7SUFDM0IsbUJBQW1CLEdBQUcsTUFBTSxFQUFZLENBQUM7SUFDekMsV0FBVyxHQUFHLE1BQU0sRUFBUSxDQUFDO0lBQzdCLGVBQWUsR0FBRyxNQUFNLEVBQU8sQ0FBQztJQUVoQyxrQkFBa0IsR0FBMEIsRUFBRSxDQUFDO0lBQy9DLEtBQUssR0FBRyxJQUFJLFNBQVMsQ0FBWSxFQUFFLENBQUMsQ0FBQztJQUNyQyxpQkFBaUIsR0FBNkIsTUFBTSxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBRWpELElBQUksR0FBMkIsTUFBTSxDQUFDO0lBRTlDLEtBQUssR0FBVyxFQUFFLENBQUM7SUFDbkIsVUFBVSxHQUFHLEtBQUssQ0FBQztJQUNuQixXQUFXLEdBQUcsS0FBSyxDQUFDO0lBRXBCO1FBQ0UsTUFBTSxDQUFDLEdBQUcsRUFBRTtZQUNWLElBQUksQ0FBQyxXQUFXLEVBQUUsRUFBRSxPQUFPLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRTtnQkFDcEMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUNyQixDQUFDLENBQUMsQ0FBQztZQUVILE9BQU8sQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDLENBQUM7UUFDckMsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsVUFBVSxDQUFDLEtBQWdCO1FBQ3pCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN2QixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQztJQUN6QixDQUFDO0lBRUQsV0FBVyxDQUFDLEtBQWdCO1FBQzFCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN2QixJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztJQUMxQixDQUFDO0lBRUQsTUFBTSxDQUFDLEtBQWdCO1FBQ3JCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN2QixJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztRQUN4QixJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLFlBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNuRCxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDckMsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUM7SUFDMUIsQ0FBQztJQUVELGNBQWMsQ0FBQyxLQUFVO1FBQ3ZCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzVDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNyQyxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQztJQUMxQixDQUFDO0lBRUQsS0FBSyxLQUFJLENBQUM7SUFFVixJQUFJO1FBQ0YsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxJQUFJLEVBQUUsQ0FBQyxDQUFDO1FBQ3BELElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDO0lBQzFCLENBQUM7SUFFRCxlQUFlO1FBQ2IsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxFQUFFLFFBQVEsQ0FBQztRQUNsRCxJQUFJLFFBQVEsRUFBRSxDQUFDO1lBQ2IsT0FBTyxNQUFNLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQy9CLENBQUM7UUFDRCxPQUFPLEVBQUUsQ0FBQztJQUNaLENBQUM7SUFFRCxvQkFBb0I7UUFDbEIsTUFBTSxFQUFFLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxFQUFFLFFBQVEsQ0FBQztRQUM1QyxJQUFJLEVBQUUsRUFBRSxDQUFDO1lBQ1AsSUFBSSxDQUFDLG1CQUFtQixDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDakQsQ0FBQzthQUFNLENBQUM7WUFDTixJQUFJLENBQUMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQyxDQUFDO1FBQy9DLENBQUM7SUFDSCxDQUFDO3dHQWhGVSxtQkFBbUI7NEZBQW5CLG1CQUFtQixrMkJDeEJoQyw0NE1BOE5BOzs0RkR0TWEsbUJBQW1CO2tCQUwvQixTQUFTOytCQUNFLGlCQUFpQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgZWZmZWN0LFxuICBpbnB1dCxcbiAgb3V0cHV0LFxuICBzaWduYWwsXG4gIFdyaXRhYmxlU2lnbmFsLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gIENvbHVtbkRlZmluaXRpb24sXG4gIEZvcm1Hcm91cENvbmZpZyxcbn0gZnJvbSAnLi4vZGF0YS10YWJsZS9kYXRhLXRhYmxlLnR5cGVzJztcbmltcG9ydCB7XG4gIEFic3RyYWN0Q29udHJvbCxcbiAgRm9ybUFycmF5LFxuICBGb3JtQ29udHJvbCxcbiAgRm9ybUdyb3VwLFxufSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2xpYi1kYXRhLWltcG9ydCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9kYXRhLWltcG9ydC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9kYXRhLWltcG9ydC5jb21wb25lbnQuY3NzJyxcbn0pXG5leHBvcnQgY2xhc3MgRGF0YUltcG9ydENvbXBvbmVudDxUPiB7XG4gIHByZXZpZXdDb2x1bW5zID0gaW5wdXQ8Q29sdW1uRGVmaW5pdGlvbjxUPltdPigpO1xuICBmb3JtR3JvdXBDb25maWcgPSBpbnB1dDxcbiAgICBGb3JtR3JvdXBDb25maWc8e1xuICAgICAgW0sgaW4ga2V5b2YgVF06IEFic3RyYWN0Q29udHJvbDtcbiAgICB9PlxuICA+KCk7XG4gIGZpZWxkcyA9IGlucHV0PHN0cmluZ1tdPihbXSk7XG4gIHRpdGxlID0gaW5wdXQ8c3RyaW5nPigpO1xuICBwcmV2aWV3RGF0YSA9IGlucHV0PFRbXT4oKTtcbiAgZXhwb3J0VGVtcGxhdGVFdmVudCA9IG91dHB1dDxzdHJpbmdbXT4oKTtcbiAgaW1wb3J0RXZlbnQgPSBvdXRwdXQ8RmlsZT4oKTtcbiAgaW1wb3J0RXZlbnREYXRhID0gb3V0cHV0PFRbXT4oKTtcblxuICBwcmV2aWV3Q29sdW1uc0xpc3Q6IENvbHVtbkRlZmluaXRpb248VD5bXSA9IFtdO1xuICBmb3JtcyA9IG5ldyBGb3JtQXJyYXk8Rm9ybUdyb3VwPihbXSk7XG4gIHVuaXF1ZUlkZW50aWZpZXJzOiBXcml0YWJsZVNpZ25hbDxzdHJpbmdbXT4gPSBzaWduYWwoW10pO1xuXG4gIHByaXZhdGUgX2V4dDogJ3hsc3gnIHwgJ3hscycgfCAnY3N2JyA9ICd4bHN4JztcblxuICBmaWxlczogRmlsZVtdID0gW107XG4gIGlzRHJhZ2dpbmcgPSBmYWxzZTtcbiAgc2hvd1ByZXZpZXcgPSBmYWxzZTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBlZmZlY3QoKCkgPT4ge1xuICAgICAgdGhpcy5wcmV2aWV3RGF0YSgpPy5mb3JFYWNoKChkYXR1bSkgPT4ge1xuICAgICAgICBjb25zb2xlLmxvZyhkYXR1bSk7XG4gICAgICB9KTtcblxuICAgICAgY29uc29sZS5sb2codGhpcy5wcmV2aWV3Q29sdW1ucygpKTtcbiAgICB9KTtcbiAgfVxuXG4gIG9uRHJhZ092ZXIoZXZlbnQ6IERyYWdFdmVudCkge1xuICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgdGhpcy5pc0RyYWdnaW5nID0gdHJ1ZTtcbiAgfVxuXG4gIG9uRHJhZ0xlYXZlKGV2ZW50OiBEcmFnRXZlbnQpIHtcbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIHRoaXMuaXNEcmFnZ2luZyA9IGZhbHNlO1xuICB9XG5cbiAgb25Ecm9wKGV2ZW50OiBEcmFnRXZlbnQpIHtcbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIHRoaXMuaXNEcmFnZ2luZyA9IGZhbHNlO1xuICAgIHRoaXMuZmlsZXMgPSBBcnJheS5mcm9tKGV2ZW50LmRhdGFUcmFuc2ZlciEuZmlsZXMpO1xuICAgIHRoaXMuaW1wb3J0RXZlbnQuZW1pdCh0aGlzLmZpbGVzWzBdKTtcbiAgICB0aGlzLnNob3dQcmV2aWV3ID0gdHJ1ZTtcbiAgfVxuXG4gIG9uRmlsZVNlbGVjdGVkKGV2ZW50OiBhbnkpIHtcbiAgICB0aGlzLmZpbGVzID0gQXJyYXkuZnJvbShldmVudC50YXJnZXQuZmlsZXMpO1xuICAgIHRoaXMuaW1wb3J0RXZlbnQuZW1pdCh0aGlzLmZpbGVzWzBdKTtcbiAgICB0aGlzLnNob3dQcmV2aWV3ID0gdHJ1ZTtcbiAgfVxuXG4gIHJlc2V0KCkge31cblxuICBzYXZlKCkge1xuICAgIHRoaXMuaW1wb3J0RXZlbnREYXRhLmVtaXQodGhpcy5wcmV2aWV3RGF0YSgpIHx8IFtdKTtcbiAgICB0aGlzLnNob3dQcmV2aWV3ID0gdHJ1ZTtcbiAgfVxuXG4gIGdldENvbnRyb2xOYW1lcygpIHtcbiAgICBjb25zdCBjb250cm9scyA9IHRoaXMuZm9ybUdyb3VwQ29uZmlnKCk/LmNvbnRyb2xzO1xuICAgIGlmIChjb250cm9scykge1xuICAgICAgcmV0dXJuIE9iamVjdC5rZXlzKGNvbnRyb2xzKTtcbiAgICB9XG4gICAgcmV0dXJuIFtdO1xuICB9XG5cbiAgaGFuZGxlVGVtcGxhdGVFeHBvcnQoKSB7XG4gICAgY29uc3QgZmcgPSB0aGlzLmZvcm1Hcm91cENvbmZpZygpPy5jb250cm9scztcbiAgICBpZiAoZmcpIHtcbiAgICAgIHRoaXMuZXhwb3J0VGVtcGxhdGVFdmVudC5lbWl0KE9iamVjdC5rZXlzKGZnKSk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuZXhwb3J0VGVtcGxhdGVFdmVudC5lbWl0KHRoaXMuZmllbGRzKCkpO1xuICAgIH1cbiAgfVxuXG4gIC8vIGdldEZvcm1Db250cm9sKGluZGV4OiBudW1iZXIsIGZpZWxkOiBzdHJpbmcpIHtcbiAgLy8gICBjb25zdCBjb250cm9sID0gdGhpcy4uZ2V0KGluZGV4KT8uZ2V0KGZpZWxkKSBhcyBGb3JtQ29udHJvbDxhbnk+O1xuICAvLyAgIGNvbnNvbGUubG9nKGNvbnRyb2wpO1xuICAvLyAgIHJldHVybiBjb250cm9sO1xuICAvLyB9XG59XG4iLCI8dmVyYmVuLWNhcmRcbiAgd2lkdGg9XCIyNHJlbVwiXG4gIGJvcmRlclJhZGl1cz1cIjFyZW1cIlxuICBbYm9yZGVyXT1cIicxcHggc29saWQgI0Q0QTAwNydcIlxuICBiZ0NvbG9yPVwiI0ZGRkZGRlwiXG4gIGNsYXNzPVwiZXhwb3J0LWNhcmRcIlxuPlxuICA8ZGl2IGNhcmQtaGVhZGVyIGNsYXNzPVwiY2FyZC1oZWFkZXJcIj5cbiAgICA8aDQgY2xhc3M9XCJoZWFkZXItdGl0bGVcIj5JbXBvcnQ8L2g0PlxuICAgIDxidXR0b25cbiAgICAgIGNsYXNzPVwicmVzZXQtYnV0dG9uXCJcbiAgICAgIFtzdHlsZS5jb2xvcl09XCInIzM0NzlFOSdcIlxuICAgICAgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVwiJ3RyYW5zcGFyZW50J1wiXG4gICAgICBbc3R5bGUuYm9yZGVyXT1cIidub25lJ1wiXG4gICAgICBbc3R5bGUuY3Vyc29yXT1cIidwb2ludGVyJ1wiXG4gICAgICBbc3R5bGUuZm9udC1zaXplXT1cIicxMnB4J1wiXG4gICAgICAoY2xpY2spPVwicmVzZXQoKVwiXG4gICAgPlxuICAgICAgUmVzZXRcbiAgICA8L2J1dHRvbj5cbiAgPC9kaXY+XG4gIDxkaXYgY2FyZC1ib2R5IGNsYXNzPVwiY2FyZC1ib2R5XCI+XG4gICAgPGRpdiBjbGFzcz1cImZsZXggZ2FwLTQganVzdGlmeS1iZXR3ZWVuXCI+XG4gICAgICA8YnV0dG9uIGNsYXNzPVwiZXhwb3J0LWJ1dHRvblwiIChjbGljayk9XCJoYW5kbGVUZW1wbGF0ZUV4cG9ydCgpXCI+XG4gICAgICAgIERvd25sb2FkIFRlbXBsYXRlXG4gICAgICA8L2J1dHRvbj5cbiAgICAgIDxidXR0b24gY2xhc3M9XCJleHBvcnQtYnV0dG9uXCIgKGNsaWNrKT1cInNhdmUoKVwiPlVwbG9hZCBGaWxlPC9idXR0b24+XG4gICAgPC9kaXY+XG4gICAgPGhyIGNsYXNzPVwiZGl2aWRlclwiIC8+XG4gICAgPHNlY3Rpb24gY2xhc3M9XCJzZWN0aW9uXCI+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzPVwiZHJvcC1hcmVhXCJcbiAgICAgICAgKGRyYWdvdmVyKT1cIm9uRHJhZ092ZXIoJGV2ZW50KVwiXG4gICAgICAgIChkcmFnbGVhdmUpPVwib25EcmFnTGVhdmUoJGV2ZW50KVwiXG4gICAgICAgIChkcm9wKT1cIm9uRHJvcCgkZXZlbnQpXCJcbiAgICAgID5cbiAgICAgICAgPHA+XG4gICAgICAgICAgRHJhZyBhbmQgZHJvcCBmaWxlcyBoZXJlIG9yXG4gICAgICAgICAgPGxhYmVsIGZvcj1cImZpbGVJbnB1dFwiPmNsaWNrIHRvIGJyb3dzZTwvbGFiZWw+XG4gICAgICAgIDwvcD5cbiAgICAgICAgPGlucHV0XG4gICAgICAgICAgdHlwZT1cImZpbGVcIlxuICAgICAgICAgIGlkPVwiZmlsZUlucHV0XCJcbiAgICAgICAgICAoY2hhbmdlKT1cIm9uRmlsZVNlbGVjdGVkKCRldmVudClcIlxuICAgICAgICAgIHN0eWxlPVwiZGlzcGxheTogbm9uZVwiXG4gICAgICAgICAgYWNjZXB0PVwiLmNzdiwgYXBwbGljYXRpb24vdm5kLm9wZW54bWxmb3JtYXRzLW9mZmljZWRvY3VtZW50LnNwcmVhZHNoZWV0bWwuc2hlZXQsIGFwcGxpY2F0aW9uL3ZuZC5tcy1leGNlbFwiXG4gICAgICAgICAgbXVsdGlwbGVcbiAgICAgICAgLz5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiAqbmdJZj1cImZpbGVzLmxlbmd0aCA+IDBcIj5cbiAgICAgICAgPGgzPlVwbG9hZGVkIEZpbGVzOjwvaDM+XG4gICAgICAgIDx1bD5cbiAgICAgICAgICA8bGkgKm5nRm9yPVwibGV0IGZpbGUgb2YgZmlsZXNcIj57eyBmaWxlLm5hbWUgfX08L2xpPlxuICAgICAgICA8L3VsPlxuICAgICAgPC9kaXY+XG4gICAgPC9zZWN0aW9uPlxuICA8L2Rpdj5cbiAgPGRpdiBjYXJkLWZvb3RlciBjbGFzcz1cImNhcmQtZm9vdGVyXCI+XG4gICAgPGJ1dHRvbiBjbGFzcz1cImV4cG9ydC1idXR0b25cIiAoY2xpY2spPVwic2F2ZSgpXCI+SW1wb3J0PC9idXR0b24+XG4gIDwvZGl2PlxuPC92ZXJiZW4tY2FyZD5cblxuPCEtLSBNb2RhbCBDb21wb25lbnQgLS0+XG48dmVyYmVuLWRpYWxvZ3VlXG4gIFtzaG93Q2xvc2VJY29uXT1cInRydWVcIlxuICBbZGlzbWlzc091dHNpZGVDbGlja109XCJ0cnVlXCJcbiAgW2Nsb3NlT25Fc2NhcGVdPVwidHJ1ZVwiXG4gIFtzaXplXT1cIidsYXJnZSdcIlxuICBbbW9kZV09XCInZGlhbG9ndWUnXCJcbiAgW2N1c3RvbUNsYXNzXT1cIidteS1tb2RhbC1jdXN0b20tY2xhc3MnXCJcbiAgW2Rpc2FibGVGb290ZXJdPVwiZmFsc2VcIlxuICBbbW9kYWxEYXRhXT1cIlt7IGRhdGE6IHsgZmlyc3RfbmFtZTogJ3ZlcmJlbi1uZycsIGxhc3RfbmFtZTogJ3ZlcmJlbmEnIH0gfV1cIlxuICBbaXNWaXNpYmxlXT1cInNob3dQcmV2aWV3XCJcbiAgW2hlYWRlclRlbXBsYXRlXT1cImhlYWRlclRlbXBsYXRlXCJcbiAgW2JvZHlUZW1wbGF0ZV09XCJib2R5VGVtcGxhdGVcIlxuICBbZm9vdGVyVGVtcGxhdGVdPVwiZm9vdGVyVGVtcGxhdGVcIlxuPlxuICA8YSBkb3dubG9hZD1cIlwiPjwvYT5cbjwvdmVyYmVuLWRpYWxvZ3VlPlxuXG48IS0tIERlZmluZSB0ZW1wbGF0ZXMgLS0+XG48bmctdGVtcGxhdGUgI2hlYWRlclRlbXBsYXRlPlxuICA8aDI+VXBsb2FkIFByZXZpZXc8L2gyPlxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNib2R5VGVtcGxhdGU+XG4gIDxkaXYgY2xhc3M9XCJmbGV4IGdhcC00IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWJldHdlZW5cIj5cbiAgICA8cCBjbGFzcz1cIlwiPlRvdGFsIEl0ZW1zOiB7eyBwcmV2aWV3RGF0YSgpPy5sZW5ndGggfX08L3A+XG5cbiAgICA8dmVyYmVuLWRyb3AtZG93blxuICAgICAgW211bHRpc2VsZWN0XT1cInRydWVcIlxuICAgICAgcGxhY2Vob2xkZXI9XCJGaW5kIGR1cGxpY2F0ZXMgYnlcIlxuICAgICAgW29wdGlvbnNdPVwiZmllbGRzKClcIlxuICAgICAgW25nTW9kZWxdPVwidW5pcXVlSWRlbnRpZmllcnMoKVwiXG4gICAgICAobmdNb2RlbENoYW5nZSk9XCJ1bmlxdWVJZGVudGlmaWVycy5zZXQoJGV2ZW50KVwiXG4gICAgPjwvdmVyYmVuLWRyb3AtZG93bj5cbiAgPC9kaXY+XG4gIDxsaWItZGF0YS10YWJsZVxuICAgIFtkYXRhXT1cInByZXZpZXdEYXRhKCkgPz8gW11cIlxuICAgIFtjb2x1bW5zXT1cInByZXZpZXdDb2x1bW5zKCkgPz8gW11cIlxuICAgIFtmb3JtR3JvdXBDb25maWddPVwiZm9ybUdyb3VwQ29uZmlnKClcIlxuICA+XG4gICAgQGZvciAoY29sdW1uIG9mIHByZXZpZXdDb2x1bW5zKCk7IHRyYWNrIGNvbHVtbi5pZCkge1xuICAgIDxuZy1jb250YWluZXIgW2xpYkNvbHVtbl09XCJjb2x1bW4uaWRcIj5cbiAgICAgIDxuZy10ZW1wbGF0ZVxuICAgICAgICAjY2VsbFxuICAgICAgICBsZXQtdmFsdWU9XCJ2YWx1ZVwiXG4gICAgICAgIGxldC1yb3c9XCJyb3dcIlxuICAgICAgICBsZXQtZm9ybUNvbnRyb2w9XCJmb3JtQ29udHJvbFwiXG4gICAgICAgIGxldC11cGRhdGVWYWx1ZT1cInVwZGF0ZVZhbHVlXCJcbiAgICAgID5cbiAgICAgICAgPHZlcmJlbmEtaW5wdXRcbiAgICAgICAgICBbdmFsdWVdPVwidmFsdWVcIlxuICAgICAgICAgICh2YWx1ZUNoYW5nZSk9XCJ1cGRhdGVWYWx1ZSgkZXZlbnQpXCJcbiAgICAgICAgPjwvdmVyYmVuYS1pbnB1dD5cbiAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgICA8IS0tIEBpZiAoY29sdW1uLmZvcm1Db250cm9sTmFtZSB8fCBjb2x1bW4uYWNjZXNzb3JLZXkpIHtcbiAgICAgIDxuZy10ZW1wbGF0ZVxuICAgICAgICAjY2VsbFxuICAgICAgICBsZXQtdmFsdWU9XCJ2YWx1ZVwiXG4gICAgICAgIGxldC1yb3c9XCJyb3dcIlxuICAgICAgICBsZXQtZm9ybUNvbnRyb2w9XCJmb3JtQ29udHJvbFwiXG4gICAgICA+XG4gICAgICAgIEBpZiAoZm9ybUNvbnRyb2wpIHtcbiAgICAgICAgPGlucHV0IHR5cGU9XCJ0ZXh0XCIgW2Zvcm1Db250cm9sXT1cImZvcm1Db250cm9sXCIgLz5cbiAgICAgICAgfSBAZWxzZSBpZiAoY29sdW1uLmFjY2Vzc29yS2V5KSB7XG4gICAgICAgIDxpbnB1dCB0eXBlPVwidGV4dFwiIFtuZ01vZGVsXT1cInZhbHVlXCIgLz5cbiAgICAgICAgfSBAZWxzZSBpZiAoY29sdW1uLmNlbGxFZGl0VGVtcGxhdGUpIHtcbiAgICAgICAgPG5nLWNvbnRhaW5lclxuICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImNvbHVtbi5jZWxsRWRpdFRlbXBsYXRlXCJcbiAgICAgICAgICBbbmdUZW1wbGF0ZU91dGxldENvbnRleHRdPVwiZm9ybUNvbnRyb2xcIlxuICAgICAgICA+PC9uZy1jb250YWluZXI+XG4gICAgICAgIH1cbiAgICAgIDwvbmctdGVtcGxhdGU+XG5cbiAgICAgIDxuZy10ZW1wbGF0ZVxuICAgICAgICAjY2VsbEVkaXRcbiAgICAgICAgbGV0LXZhbHVlPVwidmFsdWVcIlxuICAgICAgICBsZXQtcm93PVwicm93XCJcbiAgICAgICAgbGV0LWZvcm1Db250cm9sPVwiZm9ybUNvbnRyb2xcIlxuICAgICAgPlxuICAgICAgICBAaWYgKGZvcm1Db250cm9sKSB7XG4gICAgICAgIDxpbnB1dCB0eXBlPVwidGV4dFwiIFtmb3JtQ29udHJvbF09XCJmb3JtQ29udHJvbFwiIC8+XG4gICAgICAgIH0gQGVsc2UgaWYgKGNvbHVtbi5hY2Nlc3NvcktleSkge1xuICAgICAgICA8aW5wdXQgdHlwZT1cInRleHRcIiBbbmdNb2RlbF09XCJ2YWx1ZVwiIC8+XG4gICAgICAgIH0gQGVsc2UgaWYgKGNvbHVtbi5jZWxsRWRpdFRlbXBsYXRlKSB7XG4gICAgICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgICBbbmdUZW1wbGF0ZU91dGxldF09XCJjb2x1bW4uY2VsbEVkaXRUZW1wbGF0ZVwiXG4gICAgICAgICAgW25nVGVtcGxhdGVPdXRsZXRDb250ZXh0XT1cImZvcm1Db250cm9sXCJcbiAgICAgICAgPjwvbmctY29udGFpbmVyPlxuICAgICAgICB9XG4gICAgICA8L25nLXRlbXBsYXRlPlxuICAgICAgfSAtLT5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgICB9XG5cbiAgICA8bmctY29udGFpbmVyIGxpYkNvbHVtbj1cImFjdGlvbnNcIj5cbiAgICAgIDxuZy10ZW1wbGF0ZVxuICAgICAgICAjY2VsbFxuICAgICAgICBsZXQtdmFsdWVcbiAgICAgICAgbGV0LWRlbGV0ZVJvdz1cImRlbGV0ZVJvd1wiXG4gICAgICAgIGxldC1pc0VkaXRpbmc9XCJpc0VkaXRpbmdcIlxuICAgICAgICBsZXQtdG9nZ2xlUm93RWRpdD1cInRvZ2dsZVJvd0VkaXRcIlxuICAgICAgICBsZXQtcm93PVwicm93XCJcbiAgICAgICAgbGV0LXJvd0luZGV4PVwicm93SW5kZXhcIlxuICAgICAgPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBnYXAtNlwiPlxuICAgICAgICAgIDx2ZXJiZW4tc3ZnXG4gICAgICAgICAgICAoY2xpY2spPVwidG9nZ2xlUm93RWRpdCgpXCJcbiAgICAgICAgICAgIGljb249XCJlZGl0XCJcbiAgICAgICAgICAgIFt3aWR0aF09XCIxNVwiXG4gICAgICAgICAgICBbaGVpZ2h0XT1cIjE1XCJcbiAgICAgICAgICAgIGNsYXNzPVwiY3Vyc29yLXBvaW50ZXJcIlxuICAgICAgICAgID48L3ZlcmJlbi1zdmc+XG5cbiAgICAgICAgICA8dmVyYmVuLXN2Z1xuICAgICAgICAgICAgaWNvbj1cImRlbGV0ZVwiXG4gICAgICAgICAgICBbd2lkdGhdPVwiMTVcIlxuICAgICAgICAgICAgW2hlaWdodF09XCIxNVwiXG4gICAgICAgICAgICAoY2xpY2spPVwiZGVsZXRlUm93KClcIlxuICAgICAgICAgICAgY2xhc3M9XCJjdXJzb3ItcG9pbnRlclwiXG4gICAgICAgICAgPjwvdmVyYmVuLXN2Zz5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L25nLXRlbXBsYXRlPlxuXG4gICAgICA8bmctdGVtcGxhdGVcbiAgICAgICAgI2NlbGxFZGl0XG4gICAgICAgIGxldC12YWx1ZVxuICAgICAgICBsZXQtZGVsZXRlUm93XG4gICAgICAgIGxldC1pc0VkaXRpbmc9XCJpc0VkaXRpbmdcIlxuICAgICAgICBsZXQtdG9nZ2xlUm93RWRpdD1cInRvZ2dsZVJvd0VkaXRcIlxuICAgICAgICBsZXQtcm93PVwicm93XCJcbiAgICAgICAgbGV0LXJvd0luZGV4PVwicm93SW5kZXhcIlxuICAgICAgPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBnYXAtNlwiPlxuICAgICAgICAgIDx2ZXJiZW4tc3ZnXG4gICAgICAgICAgICAoY2xpY2spPVwidG9nZ2xlUm93RWRpdCgpXCJcbiAgICAgICAgICAgIGljb249XCJ0aWNrXCJcbiAgICAgICAgICAgIFt3aWR0aF09XCIxNVwiXG4gICAgICAgICAgICBbaGVpZ2h0XT1cIjE1XCJcbiAgICAgICAgICAgIGNsYXNzPVwiY3Vyc29yLXBvaW50ZXJcIlxuICAgICAgICAgID48L3ZlcmJlbi1zdmc+XG5cbiAgICAgICAgICA8dmVyYmVuLXN2Z1xuICAgICAgICAgICAgaWNvbj1cImRlbGV0ZVwiXG4gICAgICAgICAgICBbd2lkdGhdPVwiMTVcIlxuICAgICAgICAgICAgW2hlaWdodF09XCIxNVwiXG4gICAgICAgICAgICAoY2xpY2spPVwidG9nZ2xlUm93RWRpdCgpXCJcbiAgICAgICAgICAgIGNsYXNzPVwiY3Vyc29yLXBvaW50ZXJcIlxuICAgICAgICAgID48L3ZlcmJlbi1zdmc+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgPC9saWItZGF0YS10YWJsZT5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjZm9vdGVyVGVtcGxhdGU+XG4gIDxidXR0b24gY2xhc3M9XCJidG4gYnRuLXNlY29uZGFyeVwiIChjbGljayk9XCJzaG93UHJldmlldyA9IGZhbHNlXCI+XG4gICAgQ2FuY2VsXG4gIDwvYnV0dG9uPlxuICA8YnV0dG9uIGNsYXNzPVwiYnRuIGJ0bi1wcmltYXJ5XCIgKGNsaWNrKT1cInNhdmUoKVwiPkNvbXBsZXRlPC9idXR0b24+XG48L25nLXRlbXBsYXRlPlxuIl19

package/fesm2022/verben-ng-ui.mjs CHANGED Viewed

@@ -5681,6 +5681,7 @@ class DataImportComponent {
     previewData = input();
     exportTemplateEvent = output();
     importEvent = output();
+    importEventData = output();
     previewColumnsList = [];
     forms = new FormArray([]);
     uniqueIdentifiers = signal([]);
@@ -5718,6 +5719,7 @@ class DataImportComponent {
     }
     reset() { }
     save() {
+        this.importEventData.emit(this.previewData() || []);
         this.showPreview = true;
     }
     getControlNames() {
@@ -5737,11 +5739,11 @@ class DataImportComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataImportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: DataImportComponent, selector: "lib-data-import", inputs: { previewColumns: { classPropertyName: "previewColumns", publicName: "previewColumns", isSignal: true, isRequired: false, transformFunction: null }, formGroupConfig: { classPropertyName: "formGroupConfig", publicName: "formGroupConfig", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, previewData: { classPropertyName: "previewData", publicName: "previewData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportTemplateEvent: "exportTemplateEvent", importEvent: "importEvent" }, ngImport: i0, template: "<verben-card\n  width=\"24rem\"\n  borderRadius=\"1rem\"\n  [border]=\"'1px solid #D4A007'\"\n  bgColor=\"#FFFFFF\"\n  class=\"export-card\"\n>\n  <div card-header class=\"card-header\">\n    <h4 class=\"header-title\">Import</h4>\n    <button\n      class=\"reset-button\"\n      [style.color]=\"'#3479E9'\"\n      [style.background-color]=\"'transparent'\"\n      [style.border]=\"'none'\"\n      [style.cursor]=\"'pointer'\"\n      [style.font-size]=\"'12px'\"\n      (click)=\"reset()\"\n    >\n      Reset\n    </button>\n  </div>\n  <div card-body class=\"card-body\">\n    <div class=\"flex gap-4 justify-between\">\n      <button class=\"export-button\" (click)=\"handleTemplateExport()\">\n        Download Template\n      </button>\n      <button class=\"export-button\" (click)=\"save()\">Upload File</button>\n    </div>\n    <hr class=\"divider\" />\n    <section class=\"section\">\n      <div\n        class=\"drop-area\"\n        (dragover)=\"onDragOver($event)\"\n        (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\"\n      >\n        <p>\n          Drag and drop files here or\n          <label for=\"fileInput\">click to browse</label>\n        </p>\n        <input\n          type=\"file\"\n          id=\"fileInput\"\n          (change)=\"onFileSelected($event)\"\n          style=\"display: none\"\n          accept=\".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\n          multiple\n        />\n      </div>\n      <div *ngIf=\"files.length > 0\">\n        <h3>Uploaded Files:</h3>\n        <ul>\n          <li *ngFor=\"let file of files\">{{ file.name }}</li>\n        </ul>\n      </div>\n    </section>\n  </div>\n  <div card-footer class=\"card-footer\">\n    <button class=\"export-button\" (click)=\"save()\">Import</button>\n  </div>\n</verben-card>\n\n<!-- Modal Component -->\n<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'large'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'my-modal-custom-class'\"\n  [disableFooter]=\"false\"\n  [modalData]=\"[{ data: { first_name: 'verben-ng', last_name: 'verbena' } }]\"\n  [isVisible]=\"showPreview\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n>\n  <a download=\"\"></a>\n</verben-dialogue>\n\n<!-- Define templates -->\n<ng-template #headerTemplate>\n  <h2>Upload Preview</h2>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"flex gap-4 items-center justify-between\">\n    <p class=\"\">Total Items: {{ previewData()?.length }}</p>\n\n    <verben-drop-down\n      [multiselect]=\"true\"\n      placeholder=\"Find duplicates by\"\n      [options]=\"fields()\"\n      [ngModel]=\"uniqueIdentifiers()\"\n      (ngModelChange)=\"uniqueIdentifiers.set($event)\"\n    ></verben-drop-down>\n  </div>\n  <lib-data-table\n    [data]=\"previewData() ?? []\"\n    [columns]=\"previewColumns() ?? []\"\n    [formGroupConfig]=\"formGroupConfig()\"\n  >\n    @for (column of previewColumns(); track column.id) {\n    <ng-container [libColumn]=\"column.id\">\n      <!-- <ng-template #cell let-value=\"value\" let-row=\"row\">\n        <p>{{ value }}</p>\n      </ng-template> -->\n      @if (column.formControlName || column.accessorKey) {\n      <ng-template\n        #cell\n        let-value=\"value\"\n        let-row=\"row\"\n        let-formControl=\"formControl\"\n      >\n        @if (formControl) {\n        <input type=\"text\" [formControl]=\"formControl\" />\n        } @else if (column.accessorKey) {\n        <input type=\"text\" [ngModel]=\"value\" />\n        } @else if (column.cellEditTemplate) {\n        <ng-container\n          [ngTemplateOutlet]=\"column.cellEditTemplate\"\n          [ngTemplateOutletContext]=\"formControl\"\n        ></ng-container>\n        }\n      </ng-template>\n\n      <ng-template\n        #cellEdit\n        let-value=\"value\"\n        let-row=\"row\"\n        let-formControl=\"formControl\"\n      >\n        @if (formControl) {\n        <input type=\"text\" [formControl]=\"formControl\" />\n        } @else if (column.accessorKey) {\n        <input type=\"text\" [ngModel]=\"value\" />\n        } @else if (column.cellEditTemplate) {\n        <ng-container\n          [ngTemplateOutlet]=\"column.cellEditTemplate\"\n          [ngTemplateOutletContext]=\"formControl\"\n        ></ng-container>\n        }\n      </ng-template>\n      }\n    </ng-container>\n    }\n\n    <ng-container libColumn=\"actions\">\n      <ng-template\n        #cell\n        let-value\n        let-deleteRow=\"deleteRow\"\n        let-isEditing=\"isEditing\"\n        let-toggleRowEdit=\"toggleRowEdit\"\n        let-row=\"row\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <div class=\"flex gap-6\">\n          <verben-svg\n            (click)=\"toggleRowEdit()\"\n            icon=\"edit\"\n            [width]=\"15\"\n            [height]=\"15\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n\n          <verben-svg\n            icon=\"delete\"\n            [width]=\"15\"\n            [height]=\"15\"\n            (click)=\"deleteRow()\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n        </div>\n      </ng-template>\n\n      <ng-template\n        #cellEdit\n        let-value\n        let-deleteRow\n        let-isEditing=\"isEditing\"\n        let-toggleRowEdit=\"toggleRowEdit\"\n        let-row=\"row\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <div class=\"flex gap-6\">\n          <verben-svg\n            (click)=\"toggleRowEdit()\"\n            icon=\"tick\"\n            [width]=\"15\"\n            [height]=\"15\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n\n          <verben-svg\n            icon=\"delete\"\n            [width]=\"15\"\n            [height]=\"15\"\n            (click)=\"toggleRowEdit()\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n        </div>\n      </ng-template>\n    </ng-container>\n  </lib-data-table>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <!-- <button class=\"btn btn-secondary\" (click)=\"onModalClose($event)\">Cancel</button>\n  <button class=\"btn btn-primary\" (click)=\"onConfirm()\">Confirm</button> -->\n</ng-template>\n", styles: [".drop-area{border:2px dashed #ccc;padding:20px;text-align:center;cursor:pointer}.drop-area.drag-active{background-color:#eee}.export-card{font-size:.75rem;z-index:10}.card-header{display:flex;justify-content:space-between;align-items:center;background-color:transparent;padding:4px!important}.header-title{font-weight:600;font-size:.8125rem}.card-body{display:flex;flex-direction:column;gap:.5rem;padding-top:-8px!important}.section{display:flex;flex-direction:column;gap:.5rem}.section-header{display:flex;justify-content:space-between;align-items:center}.section-title{font-size:.8125rem}.item{display:flex;justify-content:space-between;align-items:center}.item-label{display:flex;align-items:center;gap:.5rem}.checkbox-label{line-height:1}.item-actions{display:flex;gap:.5rem}.show-more{display:flex;gap:.5em;align-items:center;color:#6b7280;cursor:pointer}.divider{border:none;border-top:1px solid #e8eaf1}.operation-grid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.add-button{margin-top:.5rem;margin-left:auto;outline:none;border:none;background-color:transparent;color:#3479e9;font-size:.75rem;font-weight:500;cursor:pointer}.card-footer{display:flex;justify-content:flex-end;background-color:transparent}.export-button{margin-top:.5rem;outline:none;border:none;padding:.2rem 1.6rem;background-color:#ffe681;color:#404040;font-size:.75rem;font-weight:600;cursor:pointer}.value-range{display:flex;gap:.5rem;align-items:center}\n"], dependencies: [{ 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardComponent, selector: "verben-card", inputs: ["pd", "mg", "height", "width", "textColor", "bgColor", "border", "borderRadius", "disabled", "aspectRatio"] }, { kind: "component", type: VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "component", type: DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowDelete", "selectionChange"] }, { kind: "directive", type: ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: DataImportComponent, selector: "lib-data-import", inputs: { previewColumns: { classPropertyName: "previewColumns", publicName: "previewColumns", isSignal: true, isRequired: false, transformFunction: null }, formGroupConfig: { classPropertyName: "formGroupConfig", publicName: "formGroupConfig", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, previewData: { classPropertyName: "previewData", publicName: "previewData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportTemplateEvent: "exportTemplateEvent", importEvent: "importEvent", importEventData: "importEventData" }, ngImport: i0, template: "<verben-card\n  width=\"24rem\"\n  borderRadius=\"1rem\"\n  [border]=\"'1px solid #D4A007'\"\n  bgColor=\"#FFFFFF\"\n  class=\"export-card\"\n>\n  <div card-header class=\"card-header\">\n    <h4 class=\"header-title\">Import</h4>\n    <button\n      class=\"reset-button\"\n      [style.color]=\"'#3479E9'\"\n      [style.background-color]=\"'transparent'\"\n      [style.border]=\"'none'\"\n      [style.cursor]=\"'pointer'\"\n      [style.font-size]=\"'12px'\"\n      (click)=\"reset()\"\n    >\n      Reset\n    </button>\n  </div>\n  <div card-body class=\"card-body\">\n    <div class=\"flex gap-4 justify-between\">\n      <button class=\"export-button\" (click)=\"handleTemplateExport()\">\n        Download Template\n      </button>\n      <button class=\"export-button\" (click)=\"save()\">Upload File</button>\n    </div>\n    <hr class=\"divider\" />\n    <section class=\"section\">\n      <div\n        class=\"drop-area\"\n        (dragover)=\"onDragOver($event)\"\n        (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\"\n      >\n        <p>\n          Drag and drop files here or\n          <label for=\"fileInput\">click to browse</label>\n        </p>\n        <input\n          type=\"file\"\n          id=\"fileInput\"\n          (change)=\"onFileSelected($event)\"\n          style=\"display: none\"\n          accept=\".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\n          multiple\n        />\n      </div>\n      <div *ngIf=\"files.length > 0\">\n        <h3>Uploaded Files:</h3>\n        <ul>\n          <li *ngFor=\"let file of files\">{{ file.name }}</li>\n        </ul>\n      </div>\n    </section>\n  </div>\n  <div card-footer class=\"card-footer\">\n    <button class=\"export-button\" (click)=\"save()\">Import</button>\n  </div>\n</verben-card>\n\n<!-- Modal Component -->\n<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'large'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'my-modal-custom-class'\"\n  [disableFooter]=\"false\"\n  [modalData]=\"[{ data: { first_name: 'verben-ng', last_name: 'verbena' } }]\"\n  [isVisible]=\"showPreview\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n>\n  <a download=\"\"></a>\n</verben-dialogue>\n\n<!-- Define templates -->\n<ng-template #headerTemplate>\n  <h2>Upload Preview</h2>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"flex gap-4 items-center justify-between\">\n    <p class=\"\">Total Items: {{ previewData()?.length }}</p>\n\n    <verben-drop-down\n      [multiselect]=\"true\"\n      placeholder=\"Find duplicates by\"\n      [options]=\"fields()\"\n      [ngModel]=\"uniqueIdentifiers()\"\n      (ngModelChange)=\"uniqueIdentifiers.set($event)\"\n    ></verben-drop-down>\n  </div>\n  <lib-data-table\n    [data]=\"previewData() ?? []\"\n    [columns]=\"previewColumns() ?? []\"\n    [formGroupConfig]=\"formGroupConfig()\"\n  >\n    @for (column of previewColumns(); track column.id) {\n    <ng-container [libColumn]=\"column.id\">\n      <ng-template\n        #cell\n        let-value=\"value\"\n        let-row=\"row\"\n        let-formControl=\"formControl\"\n        let-updateValue=\"updateValue\"\n      >\n        <verbena-input\n          [value]=\"value\"\n          (valueChange)=\"updateValue($event)\"\n        ></verbena-input>\n      </ng-template>\n      <!-- @if (column.formControlName || column.accessorKey) {\n      <ng-template\n        #cell\n        let-value=\"value\"\n        let-row=\"row\"\n        let-formControl=\"formControl\"\n      >\n        @if (formControl) {\n        <input type=\"text\" [formControl]=\"formControl\" />\n        } @else if (column.accessorKey) {\n        <input type=\"text\" [ngModel]=\"value\" />\n        } @else if (column.cellEditTemplate) {\n        <ng-container\n          [ngTemplateOutlet]=\"column.cellEditTemplate\"\n          [ngTemplateOutletContext]=\"formControl\"\n        ></ng-container>\n        }\n      </ng-template>\n\n      <ng-template\n        #cellEdit\n        let-value=\"value\"\n        let-row=\"row\"\n        let-formControl=\"formControl\"\n      >\n        @if (formControl) {\n        <input type=\"text\" [formControl]=\"formControl\" />\n        } @else if (column.accessorKey) {\n        <input type=\"text\" [ngModel]=\"value\" />\n        } @else if (column.cellEditTemplate) {\n        <ng-container\n          [ngTemplateOutlet]=\"column.cellEditTemplate\"\n          [ngTemplateOutletContext]=\"formControl\"\n        ></ng-container>\n        }\n      </ng-template>\n      } -->\n    </ng-container>\n    }\n\n    <ng-container libColumn=\"actions\">\n      <ng-template\n        #cell\n        let-value\n        let-deleteRow=\"deleteRow\"\n        let-isEditing=\"isEditing\"\n        let-toggleRowEdit=\"toggleRowEdit\"\n        let-row=\"row\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <div class=\"flex gap-6\">\n          <verben-svg\n            (click)=\"toggleRowEdit()\"\n            icon=\"edit\"\n            [width]=\"15\"\n            [height]=\"15\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n\n          <verben-svg\n            icon=\"delete\"\n            [width]=\"15\"\n            [height]=\"15\"\n            (click)=\"deleteRow()\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n        </div>\n      </ng-template>\n\n      <ng-template\n        #cellEdit\n        let-value\n        let-deleteRow\n        let-isEditing=\"isEditing\"\n        let-toggleRowEdit=\"toggleRowEdit\"\n        let-row=\"row\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <div class=\"flex gap-6\">\n          <verben-svg\n            (click)=\"toggleRowEdit()\"\n            icon=\"tick\"\n            [width]=\"15\"\n            [height]=\"15\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n\n          <verben-svg\n            icon=\"delete\"\n            [width]=\"15\"\n            [height]=\"15\"\n            (click)=\"toggleRowEdit()\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n        </div>\n      </ng-template>\n    </ng-container>\n  </lib-data-table>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <button class=\"btn btn-secondary\" (click)=\"showPreview = false\">\n    Cancel\n  </button>\n  <button class=\"btn btn-primary\" (click)=\"save()\">Complete</button>\n</ng-template>\n", styles: [".drop-area{border:2px dashed #ccc;padding:20px;text-align:center;cursor:pointer}.drop-area.drag-active{background-color:#eee}.export-card{font-size:.75rem;z-index:10}.card-header{display:flex;justify-content:space-between;align-items:center;background-color:transparent;padding:4px!important}.header-title{font-weight:600;font-size:.8125rem}.card-body{display:flex;flex-direction:column;gap:.5rem;padding-top:-8px!important}.section{display:flex;flex-direction:column;gap:.5rem}.section-header{display:flex;justify-content:space-between;align-items:center}.section-title{font-size:.8125rem}.item{display:flex;justify-content:space-between;align-items:center}.item-label{display:flex;align-items:center;gap:.5rem}.checkbox-label{line-height:1}.item-actions{display:flex;gap:.5rem}.show-more{display:flex;gap:.5em;align-items:center;color:#6b7280;cursor:pointer}.divider{border:none;border-top:1px solid #e8eaf1}.operation-grid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.add-button{margin-top:.5rem;margin-left:auto;outline:none;border:none;background-color:transparent;color:#3479e9;font-size:.75rem;font-weight:500;cursor:pointer}.card-footer{display:flex;justify-content:flex-end;background-color:transparent}.export-button{margin-top:.5rem;outline:none;border:none;padding:.2rem 1.6rem;background-color:#ffe681;color:#404040;font-size:.75rem;font-weight:600;cursor:pointer}.value-range{display:flex;gap:.5rem;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardComponent, selector: "verben-card", inputs: ["pd", "mg", "height", "width", "textColor", "bgColor", "border", "borderRadius", "disabled", "aspectRatio"] }, { kind: "component", type: VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "component", type: DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowDelete", "selectionChange"] }, { kind: "directive", type: ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "fontSize", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataImportComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-data-import', template: "<verben-card\n  width=\"24rem\"\n  borderRadius=\"1rem\"\n  [border]=\"'1px solid #D4A007'\"\n  bgColor=\"#FFFFFF\"\n  class=\"export-card\"\n>\n  <div card-header class=\"card-header\">\n    <h4 class=\"header-title\">Import</h4>\n    <button\n      class=\"reset-button\"\n      [style.color]=\"'#3479E9'\"\n      [style.background-color]=\"'transparent'\"\n      [style.border]=\"'none'\"\n      [style.cursor]=\"'pointer'\"\n      [style.font-size]=\"'12px'\"\n      (click)=\"reset()\"\n    >\n      Reset\n    </button>\n  </div>\n  <div card-body class=\"card-body\">\n    <div class=\"flex gap-4 justify-between\">\n      <button class=\"export-button\" (click)=\"handleTemplateExport()\">\n        Download Template\n      </button>\n      <button class=\"export-button\" (click)=\"save()\">Upload File</button>\n    </div>\n    <hr class=\"divider\" />\n    <section class=\"section\">\n      <div\n        class=\"drop-area\"\n        (dragover)=\"onDragOver($event)\"\n        (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\"\n      >\n        <p>\n          Drag and drop files here or\n          <label for=\"fileInput\">click to browse</label>\n        </p>\n        <input\n          type=\"file\"\n          id=\"fileInput\"\n          (change)=\"onFileSelected($event)\"\n          style=\"display: none\"\n          accept=\".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\n          multiple\n        />\n      </div>\n      <div *ngIf=\"files.length > 0\">\n        <h3>Uploaded Files:</h3>\n        <ul>\n          <li *ngFor=\"let file of files\">{{ file.name }}</li>\n        </ul>\n      </div>\n    </section>\n  </div>\n  <div card-footer class=\"card-footer\">\n    <button class=\"export-button\" (click)=\"save()\">Import</button>\n  </div>\n</verben-card>\n\n<!-- Modal Component -->\n<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'large'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'my-modal-custom-class'\"\n  [disableFooter]=\"false\"\n  [modalData]=\"[{ data: { first_name: 'verben-ng', last_name: 'verbena' } }]\"\n  [isVisible]=\"showPreview\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n>\n  <a download=\"\"></a>\n</verben-dialogue>\n\n<!-- Define templates -->\n<ng-template #headerTemplate>\n  <h2>Upload Preview</h2>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"flex gap-4 items-center justify-between\">\n    <p class=\"\">Total Items: {{ previewData()?.length }}</p>\n\n    <verben-drop-down\n      [multiselect]=\"true\"\n      placeholder=\"Find duplicates by\"\n      [options]=\"fields()\"\n      [ngModel]=\"uniqueIdentifiers()\"\n      (ngModelChange)=\"uniqueIdentifiers.set($event)\"\n    ></verben-drop-down>\n  </div>\n  <lib-data-table\n    [data]=\"previewData() ?? []\"\n    [columns]=\"previewColumns() ?? []\"\n    [formGroupConfig]=\"formGroupConfig()\"\n  >\n    @for (column of previewColumns(); track column.id) {\n    <ng-container [libColumn]=\"column.id\">\n      <!-- <ng-template #cell let-value=\"value\" let-row=\"row\">\n        <p>{{ value }}</p>\n      </ng-template> -->\n      @if (column.formControlName || column.accessorKey) {\n      <ng-template\n        #cell\n        let-value=\"value\"\n        let-row=\"row\"\n        let-formControl=\"formControl\"\n      >\n        @if (formControl) {\n        <input type=\"text\" [formControl]=\"formControl\" />\n        } @else if (column.accessorKey) {\n        <input type=\"text\" [ngModel]=\"value\" />\n        } @else if (column.cellEditTemplate) {\n        <ng-container\n          [ngTemplateOutlet]=\"column.cellEditTemplate\"\n          [ngTemplateOutletContext]=\"formControl\"\n        ></ng-container>\n        }\n      </ng-template>\n\n      <ng-template\n        #cellEdit\n        let-value=\"value\"\n        let-row=\"row\"\n        let-formControl=\"formControl\"\n      >\n        @if (formControl) {\n        <input type=\"text\" [formControl]=\"formControl\" />\n        } @else if (column.accessorKey) {\n        <input type=\"text\" [ngModel]=\"value\" />\n        } @else if (column.cellEditTemplate) {\n        <ng-container\n          [ngTemplateOutlet]=\"column.cellEditTemplate\"\n          [ngTemplateOutletContext]=\"formControl\"\n        ></ng-container>\n        }\n      </ng-template>\n      }\n    </ng-container>\n    }\n\n    <ng-container libColumn=\"actions\">\n      <ng-template\n        #cell\n        let-value\n        let-deleteRow=\"deleteRow\"\n        let-isEditing=\"isEditing\"\n        let-toggleRowEdit=\"toggleRowEdit\"\n        let-row=\"row\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <div class=\"flex gap-6\">\n          <verben-svg\n            (click)=\"toggleRowEdit()\"\n            icon=\"edit\"\n            [width]=\"15\"\n            [height]=\"15\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n\n          <verben-svg\n            icon=\"delete\"\n            [width]=\"15\"\n            [height]=\"15\"\n            (click)=\"deleteRow()\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n        </div>\n      </ng-template>\n\n      <ng-template\n        #cellEdit\n        let-value\n        let-deleteRow\n        let-isEditing=\"isEditing\"\n        let-toggleRowEdit=\"toggleRowEdit\"\n        let-row=\"row\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <div class=\"flex gap-6\">\n          <verben-svg\n            (click)=\"toggleRowEdit()\"\n            icon=\"tick\"\n            [width]=\"15\"\n            [height]=\"15\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n\n          <verben-svg\n            icon=\"delete\"\n            [width]=\"15\"\n            [height]=\"15\"\n            (click)=\"toggleRowEdit()\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n        </div>\n      </ng-template>\n    </ng-container>\n  </lib-data-table>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <!-- <button class=\"btn btn-secondary\" (click)=\"onModalClose($event)\">Cancel</button>\n  <button class=\"btn btn-primary\" (click)=\"onConfirm()\">Confirm</button> -->\n</ng-template>\n", styles: [".drop-area{border:2px dashed #ccc;padding:20px;text-align:center;cursor:pointer}.drop-area.drag-active{background-color:#eee}.export-card{font-size:.75rem;z-index:10}.card-header{display:flex;justify-content:space-between;align-items:center;background-color:transparent;padding:4px!important}.header-title{font-weight:600;font-size:.8125rem}.card-body{display:flex;flex-direction:column;gap:.5rem;padding-top:-8px!important}.section{display:flex;flex-direction:column;gap:.5rem}.section-header{display:flex;justify-content:space-between;align-items:center}.section-title{font-size:.8125rem}.item{display:flex;justify-content:space-between;align-items:center}.item-label{display:flex;align-items:center;gap:.5rem}.checkbox-label{line-height:1}.item-actions{display:flex;gap:.5rem}.show-more{display:flex;gap:.5em;align-items:center;color:#6b7280;cursor:pointer}.divider{border:none;border-top:1px solid #e8eaf1}.operation-grid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.add-button{margin-top:.5rem;margin-left:auto;outline:none;border:none;background-color:transparent;color:#3479e9;font-size:.75rem;font-weight:500;cursor:pointer}.card-footer{display:flex;justify-content:flex-end;background-color:transparent}.export-button{margin-top:.5rem;outline:none;border:none;padding:.2rem 1.6rem;background-color:#ffe681;color:#404040;font-size:.75rem;font-weight:600;cursor:pointer}.value-range{display:flex;gap:.5rem;align-items:center}\n"] }]
+            args: [{ selector: 'lib-data-import', template: "<verben-card\n  width=\"24rem\"\n  borderRadius=\"1rem\"\n  [border]=\"'1px solid #D4A007'\"\n  bgColor=\"#FFFFFF\"\n  class=\"export-card\"\n>\n  <div card-header class=\"card-header\">\n    <h4 class=\"header-title\">Import</h4>\n    <button\n      class=\"reset-button\"\n      [style.color]=\"'#3479E9'\"\n      [style.background-color]=\"'transparent'\"\n      [style.border]=\"'none'\"\n      [style.cursor]=\"'pointer'\"\n      [style.font-size]=\"'12px'\"\n      (click)=\"reset()\"\n    >\n      Reset\n    </button>\n  </div>\n  <div card-body class=\"card-body\">\n    <div class=\"flex gap-4 justify-between\">\n      <button class=\"export-button\" (click)=\"handleTemplateExport()\">\n        Download Template\n      </button>\n      <button class=\"export-button\" (click)=\"save()\">Upload File</button>\n    </div>\n    <hr class=\"divider\" />\n    <section class=\"section\">\n      <div\n        class=\"drop-area\"\n        (dragover)=\"onDragOver($event)\"\n        (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\"\n      >\n        <p>\n          Drag and drop files here or\n          <label for=\"fileInput\">click to browse</label>\n        </p>\n        <input\n          type=\"file\"\n          id=\"fileInput\"\n          (change)=\"onFileSelected($event)\"\n          style=\"display: none\"\n          accept=\".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\n          multiple\n        />\n      </div>\n      <div *ngIf=\"files.length > 0\">\n        <h3>Uploaded Files:</h3>\n        <ul>\n          <li *ngFor=\"let file of files\">{{ file.name }}</li>\n        </ul>\n      </div>\n    </section>\n  </div>\n  <div card-footer class=\"card-footer\">\n    <button class=\"export-button\" (click)=\"save()\">Import</button>\n  </div>\n</verben-card>\n\n<!-- Modal Component -->\n<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'large'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'my-modal-custom-class'\"\n  [disableFooter]=\"false\"\n  [modalData]=\"[{ data: { first_name: 'verben-ng', last_name: 'verbena' } }]\"\n  [isVisible]=\"showPreview\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n>\n  <a download=\"\"></a>\n</verben-dialogue>\n\n<!-- Define templates -->\n<ng-template #headerTemplate>\n  <h2>Upload Preview</h2>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"flex gap-4 items-center justify-between\">\n    <p class=\"\">Total Items: {{ previewData()?.length }}</p>\n\n    <verben-drop-down\n      [multiselect]=\"true\"\n      placeholder=\"Find duplicates by\"\n      [options]=\"fields()\"\n      [ngModel]=\"uniqueIdentifiers()\"\n      (ngModelChange)=\"uniqueIdentifiers.set($event)\"\n    ></verben-drop-down>\n  </div>\n  <lib-data-table\n    [data]=\"previewData() ?? []\"\n    [columns]=\"previewColumns() ?? []\"\n    [formGroupConfig]=\"formGroupConfig()\"\n  >\n    @for (column of previewColumns(); track column.id) {\n    <ng-container [libColumn]=\"column.id\">\n      <ng-template\n        #cell\n        let-value=\"value\"\n        let-row=\"row\"\n        let-formControl=\"formControl\"\n        let-updateValue=\"updateValue\"\n      >\n        <verbena-input\n          [value]=\"value\"\n          (valueChange)=\"updateValue($event)\"\n        ></verbena-input>\n      </ng-template>\n      <!-- @if (column.formControlName || column.accessorKey) {\n      <ng-template\n        #cell\n        let-value=\"value\"\n        let-row=\"row\"\n        let-formControl=\"formControl\"\n      >\n        @if (formControl) {\n        <input type=\"text\" [formControl]=\"formControl\" />\n        } @else if (column.accessorKey) {\n        <input type=\"text\" [ngModel]=\"value\" />\n        } @else if (column.cellEditTemplate) {\n        <ng-container\n          [ngTemplateOutlet]=\"column.cellEditTemplate\"\n          [ngTemplateOutletContext]=\"formControl\"\n        ></ng-container>\n        }\n      </ng-template>\n\n      <ng-template\n        #cellEdit\n        let-value=\"value\"\n        let-row=\"row\"\n        let-formControl=\"formControl\"\n      >\n        @if (formControl) {\n        <input type=\"text\" [formControl]=\"formControl\" />\n        } @else if (column.accessorKey) {\n        <input type=\"text\" [ngModel]=\"value\" />\n        } @else if (column.cellEditTemplate) {\n        <ng-container\n          [ngTemplateOutlet]=\"column.cellEditTemplate\"\n          [ngTemplateOutletContext]=\"formControl\"\n        ></ng-container>\n        }\n      </ng-template>\n      } -->\n    </ng-container>\n    }\n\n    <ng-container libColumn=\"actions\">\n      <ng-template\n        #cell\n        let-value\n        let-deleteRow=\"deleteRow\"\n        let-isEditing=\"isEditing\"\n        let-toggleRowEdit=\"toggleRowEdit\"\n        let-row=\"row\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <div class=\"flex gap-6\">\n          <verben-svg\n            (click)=\"toggleRowEdit()\"\n            icon=\"edit\"\n            [width]=\"15\"\n            [height]=\"15\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n\n          <verben-svg\n            icon=\"delete\"\n            [width]=\"15\"\n            [height]=\"15\"\n            (click)=\"deleteRow()\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n        </div>\n      </ng-template>\n\n      <ng-template\n        #cellEdit\n        let-value\n        let-deleteRow\n        let-isEditing=\"isEditing\"\n        let-toggleRowEdit=\"toggleRowEdit\"\n        let-row=\"row\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <div class=\"flex gap-6\">\n          <verben-svg\n            (click)=\"toggleRowEdit()\"\n            icon=\"tick\"\n            [width]=\"15\"\n            [height]=\"15\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n\n          <verben-svg\n            icon=\"delete\"\n            [width]=\"15\"\n            [height]=\"15\"\n            (click)=\"toggleRowEdit()\"\n            class=\"cursor-pointer\"\n          ></verben-svg>\n        </div>\n      </ng-template>\n    </ng-container>\n  </lib-data-table>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <button class=\"btn btn-secondary\" (click)=\"showPreview = false\">\n    Cancel\n  </button>\n  <button class=\"btn btn-primary\" (click)=\"save()\">Complete</button>\n</ng-template>\n", styles: [".drop-area{border:2px dashed #ccc;padding:20px;text-align:center;cursor:pointer}.drop-area.drag-active{background-color:#eee}.export-card{font-size:.75rem;z-index:10}.card-header{display:flex;justify-content:space-between;align-items:center;background-color:transparent;padding:4px!important}.header-title{font-weight:600;font-size:.8125rem}.card-body{display:flex;flex-direction:column;gap:.5rem;padding-top:-8px!important}.section{display:flex;flex-direction:column;gap:.5rem}.section-header{display:flex;justify-content:space-between;align-items:center}.section-title{font-size:.8125rem}.item{display:flex;justify-content:space-between;align-items:center}.item-label{display:flex;align-items:center;gap:.5rem}.checkbox-label{line-height:1}.item-actions{display:flex;gap:.5rem}.show-more{display:flex;gap:.5em;align-items:center;color:#6b7280;cursor:pointer}.divider{border:none;border-top:1px solid #e8eaf1}.operation-grid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.add-button{margin-top:.5rem;margin-left:auto;outline:none;border:none;background-color:transparent;color:#3479e9;font-size:.75rem;font-weight:500;cursor:pointer}.card-footer{display:flex;justify-content:flex-end;background-color:transparent}.export-button{margin-top:.5rem;outline:none;border:none;padding:.2rem 1.6rem;background-color:#ffe681;color:#404040;font-size:.75rem;font-weight:600;cursor:pointer}.value-range{display:flex;gap:.5rem;align-items:center}\n"] }]
         }], ctorParameters: () => [] });
 class VerbenDialogueModule {