@churchillliving/se-ui-toolkit 6.53.510 → 6.53.511

package/README.md

@@ -1,28 +1,28 @@
-# SeUiToolkit
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.4.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project se-ui-toolkit` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project se-ui-toolkit`.
-> Note: Don't forget to add `--project se-ui-toolkit` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build se-ui-toolkit` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build se-ui-toolkit`, go to the dist folder `cd dist/se-ui-toolkit` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test se-ui-toolkit` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
-
-## Library Publish Command
-
-run `npm run publish-toolkit` to publish the npm package 
+# SeUiToolkit
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.4.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project se-ui-toolkit` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project se-ui-toolkit`.
+> Note: Don't forget to add `--project se-ui-toolkit` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build se-ui-toolkit` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build se-ui-toolkit`, go to the dist folder `cd dist/se-ui-toolkit` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test se-ui-toolkit` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+
+## Library Publish Command
+
+run `npm run publish-toolkit` to publish the npm package 

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/se-ui-toolkit'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/se-ui-toolkit",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,27 +1,19 @@
-{
-  "name": "@churchillliving/se-ui-toolkit",
-  "version": "6.53.510",
-  "peerDependencies": {
-    "@angular/common": "^12.0.4",
-    "@angular/core": "^12.0.4",
-    "jspdf": "^2.3.1",
-    "file-saver": "^2.0.5",
-    "primeicons": "^4.1.0",
-    "primeng": "^13.0.4",
-    "xlsx": "^0.17.0",
-    "primeflex": "^2.0.0",
-    "@angular/cdk": "^12.0.4",
-    "ngx-toastr": "^14.0.0"
-  },
-  "dependencies": {
-    "tslib": "^2.0.0"
-  },
-  "main": "bundles/churchillliving-se-ui-toolkit.umd.js",
-  "module": "fesm2015/churchillliving-se-ui-toolkit.js",
-  "es2015": "fesm2015/churchillliving-se-ui-toolkit.js",
-  "esm2015": "esm2015/churchillliving-se-ui-toolkit.js",
-  "fesm2015": "fesm2015/churchillliving-se-ui-toolkit.js",
-  "typings": "churchillliving-se-ui-toolkit.d.ts",
-  "metadata": "churchillliving-se-ui-toolkit.metadata.json",
-  "sideEffects": false
-}
+{
+  "name": "@churchillliving/se-ui-toolkit",
+  "version": "6.53.511",
+  "peerDependencies": {
+    "@angular/common": "~14.3.0",
+    "@angular/core": "~14.3.0",
+    "jspdf": "^2.3.1",
+    "file-saver": "^2.0.5",
+    "primeicons": "^4.1.0",
+    "primeng": "^13.0.4",
+    "xlsx": "^0.17.0",
+    "primeflex": "^2.0.0",
+    "@angular/cdk": "^12.0.4",
+    "ngx-toastr": "^14.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.0.0"
+  }
+}

package/src/lib/components/base/alert-pop-up/alert-pop-up.component.css

@@ -0,0 +1 @@
+/* FOR FUNCTIONALITY USE ONLY! */

package/src/lib/components/base/alert-pop-up/alert-pop-up.component.html

@@ -0,0 +1,6 @@
+<h4><i [class]="icon"></i> {{message}}</h4>
+<br>
+<button *ngFor="let button of buttons" pButton type="button" [label]="button.buttonLabel"
+    [class]="button.buttonClass ? button.buttonClass+ ' p-mr-3' : 'p-mr-3 p-button-success'"
+    (click)="clickedBtn(button)">
+</button>

package/src/lib/components/base/alert-pop-up/alert-pop-up.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit, Optional } from '@angular/core';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+
+@Component({
+  selector: 'lib-alert-pop-up',
+  templateUrl: './alert-pop-up.component.html',
+  styleUrls: ['./alert-pop-up.component.css']
+})
+export class AlertPopUpComponent implements OnInit {
+  buttons: any[]
+  message: string;
+  icon: string;
+
+  constructor(@Optional() public config: DynamicDialogConfig,
+  @Optional() public ref: DynamicDialogRef,) { }
+
+  ngOnInit(): void {
+    if(this.config?.data){
+      this.message = this.config.data?.alertPopInfo?.message;
+      this.buttons = this.config.data?.alertPopInfo?.buttons;
+      this.icon = this.config.data?.alertPopInfo?.icon;
+    }
+  }
+
+  clickedBtn(button: any){
+    const closeBtn = document.querySelectorAll(".alertPopUp button")[0] as HTMLButtonElement;
+    if(closeBtn){
+      closeBtn?.click();
+      this.ref.close(button);
+    }
+  }
+}

package/src/lib/components/base/caption/caption.component.html

@@ -0,0 +1,10 @@
+<!-- add Caption on DisplayImage Component -->
+<div class="caption-form">
+  <se-form
+    *ngIf="dynamicForm"
+    [form]="dynamicForm"
+    (saveForm)="saveForm($event)"
+    (cancelForm)="cancelForm($event)"
+  >
+  </se-form>
+</div>

package/src/lib/components/base/caption/caption.component.scss

@@ -0,0 +1,50 @@
+/* FOR FUNCTIONALITY USE ONLY! */
+
+// :host ::ng-deep {
+//   .p-accordion .p-accordion-content {
+//     border: 0;
+//     padding: 0 10px;
+//   }
+
+//   .p-accordion-content div:first-child {
+//     padding: 0;
+//   }
+
+//   .caption-form {
+//     span div {
+//       flex-direction: row !important;
+//       align-items: center;
+//     }
+
+//     span div span {
+//       margin-right: 10px;
+//       width: 100px;
+//     }
+
+//     div input {
+//       width: 100%;
+//     }
+
+//     .sticky {
+//       bottom: 15px;
+//       width: unset !important;
+//       right: 25px !important;
+//     }
+
+//     .fixed-height {
+//       height: unset;
+//     }
+
+//     span.error {
+//       display: none;
+//     }
+//   }
+// }
+
+:host ::ng-deep {
+  .caption-form {
+    span.error {
+      display: none;
+    }
+  }
+}

package/src/lib/components/base/caption/caption.component.ts

@@ -0,0 +1,78 @@
+import { Component, EventEmitter, OnInit, Optional, Output } from '@angular/core';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { EValidator, IDynamicForm } from '../../../models/form.model';
+import { AlertService } from '../../../services/alert.service';
+import { FormService } from '../../../services/form.service';
+import { RequestService } from '../../../services/request.service';
+import * as utilities from '../../../services/utilities.service';
+
+@Component({
+  selector: 'se-caption',
+  templateUrl: './caption.component.html',
+  styleUrls: ['./caption.component.scss'],
+})
+export class CaptionComponent implements OnInit {
+  dynamicForm: IDynamicForm;
+  id: number;
+  caption: string;
+
+  constructor(
+    private formService: FormService,
+    private requestService: RequestService,
+    private alertService: AlertService,
+    @Optional() public config: DynamicDialogConfig,
+    @Optional() public ref: DynamicDialogRef
+  ) {}
+
+  ngOnInit(): void {
+    if (this.config.data) {
+      this.id = this.config.data.id;
+      this.caption = this.config.data.caption;
+    }
+    this.initilizeForm();
+  }
+
+  initilizeForm() {
+    this.dynamicForm = {
+      formSections: [
+        {
+          fields: [
+            this.formService.addTextbox({
+              field: 'fileCaption',
+              label: 'Caption',
+              value: this.caption,
+              column: 12,
+              validations: [{ type: EValidator.REQUIRED }]
+            }),
+          ],
+        },
+      ],
+    };
+  }
+
+  saveForm(formFiels: any) {
+    this.requestService
+      .get<any[], any>('/AzureUpload/UpdateCaption', {
+        Id: this.id,
+        fileCaption: utilities.getFormFieldValue(
+          this.dynamicForm,
+          'fileCaption'
+        ),
+      })
+      .subscribe(
+        (response: any) => {
+          if (response) {
+            this.alertService.success('Caption added successfully.');
+            this.ref.close(response);
+          }
+        },
+        ({ error }) => {
+          this.ref.close();
+          this.alertService.apiError(error);
+        }
+      );
+  }
+  cancelForm(event: any) {
+    //console.log('CancelForm: ', event);
+  }
+}

package/src/lib/components/base/cards/card.component.html

@@ -0,0 +1,62 @@
+<!-- Display Files Card -->
+<p-confirmDialog key="handlecolumnActions"></p-confirmDialog>
+<div
+  cdkDropList
+  cdkDropListOrientation="horizontal"
+  class="example-list"
+  (cdkDropListDropped)="dragAndDrop($event)"
+>
+  <div 
+  class="p-d-flex cards-wrapper" 
+  [ngStyle]="{ width: width, height: height }" 
+  *ngIf="data" 
+  [class]="card && card.class ? card.class : ''">
+    <div
+      cdkDrag
+      class="example-box p-d-flex p-flex-column cards-wrapper"
+      [class]="
+        card && card.width && card.width.length > 0
+          ? 'p-col-' + card.width
+          : 'p-col-3'
+      "
+      *ngFor="let file of data; let i = index"
+      (click)="onClickEvent(file,i)"
+      [ngClass]="file.selectedCard ? file.selectedCard : ''"
+    >
+      <!-- start cards image functionality -->
+      <se-file
+        [url]="file.blobfileurl"
+        [type]="file.fileextension"
+        [caption]="file?.filecaption"
+        [height]="card?.height"
+        [allowDownloadFile]="card?.allowDownload"
+        [allowEditableCaption]="card?.allowEditableCaption"
+        [allowDeleteFile]="card?.allowDelete"
+        [name]="file.blobfileurl"
+        [id]="file.fileextension"
+        (onDeleteEvent)="deleteImage($event)"
+        (onSaveEvent)="saveCaption($event)"
+      ></se-file>
+      <!-- End cards image functionality -->
+
+      <!-- start form functionality in card -->
+      <se-form
+        class="form-content"
+        [form]="file.dynamicform"
+        [hideSaveButton]="true"
+        [hideCancelButton]="true"
+      ></se-form>
+      <!-- End form functionality in card -->
+    </div>
+  </div>
+
+  <!-- in case of form and data is empty or null -->
+  <div *ngIf="dynamicForm && (!data || data.length == 0)">
+    <se-form
+      *ngIf="dynamicForm"
+      [form]="dynamicForm"
+      [hideSaveButton]="true"
+      [hideCancelButton]="true"
+    ></se-form>
+  </div>
+</div>

package/src/lib/components/base/cards/card.component.scss

@@ -0,0 +1,107 @@
+/* FOR FUNCTIONALITY USE ONLY! */
+:host ::ng-deep {
+  .custom-card {
+    .action-buttons {
+      // display: flex;
+      // justify-content: flex-end;
+      // background-color: #eee;
+      // position: absolute;
+      // top: 0;
+      // left: 0;
+      // width: 100%;
+      visibility: hidden;
+    }
+    // .p-card-body {
+    //   padding: 0;
+    // }
+    // .p-card-content {
+    //   padding: 0;
+    // }
+    // .p-button.p-button-icon-only {
+    //   padding: 5px;
+    //   height: unset;
+    // }
+    .image-wrapper:hover .action-buttons {
+      visibility: visible;
+    }
+  }
+  // .form-content .fixed-height {
+  //   height: unset !important;
+  // }
+  // .p-accordion-content {
+  //   border: 1px solid lightgray;
+  //   border-top: 1px solid lightgray;
+  //   border-radius: 10px !important;
+  //   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2),
+  //     1px 1px 1px inset rgba(0, 0, 0, 0.2);
+  // }
+  // .card-active .p-accordion-content{
+  //   background: #eee !important;
+  // }
+}
+
+// .cards-wrapper {
+//   padding: 10px;
+//   overflow: auto;
+// }
+// .custom-card {
+//   width: 100%;
+//   height: 400px;
+//   .image-wrapper {
+//     position: relative;
+//     img {
+//       width: 100%;
+//       height: 300px;
+//     }
+//   }
+//   h4 {
+//     margin: auto;
+//     text-align: center;
+//     width: 90%;
+//     height: 27px;
+//     padding-bottom: 6px;
+//     overflow: hidden;
+//     white-space: nowrap;
+//     text-overflow: ellipsis;
+//   }
+// }
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+// .example-box:last-child {
+//   border: none;
+// }
+// .example-list span {
+//   height: unset !important;
+// }
+
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+// .header-icons{
+//   background-color: #eee;
+//   text-align: right;
+//   opacity: 0;
+// }
+.example-box:hover .header-icons{
+  opacity: 1;
+}
+.card-active{
+  transform: scale(1.1);
+  transition: all .2s linear;
+  z-index: 999;
+}

package/src/lib/components/base/cards/card.component.ts

@@ -0,0 +1,152 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DialogService } from 'primeng/dynamicdialog';
+import { IDynamicCard, IDynamicForm, IViewCardProp } from '../../../models/form.model';
+import { moveItemInArray } from '@angular/cdk/drag-drop';
+import { GridService } from '../../../services/grid.service';
+import * as utilities from '../../../services/utilities.service';
+import { ConfirmationService } from 'primeng/api';
+
+@Component({
+  selector: 'se-card',
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.scss'],
+})
+export class CardComponent implements OnInit {
+  @Output() selectedCard: EventEmitter<any> = new EventEmitter();
+  // @Output() onDeleteCard: EventEmitter<any> = new EventEmitter();
+  @Input() data: any = [];
+  @Input() width: string = '';
+  @Input() height: string = '';
+  @Input() card: any;
+  @Input() setCardData: boolean;
+  dynamicForm: IDynamicForm;
+  showFiles: boolean = false;
+  displayCardInfo: IViewCardProp;
+
+  constructor(
+    public dialogService: DialogService,
+    private gridService: GridService,
+    private confirmationService: ConfirmationService
+  ) {}
+
+  ngOnInit(): void {}
+
+  ngOnChanges() {
+    if (this.card) {
+      let { data, formSections, cardInfo }: any = this.card;
+      if(cardInfo && Object.keys(cardInfo).length){
+        this.displayCardInfo = cardInfo;
+        data = this.gridService.setDataFields(data);
+        const newArr = [];
+        data?.forEach((record)=>{
+          if(!Object.keys(record)?.includes('azurecontainerid')){
+            newArr.push({...record, blobfileurl: record[cardInfo.url?.toLowerCase()], filecaption: record[cardInfo.caption?.toLowerCase()], fileextension: record[cardInfo.extension?.toLowerCase()]});
+          } else {
+            newArr.push(record);
+          }
+        });
+        this.data = newArr;
+      } else {
+        this.data = this.gridService.setDataFields(data);
+      }
+      this.dynamicForm = { formSections };
+      // set the default value of allowDelete, allowEditableCaption and allowDownload
+      this.setCardPropValue('allowDownload');
+      this.setCardPropValue('allowDelete');
+      this.setCardPropValue('allowEditableCaption');
+      //files.allowEditableCaption = this.setCardPropValue(files.allowEditableCaption);
+      /** In case of when we are using this component for stand alone then if formSection is exist in
+          the this.card and then add in the data array.
+      */
+      if (this.data) {
+        this.data.forEach((x: any) => {
+          if (!x.dynamicform) {
+            x.dynamicform = JSON.parse(JSON.stringify(this.dynamicForm));
+          }
+          utilities.setCardFieldsData(x);
+        });
+      }
+    }
+  }
+
+  // set the default value of allowDelete, allowEditableCaption and allowDownload
+  setCardPropValue(prop:string){
+   if(!this.card[prop]?.toString()?.length) {
+      this.card[prop]= true;
+    }
+  }
+
+  dragAndDrop(event: any) {
+    moveItemInArray(this.data, event.previousIndex, event.currentIndex);
+    event.item?.element?.nativeElement;
+    this.card.data = this.data;
+    this.card['change'] = true;
+    if (this.card && this.card.onSort) {
+      this.card.onSort(this.data);
+    }
+  }
+
+  deleteImage(event: any) {
+    this.confirmationService.confirm({
+      message: 'Are you sure that you want to delete this Image?',
+      header: 'Delete Confirmation',
+      icon: 'pi pi-exclamation-triangle',
+      key: 'handlecolumnActions',
+      accept: () => {
+        if (this.data && event) {
+          let arr = [...this.data];
+          const index = arr.findIndex(
+            (i) => i.blobfileurl === event.blobfileurl
+          );
+          let obj = arr[index];
+          arr.splice(index, 1);
+          this.data = [...arr];
+
+          if (this.card && this.card.onDelete) {
+            obj = this.replacePropName(obj);
+            this.card.onDelete(obj);
+            // this.onDeleteCard.emit();
+          }
+        }
+        this.confirmationService.close();
+      },
+      reject: () => {
+        this.confirmationService.close();
+      },
+    });
+  }
+
+  replacePropName(cardInfo:any){
+    if(this.displayCardInfo && Object.keys(this.displayCardInfo).length > 0){
+      const cardProp = {...this.displayCardInfo};
+      const obj = {...cardInfo,[cardProp.url]: cardInfo.blobfileurl,[cardProp.caption]: cardInfo.filecaption,[cardProp.extension]: cardInfo.fileextension};
+      return obj;
+    } else {
+      return cardInfo;
+    }
+  }
+
+  saveCaption(event: any) {
+    if (this.data && event) {
+      let arr = [...this.data];
+      const index = arr.findIndex((i) => i.blobfileurl === event.blobfileurl);
+      let obj = arr[index];
+      if (index !== -1) {
+        obj.filecaption = event.caption;
+        arr.splice(index, 1, obj);
+        this.card.data = arr;
+        this.card['change'] = true;
+      }
+      if (this.card && this.card?.onCaptionSave) {
+        obj = this.replacePropName(obj);
+        this.card.onCaptionSave(obj);
+      }
+    }
+  }
+
+  onClickEvent(data: any, index: number){
+    data['index'] = index;
+    this.selectedCard.emit(data);
+  }
+
+}