surveysparrow-ionic-plugin 1.0.7-beta.19 → 1.0.7-beta.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "surveysparrow-ionic-plugin",
-  "version": "1.0.7-beta.19",
+  "version": "1.0.7-beta.21",
   "description": "SurveySparrow SDK enables you to collect feedback from your mobile app. Embed the Classic, Chat & NPS surveys in your ionic application seamlessly with few lines of code.",
   "type": "module",
   "main": "dist/plugin.cjs.js",

package/src/angular-ui/lib/spotchecks/SpotCheckComponent.css

@@ -0,0 +1,7 @@
+.safe-area {
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+  box-sizing: border-box;
+}

package/src/angular-ui/lib/spotchecks/SpotCheckComponent.html

@@ -1,4 +1,4 @@
-<div [ngStyle]="componentStyles.wrapperStyles">
+<div [ngStyle]="componentStyles.wrapperStyles" class="safe-area">
   <div [ngStyle]="componentStyles.styles">
     <div style="position: relative; height: 100%;">
       <spotcheck-close-button />
@@ -7,12 +7,14 @@
         *ngIf="state.classicUrl && state.classicUrl.length > 0 && state.spotcheckURL.length > 0 && state.spotCheckType === 'classic'"
         [url]="state.classicUrl"
         [webviewType]="'classic'"
+        [isMiniCard]="state.spotChecksMode === 'miniCard'"
       />
   
       <WebViewComponent
         *ngIf="state.chatUrl && state.chatUrl.length > 0 && state.spotcheckURL.length > 0 && state.spotCheckType === 'chat'"
         [url]="state.chatUrl"
         [webviewType]="'chat'"
+        [isMiniCard]="state.spotChecksMode === 'miniCard'"
       />
 
       <div *ngIf="state.spotChecksMode === 'miniCard' && state.avatarEnabled">

package/src/angular-ui/lib/spotchecks/SpotCheckComponent.ts

@@ -20,11 +20,12 @@ import axios from 'axios';
 @Component({
   selector: 'WebViewComponent',
   template: `
-    <div style="overflow: hidden; height: 100%;">
+    <div style="overflow: hidden; height: 100%; border-radius: {{isMiniCard ? 12 : 0}}px; padding-left: {{isMiniCard ? 12 : 0}}px; padding-right: {{isMiniCard ? 12 : 0}}px; box-sizing: border-box;">
       <iframe
+        allow="camera; microphone; geolocation; display-capture; autoplay; clipboard-read; clipboard-write;"
         #iframeRef
         [src]="safeUrl"
-        style="width: 100%; height: 100%; display: block;"
+        style="width: 100%; height: 100%; display: block; border-radius: {{isMiniCard ? 12 : 0}}px;"
         frameborder="0"
       >
       </iframe>
@@ -36,6 +37,7 @@ import axios from 'axios';
 export class WebViewComponent implements OnInit, AfterViewInit {
   @Input() url: string = '';
   @Input() webviewType: 'classic' | 'chat' = 'classic';
+  @Input() isMiniCard: boolean = false;
 
   safeUrl: SafeResourceUrl | null = null;
   @ViewChild('iframeRef') iframe!: ElementRef<HTMLIFrameElement>;
@@ -210,6 +212,7 @@ export class CloseButtonComponent implements OnDestroy {
 @Component({
   selector: 'SpotCheckComponent',
   templateUrl: './SpotCheckComponent.html',
+  styleUrls: ['./SpotCheckComponent.css'],
   standalone: true,
   imports: [CommonModule, WebViewComponent, CloseButtonComponent],
 })

package/src/angular-ui/lib/spotchecks/helpers.ts

@@ -307,7 +307,7 @@ export const handleSurveyEnd = () => {
 export const getSpotcheckComponentCssStyles = (state: SpotcheckState) => { 
   let styles = {}
   let wrapperStyles = {}
-  let padding = 30;
+  let extraPaddingForMiniCardCloseButtonIfTopPosition = 0;
   if (state.isFullScreenMode && state.isVisible) {
     wrapperStyles = {
       display: 'flex',
@@ -323,7 +323,6 @@ export const getSpotcheckComponentCssStyles = (state: SpotcheckState) => {
 
     let height = Math.min(state.currentQuestionHeight, (state.maxHeight * window.innerHeight));
     if(state.spotChecksMode === 'miniCard') {
-      padding = 45;
       if(state.avatarEnabled) {
         height = height - 56;
       }
@@ -353,6 +352,9 @@ export const getSpotcheckComponentCssStyles = (state: SpotcheckState) => {
             display: 'flex',
             justifyContent: 'flex-start',
           };
+          if(state.spotChecksMode === 'miniCard' && state.isCloseButtonEnabled) {
+            extraPaddingForMiniCardCloseButtonIfTopPosition = 30;
+          }
         break;
           
         case 'center':
@@ -382,13 +384,12 @@ export const getSpotcheckComponentCssStyles = (state: SpotcheckState) => {
       zIndex: '99999999',
       display: 'none',
       flexDirection: 'column',
-      paddingTop: padding+'px',
-      paddingBottom: padding+'px',
       ...wrapperStyles
     },
     styles: {
       display: 'none',
       flexDirection: 'column',
+      paddingTop: extraPaddingForMiniCardCloseButtonIfTopPosition+'px',
       ...styles,
     }
   };