{"__symbolic":"module","version":4,"metadata":{"MessagingModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ChatBoxComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":4},{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":12,"character":4},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":14,"character":4}],"exports":[{"__symbolic":"reference","name":"ChatBoxComponent"}],"providers":[]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"value":{"ngModule":{"__symbolic":"reference","name":"MessagingModule"},"providers":[{"__symbolic":"reference","name":"MessagingService"},{"provide":"config","useValue":{"__symbolic":"reference","name":"config"}}]}}}},"ChatBoxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"selector":"lib-chat-box","template":"<div class=\"chatbox\" #chatContainer>\n\n  <div *ngIf=\"recipient_display_name && !isFullScreenMode\" class=\"chat-header\">\n    <span class=\"avatar\">\n        <mat-icon *ngIf=\"!recipient_avatar_src\" class=\"avatar__icon\">person</mat-icon>\n        <img *ngIf=\"recipient_avatar_src\" [src]=\"recipient_avatar_src\" class=\"avatar__img\">\n    </span>\n    <span class=\"name\">\n      {{recipient_display_name}}\n    </span>\n  </div>\n\n  <div class=\"messages\" #msgsContainer (scroll)=\"onScroll($event)\">\n    <div *ngFor=\"let group of groupedMessageList\">\n      <div class=\"messages-group\">\n        <div class=\"messages-group-label\">\n          <div class=\"hr-sect\" *ngIf=\"isToday(group[0]?.created_at)\">\n            <span style=\"padding: 0 10px;\">{{group[0]?.created_at | date: 'shortTime'}}</span>\n          </div>\n          <div class=\"hr-sect\" *ngIf=\"isYesterday(group[0]?.created_at)\">\n            <span style=\"padding: 0 10px;\">Yesterday {{group[0]?.created_at | date: 'shortTime'}}</span>\n          </div>\n          <div class=\"hr-sect\" *ngIf=\"isWeekDay(group[0]?.created_at)\">\n            <span style=\"padding: 0 10px;\">{{group[0]?.created_at | date: 'EEEE'}} {{group[0]?.created_at | date: 'shortTime'}}</span>\n          </div>\n          <div class=\"hr-sect\" *ngIf=\"!isToday(group[0]?.created_at) &&\n                    !isYesterday(group[0]?.created_at) &&\n                    !isWeekDay(group[0]?.created_at)\">\n            <span style=\"padding: 0 10px;\"> {{group[0]?.created_at | date: 'MMM d, y, h:mm a'}}</span>\n          </div>\n        </div>\n        <div tabindex=\"1\" class=\"message-div\" #msgDiv *ngFor=\"let message of group\">\n          <div class=\"text-icon\" [class.self-messages]=\"message.is_self_message\">\n        <span class=\"avatar\" *ngIf=\"!message.is_self_message\">\n        <mat-icon class=\"avatar__icon\">person</mat-icon>\n        <img *ngIf=\"recipient_avatar_src\" [src]=\"recipient_avatar_src\" class=\"avatar__img\">\n      </span>\n            <div>\n              <div class=\"sender-name\" *ngIf=\"message.is_self_message && this.showSenderName\">\n                {{message.sender_display_name}}\n              </div>\n              <p class=\"message-item\">\n                {{message.content}}\n              </p>\n            </div>\n            <span class=\"avatar\" style=\"vertical-align: middle;\" *ngIf=\"message.is_self_message\">\n          <mat-icon>person</mat-icon>\n          <img *ngIf=\"sender_avatar_src\" [src]=\"sender_avatar_src\" class=\"avatar__img\">\n      </span>\n\n            <!--<div class=\"timeform\">-->\n            <!--<mat-icon>date</mat-icon> <span class=\"timestamp\">at {{message.created_at | date : 'dd/MM/yyyy' }}</span>-->\n            <!--</div>-->\n          </div>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  <div class=\"input-container\">\n    <mat-form-field>\n    <textarea #msgInput matInput\n              cdkTextareaAutosize\n              #autosize=\"cdkTextareaAutosize\"\n              cdkAutosizeMinRows=\"2\"\n              cdkAutosizeMaxRows=\"5\"\n              (keyup.enter)=\"reply()\" placeholder=\"Type a message..\" [(ngModel)]=\"replyContent\">\n    </textarea>\n    </mat-form-field>\n\n    <div class=\"button-wrap\">\n      <button mat-raised-button\n              color=\"primary\"\n              class=\"replyBtn\"\n              (click)=\"reply()\">\n        Send\n      </button>\n    </div>\n  </div>\n\n</div>\n","styles":[":root{--theme-color:#3498db;--window-width:90%}.chatbox{width:var(--window-width,90%);display:flex;flex-direction:column;margin:0 auto;border-radius:5px 5px 0 0;background-color:#fff;box-shadow:0 2px 4px 0 rgba(0,0,0,.2)}.chatbox .chat-header{height:120px;padding:20px;text-align:center;border-radius:5px 5px 0 0;background:#3498db;color:#fff}.chatbox .chat-header .avatar{margin:0 0 10px;width:55px;min-width:55px;height:55px;min-height:55px;text-align:center!important;background-color:#fff!important;vertical-align:middle;color:#000!important}.chatbox .chat-header .name{font-size:20px;font-style:oblique;font-weight:700;display:block}.chatbox .messages{flex:1;overflow:auto;padding:50px 16px 6px;background-color:#fafafa;box-shadow:inset 0 2px 2px rgba(0,0,0,.1)}.chatbox .messages .messages-group{margin-bottom:10px}.chatbox .messages .messages-group .messages-group-label{text-align:center;margin-bottom:10px}.chatbox .messages .messages-group .messages-group-label .hr-sect{display:flex;flex-basis:100%;align-items:center;margin:8px 0}.chatbox .messages .messages-group .messages-group-label .hr-sect::after,.chatbox .messages .messages-group .messages-group-label .hr-sect::before{content:\"\";flex-grow:1;background:rgba(0,0,0,.1);height:1.5px;font-size:0;line-height:0;margin:0 8px}.chatbox .messages .messages-group .message-div{padding:1px;outline:0}.chatbox .messages .message-item{background-color:#ccc;padding:8px;border-radius:14px;margin-top:0;margin-bottom:0}.chatbox .messages .text-icon{display:flex;flex-direction:row;justify-content:flex-start}.chatbox .messages .self-messages{justify-content:flex-end}.chatbox .messages .self-messages .sender-name{font-size:14px;font-weight:700;margin:2px 5px;text-align:right}.chatbox .messages .self-messages p{color:#fff;background-color:var(--theme-color,#3498db);white-space:pre-line}.chatbox .messages .avatar{margin:0 5px;width:25px;min-width:25px;height:25px;min-height:25px;text-align:center!important;background-color:#fff!important;vertical-align:middle;color:#000!important}.chatbox .input-container{display:flex;flex-direction:row;align-items:center;width:100%;margin:0 auto;background-color:#fff;box-shadow:0 2px 4px 0 rgba(0,0,0,.2);border-radius:0 0 5px 5px;padding:8px;vertical-align:middle;border-top:1px solid #ebebeb}.chatbox .input-container mat-form-field{flex:1}.chatbox .input-container mat-form-field textarea{width:100%}.chatbox .input-container .button-wrap{margin:4px}.chatbox .input-container .button-wrap button{width:70px;margin-left:20px}"]}]}],"members":{"msgDivs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":22,"character":3},"arguments":["msgDiv"]}]}],"msgsContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":23,"character":3},"arguments":["msgsContainer",{"static":false}]}]}],"chatContainerElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":24,"character":3},"arguments":["chatContainer",{"static":false}]}]}],"sender_avatar_src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"recipient_avatar_src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"recipient_display_name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"donor_id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"user_display_name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"user_id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"recipient_user_id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"msgInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":48,"character":3},"arguments":["msgInput",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"MessagingService"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadMore":[{"__symbolic":"method"}],"loadMessages":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"addNewMessage":[{"__symbolic":"method"}],"addNewMessagesPage":[{"__symbolic":"method"}],"groupByTime":[{"__symbolic":"method"}],"reply":[{"__symbolic":"method"}],"focusOnInputAgain":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}],"isToday":[{"__symbolic":"method"}],"isYesterday":[{"__symbolic":"method"}],"isWeekDay":[{"__symbolic":"method"}],"getDayName":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"MessagingService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":6,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":29,"character":70},"arguments":["config"]}]],"parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":29,"character":28},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":29,"character":59},{"__symbolic":"reference","name":"any"}]}],"initialize":[{"__symbolic":"method"}],"setTotalUnReadMsgsCount":[{"__symbolic":"method"}],"setUnReadMsgsCountsArray":[{"__symbolic":"method"}],"incrementTotalUnReadMsgsCount":[{"__symbolic":"method"}],"list":[{"__symbolic":"method"}],"send_message":[{"__symbolic":"method"}],"startLiveChat":[{"__symbolic":"method"}],"initializeAutoReconnectingWebSocket":[{"__symbolic":"method"}],"setWebSocketCallbacks":[{"__symbolic":"method"}],"initializeUnReadMessagesCounts":[{"__symbolic":"method"}],"setNotificationCallback":[{"__symbolic":"method"}],"removeOnMessageListener":[{"__symbolic":"method"}],"closeLiveChat":[{"__symbolic":"method"}],"readAll":[{"__symbolic":"method"}],"unreadLatest":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ɵa":{"parse":{"dateInput":"LL"},"display":{"dateInput":"LL","monthYearLabel":"MMM YYYY","dateA11yLabel":"LL","monthYearA11yLabel":"MMMM YYYY"}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":44,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/material","name":"MatDatepickerModule","line":46,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDialogModule","line":47,"character":4},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":48,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":49,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCardModule","line":50,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":51,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatMenuModule","line":52,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":53,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatToolbarModule","line":54,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":55,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatFormFieldModule","line":56,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatInputModule","line":57,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSelectModule","line":58,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSortModule","line":59,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTableModule","line":60,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCheckboxModule","line":61,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatAutocompleteModule","line":62,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatNativeDateModule","line":63,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatPaginatorModule","line":64,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSidenavModule","line":65,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatListModule","line":66,"character":4},{"__symbolic":"reference","module":"@angular/material/core","name":"MatRippleModule","line":67,"character":4},{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":68,"character":4},{"__symbolic":"reference","module":"@angular/platform-browser/animations","name":"BrowserAnimationsModule","line":69,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCardModule","line":70,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDialogModule","line":71,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":72,"character":4}],"exports":[{"__symbolic":"reference","module":"@angular/material","name":"MatDatepickerModule","line":75,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDialogModule","line":76,"character":4},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":77,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCardModule","line":78,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":79,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatMenuModule","line":80,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":81,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatToolbarModule","line":82,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":83,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatFormFieldModule","line":84,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatInputModule","line":85,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSelectModule","line":86,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSortModule","line":87,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTableModule","line":88,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCheckboxModule","line":89,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatAutocompleteModule","line":90,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatNativeDateModule","line":91,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatPaginatorModule","line":92,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSidenavModule","line":93,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatListModule","line":94,"character":4},{"__symbolic":"reference","module":"@angular/material/core","name":"MatRippleModule","line":95,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDatepickerModule","line":96,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"NativeDateModule","line":97,"character":4}],"declarations":[],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"DateAdapter","line":102,"character":14},"useClass":{"__symbolic":"reference","module":"@angular/material-moment-adapter","name":"MomentDateAdapter","line":102,"character":37},"deps":[{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_LOCALE","line":102,"character":63}]},{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_FORMATS","line":104,"character":14},"useValue":{"__symbolic":"reference","name":"ɵa"}}]}]}],"members":{}}},"origins":{"MessagingModule":"./lib/messaging.module","ChatBoxComponent":"./lib/chat-box/chat-box.component","MessagingService":"./lib/chat-box/messaging.service","ɵa":"./lib/material-imports/material-imports.module","ɵb":"./lib/material-imports/material-imports.module"},"importAs":"zoriakinc-messaging"}