Merge branch 'release/5.2.0'

Author: abalad

projects/truly-ui/src/components/dialog/dialog-confirmation/confirmation-options.ts

@@ -22,6 +22,7 @@
  export interface ConfirmationOptions {
      textOk?: string;
      textCancel?: string;
+     message?: string;
      defaultOK?: boolean;
      draggable?: boolean;
  }

projects/truly-ui/src/components/dialog/dialog.service.ts

@@ -78,9 +78,13 @@ export class DialogService {
   confirmation( message: string, callbackConfirmation: ConfirmCallback, options: ConfirmationOptions = {}, mdOptions?: ModalOptions ) {
     this.modalService.createModalDialog( TlDialogConfirmation, this.factoryResolver, mdOptions ).then((value: any) => {
       if ( value.mdResult === ModalResult.MRYES ) {
-        callbackConfirmation.isYes(ModalResult.MRYES);
+        if (callbackConfirmation.isYes) {
+          callbackConfirmation.isYes(ModalResult.MRYES);
+        }
       } else if (value.mdResult === ModalResult.MRNO) {
-        callbackConfirmation.isNo(ModalResult.MRNO);
+        if (callbackConfirmation.isNo) {
+          callbackConfirmation.isNo(ModalResult.MRNO);
+        }
       }
     });
     const optionsObj = Object.assign( options, { message: message } );

projects/truly-ui/src/components/lightbox/lightbox.ts

@@ -20,14 +20,15 @@
     SOFTWARE.
 */
 
-import {ChangeDetectorRef, Component, EventEmitter, HostListener, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostListener, OnInit} from '@angular/core';
 import {ImageLightboxInterface} from './interfaces/image.interface';
 import {DomSanitizer} from '@angular/platform-browser';
 
 @Component({
   selector: 'tl-lightbox',
   templateUrl: './lightbox.html',
   styleUrls: ['./lightbox.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TlLightbox implements OnInit {
 

projects/truly-ui/src/components/modal/services/modal.service.ts

@@ -94,10 +94,10 @@ export class ModalService implements OnDestroy {
   }
 
   createModal(component: Type<any>, factoryOrConfig: ComponentFactoryResolver,
-              identifier: string = '', parentElement: ElementRef = null, mdOptions?: ModalOptions) {
+              identifier: string = '', properties?: {}, parentElement: ElementRef = null, mdOptions?: ModalOptions) {
     this.view = this.containerModal.view;
     return new Promise((resolve) => {
-      this.setComponentModal(component, factoryOrConfig, identifier, parentElement, mdOptions);
+      this.setComponentModal(component, factoryOrConfig, identifier, parentElement, mdOptions, properties);
       this.handleCallbackModal(resolve);
     });
   }
@@ -157,6 +157,14 @@ export class ModalService implements OnDestroy {
     this.modalOptions = Object.assign(this.modalOptions[0], mdOptions);
   }
 
+  private setModalProperties(properties) {
+    if (properties) {
+      Object.keys(properties).forEach( (value, index) => {
+        (this.componentInjected.instance)[value] = properties[value];
+      });
+    }
+  }
+
   private setComponentWrapperProperties(config, identifier, parentElement) {
     (<TlModal>this.component.instance).setOptions(this.modalOptions);
     (<TlModal>this.component.instance).setIdentifier(this.isConfigSmartForm(config) ? config['identifier'] : identifier);
@@ -193,7 +201,7 @@ export class ModalService implements OnDestroy {
 
   private setComponentModal(component: Type<any>,
                             config: SmartFormConfiguration | ComponentFactoryResolver,
-                            identifier?, parentElement?, mdOptions?: ModalOptions) {
+                            identifier?, parentElement?, mdOptions?: ModalOptions, properties?) {
 
     const factory = this.isConfigSmartForm(config) ? config['factory'] : config;
     if (this.isSmartFormUpdateDeleteAction(config) && !this.validateDataFormUpdate(config)) {
@@ -209,6 +217,7 @@ export class ModalService implements OnDestroy {
     this.setInitialZIndex();
     this.setInjectedComponent(factory, component);
     this.setModalOptions(mdOptions);
+    this.setModalProperties(properties);
     this.handleBackDrop(factory);
     this.setComponentWrapperProperties(config, identifier, parentElement);
     this.setInstanceComponent(config);

projects/truly-ui/src/components/thumbnail/index.ts

@@ -5,13 +5,15 @@ import { FormsModule } from '@angular/forms';
 import { TlThumbnail } from './thumbnail';
 import { IconsModule } from '../icons/index';
 import { LightboxModule } from '../lightbox/index';
+import {DialogModule} from '../dialog/index';
 
 @NgModule({
   imports: [
     CommonModule,
     IconsModule,
     FormsModule,
-    LightboxModule
+    LightboxModule,
+    DialogModule
   ],
   declarations: [
     TlThumbnail

projects/truly-ui/src/components/thumbnail/thumbnail.html

@@ -23,6 +23,7 @@
         <img class="thumbnail-image" [class.circle-shape]="isCircle" alt="image" [src]="item.file || image">
         <div class="thumbnail-controls" *ngIf="!overlayTemplate">
           <tl-icon style="margin-right: 5px" (click)="onViewImage( image )" [lib]="'dx'">find</tl-icon>
+          <tl-icon *ngIf="showDeleteButton" style="cursor: pointer" (click)="onDeleteThumb(item)" [lib]="'dx'">trash</tl-icon>
         </div>
         <div class="thumbnail-controls" *ngIf="overlayTemplate">
           <ng-container *ngTemplateOutlet="overlayTemplate; context: { $implicit: item || image }"></ng-container>
@@ -33,6 +34,7 @@
         <tl-icon style="margin-right: 5px" [lib]="'fa'" [style]="'fas'" [color]="'#ec7e7e'" [size]="'40px'">file-pdf</tl-icon>
         <div class="thumbnail-controls" *ngIf="!overlayTemplate">
           <tl-icon style="margin-right: 5px" (click)="onViewImage( image )" [lib]="'dx'">find</tl-icon>
+          <tl-icon *ngIf="showDeleteButton" style="cursor: pointer" (click)="onDeleteThumb(item)" [lib]="'dx'">trash</tl-icon>
         </div>
         <div class="thumbnail-controls" *ngIf="overlayTemplate">
           <ng-container *ngTemplateOutlet="overlayTemplate; context: { $implicit: item || image }"></ng-container>

projects/truly-ui/src/components/thumbnail/thumbnail.ts

@@ -22,7 +22,9 @@
 
 import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, TemplateRef} from '@angular/core';
 import { LightboxService } from '../lightbox/services/lightbox.service';
-import {ThumbnailService} from './thumbnail.service';
+import { ThumbnailService } from './thumbnail.service';
+import { DialogService } from '../dialog/dialog.service';
+import { ModalOptions } from '../modal/interfaces/modal-options';
 
 @Component({
   selector: 'tl-thumbnail',
@@ -43,13 +45,27 @@ export class TlThumbnail implements OnInit, OnChanges {
 
   @Input() size: { width: string, height: string } = { width: '80px', height: '80px' };
 
+  @Input() showDeleteButton = false;
+
+  @Input() confirmationDeleteMessage = 'Do you want to delete the Thumbnail?';
+
+  @Input() showConfirmationOnDelete = false;
+
+  @Input() modalDeleteOptions: ModalOptions;
+
   @Input() overlayTemplate: TemplateRef<any>;
 
   @Input() emptyTemplate: TemplateRef<any>;
 
   @Output() clickThumbnail = new EventEmitter();
 
-  constructor(private lightboxService: LightboxService, private thumbnailService: ThumbnailService) {}
+  @Output() clickDeleteThumbail = new EventEmitter();
+
+  constructor(
+    private lightboxService: LightboxService,
+    private thumbnailService: ThumbnailService,
+    private dialogService: DialogService
+  ) {}
 
   ngOnInit() {}
 
@@ -72,4 +88,13 @@ export class TlThumbnail implements OnInit, OnChanges {
     this.lightboxService.create( this.data, image);
   }
 
+  onDeleteThumb(image) {
+    if (this.showConfirmationOnDelete) {
+      return this.dialogService.confirmation( this.confirmationDeleteMessage, ({
+        isYes: () => this.clickDeleteThumbail.emit(image),
+      }), {}, this.modalDeleteOptions);
+    }
+    this.clickDeleteThumbail.emit(image);
+  }
+
 }

projects/truly-ui/src/components/timeline/timeline.ts

@@ -43,6 +43,8 @@ export class TlTimeline implements OnInit, OnChanges {
 
   @Input('data') data = [];
 
+  @Input() clearOnUpdateData = false;
+
   @Input() align = 'left';
 
   @Input() height = '400px';
@@ -88,7 +90,11 @@ export class TlTimeline implements OnInit, OnChanges {
   ngOnChanges(changes: SimpleChanges) {
     this.loadingMoreData = false;
     if ( this.data.length > 0 ) {
-      this.buffer = this.buffer.concat(this.data);
+      if ( this.clearOnUpdateData ) {
+        this.buffer = this.data;
+      } else {
+        this.buffer = this.buffer.concat(this.data);
+      }
       this.nothingFound = false;
       return this.loadingMoreData = false;
     }

projects/truly-ui/src/components/upload/upload.html

@@ -5,7 +5,7 @@
     <ng-container *ngIf="imageList.length === 0 || showAsList; else imagesContainerTemplate">
       <span><tl-icon class="icon" [lib]="'fa'" [style]="'fas'">inbox</tl-icon></span>
       <p style="white-space: pre-line">{{ boxDescription }}</p>
-      <input #inputMultiple type="file" style="display: none;" (change)="onChange($event)" multiple>
+      <input #inputMultiple type="file" style="display: none;" (change)="onChange($event)" multiple [accept]="acceptFiles">
     </ng-container>
 
     <ng-template #imagesContainerTemplate>
@@ -33,7 +33,7 @@
 </div>
 
 <ng-template #uploadboxTemplate let-item>
-  <input #inputSingle type="file" style="display: none;" (change)="onChange($event)">
+  <input #inputSingle type="file" style="display: none;" (change)="onChange($event)" [accept]="acceptFiles">
   <tl-thumbnail
     [shape]="'square'"
     [bordered]="!item"

projects/truly-ui/src/components/upload/upload.ts

@@ -64,6 +64,8 @@ export class TlUpload implements OnInit {
 
   @Input() viewControl = true;
 
+  @Input() acceptFiles = 'image/*,application/pdf';
+
   @ViewChild('inputMultiple', {static: false}) inputMultiple;
 
   @ViewChild('inputSingle', {static: false}) inputSingle;
@@ -178,18 +180,33 @@ export class TlUpload implements OnInit {
 
   onChange($event) {
     if ($event.target.files.length > 0) {
+      const filesAccepet = this.filterFilesAccpet($event.target.files);
       if (this.type === 'dragndrop') {
-        return this.readFiles($event.target.files);
+        return this.readFiles(filesAccepet);
       }
       const reader = new FileReader();
-      reader.readAsDataURL($event.target.files[0]);
+      reader.readAsDataURL(filesAccepet[0]);
       reader.onload = (event) => {
         this.imageSrc = (<FileReader>event.target).result;
         this.uploadChange.emit(this.imageSrc);
       };
     }
   }
 
+  private filterFilesAccpet( files ) {
+    const acceptFiles = [];
+    for (let i = 0; i < files.length; i++) {
+      const regexExpresison = this.acceptFiles
+        .replace(  /\*/g, '.\*' )
+        .replace( /\,/g, '|' ) ;
+      const isAccept = new RegExp( regexExpresison ).test( files[ i ].type );
+      if ( isAccept ) {
+        acceptFiles.push(files[i]);
+      }
+    }
+    return acceptFiles;
+  }
+
   private getBase64MimeType(encoded) {
     let result = null;
 

src/app/components/modal/modaldemo.component.ts

@@ -33,7 +33,10 @@ export class ModalDemoComponent {
   }
 
   modal1() {
-    this.modalService.createModal( NewModalComponent, this.compiler )
+    this.modalService.createModal( NewModalComponent, this.compiler, 'MODAL-TESTE', {
+      myTitle: 'My Modal Text Title',
+      notPropertie: ''
+    } )
       .then( ( modalResult ) => {
         console.log( modalResult );
       });

src/app/components/modal/newmodal/newModal.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component, Input} from '@angular/core';
 import { Modal } from '../../../../../projects/truly-ui/src/components/modal/interfaces/modal-options';
 
 @Modal({
@@ -17,4 +17,6 @@ import { Modal } from '../../../../../projects/truly-ui/src/components/modal/int
   templateUrl: './newModal.html',
   styleUrls: [ './newModal.component.scss' ]
 } )
-export class NewModalComponent {}
+export class NewModalComponent {
+  @Input() myTitle;
+}

src/app/components/modal/newmodal/newModal.html

@@ -1,12 +1,12 @@
 <div class="content" style="padding: 20px; font-family: Lato; line-height: 25px; ">
-    <h3>My Modal Text</h3>
+    <h3>{{myTitle}}</h3>
     <p style="user-select: text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
       standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
       type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
       remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
       Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
       of
       Lorem Ipsum.</p>
-  <tl-button mdResult="MRCLOSE">Button Callback</tl-button>
+  <tl-button mdResult="MRCLOSE" [text]="'Button Callback'"></tl-button>
 </div>
 

src/app/components/thumbnail/thumbnaildemo.component.html

@@ -10,7 +10,7 @@
           <app-card>
             <div class="col-md-12">
               <h5>Basic Image</h5>
-              <tl-thumbnail [data]="files"></tl-thumbnail>
+              <tl-thumbnail [data]="files" [showDeleteButton]="true" (clickDeleteThumbail)="deleteThumb($event)" [showConfirmationOnDelete]="true"></tl-thumbnail>
               <br>
               <div class="spacer"></div>
               <textarea highlight-js [options]="{'tabReplace': ''}" [lang]="'html'">

src/app/components/thumbnail/thumbnaildemo.component.ts

@@ -45,7 +45,7 @@ export class ThumbnailDemoComponent {
     {
       index: 1,
       description: 'PDF 1',
-      file: 'https://cdn.medicsolution.app/prontuario/anexos/09794f95-4baf-4726-ab7b-dd62369d1cf6',
+      file: 'http://www.orimi.com/pdf-test.pdf',
       type: 'application/pdf'
     }
   ];
@@ -54,5 +54,9 @@ export class ThumbnailDemoComponent {
     this.dataTableProperties = json.dataProperties;
     this.dataEvents = jsonEvts.dataEvents;
   }
+
+  deleteThumb(thumb) {
+    console.log('DELETING...', thumb);
+  }
 }
 

src/app/components/timeline/infinitescroll/timelinedemo.component.ts

@@ -78,7 +78,7 @@ export class TimelineDemoComponent {
   public dataAdvanced = [
     {
       title: 'Dr. Gregory House 1',
-      date: 1537477718000,
+      date: 1537477712000,
       text: 'Mauris vulputate dolor vel finibus sagittis.',
       duration: 15,
       category: [
@@ -816,6 +816,7 @@ export class TimelineDemoComponent {
     this.dataLazy = this.getDataFromService(0, this.take);
   }
 
+
   getDataFromService(skip, take) {
     return this.dataAdvanced.slice(skip, take);
   }

src/app/components/timeline/infinitescroll/timelinedemo.module.ts

@@ -11,6 +11,7 @@ import { ShowcaseCardModule } from '../../../shared/components/showcase-card/sho
 import { ShowcaseTablePropertiesModule } from '../../../shared/components/showcase-table-properties/showcase-table-properties.module';
 import { ShowcaseTableEventsModule } from '../../../shared/components/showcase-table-events/showcase-table-events.module';
 import { ShowcaseHeaderModule } from '../../../shared/components/showcase-header/showcase-header.module';
+import {ButtonModule} from '../../../../../projects/truly-ui/src/components/button';
 
 @NgModule({
   declarations: [
@@ -26,7 +27,8 @@ import { ShowcaseHeaderModule } from '../../../shared/components/showcase-header
     ShowcaseTablePropertiesModule,
     ShowcaseTableEventsModule,
     ShowcaseHeaderModule,
-    ShowcaseHeaderModule
+    ShowcaseHeaderModule,
+    ButtonModule
   ],
   exports: [
     TimelineDemoComponent

src/app/components/timeline/overview/timelinedemo.component.html

@@ -11,7 +11,8 @@
               <div class="row">
                 <div class="col-md-6">
                   <h6>Basic</h6>
-                  <tl-timeline [data]="dataBasic" [height]="'300px'" [keyTitle]="'title'" [keyText]="'text'"></tl-timeline>
+                  <tl-button [text]="'Change Item'" (click)="changItem()"></tl-button>
+                  <tl-timeline [data]="dataBasic" [clearOnUpdateData]="true" [height]="'300px'" [keyTitle]="'title'" [keyText]="'text'"></tl-timeline>
                   <br>
                   <textarea highlight-js [options]="{'tabReplace': ''}" [lang]="'html'">
                     <tl-timeline [data]="dataBasic" [height]="'300px'" [keyTitle]="'title'" [keyText]="'text'"></tl-timeline>

src/app/components/timeline/overview/timelinedemo.component.ts

@@ -832,5 +832,15 @@ export class TimelineDemoComponent {
     this.dataTableProperties = json.dataProperties;
   }
 
+
+  changItem() {
+    this.dataBasic = this.dataBasic.map( (data, index) => {
+      if (data.title === 'Dr. Gregory House 1') {
+        data.text = data.text + index;
+      }
+      return data;
+    });
+  }
+
 }