@pepperi-addons/ngx-composite-lib 0.0.16-beta.4 → 0.0.16-beta.40

package/bundles/pepperi-addons-ngx-composite-lib-file-status-panel.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/material/snack-bar'), require('@pepperi-addons/ngx-lib/snack-bar'), require('@pepperi-addons/ngx-lib/icon'), require('@pepperi-addons/ngx-lib/textbox'), require('@pepperi-addons/ngx-lib/top-bar'), require('@pepperi-addons/ngx-lib/dialog'), require('@pepperi-addons/ngx-lib/button')) :
     typeof define === 'function' && define.amd ? define('@pepperi-addons/ngx-composite-lib/file-status-panel', ['exports', '@angular/core', '@angular/common', '@angular/material/snack-bar', '@pepperi-addons/ngx-lib/snack-bar', '@pepperi-addons/ngx-lib/icon', '@pepperi-addons/ngx-lib/textbox', '@pepperi-addons/ngx-lib/top-bar', '@pepperi-addons/ngx-lib/dialog', '@pepperi-addons/ngx-lib/button'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["pepperi-addons"] = global["pepperi-addons"] || {}, global["pepperi-addons"]["ngx-composite-lib"] = global["pepperi-addons"]["ngx-composite-lib"] || {}, global["pepperi-addons"]["ngx-composite-lib"]["file-status-panel"] = {}), global.ng.core, global.ng.common, global.ng.material.snackBar, global.i2, global.i3, global["ngx-lib/textbox"], global["ngx-lib/top-bar"], global["ngx-lib/dialog"], global["ngx-lib/button"]));
-})(this, (function (exports, i0, i4, i1, i2, i3, textbox, topBar, dialog, button) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["pepperi-addons"] = global["pepperi-addons"] || {}, global["pepperi-addons"]["ngx-composite-lib"] = global["pepperi-addons"]["ngx-composite-lib"] || {}, global["pepperi-addons"]["ngx-composite-lib"]["file-status-panel"] = {}), global.ng.core, global.ng.common, global.ng.material.snackBar, global["ngx-lib/snack-bar"], global["ngx-lib/icon"], global["ngx-lib/textbox"], global["ngx-lib/top-bar"], global["ngx-lib/dialog"], global["ngx-lib/button"]));
+})(this, (function (exports, i0, i4, i1, i2, i1$1, textbox, topBar, dialog, button) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -26,7 +26,7 @@
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
-    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
 
     var FileStatusPanelComponent = /** @class */ (function () {
         function FileStatusPanelComponent(data, snackBarRef) {
@@ -46,7 +46,7 @@
         return FileStatusPanelComponent;
     }());
     FileStatusPanelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: FileStatusPanelComponent, deps: [{ token: i1.MAT_SNACK_BAR_DATA }, { token: i1__namespace.MatSnackBarRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FileStatusPanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: FileStatusPanelComponent, selector: "pep-file-status-panel", outputs: { closeClick: "closeClick" }, ngImport: i0__namespace, template: "<pep-snack-bar class=\"upload-panel-contnainer\" [snackBarRef]=\"snackBarRef\" [title]=\"data.title\" (closeClick)=\"onCloseClicked($event)\" >\n    <div pep-snack-bar-content class=\"panel-content\">\n        <ul *ngIf=\"data.content.length\">\n            <li *ngFor=\"let file of data.content\">\n                <ng-container *ngIf=\"file?.status !== 'hidden'\">\n                    <span class=\"color-dimmed body-sm ellipsis\">{{file.name}}</span>\n                    <pep-icon class=\"pep-spacing-element\" name=\"arrow_right_alt\"></pep-icon>\n                    <span class=\"body-sm\" title=\"{{file.statusMessage}}\">{{file.status}}</span>\n                </ng-container>\n            </li>\n        </ul>\n    </div>\n</pep-snack-bar>", styles: [".upload-panel-contnainer .panel-content{max-height:50vh;overflow:auto}.upload-panel-contnainer .panel-content ul{list-style-type:none;padding:0}.upload-panel-contnainer .panel-content ul li{height:1.25rem;margin-top:.5rem;display:flex;flex-direction:row;align-items:center}.upload-panel-contnainer .panel-content ul li pep-icon{height:1rem}\n"], components: [{ type: i2__namespace.PepSnackBarComponent, selector: "pep-snack-bar", inputs: ["snackBarRef", "title"], outputs: ["closeClick"] }, { type: i3__namespace.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    FileStatusPanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: FileStatusPanelComponent, selector: "pep-file-status-panel", outputs: { closeClick: "closeClick" }, ngImport: i0__namespace, template: "<pep-snack-bar class=\"upload-panel-contnainer\" [snackBarRef]=\"snackBarRef\" [title]=\"data.title\" (closeClick)=\"onCloseClicked($event)\" >\n    <div pep-snack-bar-content class=\"panel-content\">\n        <ul *ngIf=\"data.content.length\">\n            <li *ngFor=\"let file of data.content\">\n                <ng-container *ngIf=\"file?.status !== 'hidden'\">\n                    <span class=\"color-dimmed body-sm ellipsis\">{{file.name}}</span>\n                    <pep-icon class=\"pep-spacing-element\" name=\"arrow_right_alt\"></pep-icon>\n                    <span class=\"body-sm\" title=\"{{file.statusMessage}}\">{{file.status}}</span>\n                </ng-container>\n            </li>\n        </ul>\n    </div>\n</pep-snack-bar>", styles: [".upload-panel-contnainer .panel-content{max-height:50vh;overflow:auto}.upload-panel-contnainer .panel-content ul{list-style-type:none;padding:0}.upload-panel-contnainer .panel-content ul li{height:1.25rem;margin-top:.5rem;display:flex;flex-direction:row;align-items:center}.upload-panel-contnainer .panel-content ul li pep-icon{height:1rem}\n"], components: [{ type: i2__namespace.PepSnackBarComponent, selector: "pep-snack-bar", inputs: ["snackBarRef", "title"], outputs: ["closeClick"] }, { type: i1__namespace$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: FileStatusPanelComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -63,17 +63,22 @@
                     type: i0.Output
                 }] } });
 
+    var pepIcons = [
+        i1$1.pepIconArrowRightAlt,
+    ];
     var PepFileStatusPanelModule = /** @class */ (function () {
-        function PepFileStatusPanelModule() {
+        function PepFileStatusPanelModule(pepIconRegistry) {
+            this.pepIconRegistry = pepIconRegistry;
+            this.pepIconRegistry.registerIcons(pepIcons);
         }
         return PepFileStatusPanelModule;
     }());
-    PepFileStatusPanelModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepFileStatusPanelModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    PepFileStatusPanelModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepFileStatusPanelModule, deps: [{ token: i1__namespace$1.PepIconRegistry }], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     PepFileStatusPanelModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepFileStatusPanelModule, declarations: [FileStatusPanelComponent], imports: [i4.CommonModule,
             topBar.PepTopBarModule,
             textbox.PepTextboxModule,
             button.PepButtonModule,
-            i3.PepIconModule,
+            i1$1.PepIconModule,
             dialog.PepDialogModule,
             i2.PepSnackBarModule], exports: [FileStatusPanelComponent] });
     PepFileStatusPanelModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepFileStatusPanelModule, imports: [[
@@ -81,7 +86,7 @@
                 topBar.PepTopBarModule,
                 textbox.PepTextboxModule,
                 button.PepButtonModule,
-                i3.PepIconModule,
+                i1$1.PepIconModule,
                 dialog.PepDialogModule,
                 i2.PepSnackBarModule
             ]] });
@@ -96,13 +101,13 @@
                             topBar.PepTopBarModule,
                             textbox.PepTextboxModule,
                             button.PepButtonModule,
-                            i3.PepIconModule,
+                            i1$1.PepIconModule,
                             dialog.PepDialogModule,
                             i2.PepSnackBarModule
                         ],
                         exports: [FileStatusPanelComponent]
                     }]
-            }] });
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.PepIconRegistry }]; } });
 
     var FileStatus = /** @class */ (function () {
         function FileStatus() {

package/bundles/pepperi-addons-ngx-composite-lib-file-status-panel.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-composite-lib-file-status-panel.umd.js","sources":["../../../projects/ngx-composite-lib/file-status-panel/file-status-panel.component.ts","../../../projects/ngx-composite-lib/file-status-panel/file-status-panel.component.html","../../../projects/ngx-composite-lib/file-status-panel/file-status-panel.module.ts","../../../projects/ngx-composite-lib/file-status-panel/file-status-panel.model.ts","../../../projects/ngx-composite-lib/file-status-panel/public-api.ts","../../../projects/ngx-composite-lib/file-status-panel/pepperi-addons-ngx-composite-lib-file-status-panel.ts"],"sourcesContent":["import { Component, OnInit, Injectable, Input, Output, EventEmitter, Optional, Inject } from '@angular/core';\nimport { MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';\nimport { TranslateService } from '@ngx-translate/core';\nimport { PepSnackBarData } from '@pepperi-addons/ngx-lib/snack-bar';\nimport { FileStatus } from './file-status-panel.model';\n\n@Component({\n    selector: 'pep-file-status-panel',\n    templateUrl: './file-status-panel.component.html',\n    styleUrls: ['./file-status-panel.component.scss']\n})\nexport class FileStatusPanelComponent implements OnInit {\n    // @Input() title = '';\n    // @Input() filesList: Array<FileStatus> = [];\n    \n    @Output()\n    closeClick: EventEmitter<void> = new EventEmitter<void>();\n    \n    constructor(\n        @Inject(MAT_SNACK_BAR_DATA) public data: PepSnackBarData,\n        public snackBarRef: MatSnackBarRef<FileStatusPanelComponent>\n    ) {\n       //\n    }\n\n    ngOnInit() {\n        //\n    }\n\n    onCloseClicked(event: any): void {\n        this.closeClick.emit();\n    }\n\n\n}","<pep-snack-bar class=\"upload-panel-contnainer\" [snackBarRef]=\"snackBarRef\" [title]=\"data.title\" (closeClick)=\"onCloseClicked($event)\" >\n    <div pep-snack-bar-content class=\"panel-content\">\n        <ul *ngIf=\"data.content.length\">\n            <li *ngFor=\"let file of data.content\">\n                <ng-container *ngIf=\"file?.status !== 'hidden'\">\n                    <span class=\"color-dimmed body-sm ellipsis\">{{file.name}}</span>\n                    <pep-icon class=\"pep-spacing-element\" name=\"arrow_right_alt\"></pep-icon>\n                    <span class=\"body-sm\" title=\"{{file.statusMessage}}\">{{file.status}}</span>\n                </ng-container>\n            </li>\n        </ul>\n    </div>\n</pep-snack-bar>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FileStatusPanelComponent } from './file-status-panel.component';\nimport { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';\nimport { PepTopBarModule } from '@pepperi-addons/ngx-lib/top-bar';\nimport { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport { PepIconModule } from '@pepperi-addons/ngx-lib/icon';\nimport { PepSnackBarModule } from '@pepperi-addons/ngx-lib/snack-bar';\n\n\n@NgModule({\n    declarations: [\n        FileStatusPanelComponent\n    ],\n    imports: [\n        CommonModule,\n        PepTopBarModule,\n        PepTextboxModule,\n        PepButtonModule,\n        PepIconModule,\n        PepDialogModule,\n        PepSnackBarModule\n    ],\n    exports: [FileStatusPanelComponent]\n})\n\nexport class PepFileStatusPanelModule { \n    \n}","export type FileStatusType = 'uploading' | 'downloading' | 'done' | 'failed' | 'hidden' | 'deleting';\r\n\r\nexport class FileStatus {\r\n    key = 0;\r\n    name = '';\r\n    status: FileStatusType = 'uploading';\r\n    statusMessage? = '';\r\n}","/*\n * Public API Surface of ngx-composite-lib/file-status-panel\n */\nexport * from './file-status-panel.module';\nexport * from './file-status-panel.component';\nexport * from './file-status-panel.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["EventEmitter","MAT_SNACK_BAR_DATA","Component","Inject","Output","CommonModule","PepTopBarModule","PepTextboxModule","PepButtonModule","PepIconModule","PepDialogModule","PepSnackBarModule","NgModule"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAkBI,kCACuC,IAAqB,EACjD,WAAqD;YADzB,SAAI,GAAJ,IAAI,CAAiB;YACjD,gBAAW,GAAX,WAAW,CAA0C;;;YAJhE,eAAU,GAAuB,IAAIA,eAAY,EAAQ,CAAC;;SAOzD;QAED,2CAAQ,GAAR;;SAEC;QAED,iDAAc,GAAd,UAAe,KAAU;YACrB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;SAC1B;;;+IApBQ,wBAAwB,kBAQrBC,qBAAkB;wHARrB,wBAAwB,+GCXrC,gvBAYgB;qHDDH,wBAAwB;sBALpCC,YAAS;uBAAC;wBACP,QAAQ,EAAE,uBAAuB;wBACjC,WAAW,EAAE,oCAAoC;wBACjD,SAAS,EAAE,CAAC,oCAAoC,CAAC;qBACpD;;;kCASQC,SAAM;mCAACF,qBAAkB;;6BAH9B,UAAU;0BADTG,SAAM;;;;QEYX;;;;+IAAa,wBAAwB;gJAAxB,wBAAwB,iBAd7B,wBAAwB,aAGxBC,eAAY;YACZC,sBAAe;YACfC,wBAAgB;YAChBC,sBAAe;YACfC,gBAAa;YACbC,sBAAe;YACfC,oBAAiB,aAEX,wBAAwB;gJAGzB,wBAAwB,YAZxB;gBACLN,eAAY;gBACZC,sBAAe;gBACfC,wBAAgB;gBAChBC,sBAAe;gBACfC,gBAAa;gBACbC,sBAAe;gBACfC,oBAAiB;aACpB;qHAIQ,wBAAwB;sBAhBpCC,WAAQ;uBAAC;wBACN,YAAY,EAAE;4BACV,wBAAwB;yBAC3B;wBACD,OAAO,EAAE;4BACLP,eAAY;4BACZC,sBAAe;4BACfC,wBAAgB;4BAChBC,sBAAe;4BACfC,gBAAa;4BACbC,sBAAe;4BACfC,oBAAiB;yBACpB;wBACD,OAAO,EAAE,CAAC,wBAAwB,CAAC;qBACtC;;;;QCvBD;YACI,QAAG,GAAG,CAAC,CAAC;YACR,SAAI,GAAG,EAAE,CAAC;YACV,WAAM,GAAmB,WAAW,CAAC;YACrC,kBAAa,GAAI,EAAE,CAAC;SACvB;yBAAA;KAAA;;ICPD;;;;ICAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"pepperi-addons-ngx-composite-lib-file-status-panel.umd.js","sources":["../../../projects/ngx-composite-lib/file-status-panel/file-status-panel.component.ts","../../../projects/ngx-composite-lib/file-status-panel/file-status-panel.component.html","../../../projects/ngx-composite-lib/file-status-panel/file-status-panel.module.ts","../../../projects/ngx-composite-lib/file-status-panel/file-status-panel.model.ts","../../../projects/ngx-composite-lib/file-status-panel/public-api.ts","../../../projects/ngx-composite-lib/file-status-panel/pepperi-addons-ngx-composite-lib-file-status-panel.ts"],"sourcesContent":["import { Component, OnInit, Injectable, Input, Output, EventEmitter, Optional, Inject } from '@angular/core';\nimport { MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';\nimport { TranslateService } from '@ngx-translate/core';\nimport { PepSnackBarData } from '@pepperi-addons/ngx-lib/snack-bar';\nimport { FileStatus } from './file-status-panel.model';\n\n@Component({\n    selector: 'pep-file-status-panel',\n    templateUrl: './file-status-panel.component.html',\n    styleUrls: ['./file-status-panel.component.scss']\n})\nexport class FileStatusPanelComponent implements OnInit {\n    // @Input() title = '';\n    // @Input() filesList: Array<FileStatus> = [];\n    \n    @Output()\n    closeClick: EventEmitter<void> = new EventEmitter<void>();\n    \n    constructor(\n        @Inject(MAT_SNACK_BAR_DATA) public data: PepSnackBarData,\n        public snackBarRef: MatSnackBarRef<FileStatusPanelComponent>\n    ) {\n       //\n    }\n\n    ngOnInit() {\n        //\n    }\n\n    onCloseClicked(event: any): void {\n        this.closeClick.emit();\n    }\n\n\n}","<pep-snack-bar class=\"upload-panel-contnainer\" [snackBarRef]=\"snackBarRef\" [title]=\"data.title\" (closeClick)=\"onCloseClicked($event)\" >\n    <div pep-snack-bar-content class=\"panel-content\">\n        <ul *ngIf=\"data.content.length\">\n            <li *ngFor=\"let file of data.content\">\n                <ng-container *ngIf=\"file?.status !== 'hidden'\">\n                    <span class=\"color-dimmed body-sm ellipsis\">{{file.name}}</span>\n                    <pep-icon class=\"pep-spacing-element\" name=\"arrow_right_alt\"></pep-icon>\n                    <span class=\"body-sm\" title=\"{{file.statusMessage}}\">{{file.status}}</span>\n                </ng-container>\n            </li>\n        </ul>\n    </div>\n</pep-snack-bar>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FileStatusPanelComponent } from './file-status-panel.component';\nimport { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';\nimport { PepTopBarModule } from '@pepperi-addons/ngx-lib/top-bar';\nimport { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport { PepIconModule, PepIconRegistry, pepIconArrowRightAlt } from '@pepperi-addons/ngx-lib/icon';\nimport { PepSnackBarModule } from '@pepperi-addons/ngx-lib/snack-bar';\n\nconst pepIcons = [\n    pepIconArrowRightAlt,\n]\n\n@NgModule({\n    declarations: [\n        FileStatusPanelComponent\n    ],\n    imports: [\n        CommonModule,\n        PepTopBarModule,\n        PepTextboxModule,\n        PepButtonModule,\n        PepIconModule,\n        PepDialogModule,\n        PepSnackBarModule\n    ],\n    exports: [FileStatusPanelComponent]\n})\n\nexport class PepFileStatusPanelModule { \n    constructor(\n        private pepIconRegistry: PepIconRegistry,\n    ) {\n        this.pepIconRegistry.registerIcons(pepIcons);\n    }\n}","export type FileStatusType = 'uploading' | 'downloading' | 'done' | 'failed' | 'hidden' | 'deleting';\r\n\r\nexport class FileStatus {\r\n    key = 0;\r\n    name = '';\r\n    status: FileStatusType = 'uploading';\r\n    statusMessage? = '';\r\n}","/*\n * Public API Surface of ngx-composite-lib/file-status-panel\n */\nexport * from './file-status-panel.module';\nexport * from './file-status-panel.component';\nexport * from './file-status-panel.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["EventEmitter","MAT_SNACK_BAR_DATA","Component","Inject","Output","pepIconArrowRightAlt","CommonModule","PepTopBarModule","PepTextboxModule","PepButtonModule","PepIconModule","PepDialogModule","PepSnackBarModule","NgModule"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAkBI,kCACuC,IAAqB,EACjD,WAAqD;YADzB,SAAI,GAAJ,IAAI,CAAiB;YACjD,gBAAW,GAAX,WAAW,CAA0C;;;YAJhE,eAAU,GAAuB,IAAIA,eAAY,EAAQ,CAAC;;SAOzD;QAED,2CAAQ,GAAR;;SAEC;QAED,iDAAc,GAAd,UAAe,KAAU;YACrB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;SAC1B;;;+IApBQ,wBAAwB,kBAQrBC,qBAAkB;wHARrB,wBAAwB,+GCXrC,gvBAYgB;qHDDH,wBAAwB;sBALpCC,YAAS;uBAAC;wBACP,QAAQ,EAAE,uBAAuB;wBACjC,WAAW,EAAE,oCAAoC;wBACjD,SAAS,EAAE,CAAC,oCAAoC,CAAC;qBACpD;;;kCASQC,SAAM;mCAACF,qBAAkB;;6BAH9B,UAAU;0BADTG,SAAM;;;IELX,IAAM,QAAQ,GAAG;QACbC,yBAAoB;KACvB,CAAA;;QAmBG,kCACY,eAAgC;YAAhC,oBAAe,GAAf,eAAe,CAAiB;YAExC,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;SAChD;;;+IALQ,wBAAwB;gJAAxB,wBAAwB,iBAd7B,wBAAwB,aAGxBC,eAAY;YACZC,sBAAe;YACfC,wBAAgB;YAChBC,sBAAe;YACfC,kBAAa;YACbC,sBAAe;YACfC,oBAAiB,aAEX,wBAAwB;gJAGzB,wBAAwB,YAZxB;gBACLN,eAAY;gBACZC,sBAAe;gBACfC,wBAAgB;gBAChBC,sBAAe;gBACfC,kBAAa;gBACbC,sBAAe;gBACfC,oBAAiB;aACpB;qHAIQ,wBAAwB;sBAhBpCC,WAAQ;uBAAC;wBACN,YAAY,EAAE;4BACV,wBAAwB;yBAC3B;wBACD,OAAO,EAAE;4BACLP,eAAY;4BACZC,sBAAe;4BACfC,wBAAgB;4BAChBC,sBAAe;4BACfC,kBAAa;4BACbC,sBAAe;4BACfC,oBAAiB;yBACpB;wBACD,OAAO,EAAE,CAAC,wBAAwB,CAAC;qBACtC;;;;QC1BD;YACI,QAAG,GAAG,CAAC,CAAC;YACR,SAAI,GAAG,EAAE,CAAC;YACV,WAAM,GAAmB,WAAW,CAAC;YACrC,kBAAa,GAAI,EAAE,CAAC;SACvB;yBAAA;KAAA;;ICPD;;;;ICAA;;;;;;;;;;;;;;"}

package/bundles/pepperi-addons-ngx-composite-lib-generic-form.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@pepperi-addons/ngx-lib'), require('@pepperi-addons/ngx-lib/form'), require('@pepperi-addons/ngx-lib/menu'), require('@pepperi-addons/ngx-lib/page-layout'), require('@pepperi-addons/ngx-lib/top-bar'), require('@pepperi-addons/data-views')) :
     typeof define === 'function' && define.amd ? define('@pepperi-addons/ngx-composite-lib/generic-form', ['exports', '@angular/core', '@angular/common', '@pepperi-addons/ngx-lib', '@pepperi-addons/ngx-lib/form', '@pepperi-addons/ngx-lib/menu', '@pepperi-addons/ngx-lib/page-layout', '@pepperi-addons/ngx-lib/top-bar', '@pepperi-addons/data-views'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["pepperi-addons"] = global["pepperi-addons"] || {}, global["pepperi-addons"]["ngx-composite-lib"] = global["pepperi-addons"]["ngx-composite-lib"] || {}, global["pepperi-addons"]["ngx-composite-lib"]["generic-form"] = {}), global.ng.core, global.ng.common, global["ngx-lib"], global["ngx-lib/form"], global["ngx-lib/menu"], global["ngx-lib/page-layout"], global["ngx-lib/top-bar"], global.dataViews));
-})(this, (function (exports, i0, i6, i1, i5, menu, i3, i4, dataViews) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["pepperi-addons"] = global["pepperi-addons"] || {}, global["pepperi-addons"]["ngx-composite-lib"] = global["pepperi-addons"]["ngx-composite-lib"] || {}, global["pepperi-addons"]["ngx-composite-lib"]["generic-form"] = {}), global.ng.core, global.ng.common, global["ngx-lib"], global["ngx-lib/form"], global["ngx-lib/menu"], global["ngx-lib/page-layout"], global["ngx-lib/top-bar"], global["data-views"]));
+})(this, (function (exports, i0, i5, i1, form, menu, i3, i4, dataViews) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -23,9 +23,8 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
-    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
 
@@ -414,7 +413,8 @@
     }
 
     var GenericFormComponent = /** @class */ (function () {
-        function GenericFormComponent(layoutService, _genericFormService) {
+        function GenericFormComponent(_resolver, layoutService, _genericFormService) {
+            this._resolver = _resolver;
             this.layoutService = layoutService;
             this._genericFormService = _genericFormService;
             this._optionalValues = [];
@@ -428,28 +428,52 @@
             this.layoutService.onResize$.pipe().subscribe(function (size) {
                 //            
             });
-            this.formData = new i1.ObjectsDataRow();
-            this.uiControl = new i1.UIControl();
+            this._formData = new i1.ObjectsDataRow();
+            this._uiControl = new i1.UIControl();
         }
+        Object.defineProperty(GenericFormComponent.prototype, "pepListContainer", {
+            set: function (val) {
+                this._pepFormContainer = val;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(GenericFormComponent.prototype, "dataSource", {
             set: function (val) {
                 this._data = val;
-                this.createFormFields();
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(GenericFormComponent.prototype, "dataView", {
             set: function (val) {
-                var _this = this;
-                var _a;
-                if (val) {
-                    this.formData.IsEditable = !this.isLocked;
-                    this.formData.UID = val.UID || i1.PepGuid.newGuid();
-                    var uiControlData = dataViews.DataViewConverter.toUIControlData(val);
+                this.initForm(val);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        GenericFormComponent.prototype.ngOnInit = function () {
+            //
+        };
+        GenericFormComponent.prototype.initForm = function (dataView) {
+            var _this = this;
+            setTimeout(function () {
+                var _a, _b;
+                if (_this._pepFormContainer) {
+                    if (_this._pepFormContainer.length) {
+                        _this._pepFormContainer.remove();
+                        _this._formData = new i1.ObjectsDataRow();
+                        _this._uiControl = new i1.UIControl();
+                    }
+                    var factory = _this._resolver.resolveComponentFactory(form.PepFormComponent);
+                    var componentRef = _this._pepFormContainer.createComponent(factory);
+                    _this._pepForm = componentRef.instance;
+                    _this._formData.IsEditable = !_this.isLocked;
+                    _this._formData.UID = dataView.UID || i1.PepGuid.newGuid();
+                    var uiControlData = dataViews.DataViewConverter.toUIControlData(dataView);
                     if (uiControlData) {
                         if (uiControlData === null || uiControlData === void 0 ? void 0 : uiControlData.ControlFields) {
-                            (_a = val.Fields) === null || _a === void 0 ? void 0 : _a.forEach(function (field) {
+                            (_a = dataView.Fields) === null || _a === void 0 ? void 0 : _a.forEach(function (field) {
                                 var _a;
                                 if ((_a = field.OptionalValues) === null || _a === void 0 ? void 0 : _a.length) {
                                     _this._optionalValues.push({
@@ -458,39 +482,43 @@
                                     });
                                 }
                             });
-                            this.uiControl.ControlFields = uiControlData.ControlFields.map(function (field) { return _this._genericFormService.convertToUiControlField(field); });
+                            _this._uiControl.ControlFields = uiControlData.ControlFields.map(function (field) { return _this._genericFormService.convertToUiControlField(field); });
+                        }
+                        _this._uiControl.Columns = uiControlData.Columns;
+                        if ((_b = _this._uiControl.ControlFields) === null || _b === void 0 ? void 0 : _b.length) {
+                            _this._formData.Fields = [];
+                            _this._uiControl.ControlFields.forEach(function (item) {
+                                var value = '';
+                                if (_this._genericFormService.hasProperty(_this._data, item.ApiName)) {
+                                    value = _this._data[item.ApiName];
+                                }
+                                _this._formData.Fields.push(_this._genericFormService.createFormField(item, value, _this.getOptionalValues(item.ApiName)));
+                            });
+                            componentRef.instance.layoutType = 'form';
+                            componentRef.instance.layout = _this._uiControl;
+                            componentRef.instance.data = _this._formData;
+                            componentRef.instance.isInternal = false;
+                            componentRef.instance.lockFields = _this.isLocked;
+                            componentRef.instance.valueChange.subscribe(function ($event) {
+                                _this.onValueChanged($event);
+                            });
+                            componentRef.instance.fieldClick.subscribe(function ($event) {
+                                _this.onfieldClicked($event);
+                            });
+                            componentRef.instance.formValidationChange.subscribe(function ($event) {
+                                _this.onFormValidationChanged($event);
+                            });
                         }
-                        this.uiControl.Columns = uiControlData.Columns;
-                        this.createFormFields();
                     }
                 }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        GenericFormComponent.prototype.ngOnInit = function () {
-            //
-        };
-        GenericFormComponent.prototype.createFormFields = function () {
-            var _this = this;
-            var _a, _b;
-            if (this._data && ((_b = (_a = this.uiControl) === null || _a === void 0 ? void 0 : _a.ControlFields) === null || _b === void 0 ? void 0 : _b.length)) {
-                this.formData.Fields = [];
-                this.uiControl.ControlFields.forEach(function (item) {
-                    var value = '';
-                    if (_this._genericFormService.hasProperty(_this._data, item.ApiName)) {
-                        value = _this._data[item.ApiName];
-                    }
-                    _this.formData.Fields.push(_this._genericFormService.createFormField(item, value, _this.getOptionalValues(item.ApiName)));
-                });
-            }
+            }, 0);
         };
         /**
          * updates form field's value
          * @param field object containing the data of the required update
          */
         GenericFormComponent.prototype.updateFieldValue = function (fieldChanged) {
-            this._data[fieldChanged.apiName] = fieldChanged.value;
+            this._data[fieldChanged.ApiName] = fieldChanged.Value;
         };
         GenericFormComponent.prototype.getOptionalValues = function (fieldId) {
             var item = this._optionalValues.find(function (item) { return item.fieldId === fieldId; });
@@ -498,7 +526,7 @@
         };
         GenericFormComponent.prototype.getData = function () {
             return {
-                UID: this.formData.UID,
+                UID: this._formData.UID,
                 Values: this._data
             };
         };
@@ -510,13 +538,13 @@
             var _this = this;
             fields.forEach(function (field) {
                 var e_1, _c;
-                var index = _this.formData.Fields.findIndex(function (item) { return item.ApiName === field.FieldId; });
+                var index = _this._formData.Fields.findIndex(function (item) { return item.ApiName === field.FieldId; });
                 if (index >= 0) {
                     try {
                         for (var _d = __values(Object.entries(field.Params)), _e = _d.next(); !_e.done; _e = _d.next()) {
                             var _f = __read(_e.value, 2), key = _f[0], value = _f[1];
-                            if (_this._genericFormService.hasProperty(_this.formData.Fields[index], key)) {
-                                var item = _this.formData.Fields[index];
+                            if (_this._genericFormService.hasProperty(_this._formData.Fields[index], key)) {
+                                var item = _this._formData.Fields[index];
                                 item[key] = value;
                             }
                         }
@@ -530,21 +558,23 @@
                     }
                 }
             });
+            this._pepForm.ReloadForm();
+            this._pepForm.data = this._formData;
         };
         GenericFormComponent.prototype.onValueChanged = function (event) {
             var field = {
-                uid: event.id,
-                apiName: event.key,
-                value: event.value
+                UID: event.id,
+                ApiName: event.key,
+                Value: event.value
             };
             this.updateFieldValue(field);
             this.valueChange.emit(field);
         };
         GenericFormComponent.prototype.onfieldClicked = function (event) {
             var field = {
-                uid: event.id,
-                apiName: event.key,
-                value: event.value
+                UID: event.id,
+                ApiName: event.key,
+                Value: event.value
             };
             this.updateFieldValue(field);
             this.fieldClick.emit(field);
@@ -554,8 +584,8 @@
         };
         return GenericFormComponent;
     }());
-    GenericFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: GenericFormComponent, deps: [{ token: i1__namespace.PepLayoutService }, { token: PepGenericFormService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    GenericFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: GenericFormComponent, selector: "pep-generic-form", inputs: { dataSource: "dataSource", dataView: "dataView", isLocked: "isLocked", inline: "inline", showTopBar: "showTopBar", addPadding: "addPadding" }, outputs: { valueChange: "valueChange", fieldClick: "fieldClick", formValidationChange: "formValidationChange" }, providers: [PepGenericFormService], ngImport: i0__namespace, template: "<div *ngIf=\"inline\" class=\"inline-container form-view\" [ngClass]=\"{ 'add-padding': addPadding }\">\n    <div *ngIf=\"showTopBar\" class=\"inline-top-bar-container\">\n        <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"formTemplate\"></ng-container>\n</div>\n\n<pep-page-layout *ngIf=\"!inline\" [addPadding]=\"addPadding\">\n    <ng-container *ngIf=\"showTopBar\" pep-top-area>\n        <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n    </ng-container>\n    <div pep-main-area class=\"main-area-container form-view\">\n        <ng-container *ngTemplateOutlet=\"formTemplate\"></ng-container>\n    </div>\n</pep-page-layout>\n\n<ng-template #topBarTemplate>\n    <pep-top-bar [inline]=\"inline\"> \n        <div header-start-content>\n            <ng-content select=\"[left-buttons]\"></ng-content>\n        </div>\n        <div header-end-content>\n            <ng-content select=\"[right-buttons]\"></ng-content>\n        </div>\n\n        <!-- <div footer-start-content>\n            <ng-content select=\"[bottom-left-buttons]\"></ng-content>\n        </div>\n        <div footer-end-content>\n            <ng-content select=\"[bottom-right-buttons]\"></ng-content>\n        </div> -->\n    </pep-top-bar>\n</ng-template>\n\n<ng-template #formTemplate>\n    <pep-form [layoutType]=\"'form'\" [layout]=\"uiControl\" [data]=\"formData\" [isInternal]=\"false\" [lockFields]=\"isLocked\"\n        (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onfieldClicked($event)\"\n        (formValidationChange)=\"onFormValidationChanged($event)\">\n    </pep-form>\n</ng-template>\n", styles: [":host{height:inherit;display:block}.main-area-container{display:grid;height:inherit}.inline-container{height:inherit;display:grid;grid-template-rows:auto 1fr}.inline-container.add-padding{padding-inline:var(--pep-spacing-lg, 1rem)}\n"], components: [{ type: i3__namespace.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { type: i4__namespace.PepTopBarComponent, selector: "pep-top-bar", inputs: ["inline", "title"], outputs: ["footerStateChange"] }, { type: i5__namespace.PepFormComponent, selector: "pep-form", inputs: ["isInternal", "isReport", "lockEvents", "canEditObject", "isActive", "layoutType", "objectId", "parentId", "searchCode", "showTitle", "firstFieldAsLink", "checkForChanges", "data", "lockFields", "layout"], outputs: ["valueChange", "formValidationChange", "fieldClick", "internalFormFieldClick", "internalFormFieldChange"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    GenericFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: GenericFormComponent, deps: [{ token: i0__namespace.ComponentFactoryResolver }, { token: i1__namespace.PepLayoutService }, { token: PepGenericFormService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    GenericFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: GenericFormComponent, selector: "pep-generic-form", inputs: { dataSource: "dataSource", dataView: "dataView", isLocked: "isLocked", inline: "inline", showTopBar: "showTopBar", addPadding: "addPadding" }, outputs: { valueChange: "valueChange", fieldClick: "fieldClick", formValidationChange: "formValidationChange" }, providers: [PepGenericFormService], viewQueries: [{ propertyName: "pepListContainer", first: true, predicate: ["pepFormContainer"], descendants: true, read: i0.ViewContainerRef }], ngImport: i0__namespace, template: "<div *ngIf=\"inline\" class=\"inline-container\" [ngClass]=\"{ 'add-padding': addPadding }\">\n    <div *ngIf=\"showTopBar\" class=\"inline-top-bar-container\">\n        <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"formTemplate\"></ng-container>\n</div>\n\n<pep-page-layout *ngIf=\"!inline\" [addPadding]=\"addPadding\">\n    <ng-container *ngIf=\"showTopBar\" pep-top-area>\n        <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n    </ng-container>\n    <div pep-main-area class=\"main-area-container\">\n        <ng-container *ngTemplateOutlet=\"formTemplate\"></ng-container>\n    </div>\n</pep-page-layout>\n\n<ng-template #topBarTemplate>\n    <pep-top-bar [inline]=\"inline\"> \n        <div header-start-content>\n            <ng-content select=\"[left-buttons]\"></ng-content>\n        </div>\n        <div header-end-content>\n            <ng-content select=\"[right-buttons]\"></ng-content>\n        </div>\n\n        <!-- <div footer-start-content>\n            <ng-content select=\"[bottom-left-buttons]\"></ng-content>\n        </div>\n        <div footer-end-content>\n            <ng-content select=\"[bottom-right-buttons]\"></ng-content>\n        </div> -->\n    </pep-top-bar>\n</ng-template>\n\n<ng-template #formTemplate>\n    <div class=\"form-view\">\n        <ng-container #pepFormContainer></ng-container>\n    </div>\n</ng-template>\n", styles: [":host{height:inherit;display:block}.main-area-container{display:grid;height:inherit}.inline-container{height:inherit;display:grid;grid-template-rows:auto 1fr}.inline-container.add-padding{padding-inline:var(--pep-spacing-lg, 1rem)}\n"], components: [{ type: i3__namespace.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { type: i4__namespace.PepTopBarComponent, selector: "pep-top-bar", inputs: ["inline", "title"], outputs: ["footerStateChange"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: GenericFormComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -564,7 +594,10 @@
                         styleUrls: ['./generic-form.component.scss'],
                         providers: [PepGenericFormService]
                     }]
-            }], ctorParameters: function () { return [{ type: i1__namespace.PepLayoutService }, { type: PepGenericFormService }]; }, propDecorators: { dataSource: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ComponentFactoryResolver }, { type: i1__namespace.PepLayoutService }, { type: PepGenericFormService }]; }, propDecorators: { pepListContainer: [{
+                    type: i0.ViewChild,
+                    args: ['pepFormContainer', { read: i0.ViewContainerRef }]
+                }], dataSource: [{
                     type: i0.Input
                 }], dataView: [{
                     type: i0.Input
@@ -590,24 +623,24 @@
         return PepGenericFormModule;
     }());
     PepGenericFormModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepGenericFormModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    PepGenericFormModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepGenericFormModule, declarations: [GenericFormComponent], imports: [i6.CommonModule,
+    PepGenericFormModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepGenericFormModule, declarations: [GenericFormComponent], imports: [i5.CommonModule,
             // MatFormFieldModule,
             //   ReactiveFormsModule,
             i1.PepNgxLibModule,
             // PepListModule,
-            i5.PepFormModule,
+            form.PepFormModule,
             menu.PepMenuModule,
             i3.PepPageLayoutModule,
             i4.PepTopBarModule], exports: [GenericFormComponent] });
     PepGenericFormModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: PepGenericFormModule, providers: [
             PepGenericFormService
         ], imports: [[
-                i6.CommonModule,
+                i5.CommonModule,
                 // MatFormFieldModule,
                 //   ReactiveFormsModule,
                 i1.PepNgxLibModule,
                 // PepListModule,
-                i5.PepFormModule,
+                form.PepFormModule,
                 menu.PepMenuModule,
                 i3.PepPageLayoutModule,
                 i4.PepTopBarModule,
@@ -623,12 +656,12 @@
                             GenericFormComponent
                         ],
                         imports: [
-                            i6.CommonModule,
+                            i5.CommonModule,
                             // MatFormFieldModule,
                             //   ReactiveFormsModule,
                             i1.PepNgxLibModule,
                             // PepListModule,
-                            i5.PepFormModule,
+                            form.PepFormModule,
                             menu.PepMenuModule,
                             i3.PepPageLayoutModule,
                             i4.PepTopBarModule,