@yoobic/yobi 8.3.0-39 → 8.3.0-42

package/dist/collection/components/form/form-checkbox/form-checkbox.js

@@ -16,7 +16,11 @@ export class YooFormCheckboxComponent {
      */
     this.type = 'normal';
     /**
-     * Specifies wether the component is in readonly mode.
+     * Specifies whether the component is in disabled mode.
+     */
+    this.disabled = false;
+    /**
+     * Specifies whether the component is in readonly mode.
      */
     this.readonly = false;
     /**
@@ -125,7 +129,7 @@ export class YooFormCheckboxComponent {
       this.renderCheck()));
   }
   renderEditable() {
-    return (h("div", { class: "outer-container", onClick: () => this.toggle() },
+    return (h("div", { class: "outer-container", onClick: !this.disabled && (() => this.toggle()) },
       this.renderCheck(),
       this.header && this.renderHeader(),
       this.renderHelp()));
@@ -215,6 +219,24 @@ export class YooFormCheckboxComponent {
       "reflect": true,
       "defaultValue": "'normal'"
     },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies whether the component is in disabled mode."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "readonly": {
       "type": "boolean",
       "mutable": false,
@@ -227,7 +249,7 @@ export class YooFormCheckboxComponent {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Specifies wether the component is in readonly mode."
+        "text": "Specifies whether the component is in readonly mode."
       },
       "attribute": "readonly",
       "reflect": false,

package/dist/collection/components/form/form-document-dialog/form-document-dialog.js

@@ -54,7 +54,7 @@ export class YooFormDocumentDialogComponent {
         icon: 'email',
         iconColor: 'dark',
         cssClass: isWeb(this.host) ? 'bg-app-color-hover' : 'bg-app-color light',
-        isVisible: () => isDocumentEmailSupported(this.document) && getPermissions().canShareByEmail,
+        isVisible: () => { var _a; return isDocumentEmailSupported(this.document) && !((_a = getSession()) === null || _a === void 0 ? void 0 : _a.isExternal) && getPermissions().canShareByEmail; },
         handler: () => {
           getAsyncExtraData({
             type: 'email-dialog',

package/dist/collection/components/form/form-dynamic/form-dynamic.css

@@ -1574,6 +1574,13 @@ span.fr-img-caption.fr-view {
     max-height: 25rem;
   }
 }
+:host(.mission-form:not(.readonly)) yoo-banner,
+:host(.workflow-form:not(.readonly)) yoo-banner,
+:host(.kanban-form:not(.readonly)) yoo-banner {
+  width: calc(100% - var(--spacing-32, 2rem));
+  max-width: 34rem;
+  margin: var(--spacing-16, 1rem) auto 0;
+}
 :host(.mission-form:not(.readonly)) yoo-form-progress-indicator,
 :host(.workflow-form:not(.readonly)) yoo-form-progress-indicator,
 :host(.kanban-form:not(.readonly)) yoo-form-progress-indicator {
@@ -1822,7 +1829,7 @@ span.fr-img-caption.fr-view {
   margin: 0;
 }
 
-:host(.web:not(.inline):not(.inline-row):not(.force-mobile):not(.mission-results):not(.lesson-detail.readonly)) .inputs-container-parent:not(.gridstack) {
+:host(.web:not(.inline):not(.inline-row):not(.force-mobile):not(.mission-results):not(.lesson-detail.readonly):not(.wizard-single)) .inputs-container-parent:not(.gridstack) {
   padding: 0 var(--spacing-08, 0.5rem);
 }
 
@@ -2602,4 +2609,8 @@ span.fr-img-caption.fr-view {
 :host(.live-preview-form.web:not(.inline):not(.inline-row):not(.force-mobile)) yoo-tabs {
   flex-shrink: 0;
   padding: 0;
+}
+
+:host(.form-creator-preview-lesson) {
+  margin-top: var(--safe-area-inset-top);
 }

package/dist/collection/components/form/form-dynamic/form-dynamic.js

@@ -3,7 +3,6 @@ import { answerIsValid, cancelRequestInterval, debounce, disableKeyboardResize,
 import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
 import { assign, cloneDeep, compact, findLastIndex, flatten, get, groupBy, isArray, isEmpty, isEqual, isFunction, isNumber, isObject, isString, keys, orderBy, pick, range, result, uniqBy } from 'lodash-es';
 import { getMissionStatusIconName } from '../../../feature-operate/campaign/helpers/operation-helpers';
-import { TodoListMode } from '../../../interfaces/form-field/form-field.instance';
 import { getActiveElementShadow, getAppContext, hideShowTabbar, lockSwipes, querySelectorAllDeep, querySelectorDeep } from '../../../utils/helpers/common-helpers';
 import { generateLabel, getDynamicProperty, getTypeValidation, isCreationAllowed, isDisabled, isEditionAllowed, isReadonly, isRequired, setFieldData, updateFormulas } from '../../../utils/helpers/form-helpers';
 import { setValueAndResetInputValidity, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
@@ -531,7 +530,6 @@ export class YooFormDynamicComponent {
     lockSwipes(this.ionSlides, false);
     if (!this.slidesState || (this.slidesState[index] && !this.getSlideState(index).locked) || (this.isLivePreview() && this.slides[index])) {
       if (this.ionSlides) {
-        forceUpdate(this);
         await this.ionSlides.slideTo(this.showRecap !== false ? index + 1 : index, animated ? 200 : 0);
       }
       else if (this.isWeb) {
@@ -543,6 +541,10 @@ export class YooFormDynamicComponent {
   async updateValidity() {
     this.initValidity();
   }
+  async findFieldElement(fieldName) {
+    const field = this.getFieldByCode(fieldName);
+    return field;
+  }
   async updateFieldValue(fieldName, value, resetValidity = false) {
     const field = this.getFieldByCode(fieldName);
     if (field) {
@@ -662,6 +664,11 @@ export class YooFormDynamicComponent {
       this.setCountDownTimer();
     }
   }
+  connectedCallback() {
+    if (this.disconnected) {
+      this.disconnected = false;
+    }
+  }
   disconnectedCallback() {
     if (isNativeMobile()) {
       if (!this.isKeyboardStateLocked && !this.isKeyboardResizeModeInactive) {
@@ -678,7 +685,7 @@ export class YooFormDynamicComponent {
       window.removeEventListener('screenSizeWillChange', this.resizeListener);
     }
     this.removeRequestInterval();
-    this.hasUnloaded = true;
+    this.disconnected = true;
   }
   removeRequestInterval() {
     var _a;
@@ -746,7 +753,7 @@ export class YooFormDynamicComponent {
       }
       if (this.innerTimer === 0) {
         this.removeRequestInterval();
-        if (!this.hasUnloaded) {
+        if (!this.disconnected) {
           this.timeFinished.emit();
         }
       }
@@ -779,24 +786,15 @@ export class YooFormDynamicComponent {
     const code = this.encodeFieldName(name);
     return querySelectorDeep(host || this.host, '[attr-name=' + code + ']');
   }
-  async scrollOnFitChanged(ev) {
-    if (ev === null || ev === void 0 ? void 0 : ev.detail) {
-      const scrollElmt = await this.getScrollOrDivElement();
-      if (scrollElmt) {
-        const scrollElmtBottom = scrollElmt.getBoundingClientRect().bottom;
-        const fieldElmtBottom = ev.detail.bottom;
-        if (fieldElmtBottom > scrollElmtBottom && scrollElmt) {
-          scrollElmt.scrollTop = scrollElmt.scrollTop + (fieldElmtBottom - scrollElmtBottom);
-        }
-      }
-    }
-  }
   isLessonDetail() {
     return this.formType === 'lesson-detail';
   }
   isLessonPreview() {
     return this.formType === 'form-creator-preview-lesson';
   }
+  isCoursePreview() {
+    return this.host.classList.contains('course-preview');
+  }
   isLessonQuestionResult() {
     return this.formType === 'lesson-question-result';
   }
@@ -1781,7 +1779,7 @@ export class YooFormDynamicComponent {
       this.forceUpdate();
     }
     const newValidity = this.slidesState.every((state) => state.validity || state.locked);
-    if ((this.skipValidation || newValidity) && !calledInWillLoad) {
+    if ((this.skipValidation || newValidity) && !calledInWillLoad && !this.disconnected) {
       this.dataChanged.emit(this.currentData);
     }
     if (newValidity !== this.validity && (!this.autosave || newValidity || this.validity)) { // when in autosave mode, we dont emit validity event untl the first valid state
@@ -2121,7 +2119,7 @@ export class YooFormDynamicComponent {
                 'grid-flex': !this.showWizard && ((_b = (_a = selectedSlide === null || selectedSlide === void 0 ? void 0 : selectedSlide.items) === null || _a === void 0 ? void 0 : _a.filter((f) => this.getFieldVisibility(f))) === null || _b === void 0 ? void 0 : _b.some((f) => f.type === FormFieldType.grid || f.type === FormFieldType.audience)),
                 'gridstack': this.useGridstack && !this.gridstackItemNoScroll,
                 'gridstack-no-scroll': this.useGridstack && this.gridstackItemNoScroll,
-                'lesson-detail-answer': (this.formType === 'lesson' && isWeb()) && this.showAnswers && !this.lessonStarted
+                'lesson-detail-answer': (this.formType === 'lesson' && isWeb(this.host)) && this.showAnswers && !this.lessonStarted
               }, ref: (el) => (this.inputContainerParent[selectedSlideIndex] = el) },
               h("slot", { name: "before-main-container" }),
               this.selectedTabIndexState > -1 && this.renderFormContentFields(selectedSlide, selectedSlideIndex, slides.length - 1),
@@ -2139,7 +2137,7 @@ export class YooFormDynamicComponent {
                 'grid-flex': !this.showWizard && ((_f = (_e = (_d = slides[0]) === null || _d === void 0 ? void 0 : _d.items) === null || _e === void 0 ? void 0 : _e.filter((f) => this.getFieldVisibility(f))) === null || _f === void 0 ? void 0 : _f.some((f) => f.type === FormFieldType.grid || f.type === FormFieldType.audience)),
                 'gridstack': this.useGridstack && !this.gridstackItemNoScroll,
                 'gridstack-no-scroll': this.useGridstack && this.gridstackItemNoScroll,
-                'lesson-detail-answer': this.formType === 'lesson' && isWeb() && this.showAnswers && !this.lessonStarted
+                'lesson-detail-answer': this.formType === 'lesson' && isWeb(this.host) && this.showAnswers && !this.lessonStarted
               }, ref: (el) => (this.inputContainerParent[0] = el) },
               h("slot", { name: "before-main-container" }),
               this.renderFormContentFields(slides[0], 0, slides.length - 1))),
@@ -2419,7 +2417,7 @@ export class YooFormDynamicComponent {
           return [
             fieldWithSectionHeader && (h("div", { class: { 'section-header': true, readonly: this.forceReadonly }, innerHTML: translateMulti(fieldWithSectionHeader.sectionHeader) })),
             visible && (h("yoo-collapsible", { isPdf: this.isPdf, collapsed: !this.isPdf && !this.forceCollapsibleOpen && !fieldsPerSections[section].some((field) => field.sectionExpanded), class: {
-                'form': true,
+                'form': !fieldsPerSections[section].some((field) => field.sectionWithoutBackground),
                 'padding': !this.showVerticalTabs && !this.forceReadonly,
                 'no-scroll': this.useGridstack && this.gridstackItemNoScroll
               }, icon: fieldWithSectionIcon === null || fieldWithSectionIcon === void 0 ? void 0 : fieldWithSectionIcon.sectionIcon, iconColor: "dark", iconSize: "medium", header: translate(section), style: { zIndex: fieldsPerSections[section].some((field) => field.type === FormFieldType.querybuilder) ? '1' : undefined }, slot: this.useGridstack ? section : null, size: this.formInputSize },
@@ -2439,7 +2437,7 @@ export class YooFormDynamicComponent {
               _a.map((subsection) => {
                 const subvisible = subfieldsPerSections[subsection].some((field) => this.getFieldVisibility(field));
                 return subvisible && h("yoo-collapsible", { isPdf: this.isPdf, collapsed: !this.isPdf && !this.forceCollapsibleOpen && !subfieldsPerSections[subsection].some((field) => field.subSectionExpanded), class: {
-                    'form': true,
+                    'form': !fieldsPerSections[section].some((field) => field.sectionWithoutBackground),
                     'subform': true,
                     'text-color': !this.isPdf,
                     'padding': !this.showVerticalTabs && !this.forceReadonly,
@@ -2637,7 +2635,7 @@ export class YooFormDynamicComponent {
             'disable-input-container': field.disableInputContainer,
             'html': field.type === FormFieldType.textarea && field.language === 'html' && isWeb(this.host),
             'no-break': !isPdfMultiplePhotos && ![FormFieldType.selectmulti, FormFieldType.selectbuttons, FormFieldType.catalog].includes(field === null || field === void 0 ? void 0 : field.type),
-            'lesson-detail-answer-field': this.formType === 'lesson' && isWeb(),
+            'lesson-detail-answer-field': this.formType === 'lesson' && isWeb(this.host),
             [fieldClass]: !!fieldClass && !renderSlideTitle,
             [field.mode]: field.mode && (field.type === FormFieldType.document || field.type === FormFieldType.image || field.type === FormFieldType.podcast),
             [field.type]: true
@@ -2654,7 +2652,7 @@ export class YooFormDynamicComponent {
                   'label-right-aligned': this.isLabelRightAligned(),
                   'label-top-aligned': this.isLabelTopAligned(),
                   'lesson-detail': this.isLessonDetail(),
-                  'lesson-live-preview': this.isLessonPreview(),
+                  'lesson-live-preview': this.isLessonPreview() || this.isCoursePreview(),
                   'preview': this.isLivePreview(),
                   'no-border': field.type === FormFieldType.information || (answer && this.forceReadonly),
                   'no-padding-top': field.hideLabel && (this.isInlineRow() || this.isInline()),
@@ -2814,7 +2812,7 @@ export class YooFormDynamicComponent {
         }
         break;
       case 'recap':
-        buttons = getRecapButton(this.validity && !this.isPreview, this.showPreview, this.isPreview, () => this.onOpenPreview(), (ev) => this.onSave(ev), () => this.continueIfEnabled(() => this.goToSlide(this.nextAvailablePage(-1), true)));
+        buttons = getRecapButton(this.host, this.validity && !this.isPreview, this.showPreview, this.isPreview, () => this.onOpenPreview(), (ev) => this.onSave(ev), () => this.continueIfEnabled(() => this.goToSlide(this.nextAvailablePage(-1), true)));
         break;
     }
     return buttons;
@@ -2826,7 +2824,7 @@ export class YooFormDynamicComponent {
   renderFormFooter(type, slideIndex, lastUnlockedSlideIndex) {
     if (this.shouldRenderFormFooter(type, slideIndex, lastUnlockedSlideIndex)) {
       const buttons = this.getFormFooterButtons(type, slideIndex, lastUnlockedSlideIndex);
-      return (h("yoo-form-footer", { ref: (el) => (this.formFooterElement = el), countDownStartValue: this.timer, countDownValue: this.innerTimer, forceMobile: this.forceMobile || this.formType === 'form-creator-preview', buttons: buttons, showCopyright: this.showCopyright, class: this.formType === 'lesson' ? isWeb() ? 'lesson-detail' : 'relative' : '' }));
+      return (h("yoo-form-footer", { ref: (el) => (this.formFooterElement = el), countDownStartValue: this.timer, countDownValue: this.innerTimer, forceMobile: this.forceMobile || this.formType === 'form-creator-preview', buttons: buttons, showCopyright: this.showCopyright, class: this.formType === 'lesson' ? isWeb(this.host) ? 'lesson-detail' : 'relative' : '' }));
     }
   }
   getNextButtons(slideIndex) {
@@ -2846,6 +2844,7 @@ export class YooFormDynamicComponent {
         }
       };
       buttons = getPreviousAndNextButtons({
+        host: this.host,
         hasPreviousButton: slideIndex !== 0 && (((slideIndex !== this.slides.length - 1 || this.isLessonPreview()) && isContentOnly(this.lessonType)) || ((_f = this.formExtraOptions) === null || _f === void 0 ? void 0 : _f.showBack)),
         lastButtonTranslationKey: isQuiz(this.lessonType) && this.showAnswers && !isTimedQuiz(this.lessonType) && (!isConfidenceAssessment(this.lessonType) || isConfidenceSlide) ? 'CHECK' : 'YOOBICNEXT',
         isDisabled: this.isLivePreview() ? false : !getLessonPageValidity(slideIndex, this.slides, this.fieldsState, this.activeIndex, this.currentData),
@@ -2861,6 +2860,7 @@ export class YooFormDynamicComponent {
     else if (this.showWizard) {
       lockSwipes(this.ionSlides, true);
       buttons = getPreviousAndNextButtons({
+        host: this.host,
         hasPreviousButton: slideIndex !== 0 && slideIndex !== this.slides.length - 1,
         lastButtonTranslationKey: 'YOOBICNEXT',
         isDisabled: !((_g = this.slidesState.filter((item) => !(item === null || item === void 0 ? void 0 : item.hidden))[slideIndex]) === null || _g === void 0 ? void 0 : _g.validity),
@@ -2876,7 +2876,7 @@ export class YooFormDynamicComponent {
       if (((_h = this.formExtraOptions) === null || _h === void 0 ? void 0 : _h.combinedForms) && this.slides[slideIndex] && ((_j = this.slides[slideIndex]) === null || _j === void 0 ? void 0 : _j.submitFn)) {
         nextFn = () => this.slides[slideIndex].submitFn(this.currentData, this.ionSlides, this);
       }
-      buttons = getNextButton(useSubmitFn ? () => this.slides[slideIndex].submitFn(this.currentData, () => nextFn) : nextFn, isWeb(this.host) && !this.isLivePreview() ? 'medium' : 'large');
+      buttons = getNextButton(this.host, useSubmitFn ? () => this.slides[slideIndex].submitFn(this.currentData, () => nextFn) : nextFn, isWeb(this.host) && !this.isLivePreview() ? 'medium' : 'large');
     }
     return buttons;
   }
@@ -2891,7 +2891,7 @@ export class YooFormDynamicComponent {
     else if (this.showWizard) {
       lockSwipes(this.ionSlides, true);
       const visibleSlides = this.getVisibleSlides();
-      buttons = getLastButtons({
+      buttons = getLastButtons(this.host, {
         text: translate(this.saveText || 'YOOBICSAVE'),
         color: isDisabled ? 'stable-light' : this.appColor,
         size: isWeb(this.host) && !this.isLivePreview() ? 'medium' : 'large',
@@ -2924,7 +2924,7 @@ export class YooFormDynamicComponent {
       else {
         submitText = 'FINISH';
       }
-      buttons = getLastButtons({
+      buttons = getLastButtons(this.host, {
         text: translate(submitText),
         color: !this.isLesson() && isDisabled ? 'stable-light' : this.appColor,
         size: isWeb(this.host) && !this.isLivePreview() ? 'medium' : 'large',
@@ -3948,7 +3948,11 @@ export class YooFormDynamicComponent {
         extraAttrs = {
           logo: field.logo,
           value: value || field.value,
-          whiteLabel: (_q = getSession().tenant) === null || _q === void 0 ? void 0 : _q.waitlistWhitelabel
+          description: field.description,
+          whiteLabel: (_q = getSession().tenant) === null || _q === void 0 ? void 0 : _q.waitlistWhitelabel,
+          showIllustration: field.showIllustration,
+          showShareLink: field.showShareLink,
+          showDownload: field.showDownload
         };
         break;
       case FormFieldType.recurrence:
@@ -4069,15 +4073,10 @@ export class YooFormDynamicComponent {
         };
         break;
       case FormFieldType.todolist:
-        TagType = 'yoo-form-todo-list';
+        TagType = 'yoo-form-todo-task-list';
         extraAttrs = {
-          hideHeader: field.hideLabel,
-          isCompleteLocked: field.locked,
-          value: value !== undefined ? value : { title: field.title },
-          extraData: this.currentData,
-          mode: this.isKanban() ? TodoListMode.kanban : field.mode || TodoListMode.none,
           translations: this.shouldUseTranslations() ? this.translations : null,
-          onFitChanged: (ev) => this.scrollOnFitChanged(ev) // when needed, scroll to be able to see the buttons that have just been rendered at the bottom of the component
+          onTranslationValueUpdated: (ev) => this.onTranslationValueUpdated(ev)
         };
         break;
       case FormFieldType.task:
@@ -4255,7 +4254,7 @@ export class YooFormDynamicComponent {
         }
         const cssClass = {
           'lesson-form': this.isLesson(),
-          'lesson-live-preview': this.isLessonPreview(),
+          'lesson-live-preview': this.isLessonPreview() || this.isCoursePreview(),
           [field.type]: true
         };
         return (markdown && h("yoo-markdown", { class: cssClass, isVisible: this.isCurrentSlide(slideIndex), style: { color: `${color}` }, linkPreviews: field.linkPreviews, content: translateMulti(pipes.https.transform(markdown)) }));
@@ -4638,7 +4637,7 @@ export class YooFormDynamicComponent {
     return (h(Host, { class: {
         'lesson-detail': this.isLessonDetail(),
         'lesson-question-result': this.isLessonQuestionResult(),
-        'lesson-live-preview': this.isLessonPreview(),
+        'lesson-live-preview': this.isLessonPreview() || this.isCoursePreview(),
         'mission-form': this.isMission(),
         'mission-validation': this.isMissionValidation,
         'pdf': this.isPdf,
@@ -6153,14 +6152,10 @@ export class YooFormDynamicComponent {
         "text": ""
       },
       "complexType": {
-        "original": "{ field: IFormField; value: any; name: string; opValues: string[][]; operator?: FormFilterAutocompleteOperator }",
-        "resolved": "{ field: IFormField; value: any; name: string; opValues: string[][]; operator?: FormFilterAutocompleteOperator; }",
+        "original": "IFormFieldChanged",
+        "resolved": "IFormFieldChanged",
         "references": {
-          "IFormField": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          },
-          "FormFilterAutocompleteOperator": {
+          "IFormFieldChanged": {
             "location": "import",
             "path": "@shared/interfaces"
           }
@@ -7365,6 +7360,25 @@ export class YooFormDynamicComponent {
         "tags": []
       }
     },
+    "findFieldElement": {
+      "complexType": {
+        "signature": "(fieldName: string) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
     "updateFieldValue": {
       "complexType": {
         "signature": "(fieldName: string, value: any, resetValidity?: boolean) => Promise<void>",

package/dist/collection/components/form/form-dynamic/helpers/index.js

@@ -48,12 +48,12 @@ export function getInputType(field) {
       return FormFieldType.text;
   }
 }
-export function getPreviousAndNextButtons({ hasPreviousButton, lastButtonTranslationKey, isDisabled, nextButtonHandler, previousButtonHandler, size }) {
+export function getPreviousAndNextButtons({ host, hasPreviousButton, lastButtonTranslationKey, isDisabled, nextButtonHandler, previousButtonHandler, size }) {
   const buttons = [];
   if (hasPreviousButton) {
     buttons.push({
       actionType: 'goback',
-      size: size || (isWeb() ? 'medium' : 'large'),
+      size: size || (isWeb(host) ? 'medium' : 'large'),
       text: translate('GOBACK'),
       cssClass: isNativeMobile() ? '' : 'swiper-no-swiping',
       handler: () => previousButtonHandler()
@@ -63,7 +63,7 @@ export function getPreviousAndNextButtons({ hasPreviousButton, lastButtonTransla
     buttons.push({
       text: translate(lastButtonTranslationKey),
       color: 'app-color',
-      size: size || (isWeb() ? 'medium' : 'large'),
+      size: size || (isWeb(host) ? 'medium' : 'large'),
       cssClass: isNativeMobile() ? '' : 'swiper-no-swiping',
       disabled: isDisabled,
       handler: () => nextButtonHandler()
@@ -71,24 +71,24 @@ export function getPreviousAndNextButtons({ hasPreviousButton, lastButtonTransla
   }
   return buttons;
 }
-export function getNextButton(nextButtonHandler, size) {
+export function getNextButton(host, nextButtonHandler, size) {
   return [
     {
       actionType: 'next',
       text: translate('YOOBICNEXT'),
-      size: size || (isWeb() ? 'medium' : 'large'),
+      size: size || (isWeb(host) ? 'medium' : 'large'),
       color: 'app-color',
       cssClass: isNativeMobile() ? '' : 'swiper-no-swiping',
       handler: () => nextButtonHandler()
     }
   ];
 }
-export function getLastButtons(submitButtonEntry, hasPreviousButton, showPreview, previousButtonHandler, previewButtonHandler, size) {
+export function getLastButtons(host, submitButtonEntry, hasPreviousButton, showPreview, previousButtonHandler, previewButtonHandler, size) {
   const buttons = [];
   if (hasPreviousButton) {
     buttons.push({
       actionType: 'goback',
-      size: size || (isWeb() ? 'medium' : 'large'),
+      size: size || (isWeb(host) ? 'medium' : 'large'),
       text: translate('GOBACK'),
       cssClass: isNativeMobile() ? '' : 'swiper-no-swiping',
       handler: () => previousButtonHandler()
@@ -97,7 +97,7 @@ export function getLastButtons(submitButtonEntry, hasPreviousButton, showPreview
   else if (showPreview) {
     buttons.push({
       actionType: 'preview',
-      size: size || (isWeb() ? 'medium' : 'large'),
+      size: size || (isWeb(host) ? 'medium' : 'large'),
       text: translate('PREVIEW'),
       color: 'light',
       cssClass: isNativeMobile() ? '' : 'swiper-no-swiping',
@@ -107,7 +107,7 @@ export function getLastButtons(submitButtonEntry, hasPreviousButton, showPreview
   buttons.push({ ...submitButtonEntry });
   return buttons;
 }
-export function getRecapButton(validity, showPreview, isPreview, previewHandler, submitHandler, startHandler) {
+export function getRecapButton(host, validity, showPreview, isPreview, previewHandler, submitHandler, startHandler) {
   const buttons = [];
   if (validity) {
     if (showPreview) {
@@ -115,25 +115,25 @@ export function getRecapButton(validity, showPreview, isPreview, previewHandler,
         actionType: 'preview',
         text: translate('PREVIEW'),
         color: 'light',
-        size: isWeb() ? 'medium' : 'large',
+        size: isWeb(host) ? 'medium' : 'large',
         cssClass: isNativeMobile() ? '' : 'swiper-no-swiping',
         handler: () => previewHandler()
       });
     }
     buttons.push({
       text: translate('SUBMIT'),
-      size: isWeb() ? 'medium' : 'large',
+      size: isWeb(host) ? 'medium' : 'large',
       color: 'app-color',
       handler: (ev) => submitHandler(ev)
     });
   }
   else {
     const startText = isPreview ? 'STARTPREVIEWING' : 'START';
-    const buttonText = isWeb() ? 'YOOBICNEXT' : startText;
+    const buttonText = isWeb(host) ? 'YOOBICNEXT' : startText;
     buttons.push({
       text: translate(buttonText),
       color: 'app-color',
-      size: isWeb() ? 'medium' : 'large',
+      size: isWeb(host) ? 'medium' : 'large',
       handler: () => startHandler()
     });
   }

package/dist/collection/components/form/form-footer/form-footer.css

@@ -209,6 +209,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .outer-container {
   z-index: 2;
+  padding-bottom: var(--safe-area-inset-bottom);
   background-color: var(--light, #ffffff);
 }
 :host .outer-container yoo-copyright {
@@ -262,10 +263,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   left: 0;
 }
 
-:host(.iphone-x) .outer-container {
-  padding-bottom: 20px;
-}
-
 :host(.no-gradient) .mission-footer {
   height: 3.125rem;
 }

package/dist/collection/components/form/form-footer/form-footer.js

@@ -18,7 +18,7 @@ export class YooFormFooterComponent {
     return (h("div", { class: {
         'button-container': true,
         first: index === 0 && this.countDownValue === null
-      } }, getButton({ size: isWeb(this.host) ? 'medium' : 'large', ...button })));
+      } }, getButton({ ...button, size: (isWeb(this.host) && !this.forceMobile) ? 'medium' : 'large' })));
   }
   renderTimer() {
     const countDownDisplay = getTimeOneLetterFormat(this.countDownValue);