File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
isPrivacyPolicy
|
Type : any
|
|
|
Methods
|
changeEvent
|
changeEvent(event)
|
|
|
|
|
|
closePopover
|
closePopover()
|
|
|
|
|
|
Async
openTermsOfUse
|
openTermsOfUse()
|
|
|
|
|
|
isChecked
|
Default value : false
|
|
|
|
isClicked
|
Default value : false
|
|
|
import { Component, Input,OnInit } from '@angular/core';
import { PopoverController } from '@ionic/angular';
import { RouterLinks } from '@app/app/app.constant';
import { CommonUtilService,UtilityService } from '@app/services';
@Component({
selector: 'app-privacy-policy-and-tc',
templateUrl: './privacy-policy-and-tc.component.html',
styleUrls: ['./privacy-policy-and-tc.component.scss'],
})
export class PrivacyPolicyAndTCComponent implements OnInit {
@Input() header;
@Input() link;
@Input() message;
@Input() message1;
@Input() linkLabel;
@Input() isPrivacyPolicy;
isChecked = false;
isClicked = false;
appName;
constructor(
private popOverCtrl: PopoverController,
private utilityService: UtilityService,
private commonUtilService : CommonUtilService
) { }
closePopover() {
let data = {
isChecked: this.isChecked,
isClicked: true
}
this.popOverCtrl.dismiss(data);
}
changeEvent(event) {
if (event.detail.checked) {
this.isChecked = true;
} else {
this.isChecked = false;
}
}
ngOnInit(){
this.commonUtilService.getAppName().then((res) => { this.appName = res; });
}
async openTermsOfUse() {
const baseUrl = await this.utilityService.getBuildConfigValue('TOU_BASE_URL');
const url = baseUrl + RouterLinks.TERM_OF_USE;
const options
= 'hardwareback=yes,clearcache=no,zoom=no,toolbar=yes,disallowoverscroll=yes';
(window as any).cordova.InAppBrowser.open(url, '_blank', options);
}
}
<ion-header class="sb-popover-header">
<ion-toolbar class="sb-popover-toolbar">
<ion-title class="sb-popover-title">{{header| translate}}
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="sb-popover-container ion-no-padding">
<div id="main-content" class="sb-popover-content-details">
<div class="consent-popover-info">
<div class="flex-container">
<div class="footer">
<div class="cr-input-primary" lines="none">
<span>
<ion-checkbox class="cr-terms-checkbox" (ionChange)="changeEvent($event)"></ion-checkbox>
</span>
<span>
<p class="cr-terms-checkbox-label">
<span>{{message | translate: {'app_name': appName} }} </span>
<span (click)="openTermsOfUse()" class="terms-info"> {{linkLabel | translate }}</span>
<span> {{message1 | translate}}</span>
</p>
</span>
</div>
<div class="btn-info" *ngIf="isPrivacyPolicy">
<button [disabled]="isChecked" [ngClass]="!isChecked ? 'save-changes' : 'save-changes-not-agree'"
(click)="closePopover()">{{'FRMELEMNTS_BTN_DONOT_SHARE' | translate}}</button>
<button (click)="closePopover()" [disabled]="!isChecked"
[ngClass]="!isChecked ? 'save-changes-not-agree' : 'save-changes'">{{'SHARE' | translate}}</button>
</div>
<div class="btn-info" *ngIf="!isPrivacyPolicy">
<button [disabled]="isChecked" [ngClass]="!isChecked ? 'save-changes' : 'save-changes-not-agree'"
(click)="closePopover()">{{'FRMELEMNTS_BTN_DO_NOT_UPLOAD' | translate}}</button>
<button (click)="closePopover()" [disabled]="!isChecked"
[ngClass]="!isChecked ? 'save-changes-not-agree' : 'save-changes'">{{'FRMELEMNTS_BTN_UPLOAD' | translate}}</button>
</div>
</div>
</div>
</div>
</div>
</ion-content>
@import "../../../../../assets/styles/base/_variables.scss";
@import "../../../../../assets/styles/_variables.scss";
@import "../../../../../assets/styles/_custom-mixins.scss";
.cr-terms-checkbox-label{
padding-left: 5px;
}
.cr-terms-checkbox{
--background-checked: #{$blue};
--border-color: #{$blue};
--border-radius: 4px;
--border-width: 1px;
--border-color-checked:#{$blue};
}
.cr-input-primary {
display: inline-flex;
}
.btn-label {
float: right;
display: inline-flex;
}
#main-content {
overflow-y: scroll;
// background: map-get($colors, white);
}
.consent-popover-info {
overflow: hidden;
}
.flex-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.header {
flex-grow: 0;
flex-shrink: 0;
color: #222222;
font-family: "Noto Sans", sans-serif;
font-size: 1.25rem;
letter-spacing: 0;
font-weight: bold;
margin-bottom: 16px;
@include ltr() {
text-align: right
}
@include rtl() {
text-align:left;
}
}
.body {
display: block;
flex-grow: 1;
flex-shrink: 1;
height: 38vh;
overflow-y: scroll;
}
.footer {
flex-grow: 0;
flex-shrink: 0;
padding: 0px 10px;
}
.save-changes{
color: white;
background-color: $blue;
font-size: 1rem;
padding: 8px 0;
margin-left: 18px;
border: 2px solid $blue;
width: 45%;
}
.save-changes-not-agree{
color: $blue !important;
background-color: white;
font-size: 1rem;
padding: 8px 0;
border: 2px solid $blue;
width: 45%;
margin-left: 10px;
}
.btn-info{
padding: 12px;
text-align: center;
}
.profile-info{
color: map-get($colors, granite_gray);
font-family: "Noto Sans", sans-serif;
font-size: $font-size-base;
letter-spacing: 0;
}
.profile-info-section{
display: grid;
grid-template-columns: 100px 227px;
}
.share-disabled{
opacity: 0.5 !important;
cursor: default;
}
.terms-info{
color: $blue !important;
}
ion-icon {
@include ltr {
float: right !important;
}
@include rtl {
float: left !important;
}
}
.sb-popover-header {
border-radius: 4px 4px 0 0;
background-color: $info-color;
&::after {
background-image: none;
}
.sb-popover-toolbar {
min-height: 2.5rem;
max-height: 2.5rem;
background-color: $info-color;
border-radius: 4px 4px 0 0;
text-align: center;
// @include padding(($base-block-space * 0.5), ($base-block-space * 1));
.toolbar-background {
border-radius: 4px 4px 0 0;
background-color: $info-color;
}
.sb-popover-close-btn {
color: $white-color;
}
.sb-popover-title {
font-size: ($font-size-base) !important;
font-weight: bold;
//@extend line-height: 19px;
text-align: center;
color: $white-color;
@include padding(0);
// @include padding(0, ($base-block-space * 5) ,0,0);
}
}
.sb-modal-close {
position: absolute;
right: 0.313rem;
width: 1.25rem;
height: 1.25rem;
display: flex;
top: -0.125rem;
text-align: center;
justify-content: center;
align-items: center;
}
}
Legend
Html element with directive