File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Outputs
|
onAction
|
Type : EventEmitter
|
|
|
|
modal
|
Decorators :
@ViewChild('modal')
|
|
|
import { LocationStrategy } from '@angular/common';
import { Component, OnInit, Input, ViewChild, EventEmitter, Output } from '@angular/core';
export interface Editdata {
title?: string;
subTitle?: string;
defaultValue?: string;
leftBtnText?: string;
rightBtnText?: string;
action: string;
returnParams: any;
}
@Component({
selector: 'app-edit-submission',
templateUrl: './edit-submission.component.html',
styleUrls: ['./edit-submission.component.scss'],
})
export class EditSubmissionComponent implements OnInit {
@ViewChild('modal') modal;
@Input() editData: Editdata;
@Output() onAction = new EventEmitter<any>();
showPopup;
updatedValue: string;
constructor(
public location: LocationStrategy,
) {
this.location.onPopState(() => {
if(this.modal && this.modal.deny){
this.modal.deny();
}
});
}
ngOnInit() {
if (this.editData.defaultValue) { this.updatedValue = this.editData.defaultValue; }
}
closeModal() {
if(this.modal && this.modal.deny){
this.modal.deny();
}
this.onAction.emit({ action: this.editData.action, data: null });
}
submit() {
if(this.modal && this.modal.deny){
this.modal.deny();
}
this.onAction.emit({ action: this.editData.action, data: this.updatedValue, returnParams: this.editData.returnParams });
}
}
<app-modal-wrapper [config]="{disableClose: false, size: 'small'}" (dismiss)="closeModal()" #modal>
<ng-template sbModalContent>
<div class="sb-mat__modal sb-onboard">
<div mat-dialog-title class="flex-jc-center">
<div class="sb-onboard__header">
<h4> {{editData?.title}} </h4>
<p *ngIf="editData?.subTitle">{{editData?.subTitle}}</p>
</div>
<button aria-label="close dialog" mat-dialog-close class="close-btn" (click)="closeModal()">
</button>
</div>
<mat-dialog-content *ngIf="editData">
<div class="sb-mat__modal__content">
<input type="text" [(ngModel)]="updatedValue" class="edit-sub-input">
</div>
</mat-dialog-content>
<mat-dialog-actions class="mb-0 sb-mat__modal__actions flex-jc-center">
<div class="sb-onboard__footer d-flex">
<button type="button" class=" ui sb-btn sb-btn-sm sb-btn-white flex-basis-1" type="submit"
(click)="closeModal()">
{{editData?.leftBtnText}}
</button>
<div class="w-10"></div>
<button type="button" class="ui sb-btn sb-btn-sm sb-btn-primary flex-basis-1" type="submit"
(click)="submit()" [disabled]="!updatedValue" [ngClass]="{'sb-btn-disabled' : !updatedValue}">
{{editData?.rightBtnText}}
</button>
</div>
</mat-dialog-actions>
</div>
</ng-template>
</app-modal-wrapper>
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.header {
padding: calculateRem(15px);
background: var(--sb-modal-content-bg);
color: var(--sb-linkmenu-text);
}
.edit-sub-input,
input.edit-sub-input:focus-visible {
width: 100%;
height: 2rem;
padding: calculateRem(10px);
border: 0 !important;
background: transparent;
border-bottom: calculateRem(2px) solid var(--primary-color) !important;
color: var(--body-color);
}
.footer {
display: flex;
border: none;
background: var(--sb-modal-content-bg);
}
.ui.small.modal {
width: 40% !important;
}
.sb-onboard {
&__header {
width: 100%;
margin: calculateRem(20px) 0px;
padding-left : calculateRem(15px);
}
&__content {
width: calculateRem(648px);
max-width: 100%;
margin-bottom: auto;
overflow: hidden;
overflow-y: auto;
}
&__footer {
margin-top: calculateRem(16px);
width: 100%;
text-align: center;
}
}
Legend
Html element with directive