File
Methods
|
getMethod
|
getMethod(data)
|
|
|
|
|
|
navigatePrevious
|
navigatePrevious(data)
|
|
|
|
|
|
isChecked
|
Default value : false
|
|
|
import { Component } from '@angular/core';
import { SuiModal, ComponentModalConfig, ModalSize } from 'ng2-semantic-ui-v9';
import { Location, LocationStrategy } from '@angular/common';
import {ResourceService} from '../../services';
import * as _ from 'lodash-es';
interface IAlertModalContext {
data: any;
}
@Component({
selector: 'app-alert-modal',
templateUrl: './alert-modal.component.html',
styleUrls: ['./alert-modal.component.scss'],
})
export class AlertModalComponent {
isChecked = false;
public resourceService: ResourceService;
instance: string;
constructor(public modal: SuiModal<IAlertModalContext, void, void>, private location: Location, resourceService: ResourceService, public locationStrategy: LocationStrategy) {
this.resourceService = resourceService;
this.instance = _.upperCase(this.resourceService.instance);
this.locationStrategy.onPopState(() => {
this.modal.approve();
});
}
getMethod(data) {
if (data.type == 'cancel') {
this.modal.deny(data.returnValue);
return;
}
this.modal.approve(data.returnValue);
}
navigatePrevious(data) {
data.footer.buttons[0].returnValue = false;
this.modal.deny(data.footer.buttons[0].returnValue);
this.location.back();
}
}
export class AlertModal extends ComponentModalConfig<IAlertModalContext, void, void> {
constructor(data: any) {
super(AlertModalComponent, { data });
this.transitionDuration = 200;
this.isClosable = false;
switch (data.size) {
case 'mini':
this.size = ModalSize.Mini;
break;
case 'tiny':
this.size = ModalSize.Tiny;
break;
case 'small':
this.size = ModalSize.Small;
break;
case 'normal':
this.size = ModalSize.Normal;
break;
case 'large':
this.size = ModalSize.Large;
break;
}
}
}
<div class="sb-modal">
<div class="popup">
<i class="close inside icon" (click)="modal?.deny()"></i>
<div class="popup-header" *ngIf="modal.context.data.content.title">
<span>{{ modal.context.data.content.title }}</span>
</div>
<div *ngIf="modal.context.data.content.body.type == 'checkbox'" class="popup-body-checkbox">
<input type="checkbox" id="myCheck" [(ngModel)]="isChecked" />
<label for="myCheck" innerHtml="{{modal.context.data.content.body.data| interpolate:'{instance}': instance | interpolate:'{instance}': instance}}"></label><br />
</div>
<div *ngIf="modal.context.data.content.body.type == 'text'">
<div class="popup-body" *ngIf="modal.context.data.content.body.data">
{{ modal.context.data.content.body.data }}
</div>
</div>
<div class={{modal.context.data.footer.className}}>
<div *ngFor="let btn of modal.context.data.footer.buttons">
<button
[ngClass]="{'sb-btn sb-btn-normal sb-btn-primary':true,'sb-btn-disabled':isChecked == false && btn.type =='accept' && modal.context.data.content.body.type == 'checkbox'}"
[disabled]="!isChecked && modal.context.data.content.body.type == 'checkbox' && btn.type=='accept'"
tabindex="0" (click)="getMethod(btn)" autofocus>
{{ btn.buttonText }}
</button>
</div>
</div>
</div>
</div>
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.popup {
border-radius: none !important;
background: var(--sb-modal-content-bg);
color: var(--sb-text);
padding: calculateRem(16px);
}
.popup-header {
color: var(--sb-text);
span {
justify-content: flex-start;
font-size: calculateRem(16px);
font-weight: bold;
}
}
.alignRight {
float: right;
color: var(--red-400);
i.icon {
margin: 0;
}
}
.popup-body {
color: var(--sb-text);
font-size: calculateRem(14px);
padding: calculateRem(16px) 0 calculateRem(24px);
}
.popup-body-checkbox {
display: flex;
gap: calculateRem(10px);
padding: calculateRem(20px) calculateRem(15px);
input {
margin-top: calculateRem(2px);
margin-right: calculateRem(10px);
}
label {
font-size: calculateRem(14px);
font-weight: 500;
line-height: 1.3em;
color: var(--sb-text);
text-align: justify;
}
}
.single-btn {
display: flex;
justify-content: center;
padding: calculateRem(10px) calculateRem(10px);
}
.double-btn {
display: flex;
justify-content: flex-end;
padding: calculateRem(10px) calculateRem(10px);
button {
margin-right: calculateRem(15px);
}
}
.double-btn-circle {
display: flex;
justify-content: flex-end;
font-size: calculateRem(14px);
padding: calculateRem(10px) calculateRem(10px);
button {
margin-right: calculateRem(14px);
border-radius: 50%;
height: calculateRem(55px);
width: calculateRem(50px);
}
}
.close.inside.icon{
font-size: 0.875rem;
padding: 0 !important;
margin: 0 !important;
height: 2.5rem;
width: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
outline: 0px;
position: absolute;
top: 0;
right: 0;
}
Legend
Html element with directive