ngx-techlify-core 11.2.5 → 11.2.9-beta.0

package/fesm2015/ngx-techlify-core.js

@@ -1552,6 +1552,7 @@ class NoteFormComponent {
     }
     //Method to trigger login
     submit() {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             this.noteFormFirstAttempt = true;
             if (this.noteFormGroup.valid) {
@@ -1559,7 +1560,7 @@ class NoteFormComponent {
                 const result = this.updateMode
                     ? yield this.noteService.editNote(model)
                     : yield this.noteService.addNote(model);
-                this.alertService.addAlert("Note saved successfully", "success");
+                this.alertService.addAlert(`${(_a = this.data) === null || _a === void 0 ? void 0 : _a.labelText} saved successfully`, "success");
                 this.dialogRef.close(result);
             }
         });
@@ -1579,7 +1580,7 @@ class NoteFormComponent {
 NoteFormComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-note-form',
-                template: "<form [formGroup]=\"noteFormGroup\" (ngSubmit)=\"submit()\">\n    <div fxLayout=\"column\" class=\"mat-typography\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>Note</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"column\">\n            <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n                <mat-form-field fxFlex=\"100%\">\n                    <textarea matInput formControlName=\"note\" placeholder=\"Note\" autocomplete=\"off\" required></textarea>\n                    <mat-error *ngIf=\"isFieldValid('note')\">{{\n                      getErrorMessage(\"note\")\n                    }}</mat-error>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\n                        Cancel\n                    </button>\n                    <button mat-raised-button type=\"submit\" color=\"primary\">Save</button>\n                </div>\n            </div>\n        </div>\n    </div>\n</form>",
+                template: "<form [formGroup]=\"noteFormGroup\" (ngSubmit)=\"submit()\">\n    <div fxLayout=\"column\" class=\"mat-typography\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>{{data?.labelText}}</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"column\">\n            <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n                <mat-form-field fxFlex=\"100%\">\n                    <textarea matInput formControlName=\"note\" placeholder=\"{{data?.labelText}}\" autocomplete=\"off\"\n                        required></textarea>\n                    <mat-error *ngIf=\"isFieldValid('note')\">{{\n                        getErrorMessage(\"note\")\n                        }}</mat-error>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\n                        Cancel\n                    </button>\n                    <button mat-raised-button type=\"submit\" color=\"primary\">Save</button>\n                </div>\n            </div>\n        </div>\n    </div>\n</form>",
                 styles: [""]
             },] }
 ];
@@ -1593,11 +1594,11 @@ NoteFormComponent.ctorParameters = () => [
 ];
 
 class NoteListComponent {
-    constructor(noteService, alertService, dialog) {
+    constructor(noteService, dialog) {
         this.noteService = noteService;
-        this.alertService = alertService;
         this.dialog = dialog;
         this.readonly = false;
+        this.labelText = 'Note';
         this.notes = [];
         this.displayedColumns = [
             'index',
@@ -1629,7 +1630,8 @@ class NoteListComponent {
         const dialogRef = this.dialog.open(NoteFormComponent, {
             width: "400px",
             data: {
-                note: { related_model_id: this.relatedModelId, model_type: this.modelType }
+                note: { related_model_id: this.relatedModelId, model_type: this.modelType },
+                labelText: this.labelText,
             },
             autoFocus: false
         });
@@ -1645,7 +1647,8 @@ class NoteListComponent {
             width: "400px",
             data: {
                 note: note,
-                update: true
+                update: true,
+                labelText: this.labelText
             },
             autoFocus: false
         });
@@ -1661,8 +1664,8 @@ class NoteListComponent {
             const dialogRef = this.dialog.open(ActionPopupComponent, {
                 width: "400px",
                 data: {
-                    title: "Delete Note",
-                    message: `Are you sure to delete the note?`
+                    title: `Delete ${this.labelText}`,
+                    message: `Are you sure to delete?`
                 },
                 autoFocus: false
             });
@@ -1690,19 +1693,19 @@ class NoteListComponent {
 NoteListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-note-list',
-                template: "<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" class=\"m-4\">\n\n    <div fxLayout fxLayoutAlign=\"start center\" fxLayoutGap=\"1rem\">\n        <h3 class=\"m-0 font-weight-bold mr-3\">Notes</h3>\n        <button class=\"d-print-none\" *ngIf=\"!readonly\" mat-raised-button color=\"primary\" type=\"button\"\n            (click)=\"addNote()\">+ Add</button>\n    </div>\n\n    <div class=\"w-00 scroll-container\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\"\n        (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n        <table mat-table [dataSource]=\"notes\" class=\"w-100\" multiTemplateDataRows>\n\n            <!-- Index Column -->\n            <ng-container matColumnDef=\"index\">\n                <th mat-header-cell *matHeaderCellDef> # </th>\n                <td mat-cell *matCellDef=\"let note; let i = dataIndex\"> {{ i+1 }} </td>\n            </ng-container>\n\n\n            <ng-container matColumnDef=\"note\">\n                <th mat-header-cell *matHeaderCellDef> Note </th>\n                <td mat-cell *matCellDef=\"let note\">\n                    {{note?.note}}\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"actions\">\n                <th mat-header-cell *matHeaderCellDef class=\"d-print-none\"> Actions </th>\n                <td mat-cell *matCellDef=\"let note\" class=\"d-print-none\">\n                    <button type=\"button\" mat-icon-button (click)=\"editNote(note)\">\n                        <mat-icon>edit</mat-icon>\n                    </button>\n                    <button type=\"button\" mat-icon-button (click)=\"deleteNote(note)\">\n                        <mat-icon>delete</mat-icon>\n                    </button>\n                </td>\n            </ng-container>\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n    </div>\n\n</div>",
+                template: "<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" class=\"m-4\">\n\n    <div fxLayout fxLayoutAlign=\"center center\" fxLayoutGap=\"1rem\">\n        <h3 class=\"m-0 font-weight-bold mr-3\">{{labelText}}s</h3>\n        <button class=\"d-print-none\" *ngIf=\"!readonly\" mat-raised-button color=\"primary\" type=\"button\"\n            (click)=\"addNote()\">+ Add</button>\n    </div>\n\n    <div class=\"w-00 scroll-container\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\"\n        (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n        <table mat-table [dataSource]=\"notes\" class=\"w-100\" multiTemplateDataRows>\n\n            <!-- Index Column -->\n            <ng-container matColumnDef=\"index\">\n                <th mat-header-cell *matHeaderCellDef> # </th>\n                <td mat-cell *matCellDef=\"let note; let i = dataIndex\"> {{ i+1 }} </td>\n            </ng-container>\n\n\n            <ng-container matColumnDef=\"note\">\n                <th mat-header-cell *matHeaderCellDef> {{labelText}} </th>\n                <td mat-cell *matCellDef=\"let note\">\n                    {{note?.note}}\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"actions\">\n                <th mat-header-cell *matHeaderCellDef class=\"d-print-none\"> Actions </th>\n                <td mat-cell *matCellDef=\"let note\" class=\"d-print-none\">\n                    <button type=\"button\" mat-icon-button (click)=\"editNote(note)\">\n                        <mat-icon>edit</mat-icon>\n                    </button>\n                    <button type=\"button\" mat-icon-button (click)=\"deleteNote(note)\">\n                        <mat-icon>delete</mat-icon>\n                    </button>\n                </td>\n            </ng-container>\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n    </div>\n\n</div>",
                 styles: [".scroll-container{max-height:400px;overflow-y:auto}"]
             },] }
 ];
 NoteListComponent.ctorParameters = () => [
     { type: NoteService },
-    { type: AlertService },
     { type: MatDialog }
 ];
 NoteListComponent.propDecorators = {
     relatedModelId: [{ type: Input }],
     modelType: [{ type: Input }],
-    readonly: [{ type: Input }]
+    readonly: [{ type: Input }],
+    labelText: [{ type: Input }]
 };
 
 var SearchableSelectorComponent_1;
@@ -1722,6 +1725,7 @@ let SearchableSelectorComponent = SearchableSelectorComponent_1 = class Searchab
         this.edit = false;
         this.sort = true;
         this.selectionChange = new EventEmitter();
+        this.itemsChange = new EventEmitter();
         this.isLoading = false;
         this.onChange = () => { };
         this.onTouched = () => { };
@@ -1788,7 +1792,10 @@ let SearchableSelectorComponent = SearchableSelectorComponent_1 = class Searchab
             items = [this.selectedValue, ...this.items];
         else
             items = this.items;
-        return items.filter((v, i, a) => a.findIndex(v => v[this.valueField] === a[i][this.valueField]) === i);
+        items = items.filter((v, i, a) => a.findIndex(v => v[this.valueField] === a[i][this.valueField]) === i);
+        //Emit the items to any child component
+        this.itemsChange.emit(items);
+        return items;
     }
     ngOnInit() {
         this.selectorForm.get('search').valueChanges
@@ -1952,6 +1959,7 @@ SearchableSelectorComponent.propDecorators = {
     searchField: [{ type: Input }],
     itemComponent: [{ type: Input }],
     selectionChange: [{ type: Output }],
+    itemsChange: [{ type: Output }],
     required: [{ type: Input }],
     disabled: [{ type: Input }],
     value: [{ type: Input }]
@@ -2150,12 +2158,12 @@ NumberSelector.propDecorators = {
 };
 
 function calculateTimeline(value) {
-    var data = {
+    const date = new Date();
+    const data = {
         'date_from': date,
         'date_to': date,
         'show_custom_field': false
     };
-    var date = new Date();
     switch (value) {
         case 1: { //Custom
             data.show_custom_field = true;
@@ -2270,6 +2278,9 @@ class TimelineFilterComponent {
             { value: 11, viewValue: 'Last Year' },
             { value: 12, viewValue: 'All dates' },
         ];
+        this.labelText = 'Select Timeline';
+        this.dateFrom = 'date_from';
+        this.dateTo = 'date_to';
         this.showCustomDateFields = false;
     }
     set defaultValue(value) {
@@ -2290,8 +2301,8 @@ class TimelineFilterComponent {
     changeTimeline(value) {
         const timeline = calculateTimeline(value);
         if (timeline) {
-            this.setFieldValue('date_from', timeline.date_from);
-            this.setFieldValue('date_to', timeline.date_to);
+            this.setFieldValue(this.dateFrom, timeline.date_from);
+            this.setFieldValue(this.dateTo, timeline.date_to);
             this.showCustomDateFields = timeline.show_custom_field;
         }
     }
@@ -2299,13 +2310,16 @@ class TimelineFilterComponent {
 TimelineFilterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-timeline-filter',
-                template: "<ng-container [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label>Select Timeline</mat-label>\n        <mat-select (selectionChange)=\"changeTimeline($event.value)\" [value]=\"timelineValue\">\n            <mat-option *ngFor=\"let timeline of timelines\" [value]=\"timeline.value\">\n                {{timeline.viewValue}}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <ng-container *ngIf=\"showCustomDateFields\">\n        <mat-form-field>\n            <input matInput formControlName=\"date_from\" [matDatepicker]=\"fromPicker\" (click)=\"fromPicker.open()\"\n                placeholder=\"From Date\" readonly />\n            <mat-datepicker-toggle matSuffix [for]=\"fromPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #fromPicker></mat-datepicker>\n            <button mat-button *ngIf=\"getFieldValue('date_from')\" matSuffix mat-icon-button\n                (click)=\"resetFieldValue('date_from')\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n\n        <mat-form-field>\n            <input matInput formControlName=\"date_to\" [matDatepicker]=\"toPicker\" (click)=\"toPicker.open()\"\n                placeholder=\"To Date\" readonly />\n            <mat-datepicker-toggle matSuffix [for]=\"\"></mat-datepicker-toggle>\n            <mat-datepicker #toPicker></mat-datepicker>\n            <button mat-button *ngIf=\"getFieldValue('date_to')\" matSuffix mat-icon-button\n                (click)=\"resetFieldValue('date_to')\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n\n    </ng-container>\n</ng-container>",
+                template: "<ng-container [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label>{{labelText}}</mat-label>\n        <mat-select (selectionChange)=\"changeTimeline($event.value)\" [value]=\"timelineValue\">\n            <mat-option *ngFor=\"let timeline of timelines\" [value]=\"timeline.value\">\n                {{timeline.viewValue}}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <ng-container *ngIf=\"showCustomDateFields\">\n        <mat-form-field>\n            <input matInput formControlName=\"{{dateFrom}}\" [matDatepicker]=\"fromPicker\" (click)=\"fromPicker.open()\"\n                placeholder=\"From Date\" readonly />\n            <mat-datepicker-toggle matSuffix [for]=\"fromPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #fromPicker></mat-datepicker>\n            <button mat-button *ngIf=\"getFieldValue(dateFrom)\" matSuffix mat-icon-button\n                (click)=\"resetFieldValue(dateFrom)\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n\n        <mat-form-field>\n            <input matInput formControlName=\"{{dateTo}}\" [matDatepicker]=\"toPicker\" (click)=\"toPicker.open()\"\n                placeholder=\"To Date\" readonly />\n            <mat-datepicker-toggle matSuffix [for]=\"\"></mat-datepicker-toggle>\n            <mat-datepicker #toPicker></mat-datepicker>\n            <button mat-button *ngIf=\"getFieldValue(dateTo)\" matSuffix mat-icon-button\n                (click)=\"resetFieldValue(dateTo)\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n\n    </ng-container>\n</ng-container>",
                 styles: [""]
             },] }
 ];
 TimelineFilterComponent.ctorParameters = () => [];
 TimelineFilterComponent.propDecorators = {
     timelines: [{ type: Input }],
+    labelText: [{ type: Input }],
+    dateFrom: [{ type: Input }],
+    dateTo: [{ type: Input }],
     form: [{ type: Input }],
     defaultValue: [{ type: Input }]
 };
@@ -4422,8 +4436,8 @@ class UpdateNotifierSnackComponent {
 UpdateNotifierSnackComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-update-notifier-snack',
-                template: "<div fxLayout=\"column\">\n    <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n        <div fxLayout=\"row wrap\" fxLayoutGap=\"1rem\">\n            <span fxLayoutAlign=\"center center\">\n                <mat-icon class=\"large-icon primary-color\">\n                    <span class=\"material-icons-outlined\">\n                        grading\n                    </span>\n                </mat-icon>\n            </span>\n            <div fxLayout=\"column\">\n                <h5 class=\"primary-color text-truncate\" matTooltip=\"{{techlifyUpdate?.title}}\"\n                    matTooltipPosition=\"below\">\n                    App Update: {{techlifyUpdate?.title}}\n                </h5>\n                <small class=\"text-muted\">\n                    Version : {{techlifyUpdate?.version}}\n                </small>\n            </div>\n        </div>\n        <div fxLayoutAlign=\"end center\" class=\"text-muted\">\n            <button mat-icon-button type=\"button\" (click)=\"close()\">\n                <mat-icon>clear</mat-icon>\n            </button>\n        </div>\n    </div>\n    <div fxLayout=\"row\" class=\"text-muted\" style=\"margin-top: 1rem;\" [innerHtml]=\"descriptionText\">\n    </div>\n    <div fxLayout=\"row\" fxLayoutAlign=\"space-between\">\n        <button type=\"button\" mat-button class=\"primary-color\" (click)=\"openUpdateHistory()\">\n            <mat-icon>\n                history\n            </mat-icon>\n            Update History\n        </button>\n        <button type=\"button\" mat-raised-button class=\"primary-bg text-white\" (click)=\"openUpdateView()\">\n            View\n        </button>\n    </div>\n</div>",
-                styles: [".large-icon{transform:scale(2.3)}.primary-color{color:#009fdd!important}.primary-bg{background-color:#009fdd!important}.text-muted,.text-white{color:#d3d3d3}.text-truncate{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:400px}"]
+                template: "<div fxLayout=\"column\">\n  <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n    <div fxLayout=\"row wrap\" fxLayoutGap=\"1rem\">\n      <span fxLayoutAlign=\"center center\">\n        <mat-icon class=\"large-icon primary-color\">\n          <span class=\"material-icons-outlined\">\n            grading\n          </span>\n        </mat-icon>\n      </span>\n      <div fxLayout=\"column\">\n        <h5 class=\"primary-color text-truncate\" matTooltip=\"{{techlifyUpdate?.title}}\" matTooltipPosition=\"below\">\n          App Update: {{techlifyUpdate?.title}}\n        </h5>\n        <small class=\"text-muted\">\n          Version : {{techlifyUpdate?.version}}\n        </small>\n      </div>\n    </div>\n    <div fxLayoutAlign=\"end center\" class=\"text-muted\">\n      <button mat-icon-button type=\"button\" (click)=\"close()\">\n        <mat-icon>clear</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div fxLayout=\"row\" class=\"text-muted\" style=\"margin-top: 1rem;\" [innerHtml]=\"descriptionText\">\n  </div>\n  <div fxLayout=\"row\" fxLayoutAlign=\"space-between\">\n    <button type=\"button\" mat-button class=\"primary-color\" (click)=\"openUpdateHistory()\">\n      <mat-icon>\n        history\n      </mat-icon>\n      Update History\n    </button>\n    <button type=\"button\" mat-raised-button class=\"primary-bg text-white\" (click)=\"openUpdateView()\">\n      View\n    </button>\n  </div>\n</div>\n",
+                styles: [".large-icon{transform:scale(1.5)}.primary-color{color:#009fdd!important}.primary-bg{background-color:#009fdd!important}.text-muted,.text-white{color:#d3d3d3}.text-truncate{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:400px}@media screen and (max-width:1440px){.text-truncate{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:350px}}@media screen and (max-width:1024px){.text-truncate{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:220px;width:190px}}"]
             },] }
 ];
 UpdateNotifierSnackComponent.ctorParameters = () => [