File
Implements
Constructor
constructor(platform: Platform, navParams: NavParams, popOverCtrl: PopoverController)
|
|
|
Parameters :
| Name |
Type |
Optional |
| platform |
Platform
|
No
|
| navParams |
NavParams
|
No
|
| popOverCtrl |
PopoverController
|
No
|
|
Methods
|
closePopover
|
closePopover()
|
|
|
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
selectOption
|
selectOption(canDownload: boolean)
|
|
|
Parameters :
| Name |
Type |
Optional |
Default value |
| canDownload |
boolean
|
No
|
false
|
|
|
actionsButtons
|
Type : any
|
|
|
|
backButtonFunc
|
Type : any
|
|
|
|
Public
navParams
|
Type : NavParams
|
|
|
|
Public
platform
|
Type : Platform
|
|
|
|
Public
popOverCtrl
|
Type : PopoverController
|
|
|
|
sbPopoverContent
|
Type : any
|
|
|
|
sbPopoverHeading
|
Type : any
|
|
|
|
sbPopoverMainTitle
|
Type : any
|
|
|
import { Component, OnDestroy } from '@angular/core';
import { NavParams, Platform, PopoverController } from '@ionic/angular';
@Component({
selector: 'app-confirm-alert',
templateUrl: './confirm-alert.component.html',
styleUrls: ['./confirm-alert.component.scss'],
})
export class ConfirmAlertComponent implements OnDestroy {
sbPopoverHeading: any;
sbPopoverMainTitle: any;
sbPopoverContent: any;
actionsButtons: any;
icon: any;
metaInfo: any;
isUpdateAvail: any;
contentSize: any;
backButtonFunc: any;
constructor(
public platform: Platform,
public navParams: NavParams,
public popOverCtrl: PopoverController) {
this.actionsButtons = this.navParams.get('actionsButtons');
this.icon = this.navParams.get('icon');
this.metaInfo = this.navParams.get('metaInfo');
this.sbPopoverContent = this.navParams.get('sbPopoverContent');
this.sbPopoverHeading = this.navParams.get('sbPopoverHeading');
this.sbPopoverMainTitle = this.navParams.get('sbPopoverMainTitle');
this.isUpdateAvail = this.navParams.get('isUpdateAvail');
this.contentSize = this.navParams.get('contentSize');
this.backButtonFunc = this.platform.backButton.subscribeWithPriority(11, () => {
this.popOverCtrl.dismiss();
});
}
selectOption(canDownload: boolean = false) {
this.popOverCtrl.dismiss(canDownload);
}
closePopover() {
this.popOverCtrl.dismiss();
}
ngOnDestroy() {
if (this.backButtonFunc) {
this.backButtonFunc.unsubscribe();
}
}
}
<ion-header class="sb-popover-header">
<ion-toolbar class="sb-popover-toolbar">
<ion-title class="sb-popover-title" role="heading" aria-level="1" *ngIf="!isUpdateAvail">{{'DOWNLOAD' | translate}}
<ion-icon name="close" class="sb-modal-close" (click)="closePopover()"></ion-icon>
</ion-title>
<ion-title class="sb-popover-title" role="heading" aria-level="1" *ngIf="isUpdateAvail">{{'UPDATE' | translate}}
<ion-icon name="close" class="sb-modal-close" (click)="closePopover()"></ion-icon>
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="sb-popover-container ion-no-padding">
<div class="sb-popover-items">
<div class="icon-container" *ngIf="icon?.md">
<ion-icon ios="{{icon?.ios}}" md="{{icon?.md}}"></ion-icon>
</div>
<div class="sb-popover-content-details sb-accordian-grey-text">
<div class="main-title" *ngIf="!isUpdateAvail">{{'DOWNLOAD_CONFIRMATION_TEXT' | translate}}</div>
<div class="main-title" *ngIf="isUpdateAvail">{{'UPDATE_CONFIRMATION_TEXT' | translate}}</div>
<div class="main-title">
<div class="meta-info"> {{sbPopoverMainTitle}} </div>
</div>
<div class="sb-popover-content">
<div class="sb-popover-download-content"> {{metaInfo}} </div>
</div>
</div>
</div>
</ion-content>
<ion-footer>
<div class="sb-popover-footer">
<button class="sb-popover-action-btn popover-color " (click)='selectOption(true)'
*ngIf="isUpdateAvail">{{ 'UPDATE' | translate}}</button>
<button class="sb-popover-action-btn popover-color" (click)='selectOption(true)'
*ngIf="!isUpdateAvail">{{ 'DOWNLOAD' | translate}}</button>
</div>
</ion-footer>
@import "src/assets/styles/_variables.scss";
:host {
.close-button.button-outline-md {
border-color: transparent;
color: map-get($colors, grayish_blue);
background-color: transparent;
box-shadow: none;
opacity: 1;
margin-top: 3px !important;
height: 1.4rem;
}
.close-button.button-outline-md .button-inner {
// migration-TODO
// @include padding(null, 14px, null, null);
}
.close-button.button-outline-md [icon-only] ion-icon {
font-size: 1.4rem;
}
.padding-left-5{
// migration-TODO
// @include padding(null, null, null, 5% !important);
}
.margin-top-5{
margin-top: 15px !important;
}
}
.confirm-alert-box .popover-content {
margin: 0;
width: 100vw !important;
height: auto !important;
box-shadow: unset;
position: fixed;
left: 0 !important;
// migration-TODO
// @include ltr() {
// left: 0 !important;
// };
// @include rtl() {
// right: 0 !important;
// };
top: unset !important;
bottom: 0;
transform-origin: bottom -100% !important;
transform: translateY(0) !important;
overflow-y: hidden;
}
.confirm-alert-box ion-backdrop {
// migration-TODO
// background-color: map-get($colors, dark) !important;
opacity: 0.4 !important;
}
Legend
Html element with directive