@chat21/chat21-ionic 3.0.82-rc.7 → 3.0.82

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.ts

@@ -9,7 +9,7 @@ import { LoaderPreviewPage } from 'src/app/pages/loader-preview/loader-preview.p
 // Services 
 import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
 // utils
-import { TYPE_MSG_TEXT, TYPE_SUPPORT_GROUP } from 'src/chat21-core/utils/constants';
+import { TYPE_MSG_TEXT } from 'src/chat21-core/utils/constants';
 // Models
 import { UploadModel } from 'src/chat21-core/models/upload';
 import { Observable } from 'rxjs';
@@ -62,11 +62,15 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   public messageString: string;
   public HAS_PASTED: boolean = false;
   public toastMsg: string;
+  public TEXAREA_PLACEHOLDER: string;
+  public LONG_TEXAREA_PLACEHOLDER: string;
+  public SHORT_TEXAREA_PLACEHOLDER: string;
+  public SHORTER_TEXAREA_PLACEHOLDER: string;
+  public currentWindowWidth: any;
   private logger: LoggerService = LoggerInstance.getInstance();
   public countClicks: number = 0;
+  public IS_SUPPORT_GROUP_CONVERSATION: boolean;
   public IS_ON_MOBILE_DEVICE: boolean;
-
-  TYPE_SUPPORT_GROUP = TYPE_SUPPORT_GROUP;
   TYPE_MSG_TEXT = TYPE_MSG_TEXT;
   msg: string
 
@@ -84,26 +88,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   addWhiteSpaceBefore: boolean;
   emojiPerLine: number = 9
   emojiColor: string ="#3880ff"
-  emojiiCategories = [ 'recent', 'people', 'nature', 'activity'] //, 'custom']
-
-  customEmojis = [
-    {
-      name: 'Customer-Service',
-      shortNames: ['customer'],
-      text: 'ee',
-      emoticons: [],
-      keywords: ['github'],
-      imageUrl: 'https://tiledesk.com/wp-content/uploads/2022/11/Customer-Service.png',
-    },
-    {
-      name: 'Octocat',
-      shortNames: ['octocat'],
-      text: 'rr',
-      emoticons: [],
-      keywords: ['github'],
-      imageUrl: 'https://tiledesk.com/wp-content/uploads/2022/11/FAQ-Chatbot.png',
-    }
-  ];
+  emojiiCategories = [ 'recent', 'people', 'nature', 'activity']
   /**
    * Constructor
    * @param chooser 
@@ -132,8 +117,15 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     if (this.areVisibleCAR === false) {
       this.emojiPerLine = 7
     }
+    // this.events.subscribe((cannedmessage) => {
+    //   this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA] events.subscribe cannedmessage ", cannedmessage);
+    // })
 
+    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] LONG_TEXAREA_PLACEHOLDER ", this.LONG_TEXAREA_PLACEHOLDER);
+    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] SHORT_TEXAREA_PLACEHOLDER ", this.SHORT_TEXAREA_PLACEHOLDER);
+    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] SHORTER_TEXAREA_PLACEHOLDER ", this.SHORTER_TEXAREA_PLACEHOLDER);
     this.listenToNewCannedResponseCreated()
+    this.getWindowWidth();
     this.isOnMobileDevice()
   }
 
@@ -154,8 +146,15 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       // this.SHORT_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORT')
       // this.SHORTER_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORTER')
 
+      this.TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORT')
+
     }
 
+    if (this.conversationWith.startsWith("support-group")) {
+      this.IS_SUPPORT_GROUP_CONVERSATION = true
+    } else {
+      this.IS_SUPPORT_GROUP_CONVERSATION = false
+    }
     // this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges supportMode ', this.supportMode)
     // this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges disableTextarea ', this.disableTextarea)
     // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges DROP EVENT ", this.dropEvent);
@@ -206,6 +205,36 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     }
   }
 
+
+  getWindowWidth(): any {
+    this.currentWindowWidth = window.innerWidth;
+
+
+    // if (this.currentWindowWidth >= 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.LONG_TEXAREA_PLACEHOLDER;
+    //   this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] currentWindowWidth', this.currentWindowWidth, ' - DISPLAY LONG_TEXAREA_PLACEHOLDER ');
+    // } else if (this.currentWindowWidth >= 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+    // } else if (this.currentWindowWidth < 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+    // } else if (this.currentWindowWidth < 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
+    // } else if (!this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+    // }
+
+    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] checkPlatformIsMobile() ", checkPlatformIsMobile());
+    if (checkPlatformIsMobile() === true) {
+
+      if (this.currentWindowWidth <= 430 && this.currentWindowWidth >= 274) {
+        this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+
+      } else if (this.currentWindowWidth <= 273) {
+        this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
+      }
+    }
+  }
+
   // -------------------------------------------------------------------------------------------
   // Change the placeholder of the 'send message' textarea according to the width of the window  
   // -------------------------------------------------------------------------------------------
@@ -213,6 +242,37 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   onResize(event) {
     // this.getIfTexareaIsEmpty('onResize')
     //  console.log("[CONVS-DETAIL][MSG-TEXT-AREA]  event.target.innerWidth; ", event.target.innerWidth);
+
+
+
+    // if (event.target.innerWidth >= 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.LONG_TEXAREA_PLACEHOLDER;
+    // } else if (event.target.innerWidth >= 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+    // } else if (event.target.innerWidth < 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+    // } else if (event.target.innerWidth < 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
+    // } else if (!this.conversationWith.startsWith("support-group")) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+    // }
+
+    // this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] checkPlatformIsMobile() ', checkPlatformIsMobile());
+    if (checkPlatformIsMobile() === true) {
+
+      if (event.target.innerWidth <= 430 && event.target.innerWidth >= 274) {
+        this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+      } else if (this.currentWindowWidth <= 273) {
+        this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
+      }
+
+    }
+
+    // if (checkPlatformIsMobile && event.target.innerWidth <= 430) {
+    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
+    // } else if (checkPlatformIsMobile && event.target.innerWidth > 430) { 
+    //   this.TEXAREA_PLACEHOLDER = this.LONG_TEXAREA_PLACEHOLDER;
+    // }
   }
 
 
@@ -636,7 +696,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
   @HostListener('document:keydown', ['$event'])
   handleKeyboardEvent(event: KeyboardEvent) {
-    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] handleKeyboardEvent  event.key ", event);
+    this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] handleKeyboardEvent  event.key ", event);
     // Note: on mac keyboard "metakey" matches "cmd"
     
     if (event.key === 'Enter' && event.altKey || event.key === 'Enter' && event.ctrlKey || event.key === 'Enter' && event.metaKey) {

package/src/app/components/conversation-detail/option-header/option-header.component.html

@@ -0,0 +1,13 @@
+<ion-header no-border class="ion-no-border">
+  <ion-toolbar>
+    
+    <ion-buttons slot="start">
+      <ion-button ion-button (click)="onBackButtonHandler()">
+        <ion-icon slot="icon-only" name="arrow-back-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+
+    <ion-title> {{headerTitle}}</ion-title>
+
+  </ion-toolbar>
+</ion-header>

package/src/app/components/{conversations-list/header-conversations-list-archived/header-conversations-list-archived.component.spec.ts → conversation-detail/option-header/option-header.component.spec.ts}

@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { IonicModule } from '@ionic/angular';
 
-import { HeaderConversationsListArchived } from './header-conversations-list-archived.component';
+import { OptionHeaderComponent } from './option-header.component';
 
 describe('OptionHeaderComponent', () => {
-  let component: HeaderConversationsListArchived;
-  let fixture: ComponentFixture<HeaderConversationsListArchived>;
+  let component: OptionHeaderComponent;
+  let fixture: ComponentFixture<OptionHeaderComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ HeaderConversationsListArchived ],
+      declarations: [ OptionHeaderComponent ],
       imports: [IonicModule.forRoot()]
     }).compileComponents();
 
-    fixture = TestBed.createComponent(HeaderConversationsListArchived);
+    fixture = TestBed.createComponent(OptionHeaderComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   }));

package/src/app/components/{conversations-list/header-conversations-list-archived/header-conversations-list-archived.component.ts → conversation-detail/option-header/option-header.component.ts}

@@ -2,14 +2,13 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 
 @Component({
-  selector: 'header-conversations-list-archived',
-  templateUrl: './header-conversations-list-archived.component.html',
-  styleUrls: ['./header-conversations-list-archived.component.scss'],
+  selector: 'app-option-header',
+  templateUrl: './option-header.component.html',
+  styleUrls: ['./option-header.component.scss'],
 })
-export class HeaderConversationsListArchived implements OnInit {
+export class OptionHeaderComponent implements OnInit {
 
   @Input() headerTitle: string
-  @Input() isMobile: boolean;
   @Output() onBackButton = new EventEmitter<boolean>();
   static UserPresenceComponent: any[] | any;
 

package/src/app/components/conversation-info/info-content/info-content.component.html

@@ -1,20 +1,16 @@
 <ion-content [style.display]="openInfoConversation ? 'block' : 'none'">
 
-  <app-info-direct
-    [style.display]="panelType === 'direct-panel' ? 'content' : 'none'"
+  <app-info-direct *ngIf="panelType === 'direct-panel'" 
     [member]=member 
     [translationMap]=translationMap
     [conversationWith]= "conversationWith">
   </app-info-direct>
 
-  <app-info-group
-    [style.display]="panelType === 'group-panel' && IS_GROUP_PANEL === true ? 'content' : 'none'"
-    [groupDetail]="groupDetail"
-    [isMobile]="isMobile">
+  <app-info-group *ngIf="panelType === 'group-panel' && IS_GROUP_PANEL === true"
+    [groupDetail]="groupDetail">
   </app-info-group>
 
-  <app-info-support-group
-    [style.display]="panelType === 'support-group-panel' ? 'block' : 'none'"
+  <app-info-support-group *ngIf="panelType === 'support-group-panel'"
     [urlConversationSupportGroup]="urlConversationSupportGroup">
   </app-info-support-group>
 

package/src/app/components/conversation-info/info-content/info-content.component.ts

@@ -28,12 +28,11 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 
 export class InfoContentComponent implements OnInit {
   @Input() openInfoConversation: boolean;
+  @Input() translationMap: Map<string, string>;
   // @Input() member: UserModel;
   @Input() loggedUser: UserModel
   @Input() tenant: string
-  @Input() groupDetail: any;
-  @Input() isMobile: boolean;
-  @Input() translationMap: Map<string, string>;
+  @Input() groupDetail: any
 
 
   public member: UserModel;
@@ -63,6 +62,9 @@ export class InfoContentComponent implements OnInit {
     public tiledeskService: TiledeskService
 
   ) {
+    this.logger.log('[INFO-CONTENT-COMP] HELLO (CONSTUCTOR) !!!!!');
+    // this.loggedUser = this.authService.getCurrentUser();
+    // this.logger.log('INFO-CONTENT-COMP loggedUser: ', this.loggedUser);
 
     const appconfig = appConfigProvider.getConfig()
     // this.tenant = appconfig.tenant;
@@ -73,6 +75,7 @@ export class InfoContentComponent implements OnInit {
     this.route.paramMap.subscribe(params => {
       this.logger.log('[INFO-CONTENT-COMP] initialize params: ', params);
       this.conversationWith = params.get('IDConv');
+      this.logger.log('[INFO-CONTENT-COMP] - paramMap.subscribe conversationWith: ', this.conversationWith);
       this.conversationWithFullname = params.get('FullNameConv');
       this.conv_type = params.get('Convtype');
 

package/src/app/components/conversation-info/info-direct/info-direct.component.html

@@ -8,7 +8,15 @@
         <div class="image-profile">
           <app-avatar-profile [itemAvatar]='member'></app-avatar-profile>
         </div>
-        
+
+        <div class="user-presence">
+          <app-user-presence 
+            [idUser]='member.uid'
+            [translationMap]='translationMap' 
+            [borderColor]='borderColor'
+            [fontColor]='fontColor'>
+          </app-user-presence>
+        </div>
         <!-- -> {{member |json}} -->
         <div class="info-profile">
           <div class="name">
@@ -29,12 +37,10 @@
 
 
 
-  <div class="info-accordion-container">
-    <app-advanced-info-accordion class="info-accordion"
-      [advancedAttributes]="advancedAttributes"
-      [translationMap]="translationMap">
-    </app-advanced-info-accordion>
-  </div>
+  <app-advanced-info-accordion 
+  [advancedAttributes]="advancedAttributes"
+  [translationMap]="translationMap">
+  </app-advanced-info-accordion>
 
 
 </ion-content>

package/src/app/components/conversation-info/info-direct/info-direct.component.scss

@@ -59,27 +59,4 @@
 .member-email  {
     text-align: center;
     margin-top: 8px;
-}
-
-.info-accordion-container{
-    margin-left: 8px !important;
-    margin-right: 8px !important;
-
-    margin-top: 12px !important;
-    background-color: #fff;
-    border-radius: 4px;
-    box-shadow: rgba(0, 27, 71, 0.08) 0px 3px;
-
-    display: flex;
-    .info-accordion{
-        padding: 16px 12px !important;
-        cursor: pointer;
-        position: relative;
-        transition: all 0.2s ease-in-out 0s;
-
-        &:hover{
-            background-color: #f5f7f9;
-        }
-    }
-
 }

package/src/app/components/conversation-info/info-direct/info-direct.component.ts

@@ -15,6 +15,8 @@ export class InfoDirectComponent implements OnInit, AfterViewInit, OnChanges {
   @Input() translationMap: Map<string, string>;
   @Input() conversationWith: string;
 
+  borderColor = '#ffffff';
+  fontColor = '#949494';
   advancedAttributes: Array<any> = [];
   private logger: LoggerService = LoggerInstance.getInstance();
 
@@ -26,6 +28,8 @@ export class InfoDirectComponent implements OnInit, AfterViewInit, OnChanges {
 
   ngOnInit() {
     this.logger.log('InfoDirectComponent - ngOnInit');
+  
+    this.initialize();
   }
 
   ngAfterViewInit() {
@@ -39,11 +43,12 @@ export class InfoDirectComponent implements OnInit, AfterViewInit, OnChanges {
     this.logger.log('InfoDirectComponent - ngOnDestroy ' );
     // this.unsubscribe$.next();
     // this.unsubscribe$.complete();
+   
+
   }
 
   ngOnChanges(){
     if(this.member){
-      this.initialize();
       this.member.imageurl = this.imageRepoService.getImagePhotoUrl(this.conversationWith)
     }
   }

package/src/app/components/conversation-info/info-group/info-group.component.html

@@ -1,51 +1,115 @@
 <!-- <pre style="font-size: 12px;"> {{ groupDetail | json }} </pre>  -->
 
 <ion-content class="group-profile">
-    <ion-card>
-      <div class="chat21-box-profile chat21-box">
-        <div class="chat21-content">
-          <div class="image-profile">
-            <app-avatar-profile [itemAvatar]="groupDetail"></app-avatar-profile>
-          </div>
-  
-          <div class="info-profile">
-            <div class="name">
-              <span class="read">{{groupDetail?.name}}</span>
-            </div>
+  <ion-card class="first-card">
+    <div class="chat21-box-profile chat21-box">
+      <div class="chat21-content">
+        <div class="image-profile">
+          <app-avatar-profile [itemAvatar]="groupDetail"></app-avatar-profile>
+        </div>
+
+        <div class="info-profile">
+          <div class="name">
+            <span class="read">{{groupDetail?.name}}</span>
           </div>
         </div>
-  
+        <!-- <div class="member-email">
+          <a [href]="'mailto:' + member.email + '?Subject='">
+            {{member.email}}
+          </a>
+        </div> -->
       </div>
-    </ion-card>
-    
-    <ion-list id="fake-members-list" *ngIf="displaySkeletonScreen">
-      <ion-item lines="none" *ngFor="let fake of generateFake(membersObjectLength)" style="margin-left:-3px">
-        <ion-avatar slot="start">
-          <ion-skeleton-text animated style="width: 44px; height: 44px;"></ion-skeleton-text>
-        </ion-avatar>
-        <ion-label>
-          <h3>
-            <ion-skeleton-text animated style="width: 60%;position: relative;top: 2px;height: 16px;"></ion-skeleton-text>
-          </h3>
-        </ion-label>
-      </ion-item>
-    </ion-list>
-  
-    <!-- <pre style="font-size: 8px;"> {{member_array | json }} </pre>  <pre style="font-size: 8px;"> {{displaySkeletonScreen}} </pre> -->
-    <ion-list id="members-list" *ngIf="groupDetail?.member_array?.length > 0 && !displaySkeletonScreen">
-      <ion-item lines="none" *ngFor='let member of groupDetail?.member_array'>
-        <ion-avatar  slot="start" style="margin-right: 12px;"> 
-          <app-avatar-profile [itemAvatar]=member></app-avatar-profile>
-          <div class="status-icon-container" [class.mobile]="isMobile" >
-            <svg xmlns="http://www.w3.org/2000/svg" [class.online]="(member?.userOnline)" height="15"  width="15" viewBox="0 0 24 24" fill="#000000"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
-          </div>
-        </ion-avatar>
-        <ion-label>
-          <h3>
-            {{ member.fullname }}
-          </h3>
-        </ion-label>
-      </ion-item>
-    </ion-list>
+
+    </div>
+  </ion-card>
   
-  </ion-content>
+  <ion-list id="fake-members-list" *ngIf="displaySkeletonScreen">
+    <ion-item lines="none" *ngFor="let fake of generateFake(membersObjectLength)" style="margin-left:-3px">
+      <ion-avatar slot="start">
+        <ion-skeleton-text animated style="width: 44px; height: 44px;"></ion-skeleton-text>
+      </ion-avatar>
+      <ion-label>
+        <h3>
+          <ion-skeleton-text animated style="width: 60%;position: relative;top: 2px;height: 16px;"></ion-skeleton-text>
+        </h3>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+
+  <!-- <pre style="font-size: 8px;"> {{member_array | json }} </pre>  <pre style="font-size: 8px;"> {{displaySkeletonScreen}} </pre> -->
+  <ion-list id="members-list" *ngIf="groupDetail?.member_array?.length > 0 && !displaySkeletonScreen">
+    <ion-item lines="none" *ngFor='let member of groupDetail?.member_array'>
+      <ion-avatar  slot="start" style="margin-right: 12px;"> 
+        <app-avatar-profile [itemAvatar]=member></app-avatar-profile>
+        <div class="user-online" [ngStyle]="{ 'background-color':(member?.userOnline)?'#24d066':'#db4437' }"></div>
+      </ion-avatar>
+      <ion-label>
+        <h3>
+          {{ member.fullname }}
+        </h3>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+
+
+
+
+  <div *ngIf="groupDetail" style="display:none">
+    <div *ngFor='let member of groupDetail?.member_array'>
+      <ion-grid>
+        <ion-row class="ion-align-items-center">
+          <ion-col size="3">
+            <div class="member-profile">
+              <!-- (click)="copyLoggedUserUID({member.userid)" -->
+              <!-- <div class="avatar-container" [tooltip]="useruidTooltip" [options]="tooltipOptions" placement="top"
+                content-type="template" > -->
+              <app-avatar-profile [itemAvatar]=member></app-avatar-profile>
+              <!-- </div> -->
+              <!-- <ng-template #useruidTooltip>
+                <span> {{member.userid}}</span>
+              </ng-template> -->
+
+              <div class="user-online" [ngStyle]="{ 'background-color':(member?.userOnline)?'#24d066':'#db4437' }">
+              </div>
+            </div>
+
+
+          </ion-col>
+          <ion-col>
+            <ion-label>
+              {{ member.fullname }}
+            </ion-label>
+
+            <!-- <div class="info-group-member-email">
+              <a [href]="'mailto:' + member.email + '?Subject='">
+                {{member.email}}
+              </a>
+            </div> -->
+
+
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+      <!-- </ion-avatar>
+      </ion-item> -->
+      <!-- {{member | json}}
+    
+    >>>  {{member?.avatar}} -->
+    </div>
+  </div>
+
+  <!-- <ion-list> 
+
+
+  </ion-list> -->
+
+  <!-- </div> -->
+
+
+  <!-- <app-advanced-info-accordion 
+  [advancedAttributes]="advancedAttributes"
+  [translationMap]="translationMap">
+
+  </app-advanced-info-accordion> -->
+
+</ion-content>