npm - verben-ng-ui - Versions diffs - 0.7.9 → 0.8.0 - Mend

verben-ng-ui 0.7.9 → 0.8.0

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

@@ -12,6 +12,7 @@ import * as i8 from "../svg/svg.component";
 export class DataImportComponent {
     previewColumns = input();
     formGroupConfig = input();
+    fields = input([]);
     title = input();
     previewData = input();
     exportTemplateEvent = output();
@@ -69,10 +70,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 }, 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]=\"getControlNames()\"\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" }, 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"] }] });
 }
 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]=\"getControlNames()\"\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 #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"] }]
         }], ctorParameters: () => [] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YS1pbXBvcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdmVyYmVuLW5nLXVpL3NyYy9saWIvY29tcG9uZW50cy9kYXRhLWltcG9ydC9kYXRhLWltcG9ydC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4tbmctdWkvc3JjL2xpYi9jb21wb25lbnRzL2RhdGEtaW1wb3J0L2RhdGEtaW1wb3J0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsTUFBTSxFQUNOLEtBQUssRUFDTCxNQUFNLEVBQ04sTUFBTSxHQUVQLE1BQU0sZUFBZSxDQUFDO0FBS3ZCLE9BQU8sRUFFTCxTQUFTLEdBR1YsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7Ozs7OztBQU94QixNQUFNLE9BQU8sbUJBQW1CO0lBQzlCLGNBQWMsR0FBRyxLQUFLLEVBQXlCLENBQUM7SUFDaEQsZUFBZSxHQUFHLEtBQUssRUFJcEIsQ0FBQztJQUNKLEtBQUssR0FBRyxLQUFLLEVBQVUsQ0FBQztJQUN4QixXQUFXLEdBQUcsS0FBSyxFQUFPLENBQUM7SUFDM0IsbUJBQW1CLEdBQUcsTUFBTSxFQUFZLENBQUM7SUFDekMsV0FBVyxHQUFHLE1BQU0sRUFBUSxDQUFDO0lBRTdCLGtCQUFrQixHQUEwQixFQUFFLENBQUM7SUFDL0MsS0FBSyxHQUFHLElBQUksU0FBUyxDQUFZLEVBQUUsQ0FBQyxDQUFDO0lBQ3JDLGlCQUFpQixHQUE2QixNQUFNLENBQUMsRUFBRSxDQUFDLENBQUM7SUFFakQsSUFBSSxHQUEyQixNQUFNLENBQUM7SUFFOUMsS0FBSyxHQUFXLEVBQUUsQ0FBQztJQUNuQixVQUFVLEdBQUcsS0FBSyxDQUFDO0lBQ25CLFdBQVcsR0FBRyxLQUFLLENBQUM7SUFFcEI7UUFDRSxNQUFNLENBQUMsR0FBRyxFQUFFO1lBQ1YsSUFBSSxDQUFDLFdBQVcsRUFBRSxFQUFFLE9BQU8sQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFO2dCQUNwQyxPQUFPLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQ3JCLENBQUMsQ0FBQyxDQUFDO1lBRUgsT0FBTyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUMsQ0FBQztRQUNyQyxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxVQUFVLENBQUMsS0FBZ0I7UUFDekIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDO0lBQ3pCLENBQUM7SUFFRCxXQUFXLENBQUMsS0FBZ0I7UUFDMUIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDO0lBQzFCLENBQUM7SUFFRCxNQUFNLENBQUMsS0FBZ0I7UUFDckIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDO1FBQ3hCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsWUFBYSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ25ELElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNyQyxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQztJQUMxQixDQUFDO0lBRUQsY0FBYyxDQUFDLEtBQVU7UUFDdkIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDNUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ3JDLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDO0lBQzFCLENBQUM7SUFFRCxLQUFLLEtBQUksQ0FBQztJQUVWLElBQUk7UUFDRixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQztJQUMxQixDQUFDO0lBRUQsZUFBZTtRQUNiLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxlQUFlLEVBQUUsRUFBRSxRQUFRLENBQUM7UUFDbEQsSUFBSSxRQUFRLEVBQUUsQ0FBQztZQUNiLE9BQU8sTUFBTSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUMvQixDQUFDO1FBQ0QsT0FBTyxFQUFFLENBQUM7SUFDWixDQUFDO0lBRUQsb0JBQW9CO1FBQ2xCLE1BQU0sRUFBRSxHQUFHLElBQUksQ0FBQyxlQUFlLEVBQUUsRUFBRSxRQUFRLENBQUM7UUFDNUMsSUFBSSxFQUFFLEVBQUUsQ0FBQztZQUNQLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQ2pELENBQUM7SUFDSCxDQUFDO3dHQTNFVSxtQkFBbUI7NEZBQW5CLG1CQUFtQixtc0JDeEJoQywrck1BbU5BOzs0RkQzTGEsbUJBQW1CO2tCQUwvQixTQUFTOytCQUNFLGlCQUFpQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgZWZmZWN0LFxuICBpbnB1dCxcbiAgb3V0cHV0LFxuICBzaWduYWwsXG4gIFdyaXRhYmxlU2lnbmFsLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gIENvbHVtbkRlZmluaXRpb24sXG4gIEZvcm1Hcm91cENvbmZpZyxcbn0gZnJvbSAnLi4vZGF0YS10YWJsZS9kYXRhLXRhYmxlLnR5cGVzJztcbmltcG9ydCB7XG4gIEFic3RyYWN0Q29udHJvbCxcbiAgRm9ybUFycmF5LFxuICBGb3JtQ29udHJvbCxcbiAgRm9ybUdyb3VwLFxufSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2xpYi1kYXRhLWltcG9ydCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9kYXRhLWltcG9ydC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9kYXRhLWltcG9ydC5jb21wb25lbnQuY3NzJyxcbn0pXG5leHBvcnQgY2xhc3MgRGF0YUltcG9ydENvbXBvbmVudDxUPiB7XG4gIHByZXZpZXdDb2x1bW5zID0gaW5wdXQ8Q29sdW1uRGVmaW5pdGlvbjxUPltdPigpO1xuICBmb3JtR3JvdXBDb25maWcgPSBpbnB1dDxcbiAgICBGb3JtR3JvdXBDb25maWc8e1xuICAgICAgW0sgaW4ga2V5b2YgVF06IEFic3RyYWN0Q29udHJvbDtcbiAgICB9PlxuICA+KCk7XG4gIHRpdGxlID0gaW5wdXQ8c3RyaW5nPigpO1xuICBwcmV2aWV3RGF0YSA9IGlucHV0PFRbXT4oKTtcbiAgZXhwb3J0VGVtcGxhdGVFdmVudCA9IG91dHB1dDxzdHJpbmdbXT4oKTtcbiAgaW1wb3J0RXZlbnQgPSBvdXRwdXQ8RmlsZT4oKTtcblxuICBwcmV2aWV3Q29sdW1uc0xpc3Q6IENvbHVtbkRlZmluaXRpb248VD5bXSA9IFtdO1xuICBmb3JtcyA9IG5ldyBGb3JtQXJyYXk8Rm9ybUdyb3VwPihbXSk7XG4gIHVuaXF1ZUlkZW50aWZpZXJzOiBXcml0YWJsZVNpZ25hbDxzdHJpbmdbXT4gPSBzaWduYWwoW10pO1xuXG4gIHByaXZhdGUgX2V4dDogJ3hsc3gnIHwgJ3hscycgfCAnY3N2JyA9ICd4bHN4JztcblxuICBmaWxlczogRmlsZVtdID0gW107XG4gIGlzRHJhZ2dpbmcgPSBmYWxzZTtcbiAgc2hvd1ByZXZpZXcgPSBmYWxzZTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBlZmZlY3QoKCkgPT4ge1xuICAgICAgdGhpcy5wcmV2aWV3RGF0YSgpPy5mb3JFYWNoKChkYXR1bSkgPT4ge1xuICAgICAgICBjb25zb2xlLmxvZyhkYXR1bSk7XG4gICAgICB9KTtcblxuICAgICAgY29uc29sZS5sb2codGhpcy5wcmV2aWV3Q29sdW1ucygpKTtcbiAgICB9KTtcbiAgfVxuXG4gIG9uRHJhZ092ZXIoZXZlbnQ6IERyYWdFdmVudCkge1xuICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgdGhpcy5pc0RyYWdnaW5nID0gdHJ1ZTtcbiAgfVxuXG4gIG9uRHJhZ0xlYXZlKGV2ZW50OiBEcmFnRXZlbnQpIHtcbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIHRoaXMuaXNEcmFnZ2luZyA9IGZhbHNlO1xuICB9XG5cbiAgb25Ecm9wKGV2ZW50OiBEcmFnRXZlbnQpIHtcbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIHRoaXMuaXNEcmFnZ2luZyA9IGZhbHNlO1xuICAgIHRoaXMuZmlsZXMgPSBBcnJheS5mcm9tKGV2ZW50LmRhdGFUcmFuc2ZlciEuZmlsZXMpO1xuICAgIHRoaXMuaW1wb3J0RXZlbnQuZW1pdCh0aGlzLmZpbGVzWzBdKTtcbiAgICB0aGlzLnNob3dQcmV2aWV3ID0gdHJ1ZTtcbiAgfVxuXG4gIG9uRmlsZVNlbGVjdGVkKGV2ZW50OiBhbnkpIHtcbiAgICB0aGlzLmZpbGVzID0gQXJyYXkuZnJvbShldmVudC50YXJnZXQuZmlsZXMpO1xuICAgIHRoaXMuaW1wb3J0RXZlbnQuZW1pdCh0aGlzLmZpbGVzWzBdKTtcbiAgICB0aGlzLnNob3dQcmV2aWV3ID0gdHJ1ZTtcbiAgfVxuXG4gIHJlc2V0KCkge31cblxuICBzYXZlKCkge1xuICAgIHRoaXMuc2hvd1ByZXZpZXcgPSB0cnVlO1xuICB9XG5cbiAgZ2V0Q29udHJvbE5hbWVzKCkge1xuICAgIGNvbnN0IGNvbnRyb2xzID0gdGhpcy5mb3JtR3JvdXBDb25maWcoKT8uY29udHJvbHM7XG4gICAgaWYgKGNvbnRyb2xzKSB7XG4gICAgICByZXR1cm4gT2JqZWN0LmtleXMoY29udHJvbHMpO1xuICAgIH1cbiAgICByZXR1cm4gW107XG4gIH1cblxuICBoYW5kbGVUZW1wbGF0ZUV4cG9ydCgpIHtcbiAgICBjb25zdCBmZyA9IHRoaXMuZm9ybUdyb3VwQ29uZmlnKCk/LmNvbnRyb2xzO1xuICAgIGlmIChmZykge1xuICAgICAgdGhpcy5leHBvcnRUZW1wbGF0ZUV2ZW50LmVtaXQoT2JqZWN0LmtleXMoZmcpKTtcbiAgICB9XG4gIH1cblxuICAvLyBnZXRGb3JtQ29udHJvbChpbmRleDogbnVtYmVyLCBmaWVsZDogc3RyaW5nKSB7XG4gIC8vICAgY29uc3QgY29udHJvbCA9IHRoaXMuLmdldChpbmRleCk/LmdldChmaWVsZCkgYXMgRm9ybUNvbnRyb2w8YW55PjtcbiAgLy8gICBjb25zb2xlLmxvZyhjb250cm9sKTtcbiAgLy8gICByZXR1cm4gY29udHJvbDtcbiAgLy8gfVxufVxuIiwiPHZlcmJlbi1jYXJkXG4gIHdpZHRoPVwiMjRyZW1cIlxuICBib3JkZXJSYWRpdXM9XCIxcmVtXCJcbiAgW2JvcmRlcl09XCInMXB4IHNvbGlkICNENEEwMDcnXCJcbiAgYmdDb2xvcj1cIiNGRkZGRkZcIlxuICBjbGFzcz1cImV4cG9ydC1jYXJkXCJcbj5cbiAgPGRpdiBjYXJkLWhlYWRlciBjbGFzcz1cImNhcmQtaGVhZGVyXCI+XG4gICAgPGg0IGNsYXNzPVwiaGVhZGVyLXRpdGxlXCI+SW1wb3J0PC9oND5cbiAgICA8YnV0dG9uXG4gICAgICBjbGFzcz1cInJlc2V0LWJ1dHRvblwiXG4gICAgICBbc3R5bGUuY29sb3JdPVwiJyMzNDc5RTknXCJcbiAgICAgIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cIid0cmFuc3BhcmVudCdcIlxuICAgICAgW3N0eWxlLmJvcmRlcl09XCInbm9uZSdcIlxuICAgICAgW3N0eWxlLmN1cnNvcl09XCIncG9pbnRlcidcIlxuICAgICAgW3N0eWxlLmZvbnQtc2l6ZV09XCInMTJweCdcIlxuICAgICAgKGNsaWNrKT1cInJlc2V0KClcIlxuICAgID5cbiAgICAgIFJlc2V0XG4gICAgPC9idXR0b24+XG4gIDwvZGl2PlxuICA8ZGl2IGNhcmQtYm9keSBjbGFzcz1cImNhcmQtYm9keVwiPlxuICAgIDxkaXYgY2xhc3M9XCJmbGV4IGdhcC00IGp1c3RpZnktYmV0d2VlblwiPlxuICAgICAgPGJ1dHRvbiBjbGFzcz1cImV4cG9ydC1idXR0b25cIiAoY2xpY2spPVwiaGFuZGxlVGVtcGxhdGVFeHBvcnQoKVwiPlxuICAgICAgICBEb3dubG9hZCBUZW1wbGF0ZVxuICAgICAgPC9idXR0b24+XG4gICAgICA8YnV0dG9uIGNsYXNzPVwiZXhwb3J0LWJ1dHRvblwiIChjbGljayk9XCJzYXZlKClcIj5VcGxvYWQgRmlsZTwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICAgIDxociBjbGFzcz1cImRpdmlkZXJcIiAvPlxuICAgIDxzZWN0aW9uIGNsYXNzPVwic2VjdGlvblwiPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzcz1cImRyb3AtYXJlYVwiXG4gICAgICAgIChkcmFnb3Zlcik9XCJvbkRyYWdPdmVyKCRldmVudClcIlxuICAgICAgICAoZHJhZ2xlYXZlKT1cIm9uRHJhZ0xlYXZlKCRldmVudClcIlxuICAgICAgICAoZHJvcCk9XCJvbkRyb3AoJGV2ZW50KVwiXG4gICAgICA+XG4gICAgICAgIDxwPlxuICAgICAgICAgIERyYWcgYW5kIGRyb3AgZmlsZXMgaGVyZSBvclxuICAgICAgICAgIDxsYWJlbCBmb3I9XCJmaWxlSW5wdXRcIj5jbGljayB0byBicm93c2U8L2xhYmVsPlxuICAgICAgICA8L3A+XG4gICAgICAgIDxpbnB1dFxuICAgICAgICAgIHR5cGU9XCJmaWxlXCJcbiAgICAgICAgICBpZD1cImZpbGVJbnB1dFwiXG4gICAgICAgICAgKGNoYW5nZSk9XCJvbkZpbGVTZWxlY3RlZCgkZXZlbnQpXCJcbiAgICAgICAgICBzdHlsZT1cImRpc3BsYXk6IG5vbmVcIlxuICAgICAgICAgIGFjY2VwdD1cIi5jc3YsIGFwcGxpY2F0aW9uL3ZuZC5vcGVueG1sZm9ybWF0cy1vZmZpY2Vkb2N1bWVudC5zcHJlYWRzaGVldG1sLnNoZWV0LCBhcHBsaWNhdGlvbi92bmQubXMtZXhjZWxcIlxuICAgICAgICAgIG11bHRpcGxlXG4gICAgICAgIC8+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgKm5nSWY9XCJmaWxlcy5sZW5ndGggPiAwXCI+XG4gICAgICAgIDxoMz5VcGxvYWRlZCBGaWxlczo8L2gzPlxuICAgICAgICA8dWw+XG4gICAgICAgICAgPGxpICpuZ0Zvcj1cImxldCBmaWxlIG9mIGZpbGVzXCI+e3sgZmlsZS5uYW1lIH19PC9saT5cbiAgICAgICAgPC91bD5cbiAgICAgIDwvZGl2PlxuICAgIDwvc2VjdGlvbj5cbiAgPC9kaXY+XG4gIDxkaXYgY2FyZC1mb290ZXIgY2xhc3M9XCJjYXJkLWZvb3RlclwiPlxuICAgIDxidXR0b24gY2xhc3M9XCJleHBvcnQtYnV0dG9uXCIgKGNsaWNrKT1cInNhdmUoKVwiPkltcG9ydDwvYnV0dG9uPlxuICA8L2Rpdj5cbjwvdmVyYmVuLWNhcmQ+XG5cbjwhLS0gTW9kYWwgQ29tcG9uZW50IC0tPlxuPHZlcmJlbi1kaWFsb2d1ZVxuICBbc2hvd0Nsb3NlSWNvbl09XCJ0cnVlXCJcbiAgW2Rpc21pc3NPdXRzaWRlQ2xpY2tdPVwidHJ1ZVwiXG4gIFtjbG9zZU9uRXNjYXBlXT1cInRydWVcIlxuICBbc2l6ZV09XCInbGFyZ2UnXCJcbiAgW21vZGVdPVwiJ2RpYWxvZ3VlJ1wiXG4gIFtjdXN0b21DbGFzc109XCInbXktbW9kYWwtY3VzdG9tLWNsYXNzJ1wiXG4gIFtkaXNhYmxlRm9vdGVyXT1cImZhbHNlXCJcbiAgW21vZGFsRGF0YV09XCJbeyBkYXRhOiB7IGZpcnN0X25hbWU6ICd2ZXJiZW4tbmcnLCBsYXN0X25hbWU6ICd2ZXJiZW5hJyB9IH1dXCJcbiAgW2lzVmlzaWJsZV09XCJzaG93UHJldmlld1wiXG4gIFtoZWFkZXJUZW1wbGF0ZV09XCJoZWFkZXJUZW1wbGF0ZVwiXG4gIFtib2R5VGVtcGxhdGVdPVwiYm9keVRlbXBsYXRlXCJcbiAgW2Zvb3RlclRlbXBsYXRlXT1cImZvb3RlclRlbXBsYXRlXCJcbj5cbiAgPGEgZG93bmxvYWQ9XCJcIj48L2E+XG48L3ZlcmJlbi1kaWFsb2d1ZT5cblxuPCEtLSBEZWZpbmUgdGVtcGxhdGVzIC0tPlxuPG5nLXRlbXBsYXRlICNoZWFkZXJUZW1wbGF0ZT5cbiAgPGgyPlVwbG9hZCBQcmV2aWV3PC9oMj5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjYm9keVRlbXBsYXRlPlxuICA8ZGl2IGNsYXNzPVwiZmxleCBnYXAtNCBpdGVtcy1jZW50ZXIganVzdGlmeS1iZXR3ZWVuXCI+XG4gICAgPHAgY2xhc3M9XCJcIj5Ub3RhbCBJdGVtczoge3sgcHJldmlld0RhdGEoKT8ubGVuZ3RoIH19PC9wPlxuXG4gICAgPHZlcmJlbi1kcm9wLWRvd25cbiAgICAgIFttdWx0aXNlbGVjdF09XCJ0cnVlXCJcbiAgICAgIHBsYWNlaG9sZGVyPVwiRmluZCBkdXBsaWNhdGVzIGJ5XCJcbiAgICAgIFtvcHRpb25zXT1cImdldENvbnRyb2xOYW1lcygpXCJcbiAgICAgIFtuZ01vZGVsXT1cInVuaXF1ZUlkZW50aWZpZXJzKClcIlxuICAgICAgKG5nTW9kZWxDaGFuZ2UpPVwidW5pcXVlSWRlbnRpZmllcnMuc2V0KCRldmVudClcIlxuICAgID48L3ZlcmJlbi1kcm9wLWRvd24+XG4gIDwvZGl2PlxuICA8bGliLWRhdGEtdGFibGVcbiAgICBbZGF0YV09XCJwcmV2aWV3RGF0YSgpID8/IFtdXCJcbiAgICBbY29sdW1uc109XCJwcmV2aWV3Q29sdW1ucygpID8/IFtdXCJcbiAgICBbZm9ybUdyb3VwQ29uZmlnXT1cImZvcm1Hcm91cENvbmZpZygpXCJcbiAgPlxuICAgIEBmb3IgKGNvbHVtbiBvZiBwcmV2aWV3Q29sdW1ucygpOyB0cmFjayBjb2x1bW4uaWQpIHtcbiAgICA8bmctY29udGFpbmVyIFtsaWJDb2x1bW5dPVwiY29sdW1uLmlkXCI+XG4gICAgICA8IS0tIDxuZy10ZW1wbGF0ZSAjY2VsbCBsZXQtdmFsdWU9XCJ2YWx1ZVwiIGxldC1yb3c9XCJyb3dcIj5cbiAgICAgICAgPHA+e3sgdmFsdWUgfX08L3A+XG4gICAgICA8L25nLXRlbXBsYXRlPiAtLT5cbiAgICAgIEBpZiAoY29sdW1uLmZvcm1Db250cm9sTmFtZSB8fCBjb2x1bW4uYWNjZXNzb3JLZXkpIHtcbiAgICAgIDxuZy10ZW1wbGF0ZVxuICAgICAgICAjY2VsbFxuICAgICAgICBsZXQtdmFsdWU9XCJ2YWx1ZVwiXG4gICAgICAgIGxldC1yb3c9XCJyb3dcIlxuICAgICAgICBsZXQtZm9ybUNvbnRyb2w9XCJmb3JtQ29udHJvbFwiXG4gICAgICA+XG4gICAgICAgIEBpZiAoZm9ybUNvbnRyb2wpIHtcbiAgICAgICAgPGlucHV0IHR5cGU9XCJ0ZXh0XCIgW2Zvcm1Db250cm9sXT1cImZvcm1Db250cm9sXCIgLz5cbiAgICAgICAgfSBAZWxzZSBpZiAoY29sdW1uLmFjY2Vzc29yS2V5KSB7XG4gICAgICAgIDxpbnB1dCB0eXBlPVwidGV4dFwiIFtuZ01vZGVsXT1cInZhbHVlXCIgLz5cbiAgICAgICAgfSBAZWxzZSBpZiAoY29sdW1uLmNlbGxFZGl0VGVtcGxhdGUpIHtcbiAgICAgICAgPG5nLWNvbnRhaW5lclxuICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImNvbHVtbi5jZWxsRWRpdFRlbXBsYXRlXCJcbiAgICAgICAgICBbbmdUZW1wbGF0ZU91dGxldENvbnRleHRdPVwiZm9ybUNvbnRyb2xcIlxuICAgICAgICA+PC9uZy1jb250YWluZXI+XG4gICAgICAgIH1cbiAgICAgIDwvbmctdGVtcGxhdGU+XG5cbiAgICAgIDxuZy10ZW1wbGF0ZVxuICAgICAgICAjY2VsbEVkaXRcbiAgICAgICAgbGV0LXZhbHVlPVwidmFsdWVcIlxuICAgICAgICBsZXQtcm93PVwicm93XCJcbiAgICAgICAgbGV0LWZvcm1Db250cm9sPVwiZm9ybUNvbnRyb2xcIlxuICAgICAgPlxuICAgICAgICBAaWYgKGZvcm1Db250cm9sKSB7XG4gICAgICAgIDxpbnB1dCB0eXBlPVwidGV4dFwiIFtmb3JtQ29udHJvbF09XCJmb3JtQ29udHJvbFwiIC8+XG4gICAgICAgIH0gQGVsc2UgaWYgKGNvbHVtbi5hY2Nlc3NvcktleSkge1xuICAgICAgICA8aW5wdXQgdHlwZT1cInRleHRcIiBbbmdNb2RlbF09XCJ2YWx1ZVwiIC8+XG4gICAgICAgIH0gQGVsc2UgaWYgKGNvbHVtbi5jZWxsRWRpdFRlbXBsYXRlKSB7XG4gICAgICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgICBbbmdUZW1wbGF0ZU91dGxldF09XCJjb2x1bW4uY2VsbEVkaXRUZW1wbGF0ZVwiXG4gICAgICAgICAgW25nVGVtcGxhdGVPdXRsZXRDb250ZXh0XT1cImZvcm1Db250cm9sXCJcbiAgICAgICAgPjwvbmctY29udGFpbmVyPlxuICAgICAgICB9XG4gICAgICA8L25nLXRlbXBsYXRlPlxuICAgICAgfVxuICAgIDwvbmctY29udGFpbmVyPlxuICAgIH1cblxuICAgIDxuZy1jb250YWluZXIgbGliQ29sdW1uPVwiYWN0aW9uc1wiPlxuICAgICAgPG5nLXRlbXBsYXRlXG4gICAgICAgICNjZWxsXG4gICAgICAgIGxldC12YWx1ZVxuICAgICAgICBsZXQtZGVsZXRlUm93PVwiZGVsZXRlUm93XCJcbiAgICAgICAgbGV0LWlzRWRpdGluZz1cImlzRWRpdGluZ1wiXG4gICAgICAgIGxldC10b2dnbGVSb3dFZGl0PVwidG9nZ2xlUm93RWRpdFwiXG4gICAgICAgIGxldC1yb3c9XCJyb3dcIlxuICAgICAgICBsZXQtcm93SW5kZXg9XCJyb3dJbmRleFwiXG4gICAgICA+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGdhcC02XCI+XG4gICAgICAgICAgPHZlcmJlbi1zdmdcbiAgICAgICAgICAgIChjbGljayk9XCJ0b2dnbGVSb3dFZGl0KClcIlxuICAgICAgICAgICAgaWNvbj1cImVkaXRcIlxuICAgICAgICAgICAgW3dpZHRoXT1cIjE1XCJcbiAgICAgICAgICAgIFtoZWlnaHRdPVwiMTVcIlxuICAgICAgICAgICAgY2xhc3M9XCJjdXJzb3ItcG9pbnRlclwiXG4gICAgICAgICAgPjwvdmVyYmVuLXN2Zz5cblxuICAgICAgICAgIDx2ZXJiZW4tc3ZnXG4gICAgICAgICAgICBpY29uPVwiZGVsZXRlXCJcbiAgICAgICAgICAgIFt3aWR0aF09XCIxNVwiXG4gICAgICAgICAgICBbaGVpZ2h0XT1cIjE1XCJcbiAgICAgICAgICAgIChjbGljayk9XCJkZWxldGVSb3coKVwiXG4gICAgICAgICAgICBjbGFzcz1cImN1cnNvci1wb2ludGVyXCJcbiAgICAgICAgICA+PC92ZXJiZW4tc3ZnPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvbmctdGVtcGxhdGU+XG5cbiAgICAgIDxuZy10ZW1wbGF0ZVxuICAgICAgICAjY2VsbEVkaXRcbiAgICAgICAgbGV0LXZhbHVlXG4gICAgICAgIGxldC1kZWxldGVSb3dcbiAgICAgICAgbGV0LWlzRWRpdGluZz1cImlzRWRpdGluZ1wiXG4gICAgICAgIGxldC10b2dnbGVSb3dFZGl0PVwidG9nZ2xlUm93RWRpdFwiXG4gICAgICAgIGxldC1yb3c9XCJyb3dcIlxuICAgICAgICBsZXQtcm93SW5kZXg9XCJyb3dJbmRleFwiXG4gICAgICA+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGdhcC02XCI+XG4gICAgICAgICAgPHZlcmJlbi1zdmdcbiAgICAgICAgICAgIChjbGljayk9XCJ0b2dnbGVSb3dFZGl0KClcIlxuICAgICAgICAgICAgaWNvbj1cInRpY2tcIlxuICAgICAgICAgICAgW3dpZHRoXT1cIjE1XCJcbiAgICAgICAgICAgIFtoZWlnaHRdPVwiMTVcIlxuICAgICAgICAgICAgY2xhc3M9XCJjdXJzb3ItcG9pbnRlclwiXG4gICAgICAgICAgPjwvdmVyYmVuLXN2Zz5cblxuICAgICAgICAgIDx2ZXJiZW4tc3ZnXG4gICAgICAgICAgICBpY29uPVwiZGVsZXRlXCJcbiAgICAgICAgICAgIFt3aWR0aF09XCIxNVwiXG4gICAgICAgICAgICBbaGVpZ2h0XT1cIjE1XCJcbiAgICAgICAgICAgIChjbGljayk9XCJ0b2dnbGVSb3dFZGl0KClcIlxuICAgICAgICAgICAgY2xhc3M9XCJjdXJzb3ItcG9pbnRlclwiXG4gICAgICAgICAgPjwvdmVyYmVuLXN2Zz5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L25nLXRlbXBsYXRlPlxuICAgIDwvbmctY29udGFpbmVyPlxuICA8L2xpYi1kYXRhLXRhYmxlPlxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNmb290ZXJUZW1wbGF0ZT5cbiAgPCEtLSA8YnV0dG9uIGNsYXNzPVwiYnRuIGJ0bi1zZWNvbmRhcnlcIiAoY2xpY2spPVwib25Nb2RhbENsb3NlKCRldmVudClcIj5DYW5jZWw8L2J1dHRvbj5cbiAgPGJ1dHRvbiBjbGFzcz1cImJ0biBidG4tcHJpbWFyeVwiIChjbGljayk9XCJvbkNvbmZpcm0oKVwiPkNvbmZpcm08L2J1dHRvbj4gLS0+XG48L25nLXRlbXBsYXRlPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YS1pbXBvcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdmVyYmVuLW5nLXVpL3NyYy9saWIvY29tcG9uZW50cy9kYXRhLWltcG9ydC9kYXRhLWltcG9ydC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4tbmctdWkvc3JjL2xpYi9jb21wb25lbnRzL2RhdGEtaW1wb3J0L2RhdGEtaW1wb3J0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsTUFBTSxFQUNOLEtBQUssRUFDTCxNQUFNLEVBQ04sTUFBTSxHQUVQLE1BQU0sZUFBZSxDQUFDO0FBS3ZCLE9BQU8sRUFFTCxTQUFTLEdBR1YsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7Ozs7OztBQU94QixNQUFNLE9BQU8sbUJBQW1CO0lBQzlCLGNBQWMsR0FBRyxLQUFLLEVBQXlCLENBQUM7SUFDaEQsZUFBZSxHQUFHLEtBQUssRUFJcEIsQ0FBQztJQUNKLE1BQU0sR0FBRyxLQUFLLENBQVcsRUFBRSxDQUFDLENBQUM7SUFDN0IsS0FBSyxHQUFHLEtBQUssRUFBVSxDQUFDO0lBQ3hCLFdBQVcsR0FBRyxLQUFLLEVBQU8sQ0FBQztJQUMzQixtQkFBbUIsR0FBRyxNQUFNLEVBQVksQ0FBQztJQUN6QyxXQUFXLEdBQUcsTUFBTSxFQUFRLENBQUM7SUFFN0Isa0JBQWtCLEdBQTBCLEVBQUUsQ0FBQztJQUMvQyxLQUFLLEdBQUcsSUFBSSxTQUFTLENBQVksRUFBRSxDQUFDLENBQUM7SUFDckMsaUJBQWlCLEdBQTZCLE1BQU0sQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUVqRCxJQUFJLEdBQTJCLE1BQU0sQ0FBQztJQUU5QyxLQUFLLEdBQVcsRUFBRSxDQUFDO0lBQ25CLFVBQVUsR0FBRyxLQUFLLENBQUM7SUFDbkIsV0FBVyxHQUFHLEtBQUssQ0FBQztJQUVwQjtRQUNFLE1BQU0sQ0FBQyxHQUFHLEVBQUU7WUFDVixJQUFJLENBQUMsV0FBVyxFQUFFLEVBQUUsT0FBTyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUU7Z0JBQ3BDLE9BQU8sQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDckIsQ0FBQyxDQUFDLENBQUM7WUFFSCxPQUFPLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQyxDQUFDO1FBQ3JDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELFVBQVUsQ0FBQyxLQUFnQjtRQUN6QixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUM7SUFDekIsQ0FBQztJQUVELFdBQVcsQ0FBQyxLQUFnQjtRQUMxQixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUM7SUFDMUIsQ0FBQztJQUVELE1BQU0sQ0FBQyxLQUFnQjtRQUNyQixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUM7UUFDeEIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxZQUFhLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDbkQsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ3JDLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDO0lBQzFCLENBQUM7SUFFRCxjQUFjLENBQUMsS0FBVTtRQUN2QixJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM1QyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDckMsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUM7SUFDMUIsQ0FBQztJQUVELEtBQUssS0FBSSxDQUFDO0lBRVYsSUFBSTtRQUNGLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDO0lBQzFCLENBQUM7SUFFRCxlQUFlO1FBQ2IsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxFQUFFLFFBQVEsQ0FBQztRQUNsRCxJQUFJLFFBQVEsRUFBRSxDQUFDO1lBQ2IsT0FBTyxNQUFNLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQy9CLENBQUM7UUFDRCxPQUFPLEVBQUUsQ0FBQztJQUNaLENBQUM7SUFFRCxvQkFBb0I7UUFDbEIsTUFBTSxFQUFFLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxFQUFFLFFBQVEsQ0FBQztRQUM1QyxJQUFJLEVBQUUsRUFBRSxDQUFDO1lBQ1AsSUFBSSxDQUFDLG1CQUFtQixDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDakQsQ0FBQztJQUNILENBQUM7d0dBNUVVLG1CQUFtQjs0RkFBbkIsbUJBQW1CLDh6QkN4QmhDLHNyTUFtTkE7OzRGRDNMYSxtQkFBbUI7a0JBTC9CLFNBQVM7K0JBQ0UsaUJBQWlCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBlZmZlY3QsXG4gIGlucHV0LFxuICBvdXRwdXQsXG4gIHNpZ25hbCxcbiAgV3JpdGFibGVTaWduYWwsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgQ29sdW1uRGVmaW5pdGlvbixcbiAgRm9ybUdyb3VwQ29uZmlnLFxufSBmcm9tICcuLi9kYXRhLXRhYmxlL2RhdGEtdGFibGUudHlwZXMnO1xuaW1wb3J0IHtcbiAgQWJzdHJhY3RDb250cm9sLFxuICBGb3JtQXJyYXksXG4gIEZvcm1Db250cm9sLFxuICBGb3JtR3JvdXAsXG59IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLWRhdGEtaW1wb3J0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2RhdGEtaW1wb3J0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2RhdGEtaW1wb3J0LmNvbXBvbmVudC5jc3MnLFxufSlcbmV4cG9ydCBjbGFzcyBEYXRhSW1wb3J0Q29tcG9uZW50PFQ+IHtcbiAgcHJldmlld0NvbHVtbnMgPSBpbnB1dDxDb2x1bW5EZWZpbml0aW9uPFQ+W10+KCk7XG4gIGZvcm1Hcm91cENvbmZpZyA9IGlucHV0PFxuICAgIEZvcm1Hcm91cENvbmZpZzx7XG4gICAgICBbSyBpbiBrZXlvZiBUXTogQWJzdHJhY3RDb250cm9sO1xuICAgIH0+XG4gID4oKTtcbiAgZmllbGRzID0gaW5wdXQ8c3RyaW5nW10+KFtdKTtcbiAgdGl0bGUgPSBpbnB1dDxzdHJpbmc+KCk7XG4gIHByZXZpZXdEYXRhID0gaW5wdXQ8VFtdPigpO1xuICBleHBvcnRUZW1wbGF0ZUV2ZW50ID0gb3V0cHV0PHN0cmluZ1tdPigpO1xuICBpbXBvcnRFdmVudCA9IG91dHB1dDxGaWxlPigpO1xuXG4gIHByZXZpZXdDb2x1bW5zTGlzdDogQ29sdW1uRGVmaW5pdGlvbjxUPltdID0gW107XG4gIGZvcm1zID0gbmV3IEZvcm1BcnJheTxGb3JtR3JvdXA+KFtdKTtcbiAgdW5pcXVlSWRlbnRpZmllcnM6IFdyaXRhYmxlU2lnbmFsPHN0cmluZ1tdPiA9IHNpZ25hbChbXSk7XG5cbiAgcHJpdmF0ZSBfZXh0OiAneGxzeCcgfCAneGxzJyB8ICdjc3YnID0gJ3hsc3gnO1xuXG4gIGZpbGVzOiBGaWxlW10gPSBbXTtcbiAgaXNEcmFnZ2luZyA9IGZhbHNlO1xuICBzaG93UHJldmlldyA9IGZhbHNlO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIGVmZmVjdCgoKSA9PiB7XG4gICAgICB0aGlzLnByZXZpZXdEYXRhKCk/LmZvckVhY2goKGRhdHVtKSA9PiB7XG4gICAgICAgIGNvbnNvbGUubG9nKGRhdHVtKTtcbiAgICAgIH0pO1xuXG4gICAgICBjb25zb2xlLmxvZyh0aGlzLnByZXZpZXdDb2x1bW5zKCkpO1xuICAgIH0pO1xuICB9XG5cbiAgb25EcmFnT3ZlcihldmVudDogRHJhZ0V2ZW50KSB7XG4gICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICB0aGlzLmlzRHJhZ2dpbmcgPSB0cnVlO1xuICB9XG5cbiAgb25EcmFnTGVhdmUoZXZlbnQ6IERyYWdFdmVudCkge1xuICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgdGhpcy5pc0RyYWdnaW5nID0gZmFsc2U7XG4gIH1cblxuICBvbkRyb3AoZXZlbnQ6IERyYWdFdmVudCkge1xuICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgdGhpcy5pc0RyYWdnaW5nID0gZmFsc2U7XG4gICAgdGhpcy5maWxlcyA9IEFycmF5LmZyb20oZXZlbnQuZGF0YVRyYW5zZmVyIS5maWxlcyk7XG4gICAgdGhpcy5pbXBvcnRFdmVudC5lbWl0KHRoaXMuZmlsZXNbMF0pO1xuICAgIHRoaXMuc2hvd1ByZXZpZXcgPSB0cnVlO1xuICB9XG5cbiAgb25GaWxlU2VsZWN0ZWQoZXZlbnQ6IGFueSkge1xuICAgIHRoaXMuZmlsZXMgPSBBcnJheS5mcm9tKGV2ZW50LnRhcmdldC5maWxlcyk7XG4gICAgdGhpcy5pbXBvcnRFdmVudC5lbWl0KHRoaXMuZmlsZXNbMF0pO1xuICAgIHRoaXMuc2hvd1ByZXZpZXcgPSB0cnVlO1xuICB9XG5cbiAgcmVzZXQoKSB7fVxuXG4gIHNhdmUoKSB7XG4gICAgdGhpcy5zaG93UHJldmlldyA9IHRydWU7XG4gIH1cblxuICBnZXRDb250cm9sTmFtZXMoKSB7XG4gICAgY29uc3QgY29udHJvbHMgPSB0aGlzLmZvcm1Hcm91cENvbmZpZygpPy5jb250cm9scztcbiAgICBpZiAoY29udHJvbHMpIHtcbiAgICAgIHJldHVybiBPYmplY3Qua2V5cyhjb250cm9scyk7XG4gICAgfVxuICAgIHJldHVybiBbXTtcbiAgfVxuXG4gIGhhbmRsZVRlbXBsYXRlRXhwb3J0KCkge1xuICAgIGNvbnN0IGZnID0gdGhpcy5mb3JtR3JvdXBDb25maWcoKT8uY29udHJvbHM7XG4gICAgaWYgKGZnKSB7XG4gICAgICB0aGlzLmV4cG9ydFRlbXBsYXRlRXZlbnQuZW1pdChPYmplY3Qua2V5cyhmZykpO1xuICAgIH1cbiAgfVxuXG4gIC8vIGdldEZvcm1Db250cm9sKGluZGV4OiBudW1iZXIsIGZpZWxkOiBzdHJpbmcpIHtcbiAgLy8gICBjb25zdCBjb250cm9sID0gdGhpcy4uZ2V0KGluZGV4KT8uZ2V0KGZpZWxkKSBhcyBGb3JtQ29udHJvbDxhbnk+O1xuICAvLyAgIGNvbnNvbGUubG9nKGNvbnRyb2wpO1xuICAvLyAgIHJldHVybiBjb250cm9sO1xuICAvLyB9XG59XG4iLCI8dmVyYmVuLWNhcmRcbiAgd2lkdGg9XCIyNHJlbVwiXG4gIGJvcmRlclJhZGl1cz1cIjFyZW1cIlxuICBbYm9yZGVyXT1cIicxcHggc29saWQgI0Q0QTAwNydcIlxuICBiZ0NvbG9yPVwiI0ZGRkZGRlwiXG4gIGNsYXNzPVwiZXhwb3J0LWNhcmRcIlxuPlxuICA8ZGl2IGNhcmQtaGVhZGVyIGNsYXNzPVwiY2FyZC1oZWFkZXJcIj5cbiAgICA8aDQgY2xhc3M9XCJoZWFkZXItdGl0bGVcIj5JbXBvcnQ8L2g0PlxuICAgIDxidXR0b25cbiAgICAgIGNsYXNzPVwicmVzZXQtYnV0dG9uXCJcbiAgICAgIFtzdHlsZS5jb2xvcl09XCInIzM0NzlFOSdcIlxuICAgICAgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVwiJ3RyYW5zcGFyZW50J1wiXG4gICAgICBbc3R5bGUuYm9yZGVyXT1cIidub25lJ1wiXG4gICAgICBbc3R5bGUuY3Vyc29yXT1cIidwb2ludGVyJ1wiXG4gICAgICBbc3R5bGUuZm9udC1zaXplXT1cIicxMnB4J1wiXG4gICAgICAoY2xpY2spPVwicmVzZXQoKVwiXG4gICAgPlxuICAgICAgUmVzZXRcbiAgICA8L2J1dHRvbj5cbiAgPC9kaXY+XG4gIDxkaXYgY2FyZC1ib2R5IGNsYXNzPVwiY2FyZC1ib2R5XCI+XG4gICAgPGRpdiBjbGFzcz1cImZsZXggZ2FwLTQganVzdGlmeS1iZXR3ZWVuXCI+XG4gICAgICA8YnV0dG9uIGNsYXNzPVwiZXhwb3J0LWJ1dHRvblwiIChjbGljayk9XCJoYW5kbGVUZW1wbGF0ZUV4cG9ydCgpXCI+XG4gICAgICAgIERvd25sb2FkIFRlbXBsYXRlXG4gICAgICA8L2J1dHRvbj5cbiAgICAgIDxidXR0b24gY2xhc3M9XCJleHBvcnQtYnV0dG9uXCIgKGNsaWNrKT1cInNhdmUoKVwiPlVwbG9hZCBGaWxlPC9idXR0b24+XG4gICAgPC9kaXY+XG4gICAgPGhyIGNsYXNzPVwiZGl2aWRlclwiIC8+XG4gICAgPHNlY3Rpb24gY2xhc3M9XCJzZWN0aW9uXCI+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzPVwiZHJvcC1hcmVhXCJcbiAgICAgICAgKGRyYWdvdmVyKT1cIm9uRHJhZ092ZXIoJGV2ZW50KVwiXG4gICAgICAgIChkcmFnbGVhdmUpPVwib25EcmFnTGVhdmUoJGV2ZW50KVwiXG4gICAgICAgIChkcm9wKT1cIm9uRHJvcCgkZXZlbnQpXCJcbiAgICAgID5cbiAgICAgICAgPHA+XG4gICAgICAgICAgRHJhZyBhbmQgZHJvcCBmaWxlcyBoZXJlIG9yXG4gICAgICAgICAgPGxhYmVsIGZvcj1cImZpbGVJbnB1dFwiPmNsaWNrIHRvIGJyb3dzZTwvbGFiZWw+XG4gICAgICAgIDwvcD5cbiAgICAgICAgPGlucHV0XG4gICAgICAgICAgdHlwZT1cImZpbGVcIlxuICAgICAgICAgIGlkPVwiZmlsZUlucHV0XCJcbiAgICAgICAgICAoY2hhbmdlKT1cIm9uRmlsZVNlbGVjdGVkKCRldmVudClcIlxuICAgICAgICAgIHN0eWxlPVwiZGlzcGxheTogbm9uZVwiXG4gICAgICAgICAgYWNjZXB0PVwiLmNzdiwgYXBwbGljYXRpb24vdm5kLm9wZW54bWxmb3JtYXRzLW9mZmljZWRvY3VtZW50LnNwcmVhZHNoZWV0bWwuc2hlZXQsIGFwcGxpY2F0aW9uL3ZuZC5tcy1leGNlbFwiXG4gICAgICAgICAgbXVsdGlwbGVcbiAgICAgICAgLz5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiAqbmdJZj1cImZpbGVzLmxlbmd0aCA+IDBcIj5cbiAgICAgICAgPGgzPlVwbG9hZGVkIEZpbGVzOjwvaDM+XG4gICAgICAgIDx1bD5cbiAgICAgICAgICA8bGkgKm5nRm9yPVwibGV0IGZpbGUgb2YgZmlsZXNcIj57eyBmaWxlLm5hbWUgfX08L2xpPlxuICAgICAgICA8L3VsPlxuICAgICAgPC9kaXY+XG4gICAgPC9zZWN0aW9uPlxuICA8L2Rpdj5cbiAgPGRpdiBjYXJkLWZvb3RlciBjbGFzcz1cImNhcmQtZm9vdGVyXCI+XG4gICAgPGJ1dHRvbiBjbGFzcz1cImV4cG9ydC1idXR0b25cIiAoY2xpY2spPVwic2F2ZSgpXCI+SW1wb3J0PC9idXR0b24+XG4gIDwvZGl2PlxuPC92ZXJiZW4tY2FyZD5cblxuPCEtLSBNb2RhbCBDb21wb25lbnQgLS0+XG48dmVyYmVuLWRpYWxvZ3VlXG4gIFtzaG93Q2xvc2VJY29uXT1cInRydWVcIlxuICBbZGlzbWlzc091dHNpZGVDbGlja109XCJ0cnVlXCJcbiAgW2Nsb3NlT25Fc2NhcGVdPVwidHJ1ZVwiXG4gIFtzaXplXT1cIidsYXJnZSdcIlxuICBbbW9kZV09XCInZGlhbG9ndWUnXCJcbiAgW2N1c3RvbUNsYXNzXT1cIidteS1tb2RhbC1jdXN0b20tY2xhc3MnXCJcbiAgW2Rpc2FibGVGb290ZXJdPVwiZmFsc2VcIlxuICBbbW9kYWxEYXRhXT1cIlt7IGRhdGE6IHsgZmlyc3RfbmFtZTogJ3ZlcmJlbi1uZycsIGxhc3RfbmFtZTogJ3ZlcmJlbmEnIH0gfV1cIlxuICBbaXNWaXNpYmxlXT1cInNob3dQcmV2aWV3XCJcbiAgW2hlYWRlclRlbXBsYXRlXT1cImhlYWRlclRlbXBsYXRlXCJcbiAgW2JvZHlUZW1wbGF0ZV09XCJib2R5VGVtcGxhdGVcIlxuICBbZm9vdGVyVGVtcGxhdGVdPVwiZm9vdGVyVGVtcGxhdGVcIlxuPlxuICA8YSBkb3dubG9hZD1cIlwiPjwvYT5cbjwvdmVyYmVuLWRpYWxvZ3VlPlxuXG48IS0tIERlZmluZSB0ZW1wbGF0ZXMgLS0+XG48bmctdGVtcGxhdGUgI2hlYWRlclRlbXBsYXRlPlxuICA8aDI+VXBsb2FkIFByZXZpZXc8L2gyPlxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNib2R5VGVtcGxhdGU+XG4gIDxkaXYgY2xhc3M9XCJmbGV4IGdhcC00IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWJldHdlZW5cIj5cbiAgICA8cCBjbGFzcz1cIlwiPlRvdGFsIEl0ZW1zOiB7eyBwcmV2aWV3RGF0YSgpPy5sZW5ndGggfX08L3A+XG5cbiAgICA8dmVyYmVuLWRyb3AtZG93blxuICAgICAgW211bHRpc2VsZWN0XT1cInRydWVcIlxuICAgICAgcGxhY2Vob2xkZXI9XCJGaW5kIGR1cGxpY2F0ZXMgYnlcIlxuICAgICAgW29wdGlvbnNdPVwiZmllbGRzKClcIlxuICAgICAgW25nTW9kZWxdPVwidW5pcXVlSWRlbnRpZmllcnMoKVwiXG4gICAgICAobmdNb2RlbENoYW5nZSk9XCJ1bmlxdWVJZGVudGlmaWVycy5zZXQoJGV2ZW50KVwiXG4gICAgPjwvdmVyYmVuLWRyb3AtZG93bj5cbiAgPC9kaXY+XG4gIDxsaWItZGF0YS10YWJsZVxuICAgIFtkYXRhXT1cInByZXZpZXdEYXRhKCkgPz8gW11cIlxuICAgIFtjb2x1bW5zXT1cInByZXZpZXdDb2x1bW5zKCkgPz8gW11cIlxuICAgIFtmb3JtR3JvdXBDb25maWddPVwiZm9ybUdyb3VwQ29uZmlnKClcIlxuICA+XG4gICAgQGZvciAoY29sdW1uIG9mIHByZXZpZXdDb2x1bW5zKCk7IHRyYWNrIGNvbHVtbi5pZCkge1xuICAgIDxuZy1jb250YWluZXIgW2xpYkNvbHVtbl09XCJjb2x1bW4uaWRcIj5cbiAgICAgIDwhLS0gPG5nLXRlbXBsYXRlICNjZWxsIGxldC12YWx1ZT1cInZhbHVlXCIgbGV0LXJvdz1cInJvd1wiPlxuICAgICAgICA8cD57eyB2YWx1ZSB9fTwvcD5cbiAgICAgIDwvbmctdGVtcGxhdGU+IC0tPlxuICAgICAgQGlmIChjb2x1bW4uZm9ybUNvbnRyb2xOYW1lIHx8IGNvbHVtbi5hY2Nlc3NvcktleSkge1xuICAgICAgPG5nLXRlbXBsYXRlXG4gICAgICAgICNjZWxsXG4gICAgICAgIGxldC12YWx1ZT1cInZhbHVlXCJcbiAgICAgICAgbGV0LXJvdz1cInJvd1wiXG4gICAgICAgIGxldC1mb3JtQ29udHJvbD1cImZvcm1Db250cm9sXCJcbiAgICAgID5cbiAgICAgICAgQGlmIChmb3JtQ29udHJvbCkge1xuICAgICAgICA8aW5wdXQgdHlwZT1cInRleHRcIiBbZm9ybUNvbnRyb2xdPVwiZm9ybUNvbnRyb2xcIiAvPlxuICAgICAgICB9IEBlbHNlIGlmIChjb2x1bW4uYWNjZXNzb3JLZXkpIHtcbiAgICAgICAgPGlucHV0IHR5cGU9XCJ0ZXh0XCIgW25nTW9kZWxdPVwidmFsdWVcIiAvPlxuICAgICAgICB9IEBlbHNlIGlmIChjb2x1bW4uY2VsbEVkaXRUZW1wbGF0ZSkge1xuICAgICAgICA8bmctY29udGFpbmVyXG4gICAgICAgICAgW25nVGVtcGxhdGVPdXRsZXRdPVwiY29sdW1uLmNlbGxFZGl0VGVtcGxhdGVcIlxuICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJmb3JtQ29udHJvbFwiXG4gICAgICAgID48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgfVxuICAgICAgPC9uZy10ZW1wbGF0ZT5cblxuICAgICAgPG5nLXRlbXBsYXRlXG4gICAgICAgICNjZWxsRWRpdFxuICAgICAgICBsZXQtdmFsdWU9XCJ2YWx1ZVwiXG4gICAgICAgIGxldC1yb3c9XCJyb3dcIlxuICAgICAgICBsZXQtZm9ybUNvbnRyb2w9XCJmb3JtQ29udHJvbFwiXG4gICAgICA+XG4gICAgICAgIEBpZiAoZm9ybUNvbnRyb2wpIHtcbiAgICAgICAgPGlucHV0IHR5cGU9XCJ0ZXh0XCIgW2Zvcm1Db250cm9sXT1cImZvcm1Db250cm9sXCIgLz5cbiAgICAgICAgfSBAZWxzZSBpZiAoY29sdW1uLmFjY2Vzc29yS2V5KSB7XG4gICAgICAgIDxpbnB1dCB0eXBlPVwidGV4dFwiIFtuZ01vZGVsXT1cInZhbHVlXCIgLz5cbiAgICAgICAgfSBAZWxzZSBpZiAoY29sdW1uLmNlbGxFZGl0VGVtcGxhdGUpIHtcbiAgICAgICAgPG5nLWNvbnRhaW5lclxuICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImNvbHVtbi5jZWxsRWRpdFRlbXBsYXRlXCJcbiAgICAgICAgICBbbmdUZW1wbGF0ZU91dGxldENvbnRleHRdPVwiZm9ybUNvbnRyb2xcIlxuICAgICAgICA+PC9uZy1jb250YWluZXI+XG4gICAgICAgIH1cbiAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgICB9XG4gICAgPC9uZy1jb250YWluZXI+XG4gICAgfVxuXG4gICAgPG5nLWNvbnRhaW5lciBsaWJDb2x1bW49XCJhY3Rpb25zXCI+XG4gICAgICA8bmctdGVtcGxhdGVcbiAgICAgICAgI2NlbGxcbiAgICAgICAgbGV0LXZhbHVlXG4gICAgICAgIGxldC1kZWxldGVSb3c9XCJkZWxldGVSb3dcIlxuICAgICAgICBsZXQtaXNFZGl0aW5nPVwiaXNFZGl0aW5nXCJcbiAgICAgICAgbGV0LXRvZ2dsZVJvd0VkaXQ9XCJ0b2dnbGVSb3dFZGl0XCJcbiAgICAgICAgbGV0LXJvdz1cInJvd1wiXG4gICAgICAgIGxldC1yb3dJbmRleD1cInJvd0luZGV4XCJcbiAgICAgID5cbiAgICAgICAgPGRpdiBjbGFzcz1cImZsZXggZ2FwLTZcIj5cbiAgICAgICAgICA8dmVyYmVuLXN2Z1xuICAgICAgICAgICAgKGNsaWNrKT1cInRvZ2dsZVJvd0VkaXQoKVwiXG4gICAgICAgICAgICBpY29uPVwiZWRpdFwiXG4gICAgICAgICAgICBbd2lkdGhdPVwiMTVcIlxuICAgICAgICAgICAgW2hlaWdodF09XCIxNVwiXG4gICAgICAgICAgICBjbGFzcz1cImN1cnNvci1wb2ludGVyXCJcbiAgICAgICAgICA+PC92ZXJiZW4tc3ZnPlxuXG4gICAgICAgICAgPHZlcmJlbi1zdmdcbiAgICAgICAgICAgIGljb249XCJkZWxldGVcIlxuICAgICAgICAgICAgW3dpZHRoXT1cIjE1XCJcbiAgICAgICAgICAgIFtoZWlnaHRdPVwiMTVcIlxuICAgICAgICAgICAgKGNsaWNrKT1cImRlbGV0ZVJvdygpXCJcbiAgICAgICAgICAgIGNsYXNzPVwiY3Vyc29yLXBvaW50ZXJcIlxuICAgICAgICAgID48L3ZlcmJlbi1zdmc+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9uZy10ZW1wbGF0ZT5cblxuICAgICAgPG5nLXRlbXBsYXRlXG4gICAgICAgICNjZWxsRWRpdFxuICAgICAgICBsZXQtdmFsdWVcbiAgICAgICAgbGV0LWRlbGV0ZVJvd1xuICAgICAgICBsZXQtaXNFZGl0aW5nPVwiaXNFZGl0aW5nXCJcbiAgICAgICAgbGV0LXRvZ2dsZVJvd0VkaXQ9XCJ0b2dnbGVSb3dFZGl0XCJcbiAgICAgICAgbGV0LXJvdz1cInJvd1wiXG4gICAgICAgIGxldC1yb3dJbmRleD1cInJvd0luZGV4XCJcbiAgICAgID5cbiAgICAgICAgPGRpdiBjbGFzcz1cImZsZXggZ2FwLTZcIj5cbiAgICAgICAgICA8dmVyYmVuLXN2Z1xuICAgICAgICAgICAgKGNsaWNrKT1cInRvZ2dsZVJvd0VkaXQoKVwiXG4gICAgICAgICAgICBpY29uPVwidGlja1wiXG4gICAgICAgICAgICBbd2lkdGhdPVwiMTVcIlxuICAgICAgICAgICAgW2hlaWdodF09XCIxNVwiXG4gICAgICAgICAgICBjbGFzcz1cImN1cnNvci1wb2ludGVyXCJcbiAgICAgICAgICA+PC92ZXJiZW4tc3ZnPlxuXG4gICAgICAgICAgPHZlcmJlbi1zdmdcbiAgICAgICAgICAgIGljb249XCJkZWxldGVcIlxuICAgICAgICAgICAgW3dpZHRoXT1cIjE1XCJcbiAgICAgICAgICAgIFtoZWlnaHRdPVwiMTVcIlxuICAgICAgICAgICAgKGNsaWNrKT1cInRvZ2dsZVJvd0VkaXQoKVwiXG4gICAgICAgICAgICBjbGFzcz1cImN1cnNvci1wb2ludGVyXCJcbiAgICAgICAgICA+PC92ZXJiZW4tc3ZnPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgPC9uZy1jb250YWluZXI+XG4gIDwvbGliLWRhdGEtdGFibGU+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI2Zvb3RlclRlbXBsYXRlPlxuICA8IS0tIDxidXR0b24gY2xhc3M9XCJidG4gYnRuLXNlY29uZGFyeVwiIChjbGljayk9XCJvbk1vZGFsQ2xvc2UoJGV2ZW50KVwiPkNhbmNlbDwvYnV0dG9uPlxuICA8YnV0dG9uIGNsYXNzPVwiYnRuIGJ0bi1wcmltYXJ5XCIgKGNsaWNrKT1cIm9uQ29uZmlybSgpXCI+Q29uZmlybTwvYnV0dG9uPiAtLT5cbjwvbmctdGVtcGxhdGU+XG4iXX0=

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

@@ -5676,6 +5676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImpo
 class DataImportComponent {
     previewColumns = input();
     formGroupConfig = input();
+    fields = input([]);
     title = input();
     previewData = input();
     exportTemplateEvent = output();
@@ -5733,11 +5734,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 }, 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]=\"getControlNames()\"\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" }, 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"] }] });
 }
 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]=\"getControlNames()\"\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 #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"] }]
         }], ctorParameters: () => [] });
 class VerbenDialogueModule {