File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
|
showMemberPopup
|
Type : any
|
|
|
|
showWelcomePopup
|
Type : any
|
|
|
Outputs
|
close
|
Type : EventEmitter
|
|
|
Methods
|
addTelemetry
|
addTelemetry(id)
|
|
|
|
|
|
closeMemberPopup
|
closeMemberPopup()
|
|
|
|
|
|
slideConfig1
|
Type : object
|
Default value : {}
|
|
|
import { ResourceService } from '@sunbird/shared';
import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { GroupsService } from '../../services';
@Component({
selector: 'app-ftu-popup',
templateUrl: './ftu-popup.component.html',
styleUrls: ['./ftu-popup.component.scss']
})
export class FtuPopupComponent implements OnInit {
slideConfig1 = {};
instance;
@Input() showWelcomePopup;
@Input()showMemberPopup;
@Output() close = new EventEmitter();
constructor(public resourceService: ResourceService,
private activatedRoute: ActivatedRoute,
private groupService: GroupsService) { }
ngOnInit() {
this.instance = this.resourceService.instance;
this.slideConfig1 = {
// 'lazyLoad': 'progressive',
'slidesToShow': 1,
'infinite': false,
'rtl': false,
'dots': true,
'adaptiveHeight': true
// 'fade': true,
// 'cssEase': 'linear',
// 'autoplay': true,
// 'autoplaySpeed': 2000
};
}
closeModal() {
this.showWelcomePopup = false;
this.close.emit(true);
}
closeMemberPopup() {
this.showMemberPopup = false;
this.close.emit(true);
localStorage.setItem('login_members_ftu', 'members');
}
addTelemetry (id) {
this.groupService.addTelemetry({id}, this.activatedRoute.snapshot, []);
}
}
<app-modal-wrapper [config]="{disableClose: true}" *ngIf="showWelcomePopup">
<ng-template sbModalContent>
<div class="sb-group-page-container">
<div class="sb-group-container sb-group-container--sm sb-bg-color-white">
<a class="close" tabindex="0" (click)="closeModal();addTelemetry('ftu-close')" role="button"
aria-label="Close Welcome dialog"><i class="icon-svg icon-svg--xs icon-close"><svg
class="icon icon-svg--primary">
<use xlink:href="./assets/images/sprite.svg#close"></use>
</svg></i></a>
<!-- below content comes from CC -->
<h4 class="sb-group-container__title">{{ resourceService?.frmelmnts?.lbl?.groupWelcomeTitle }}</h4>
<img src="./assets/images/groups.png" class="sb-group-container__img" role="presentation" alt="" />
<p class="sb-group-container__description">{{ resourceService?.frmelmnts?.lbl?.groupWelcomeMsg }}</p>
</div>
</div>
</ng-template>
</app-modal-wrapper>
<div class="sb-group-page-container" *ngIf="showMemberPopup">
<div class="sb-group-container sb-group-container--md sb-bg-color-white">
<a class="close" role="button" tabindex="0" aria-label="Close Member dialog"
(click)="closeMemberPopup(false);addTelemetry('member-ftu-close')"><i
class="icon-svg icon-svg--xs icon-close"><svg class="icon icon-svg--primary">
<use xlink:href="./assets/images/sprite.svg#close"></use>
</svg></i></a>
<!-- below content comes from CC -->
<div class="sb-bg-color-white sb-modal-content w-100 text-left pb-16">
<h4 class="mb-8">{{ resourceService?.frmelmnts?.lbl?.addingMembertoGroup | interpolate:'{instance}': instance
}}</h4>
<p class="mb-16">{{ resourceService?.frmelmnts?.lbl?.MembersInstanceId | interpolate:'{instance}': instance }}
</p>
<app-slick [loadStatus]="'done'">
<ng-container>
<div class="item-help">
<h6 class="mat-body-1 mb-0">{{ resourceService?.frmelmnts?.lbl?.step1 }}</h6>
<p class="mat-body-1 mt-8 mb-16">{{ resourceService?.frmelmnts?.lbl?.clickOnProfileIcon }}</p>
<img src="./assets/images/step_1.png" alt="{{ resourceService?.frmelmnts?.lbl?.clickOnProfileIcon }}">
</div>
<div class="item-help">
<h6 class="mat-body-1 mb-0">{{ resourceService?.frmelmnts?.lbl?.step2 }}</h6>
<p class="mat-body-1 mt-8 mb-16">{{ resourceService?.frmelmnts?.lbl?.SelectProfileMenu }}</p>
<img src="./assets/images/step_2.png" alt="{{ resourceService?.frmelmnts?.lbl?.SelectProfileMenu }}">
</div>
<div class="item-help">
<h6 class="mat-body-1 mb-0">{{ resourceService?.frmelmnts?.lbl?.step3 }}</h6>
<p class="mat-body-1 mt-8 mb-16">{{ resourceService?.frmelmnts?.lbl?.SeetheInstanceIDhere |
interpolate:'{instance}': instance }}</p>
<img src="./assets/images/step_3.png" alt="">
</div>
</ng-container>
</app-slick>
</div>
</div>
</div>
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
@use 'pages/page-center-view' as *;
@use 'pages/custom-carousel.scss' as *;
/* can be remove, comes from CC */
.close {
width:calculateRem(32px);
height:calculateRem(32px);
border-radius:50%;
position:absolute;
right:calculateRem(8px);
top:calculateRem(8px);
display: flex;
justify-content: center;
align-items: center;
cursor:pointer;
}
h4 {
color: var(--gray-800);
font-size: calculateRem(20px);
font-weight: bold;
letter-spacing: 0;
line-height: calculateRem(28px);
}
p {
color: var(--gray-800);
font-size: calculateRem(14px) !important;
letter-spacing: 0;
font-size: calculateRem(22px);
}
::ng-deep {
.modal-custom-carousel.slick-slider {
.slick-list {
height: inherit !important;
}
}
}
.item-help .column-2 {
@include respond-below(sm) {
margin-top:calculateRem(24px);
}
}
Legend
Html element with directive