@yoobic/yobi 8.3.0-4 → 8.3.0-41

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

@@ -207,6 +207,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --input-border-color: var(--dark, #000000);
   --input-text-color: var(--text-color, #807f83);
   --input-font-size: var(--font-size-16, 1rem);
+  --input-flex: 1;
   --caret-color: var(--app-color, #5a30f4);
   display: block;
   width: 100%;
@@ -356,7 +357,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   box-sizing: border-box;
   position: relative;
   display: block;
-  flex: 1;
+  flex: var(--input-flex);
   width: 100%;
   min-width: 0;
   padding: var(--spacing-08, 0.5rem);
@@ -374,22 +375,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   caret-color: var(--caret-color);
 }
 :host .input-container input::-webkit-input-placeholder {
-  color: var(--text-color, #807f83);
+  color: var(--stable, #adadad);
   font-weight: var(--font-weight-400, 400);
   font-family: var(--font-family, "Lato") !important;
 }
 :host .input-container input:-moz-placeholder {
-  color: var(--text-color, #807f83);
+  color: var(--stable, #adadad);
   font-weight: var(--font-weight-400, 400);
   font-family: var(--font-family, "Lato") !important;
 }
 :host .input-container input::-moz-placeholder {
-  color: var(--text-color, #807f83);
+  color: var(--stable, #adadad);
   font-weight: var(--font-weight-400, 400);
   font-family: var(--font-family, "Lato") !important;
 }
 :host .input-container input:-ms-input-placeholder {
-  color: var(--text-color, #807f83);
+  color: var(--stable, #adadad);
   font-weight: var(--font-weight-400, 400);
   font-family: var(--font-family, "Lato") !important;
 }
@@ -896,36 +897,57 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   text-align: center;
 }
 
-:host([size=large]:not([readonly]):not(.search)) .input-container {
-  height: 3rem;
+:host([size]:not([readonly]):not(.search):not([format=contenteditable])) .input-container {
+  height: var(--container-height);
+}
+:host([size]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input {
+  height: var(--input-height);
 }
 
-:host([size=medium]:not([readonly]):not(.search)) .input-container {
-  height: 2rem;
+:host([size=none]:not([readonly]):not(.search)) {
+  --container-height: 100%;
+}
+
+:host([size=large]:not([readonly]):not(.search)) {
+  --container-height: 3rem;
+}
+:host([size=large]:not([readonly]):not(.search)) .input-container input {
+  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
+}
+:host([size=large]:not([readonly]):not(.search)) .input-container .icon-prefix {
+  padding: var(--spacing-08, 0.5rem) 0 var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
+}
+
+:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) {
+  --container-height: 2rem;
+}
+:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container {
   font-size: var(--font-size-14, 0.875rem);
   border-radius: var(--border-radius-04, 0.25rem);
 }
-:host([size=medium]:not([readonly]):not(.search)) .input-container input {
+:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input {
   font-size: var(--font-size-14, 0.875rem);
 }
-:host([size=medium]:not([readonly]):not(.search)) .input-container input::-webkit-input-placeholder {
+:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input::-webkit-input-placeholder {
   font-size: var(--font-size-14, 0.875rem);
 }
-:host([size=medium]:not([readonly]):not(.search)) .input-container input:-moz-placeholder {
+:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input:-moz-placeholder {
   font-size: var(--font-size-14, 0.875rem);
 }
-:host([size=medium]:not([readonly]):not(.search)) .input-container input::-moz-placeholder {
+:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input::-moz-placeholder {
   font-size: var(--font-size-14, 0.875rem);
 }
-:host([size=medium]:not([readonly]):not(.search)) .input-container input:-ms-input-placeholder {
+:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input:-ms-input-placeholder {
   font-size: var(--font-size-14, 0.875rem);
 }
 
-:host([size=small]:not([readonly]):not(.search)) .input-container {
-  height: 1.5rem;
+:host([size=small]:not([readonly]):not(.search):not([format=contenteditable])) {
+  --container-height: 1.5rem;
+}
+:host([size=small]:not([readonly]):not(.search):not([format=contenteditable])) .input-container {
   border-radius: var(--border-radius-04, 0.25rem);
 }
-:host([size=small]:not([readonly]):not(.search)) .input-container input {
+:host([size=small]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input {
   font-size: var(--font-size-14, 0.875rem);
 }
 
@@ -945,6 +967,90 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding: var(--spacing-04, 0.25rem) var(--spacing-02, 0.125rem) 0 var(--spacing-08, 0.5rem);
 }
 
+:host([format=contenteditable]) .input-container {
+  position: relative;
+  width: 100%;
+  color: var(--stable, #adadad);
+  border: var(--border-width-01, 0.0625rem) solid transparent;
+}
+:host([format=contenteditable]) .input-container .placeholder {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - var(--spacing-16, 1rem));
+  height: 100%;
+  padding: 0 var(--spacing-08, 0.5rem);
+  font-size: var(--input-font-size);
+}
+:host([format=contenteditable]) .input-container .placeholder yoo-icon {
+  display: none;
+}
+:host([format=contenteditable]) .input-container:hover {
+  background-color: var(--stable-light, #f1f1f1);
+}
+:host([format=contenteditable]) .input-container:hover .placeholder yoo-icon {
+  display: block;
+}
+:host([format=contenteditable]) .input-container [contenteditable] {
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: calc(var(--input-font-size) + var(--spacing-16, 1rem));
+  padding: 0 var(--spacing-08, 0.5rem);
+  overflow: auto;
+  font-size: var(--input-font-size);
+  line-height: calc(var(--input-font-size) + var(--spacing-16, 1rem));
+  border: var(--border-width-01, 0.0625rem) solid transparent;
+  border-radius: var(--border-radius-04, 0.25rem);
+  caret-color: var(--app-color, #5a30f4);
+}
+:host([format=contenteditable]) .input-container [contenteditable]:focus {
+  outline: none;
+}
+:host([format=contenteditable]) .input-container .actions {
+  position: absolute;
+  right: 0;
+  display: none;
+}
+:host([format=contenteditable]) .input-container .actions > div {
+  padding-left: var(--spacing-08, 0.5rem);
+}
+:host([format=contenteditable]) .input-container .actions:active {
+  display: flex;
+}
+:host([format=contenteditable]) .input-container.has-value {
+  color: var(--dark, #000000);
+}
+:host([format=contenteditable]) .input-container.has-value .placeholder {
+  color: transparent;
+}
+:host([format=contenteditable]) .input-container.focused {
+  background-color: var(--light, #ffffff);
+}
+:host([format=contenteditable]) .input-container.focused .placeholder yoo-icon {
+  display: none;
+}
+:host([format=contenteditable]) .input-container.focused [contenteditable] {
+  border: var(--border-width-01, 0.0625rem) solid var(--dark, #000000);
+}
+:host([format=contenteditable]) .input-container.focused .actions {
+  display: flex;
+}
+
+:host([size=small]) .actions {
+  bottom: calc(var(--spacing-32, 2rem) * -1);
+}
+
+:host([size=medium]) .actions {
+  bottom: calc(var(--spacing-40, 2.5rem) * -1);
+}
+
+:host([size=large]) .actions {
+  bottom: calc(var(--spacing-56, 3.5rem) * -1);
+}
+
 :host(.accent) .input-container {
   border-color: var(--accent, #276ef1);
 }

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

@@ -1,8 +1,8 @@
-import { copyToClipboard, debounce as _debounce, extractTextFromStringHTML, isAndroid, isAnimationsDisabled, isHTML, isIOS, isNativeMobile, isNullOrUndefined, isSafari, isWeb, resizeObserve, showToast, translate } from '@shared/utils';
+import { copyToClipboard, debounce as _debounce, enableKeyboardResize, extractTextFromStringHTML, isAndroid, isAnimationsDisabled, isHTML, isIOS, isNativeMobile, isNullOrUndefined, isSafari, isWeb, resizeObserve, showToast, translate } from '@shared/utils';
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { isFunction, isNumber, isString } from 'lodash-es';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
-import { convertValueForInputType, initNumber, onIconClicked, onInputBlurred, onInputClear, onInputFocused, setValidator, setValueAndValidateInput, validate } from '../../../utils/helpers/form-input-helpers';
+import { clearFocused, convertValueForInputType, initNumber, onIconClicked, onInputBlurred, onInputClear, onInputFocused, setValidator, setValueAndValidateInput, validate } from '../../../utils/helpers/form-input-helpers';
 import { getRenderer } from '../../grid/ag-grid/grid-renderers';
 export class YooFormInputComponent {
   constructor() {
@@ -20,6 +20,7 @@ export class YooFormInputComponent {
     this.initialCheckboxParams = null;
     this.fireInputChangeEvent = false;
     this.allowDecimals = false;
+    this.format = 'input';
     this.checkboxParams = null;
     this.hostWidth = 0;
     this.onWheel = () => {
@@ -160,11 +161,19 @@ export class YooFormInputComponent {
       this.inputElement.value = this.value;
       this.updateRemainingCharacters();
     }
+    if (isNativeMobile() && isIOS()) {
+      enableKeyboardResize();
+    }
     if (this.focusOnRendered) {
       this.setFocus();
     }
     this.animateContent();
   }
+  componentDidUpdate() {
+    if (this.format === 'contenteditable' && !this.modified) {
+      this.contentEditableElement.textContent = `${this.value || ''}`;
+    }
+  }
   onInitInput() {
     var _a, _b;
     setValidator(this);
@@ -270,7 +279,7 @@ export class YooFormInputComponent {
   }
   setLocalValue(updateTranslation) {
     var _a;
-    if (((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) > 0 && isString(this.value) && updateTranslation) {
+    if (((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.value && isString(this.value) && updateTranslation) {
       isHTML(this.value) && (this.value = extractTextFromStringHTML(this.value));
       const key = this.value.replace(/%/g, '');
       const translationIndex = this.translations.findIndex((tran) => { var _a; return tran.key === key || tran.key === ((_a = this.translationKey) === null || _a === void 0 ? void 0 : _a.replace(/%/g, '')); });
@@ -398,7 +407,7 @@ export class YooFormInputComponent {
         } },
         this.finalIconPrefix && this.hasIconPrefix && (h("div", { class: "icon-prefix", onClick: () => (this.inputElement && this.inputElement.focus ? this.inputElement.focus() : null) },
           h("yoo-icon", { name: this.finalIconPrefix, size: this.getIconSize() }))),
-        h("input", { type: this.inputType, name: this.name, tabindex: this.inputTabIndex, ref: (el) => (this.inputElement = el), autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, inputmode: this.inputmode ? this.inputmode : undefined, placeholder: !this.placeholdertolabel && this.internalPlaceholder ? translate(this.internalPlaceholder) : '', required: this.required, onBlur: (ev) => onInputBlurred(ev, this, '.input-container', this.type, this.uiValidation), onChange: (ev) => this.fireInputChangeEvent ? this.onInputChanged(ev) : ev === null || ev === void 0 ? void 0 : ev.stopPropagation(), onInput: (ev) => this.onInputChanged(ev), onFocus: () => onInputFocused(this, '.input-container'), onKeyDown: (ev) => this.onKeyPress(ev), onWheel: this.onWheel, min: this.min, max: this.max, pattern: this.getPattern(), step: this.step, class: {
+        h("input", { type: this.inputType, name: this.name, tabindex: this.inputTabIndex, ref: (el) => (this.inputElement = el), autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, autoComplete: ['username', 'password'].includes(this.name) ? this.name : undefined, inputmode: this.inputmode ? this.inputmode : undefined, placeholder: !this.placeholdertolabel && this.internalPlaceholder ? translate(this.internalPlaceholder) : '', required: this.required, onBlur: (ev) => onInputBlurred(ev, this, '.input-container', this.type, this.uiValidation), onChange: (ev) => this.fireInputChangeEvent ? this.onInputChanged(ev) : ev === null || ev === void 0 ? void 0 : ev.stopPropagation(), onInput: (ev) => this.onInputChanged(ev), onFocus: () => onInputFocused(this, '.input-container'), onKeyDown: (ev) => this.onKeyPress(ev), onWheel: this.onWheel, min: this.min, max: this.max, pattern: this.getPattern(), step: this.step, class: {
             last: !((hasValue && this.clearable) || (this.type === 'password' && this.showPasswordToggle) || (this.uiValidation.invalid && this.validity === false)),
             'hide-value': (_a = this.checkboxParams) === null || _a === void 0 ? void 0 : _a.value,
             'has-icon-prefix': this.finalIconPrefix && this.hasIconPrefix
@@ -423,6 +432,65 @@ export class YooFormInputComponent {
       this.uiValidation.invalid && h("div", { class: { 'invalid-message': true, invalid: (this.validity === false && !this.inputReloaded) } }, translate(invalidMessageKey))
     ];
   }
+  contentEditableInputBlurred(ev) {
+    var _a;
+    this.inputBlurred.emit(ev);
+    clearFocused(this, '.input-container');
+    if (!((_a = this.contentEditableActionsElement) === null || _a === void 0 ? void 0 : _a.offsetParent)) {
+      this.cancel();
+    }
+  }
+  onContentEditableInputChanged(ev, skipChecks = true) {
+    var _a, _b;
+    if (this.fireInputChangeEvent || skipChecks) {
+      this.localValue = (_b = (_a = this.contentEditableElement) === null || _a === void 0 ? void 0 : _a.firstChild) === null || _b === void 0 ? void 0 : _b.textContent;
+      this.modified = this.value !== this.localValue;
+    }
+    else {
+      ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
+    }
+  }
+  onContentEditableKeyPress(ev) {
+    this.onKeyPress(ev);
+    if (ev.key === 'Enter') {
+      this.confirm();
+      this.contentEditableElement.blur();
+    }
+    else if (ev.key === 'Escape') {
+      this.cancel();
+      this.contentEditableElement.blur();
+    }
+  }
+  cancel() {
+    this.setLocalValue();
+    this.modified = false;
+  }
+  confirm() {
+    this.value = this.localValue;
+    this.modified = false;
+  }
+  renderContentEditable() {
+    return (h("div", { class: {
+        'input-container': true,
+        placeholderlabel: this.placeholdertolabel,
+        'has-value': !!this.value || !!this.localValue
+      } },
+      h("div", { class: "placeholder" },
+        translate(this.internalPlaceholder),
+        h("yoo-icon", { name: "pen", size: this.getIconSize(), color: "stable" })),
+      h("div", { contenteditable: !this.disabled, tabindex: this.inputTabIndex, ref: (el) => (this.contentEditableElement = el), autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, spellcheck: "false", onBlur: (ev) => this.contentEditableInputBlurred(ev), onChange: (ev) => this.onContentEditableInputChanged(ev, false), onInput: (ev) => this.onContentEditableInputChanged(ev), onFocus: () => onInputFocused(this, '.input-container'), onKeyDown: (ev) => this.onContentEditableKeyPress(ev), onWheel: () => this.onWheel() }, this.value),
+      this.renderActions()));
+  }
+  renderActions() {
+    return (h("section", { class: "actions", ref: (el) => (this.contentEditableActionsElement = el) },
+      this.renderAction('cancel'),
+      this.renderAction('confirm')));
+  }
+  renderAction(type) {
+    return h("div", { class: type },
+      h("yoo-button", { disabled: !this.modified || this.disabled, size: this.size, customColor: "stable-alt", onClick: () => this[type]() },
+        h("yoo-icon", { size: this.getIconSize(), name: type === 'cancel' ? 'close' : 'tick' })));
+  }
   render() {
     return (h(Host, { class: {
         'swiper-no-swiping': true,
@@ -431,7 +499,7 @@ export class YooFormInputComponent {
         'has-checkbox': this.checkboxParams || this.tooltip,
         'no-animation': isAnimationsDisabled(),
         ...getAppContext(this.host)
-      } }, this.readonly ? this.renderReadonly() : this.renderEditable()));
+      } }, this.format === 'contenteditable' ? this.renderContentEditable() : this.readonly ? this.renderReadonly() : this.renderEditable()));
   }
   static get is() { return "yoo-form-input"; }
   static get encapsulation() { return "shadow"; }
@@ -826,8 +894,8 @@ export class YooFormInputComponent {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "'email' | 'number' | 'password' | 'text'",
+        "resolved": "\"email\" | \"number\" | \"password\" | \"text\"",
         "references": {}
       },
       "required": false,
@@ -1287,12 +1355,31 @@ export class YooFormInputComponent {
       "attribute": "allow-decimals",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "format": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'input' | 'contenteditable'",
+        "resolved": "\"contenteditable\" | \"input\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "format",
+      "reflect": true,
+      "defaultValue": "'input'"
     }
   }; }
   static get states() { return {
     "inputType": {},
     "remainingCharacters": {},
-    "checkboxParams": {}
+    "checkboxParams": {},
+    "modified": {}
   }; }
   static get events() { return [{
       "method": "validityChanged",

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

@@ -202,7 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 /*!
- * froala_editor v4.0.12 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -1026,6 +1026,10 @@ span.fr-img-caption.fr-view {
   padding: var(--spacing-08, 0.5rem) 0;
 }
 
+:host(.form-readonly[size=small]) {
+  padding: 0;
+}
+
 :host(.form-readonly.quickview) .description .label .right-side,
 :host(.form-readonly.quickview) .description .optional .right-side,
 :host(.form-readonly.quickview) .top-container .label .right-side,

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

@@ -308,7 +308,7 @@ export class YooFormInputContainerComponent {
   renderLabel() {
     var _a, _b, _c;
     const contentClass = ((_a = this.field) === null || _a === void 0 ? void 0 : _a.title) ? 'field-title-name ' : '';
-    return (h("div", { ref: (el) => (this.labelElement = el), class: {
+    return (h("label", { ref: (el) => (this.labelElement = el), class: {
         label: true,
         center: (_c = (_b = this.field) === null || _b === void 0 ? void 0 : _b.extraClass) === null || _c === void 0 ? void 0 : _c.includes('center'),
         readonly: this.readonly,

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

@@ -11,9 +11,9 @@
  * https://zpl.io/29KpyAW
  */
 import { FormFieldType } from '@shared/interfaces';
-import { getUUID, isValueATranslationKey, isWeb, translate } from '@shared/utils';
+import { getUUID, isValueATranslationKey, isWeb, MODAL_BASE_ZINDEX, translate } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch } from '@stencil/core';
-import { isEqual } from 'lodash-es';
+import { isEqual, isString } from 'lodash-es';
 import Sortable from 'sortablejs';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
@@ -99,6 +99,10 @@ export class YooFormMultiInputComponent {
     this.focusTo = null;
   }
   componentWillRender() {
+    var _a, _b;
+    if (this.isSimpleArray && !Array.isArray((_a = this.value) === null || _a === void 0 ? void 0 : _a[0])) {
+      this.value = ((_b = this.value) === null || _b === void 0 ? void 0 : _b[0]) ? [this.value] : [[]];
+    }
     this.destroyDragAndDrop();
     // helps to control re-rendering when row has been added by 'enter' pressing
     if (this.tempMinRows !== undefined) {
@@ -531,7 +535,7 @@ 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' && 20000 - cell.rowIndex,
+        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 }) => {
@@ -628,7 +632,7 @@ export class YooFormMultiInputComponent {
   }
   renderTranslation(text) {
     var _a;
-    if (((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) > 0 && text && !isValueATranslationKey(text)) {
+    if (((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) > 0 && text && isString(text) && !isValueATranslationKey(text)) {
       const key = text.replace(/%/g, '');
       const keyRemovedHTML = key === null || key === void 0 ? void 0 : key.replace(/(<([^>]+)>)/ig, '');
       const translationIndex = this.translations.findIndex((tran) => tran.key === key || keyRemovedHTML === tran.key);

package/dist/collection/components/form/form-products-sales/form-products-sales.js

@@ -211,7 +211,7 @@ export class YooFormProductsSalesComponent {
     const displayAllProductsLimitReached = this.value.length > DISPLAY_ALL_PRODUCTS_LIMIT;
     const products = this.value.filter((p) => p.product && (!displayAllProductsLimitReached || this.selectedProducts.includes(p.productRef)));
     return (h("div", { class: "outer-container" },
-      displayAllProductsLimitReached && (h("yoo-form-catalog", { ref: (el) => (this.catalogEl = el), selectorMode: true, onInputChanged: (ev) => this.onProductsSelected(ev), onProductScanned: (ev) => this.onProductScanned(ev), onProductNotFound: () => this.onProductNotFound(), onValidityChanged: (ev) => this.onCatalogValidityChanged(ev), onFetchData: (ev) => this.onCatalogFetchData(ev), onFetchFieldFilterData: (ev) => this.onCatalogFetchFieldFilterData(ev) })),
+      displayAllProductsLimitReached && (h("yoo-form-catalog", { ref: (el) => (this.catalogEl = el), selectorMode: true, keepAutocompleteSelection: true, onInputChanged: (ev) => this.onProductsSelected(ev), onProductScanned: (ev) => this.onProductScanned(ev), onProductNotFound: () => this.onProductNotFound(), onValidityChanged: (ev) => this.onCatalogValidityChanged(ev), onFetchData: (ev) => this.onCatalogFetchData(ev), onFetchFieldFilterData: (ev) => this.onCatalogFetchFieldFilterData(ev) })),
       h("div", { class: "label" }, translate('PRODUCTS')),
       h("div", { class: "total-items" }, translate('ITEMSCOUNT', { n: (products === null || products === void 0 ? void 0 : products.length) || 0 })),
       this.renderProducts(products),

package/dist/collection/components/form/form-progress-indicator/form-progress-indicator.css

@@ -207,7 +207,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .scroll-container {
   position: relative;
-  min-height: 6rem;
+  min-height: 5rem;
   margin: var(--scroll-container-margin);
   padding-bottom: var(--spacing-08, 0.5rem);
   background-color: var(--scroll-container-color);

package/dist/collection/components/form/form-qrcode/assets/form-qrcode/general-course-qr-code.svg

@@ -0,0 +1,13 @@
+<svg width="192" height="192" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M117.317 142.02a.657.657 0 0 1-.619.757c-11.25 0-23.343.404-34.53-.036-.473 0-.46-.587-.333-.932.467-1.372 2.13-5.218 3.262-5.928.339-.216.957 0 .853.475-.105.475-2.294 3.835-2.773 5.119 10.721-.364 22.007.123 32.78.117a20.935 20.935 0 0 0-2.077-5.013c-8.457.101-17.274.33-25.678.077-.647 0-.758-1.003-.082-1.038 8.526-.463 17.508-.1 26.086-.202a.704.704 0 0 1 .712.329c.861 1.503 2.29 4.68 2.402 6.275h-.003zm31.204-9.468c.321.387.302 1.097-.322 1.084-30.596-.462-61.275.124-91.854-.456-.683 0-.765-1.073-.064-1.08 29.943-.327 60.01.458 89.986.304-2.277-1.758-6.28-4.813-8.212-6.548-24.82.493-54.102.202-76.685.175-.414.587-7.615 6.314-8.59 6.965a.513.513 0 0 1-.726-.055.52.52 0 0 1 .056-.73c.752-.757 8.333-7.299 8.753-7.299 28.636.101 51.687-.182 76.962-.24.294-.014.585.068.828.234.964.65 9.582 7.352 9.822 7.622l.046.024zm16.425 3.218c-6.1-3.833-16.177-10.546-22.498-13.226-.612-.258-1.125.587-.519.927 7.896 4.555 15.216 8.319 22.76 13.754 6.302 4.543-1.669 8.02-6.39 8.099-39.374.663-80.446.34-120.462-.686-4.434-.117-5.252-3.91-1.05-7.14 3.887-3.008 8.257-5.407 12.394-8.027 2.457-1.56 4.932-3.084 7.372-4.656.617-.399.1-1.407-.55-1.02a747.343 747.343 0 0 0-14.886 9.11 51.384 51.384 0 0 0-6.478 4.556c-6.804 5.863 2.223 14.657 11.263 14.821 10.061.17 110.663.352 113.768-.24 6.202-1.181 14.272-10.618 5.276-16.272zM174.911 51.602c-8.306-.729-21.008.743-27.965 3.292-5.529-9.95-17.065-14.324-24.02-15.285-.648-.09-.787-.176-.98.593-1.673 6.78-5.291 18.646-7.858 25.147-.248.62.726.98.987.393 2.453-5.971 6.576-18.83 7.942-25.022 14.187 2.666 19.512 9.603 23.068 14.845-2.271 5.651-4.569 11.346-6.646 17.076-.187.512.684.858.901.35 2.372-5.599 4.566-11.287 6.776-16.955 8.378-2.965 21.956-3.953 27.833-3.349-1.056 3.27-10.654 33.08-10.577 33.593-5.788-1.056-14.067-1.445-19.805-.139a.526.526 0 1 0 .2 1.032c7.416-.666 11.43-1.059 18.73.223 1.222.219 1.352.425 1.86-1a970.378 970.378 0 0 0 10.874-33.794c.102-.428-.066-.89-1.32-1" fill="#191919"/>
+        <path d="M177.556 60.325c-2.919 10.598-8.713 27.738-10.63 34.899-3.381-1.371-19.277-3.592-23.475-3.706a.609.609 0 0 0-.603.614c.004.29.213.536.499.589a130.42 130.42 0 0 1 20.73 3.375c3.75.911 3.538 1.416 4.685-2.025 2.336-7.004 7.469-24.679 10.156-33.353.233-.767-1.145-1.174-1.362-.393" fill="#5A30F4"/>
+        <path d="M185.3 86.699c-.804-.946-.974-2.542-1.293-2.834-.428-.44-1.48.017-.566 2.09 1.16 2.614 2.516 1.518 1.86.744m-14.572 25.448c-.767-.922-.465-1.577-1.01-1.9-.545-.322-1.341.687-.104 2.406.457.633 2.048 2.025 2.425 1.07.217-.57-.874-1.053-1.31-1.576" fill="#191919"/>
+        <path d="M24.083 114.655A218.087 218.087 0 0 1 8.677 96.888c-.447-.595.437-1.253.915-.694 5.102 5.968 10.178 11.939 15.637 17.581.647.665-.504 1.55-1.146.88m29.523.897c-5.506 2.838-16.932 8.095-23.104 9.004-4.412.665-5.33-3.772-1.633-6.584 6.5-4.94 21.02-8.15 23.723-10.589 1.75-1.58-15.584-20.85-19.708-24.036-.504-.389-15.395 5.285-17.205 5.919C9.23 91.573 1.012 96.108 6.3 104.294c4.331 6.725 12.14 15.536 18.597 20.187a7.647 7.647 0 0 0 6.082 1.307 112.265 112.265 0 0 0 23.197-9.045c.749-.383.18-1.579-.57-1.191" fill="#5A30F4"/>
+        <path d="M52.414 114.61c-1.645-1.077-1.577-2.34-1.19-3.988.197-.837-1.525-1.622-1.68 1.001-.162 2.812 2.392 4.643 2.975 3.72a.57.57 0 0 0-.105-.733" fill="#191919"/>
+        <path d="M56.035 92.837c-.161-.58-.66-.525-1.107-.387a5.04 5.04 0 0 1-3.214-.324c-.218-.094-4.575.556-5.478.75-.653.138-.562 1.29.138 1.199 3.377-.424 2.05-.111 5.428-.574 1.436.76 4.597.645 4.233-.664zm-42.94-30.179c-.159-.652-1.243-.582-1.19.123.2 2.582 2.902 19.59 3.846 21.99.284.678 1.333.342 1.367-.34.108-2.413-3.396-19.437-4.017-21.8l-.007.027z" fill="#5A30F4"/>
+        <path d="M74.11 64.915c-.095-1.229-3.357-18.628-3.978-20.513-.382-1.167-.29-1.13-1.359-.838-5.18 1.425-23.758 8.61-26.06 11.678-6.754-2.3-18.867-3.73-26.78-1.365-.46.144-.631.458-.556 1.136.83 7.047 3.547 23.57 4.738 30.492a.61.61 0 0 0 1.18-.193c-.568-6.993-3.853-23.415-4.807-30.4a44.165 44.165 0 0 1 25.888 1.704c2.388 10.64 4.218 20.745 7.106 31.918-4.061.59-2.621.436-6.684 1.113-.643.104-.45 1.044.175.973 1.106-.12 7.546-.901 7.567-.915 1.22-.89 2.602-1.53 4.068-1.883a.615.615 0 0 0-.283-1.125 10.83 10.83 0 0 0-3.595 1.556c-1.664-7.678-5.152-23.032-7.187-32.16 6.759-4.774 15.8-8.238 25.57-11.243.947 3.203 2.956 16.34 4.022 20.453.14.552 1.014.106.976-.388" fill="#191919"/>
+        <path d="M186.794 87.157c-1.79 3.838-7.58 15.77-14.6 28.875l-17.703-1.338c-2.973-.222-9.574-1.68-6.908-6.148 7.19.27 13.197.084 20.498 1.121.38.014.738-.172.946-.49 3.79-7.136 12.338-21.02 14.645-27.882.132-.393.116-.808-.61-1.023-1.855-.562-4.74-.39-7.761-.32-1.7 6.244-5.108 17.733-7.05 18.653-1.71.815-13.351-3.526-16.649-3.201-1.662 3.41-4.088 9.456-5.547 12.928-2.52 6.02 4.738 7.565 8.955 7.876 5.614.418 11.241.615 16.837 1.261 1.328.148 1.109-.143 1.91-1.5 3.564-6.059 13.78-26.04 14.014-28.318.075-.48-.75-.98-.977-.494M85.667 100.992c.515.001 1.06.004 1.612.009l.554.005c2.584.032 5.152.123 5.39.364.238.484.397.968.394 1.532 0 .276.044 2.105.067 4.027l.006.578c.01 1.253.01 2.483-.023 3.29-.004.807.15 2.66-1.133 2.655-1.922-.007-9.372.124-11.215.198-.446.072-.961-.133-1.03-.614l-.009-.116v-.044c-.004-.22-.02-1.228-.023-2.567v-1.132c.01-3.258.108-7.514.55-7.857.481-.24.962-.318 1.523-.316h.083l.146-.001c.352-.002 1.055-.008 1.94-.01h1.168zm11.328 8.244c.074.82.222 1.72.22 2.539.531.002 1.063.086 1.519.088.455.084.449 1.803-.007 1.801-.76-.003-1.52-.007-2.28-.092-.455-.083-.833-.494-.831-1.067.004-.983.008-2.047.087-3.11.078-.328 1.218-.486 1.292-.159zm17.847-2.238c.465.726.373 4.345.292 5.229-.002.402-.315.803-.783.801a42.496 42.496 0 0 1-6.39.215c-1.09-.004-1.085-1.693-.072-1.609 1.87.088 3.74.016 5.611-.138.08-.643.092-3.698.485-4.501 0-.033.012-.052.032-.068l.078-.053.046-.04c.235-.16.546-.078.7.164zm-8.577-2.55c1.01.004 1.709.017 1.82.036.786.083.781 1.445-.007 1.602-.55.078-4.722-.019-5.352-.021.075.881.217 4.968.291 6.09.077.48-1.654.474-1.652-.007-.03-.495-.06-1.464-.077-2.495l-.01-.692c-.004-.355-.007-.706-.007-1.037v-.48c.003-.538.012-.989.03-1.265l.008-.12-.216-.018c-1.136-.08-4.685-.19-4.976-.564-.157-.24-.156-.481.002-.64.186-.188 2.742-.296 5.446-.348l.678-.012c1.017-.016 2.029-.025 2.918-.028h1.104zm-24.467-1.754h-.036c0 .116.047 2.24.095 4.434l.014.599.095 4.314c.16 0 9.694-.284 9.934-.283.002-.346.028-2.396.055-4.455l.008-.617.053-3.934v-.017h-.088l-.078-.001h-.22l-9.638-.04h-.194zm20.678-3.1c1.835.086 4.707.255 8.857.271.479.002.797.319.795.793-.003.868-.35 7.658-.675 9.078 0 .316-.24.473-.56.472-.319-.001-.637-.318-.636-.634a5.517 5.517 0 0 1-.018-.426v-.174c.007-1.068.157-3.084.37-7.454-1.676-.006-3.352-.013-5.028-.098-3.75-.173-5.825-.18-6.302-.657-.079-.158-.158-.237-.158-.316-.158-.396.083-.79.483-.946.957-.075 1.915-.071 2.872.09zm-16.28 4.496.275.03 2.243.008c.881.004 1.122.005 1.117 1.208.075 1.444-.011 2.807-.337 4.169-.08.16-.241.32-.402.319-.881-.003-1.682-.007-2.483-.09-.56-.082-2.004.153-2.402-.41-.16-.242-.221-4.973.34-5.132a4.96 4.96 0 0 1 1.649-.102zm27.752-3.53c.245-.867 1.213-1.022 1.45-.072.158.87.236 1.66.152 2.529v.3c-.002.647-.065 1.517-.894 1.514-1.45.073-.953-3.48-.708-4.27zm-18.045-2.488c.41.001.819.331.817.823.077 1.15.073 2.216-.096 3.364-.083.41-.412.655-.822.653a.822.822 0 0 1-.817-.824c.004-.82.007-1.559.092-2.379-1.393-.17-3.69-.014-3.685-1.08.001-.33.166-.575.494-.655.985-.16 1.64.088 4.017.098zm-13.174-.151.813.003 2.454.009c.395.002.79.308.788.764a.778.778 0 0 1-.795.759c-1.82-.083-4.352-.093-4.905-.323a.934.934 0 0 1-.394-.382c-.158-.305.082-.685.398-.76l.165-.033.056-.01c.114-.017.25-.025.632-.027h.788zm17.64-7.11c.234.98.31 1.876.307 2.853-.004.897.072 1.875.068 2.853H102.114c2.57-.005 7.57-.025 10.285-.03h1.35l.15.001c.713.003 1.506-.157 1.978.497.158.164.078.408-.002.652-.697 1.026-6.323.571-7.88.54l-.126-.002-7.924-.032c-.475-.002-.79-.33-.79-.819.019-4.643-.294-5.54.186-6.842.321-1.221.794-.404 1.029.33zm-3.574-10.136c.128 1.125.255 2.304.291 3.447l.01.68 3.727.015c.555.002.868 1.353.074 1.35-.158 0-3.411.304-3.728.223.076.794.057 5.475.126 8.332a.88.88 0 0 1-.876.87c-3.747-.015-7.45.015-11.175.022l-3.735-.002-.124-.024c-.478-.12-.746-.492-.745-.932.002-.476.4-.792.876-.79 4.679.019 9.358.037 14.038-.023-.028-.803-.05-2.89-.054-5.172v-1.319l.002-.661c.012-2.966.063-5.743.183-6.02.08-.238.239-.317.398-.395.317-.078.634.082.712.4zm-10.744-1.187c.515.001 1.06.004 1.612.009l.553.005c2.585.032 5.153.123 5.39.364.24.484.398.968.395 1.532 0 .276.044 2.105.067 4.027l.006.578c.01 1.253.01 2.483-.023 3.29-.004.807.15 2.66-1.133 2.655-1.922-.007-9.372.124-11.215.198-.446.072-.961-.133-1.03-.614l-.009-.116v-.045c-.004-.235-.022-1.375-.024-2.855v-.57c.001-.679.006-1.408.016-2.141l.01-.55c.05-2.657.186-5.214.525-5.439.481-.24.962-.318 1.523-.316h.083l.146-.001c.352-.002 1.055-.008 1.94-.01h1.168zm26.81 0c.539.003.905.01.997.026.562.08 1.448-.073 1.929.4.32.473.478.945.476 1.495.038.187.069 1.952.082 3.855l.004.604.003.9v.865c-.003 1.207-.016 2.194-.044 2.5-.002.472-.005 1.337-.65 1.49-.394.077-3.204.124-6.024.143l-.676.004c-.449.003-.893.004-1.322.005h-1.524c-1.418-.003-2.457-.017-2.599-.04-.286-.072-.444-.328-.474-.605l-.006-.105v-.119c-.005-.566-.036-2.656-.066-4.782l-.008-.607a513.24 513.24 0 0 1-.047-4.153v-.242c.004-.943.328-1.413 1.615-1.487.348-.033 2.054-.075 3.916-.106l.51-.008.257-.003.581-.008c.868-.012 1.708-.02 2.398-.021h.673zm-30.68 1.702h-.035c0 .116.047 2.24.095 4.434l.014.599.095 4.314c.075 0 2.204-.062 4.472-.128l.62-.018c2.217-.065 4.401-.128 4.787-.136l.055-.001c.002-.346.028-2.396.055-4.455l.008-.617.053-3.934v-.017h-.088l-.078-.001h-.22l-9.638-.04h-.194zm22.26-.062c.043.307.105 2.37.149 4.545l.01.503.01.586c.024 1.361.038 2.658.035 3.484.443-.143 2.558-.213 4.728-.247l.592-.008a299.62 299.62 0 0 1 3.198-.022h1.457c0-.182.005-.306.01-.413l.005-.063.004-.06.005-.06.006-.061c.048-.537.14-1.464.166-8.144a57.206 57.206 0 0 0-10.375-.04zm-17.864 1.458.274.03 2.241.008c.32.002.72-.077.96.245.158.321.237.643.155.963.075 1.444-.01 2.807-.336 4.169-.08.16-.241.32-.401.319-.88-.003-1.68-.007-2.48-.09-.56-.082-2.002.153-2.4-.41-.159-.242-.22-4.973.341-5.132a4.947 4.947 0 0 1 1.646-.102zm25.751.274c.155.322.232.644.152.965.073 1.446-.01 2.811-.328 4.175-.078.16-.235.32-.39.32l-.06-.002-.168-.007c-.898-.038-4.163-.18-4.297-.25-.156-.081-.155-.162-.233-.242a18.087 18.087 0 0 1-.219-4.097c.002-.482.082-.964.55-1.123.313-.079 4.76-.06 4.993.261z" fill="#5A30F4"/>
+        <path d="M61.745 118.63c.303-12.777.776-43.324.922-46.061l70.975.474c.297 5.1 3.168 43.13 3.168 44.61-3.91.222-73.739 1.053-75.065.977m76.028-44.15c-.44-4.228-1.896-5.076-5.322-5.15-.44 0-37.3-.318-49.771-.425l-4.013-.028c-7.399-.064-12.954-.117-14.285-.14-3.325-.065-4.942 3.07-5.03 5.579-.15 4.133-1.05 36.254-.98 47.75 3.098.146 68.476-.076 82.556-.368.035-1.625-2.664-42.487-3.155-47.219" fill="#191919"/>
+    </g>
+</svg>

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

@@ -201,30 +201,50 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-:host .outer-container.readonly {
-  padding-top: var(--spacing-08, 0.5rem);
-  text-align: center;
-  background: var(--stable-ultralight, #fafafa);
+:host .outer-container .inner-container {
+  margin: var(--spacing-08, 0.5rem) 0;
 }
-:host .outer-container .canvas {
-  width: 12.5rem;
-  height: 12.5rem;
+:host .outer-container.readonly yoo-img {
+  width: 50%;
+  margin: auto;
+}
+:host .outer-container.readonly p.description {
+  margin-bottom: var(--spacing-24, 1.5rem);
+  font-size: var(--font-size-14, 0.875rem);
+}
+:host .outer-container.readonly .inner-container {
+  align-items: center;
+  margin-top: var(--spacing-08, 0.5rem);
   padding: var(--spacing-08, 0.5rem);
-  border-radius: var(--border-radius-04, 0.25rem);
+  background: var(--stable-light, #f1f1f1);
+  border-radius: var(--border-radius-08, 0.5rem);
 }
-
-:host([size=medium]) .outer-container .canvas {
+:host .outer-container.readonly .inner-container .header-container {
+  display: flex;
+  justify-content: space-between;
+}
+:host .outer-container.readonly .inner-container .header-container span {
+  width: 100%;
+  font-weight: var(--font-weight-700, 700);
+}
+:host .outer-container.readonly .inner-container .header-container yoo-button {
+  width: 100%;
+}
+:host .outer-container.readonly .inner-container .canvas-container {
   width: 6.25rem;
   height: 6.25rem;
-}
-:host([size=medium]) .outer-container.readonly {
-  margin-top: 0.5rem;
-  padding: 1rem;
-  border-radius: 0.5rem;
+  margin-top: var(--spacing-16, 1rem);
+  padding: var(--spacing-16, 1rem);
+  background-color: var(--light, #ffffff);
+  border-radius: var(--border-radius-16, 1rem);
 }
 
-:host([size=large]) .outer-container.readonly {
-  margin-top: 1.25rem;
-  padding: 5rem;
-  border-radius: 1.25rem;
+:host([size=large]) .outer-container.readonly .inner-container {
+  margin-top: var(--spacing-16, 1rem);
+  padding: var(--spacing-16, 1rem);
+  border-radius: var(--border-radius-08, 0.5rem);
+}
+:host([size=large]) .outer-container.readonly .inner-container .canvas-container {
+  width: 12.5rem;
+  height: 12.5rem;
 }