@yoobic/yobi 8.6.0-3 → 8.6.0-5

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

@@ -9,9 +9,18 @@ import { setValueAndValidateInput } from '../../../utils/helpers/form-input-help
 export class YooFormHotzonesComponent {
   constructor() {
     this.animated = true;
+    this.readonly = undefined;
+    this.livePreview = undefined;
+    this.type = undefined;
+    this.detailedView = undefined;
     this.validity = false;
     this.required = false;
+    this.selectedHotzone = undefined;
+    this.hotzonesColor = undefined;
+    this.value = undefined;
+    this.image = undefined;
     this.hotzones = [];
+    this.isVisible = undefined;
     this.flipImage = false;
   }
   onValueChanged() {
@@ -118,7 +127,14 @@ export class YooFormHotzonesComponent {
   async showZoneDetails(hotzone) {
     const { description, image } = hotzone || {};
     if (description || image) {
-      await showModal('yoo-form-hotzones', { detailedView: true, selectedHotzone: hotzone }, 'bg-dark-40', 'scaleEnterAnimation', 'scaleLeaveAnimation', true);
+      await showModal({
+        component: 'yoo-form-hotzones',
+        componentProps: { detailedView: true, selectedHotzone: hotzone },
+        cssClass: 'bg-dark-40',
+        enterAnimation: 'scaleEnterAnimation',
+        leaveAnimation: 'scaleLeaveAnimation',
+        showBackdrop: true
+      });
       hotzone.revealed = true;
     }
     this.validate();

package/dist/collection/components/form/form-hotzones-creator/form-hotzones-creator.js

@@ -25,6 +25,8 @@ const DEFAULT_SHAPE = {
 export class YooFormHotzonesCreatorComponent {
   constructor() {
     this.value = {};
+    this.type = undefined;
+    this.translations = undefined;
   }
   get isHotZones() {
     return this.type === 'hotzone';

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

@@ -1,6 +1,10 @@
 import { closeModal } from '@shared/utils';
 import { h } from '@stencil/core';
 export class YooFormIFrameDialogComponent {
+  constructor() {
+    this.heading = undefined;
+    this.source = undefined;
+  }
   componentDidLoad() {
     var _a;
     const parentHostname = (_a = window.location) === null || _a === void 0 ? void 0 : _a.hostname;

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

@@ -5,7 +5,11 @@ import { getAppContext, openImageDetailFromRTE } from '../../../utils/helpers/co
 export class YooFormImageCollectionComponent {
   constructor() {
     this.animated = true;
+    this.detailedView = undefined;
+    this.required = undefined;
+    this.livePreview = undefined;
     this.validity = false;
+    this.selectedTile = undefined;
     this.values = [];
     this.images = [];
   }
@@ -36,7 +40,14 @@ export class YooFormImageCollectionComponent {
   async showZoneDetails(tile) {
     const { description, image } = tile || {};
     if (description || image) {
-      await showModal('yoo-form-image-collection', { detailedView: true, selectedTile: tile }, 'bg-dark-40', 'scaleEnterAnimation', 'scaleLeaveAnimation', true);
+      await showModal({
+        component: 'yoo-form-image-collection',
+        componentProps: { detailedView: true, selectedTile: tile },
+        cssClass: 'bg-dark-40',
+        enterAnimation: 'scaleEnterAnimation',
+        leaveAnimation: 'scaleLeaveAnimation',
+        showBackdrop: true
+      });
       tile.revealed = true;
     }
     this.validate();

package/dist/collection/components/form/form-image-tagging/form-image-tagging.js

@@ -9,8 +9,17 @@ import { setValueAndValidateInput } from '../../../utils/helpers/form-input-help
 export class YooFormImageTaggingComponent {
   constructor() {
     this.animated = true;
+    this.readonly = undefined;
+    this.livePreview = undefined;
     this.value = [];
+    this.validity = undefined;
+    this.answer = undefined;
     this.placeholder = 'DRAGDROPTAGS';
+    this.annotations = undefined;
+    this.image = undefined;
+    this.required = undefined;
+    this.values = undefined;
+    this.isVisible = undefined;
     this.revealDropzones = false;
   }
   async onImageChanged(newImage, oldImage) {

package/dist/collection/components/form/form-image-tagging-creator/form-image-tagging-creator.js

@@ -7,9 +7,12 @@ import { setValueAndValidateInput } from '../../../utils/helpers/form-input-help
 import { formatAnnotationForExport } from '../../3.organisms/photo-editor/photo-editor.helpers';
 export class YooFormImageTaggingCreatorComponent {
   constructor() {
-    this.value = {};
     this.hasDotBeenCreated = false;
     this.annotationValues = [];
+    this.required = undefined;
+    this.validity = undefined;
+    this.value = {};
+    this.translations = undefined;
   }
   get dotElements() {
     var _a, _b;

package/dist/collection/components/form/form-incentive-participants/form-incentive-participants.js

@@ -3,6 +3,10 @@ import { h } from '@stencil/core';
 export class YooFormIncentiveParticipantsComponent {
   constructor() {
     this.value = [];
+    this.disabled = undefined;
+    this.config = undefined;
+    this.model = undefined;
+    this.tags = undefined;
   }
   async updateValues(values, total, rowIndex, colIndex) {
     const isRowColDefined = Number.isInteger(rowIndex) && Number.isInteger(colIndex); // in this case, it means that the update is related to an input of the form-multi-input

package/dist/collection/components/form/form-incentive-targets/form-incentive-targets.js

@@ -3,9 +3,11 @@ import { forceUpdate, h } from '@stencil/core';
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormIncentiveTargetsComponent {
   constructor() {
-    this.value = [];
     this.formValues = new Set();
     this.resetQueue = [];
+    this.validity = undefined;
+    this.value = [];
+    this.disabled = undefined;
   }
   componentWillLoad() {
     var _a;

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

@@ -6,22 +6,6 @@ import { clearFocused, convertValueForInputType, initNumber, onIconClicked, onIn
 import { getRenderer } from '../../grid/ag-grid/grid-renderers';
 export class YooFormInputComponent {
   constructor() {
-    this.validators = [];
-    this.externalValidators = [];
-    this.uiValidation = { valid: true, invalid: true }; // valid to show success, invalid to show fail
-    this.disabled = false;
-    this.hasIconPrefix = true;
-    this.inputmode = '';
-    this.type = 'text';
-    this.showPasswordToggle = true;
-    this.clearable = true;
-    this.focusOnRendered = false;
-    this.size = 'large';
-    this.initialCheckboxParams = null;
-    this.fireInputChangeEvent = false;
-    this.allowDecimals = false;
-    this.format = 'input';
-    this.checkboxParams = null;
     this.hostWidth = 0;
     this.onWheel = () => {
       if (isWeb(this.host) && this.isNumberInput(this.type)) {
@@ -46,6 +30,58 @@ export class YooFormInputComponent {
           this.animateNumber();
       }
     };
+    this.validators = [];
+    this.asyncValidators = undefined;
+    this.externalValidators = [];
+    this.placeholder = undefined;
+    this.placeholdertolabel = undefined;
+    this.required = undefined;
+    this.readonly = undefined;
+    this.name = undefined;
+    this.columnDefinition = undefined;
+    this.uiValidation = { valid: true, invalid: true };
+    this.validity = undefined;
+    this.disabled = false;
+    this.step = undefined;
+    this.iconPrefix = undefined;
+    this.iconPrefixColor = undefined;
+    this.iconSuffix = undefined;
+    this.textSuffix = undefined;
+    this.iconText = undefined;
+    this.hasIconPrefix = true;
+    this.tooltip = undefined;
+    this.inputmode = '';
+    this.type = 'text';
+    this.showPasswordToggle = true;
+    this.clearable = true;
+    this.useTranslate = undefined;
+    this.debounce = undefined;
+    this.forceValueUpdate = undefined;
+    this.autocapitalize = undefined;
+    this.autocorrect = undefined;
+    this.inputTabIndex = undefined;
+    this.hideOptional = undefined;
+    this.maxCharacters = undefined;
+    this.inlineActions = undefined;
+    this.regex = undefined;
+    this.factor = undefined;
+    this.invalidMessage = undefined;
+    this.focusOnRendered = false;
+    this.translations = undefined;
+    this.min = undefined;
+    this.max = undefined;
+    this.size = 'large';
+    this.animation = undefined;
+    this.copyToClipboard = undefined;
+    this.value = undefined;
+    this.initialCheckboxParams = null;
+    this.fireInputChangeEvent = false;
+    this.allowDecimals = false;
+    this.format = 'input';
+    this.inputType = undefined;
+    this.remainingCharacters = undefined;
+    this.checkboxParams = null;
+    this.modified = undefined;
   }
   onTranslationsChange() {
     this.setLocalValue(true);

package/dist/collection/components/form/form-input-comments/form-input-comments.js

@@ -1,6 +1,12 @@
 import { getUserDisplayName } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 export class YooFormInputCommentsComponent {
+  constructor() {
+    this.readonly = undefined;
+    this.user = undefined;
+    this.comments = undefined;
+    this.isInvalid = undefined;
+  }
   async setFocus() {
     var _a;
     (_a = this.textArea) === null || _a === void 0 ? void 0 : _a.focus();

package/dist/collection/components/form/form-input-container/form-input-container.js

@@ -6,13 +6,6 @@ import { getFromLocalForage } from '../../../utils/cache';
 import { getAppContext, openImageDetailFromRTE, querySelectorDeep } from '../../../utils/helpers/common-helpers';
 export class YooFormInputContainerComponent {
   constructor() {
-    /**
-   * If fullscreen is true, will not display any label/descriptions on top (meant to be included in the field)
-   */
-    this.fullscreen = false;
-    this.animated = true;
-    this.showComments = false;
-    this.showValidationComments = false;
     this.showLabel = false;
     this.showDescription = false;
     this.shouldShowDefaultInstructions = false;
@@ -22,6 +15,33 @@ export class YooFormInputContainerComponent {
     this.onValidationCommentsChange = debounce((ev) => {
       this.validationCommented.emit(ev.detail);
     });
+    this.fullscreen = false;
+    this.formType = undefined;
+    this.required = undefined;
+    this.readonly = undefined;
+    this.size = undefined;
+    this.animated = true;
+    this.livePreview = undefined;
+    this.field = undefined;
+    this.forceReadonly = undefined;
+    this.forceDescription = undefined;
+    this.comments = undefined;
+    this.validationComments = undefined;
+    this.markAsModified = undefined;
+    this.markAsInvalid = undefined;
+    this.originalMarkAsInvalid = undefined;
+    this.time = undefined;
+    this.invalid = undefined;
+    this.hideOptional = undefined;
+    this.hideLabel = undefined;
+    this.allowFieldValidation = undefined;
+    this.commentsUser = undefined;
+    this.validationCommentsUser = undefined;
+    this.hideComplianceTags = undefined;
+    this.useUppercaseLabel = undefined;
+    this.slotInputConfig = undefined;
+    this.showComments = false;
+    this.showValidationComments = false;
   }
   get displayValidationFooter() {
     return this.allowFieldValidation && this.readonly && this.field && !isFieldWithNoValue(this.field);
@@ -118,7 +138,7 @@ export class YooFormInputContainerComponent {
     return !readOnly && (ALWAYS_SHOW.includes(fieldType) || (showDefaultInstructions && NO_INSTRUCTIONS.includes(fieldType)));
   }
   shouldShowComments() {
-    return (this.showComments || (this.readonly && this.comments));
+    return (this.showComments || (this.readonly && !this.field.forceTaskComment && this.comments));
   }
   isCheckboxOrToggle(fieldType) {
     return fieldType === FormFieldType.toggle || fieldType === FormFieldType.checkbox;
@@ -305,7 +325,7 @@ export class YooFormInputContainerComponent {
   }
   renderFooter() {
     return [
-      (this.field.allowComments || this.field.allowTask || this.field.shareToFeed) && !this.readonly && !this.field.forceTaskReadonly && (h("div", { class: "footer-container" }, this.field.allowComments && (h("span", { class: "comment-container", onClick: () => this.onToggleComments() }, h("yoo-icon", { name: "comment", color: "text-color" }))), this.field.shareToFeed && (h("span", { class: "feed-container" }, h("yoo-icon", { name: "feed", color: "text-color" }))), this.field.allowTask && (h("span", { class: "app-color newtask", onClick: () => this.onAddNewTaskContainer() }, h("div", { class: "icon" }, h("yoo-icon", { name: "circle-plus", color: "app-color" })), translate('ADDNEWACTION')))))
+      (this.field.allowComments || (this.field.allowTask && !this.field.forceTaskReadonly) || this.field.shareToFeed) && (!this.readonly || this.field.forceTaskComment) && (h("div", { class: "footer-container" }, this.field.allowComments && (h("span", { class: "comment-container", onClick: () => this.onToggleComments() }, h("yoo-icon", { name: "comment", color: "text-color" }))), this.field.shareToFeed && (h("span", { class: "feed-container" }, h("yoo-icon", { name: "feed", color: "text-color" }))), this.field.allowTask && !this.field.forceTaskReadonly && (h("span", { class: "app-color newtask", onClick: () => this.onAddNewTaskContainer() }, h("div", { class: "icon" }, h("yoo-icon", { name: "circle-plus", color: "app-color" })), translate('ADDNEWACTION')))))
     ];
   }
   renderValidationFooter() {
@@ -314,7 +334,7 @@ export class YooFormInputContainerComponent {
     return (this.displayValidationFooter && (h("div", { class: { 'footer-container': true, validation: true, mobile: isMobile } }, h("span", { class: "comment-container", onClick: () => this.onToggleValidationComments() }, h("yoo-icon", { name: "comment", size: "medium", color: "text-color" }), " ", translate(this.validationComments ? 'EDITCOMMENTS' : 'ADDCOMMENTS')), isMobile && this.renderValidationComments(), h("span", { class: "validation-container" }, h("yoo-form-checkbox", { animated: this.animated, value: this.markAsInvalid, class: "danger web", size: "large", header: translate('MARKFIELDASINVALID'), onInputChanged: (ev) => this.onValidationMarkAsInvalid(ev.detail) })))));
   }
   renderComments() {
-    return (this.shouldShowComments() && (h("yoo-form-input-comments", { class: { 'with-border-bottom': this.displayValidationComments }, readonly: this.readonly, user: this.commentsUser, comments: this.comments, onInputChanged: (ev) => this.onCommentsChange(ev), onInputFocused: (ev) => this.onCommentFocused(ev) })));
+    return (this.shouldShowComments() && (h("yoo-form-input-comments", { class: { 'with-border-bottom': this.displayValidationComments }, readonly: this.readonly && !this.field.forceTaskComment, user: this.commentsUser, comments: this.comments, onInputChanged: (ev) => this.onCommentsChange(ev), onInputFocused: (ev) => this.onCommentFocused(ev) })));
   }
   renderValidationComments() {
     return (this.displayValidationComments && (h("yoo-form-input-comments", { readonly: !this.allowFieldValidation || !this.showValidationComments, user: this.validationCommentsUser, comments: this.validationComments, onInputChanged: (ev) => this.onValidationCommentsChange(ev), onInputFocused: (ev) => this.onCommentFocused(ev), onCommentsToggled: () => this.onToggleValidationComments() })));

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

@@ -6,7 +6,11 @@ import { getJSONHighlighted } from '../../../utils/helpers/form-helpers';
 import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormJsonComponent {
   constructor() {
+    this.value = undefined;
     this.validators = [];
+    this.asyncValidators = undefined;
+    this.readonly = undefined;
+    this.required = undefined;
   }
   onRequireChanged() {
     this.validate();

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

@@ -3,7 +3,20 @@ import { h } from '@stencil/core';
 import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormLocationComponent {
   constructor() {
+    this.value = undefined;
     this.validators = [];
+    this.asyncValidators = undefined;
+    this.readonly = undefined;
+    this.multiple = undefined;
+    this.name = undefined;
+    this.disableToggle = undefined;
+    this.validity = undefined;
+    this.tags = undefined;
+    this.isHistory = undefined;
+    this.inputTabIndex = undefined;
+    this.model = undefined;
+    this.size = undefined;
+    this.aroundMe = undefined;
   }
   async updateValues(values) {
     if (this.formAutocomplete) {

package/dist/collection/components/form/form-missing-word/form-missing-word.js

@@ -7,12 +7,20 @@ import { setValueAndValidateInput } from '../../../utils/helpers/form-input-help
 // The [[0]] permission is only for YOOBIC users and should never be used for clients.\nThe clientadmin permission gives the permission to access and modify the tenant database and groups .
 export class YooFormMissingWordComponent {
   constructor() {
+    this.bracketsRegexp = /\[\[([^)]+)]]/;
+    this.parenthesesRegexp = { g: /\(\(([^)]+)\)\)/g, i: /\(\(([^)]+)\)\)/i };
     this.animated = true;
+    this.readonly = undefined;
+    this.livePreview = undefined;
+    this.value = undefined;
+    this.validity = undefined;
     this.placeholder = 'SELECTRIGHTWORDS';
+    this.sentence = undefined;
+    this.required = undefined;
+    this.isVisible = undefined;
     this.answer = [];
     this.values = [];
-    this.bracketsRegexp = /\[\[([^)]+)]]/;
-    this.parenthesesRegexp = { g: /\(\(([^)]+)\)\)/g, i: /\(\(([^)]+)\)\)/i };
+    this.revealDropzones = undefined;
   }
   onRequiredChanged() {
     this.validate();

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

@@ -5,7 +5,19 @@ import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormMissionfieldComponent {
   constructor() {
+    this.value = undefined;
+    this.type = undefined;
+    this.multiple = undefined;
+    this.readonly = undefined;
     this.validators = [];
+    this.asyncValidators = undefined;
+    this.placeholder = undefined;
+    this.hideCampaign = undefined;
+    this.fieldFilter = undefined;
+    this.inputTabIndex = undefined;
+    this.customModelValues = undefined;
+    this.size = undefined;
+    this.required = undefined;
   }
   async updateValues(values) {
     if (this.formAutocompleteCampaign) {

package/dist/collection/components/form/form-multi-input/form-multi-input.css

@@ -261,11 +261,6 @@ svg:not(:root) {
 :host .row .column .cell yoo-form-input-container {
   flex: 1;
   min-width: 6rem;
-  overflow: hidden;
-  white-space: nowrap;
-}
-:host .row .column .cell yoo-form-input-container yoo-form-text-editor {
-  white-space: initial;
 }
 :host .row .column .cell .field-translation {
   overflow: hidden;

package/dist/collection/components/form/form-multi-input/form-multi-input.js

@@ -11,7 +11,7 @@
  * https://zpl.io/29KpyAW
  */
 import { FormFieldType } from '@shared/interfaces';
-import { getUUID, isValueATranslationKey, isWeb, MODAL_BASE_ZINDEX, translate } from '@shared/utils';
+import { getUUID, isValueATranslationKey, isWeb, translate } from '@shared/utils';
 import { forceUpdate, h, Host } from '@stencil/core';
 import { isEqual, isString } from 'lodash-es';
 import Sortable from 'sortablejs';
@@ -19,24 +19,6 @@ import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormMultiInputComponent {
   constructor() {
-    /**
-     * normally the input value format is [['a', 'b'], ['c', 'd'], ['e', 'f']] where each nested array defines ROW
-     * set to TRUE if you need to use nested array as a COLUMN: [['a', 'c', 'e'], ['b', 'd', 'f']]
-     */
-    this.reverseValueDimensions = false;
-    this.allowAudit = false;
-    /**
-     * Defines this.value is simple Array instead of [[]]
-     */
-    this.isSimpleArray = false;
-    /**
-     * Specify of the values can be draggable
-     */
-    this.allowDragAndDrop = false;
-    /**
-     * Columns definition.
-     */
-    this.columns = [];
     this.isObjectValues = false;
     this.focusTo = null;
     this.deletedRowIndex = null;
@@ -44,6 +26,18 @@ export class YooFormMultiInputComponent {
     this.dragAndDropPendingEvent = null;
     this.dragAndDropPendingEventTimeout = null;
     this.sortables = [];
+    this.value = undefined;
+    this.reverseValueDimensions = false;
+    this.readonly = undefined;
+    this.required = undefined;
+    this.allowAudit = false;
+    this.translations = undefined;
+    this.isSimpleArray = false;
+    this.customSize = undefined;
+    this.allowDragAndDrop = false;
+    this.columns = [];
+    this.variantInput = undefined;
+    this.cells = undefined;
   }
   async reset(keys) {
     this.cells = this.getCells();
@@ -530,7 +524,6 @@ export class YooFormMultiInputComponent {
         debounce: TagType === 'yoo-form-input' && 500,
         maxHeight: this.host.classList.contains('image-collection') ? 60 : undefined,
         minHeight: this.host.classList.contains('image-collection') ? 60 : undefined,
-        customZIndex: TagType === 'yoo-form-text-editor' && (MODAL_BASE_ZINDEX - cell.rowIndex),
         reloadText: TagType === 'yoo-form-text-editor' && this.deletedRowIndex !== null && cell.rowIndex >= this.deletedRowIndex
       };
       textInput = (h(TagType, { ...props }, (_u = cell.column.inputComponentSlots) === null || _u === void 0 ? void 0 : _u.map(({ tag, props = {}, text }) => {

package/dist/collection/components/form/form-number-picker/form-number-picker.js

@@ -4,22 +4,19 @@ import { h } from '@stencil/core';
 import { isFinite, range } from 'lodash-es';
 export class YooFormNumberPickerComponent {
   constructor() {
-    /**
-     * Adds clear icon. Only works for the form-input
-     */
     this.clearable = true;
-    /**
-     * Set the number picker to be with buttons
-     */
+    this.required = undefined;
+    this.invalidMessage = undefined;
+    this.readonly = undefined;
     this.useButtons = false;
-    /**
-     * Component size, select from 'small', 'medium' and 'large'
-     */
+    this.stepAmount = undefined;
+    this.disabled = undefined;
     this.size = 'large';
-    /**
-     * Component state, works if useButtons is true to set to primary which will have app color, secondary which will have light background
-     */
     this.type = 'secondary';
+    this.validity = undefined;
+    this.min = undefined;
+    this.max = undefined;
+    this.value = undefined;
     this.selection = null;
     this.showValidation = false;
     this.forceShowValidation = false;
@@ -128,7 +125,14 @@ export class YooFormNumberPickerComponent {
           height: 'medium'
         });
       }
-      showModal(this.dialog, modalOptions, null, this.getModalAnimation('Enter'), this.getModalAnimation('Leave'), true, false).then((ret) => {
+      showModal({
+        component: this.dialog,
+        componentProps: modalOptions,
+        enterAnimation: this.getModalAnimation('Enter'),
+        leaveAnimation: this.getModalAnimation('Leave'),
+        showBackdrop: true,
+        displayFullscreenButton: false
+      }).then((ret) => {
         if (ret && !ret.overlayDismiss) {
           this.setValue(ret.data);
         }

package/dist/collection/components/form/form-number-picker-dialog/form-number-picker-dialog.js

@@ -3,6 +3,9 @@ import { h } from '@stencil/core';
 const HEADER_HEIGHT = 44;
 export class YooFormNumberPickerDialogComponent {
   constructor() {
+    this.value = undefined;
+    this.values = undefined;
+    this.selection = undefined;
     this.fullscreen = false;
   }
   handleModalPresent() {

package/dist/collection/components/form/form-opening-hours/form-opening-hours.js

@@ -3,10 +3,8 @@ import { h, Host } from '@stencil/core';
 import { Footer, Header, Main } from './parts';
 export class YooFormOpeningHoursComponent {
   constructor() {
-    /**
-     * If `true`, the content is not editable.
-     */
     this.readonly = false;
+    this.value = undefined;
   }
   onChange(value) {
     this.value = value;

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

@@ -1,5 +1,8 @@
 import { h } from '@stencil/core';
 export class YooFormPaletteComponent {
+  constructor() {
+    this.colors = undefined;
+  }
   render() {
     var _a;
     return (h("div", { class: "outer-container" }, (_a = this.colors) === null || _a === void 0 ? void 0 : _a.map(color => h("div", { class: "color-square", style: { backgroundColor: color } }))));

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

@@ -7,6 +7,13 @@ export class YooFormPermissionsComponent {
   constructor() {
     // private translatableRoles: string[];
     this.setUserRolesDebounce = debounce(() => this.setUserRoles(), 100);
+    this.availableRoles = undefined;
+    this.owner = undefined;
+    this.editors = undefined;
+    this.viewers = undefined;
+    this.publishers = undefined;
+    this.undefinedUserRoles = undefined;
+    this.maxUsersCount = undefined;
   }
   // private gridEl: HTMLYooGridElement;
   onRefChange() {

package/dist/collection/components/form/form-phone-number/form-phone-number.js

@@ -8,34 +8,21 @@ const getRegionalIndicatorSymbol = (letter) => String.fromCodePoint(0x1f1e6 - 65
 const getCountryFlag = (country) => getRegionalIndicatorSymbol(country[0]) + getRegionalIndicatorSymbol(country[1]);
 export class YooFormPhoneNumberComponent {
   constructor() {
-    /**
-     * If `true`, the user can clear the value.
-     */
     this.clearable = false;
-    /**
-     * If `true`, the user cannot interact with it.
-     */
     this.disabled = false;
-    /**
-     * If `true`, the dropdown is open.
-     */
     this.expanded = false;
-    /**
-     * If `true`, it requires a value inside.
-     */
+    this.name = undefined;
+    this.placeholder = undefined;
     this.required = false;
-    /**
-     * Size.
-     */
     this.size = 'medium';
-    /**
-     * If `true`, the user cannot edit the value.
-     */
     this.readonly = false;
-    /**
-     * Whether to use geolocation (will remove loader)
-     */
+    this.value = undefined;
     this.useGeolocation = true;
+    this.country = undefined;
+    this.focusedOnce = undefined;
+    this.geolocation = undefined;
+    this.nationalNumber = undefined;
+    this.options = undefined;
     this.isLoading = false;
   }
   get phoneNumber() {

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

@@ -4,12 +4,25 @@ import { get } from 'lodash-es';
 import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormPlanComponent {
   constructor() {
-    this.validators = [];
     this.fetchDataDebounce = debounce(() => {
       if (this.planRef) {
         this.fetchCustomData.emit(this.planRef);
       }
     }, 500);
+    this.value = undefined;
+    this.plan = undefined;
+    this.secondaryView = undefined;
+    this.validators = [];
+    this.asyncValidators = undefined;
+    this.missionRef = undefined;
+    this.feedRef = undefined;
+    this.placeholder = undefined;
+    this.readonly = undefined;
+    this.type = undefined;
+    this.isLesson = undefined;
+    this.checkPermission = undefined;
+    this.planRef = undefined;
+    this.required = undefined;
   }
   //The plan data has to be refreshed when the course detail has been closed to update the validity of the component
   //We cannot use the ".then" on the getAsyncExtraData method as it is triggered when a user starts the course not when they finish it

package/dist/collection/components/form/form-plan-assign/form-plan-assign.js

@@ -3,7 +3,13 @@ import { h } from '@stencil/core';
 import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormPlanAssignComponent {
   constructor() {
+    this.value = undefined;
     this.validators = [];
+    this.asyncValidators = undefined;
+    this.placeholder = undefined;
+    this.readonly = undefined;
+    this.type = undefined;
+    this.required = undefined;
   }
   async updateValues(values, search) {
     if (search.type === 'users' && this.formAutocompleteUsers) {