import { AppOrientation } from './../../app.constant';
import {
ChangeDetectorRef, Component, ElementRef, EventEmitter,
Inject, Input, NgZone, OnDestroy, OnInit, Output, Renderer2, ViewChild
} from '@angular/core';
import { NavigationExtras, Router } from '@angular/router';
import { ApplicationHeaderKebabMenuComponent } from '@app/app/components/application-header/application-header-kebab-menu.component';
import { TncUpdateHandlerService } from '@app/services/handlers/tnc-update-handler.service';
import { AppVersion } from '@ionic-native/app-version/ngx';
import { MenuController, Platform, PopoverController } from '@ionic/angular';
import { Events } from '@app/util/events';
import { TranslateService } from '@ngx-translate/core';
import { combineLatest, EMPTY, Observable, Subscription } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import {
CachedItemRequestSourceFrom,
CorrelationData, DownloadEventType, DownloadProgress, DownloadService,
EventNamespace, EventsBusService, NotificationService as PushNotificationService,
Profile, ProfileService, ProfileType,
ServerProfile, SharedPreferences, UserFeedStatus
} from 'sunbird-sdk';
import {
AppThemes, EventTopics, GenericAppConfig, PreferenceKey,
ProfileConstants, RouterLinks, SwitchableTabsConfig,AppMode
} from '../../../app/app.constant';
import {
ActivePageService, AppGlobalService,
AppHeaderService, CommonUtilService,
CorReleationDataType, Environment,
ID, InteractSubtype, InteractType, NotificationService, PageId, TelemetryGeneratorService, UtilityService
} from '../../../services';
import { ToastNavigationComponent } from '../popups/toast-navigation/toast-navigation.component';
declare const cordova;
@Component({
selector: 'app-application-header',
templateUrl: './application-header.component.html',
styleUrls: ['./application-header.component.scss'],
})
export class ApplicationHeaderComponent implements OnInit, OnDestroy {
downloadProgressMap: { [key: string]: number } = {};
selectedLanguage: string;
@Input() headerConfig: any = false;
@Output() headerEvents = new EventEmitter();
@Output() sideMenuItemEvent = new EventEmitter();
appLogo?: string;
appName?: string;
versionName?: string;
versionCode?: string;
decreaseZindex = false;
isRtl: boolean;
isLoggedIn = false;
isDownloadingActive = false;
showDownloadingIcon = false;
networkSubscription: Subscription;
isUnreadNotification = false;
menuSide = 'left';
profile: Profile;
managedProfileList$: Observable<ServerProfile[]> = EMPTY;
userAvatarConfig = { size: 'large', isBold: true, isSelectable: false, view: 'horizontal' };
appTheme = AppThemes.DEFAULT;
unreadNotificationsCount = 0;
isUpdateAvailable = false;
currentSelectedTabs: string;
isDarkMode:boolean;
showReports: any;
showLoginButton = false;
notificationCount = {
unreadCount : 0
};
isTablet = false;
orientationToSwitch = AppOrientation.LANDSCAPE;
// Font Increase Decrease Variables
fontSize: any;
defaultFontSize = 16;
isGuestUser = true;
guestUserDetails;
showYearOfBirthPopup = false;
public isIOS = false;
@ViewChild('increaseFontSize') increaseFontSize: ElementRef;
@ViewChild('decreaseFontSize') decreaseFontSize: ElementRef;
@ViewChild('resetFontSize') resetFontSize: ElementRef;
constructor(
@Inject('SHARED_PREFERENCES') private preference: SharedPreferences,
@Inject('DOWNLOAD_SERVICE') private downloadService: DownloadService,
@Inject('NOTIFICATION_SERVICE') private pushNotificationService: PushNotificationService,
@Inject('EVENTS_BUS_SERVICE') private eventsBusService: EventsBusService,
@Inject('PROFILE_SERVICE') private profileService: ProfileService,
public menuCtrl: MenuController,
private commonUtilService: CommonUtilService,
private events: Events,
private appGlobalService: AppGlobalService,
private appVersion: AppVersion,
private utilityService: UtilityService,
private changeDetectionRef: ChangeDetectorRef,
private notification: NotificationService,
private translate: TranslateService,
private platform: Platform,
private router: Router,
private ngZone: NgZone,
private telemetryGeneratorService: TelemetryGeneratorService,
private activePageService: ActivePageService,
private popoverCtrl: PopoverController,
private tncUpdateHandlerService: TncUpdateHandlerService,
private appHeaderService: AppHeaderService,
private renderer: Renderer2
) {
this.setLanguageValue();
this.events.subscribe('onAfterLanguageChange:update', (res) => {
if (res && res.selectedLanguage) {
this.setLanguageValue();
}
});
this.events.subscribe('onPreferenceChange:showReport', res => {
this.showReports = res;
});
this.getUnreadNotifications();
this.isTablet = window['isTablet'];
this.events.subscribe(EventTopics.ORIENTATION, () => {
this.checkCurrentOrientation();
});
}
ngOnInit() {
this.setAppLogo();
this.setAppVersion();
this.events.subscribe('user-profile-changed', () => {
this.setAppLogo();
});
this.events.subscribe('app-global:profile-obj-changed', () => {
this.setAppLogo();
});
this.events.subscribe(EventTopics.NOTIFICATION_REFRESH, () => {
this.getUnreadNotifications();
});
this.events.subscribe('notification-status:update', (eventData) => {
this.isUnreadNotification = eventData.isUnreadNotifications;
});
this.translate.onLangChange.subscribe((params) => {
this.ngZone.run(() => {
if (params.lang === 'ur') {
this.isRtl = true;
this.menuSide = 'right';
} else {
this.menuSide = 'left';
this.isRtl = false;
}
});
});
this.events.subscribe('header:decreasezIndex', () => {
this.decreaseZindex = true;
});
this.events.subscribe('header:setzIndexToNormal', () => {
this.decreaseZindex = false;
});
this.listenDownloads();
this.listenNotifications();
this.networkSubscription = this.commonUtilService.networkAvailability$.subscribe((available: boolean) => {
this.setAppLogo();
});
this.appTheme = document.querySelector('html').getAttribute('data-theme');
this.preference.getString('data-mode').subscribe((val)=>{
this.isDarkMode = val === AppMode.DARKMODE;
});
this.checkForAppUpdate().then();
}
ngAfterViewInit() {
this.changeFontSize('reset');
}
private setAppVersion(): any {
this.utilityService.getBuildConfigValue(GenericAppConfig.VERSION_NAME)
.then(vName => {
this.versionName = vName;
this.utilityService.getBuildConfigValue(GenericAppConfig.VERSION_CODE)
.then(vCode => {
this.versionCode = vCode;
})
.catch(error => {
console.error('Error in getting app version code', error);
});
})
.catch(error => {
console.error('Error in getting app version name', error);
});
}
setLanguageValue() {
this.preference.getString(PreferenceKey.SELECTED_LANGUAGE).toPromise()
.then(value => {
this.selectedLanguage = value;
});
this.preference.getString(PreferenceKey.SELECTED_LANGUAGE_CODE).toPromise()
.then(langCode => {
console.log('Language code: ', langCode);
this.notification.setupLocalNotification(langCode);
});
}
listenDownloads() {
combineLatest([
this.downloadService.getActiveDownloadRequests(),
this.eventsBusService.events(EventNamespace.DOWNLOADS).pipe(
filter((event) => event.type === DownloadEventType.PROGRESS)
)
]).subscribe(([list, event]) => {
const downloadEvent = event as DownloadProgress;
this.downloadProgressMap[downloadEvent.payload.identifier] = downloadEvent.payload.progress;
if (list.length > 1) {
this.showDownloadingIcon = true;
} else if (list.length === 1 && this.downloadProgressMap[list[0].identifier] !== 100) {
this.showDownloadingIcon = true;
} else {
this.showDownloadingIcon = false;
}
this.changeDetectionRef.detectChanges();
});
}
private listenNotifications() {
this.pushNotificationService.notifications$.subscribe((notifications) => {
this.unreadNotificationsCount = notifications.filter((n) => !n.isRead).length;
});
}
setAppLogo() {
if (!this.appGlobalService.isUserLoggedIn()) {
this.isLoggedIn = false;
this.appLogo = './assets/imgs/ic_launcher.png';
this.appVersion.getAppName().then((appName: any) => {
this.appName = appName;
});
} else {
this.isLoggedIn = true;
this.preference.getString('app_logo').toPromise().then(value => {
if (value) {
this.appLogo = this.commonUtilService.networkInfo.isNetworkAvailable ? value : './assets/imgs/ic_launcher.png';
} else {
this.appLogo = './assets/imgs/ic_launcher.png';
}
});
this.preference.getString('app_name').toPromise().then(value => {
this.appName = value;
});
this.fetchManagedProfileDetails();
}
this.refreshLoginInButton();
}
async toggleMenu() {
this.menuCtrl.toggle();
if (this.menuCtrl.isOpen()) {
const pageId = this.activePageService.computePageId(this.router.url);
this.telemetryGeneratorService.generateInteractTelemetry(
InteractType.TOUCH,
InteractSubtype.MENU_CLICKED,
Environment.HOME,
pageId
);
}
this.events.publish(EventTopics.HAMBURGER_MENU_CLICKED);
this.currentSelectedTabs = await this.preference.getString(PreferenceKey.SELECTED_SWITCHABLE_TABS_CONFIG).toPromise();
}
emitEvent($event, name) {
if (name === 'filter') {
if (this.commonUtilService.networkInfo.isNetworkAvailable) {
this.headerEvents.emit({ name, event: $event });
} else {
this.commonUtilService.showToast('NEED_INTERNET_TO_CHANGE');
}
} else {
this.headerEvents.emit({ name, event: $event });
}
}
emitSideMenuItemEvent($event, menuItem) {
this.menuCtrl.close().then(() => {
this.sideMenuItemEvent.emit({ menuItem });
}).catch((e) => {
this.sideMenuItemEvent.emit({ menuItem });
})
}
ngOnDestroy() {
if (this.networkSubscription) {
this.networkSubscription.unsubscribe();
}
this.events.subscribe('user-profile-changed');
this.events.subscribe('app-global:profile-obj-changed');
}
async getUnreadNotifications() {
await this.notification.fetchNotificationList().then((data) => {
const notificationList = data.feeds;
const unreadNotificationList = notificationList.filter((n: any) => n.status === UserFeedStatus.UNREAD);
this.notificationCount.unreadCount = unreadNotificationList.length;
})
}
async fetchManagedProfileDetails() {
try {
this.profile = await this.profileService.getActiveSessionProfile({ requiredFields: ProfileConstants.REQUIRED_FIELDS }).toPromise();
if (!this.profile || !this.profile.serverProfile) {
this.managedProfileList$ = EMPTY;
return;
}
this.managedProfileList$ = this.profileService.managedProfileManager.getManagedServerProfiles({
from: CachedItemRequestSourceFrom.CACHE,
requiredFields: ProfileConstants.REQUIRED_FIELDS
}).pipe(
map(profiles => {
return profiles.filter(p => p.id !== this.profile.uid);
})
);
} catch (err) {
console.log(err);
}
}
addManagedUser() {
if (!this.commonUtilService.networkInfo.isNetworkAvailable) {
this.commonUtilService.showToast('NEED_INTERNET_TO_CHANGE');
return;
}
const pageId = this.activePageService.computePageId(this.router.url);
this.telemetryGeneratorService.generateInteractTelemetry(
InteractType.SELECT_ADD,
'',
Environment.HOME,
pageId,
undefined,
undefined,
undefined,
undefined,
ID.BTN_ADD
);
this.router.navigate([`/${RouterLinks.PROFILE}/${RouterLinks.SUB_PROFILE_EDIT}`]);
}
openManagedUsers() {
const pageId = this.activePageService.computePageId(this.router.url);
this.telemetryGeneratorService.generateInteractTelemetry(
InteractType.SELECT_MORE,
'',
Environment.HOME,
pageId,
undefined,
undefined,
undefined,
undefined,
ID.BTN_MORE
);
const navigationExtras: NavigationExtras = {
state: {
profile: this.profile
}
};
this.router.navigate([`/${RouterLinks.PROFILE}/${RouterLinks.MANAGE_USER_PROFILES}`], navigationExtras);
}
switchUser(user) {
const pageId = this.activePageService.computePageId(this.router.url);
const cData: Array<CorrelationData> = [
{ id: user.id || '', type: CorReleationDataType.SWITCHED_USER }
];
this.telemetryGeneratorService.generateInteractTelemetry(
InteractType.SELECT_ADD,
'',
Environment.HOME,
pageId,
undefined,
undefined,
undefined,
cData,
ID.BTN_SWITCH
);
this.profileService.managedProfileManager.switchSessionToManagedProfile({ uid: user.id }).toPromise().then(async res => {
this.events.publish(AppGlobalService.USER_INFO_UPDATED);
this.events.publish('loggedInProfile:update');
if(user.profileUserType && user.profileUserType.type){
await this.preference.putString(PreferenceKey.SELECTED_USER_TYPE, user.profileUserType.type).toPromise();
this.events.publish('UPDATE_TABS', {type: 'SWITCH_TABS_USERTYPE'});
}
this.menuCtrl.close();
this.showSwitchSuccessPopup(user.firstName);
this.tncUpdateHandlerService.checkForTncUpdate();
}).catch(err => {
this.commonUtilService.showToast('ERROR_WHILE_SWITCHING_USER');
console.error(err);
});
}
async showSwitchSuccessPopup(name) {
const confirm = await this.popoverCtrl.create({
component: ToastNavigationComponent,
componentProps: {
message: this.commonUtilService.translateMessage('SUCCESSFULLY_SWITCHED_USER', { '%app': this.appName, '%user': name }),
description: this.commonUtilService.translateMessage('UPDATE_YOUR_PREFERENCE_FROM_PROFILE', { app_name: this.appName }),
actionsButtons: [
{
btntext: this.commonUtilService.translateMessage('GO_TO_PROFILE'),
btnClass: 'btn-right'
}
]
},
cssClass: 'sb-popover'
});
await confirm.present();
setTimeout(() => {
if (confirm) {
confirm.dismiss();
}
}, 3000);
const { data } = await confirm.onDidDismiss();
console.log(data);
if (data) {
this.router.navigate([`/${RouterLinks.PROFILE_TAB}`]);
}
}
async switchTheme() {
if (document.querySelector('html').getAttribute('data-theme') === AppThemes.DEFAULT) {
this.appTheme = AppThemes.JOYFUL;
await this.preference.putString('current_selected_theme', this.appTheme).toPromise();
document.querySelector('html').setAttribute('device-accessable-theme', 'accessible');
this.appHeaderService.showStatusBar().then();
} else {
document.querySelector('html').setAttribute('data-theme', AppThemes.DEFAULT);
this.appTheme = AppThemes.DEFAULT;
await this.preference.putString('current_selected_theme', this.appTheme).toPromise();
document.querySelector('html').setAttribute('device-accessable-theme', '');
this.appHeaderService.hideStatusBar();
}
this.menuCtrl.close();
}
async switchMode(){
if (document.querySelector('html').getAttribute('data-mode') === AppMode.DEFAULT) {
this.isDarkMode=true
this.appTheme = AppMode.DARKMODE;
document.querySelector('html').setAttribute('data-mode', AppMode.DARKMODE);
await this.preference.putString('data-mode', AppMode.DARKMODE).toPromise();
this.appHeaderService.showStatusBar().then();
} else {
document.querySelector('html').setAttribute('data-mode', AppMode.DARKMODE);
this.isDarkMode=false
this.appTheme = AppMode.DEFAULT;
document.querySelector('html').setAttribute('data-mode', AppMode.DEFAULT);
await this.preference.putString('data-mode', AppMode.DEFAULT).toPromise();
this.appHeaderService.hideStatusBar();
}
this.menuCtrl.close();
}
async switchTabs() {
this.currentSelectedTabs = await this.preference.getString(PreferenceKey.SELECTED_SWITCHABLE_TABS_CONFIG).toPromise();
let subType = InteractSubtype.OPTED_IN;
if (this.currentSelectedTabs === SwitchableTabsConfig.HOME_DISCOVER_TABS_CONFIG) {
this.preference.putString(PreferenceKey.SELECTED_SWITCHABLE_TABS_CONFIG,
SwitchableTabsConfig.RESOURCE_COURSE_TABS_CONFIG).toPromise();
this.events.publish('UPDATE_TABS', { type: 'SWITCH_TABS_USERTYPE' });
subType = InteractSubtype.OPTED_OUT;
} else if (!this.currentSelectedTabs || this.currentSelectedTabs === SwitchableTabsConfig.RESOURCE_COURSE_TABS_CONFIG) {
this.preference.putString(PreferenceKey.SELECTED_SWITCHABLE_TABS_CONFIG,
SwitchableTabsConfig.HOME_DISCOVER_TABS_CONFIG).toPromise();
this.events.publish('UPDATE_TABS', { type: 'SWITCH_TABS_USERTYPE' });
subType = InteractSubtype.OPTED_IN;
}
const userType = await this.preference.getString(PreferenceKey.SELECTED_USER_TYPE).toPromise();
const isNewUser = await this.preference.getBoolean(PreferenceKey.IS_NEW_USER).toPromise();
this.telemetryGeneratorService.generateNewExprienceSwitchTelemetry(
PageId.MENU,
subType,
{
userType,
isNewUser
}
);
await this.commonUtilService.populateGlobalCData();
this.menuCtrl.close();
}
private async checkForAppUpdate() {
return new Promise((resolve => {
cordova.plugins.InAppUpdateManager.isUpdateAvailable((result: string) => {
if (result) {
this.isUpdateAvailable = true;
resolve();
}
}, () => { });
}));
}
async showKebabMenu(event) {
const kebabMenuPopover = await this.popoverCtrl.create({
component: ApplicationHeaderKebabMenuComponent,
event,
showBackdrop: false,
componentProps: {
options: this.headerConfig.kebabMenuOptions || []
},
});
kebabMenuPopover.present();
const { data } = await kebabMenuPopover.onDidDismiss();
if (!data) {
return;
}
this.emitEvent({ event, option: data.option }, 'kebabMenu');
}
private refreshLoginInButton() {
const profileType = this.appGlobalService.getGuestUserType();
this.showLoginButton = this.commonUtilService.isAccessibleForNonStudentRole(profileType);
}
private async checkCurrentOrientation() {
const currentOritentation = await this.preference.getString(PreferenceKey.ORIENTATION).toPromise();
if ( currentOritentation === AppOrientation.LANDSCAPE) {
this.orientationToSwitch = AppOrientation.PORTRAIT;
} else {
this.orientationToSwitch = AppOrientation.LANDSCAPE;
}
}
signin() { this.router.navigate([RouterLinks.SIGN_IN]); }
changeFontSize(value: string) {
const elFontSize = window.getComputedStyle(document.documentElement).getPropertyValue('font-size');
const localFontSize = localStorage.getItem('fontSize');
const currentFontSize = localFontSize ? localFontSize : elFontSize;
this.fontSize = parseInt(currentFontSize);
if (value === 'increase') {
this.renderer.setAttribute(this.increaseFontSize.nativeElement, 'aria-pressed', 'true');
this.renderer.removeAttribute(this.decreaseFontSize.nativeElement, 'aria-pressed');
this.renderer.removeAttribute(this.resetFontSize.nativeElement, 'aria-pressed');
this.fontSize = this.fontSize + 2;
if (this.fontSize <= 20) {
this.setLocalFontSize(this.fontSize);
}
} else if (value === 'decrease') {
this.renderer.setAttribute(this.decreaseFontSize.nativeElement, 'aria-pressed', 'true');
this.renderer.removeAttribute(this.increaseFontSize.nativeElement, 'aria-pressed');
this.renderer.removeAttribute(this.resetFontSize.nativeElement, 'aria-pressed');
this.fontSize = this.fontSize - 2;
if (this.fontSize >= 12) {
this.setLocalFontSize(this.fontSize);
}
} else {
this.renderer.setAttribute(this.resetFontSize.nativeElement, 'aria-pressed', 'true');
this.renderer.removeAttribute(this.increaseFontSize.nativeElement, 'aria-pressed');
this.renderer.removeAttribute(this.decreaseFontSize.nativeElement, 'aria-pressed');
this.setLocalFontSize(this.defaultFontSize);
}
}
setLocalFontSize(value: any) {
document.documentElement.style.setProperty('font-size', value + 'px', 'important');
localStorage.setItem('fontSize', value);
this.isDisableFontSize(value);
}
isDisableFontSize(value: any) {
value = parseInt(value);
if (value === 20) {
this.renderer.setAttribute(this.increaseFontSize.nativeElement, 'disabled', 'true');
this.renderer.removeAttribute(this.decreaseFontSize.nativeElement, 'disabled');
this.renderer.removeAttribute(this.resetFontSize.nativeElement, 'disabled');
} else if (value === 12) {
this.renderer.setAttribute(this.decreaseFontSize.nativeElement, 'disabled', 'true');
this.renderer.removeAttribute(this.increaseFontSize.nativeElement, 'disabled');
this.renderer.removeAttribute(this.resetFontSize.nativeElement, 'disabled');
} else if (value === 16) {
this.renderer.setAttribute(this.resetFontSize.nativeElement, 'disabled', 'true');
this.renderer.removeAttribute(this.increaseFontSize.nativeElement, 'disabled');
this.renderer.removeAttribute(this.decreaseFontSize.nativeElement, 'disabled');
} else {
this.renderer.removeAttribute(this.increaseFontSize.nativeElement, 'disabled');
this.renderer.removeAttribute(this.decreaseFontSize.nativeElement, 'disabled');
this.renderer.removeAttribute(this.resetFontSize.nativeElement, 'disabled');
}
}
}
<ion-header class="sb-header" [hidden]="!headerConfig?.showHeader" [ngClass]="{'z-index-0': decreaseZindex}">
<ion-toolbar class="sb-header-toolbar">
<ion-buttons class="sb-hamburger pl-10" slot="start" *ngIf="headerConfig?.showBurgerMenu">
<ion-button class="sb-hamburger-menu sb-hamburger-icon" icon-only (click)="toggleMenu()">
<img src="./assets/imgs/ic_burger_menu.svg" role="button" class="tool-icon" alt="menu">
</ion-button>
</ion-buttons>
<ion-buttons class="sb-hamburger" slot="start" *ngIf="!headerConfig?.showBurgerMenu">
<ion-button icon-only (click)="emitEvent($event, 'back');" aria-label="back">
<ion-icon class="arrow-icon" name="arrow-back" role="button" aria-label="back"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title class="color f16" role="heading" aria-level="1" *ngIf="headerConfig?.pageTitle?.length >0">{{headerConfig?.pageTitle}}</ion-title>
<ion-buttons class="sb-header-btn-group pr-12 fontResize-container" slot="end">
<button type="button" [attr.aria-pressed]="false" tabindex="0" *ngIf="headerConfig?.actionButtons?.indexOf('font-accessibility') >=0"
attr.aria-label="{{resourceService?.frmelmnts?.lbl?.accessibilityfont}}"
class="fontResizeBtn fontResizeBtn_A-"
title="{{resourceService?.frmelmnts?.lbl?.accessibilityfont}}"
(click)="changeFontSize('decrease');" #decreaseFontSize>A-</button>
<button [attr.aria-pressed]="false" type="button" tabindex="0" *ngIf="headerConfig?.actionButtons?.indexOf('font-accessibility') >=0"
attr.aria-label="{{resourceService?.frmelmnts?.lbl?.accessibilityfntdflt}}"
class="fontResizeBtn fontResizeBtn_A"
title="{{resourceService?.frmelmnts?.lbl?.accessibilityfntdflt}}"
(click)="changeFontSize('reset');" #resetFontSize>A</button>
<button [attr.aria-pressed]="false" type="button" tabindex="0" *ngIf="headerConfig?.actionButtons?.indexOf('font-accessibility') >=0"
attr.aria-label="{{resourceService?.frmelmnts?.lbl?.accessibilitytextsize}}"
class="fontResizeBtn fontResizeBtn_A+"
title="{{resourceService?.frmelmnts?.lbl?.accessibilitytextsize}}"
(click)="changeFontSize('increase');" #increaseFontSize>A+</button>
<ion-button icon-only *ngIf="headerConfig?.actionButtons?.indexOf('download') >=0 && showDownloadingIcon"
(click)="emitEvent($event, 'download');">
<svg [ngClass]="{'downloading': showDownloadingIcon}" class="active-downloads-icon" role="button" height="25"
viewBox="0 0 14 20" width="25" xmlns="http://www.w3.org/2000/svg">
<title>F2562297-C67D-4A8E-831F-4BBA8FB569A4@1.5x</title>
<desc>Created with sketchtool.</desc>
<g>
<title>background</title>
<rect fill="none" height="5.25203" id="canvas_background" width="4.27642" x="-1" y="-1" />
</g>
<g>
<title>Layer 1</title>
<g fill="none" fill-rule="evenodd" id="Download-Manager">
<g fill="#024F9D" fill-rule="nonzero" id="arrow">
<path
d="m7.97649,2.03349l0,6l1.17,0l-2.17,2.17l-2.17,-2.17l1.17,0l0,-6l2,0l0,0zm2,-2l-6,0l0,6l-4,0l7,7l7,-7l-4,0l0,-6z"
id="Shape" />
</g>
</g>
<g fill="none" fill-rule="evenodd" id="Download-Manager">
<g fill="#024F9D" fill-rule="nonzero" id="bar">
<polygon id="Path"
points="14.064681947231293,18.104969024658203 0.06468096375465393,18.104969024658203 0.06468096375465393,20.10494041442871 14.064681947231293,20.10494041442871 " />
</g>
</g>
</g>
</svg>
</ion-button>
<ion-button aria-label="settings" icon-only *ngIf="headerConfig?.actionButtons?.indexOf('settings') >=0 && !isDownloadingActive"
(click)="emitEvent($event, 'settings');">
<ion-icon name="settings"></ion-icon>
</ion-button>
<ion-button aria-label="notifications" icon-only *ngIf="headerConfig?.actionButtons?.indexOf('notification') >=0"
(click)="emitEvent($event, 'notification');" class="active-download-icon">
<img src="assets/imgs/notification.svg" class="tool-icon" alt="notification" role="button">
<ion-badge class="badge-container" *ngIf="notificationCount.unreadCount">{{notificationCount.unreadCount}}</ion-badge>
</ion-button>
<ion-button aria-label="search" icon-only *ngIf="headerConfig?.actionButtons?.indexOf('search') >=0"
(click)="emitEvent($event, 'search');">
<img src="./assets/imgs/ic_search.png" role="button" class="tool-icon" alt="search">
</ion-button>
<ion-button aria-label="information" icon-only *ngIf="headerConfig?.actionButtons?.indexOf('information') >=0"
(click)="emitEvent($event, 'information');">
<img src="./assets/imgs/ic_info_circle.svg" role="button" class="tool-icon" alt="information">
</ion-button>
<ion-button aria-label="person" icon-only *ngIf="headerConfig?.actionButtons?.indexOf('person') >=0"
(click)="emitEvent($event, 'person');">
<ion-icon name="person"></ion-icon>
</ion-button>
<ion-button aria-label="filter" icon-only *ngIf="headerConfig?.actionButtons?.indexOf('filter') >=0"
(click)="emitEvent($event, 'filter');">
<img src="./assets/imgs/ic_action_filter.svg" role="button" class="tool-icon" alt="filter">
</ion-button>
<ion-button aria-label="filter applied" icon-only *ngIf="headerConfig?.actionButtons?.indexOf('filter-applied') >=0"
(click)="emitEvent($event, 'filter');">
<img src="./assets/imgs/ic_action_filter_applied.png" role="button" class="tool-icon" alt="filter applied">
</ion-button>
<ion-button aria-label="share" icon-only *ngIf="headerConfig?.actionButtons?.indexOf('share') >=0"
(click)="emitEvent($event, 'share');">
<ion-icon name="share" role="button" aria-label="share" class="ion-float-right"></ion-icon>
</ion-button>
<ion-buttons aria-label="sync done" icon-only *ngIf="headerConfig?.actionButtons?.indexOf('sync-done') >=0" style="font-size: 1.8rem;">
<ion-icon name="cloud-done" role="button" class="ion-float-right" aria-label="sync done" style="color: green;"></ion-icon>
</ion-buttons>
<ion-buttons aria-label="sync offline" icon-only *ngIf="headerConfig?.actionButtons?.indexOf('sync-offline') >=0"
(click)="emitEvent($event, 'sync');" style="font-size: 1.8rem;">
<ion-icon name="cloud-upload" aria-label="sync offline" role="button" class="ion-float-right"></ion-icon>
</ion-buttons>
<ion-button icon-only aria-label="more" *ngIf="headerConfig?.actionButtons?.indexOf('more') >=0"
(click)="emitEvent($event, 'more');" style="font-size: 1.8rem;">
<ion-icon class="ion-float-end" role="button" name="ellipsis-vertical"></ion-icon>
</ion-button>
<ion-button aria-label="group information" icon-only *ngIf="headerConfig?.actionButtons?.indexOf('groupInfo') >=0"
(click)="emitEvent($event, 'groupInfo');" aria-label="group information" style="font-size: 1.8rem;">
<ion-icon class="ion-float-end" role="button" name="information-circle-outline"></ion-icon>
</ion-button>
<ion-button aria-label="Question map" icon-only *ngIf="headerConfig?.actionButtons?.indexOf('questionMap') >=0"
(click)="emitEvent($event, 'questionMap');" aria-label="Question map" style="font-size: 1.8rem;">
<ion-icon class="ion-float-end" role="button" name="map"></ion-icon>
</ion-button>
<ion-button aria-label="menu" icon-only *ngIf="headerConfig?.showKebabMenu" (click)="showKebabMenu($event)"
style="font-size: 1.8rem; padding: 0 16px;">
<img class="menu-icon" role="button" src="assets/imgs/menu.svg" alt="menu">
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-menu contentId="mainContent" class="sb-side-menu" *ngIf="isRtl" side="end" persistent="true"
[swipeGesture]="headerConfig?.showBurgerMenu || false">
<ion-header *ngIf="!isLoggedIn">
<ion-toolbar>
<ion-title>
<img class="img-container" src="{{appLogo}}" alt="app logo">
<span class="app-name">{{appName}}</span>
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="menu-section">
<section *ngIf="isLoggedIn" class="menu-container">
<ng-container *ngIf="(managedProfileList$ | async); let managedProfileList">
<section class="user-container">
<div *ngIf="profile?.handle">
<sb-member-card [title]="profile?.handle" [config]="userAvatarConfig"
[initial]="profile?.handle | initial">
</sb-member-card>
</div>
<div class="use-app-label sb-menu-item">
<span>{{'USE_APP_AS' | translate: {'%s': appName} }}</span>
</div>
<section class="managed-user-container">
<div class="mu-card" *ngFor="let user of managedProfileList |slice:0:2; let i = index"
(click)="switchUser(user)">
<sb-member-card [title]="user?.firstName" [identifier]="user?.id" [indexOfMember]="i"
[initial]="user?.firstName | initial">
</sb-member-card>
</div>
<div class="add-manage-user mu-card" *ngIf="managedProfileList.length <= 2" (click)="addManagedUser()">
<sb-member-card [title]="'ADD_USER' | translate" [initial]="'+'">
</sb-member-card>
</div>
<div class="more-manage-user mu-card" *ngIf="managedProfileList.length > 2" (click)="openManagedUsers()">
<sb-member-card [title]="'MORE_COUNT' | translate: {'%s':managedProfileList.length-2}"
[initial]="'...'">
</sb-member-card>
</div>
</section>
</section>
<div *ngIf="managedProfileList.length > 2" class="another-user-title" (click)="addManagedUser()">
<span class="add-sign">+</span> {{'ADD_ANOTHER_USER' | translate}}
</div>
</ng-container>
</section>
<ion-list class="sb-menu-list" lines="none">
<ion-item (click)="emitSideMenuItemEvent($event, 'MY_GROUPS')">
<span class="sb-menu-icon">
<img src="./assets/imgs/my_group.svg" class="tool-icon" aria-hidden="true" alt="my group">
</span>
<span class="sb-menu-item" role="button" menuClose>{{'MY_GROUPS' | translate}}</span>
<div class="new-feature-badge">
<div class="square-badge">New</div>
<div class="circle-badge"></div>
</div>
</ion-item>
<ion-item (click)="switchTheme()">
<span class="sb-menu-icon">
<img src="./assets/imgs/Help.png" class="tool-icon sb-menu-item-switch" aria-hidden="true" alt="help">
</span>
<span *ngIf="appTheme === 'DEFAULT'" class="sb-menu-item" role="button"
menuClose>{{SWITCH_TO_JOYFUL_THEME | translate}}</span>
<span *ngIf="appTheme === 'JOYFUL'" class="sb-menu-item" role="button"
menuClose>{{SWITCH_TO_CLASSIC_THEME | translate}}</span>
<div class="new-feature-badge">
<div class="square-badge">New</div>
<div class="circle-badge"></div>
</div>
</ion-item>
<ion-item (click)="emitSideMenuItemEvent($event, 'IMPORT')">
<span class="sb-menu-icon">
<img src="./assets/imgs/ic_import.png" aria-hidden="true" class="tool-icon" alt="import">
</span>
<span class="sb-menu-item" role="button" menuClose>{{'IMPORT_CONTENT' | translate}}</span>
<div class="new-feature-badge">
<div class="square-badge">New</div>
<div class="circle-badge"></div>
</div>
</ion-item>
<ion-item (click)="emitSideMenuItemEvent($event, 'LANGUAGE')">
<span class="sb-menu-icon sb-pt-6">
<img src="./assets/imgs/Language.png" aria-hidden="true" class="tool-icon" alt="select app language">
</span>
<div class="sb-language">
<div class="sb-menu-item" role="button">{{'LANGUAGE' | translate}}</div>
<div class="sb-menu-item-language">{{selectedLanguage}}</div>
</div>
</ion-item>
<ion-item (click)="emitSideMenuItemEvent($event, 'ORIENTATION')" *ngIf="isTablet">
<span class="sb-menu-icon">
<img src="./assets/imgs/ic_rotate.svg" aria-hidden="true" class="tool-icon" alt="tablet">
</span>
<div class="sb-language">
<div class="sb-menu-item" role="button">{{'ORIENTATION' | translate}}</div>
<div class="sb-menu-item-language">{{orientationToSwitch}}</div>
</div>
</ion-item>
<ion-item (click)="emitSideMenuItemEvent($event, 'SETTINGS')">
<span class="sb-menu-icon">
<img src="./assets/imgs/Settings.png" aria-hidden="true" class="tool-icon" alt="app settings">
</span>
<span class="sb-menu-item" role="button" menuClose>{{'SETTINGS' | translate}}</span>
</ion-item>
<ion-item (click)="emitSideMenuItemEvent($event, 'HELP')">
<span class="sb-menu-icon">
<img src="./assets/imgs/Help.png" aria-hidden="true" class="tool-icon" alt="help">
</span>
<span class="sb-menu-item" role="button" menuClose>{{'HELP' | translate}}</span>
</ion-item>
<ion-item (click)="emitSideMenuItemEvent($event, 'LOGIN')" *ngIf="!isLoggedIn && showLoginButton">
<span class="sb-menu-icon">
<ion-icon name="log-in-outline"></ion-icon>
</span>
<span class="sb-menu-item" role="button" menuClose>{{'SIGN_IN' | translate}}</span>
</ion-item>
<ion-item (click)="emitSideMenuItemEvent($event, 'LOGOUT')" *ngIf="isLoggedIn">
<span class="sb-menu-icon">
<img src="./assets/imgs/Sign_out.png" aria-hidden="true" class="tool-icon" alt="logout">
</span>
<span class="sb-menu-item" role="button" menuClose>{{'LOGOUT' | translate}}</span>
</ion-item>
</ion-list>
</div>
</ion-content>
<ion-footer class="side-menu-footer">
{{'VERSION'| translate}} {{versionName}}.{{versionCode}}
</ion-footer>
</ion-menu>
<ion-menu contentId="mainContent" class="sb-side-menu" *ngIf="!isRtl" side="start" persistent="true"
[swipeGesture]="headerConfig?.showBurgerMenu || false">
<ion-header *ngIf="!isLoggedIn">
<ion-toolbar>
<ion-title>
<img class="img-container" src="{{appLogo}}" alt="app logo">
<span class="app-name">{{appName}}</span>
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="menu-section">
<section *ngIf="isLoggedIn" class="menu-container">
<ng-container *ngIf="(managedProfileList$ | async); let managedProfileList">
<section class="user-container">
<div *ngIf="profile?.handle">
<sb-member-card [title]="profile?.handle" [config]="userAvatarConfig"
[initial]="profile?.handle | initial">
</sb-member-card>
</div>
<div class="use-app-label">
<span>{{'USE_APP_AS' | translate: {'%s': appName} }}</span>
</div>
<section class="managed-user-container">
<div class="mu-card" *ngFor="let user of managedProfileList |slice:0:2; let i = index"
(click)="switchUser(user)">
<sb-member-card [title]="user?.firstName" [identifier]="user?.id" [indexOfMember]="i"
[initial]="user?.firstName | initial">
</sb-member-card>
</div>
<div class="add-manage-user mu-card" *ngIf="managedProfileList.length <= 2" (click)="addManagedUser()">
<sb-member-card [title]="'ADD_USER' | translate" [initial]="'+'">
</sb-member-card>
</div>
<div class="more-manage-user mu-card" *ngIf="managedProfileList.length > 2" (click)="openManagedUsers()">
<sb-member-card [title]="'MORE_COUNT' | translate: {'%s':managedProfileList.length-2}"
[initial]="'...'">
</sb-member-card>
</div>
</section>
</section>
<div *ngIf="managedProfileList.length > 2" class="another-user-title" (click)="addManagedUser()">
<span class="add-sign">+</span> {{'ADD_ANOTHER_USER' | translate}}
</div>
</ng-container>
</section>
<ion-list class="sb-menu-list" lines="none">
<ion-item (click)="emitSideMenuItemEvent($event, 'MY_GROUPS')">
<span class="sb-menu-icon">
<img src="./assets/imgs/my_group.svg" aria-hidden="true" class="tool-icon" alt="my group">
</span>
<span class="sb-menu-item" role="button" menuClose>{{'MY_GROUPS' | translate}}</span>
</ion-item>
<ion-item (click)="emitSideMenuItemEvent($event, 'MLREPORTS')" *ngIf="showReports">
<span class="sb-menu-icon">
<img src="./assets/imgs/Reports.png" aria-hidden="true" class="tool-icon" alt="reports">
</span>
<span class="sb-menu-item" role="button" menuClose>{{'FRMELEMNTS_LBL_MY_REPORTS' | translate}}</span>
<div class="new-feature-badge">
<div class="square-badge">New</div>
<div class="circle-badge"></div>
</div>
</ion-item>
<ion-item (click)="switchTabs()">
<div class="beta-info">
<span class="sb-menu-icon">
<img src="./assets/imgs/ic_switch.svg" aria-hidden="true" class="tool-icon sb-menu-item-switch" alt="help">
</span>
<div><span *ngIf="currentSelectedTabs === 'HOME_DISCOVER_TABS_CONFIG'" class="sb-menu-item"
menuClose>{{'FRMELEMNTS_LBL_SWITCH_TO_LIBRARY' | translate: {'appName': appName} }}</span>
<span *ngIf="!currentSelectedTabs || currentSelectedTabs === 'RESOURCE_COURSE_TABS_CONFIG'"
class="sb-menu-item"
menuClose>{{'FRMELEMNTS_LBL_SWITCH_TO_HOME' | translate: {'appName': appName} }}</span>
<span class="new-feature-badge"
*ngIf="!currentSelectedTabs || currentSelectedTabs === 'RESOURCE_COURSE_TABS_CONFIG'">
<div class="square-badge" *ngIf="!platform?.is('ios')">Beta</div>
<div class="circle-badge"></div>
</span></div>
</div>
</ion-item>
<ion-item (click)="switchMode()">
<span class="sb-menu-icon dark-mode-icon">
<img src="./assets/imgs/darkmode.svg" aria-hidden="true" class="tool-icon sb-menu-item-switch" alt="darkmode">
</span>
<span *ngIf="!isDarkMode" class="sb-menu-item" role="button" menuClose>{{'SWITCH_TO_DARK_MODE' | translate}}</span>
<span *ngIf="isDarkMode" class="sb-menu-item" role="button" menuClose>{{'SWITCH_TO_DEFAULT' | translate}}</span>
<div class="onoffswitch">
<input type="checkbox" (click)="switchMode()" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" [(ngModel)]="isDarkMode">
<label class="onoffswitch-label" for="myonoffswitch">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
</ion-item>
<ion-item (click)="emitSideMenuItemEvent($event, 'IMPORT')" *ngIf="!platform?.is('ios')">
<span class="sb-menu-icon">
<img src="./assets/imgs/ic_import.png" aria-hidden="true" class="tool-icon" alt="import">
</span>
<span class="sb-menu-item" menuClose>{{'IMPORT_CONTENT' | translate}}</span>
</ion-item>
<ion-item (click)="emitSideMenuItemEvent($event, 'ORIENTATION')" *ngIf="isTablet">
<span class="sb-menu-icon">
<img src="./assets/imgs/ic_rotate.svg" aria-hidden="true" class="tool-icon" alt="tablet">
</span>
<div class="sb-language">
<div class="sb-menu-item" role="button">{{'ORIENTATION' | translate}}</div>
<div class="sb-menu-item-language">{{orientationToSwitch}}</div>
</div>
</ion-item>
<ion-item (click)="emitSideMenuItemEvent($event, 'LANGUAGE')">
<span class="sb-menu-icon sb-pt-6">
<img src="./assets/imgs/Language.png" aria-hidden="true" class="tool-icon" alt="select app langugae">
</span>
<div class="sb-language">
<div class="sb-menu-item" role="button">{{'LANGUAGE' | translate}}</div>
<div class="sb-menu-item-language">{{selectedLanguage}}</div>
</div>
</ion-item>
<ion-item (click)="emitSideMenuItemEvent($event, 'SETTINGS')">
<span class="sb-menu-icon">
<img src="./assets/imgs/Settings.png" aria-hidden="true" class="tool-icon" alt="app settings">
</span>
<span class="sb-menu-item" role="button" menuClose>{{'SETTINGS' | translate}}</span>
</ion-item>
<ion-item (click)="emitSideMenuItemEvent($event, 'HELP')">
<span class="sb-menu-icon">
<img src="./assets/imgs/Help.png" aria-hidden="true" class="tool-icon" alt="help">
</span>
<span class="sb-menu-item" role="button" menuClose>{{'HELP' | translate}}</span>
</ion-item>
<ion-item role="button" (click)="emitSideMenuItemEvent($event, 'LOGIN')" *ngIf="!isLoggedIn && showLoginButton">
<span class="sb-menu-icon">
<ion-icon name="log-in-outline"></ion-icon>
</span>
<span class="sb-menu-item" role="button" menuClose>{{'SIGN_IN' | translate}}</span>
</ion-item>
<ion-item role="button" (click)="emitSideMenuItemEvent($event, 'LOGOUT')" *ngIf="isLoggedIn">
<span class="sb-menu-icon">
<img src="./assets/imgs/Sign_out.png" aria-hidden="true" class="tool-icon" alt="logout">
</span>
<span class="sb-menu-item" role="button" menuClose>{{'LOGOUT' | translate}}</span>
</ion-item>
</ion-list>
</div>
</ion-content>
<ion-footer class="side-menu-footer" style="height: 6.063rem; padding: 26px">
<div *ngIf="!isUpdateAvailable">
{{'VERSION'| translate}} {{versionName}}.{{versionCode}}
</div>
<div *ngIf="isUpdateAvailable">
<button class="sb-btn sb-btn-md sb-btn-primary PR35 W100 ellipsis text-uppercase btn-block continue"
(click)="emitSideMenuItemEvent($event, 'UPDATE')">
<img class="update-icon" src="./assets/imgs/ic_update.svg" alt="">
<span>{{ 'APP_UPDATE' | translate: {'%s': appName} }}</span>
</button>
</div>
</ion-footer>
</ion-menu>