verben-ng-ui 1.2.62 → 1.2.64
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.
- package/esm2022/src/lib/components/data-export/data-export.component.mjs +1 -1
- package/esm2022/src/lib/components/data-extend/data-extend.component.mjs +1 -1
- package/esm2022/src/lib/components/data-filter/data-filter.component.mjs +1 -1
- package/esm2022/src/lib/components/data-import/data-import.component.mjs +1 -1
- package/esm2022/src/lib/components/data-xport/data-xport.component.mjs +1 -1
- package/esm2022/src/lib/components/date-picker/date-picker.component.mjs +7 -4
- package/esm2022/src/lib/components/drop-down/drop-down.component.mjs +6 -3
- package/esm2022/src/lib/components/table-filter/table-filter.component.mjs +1 -1
- package/fesm2022/verben-ng-ui-src-lib-components-data-export.mjs +1 -1
- package/fesm2022/verben-ng-ui-src-lib-components-data-export.mjs.map +1 -1
- package/fesm2022/verben-ng-ui-src-lib-components-data-extend.mjs +1 -1
- package/fesm2022/verben-ng-ui-src-lib-components-data-extend.mjs.map +1 -1
- package/fesm2022/verben-ng-ui-src-lib-components-data-filter.mjs +1 -1
- package/fesm2022/verben-ng-ui-src-lib-components-data-filter.mjs.map +1 -1
- package/fesm2022/verben-ng-ui-src-lib-components-data-import.mjs +1 -1
- package/fesm2022/verben-ng-ui-src-lib-components-data-import.mjs.map +1 -1
- package/fesm2022/verben-ng-ui-src-lib-components-data-xport.mjs +1 -1
- package/fesm2022/verben-ng-ui-src-lib-components-data-xport.mjs.map +1 -1
- package/fesm2022/verben-ng-ui-src-lib-components-date-picker.mjs +6 -3
- package/fesm2022/verben-ng-ui-src-lib-components-date-picker.mjs.map +1 -1
- package/fesm2022/verben-ng-ui-src-lib-components-drop-down.mjs +5 -2
- package/fesm2022/verben-ng-ui-src-lib-components-drop-down.mjs.map +1 -1
- package/fesm2022/verben-ng-ui-src-lib-components-table-filter.mjs +1 -1
- package/fesm2022/verben-ng-ui-src-lib-components-table-filter.mjs.map +1 -1
- package/package.json +97 -97
- package/src/lib/components/date-picker/date-picker.component.d.ts +2 -1
- package/src/lib/components/drop-down/drop-down.component.d.ts +2 -1
|
@@ -194,7 +194,7 @@ export class DataExportComponent {
|
|
|
194
194
|
this.showAllGroups = !this.showAllGroups;
|
|
195
195
|
}
|
|
196
196
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataExportComponent, deps: [{ token: i1.DataExportService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
197
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: DataExportComponent, selector: "lib-data-export", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, dataFetchUrl: { classPropertyName: "dataFetchUrl", publicName: "dataFetchUrl", isSignal: true, isRequired: false, transformFunction: null }, dataQueryParameters: { classPropertyName: "dataQueryParameters", publicName: "dataQueryParameters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportDataEvent: "exportDataEvent" }, usesOnChanges: true, 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\">Export</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)=\"resetAll()\"\n >\n Reset\n </button>\n </div>\n <div card-body class=\"card-body\">\n <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Profiles</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"grey\"\n ></verben-svg>\n </div>\n <div *ngFor=\"let profile of visibleProfiles; let i = index\" class=\"item\">\n <div class=\"item-label\">\n <input\n type=\"checkbox\"\n [id]=\"'profile-' + i\"\n [(ngModel)]=\"profile.selected\"\n />\n <label [for]=\"'profile-' + i\" class=\"checkbox-label\">\n {{ profile.name }}\n </label>\n </div>\n <div class=\"item-actions\">\n <verben-svg\n icon=\"edit\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#3479E9\"\n fill=\"white\"\n (click)=\"editProfile(profile)\"\n ></verben-svg>\n <verben-svg\n icon=\"delete\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#E20000\"\n (click)=\"removeProfile(profile)\"\n ></verben-svg>\n </div>\n </div>\n <div\n *ngIf=\"profiles.length > 3\"\n (click)=\"toggleShowAllProfiles()\"\n class=\"show-more\"\n >\n <span>{{ showAllProfiles ? \"Show less\" : \"Show more\" }}</span>\n <verben-svg\n icon=\"chevron\"\n [width]=\"8\"\n [height]=\"6\"\n fill=\"black\"\n stroke=\"black\"\n ></verben-svg>\n </div>\n </section>\n <hr class=\"divider\" />\n <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Group</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"grey\"\n ></verben-svg>\n </div>\n <form [formGroup]=\"newGroupForm\" (ngSubmit)=\"addGroup()\">\n <verbena-input\n placeholder=\"Group name\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n width=\"100%\"\n fontSize=\"11px\"\n height=\"20px\"\n pd=\"2px 4px !important\"\n bgColor=\"transparent\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n formControlName=\"name\"\n ></verbena-input>\n </form>\n <div *ngFor=\"let item of visibleGroups; let i = index\" class=\"item\">\n <div class=\"item-label\">\n <input\n type=\"checkbox\"\n [id]=\"'group-' + i\"\n [(ngModel)]=\"item.selected\"\n />\n <label [for]=\"'group-' + i\" class=\"checkbox-label\">\n {{ item.name }}\n </label>\n </div>\n <div class=\"item-actions\" *ngIf=\"item.type === 'operation'\">\n <verben-svg\n icon=\"edit\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#3479E9\"\n fill=\"white\"\n (click)=\"editOperation(item)\"\n ></verben-svg>\n <verben-svg\n icon=\"delete\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#E20000\"\n (click)=\"removeOperation(item)\"\n ></verben-svg>\n </div>\n </div>\n\n <div class=\"flex items-center justify-between\">\n <button\n *ngIf=\"groupItems.length > 3\"\n (click)=\"toggleShowAllGroups()\"\n class=\"show-more\"\n >\n <span>{{ showAllGroups ? \"Show less\" : \"Show more\" }}</span>\n <verben-svg\n icon=\"chevron\"\n [width]=\"8\"\n [height]=\"6\"\n fill=\"black\"\n stroke=\"black\"\n ></verben-svg>\n </button>\n <button class=\"add-button\" (click)=\"addGroup()\">+ Add</button>\n </div>\n </section>\n <hr class=\"divider\" />\n <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Operation</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"grey\"\n ></verben-svg>\n </div>\n <verbena-input\n placeholder=\"Operation name\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n fontSize=\"11px\"\n width=\"100%\"\n height=\"20px\"\n pd=\"2px 6px\"\n bgColor=\"transparent\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n [(ngModel)]=\"newOperation.name\"\n ></verbena-input>\n <div class=\"operation-grid\">\n <verben-drop-down\n width=\"'8rem'\"\n height=\"'1.25rem'\"\n placeholder=\"Select field\"\n [options]=\"numericProperties.concat(stringProperties)\"\n [(ngModel)]=\"newOperation.field1\"\n (ngModelChange)=\"onField1Change()\"\n >\n </verben-drop-down>\n <verben-drop-down\n width=\"'8rem'\"\n height=\"'1.25rem'\"\n placeholder=\"Select operator\"\n [options]=\"availableOperators\"\n [(ngModel)]=\"newOperation.operator\"\n >\n </verben-drop-down>\n <verben-drop-down\n width=\"'8rem'\"\n placeholder=\"Select field\"\n [options]=\"availableFields2\"\n [(ngModel)]=\"newOperation.field2\"\n >\n </verben-drop-down>\n </div>\n <button class=\"add-button ml-auto\" (click)=\"addOrUpdateOperation()\">\n {{ isEditingOperation ? \"Update\" : \"+ Add\" }}\n </button>\n </section>\n\n <section class=\"section\">\n @if (dataFetchUrl()) {\n <div class=\"section-header\">\n <h3 class=\"section-title\">Record Size</h3>\n </div>\n }\n </section>\n </div>\n <div card-footer class=\"card-footer\">\n <button class=\"export-button\" (click)=\"exportData()\">Export</button>\n </div>\n</verben-card>\n", styles: [".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,.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;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}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i5.CardComponent, selector: "verben-card", inputs: ["pd", "mg", "height", "width", "textColor", "bgColor", "border", "borderRadius", "disabled", "aspectRatio"] }, { 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: "component", type: i7.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
197
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: DataExportComponent, selector: "lib-data-export", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, dataFetchUrl: { classPropertyName: "dataFetchUrl", publicName: "dataFetchUrl", isSignal: true, isRequired: false, transformFunction: null }, dataQueryParameters: { classPropertyName: "dataQueryParameters", publicName: "dataQueryParameters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportDataEvent: "exportDataEvent" }, usesOnChanges: true, 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\">Export</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)=\"resetAll()\"\n >\n Reset\n </button>\n </div>\n <div card-body class=\"card-body\">\n <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Profiles</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"grey\"\n ></verben-svg>\n </div>\n <div *ngFor=\"let profile of visibleProfiles; let i = index\" class=\"item\">\n <div class=\"item-label\">\n <input\n type=\"checkbox\"\n [id]=\"'profile-' + i\"\n [(ngModel)]=\"profile.selected\"\n />\n <label [for]=\"'profile-' + i\" class=\"checkbox-label\">\n {{ profile.name }}\n </label>\n </div>\n <div class=\"item-actions\">\n <verben-svg\n icon=\"edit\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#3479E9\"\n fill=\"white\"\n (click)=\"editProfile(profile)\"\n ></verben-svg>\n <verben-svg\n icon=\"delete\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#E20000\"\n (click)=\"removeProfile(profile)\"\n ></verben-svg>\n </div>\n </div>\n <div\n *ngIf=\"profiles.length > 3\"\n (click)=\"toggleShowAllProfiles()\"\n class=\"show-more\"\n >\n <span>{{ showAllProfiles ? \"Show less\" : \"Show more\" }}</span>\n <verben-svg\n icon=\"chevron\"\n [width]=\"8\"\n [height]=\"6\"\n fill=\"black\"\n stroke=\"black\"\n ></verben-svg>\n </div>\n </section>\n <hr class=\"divider\" />\n <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Group</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"grey\"\n ></verben-svg>\n </div>\n <form [formGroup]=\"newGroupForm\" (ngSubmit)=\"addGroup()\">\n <verbena-input\n placeholder=\"Group name\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n width=\"100%\"\n fontSize=\"11px\"\n height=\"20px\"\n pd=\"2px 4px !important\"\n bgColor=\"transparent\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n formControlName=\"name\"\n ></verbena-input>\n </form>\n <div *ngFor=\"let item of visibleGroups; let i = index\" class=\"item\">\n <div class=\"item-label\">\n <input\n type=\"checkbox\"\n [id]=\"'group-' + i\"\n [(ngModel)]=\"item.selected\"\n />\n <label [for]=\"'group-' + i\" class=\"checkbox-label\">\n {{ item.name }}\n </label>\n </div>\n <div class=\"item-actions\" *ngIf=\"item.type === 'operation'\">\n <verben-svg\n icon=\"edit\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#3479E9\"\n fill=\"white\"\n (click)=\"editOperation(item)\"\n ></verben-svg>\n <verben-svg\n icon=\"delete\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#E20000\"\n (click)=\"removeOperation(item)\"\n ></verben-svg>\n </div>\n </div>\n\n <div class=\"flex items-center justify-between\">\n <button\n *ngIf=\"groupItems.length > 3\"\n (click)=\"toggleShowAllGroups()\"\n class=\"show-more\"\n >\n <span>{{ showAllGroups ? \"Show less\" : \"Show more\" }}</span>\n <verben-svg\n icon=\"chevron\"\n [width]=\"8\"\n [height]=\"6\"\n fill=\"black\"\n stroke=\"black\"\n ></verben-svg>\n </button>\n <button class=\"add-button\" (click)=\"addGroup()\">+ Add</button>\n </div>\n </section>\n <hr class=\"divider\" />\n <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Operation</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"grey\"\n ></verben-svg>\n </div>\n <verbena-input\n placeholder=\"Operation name\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n fontSize=\"11px\"\n width=\"100%\"\n height=\"20px\"\n pd=\"2px 6px\"\n bgColor=\"transparent\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n [(ngModel)]=\"newOperation.name\"\n ></verbena-input>\n <div class=\"operation-grid\">\n <verben-drop-down\n width=\"'8rem'\"\n height=\"'1.25rem'\"\n placeholder=\"Select field\"\n [options]=\"numericProperties.concat(stringProperties)\"\n [(ngModel)]=\"newOperation.field1\"\n (ngModelChange)=\"onField1Change()\"\n >\n </verben-drop-down>\n <verben-drop-down\n width=\"'8rem'\"\n height=\"'1.25rem'\"\n placeholder=\"Select operator\"\n [options]=\"availableOperators\"\n [(ngModel)]=\"newOperation.operator\"\n >\n </verben-drop-down>\n <verben-drop-down\n width=\"'8rem'\"\n placeholder=\"Select field\"\n [options]=\"availableFields2\"\n [(ngModel)]=\"newOperation.field2\"\n >\n </verben-drop-down>\n </div>\n <button class=\"add-button ml-auto\" (click)=\"addOrUpdateOperation()\">\n {{ isEditingOperation ? \"Update\" : \"+ Add\" }}\n </button>\n </section>\n\n <section class=\"section\">\n @if (dataFetchUrl()) {\n <div class=\"section-header\">\n <h3 class=\"section-title\">Record Size</h3>\n </div>\n }\n </section>\n </div>\n <div card-footer class=\"card-footer\">\n <button class=\"export-button\" (click)=\"exportData()\">Export</button>\n </div>\n</verben-card>\n", styles: [".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,.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;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}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i5.CardComponent, selector: "verben-card", inputs: ["pd", "mg", "height", "width", "textColor", "bgColor", "border", "borderRadius", "disabled", "aspectRatio"] }, { kind: "component", type: i6.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "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: "component", type: i7.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
198
198
|
}
|
|
199
199
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataExportComponent, decorators: [{
|
|
200
200
|
type: Component,
|
|
@@ -105,7 +105,7 @@ export class DataExtendComponent {
|
|
|
105
105
|
this.selectedItem = item;
|
|
106
106
|
}
|
|
107
107
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataExtendComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
108
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.10", type: DataExtendComponent, selector: "lib-data-extend", inputs: { properties: { classPropertyName: "properties", publicName: "properties", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { extendDataEvent: "extendDataEvent" }, 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\">Expand</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 <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Entity</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"grey\"\n ></verben-svg>\n </div>\n <div *ngFor=\"let item of visibleItems(); let i = index\" class=\"item\">\n <div class=\"item-label\">\n <!-- <input\n type=\"checkbox\"\n [id]=\"'item-' + i\"\n [(ngModel)]=\"item.selected\"\n /> -->\n <label [for]=\"'item-' + i\" class=\"checkbox-label\">\n {{ item.Name }}\n </label>\n </div>\n <div class=\"item-actions\">\n <verben-svg\n icon=\"edit\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#3479E9\"\n fill=\"white\"\n (click)=\"editItem(i)\"\n ></verben-svg>\n <verben-svg\n icon=\"delete\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#E20000\"\n (click)=\"removeItem(i)\"\n ></verben-svg>\n </div>\n </div>\n <div\n *ngIf=\"items().length > 3\"\n (click)=\"toggleShowAll()\"\n class=\"show-more\"\n >\n <span>{{ showAll() ? \"Show less\" : \"Show more\" }}</span>\n <verben-svg\n icon=\"chevron\"\n [width]=\"8\"\n [height]=\"6\"\n fill=\"black\"\n stroke=\"black\"\n ></verben-svg>\n </div>\n </section>\n <hr class=\"divider\" />\n <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Properties</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"grey\"\n ></verben-svg>\n </div>\n <form [formGroup]=\"form\" (ngSubmit)=\"addItem()\">\n <div class=\"\">\n <p class=\"\">Name</p>\n <verbena-input\n placeholder=\"Enter property name\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n width=\"100%\"\n fontSize=\"11px\"\n height=\"20px\"\n pd=\"2px 4px !important\"\n bgColor=\"transparent\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n formControlName=\"Name\"\n ></verbena-input>\n </div>\n\n <div>\n <label for=\"DataType\">Data Type</label>\n <verben-drop-down\n id=\"DataType\"\n width=\"'100%'\"\n height=\"'1.25rem'\"\n placeholder=\"Select type\"\n [options]=\"dataTypes\"\n formControlName=\"DataType\"\n >\n </verben-drop-down>\n </div>\n\n <div>\n <label htmlFor=\"Options\" class=\"mb-2\">Enter Options</label>\n <verben-chip\n label=\"Options\"\n id=\"Options\"\n [placeholder]=\"'Enter Options'\"\n formControlName=\"Options\"\n ></verben-chip>\n </div>\n\n <div>\n <label for=\"DefaultValue\">Default Value</label>\n\n <verbena-input\n [placeHolder]=\"'Enter default text'\"\n formControlName=\"DefaultValue\"\n id=\"DefaultValue\"\n label=\"Default Value (optional)\"\n />\n </div>\n\n <div>\n <p class=\"mb-2\">Required</p>\n\n <verbena-switch\n label=\"Required\"\n [onColor]=\"'#1A237E'\"\n formControlName=\"IsRequired\"\n ></verbena-switch>\n </div>\n\n <div class=\"value-range\">\n <verbena-input\n [type]=\"'number'\"\n name=\"minValue\"\n label=\"Min Value\"\n formControlName=\"MinValue\"\n />\n <verbena-input\n [type]=\"'number'\"\n name=\"maxValue\"\n label=\"Max Value\"\n formControlName=\"MinValue\"\n />\n </div>\n\n <button\n [disabled]=\"!form.valid\"\n class=\"add-button ml-auto\"\n type=\"submit\"\n >\n + Add\n </button>\n </form>\n </section>\n </div>\n <div card-footer class=\"card-footer\">\n <button class=\"export-button\" (click)=\"save()\">Extend</button>\n </div>\n</verben-card>\n", styles: [".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,.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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i4.CardComponent, selector: "verben-card", inputs: ["pd", "mg", "height", "width", "textColor", "bgColor", "border", "borderRadius", "disabled", "aspectRatio"] }, { kind: "component", type: i5.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: "component", type: i6.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i7.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }, { kind: "component", type: i8.ChipComponent, selector: "verben-chip", inputs: ["width", "placeholder", "max", "styleClass", "separator", "disabled", "required", "invalidMessage", "errorPosition"], outputs: ["onChange"] }] });
|
|
108
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.10", type: DataExtendComponent, selector: "lib-data-extend", inputs: { properties: { classPropertyName: "properties", publicName: "properties", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { extendDataEvent: "extendDataEvent" }, 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\">Expand</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 <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Entity</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"grey\"\n ></verben-svg>\n </div>\n <div *ngFor=\"let item of visibleItems(); let i = index\" class=\"item\">\n <div class=\"item-label\">\n <!-- <input\n type=\"checkbox\"\n [id]=\"'item-' + i\"\n [(ngModel)]=\"item.selected\"\n /> -->\n <label [for]=\"'item-' + i\" class=\"checkbox-label\">\n {{ item.Name }}\n </label>\n </div>\n <div class=\"item-actions\">\n <verben-svg\n icon=\"edit\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#3479E9\"\n fill=\"white\"\n (click)=\"editItem(i)\"\n ></verben-svg>\n <verben-svg\n icon=\"delete\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#E20000\"\n (click)=\"removeItem(i)\"\n ></verben-svg>\n </div>\n </div>\n <div\n *ngIf=\"items().length > 3\"\n (click)=\"toggleShowAll()\"\n class=\"show-more\"\n >\n <span>{{ showAll() ? \"Show less\" : \"Show more\" }}</span>\n <verben-svg\n icon=\"chevron\"\n [width]=\"8\"\n [height]=\"6\"\n fill=\"black\"\n stroke=\"black\"\n ></verben-svg>\n </div>\n </section>\n <hr class=\"divider\" />\n <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Properties</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"grey\"\n ></verben-svg>\n </div>\n <form [formGroup]=\"form\" (ngSubmit)=\"addItem()\">\n <div class=\"\">\n <p class=\"\">Name</p>\n <verbena-input\n placeholder=\"Enter property name\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n width=\"100%\"\n fontSize=\"11px\"\n height=\"20px\"\n pd=\"2px 4px !important\"\n bgColor=\"transparent\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n formControlName=\"Name\"\n ></verbena-input>\n </div>\n\n <div>\n <label for=\"DataType\">Data Type</label>\n <verben-drop-down\n id=\"DataType\"\n width=\"'100%'\"\n height=\"'1.25rem'\"\n placeholder=\"Select type\"\n [options]=\"dataTypes\"\n formControlName=\"DataType\"\n >\n </verben-drop-down>\n </div>\n\n <div>\n <label htmlFor=\"Options\" class=\"mb-2\">Enter Options</label>\n <verben-chip\n label=\"Options\"\n id=\"Options\"\n [placeholder]=\"'Enter Options'\"\n formControlName=\"Options\"\n ></verben-chip>\n </div>\n\n <div>\n <label for=\"DefaultValue\">Default Value</label>\n\n <verbena-input\n [placeHolder]=\"'Enter default text'\"\n formControlName=\"DefaultValue\"\n id=\"DefaultValue\"\n label=\"Default Value (optional)\"\n />\n </div>\n\n <div>\n <p class=\"mb-2\">Required</p>\n\n <verbena-switch\n label=\"Required\"\n [onColor]=\"'#1A237E'\"\n formControlName=\"IsRequired\"\n ></verbena-switch>\n </div>\n\n <div class=\"value-range\">\n <verbena-input\n [type]=\"'number'\"\n name=\"minValue\"\n label=\"Min Value\"\n formControlName=\"MinValue\"\n />\n <verbena-input\n [type]=\"'number'\"\n name=\"maxValue\"\n label=\"Max Value\"\n formControlName=\"MinValue\"\n />\n </div>\n\n <button\n [disabled]=\"!form.valid\"\n class=\"add-button ml-auto\"\n type=\"submit\"\n >\n + Add\n </button>\n </form>\n </section>\n </div>\n <div card-footer class=\"card-footer\">\n <button class=\"export-button\" (click)=\"save()\">Extend</button>\n </div>\n</verben-card>\n", styles: [".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,.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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i4.CardComponent, selector: "verben-card", inputs: ["pd", "mg", "height", "width", "textColor", "bgColor", "border", "borderRadius", "disabled", "aspectRatio"] }, { kind: "component", type: i5.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "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: "component", type: i6.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i7.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }, { kind: "component", type: i8.ChipComponent, selector: "verben-chip", inputs: ["width", "placeholder", "max", "styleClass", "separator", "disabled", "required", "invalidMessage", "errorPosition"], outputs: ["onChange"] }] });
|
|
109
109
|
}
|
|
110
110
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataExtendComponent, decorators: [{
|
|
111
111
|
type: Component,
|
|
@@ -136,7 +136,7 @@ export class DataFilterComponent {
|
|
|
136
136
|
return this.savedFilters.filter((filter) => filter.selected).length;
|
|
137
137
|
}
|
|
138
138
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
139
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: DataFilterComponent, selector: "lib-data-filter", inputs: { columns: "columns", data: "data" }, outputs: { filterApplied: "filterApplied", resetFilter: "resetFilter" }, ngImport: i0, template: "<verben-card\n width=\"24rem\"\n borderRadius=\"1rem\"\n [border]=\"'1px solid #D4A007'\"\n bgColor=\"#FFFFFF\"\n>\n <div card-header class=\"card-header\">\n <h4 class=\"header-title\">\n Filter <sup>({{ activeFilterCount }})</sup>\n </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)=\"resetAll()\"\n >\n Reset\n </button>\n </div>\n\n <div card-body class=\"card-body\">\n <!-- Saved Filters Section -->\n <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Filters</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"grey\"\n ></verben-svg>\n </div>\n\n <div *ngFor=\"let filter of visibleFilters\" class=\"item\">\n <div class=\"item-label\">\n <input type=\"checkbox\" [(ngModel)]=\"filter.selected\" />\n <label>{{ getFilterDescription(filter) }}</label>\n </div>\n </div>\n\n <div\n *ngIf=\"savedFilters.length > maxVisibleItems\"\n class=\"show-more\"\n (click)=\"showAllFilters = !showAllFilters\"\n >\n {{ showAllFilters ? \"Show Less\" : \"Show More\" }}\n </div>\n </section>\n\n <hr class=\"divider\" />\n\n <!-- New Filter Operation -->\n <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Operation</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"grey\"\n ></verben-svg>\n </div>\n\n <div class=\"operation-grid\">\n <!-- Column Selection -->\n <verben-drop-down\n width=\"100%\"\n height=\"1.025rem\"\n placeholder=\"Select column\"\n [options]=\"filterableColumns\"\n optionLabel=\"header\"\n optionValue=\"id\"\n [(ngModel)]=\"currentFilter.columnId\"\n (ngModelChange)=\"onColumnSelect($event)\"\n ></verben-drop-down>\n\n <!-- Operator Selection -->\n <verben-drop-down\n width=\"100%\"\n height=\"1.025rem\"\n placeholder=\"Select operator\"\n [options]=\"availableOperators\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [(ngModel)]=\"currentFilter.operator\"\n ></verben-drop-down>\n\n <!-- Value Input based on type -->\n <ng-container [ngSwitch]=\"currentColumnType\">\n <!-- Date Input -->\n <verbena-input\n *ngSwitchCase=\"'date'\"\n type=\"date\"\n placeholder=\"Select date\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n width=\"100%\"\n height=\"1.025rem\"\n pd=\"2px 6px\"\n [(ngModel)]=\"currentFilter.value\"\n ></verbena-input>\n\n <!-- Number Input -->\n <verbena-input\n *ngSwitchCase=\"'number'\"\n type=\"number\"\n placeholder=\"Enter number\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n width=\"100%\"\n height=\"1.025rem\"\n pd=\"2px 6px\"\n [(ngModel)]=\"currentFilter.value\"\n ></verbena-input>\n\n <!-- Text Input (default) -->\n <verbena-input\n *ngSwitchCase=\"'string'\"\n type=\"text\"\n placeholder=\"Enter text\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n width=\"100%\"\n height=\"1.025rem\"\n pd=\"2px 6px\"\n [(ngModel)]=\"currentFilter.value\"\n ></verbena-input>\n </ng-container>\n </div>\n\n <button class=\"add-button ml-auto\" (click)=\"addFilter()\">+ Add</button>\n </section>\n </div>\n\n <div card-footer class=\"card-footer\">\n <button class=\"export-button\" (click)=\"applyFilters()\">Filter</button>\n </div>\n</verben-card>\n", styles: [".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,.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;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}sup{color:#3479e9}\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i4.CardComponent, selector: "verben-card", inputs: ["pd", "mg", "height", "width", "textColor", "bgColor", "border", "borderRadius", "disabled", "aspectRatio"] }, { kind: "component", type: i5.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: "component", type: i6.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }] });
|
|
139
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: DataFilterComponent, selector: "lib-data-filter", inputs: { columns: "columns", data: "data" }, outputs: { filterApplied: "filterApplied", resetFilter: "resetFilter" }, ngImport: i0, template: "<verben-card\n width=\"24rem\"\n borderRadius=\"1rem\"\n [border]=\"'1px solid #D4A007'\"\n bgColor=\"#FFFFFF\"\n>\n <div card-header class=\"card-header\">\n <h4 class=\"header-title\">\n Filter <sup>({{ activeFilterCount }})</sup>\n </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)=\"resetAll()\"\n >\n Reset\n </button>\n </div>\n\n <div card-body class=\"card-body\">\n <!-- Saved Filters Section -->\n <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Filters</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"grey\"\n ></verben-svg>\n </div>\n\n <div *ngFor=\"let filter of visibleFilters\" class=\"item\">\n <div class=\"item-label\">\n <input type=\"checkbox\" [(ngModel)]=\"filter.selected\" />\n <label>{{ getFilterDescription(filter) }}</label>\n </div>\n </div>\n\n <div\n *ngIf=\"savedFilters.length > maxVisibleItems\"\n class=\"show-more\"\n (click)=\"showAllFilters = !showAllFilters\"\n >\n {{ showAllFilters ? \"Show Less\" : \"Show More\" }}\n </div>\n </section>\n\n <hr class=\"divider\" />\n\n <!-- New Filter Operation -->\n <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Operation</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"grey\"\n ></verben-svg>\n </div>\n\n <div class=\"operation-grid\">\n <!-- Column Selection -->\n <verben-drop-down\n width=\"100%\"\n height=\"1.025rem\"\n placeholder=\"Select column\"\n [options]=\"filterableColumns\"\n optionLabel=\"header\"\n optionValue=\"id\"\n [(ngModel)]=\"currentFilter.columnId\"\n (ngModelChange)=\"onColumnSelect($event)\"\n ></verben-drop-down>\n\n <!-- Operator Selection -->\n <verben-drop-down\n width=\"100%\"\n height=\"1.025rem\"\n placeholder=\"Select operator\"\n [options]=\"availableOperators\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [(ngModel)]=\"currentFilter.operator\"\n ></verben-drop-down>\n\n <!-- Value Input based on type -->\n <ng-container [ngSwitch]=\"currentColumnType\">\n <!-- Date Input -->\n <verbena-input\n *ngSwitchCase=\"'date'\"\n type=\"date\"\n placeholder=\"Select date\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n width=\"100%\"\n height=\"1.025rem\"\n pd=\"2px 6px\"\n [(ngModel)]=\"currentFilter.value\"\n ></verbena-input>\n\n <!-- Number Input -->\n <verbena-input\n *ngSwitchCase=\"'number'\"\n type=\"number\"\n placeholder=\"Enter number\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n width=\"100%\"\n height=\"1.025rem\"\n pd=\"2px 6px\"\n [(ngModel)]=\"currentFilter.value\"\n ></verbena-input>\n\n <!-- Text Input (default) -->\n <verbena-input\n *ngSwitchCase=\"'string'\"\n type=\"text\"\n placeholder=\"Enter text\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n width=\"100%\"\n height=\"1.025rem\"\n pd=\"2px 6px\"\n [(ngModel)]=\"currentFilter.value\"\n ></verbena-input>\n </ng-container>\n </div>\n\n <button class=\"add-button ml-auto\" (click)=\"addFilter()\">+ Add</button>\n </section>\n </div>\n\n <div card-footer class=\"card-footer\">\n <button class=\"export-button\" (click)=\"applyFilters()\">Filter</button>\n </div>\n</verben-card>\n", styles: [".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,.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;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}sup{color:#3479e9}\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i4.CardComponent, selector: "verben-card", inputs: ["pd", "mg", "height", "width", "textColor", "bgColor", "border", "borderRadius", "disabled", "aspectRatio"] }, { kind: "component", type: i5.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "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: "component", type: i6.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }] });
|
|
140
140
|
}
|
|
141
141
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataFilterComponent, decorators: [{
|
|
142
142
|
type: Component,
|
|
@@ -174,7 +174,7 @@ export class DataImportComponent {
|
|
|
174
174
|
// this.exportTemplateEvent.emit(this.headers());
|
|
175
175
|
}
|
|
176
176
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataImportComponent, deps: [{ token: i1.DataImportService }], target: i0.ɵɵFactoryTarget.Component });
|
|
177
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.10", type: DataImportComponent, selector: "lib-data-import", inputs: { previewColumns: { classPropertyName: "previewColumns", publicName: "previewColumns", isSignal: true, isRequired: true, 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 }, columnTemplates: { classPropertyName: "columnTemplates", publicName: "columnTemplates", isSignal: true, isRequired: false, transformFunction: null }, parser: { classPropertyName: "parser", publicName: "parser", isSignal: true, isRequired: false, transformFunction: null }, previewData: { classPropertyName: "previewData", publicName: "previewData", isSignal: true, isRequired: false, transformFunction: null }, onImportComplete: { classPropertyName: "onImportComplete", publicName: "onImportComplete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportTemplateEvent: "exportTemplateEvent", importEvent: "importEvent", importEventData: "importEventData", rowSave: "rowSave" }, providers: [DataImportService], 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 <label for=\"fileInput\" class=\"export-button\">Upload File</label>\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\" [style.color]=\"'#3479E9'\"\n >click to browse</label\n >\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\n [disabled]=\"service.importedData().length < 1\"\n class=\"export-button\"\n (click)=\"save()\"\n >\n Import\n </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: {} }]\"\n [isVisible]=\"showPreview\"\n [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\"\n [footerTemplate]=\"footerTemplate\"\n dialogueWidth=\"85%\"\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 my-4\">\n <p class=\"\">Total Items: {{ service.importedData().length }}</p>\n\n <p class=\"\">Duplicates: {{ duplicateIndexSet.size }}</p>\n\n <p class=\"\">Invalid Items: {{ invalidIndexSet.size }}</p>\n\n <verben-drop-down\n [multiselect]=\"true\"\n placeholder=\"Find duplicates by\"\n [options]=\"headers()\"\n [ngModel]=\"uniqueIdentifiers()\"\n (ngModelChange)=\"uniqueIdentifiers.set($event)\"\n ></verben-drop-down>\n </div>\n <div style=\"max-height: min(75vh, 780px); overflow: auto\">\n <lib-data-table\n [data]=\"service.importedData()\"\n [columns]=\"previewColumnsList()\"\n [formGroupConfig]=\"formGroupConfig()\"\n [useVirtualScroll]=\"true\"\n (rowSave)=\"service.addRow($event)\"\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 action-buttons\">\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=\"deleteRow\"\n let-isEditing=\"isEditing\"\n let-toggleRowEdit=\"toggleRowEdit\"\n let-row=\"row\"\n let-rowIndex=\"rowIndex\"\n >\n <div class=\"flex action-buttons\">\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)=\"deleteRow()\"\n class=\"cursor-pointer\"\n ></verben-svg>\n </div>\n </ng-template>\n </ng-container>\n </lib-data-table>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"footer-buttons flex gap-4 items-center justify-between my-4\">\n <button\n class=\"btn btn-secondary cancel-button\"\n (click)=\"showPreview = false\"\n >\n Cancel\n </button>\n <button class=\"btn btn-primary export-button\" (click)=\"save()\">\n Complete\n </button>\n </div>\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,.card-footer{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}.footer-buttons{display:flex;gap:.5rem;align-items:center;justify-content:space-between;width:100%}.cancel-button,.export-button{outline:none;border:none;padding:.2rem 1.6rem;font-size:.75rem;font-weight:600;cursor:pointer}.cancel-button{background-color:#404040;color:#fff}.export-button{background-color:#ffe681;color:#404040}.value-range{display:flex;gap:.5rem;align-items:center}.action-buttons{display:flex;align-items:center;gap:2rem}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.CardComponent, selector: "verben-card", inputs: ["pd", "mg", "height", "width", "textColor", "bgColor", "border", "borderRadius", "disabled", "aspectRatio"] }, { kind: "component", type: i4.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "component", type: i5.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
177
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.10", type: DataImportComponent, selector: "lib-data-import", inputs: { previewColumns: { classPropertyName: "previewColumns", publicName: "previewColumns", isSignal: true, isRequired: true, 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 }, columnTemplates: { classPropertyName: "columnTemplates", publicName: "columnTemplates", isSignal: true, isRequired: false, transformFunction: null }, parser: { classPropertyName: "parser", publicName: "parser", isSignal: true, isRequired: false, transformFunction: null }, previewData: { classPropertyName: "previewData", publicName: "previewData", isSignal: true, isRequired: false, transformFunction: null }, onImportComplete: { classPropertyName: "onImportComplete", publicName: "onImportComplete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportTemplateEvent: "exportTemplateEvent", importEvent: "importEvent", importEventData: "importEventData", rowSave: "rowSave" }, providers: [DataImportService], 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 <label for=\"fileInput\" class=\"export-button\">Upload File</label>\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\" [style.color]=\"'#3479E9'\"\n >click to browse</label\n >\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\n [disabled]=\"service.importedData().length < 1\"\n class=\"export-button\"\n (click)=\"save()\"\n >\n Import\n </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: {} }]\"\n [isVisible]=\"showPreview\"\n [headerTemplate]=\"headerTemplate\"\n [bodyTemplate]=\"bodyTemplate\"\n [footerTemplate]=\"footerTemplate\"\n dialogueWidth=\"85%\"\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 my-4\">\n <p class=\"\">Total Items: {{ service.importedData().length }}</p>\n\n <p class=\"\">Duplicates: {{ duplicateIndexSet.size }}</p>\n\n <p class=\"\">Invalid Items: {{ invalidIndexSet.size }}</p>\n\n <verben-drop-down\n [multiselect]=\"true\"\n placeholder=\"Find duplicates by\"\n [options]=\"headers()\"\n [ngModel]=\"uniqueIdentifiers()\"\n (ngModelChange)=\"uniqueIdentifiers.set($event)\"\n ></verben-drop-down>\n </div>\n <div style=\"max-height: min(75vh, 780px); overflow: auto\">\n <lib-data-table\n [data]=\"service.importedData()\"\n [columns]=\"previewColumnsList()\"\n [formGroupConfig]=\"formGroupConfig()\"\n [useVirtualScroll]=\"true\"\n (rowSave)=\"service.addRow($event)\"\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 action-buttons\">\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=\"deleteRow\"\n let-isEditing=\"isEditing\"\n let-toggleRowEdit=\"toggleRowEdit\"\n let-row=\"row\"\n let-rowIndex=\"rowIndex\"\n >\n <div class=\"flex action-buttons\">\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)=\"deleteRow()\"\n class=\"cursor-pointer\"\n ></verben-svg>\n </div>\n </ng-template>\n </ng-container>\n </lib-data-table>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div class=\"footer-buttons flex gap-4 items-center justify-between my-4\">\n <button\n class=\"btn btn-secondary cancel-button\"\n (click)=\"showPreview = false\"\n >\n Cancel\n </button>\n <button class=\"btn btn-primary export-button\" (click)=\"save()\">\n Complete\n </button>\n </div>\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,.card-footer{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}.footer-buttons{display:flex;gap:.5rem;align-items:center;justify-content:space-between;width:100%}.cancel-button,.export-button{outline:none;border:none;padding:.2rem 1.6rem;font-size:.75rem;font-weight:600;cursor:pointer}.cancel-button{background-color:#404040;color:#fff}.export-button{background-color:#ffe681;color:#404040}.value-range{display:flex;gap:.5rem;align-items:center}.action-buttons{display:flex;align-items:center;gap:2rem}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.CardComponent, selector: "verben-card", inputs: ["pd", "mg", "height", "width", "textColor", "bgColor", "border", "borderRadius", "disabled", "aspectRatio"] }, { kind: "component", type: i4.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "component", type: i5.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i5.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i6.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
178
178
|
}
|
|
179
179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataImportComponent, decorators: [{
|
|
180
180
|
type: Component,
|
|
@@ -306,7 +306,7 @@ export class DataXportComponent {
|
|
|
306
306
|
: column.header;
|
|
307
307
|
}
|
|
308
308
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataXportComponent, deps: [{ token: i1.DataXportService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
309
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.10", type: DataXportComponent, selector: "lib-data-xport", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, useImportKey: { classPropertyName: "useImportKey", publicName: "useImportKey", isSignal: false, isRequired: false, transformFunction: null }, dataFetchUrl: { classPropertyName: "dataFetchUrl", publicName: "dataFetchUrl", isSignal: true, isRequired: false, transformFunction: null }, dataQueryParameters: { classPropertyName: "dataQueryParameters", publicName: "dataQueryParameters", isSignal: true, isRequired: false, transformFunction: null }, dataQueryFunction: { classPropertyName: "dataQueryFunction", publicName: "dataQueryFunction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportDataEvent: "exportDataEvent", exportDataRangeEvent: "exportDataRangeEvent" }, usesOnChanges: true, 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\">Export</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)=\"resetAll()\"\n >\n Reset\n </button>\n </div>\n <div card-body class=\"card-body\">\n <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Profiles</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"grey\"\n ></verben-svg>\n </div>\n <div *ngFor=\"let profile of visibleProfiles; let i = index\" class=\"item\">\n <div class=\"item-label\">\n <input\n type=\"checkbox\"\n [id]=\"'profile-' + i\"\n [(ngModel)]=\"profile.selected\"\n />\n <label [for]=\"'profile-' + i\" class=\"checkbox-label\">\n {{ profile.name }}\n </label>\n </div>\n <div class=\"item-actions\">\n <verben-svg\n icon=\"edit\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#3479E9\"\n fill=\"white\"\n (click)=\"editProfile(profile)\"\n ></verben-svg>\n <verben-svg\n icon=\"delete\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#E20000\"\n (click)=\"removeProfile(profile)\"\n ></verben-svg>\n </div>\n </div>\n <div\n *ngIf=\"profiles.length > 3\"\n (click)=\"toggleShowAllProfiles()\"\n class=\"show-more\"\n >\n <span>{{ showAllProfiles ? \"Show less\" : \"Show more\" }}</span>\n <verben-svg\n icon=\"chevron\"\n [width]=\"8\"\n [height]=\"6\"\n fill=\"black\"\n stroke=\"black\"\n ></verben-svg>\n </div>\n </section>\n <hr class=\"divider\" />\n <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Group</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"grey\"\n ></verben-svg>\n </div>\n <form [formGroup]=\"newGroupForm\" (ngSubmit)=\"addGroup()\">\n <verbena-input\n placeholder=\"Group name\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n width=\"100%\"\n fontSize=\"11px\"\n height=\"20px\"\n pd=\"2px 4px !important\"\n bgColor=\"transparent\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n formControlName=\"name\"\n ></verbena-input>\n </form>\n <div *ngFor=\"let item of visibleGroups; let i = index\" class=\"item\">\n <div class=\"item-label\">\n <input\n type=\"checkbox\"\n [id]=\"'group-' + i\"\n [(ngModel)]=\"item.selected\"\n />\n <label [for]=\"'group-' + i\" class=\"checkbox-label\">\n {{ item.name }}\n </label>\n </div>\n <div class=\"item-actions\" *ngIf=\"item.type === 'operation'\">\n <verben-svg\n icon=\"edit\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#3479E9\"\n fill=\"white\"\n (click)=\"editOperation(item)\"\n ></verben-svg>\n <verben-svg\n icon=\"delete\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#E20000\"\n (click)=\"removeOperation(item)\"\n ></verben-svg>\n </div>\n </div>\n\n <div class=\"flex items-center justify-between\">\n <button\n *ngIf=\"groupItems.length > 3\"\n (click)=\"toggleShowAllGroups()\"\n class=\"show-more\"\n >\n <span>{{ showAllGroups ? \"Show less\" : \"Show more\" }}</span>\n <verben-svg\n icon=\"chevron\"\n [width]=\"8\"\n [height]=\"6\"\n fill=\"black\"\n stroke=\"black\"\n ></verben-svg>\n </button>\n <button class=\"add-button\" (click)=\"addGroup()\">+ Add</button>\n </div>\n </section>\n <hr class=\"divider\" />\n <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Operation</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"grey\"\n ></verben-svg>\n </div>\n <verbena-input\n placeholder=\"Operation name\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n fontSize=\"11px\"\n width=\"100%\"\n height=\"20px\"\n pd=\"2px 6px\"\n bgColor=\"transparent\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n [(ngModel)]=\"newOperation.name\"\n ></verbena-input>\n\n <div class=\"operation-grid\">\n <!-- First Field Selection -->\n <verben-drop-down\n width=\"100%\"\n height=\"1.025rem\"\n fontSize=\"11px\"\n placeholder=\"Select field\"\n [options]=\"columnOptions\"\n optionLabel=\"label\"\n optionValue=\"id\"\n [(ngModel)]=\"newOperation.field1\"\n (ngModelChange)=\"onField1Change()\"\n >\n </verben-drop-down>\n\n <!-- Operator/Join Selection -->\n <ng-container *ngIf=\"newOperation.type === 'arithmetic'\">\n <verben-drop-down\n width=\"100%\"\n height=\"1.025rem\"\n placeholder=\"Select operator\"\n [options]=\"arithmeticOperators\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [(ngModel)]=\"newOperation.operator\"\n fontSize=\"11px\"\n >\n </verben-drop-down>\n </ng-container>\n <ng-container *ngIf=\"newOperation.type === 'string'\">\n <verbena-input\n placeholder=\"Join by\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n fontSize=\"11px\"\n width=\"100%\"\n height=\"1.025rem\"\n pd=\"2px 6px\"\n bgColor=\"transparent\"\n [showBorder]=\"true\"\n [(ngModel)]=\"newOperation.joinBy\"\n ></verbena-input>\n </ng-container>\n\n <!-- Second Field Selection -->\n <verben-drop-down\n width=\"100%\"\n height=\"1.025rem\"\n placeholder=\"Select field\"\n [options]=\"availableFields2\"\n optionLabel=\"label\"\n optionValue=\"id\"\n [(ngModel)]=\"newOperation.field2\"\n >\n </verben-drop-down>\n </div>\n <button class=\"add-button ml-auto\" (click)=\"addOrUpdateOperation()\">\n {{ isEditingOperation ? \"Update\" : \"+ Add\" }}\n </button>\n </section>\n\n <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Record Size</h3>\n </div>\n\n <div class=\"flex gap-4 items-center\">\n <verbena-input\n placeholder=\"Skip\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n fontSize=\"11px\"\n width=\"100%\"\n height=\"1.025rem\"\n pd=\"2px 6px\"\n bgColor=\"transparent\"\n [showBorder]=\"true\"\n [(ngModel)]=\"skip\"\n ></verbena-input>\n\n <span>-</span>\n\n <verbena-input\n placeholder=\"Limit\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n fontSize=\"11px\"\n width=\"100%\"\n height=\"1.025rem\"\n pd=\"2px 6px\"\n bgColor=\"transparent\"\n [showBorder]=\"true\"\n [(ngModel)]=\"limit\"\n ></verbena-input>\n </div>\n </section>\n </div>\n <div card-footer class=\"card-footer\">\n <button\n class=\"export-button\"\n [disabled]=\"!isAnyProfileSelected()\"\n (click)=\"exportData()\"\n >\n Export\n </button>\n </div>\n</verben-card>\n", styles: [".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,.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;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}.export-button:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i5.CardComponent, selector: "verben-card", inputs: ["pd", "mg", "height", "width", "textColor", "bgColor", "border", "borderRadius", "disabled", "aspectRatio"] }, { 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: "component", type: i7.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }] });
|
|
309
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.10", type: DataXportComponent, selector: "lib-data-xport", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, useImportKey: { classPropertyName: "useImportKey", publicName: "useImportKey", isSignal: false, isRequired: false, transformFunction: null }, dataFetchUrl: { classPropertyName: "dataFetchUrl", publicName: "dataFetchUrl", isSignal: true, isRequired: false, transformFunction: null }, dataQueryParameters: { classPropertyName: "dataQueryParameters", publicName: "dataQueryParameters", isSignal: true, isRequired: false, transformFunction: null }, dataQueryFunction: { classPropertyName: "dataQueryFunction", publicName: "dataQueryFunction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportDataEvent: "exportDataEvent", exportDataRangeEvent: "exportDataRangeEvent" }, usesOnChanges: true, 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\">Export</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)=\"resetAll()\"\n >\n Reset\n </button>\n </div>\n <div card-body class=\"card-body\">\n <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Profiles</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"grey\"\n ></verben-svg>\n </div>\n <div *ngFor=\"let profile of visibleProfiles; let i = index\" class=\"item\">\n <div class=\"item-label\">\n <input\n type=\"checkbox\"\n [id]=\"'profile-' + i\"\n [(ngModel)]=\"profile.selected\"\n />\n <label [for]=\"'profile-' + i\" class=\"checkbox-label\">\n {{ profile.name }}\n </label>\n </div>\n <div class=\"item-actions\">\n <verben-svg\n icon=\"edit\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#3479E9\"\n fill=\"white\"\n (click)=\"editProfile(profile)\"\n ></verben-svg>\n <verben-svg\n icon=\"delete\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#E20000\"\n (click)=\"removeProfile(profile)\"\n ></verben-svg>\n </div>\n </div>\n <div\n *ngIf=\"profiles.length > 3\"\n (click)=\"toggleShowAllProfiles()\"\n class=\"show-more\"\n >\n <span>{{ showAllProfiles ? \"Show less\" : \"Show more\" }}</span>\n <verben-svg\n icon=\"chevron\"\n [width]=\"8\"\n [height]=\"6\"\n fill=\"black\"\n stroke=\"black\"\n ></verben-svg>\n </div>\n </section>\n <hr class=\"divider\" />\n <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Group</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"grey\"\n ></verben-svg>\n </div>\n <form [formGroup]=\"newGroupForm\" (ngSubmit)=\"addGroup()\">\n <verbena-input\n placeholder=\"Group name\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n width=\"100%\"\n fontSize=\"11px\"\n height=\"20px\"\n pd=\"2px 4px !important\"\n bgColor=\"transparent\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n formControlName=\"name\"\n ></verbena-input>\n </form>\n <div *ngFor=\"let item of visibleGroups; let i = index\" class=\"item\">\n <div class=\"item-label\">\n <input\n type=\"checkbox\"\n [id]=\"'group-' + i\"\n [(ngModel)]=\"item.selected\"\n />\n <label [for]=\"'group-' + i\" class=\"checkbox-label\">\n {{ item.name }}\n </label>\n </div>\n <div class=\"item-actions\" *ngIf=\"item.type === 'operation'\">\n <verben-svg\n icon=\"edit\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#3479E9\"\n fill=\"white\"\n (click)=\"editOperation(item)\"\n ></verben-svg>\n <verben-svg\n icon=\"delete\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#E20000\"\n (click)=\"removeOperation(item)\"\n ></verben-svg>\n </div>\n </div>\n\n <div class=\"flex items-center justify-between\">\n <button\n *ngIf=\"groupItems.length > 3\"\n (click)=\"toggleShowAllGroups()\"\n class=\"show-more\"\n >\n <span>{{ showAllGroups ? \"Show less\" : \"Show more\" }}</span>\n <verben-svg\n icon=\"chevron\"\n [width]=\"8\"\n [height]=\"6\"\n fill=\"black\"\n stroke=\"black\"\n ></verben-svg>\n </button>\n <button class=\"add-button\" (click)=\"addGroup()\">+ Add</button>\n </div>\n </section>\n <hr class=\"divider\" />\n <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Operation</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"grey\"\n ></verben-svg>\n </div>\n <verbena-input\n placeholder=\"Operation name\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n fontSize=\"11px\"\n width=\"100%\"\n height=\"20px\"\n pd=\"2px 6px\"\n bgColor=\"transparent\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n [(ngModel)]=\"newOperation.name\"\n ></verbena-input>\n\n <div class=\"operation-grid\">\n <!-- First Field Selection -->\n <verben-drop-down\n width=\"100%\"\n height=\"1.025rem\"\n fontSize=\"11px\"\n placeholder=\"Select field\"\n [options]=\"columnOptions\"\n optionLabel=\"label\"\n optionValue=\"id\"\n [(ngModel)]=\"newOperation.field1\"\n (ngModelChange)=\"onField1Change()\"\n >\n </verben-drop-down>\n\n <!-- Operator/Join Selection -->\n <ng-container *ngIf=\"newOperation.type === 'arithmetic'\">\n <verben-drop-down\n width=\"100%\"\n height=\"1.025rem\"\n placeholder=\"Select operator\"\n [options]=\"arithmeticOperators\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [(ngModel)]=\"newOperation.operator\"\n fontSize=\"11px\"\n >\n </verben-drop-down>\n </ng-container>\n <ng-container *ngIf=\"newOperation.type === 'string'\">\n <verbena-input\n placeholder=\"Join by\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n fontSize=\"11px\"\n width=\"100%\"\n height=\"1.025rem\"\n pd=\"2px 6px\"\n bgColor=\"transparent\"\n [showBorder]=\"true\"\n [(ngModel)]=\"newOperation.joinBy\"\n ></verbena-input>\n </ng-container>\n\n <!-- Second Field Selection -->\n <verben-drop-down\n width=\"100%\"\n height=\"1.025rem\"\n placeholder=\"Select field\"\n [options]=\"availableFields2\"\n optionLabel=\"label\"\n optionValue=\"id\"\n [(ngModel)]=\"newOperation.field2\"\n >\n </verben-drop-down>\n </div>\n <button class=\"add-button ml-auto\" (click)=\"addOrUpdateOperation()\">\n {{ isEditingOperation ? \"Update\" : \"+ Add\" }}\n </button>\n </section>\n\n <section class=\"section\">\n <div class=\"section-header\">\n <h3 class=\"section-title\">Record Size</h3>\n </div>\n\n <div class=\"flex gap-4 items-center\">\n <verbena-input\n placeholder=\"Skip\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n fontSize=\"11px\"\n width=\"100%\"\n height=\"1.025rem\"\n pd=\"2px 6px\"\n bgColor=\"transparent\"\n [showBorder]=\"true\"\n [(ngModel)]=\"skip\"\n ></verbena-input>\n\n <span>-</span>\n\n <verbena-input\n placeholder=\"Limit\"\n border=\"1px solid #ccc\"\n borderRadius=\"5px\"\n textColor=\"black\"\n fontSize=\"11px\"\n width=\"100%\"\n height=\"1.025rem\"\n pd=\"2px 6px\"\n bgColor=\"transparent\"\n [showBorder]=\"true\"\n [(ngModel)]=\"limit\"\n ></verbena-input>\n </div>\n </section>\n </div>\n <div card-footer class=\"card-footer\">\n <button\n class=\"export-button\"\n [disabled]=\"!isAnyProfileSelected()\"\n (click)=\"exportData()\"\n >\n Export\n </button>\n </div>\n</verben-card>\n", styles: [".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,.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;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}.export-button:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i5.CardComponent, selector: "verben-card", inputs: ["pd", "mg", "height", "width", "textColor", "bgColor", "border", "borderRadius", "disabled", "aspectRatio"] }, { kind: "component", type: i6.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "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: "component", type: i7.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }] });
|
|
310
310
|
}
|
|
311
311
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataXportComponent, decorators: [{
|
|
312
312
|
type: Component,
|