@yoobic/yobi 8.2.2 → 8.3.0-2

package/dist/cjs/yoo-form-location.cjs.entry.js

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const formInputHelpers = require('./form-input-helpers-a04f76d2.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const formInputHelpers = require('./form-input-helpers-a2843dc0.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
-require('./common-helpers-6970c46c.js');
+require('./index-de8540eb.js');
+require('./common-helpers-a4efe957.js');
 
 const formLocationCss = ":host .outer-container .map-container,:host .readonly .map-container{position:relative;height:11.25rem;margin-top:var(--spacing-08, 0.5rem);overflow:hidden;background:var(--stable, #adadad);border-radius:var(--border-radius-04, 0.25rem)}:host .outer-container yoo-form-toggle,:host .readonly yoo-form-toggle{display:block;margin-top:var(--spacing-08, 0.5rem)}:host(.history) .readonly{border:none !important}";
 
@@ -76,13 +77,13 @@ const YooFormLocationComponent = class {
     ev.stopPropagation();
   }
   renderInput(readonly) {
-    return (index.h("yoo-form-autocomplete", { ref: (el) => (this.formAutocomplete = el), readonly: readonly, multiple: this.multiple, size: this.size || (index$1.isWeb(this.host) ? 'medium' : 'large'), value: this.value, iconPrefix: "store", entityType: "locations", displayType: "card-list", model: this.model, isLocal: false, onFetchData: (ev) => this.onFetchData(ev), onInputChanged: (ev) => this.onInputChanged(ev), onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => this.stopValidityChangeEvent(ev), clearable: true, tags: this.tags, isHistory: this.isHistory, tabindex: this.inputTabIndex }));
+    return (index.h("yoo-form-autocomplete", { ref: (el) => (this.formAutocomplete = el), readonly: readonly, multiple: this.multiple, size: this.size || (overlays.isWeb(this.host) ? 'medium' : 'large'), value: this.value, iconPrefix: "store", entityType: "locations", displayType: "card-list", model: this.model, isLocal: false, onFetchData: (ev) => this.onFetchData(ev), onInputChanged: (ev) => this.onInputChanged(ev), onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => this.stopValidityChangeEvent(ev), clearable: true, tags: this.tags, isHistory: this.isHistory, tabindex: this.inputTabIndex }));
   }
   renderReadonly() {
     return index.h("div", { class: "readonly" }, this.renderInput(true));
   }
   renderEditable() {
-    return (index.h("div", { class: "outer-container" }, this.renderInput(false), !this.disableToggle && index.h("yoo-form-toggle", { header: index$1.translate('AROUNDME'), size: this.size || (index$1.isWeb(this.host) ? 'medium' : 'large'), type: "line", onInputChanged: (ev) => this.onAroundMeToggle(ev), onValidityChanged: (ev) => this.stopValidityChangeEvent(ev) }), this.marker && this.marker.latitude && this.marker.longitude && !this.disableToggle ? (index.h("div", { class: "map-container" }, index.h("yoo-map", { class: "absolute", position: this.marker, markers: [this.marker] }))) : null));
+    return (index.h("div", { class: "outer-container" }, this.renderInput(false), !this.disableToggle && index.h("yoo-form-toggle", { header: overlays.translate('AROUNDME'), size: this.size || (overlays.isWeb(this.host) ? 'medium' : 'large'), type: "line", onInputChanged: (ev) => this.onAroundMeToggle(ev), onValidityChanged: (ev) => this.stopValidityChangeEvent(ev) }), this.marker && this.marker.latitude && this.marker.longitude && !this.disableToggle ? (index.h("div", { class: "map-container" }, index.h("yoo-map", { class: "absolute", position: this.marker, markers: [this.marker] }))) : null));
   }
   render() {
     return this.readonly ? this.renderReadonly() : this.renderEditable();

package/dist/cjs/yoo-form-missing-word.cjs.entry.js

@@ -2,15 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
-const index$2 = require('./index-8d99bbd2.js');
-const draggableTagsHelpers = require('./draggable-tags-helpers-bb3be597.js');
-const formInputHelpers = require('./form-input-helpers-a04f76d2.js');
+const index$1 = require('./index-7ab51d1d.js');
+const draggableTagsHelpers = require('./draggable-tags-helpers-0f80afe0.js');
+const formInputHelpers = require('./form-input-helpers-a2843dc0.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
-require('./common-helpers-6970c46c.js');
+require('./index-de8540eb.js');
+require('./common-helpers-a4efe957.js');
 
 const formMissingWordCss = ".accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}.info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}.wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host{display:block;padding:var(--spacing-04, 0.25rem);overflow:visible;border:0.0625rem solid transparent}:host .instructions{margin:var(--spacing-32, 2rem) 0 var(--spacing-08, 0.5rem);color:var(--stable, #adadad);font-size:var(--font-size-18, 1.125rem)}:host yoo-banner{height:0}:host .dropzone#zone-tags{min-height:5rem;margin:calc(var(--spacing-08, 0.5rem) / -2) calc(var(--spacing-08, 0.5rem) / -2)}:host .dropzone#zone-tags>*{margin:calc(var(--spacing-08, 0.5rem) / 2) calc(var(--spacing-08, 0.5rem) / 2)}:host .dropzone:not(#zone-tags){height:2rem;margin:0 var(--spacing-04, 0.25rem);text-align:center;border-bottom-width:var(--border-width-01, 0.0625rem);border-bottom-style:solid;-webkit-transition:background-color 250ms ease-in-out;transition:background-color 250ms ease-in-out}:host .dropzone:not(#zone-tags).has-tag{margin-top:var(--spacing-04, 0.25rem);padding:var(--spacing-04, 0.25rem);border-bottom-color:transparent}:host .dropzone:not(#zone-tags):not(.has-tag){width:5rem;padding-right:var(--spacing-02, 0.125rem);padding-left:var(--spacing-02, 0.125rem);border-bottom-color:var(--app-color, #5a30f4);-webkit-transform:translateY(0.75rem);transform:translateY(0.75rem)}:host .dropzone:not(#zone-tags).hit{background:var(--stable-alt-40, rgba(208, 208, 208, 0.4))}:host .dropzone:not(#zone-tags) yoo-tag{position:relative;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}:host .dropzone-container{display:-ms-inline-flexbox;display:inline-flex}:host section.paragraph{line-height:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.playing){background-color:var(--stable-light-40, rgba(241, 241, 241, 0.4));border:0.0625rem solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-08, 0.5rem);-webkit-transition:background-color 0.5s ease-in-out, border 0.5s ease-in-out;transition:background-color 0.5s ease-in-out, border 0.5s ease-in-out}:host([readonly]) .dropzone:not(#zone-tags){margin-right:0;margin-left:0}:host([animated]) .dropzone-container{-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transition:all 500ms ease-in-out;transition:all 500ms ease-in-out}:host([animated]) .dropzone-container[hidden]{-webkit-transform:scale(0);transform:scale(0)}";
 
@@ -50,12 +51,12 @@ const YooFormMissingWordComponent = class {
     return !!((_a = this.translatedSentence.match(this.bracketsRegexp)) === null || _a === void 0 ? void 0 : _a.length);
   }
   get translatedSentence() {
-    return index$1.formatTranslation(index$1.translateMulti(this.sentence));
+    return overlays.formatTranslation(overlays.translateMulti(this.sentence));
   }
   get translatedAnswers() {
     var _a, _b;
     return this.isMatchingBrackets
-      ? (_a = this.answer) === null || _a === void 0 ? void 0 : _a.map((asw) => index$1.translateMulti(asw))
+      ? (_a = this.answer) === null || _a === void 0 ? void 0 : _a.map((asw) => overlays.translateMulti(asw))
       : (_b = this.translatedSentence.match(this.parenthesesRegexp.g)) === null || _b === void 0 ? void 0 : _b.map((v) => {
         var _a;
         return ((_a = v === null || v === void 0 ? void 0 : v.match(this.parenthesesRegexp.i)) === null || _a === void 0 ? void 0 : _a.length) && v.match(this.parenthesesRegexp.i)[1];
@@ -74,7 +75,7 @@ const YooFormMissingWordComponent = class {
       this.tags.checkOverflowingTags();
       this.host.classList.remove('playing');
       const userAnswers = this.tags.getDroppedValues(true)
-        .map(ua => this.values.find(v => ua === index$1.translateMulti(v)));
+        .map(ua => this.values.find(v => ua === overlays.translateMulti(v)));
       if (!this.livePreview) {
         formInputHelpers.setValueAndValidateInput(userAnswers, this);
       }
@@ -119,14 +120,14 @@ const YooFormMissingWordComponent = class {
       }
     }
     const missingValues = !((_a = this.answer) === null || _a === void 0 ? void 0 : _a.length) && !!((_b = this.values) === null || _b === void 0 ? void 0 : _b.length);
-    const newValuesLength = (_c = this.values) === null || _c === void 0 ? void 0 : _c.map((v) => !index$1.isValueATranslationKey(v) && v.length);
-    const hasTooLongValues = newValuesLength === null || newValuesLength === void 0 ? void 0 : newValuesLength.some((n) => n > index$1.MAX_TAGS_CHARACTERS);
+    const newValuesLength = (_c = this.values) === null || _c === void 0 ? void 0 : _c.map((v) => !overlays.isValueATranslationKey(v) && v.length);
+    const hasTooLongValues = newValuesLength === null || newValuesLength === void 0 ? void 0 : newValuesLength.some((n) => n > overlays.MAX_TAGS_CHARACTERS);
     const bannerMessage = hasTooLongValues ? 'MAXCHARACTERSREACHEDFORVALUES' : hasDuplicateValues ? 'NODUPLICATEVALUES' : missingValues ? 'NOMISSINGVALUES' : '';
     const showBanner = hasDuplicateValues || hasTooLongValues || missingValues;
     draggableTagsHelpers.showWarningAlert(this.host, showBanner, bannerMessage);
   }
   initGame() {
-    this.tags = index$2.initTags(this.tagConfig, this.zonesConfig);
+    this.tags = index$1.initTags(this.tagConfig, this.zonesConfig);
     this.showWarning();
   }
   getColorTag(tagValue) {
@@ -146,7 +147,7 @@ const YooFormMissingWordComponent = class {
     return -1;
   }
   renderInstructions() {
-    return index.h("p", { class: "instructions" }, index$1.translate(this.placeholder));
+    return index.h("p", { class: "instructions" }, overlays.translate(this.placeholder));
   }
   renderTagsZone() {
     return index.h("section", { class: "tags" }, index.h("div", { class: "dropzone", id: "zone-tags" }));

package/dist/cjs/yoo-form-missionfield.cjs.entry.js

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
-const formInputHelpers = require('./form-input-helpers-a04f76d2.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const formInputHelpers = require('./form-input-helpers-a2843dc0.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const formMissionfieldCss = ":host .container .spacer{width:100%;height:var(--spacing-16, 1rem)}:host .readonly .title,:host .readonly .field,:host .readonly .score{margin-right:var(--spacing-16, 1rem)}:host(.inline:not(.mobile)) .container{display:-ms-flexbox;display:flex}:host(.inline:not(.mobile)) .container yoo-form-autocomplete{width:12.5rem}:host(.inline:not(.mobile)) .container .spacer{min-width:var(--spacing-16, 1rem);max-width:var(--spacing-16, 1rem)}:host(.inline.mobile) .container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.inline.mobile) .container yoo-form-autocomplete{width:100%}:host(.inline.mobile) .container .spacer{min-width:var(--spacing-16, 1rem);max-width:var(--spacing-16, 1rem)}";
 
@@ -92,7 +93,7 @@ const YooFormMissionfieldComponent = class {
   }
   async onInputSecondaryFetchData(ev) {
     var _a;
-    const fields = ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.search) ? index$1.filterListByText(this.fields, ev.detail.search) : this.fields;
+    const fields = ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.search) ? overlays.filterListByText(this.fields, ev.detail.search) : this.fields;
     if ((fields === null || fields === void 0 ? void 0 : fields.length) > 0) {
       await this.formAutocompleteSecondary.updateValues(fields);
     }

package/dist/cjs/yoo-form-multi-input.cjs.entry.js

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$2 = require('./index-fc264952.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+const index$1 = require('./index-de8540eb.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
 const sortable_esm = require('./sortable.esm-00e15691.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
-const formInputHelpers = require('./form-input-helpers-a04f76d2.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const formInputHelpers = require('./form-input-helpers-a2843dc0.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formMultiInputCss = ":host .row{display:-ms-flexbox;display:flex}:host .row.grid{display:grid;grid-template-columns:49% 49%}:host .row .column{-ms-flex:1;flex:1;max-width:100%}:host .row .column:first-child .cell,:host .row .column:first-child .button-container{display:-ms-flexbox;display:flex;padding-left:0}:host .row .column:last-child .cell,:host .row .column:last-child .button-container{display:-ms-flexbox;display:flex;padding-right:0}:host .row .column .cell,:host .row .column .button-container{padding-right:var(--spacing-16, 1rem);padding-left:var(--spacing-16, 1rem)}:host .row .column .cell{position:relative;display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap;-ms-flex-align:end;align-items:flex-end;padding-top:0;padding-bottom:var(--spacing-08, 0.5rem)}:host .row .column .cell .input-content{display:-ms-flexbox;display:flex}:host .row .column .cell .input-content.mobile{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end}:host .row .column .cell .input-content yoo-form-input{-ms-flex:1;flex:1}:host .row .column .cell .input-content .remove-button{height:-webkit-min-content;height:-moz-min-content;height:min-content}:host .row .column .cell .image-container{display:-ms-flexbox;display:flex}:host .row .column .cell .image-container:not(.no-padding){padding-right:var(--spacing-16, 1rem)}:host .row .column .cell yoo-form-input-container{-ms-flex:1;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;white-space:nowrap;text-overflow:ellipsis;margin-top:0.3rem;color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem);display:-ms-flexbox;display:flex;white-space:normal}:host .row .column .cell .field-translation yoo-icon{margin-right:0.3rem}:host .row .column .cell .field-translation *{display:inline-block}:host .row .column .cell .delete-cell{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin-left:var(--spacing-08, 0.5rem)}:host .row .column .cell .link-web{position:absolute;bottom:1.2rem;left:-0.5rem;visibility:hidden}:host .row .column .cell .link-visible{visibility:visible !important}:host .row .column .button-container{display:-ms-flexbox;display:flex}:host .row .column .button-container yoo-button{-ms-flex:1;flex:1;padding-left:var(--spacing-08, 0.5rem)}:host .row .column .button-container yoo-button:first-child{padding-left:0}:host .row .column.column-title yoo-form-input.title-input{padding:var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem) 0}:host .row .column yoo-button{padding-left:var(--spacing-08, 0.5rem)}:host .row.sortable-chosen:not(.sortable-ghost){padding-right:var(--spacing-08, 0.5rem);padding-left:var(--spacing-08, 0.5rem);background-color:var(--stable-light, #f1f1f1)}:host .row.sortable-chosen .column .button-container{display:none}:host(.mobile) .row{-ms-flex-direction:column;flex-direction:column}:host(.mobile) .row .column .cell,:host(.mobile) .row .column .button-container{-ms-flex-pack:end;justify-content:flex-end;padding-top:var(--spacing-08, 0.5rem);padding-right:0;padding-left:0}:host(.mobile) .row .column .cell{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}:host(.mobile) .row .column .cell .link-mobile{margin-right:var(--spacing-16, 1rem);padding:var(--spacing-08, 0.5rem);background-color:var(--app-color-10, rgba(90, 48, 244, 0.1));border-radius:50%;visibility:hidden}:host(.mobile) .row .column .cell .remove-button{margin-top:var(--spacing-16, 1rem)}:host(.reveal) .link-web{top:2.5rem;bottom:unset}:host(.full-width) yoo-form-text-editor,:host(.full-width) yoo-form-text-area{width:100%}:host(.dragging) .row .column .button-container{display:none}";
@@ -85,7 +86,7 @@ const YooFormMultiInputComponent = class {
     else if (!Array.isArray(this.value)) {
       this.value = [[]];
     }
-    this.dragAndDropGroupId = index$1.getUUID();
+    this.dragAndDropGroupId = overlays.getUUID();
     this.reset();
     this.resolveValueType();
     formInputHelpers.setValidator(this);
@@ -311,7 +312,7 @@ const YooFormMultiInputComponent = class {
           rowIndex,
           showButton: !column.hideButton && isLastColumnInput && canAddNextRow,
           showDeleteButton: !column.hideDeleteButton,
-          key: index$1.getUUID()
+          key: overlays.getUUID()
         };
         let targetRowIndex;
         if (!column.rows && rowsCount === rowIndex + 1) {
@@ -368,7 +369,7 @@ const YooFormMultiInputComponent = class {
         colIndex,
         column: this.columns[colIndex],
         showDeleteButton: !this.columns[colIndex].hideDeleteButton,
-        key: index$1.getUUID()
+        key: overlays.getUUID()
       }));
     }
     if (this.isLinkedList()) {
@@ -468,30 +469,30 @@ const YooFormMultiInputComponent = class {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
     const isLastMinRow = cell.column.rows && cell.column.rows >= cell.rowIndex + 1;
     const canAddNextRow = !cell.column.maxRows || cell.rowIndex + 1 < cell.column.maxRows;
-    const isPlatformWeb = index$1.isWeb(this.host);
+    const isPlatformWeb = overlays.isWeb(this.host);
     let addButton;
     let auditButton;
     // prevent to have more than 1 button in column
     const buttonExistsInColumn = this.cells.slice(0, cell.rowIndex).reduce((acc, c) => acc || c[cell.colIndex].showButton, false);
     if (!this.readonly && canAddNextRow && cell.showButton && !buttonExistsInColumn) {
-      addButton = (index.h("yoo-button", { size: ((_b = (_a = cell.column) === null || _a === void 0 ? void 0 : _a.addButton) === null || _b === void 0 ? void 0 : _b.size) || (isPlatformWeb ? 'small' : 'large'), color: ((_d = (_c = cell.column) === null || _c === void 0 ? void 0 : _c.addButton) === null || _d === void 0 ? void 0 : _d.color) || 'app-color', class: (_f = (_e = cell.column) === null || _e === void 0 ? void 0 : _e.addButton) === null || _f === void 0 ? void 0 : _f.cssClass, style: ((_h = (_g = cell.column) === null || _g === void 0 ? void 0 : _g.addButton) === null || _h === void 0 ? void 0 : _h.style) || null, onClick: () => this.onAddButtonClicked(cell) }, index.h("yoo-icon", { size: ((_k = (_j = cell.column) === null || _j === void 0 ? void 0 : _j.addButton) === null || _k === void 0 ? void 0 : _k.iconSize) || 'small', slot: ((_m = (_l = cell.column) === null || _l === void 0 ? void 0 : _l.addButton) === null || _m === void 0 ? void 0 : _m.iconSlot) || 'start', name: ((_p = (_o = cell.column) === null || _o === void 0 ? void 0 : _o.addButton) === null || _p === void 0 ? void 0 : _p.icon) || 'circle-plus', color: ((_r = (_q = cell.column) === null || _q === void 0 ? void 0 : _q.addButton) === null || _r === void 0 ? void 0 : _r.iconColor) || 'light' }), index$1.translate(((_t = (_s = cell.column) === null || _s === void 0 ? void 0 : _s.addButton) === null || _t === void 0 ? void 0 : _t.text) || 'YOOBICADD')));
+      addButton = (index.h("yoo-button", { size: ((_b = (_a = cell.column) === null || _a === void 0 ? void 0 : _a.addButton) === null || _b === void 0 ? void 0 : _b.size) || (isPlatformWeb ? 'small' : 'large'), color: ((_d = (_c = cell.column) === null || _c === void 0 ? void 0 : _c.addButton) === null || _d === void 0 ? void 0 : _d.color) || 'app-color', class: (_f = (_e = cell.column) === null || _e === void 0 ? void 0 : _e.addButton) === null || _f === void 0 ? void 0 : _f.cssClass, style: ((_h = (_g = cell.column) === null || _g === void 0 ? void 0 : _g.addButton) === null || _h === void 0 ? void 0 : _h.style) || null, onClick: () => this.onAddButtonClicked(cell) }, index.h("yoo-icon", { size: ((_k = (_j = cell.column) === null || _j === void 0 ? void 0 : _j.addButton) === null || _k === void 0 ? void 0 : _k.iconSize) || 'small', slot: ((_m = (_l = cell.column) === null || _l === void 0 ? void 0 : _l.addButton) === null || _m === void 0 ? void 0 : _m.iconSlot) || 'start', name: ((_p = (_o = cell.column) === null || _o === void 0 ? void 0 : _o.addButton) === null || _p === void 0 ? void 0 : _p.icon) || 'circle-plus', color: ((_r = (_q = cell.column) === null || _q === void 0 ? void 0 : _q.addButton) === null || _r === void 0 ? void 0 : _r.iconColor) || 'light' }), overlays.translate(((_t = (_s = cell.column) === null || _s === void 0 ? void 0 : _s.addButton) === null || _t === void 0 ? void 0 : _t.text) || 'YOOBICADD')));
     }
     if (this.allowAudit && cell.showButton) {
-      auditButton = (index.h("yoo-button", { disabled: this.value[0] && this.value[0].length <= 0, size: isPlatformWeb ? 'small' : 'large', color: "light", onClick: () => this.onAuditButtonClicked() }, index.h("yoo-icon", { size: "small", slot: "start", name: "theme" }), " ", index$1.translate('CUSTOMISE')));
+      auditButton = (index.h("yoo-button", { disabled: this.value[0] && this.value[0].length <= 0, size: isPlatformWeb ? 'small' : 'large', color: "light", onClick: () => this.onAuditButtonClicked() }, index.h("yoo-icon", { size: "small", slot: "start", name: "theme" }), " ", overlays.translate('CUSTOMISE')));
     }
     if (cell.value.text === undefined && cell.value.selection === undefined && cell.value.file === undefined && !isLastMinRow && !addButton) {
       return index.h("div", { class: "column empty" });
     }
     let label = '';
     if (cell.column.label) {
-      label = index$1.translate(cell.column.label);
+      label = overlays.translate(cell.column.label);
       if (cell.column.orderInLabel) {
         label += ' ' + (cell.rowIndex + 1).toString();
       }
     }
     let title;
     if (cell.rowIndex === 0 && cell.column.title) {
-      title = index.h("div", { class: "title" }, index$1.translate(cell.column.title));
+      title = index.h("div", { class: "title" }, overlays.translate(cell.column.title));
     }
     let inputContainer;
     let imageChoice;
@@ -549,9 +550,9 @@ const YooFormMultiInputComponent = class {
       ]));
     }
     if (renderTextInput) {
-      const field = { title: label, type: index$2.FormFieldType.text };
+      const field = { title: label, type: index$1.FormFieldType.text };
       if (cell.column.help) {
-        field.help = index$1.translate(cell.column.help);
+        field.help = overlays.translate(cell.column.help);
       }
       inputContainer = (index.h("yoo-form-input-container", { field: field, required: cell.column.required, hideOptional: cell.column.hideOptional, readonly: this.readonly }, index.h("div", { class: { 'input-content': true, mobile: !isPlatformWeb } }, textInput, isPlatformWeb && this.renderRemoveCell(cell, isPlatformWeb), this.renderDraggableCell(cell)), !((_1 = cell === null || cell === void 0 ? void 0 : cell.column) === null || _1 === void 0 ? void 0 : _1.hideTranslation) && this.renderTranslation(cell.value.text || null)));
     }
@@ -583,7 +584,7 @@ const YooFormMultiInputComponent = class {
     if (this.isLinkedRow(cell) && cell.colIndex < this.cells[cell.rowIndex].length - 1) {
       return;
     }
-    return isPlatformWeb ? (index.h("yoo-button", { class: "remove-button", onClick: () => this.onRemoveCell(cell) }, index.h("yoo-icon", { size: "small", name: "delete" }))) : (index.h("yoo-button", { onClick: () => this.onRemoveCell(cell), class: "remove-button", size: "large", color: "danger", rippleType: "unbounded" }, index.h("yoo-icon", { size: "small", color: "light", name: "cross", slot: "start" }), index$1.translate('REMOVE')));
+    return isPlatformWeb ? (index.h("yoo-button", { class: "remove-button", onClick: () => this.onRemoveCell(cell) }, index.h("yoo-icon", { size: "small", name: "delete" }))) : (index.h("yoo-button", { onClick: () => this.onRemoveCell(cell), class: "remove-button", size: "large", color: "danger", rippleType: "unbounded" }, index.h("yoo-icon", { size: "small", color: "light", name: "cross", slot: "start" }), overlays.translate('REMOVE')));
   }
   renderDraggableCell(cell) {
     let onlyOne;
@@ -609,12 +610,12 @@ const YooFormMultiInputComponent = class {
   }
   renderTranslation(text) {
     var _a;
-    if (((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) > 0 && text && !index$1.isValueATranslationKey(text)) {
+    if (((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) > 0 && text && !overlays.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);
       if (translationIndex === -1) {
-        return (index.h("div", { class: "field-translation" }, index.h("yoo-tooltip", { hoverable: true, placement: "bottom", content: index$1.translate('VALUENOTTRANSLATED'), class: "no-pointer" }, index.h("yoo-icon", { color: "warning", name: "translation-check", size: "small" }))));
+        return (index.h("div", { class: "field-translation" }, index.h("yoo-tooltip", { hoverable: true, placement: "bottom", content: overlays.translate('VALUENOTTRANSLATED'), class: "no-pointer" }, index.h("yoo-icon", { color: "warning", name: "translation-check", size: "small" }))));
       }
     }
   }

package/dist/cjs/yoo-form-number-picker-dialog.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const formNumberPickerDialogCss = ":host .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%}:host .outer-container .content{position:relative;height:calc(100% - 44px);background-color:var(--light, #ffffff)}:host .outer-container .content yoo-ion-scroll{top:auto;z-index:20008;height:100%;-webkit-transition:0.3s;transition:0.3s}:host .outer-container .item-selected{color:var(--app-color, #5a30f4)}:host .center{padding-top:0.5rem;text-align:center}:host .lastElement{padding-bottom:5rem}:host .footer-background{position:absolute;top:auto;right:0;bottom:0;left:0;z-index:1}:host .footer-background.bottom{height:2.875rem;background:var(--light, #ffffff);border:var(--border);border-radius:var(--border-radius-01, 0.0625rem)}:host .footer-background.middle{bottom:2.875rem;height:1.4375rem}:host .footer-background.middle.web{height:2.875rem}:host .footer-background.top{top:0;bottom:4.3125rem;height:1.4375rem}:host .footer-background.top.web{bottom:5.75rem;height:2.875rem}";
 
@@ -20,7 +21,7 @@ const YooFormNumberPickerDialogComponent = class {
   }
   handleModalPresent() {
     setTimeout(() => {
-      index$1.safeScrollIntoView(this.selectedElement);
+      overlays.safeScrollIntoView(this.selectedElement);
     }, 100);
   }
   componentDidLoad() {
@@ -36,15 +37,15 @@ const YooFormNumberPickerDialogComponent = class {
     return pageHeight - HEADER_HEIGHT;
   }
   getDialogTitle() {
-    return index$1.translate('PICKANUMBER');
+    return overlays.translate('PICKANUMBER');
   }
   onItemSelect(ev, itemValue) {
     ev.stopPropagation();
     this.selection = itemValue;
-    index$1.closeModal(this.selection);
+    overlays.closeModal(this.selection);
   }
   render() {
-    const web = index$1.isWeb(this.host);
+    const web = overlays.isWeb(this.host);
     const numberValues = this.values.length + this.values[0];
     return (index.h("div", { class: "outer-container" }, index.h("yoo-navbar", null, index.h("yoo-truncate", null, this.getDialogTitle())), index.h("div", { class: "content" }, index.h("yoo-ion-scroll", null, this.values.map((i) => (index.h("div", { ref: this.value === i ? (el) => (this.selectedElement = el) : null, class: this.value === i ? 'item-selected numberpicker' : 'numberpicker', onClick: (ev) => this.onItemSelect(ev, i) }, index.h("div", { class: numberValues === i + 1 ? 'lastElement center' : 'center' }, " ", i))))), index.h("div", { class: { 'footer-background bottom': true } }), index.h("div", { class: { 'footer-background middle': true, web } }), index.h("div", { class: { 'footer-background top': true, web } }))));
   }

package/dist/cjs/yoo-form-number-picker.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+const overlays = require('./overlays-b6c94fc8.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
+require('./index-de8540eb.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
 
 const formNumberPickerCss = ":host .outer-container{display:-ms-flexbox;display:flex;height:100%}:host .outer-container.readonly{padding:0.5rem 0.5rem 0 0}:host .outer-container yoo-form-input{--input-background-color:transparent;width:100%;height:100%}:host([use-buttons]) .outer-container{margin:0 auto;color:var(--light, #ffffff);border-radius:var(--border-radius-04, 0.25rem)}:host([use-buttons]) .outer-container yoo-button.left{--border-radius-top-right:0;--border-radius-bottom-right:0}:host([use-buttons]) .outer-container yoo-button.right{--border-radius-top-left:0;--border-radius-bottom-left:0}:host([use-buttons]) .outer-container .input-container{width:100%;height:100%}:host([use-buttons]) .outer-container .input-invalid{border:var(--border-width-01, 0.0625rem) solid var(--danger, #d44333)}:host([use-buttons]) .invalid-container{text-align:end}:host([use-buttons]) .invalid-container .message{display:none}:host([use-buttons]) .invalid-container .invalid-message{display:inline-block;color:var(--danger, #d44333);font-size:var(--font-size-12, 0.75rem);text-align:end}:host([size=large][use-buttons]) .outer-container{width:12.5rem;height:3rem;border-radius:var(--border-radius-08, 0.5rem)}:host([size=large][use-buttons]) .outer-container .input-container.input-invalid{max-height:2.875rem}:host([size=large][use-buttons]) .outer-container yoo-button{--side-padding:0 var(--spacing-24, 1.5rem)}:host([size=large][use-buttons]) .outer-container yoo-button.right{--border-radius-top-right:var(--border-radius-08, 0.5rem);--border-radius-bottom-right:var(--border-radius-08, 0.5rem)}:host([size=large][use-buttons]) .outer-container yoo-button.left{--border-radius-top-left:var(--border-radius-08, 0.5rem);--border-radius-bottom-left:var(--border-radius-08, 0.5rem)}:host([size=medium][use-buttons]) .outer-container{width:7rem;height:2rem}:host([size=medium][use-buttons]) .outer-container .input-container.input-invalid{max-height:1.875rem}:host([size=small][use-buttons]) .outer-container{width:6rem;height:1.5rem}:host([size=small][use-buttons]) .outer-container .input-container.input-invalid{max-height:1.375rem}:host([size=small][use-buttons]) .outer-container yoo-form-input{--input-font-size:var(--font-size-12, 0.75rem)}:host([use-buttons][type=primary]) .outer-container{border:solid var(--app-color, #5a30f4) var(--border-width-01, 0.0625rem)}:host([use-buttons][type=primary]) .outer-container .input-container{background-color:var(--app-color, #5a30f4)}:host([use-buttons][type=primary]) .outer-container .input-container:not(.input-invalid){border-right:solid var(--light-20, rgba(255, 255, 255, 0.2)) var(--border-width-01, 0.0625rem);border-left:solid var(--light-20, rgba(255, 255, 255, 0.2)) var(--border-width-01, 0.0625rem)}:host([use-buttons][type=secondary]) .outer-container{border:solid var(--stable-alt, #d0d0d0) var(--border-width-01, 0.0625rem)}:host([use-buttons][type=secondary]) .outer-container .input-container{background-color:var(--light, #ffffff)}:host([use-buttons][type=secondary]) .outer-container .input-container:not(.input-invalid){border-right:solid var(--stable-10, rgba(173, 173, 173, 0.1)) var(--border-width-01, 0.0625rem);border-left:solid var(--stable-10, rgba(173, 173, 173, 0.1)) var(--border-width-01, 0.0625rem)}:host([use-buttons][disabled]) .outer-container{border:solid var(--stable-light, #f1f1f1) var(--border-width-01, 0.0625rem)}:host([use-buttons][disabled]) .outer-container .input-container{background-color:transparent}:host([use-buttons][readonly]) .outer-container{height:auto;margin:0;border:none}";
 
@@ -77,7 +78,7 @@ const YooFormNumberPickerComponent = class {
   setCaretColor() {
     if (this.formInputElement && !this.disabled) {
       const caretColor = this.isSecondary ? 'dark' : 'light';
-      this.formInputElement.style.setProperty('--caret-color', index$1.getCssColor(caretColor));
+      this.formInputElement.style.setProperty('--caret-color', overlays.getCssColor(caretColor));
     }
   }
   onSideButtonClicked(ev, side) {
@@ -111,7 +112,7 @@ const YooFormNumberPickerComponent = class {
     }
   }
   getModalAnimation(enterLeave) {
-    return (!index$1.isWeb(this.host) ? `slideY${enterLeave}Animation` : `fade${enterLeave}Animation`);
+    return (!overlays.isWeb(this.host) ? `slideY${enterLeave}Animation` : `fade${enterLeave}Animation`);
   }
   showContainerDialog() {
     if (!this.disabled) {
@@ -120,13 +121,13 @@ const YooFormNumberPickerComponent = class {
       if (this.selection !== null) {
         this.dialog.value = this.selection;
       }
-      let modalOptions = { half: !index$1.isWeb(this.host) };
-      if (index$1.isWeb(this.host)) {
+      let modalOptions = { half: !overlays.isWeb(this.host) };
+      if (overlays.isWeb(this.host)) {
         modalOptions = Object.assign(modalOptions, {
           height: 'medium'
         });
       }
-      index$1.showModal(this.dialog, modalOptions, null, this.getModalAnimation('Enter'), this.getModalAnimation('Leave'), true, false).then((ret) => {
+      overlays.showModal(this.dialog, modalOptions, null, this.getModalAnimation('Enter'), this.getModalAnimation('Leave'), true, false).then((ret) => {
         if (ret && !ret.overlayDismiss) {
           this.setValue(ret.data);
         }
@@ -141,8 +142,8 @@ const YooFormNumberPickerComponent = class {
     ev.stopPropagation();
     ev.preventDefault();
     this.updateValidity();
-    if (index$1.isNativeMobile()) {
-      index$1.Keyboard.hide();
+    if (overlays.isNativeMobile()) {
+      overlays.Keyboard.hide();
     }
     this.showContainerDialog();
   }
@@ -165,16 +166,16 @@ const YooFormNumberPickerComponent = class {
   }
   renderInvalidMessage() {
     if (lodash.isFinite(this.min) && !lodash.isFinite(this.max)) {
-      return `${index$1.translate('INVALIDENTRY')} ${index$1.translate('MINVALUE')} ${this.min}`;
+      return `${overlays.translate('INVALIDENTRY')} ${overlays.translate('MINVALUE')} ${this.min}`;
     }
     else if (lodash.isFinite(this.max) && !lodash.isFinite(this.min)) {
-      return `${index$1.translate('INVALIDENTRY')} ${index$1.translate('MAXVALUE')} ${this.max}`;
+      return `${overlays.translate('INVALIDENTRY')} ${overlays.translate('MAXVALUE')} ${this.max}`;
     }
     else if (lodash.isFinite(this.min) && lodash.isFinite(this.max)) {
-      return `${index$1.translate('INVALIDENTRY')} ${index$1.translate('MINVALUE')} ${this.min} ${index$1.translate('MAXVALUE')} ${this.max}`;
+      return `${overlays.translate('INVALIDENTRY')} ${overlays.translate('MINVALUE')} ${this.min} ${overlays.translate('MAXVALUE')} ${this.max}`;
     }
     else {
-      return `${index$1.translate('INCORRECTFORMAT')}`;
+      return `${overlays.translate('INCORRECTFORMAT')}`;
     }
   }
   renderContent() {
@@ -190,7 +191,7 @@ const YooFormNumberPickerComponent = class {
         index.h("div", { class: "invalid-container" }, index.h("div", { class: {
             message: true,
             'invalid-message': ((this.showValidation && this.validity === false) || this.forceShowValidation) && this.size !== 'small'
-          } }, this.invalidMessage ? index$1.translate(this.invalidMessage, { max: this.max, min: this.min, step: this.stepAmount }) : this.renderInvalidMessage()))
+          } }, this.invalidMessage ? overlays.translate(this.invalidMessage, { max: this.max, min: this.min, step: this.stepAmount }) : this.renderInvalidMessage()))
       ];
     }
     else {

package/dist/cjs/yoo-form-opening-hours.cjs.entry.js

@@ -2,18 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$2 = require('./index-fc264952.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+const index$1 = require('./index-de8540eb.js');
+require('./index-1fdbd9b3.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const Footer = ({ onClearAll, onReset }) => (index.h("footer", null,
-  index.h("yoo-button", { onClick: onClearAll }, index$1.translate('CLEARALL')),
-  index.h("yoo-button", { onClick: onReset }, index$1.translate('RESET'))));
+  index.h("yoo-button", { onClick: onClearAll }, overlays.translate('CLEARALL')),
+  index.h("yoo-button", { onClick: onReset }, overlays.translate('RESET'))));
 
 const columns = ['YOOBICDAY', 'OPENING', 'YOOBICFROM', 'YOOBICTO'];
-const Header = () => (index.h("header", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (index.h("strong", null, index$1.translate(column))))));
+const Header = () => (index.h("header", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (index.h("strong", null, overlays.translate(column))))));
 
 const getEditableRender = (time, { increment, max, min, onChange, toNumber, toString }) => {
   const times = Array.from({ length: (max - min) / increment + 1 })
@@ -62,29 +63,29 @@ const TimePeriodButton = ({ error, type, onClick }) => {
 const options = { open: 'OPENED', closed: 'CLOSED', allday: 'ALLDAY' };
 const isFirstPeriod = (index) => index === 0;
 const isMaxPeriodsReached = (total) => total === 5;
-const getMaxPeriodsReachedError = (total) => isMaxPeriodsReached(total) && index$1.translate('MAXSLOTSREACHED');
+const getMaxPeriodsReachedError = (total) => isMaxPeriodsReached(total) && overlays.translate('MAXSLOTSREACHED');
 const Day = ({ label, readonly, value, onChange }) => {
   var _a;
-  const periods = ((_a = value === null || value === void 0 ? void 0 : value.periods) === null || _a === void 0 ? void 0 : _a.filter(({ from, to }) => from !== index$2.allDayPeriod.from || to !== index$2.allDayPeriod.to)) || [];
+  const periods = ((_a = value === null || value === void 0 ? void 0 : value.periods) === null || _a === void 0 ? void 0 : _a.filter(({ from, to }) => from !== index$1.allDayPeriod.from || to !== index$1.allDayPeriod.to)) || [];
   const option = value ? (value.isOpen ? (periods.length ? 'OPENED' : 'ALLDAY') : 'CLOSED') : 'ALLDAY';
   return (index.h("section", null,
     index.h("span", null, label),
-    readonly ? (index.h("span", null, index$1.translate(option))) : (index.h("yoo-form-autocomplete", { disableSingleDeselection: true, size: "medium", value: option, values: Object.values(options), onInputChanged: (event) => {
+    readonly ? (index.h("span", null, overlays.translate(option))) : (index.h("yoo-form-autocomplete", { disableSingleDeselection: true, size: "medium", value: option, values: Object.values(options), onInputChanged: (event) => {
         event.stopPropagation();
         onChange({
           ...value,
           isOpen: [options.allday, options.open].includes(event.detail),
-          periods: event.detail === options.open ? index$2.periods : index$2.allDayPeriods
+          periods: event.detail === options.open ? index$1.periods : index$1.allDayPeriods
         });
       }, onValidityChanged: (event) => event.stopPropagation() })),
-    periods.map((period, index$1) => [
-      index.h(TimePeriod, { readonly: readonly, value: period, onChange: (period) => onChange({ ...value, periods: [...periods.slice(0, index$1), period, ...periods.slice(index$1 + 1)] }) }),
-      !readonly && (index.h(TimePeriodButton, { error: isFirstPeriod(index$1) && getMaxPeriodsReachedError(periods.length), type: isFirstPeriod(index$1) ? 'create' : 'delete', onClick: () => onChange({ ...value, periods: isFirstPeriod(index$1) ? [...periods, index$2.period] : [...periods.slice(0, index$1), ...periods.slice(index$1 + 1)] }) }))
+    periods.map((period, index$2) => [
+      index.h(TimePeriod, { readonly: readonly, value: period, onChange: (period) => onChange({ ...value, periods: [...periods.slice(0, index$2), period, ...periods.slice(index$2 + 1)] }) }),
+      !readonly && (index.h(TimePeriodButton, { error: isFirstPeriod(index$2) && getMaxPeriodsReachedError(periods.length), type: isFirstPeriod(index$2) ? 'create' : 'delete', onClick: () => onChange({ ...value, periods: isFirstPeriod(index$2) ? [...periods, index$1.period] : [...periods.slice(0, index$2), ...periods.slice(index$2 + 1)] }) }))
     ])));
 };
 
 const days = { mon: 'MONDAY', tue: 'TUESDAY', wed: 'WEDNESDAY', thu: 'THURSDAY', fri: 'FRIDAY', sat: 'SATURDAY', sun: 'SUNDAY' };
-const Main = ({ content, readonly, onChange }) => (index.h("main", null, Object.entries(days).map(([key, value]) => (index.h(Day, { label: index$1.translate(value), readonly: readonly, value: content === null || content === void 0 ? void 0 : content[key], onChange: (day) => onChange({ ...content, [key]: day }) })))));
+const Main = ({ content, readonly, onChange }) => (index.h("main", null, Object.entries(days).map(([key, value]) => (index.h(Day, { label: overlays.translate(value), readonly: readonly, value: content === null || content === void 0 ? void 0 : content[key], onChange: (day) => onChange({ ...content, [key]: day }) })))));
 
 const formOpeningHoursCss = ":host{display:grid;grid-auto-rows:-webkit-min-content;grid-auto-rows:min-content;grid-gap:var(--spacing-08, 0.5rem);overflow:auto}:host header,:host section{display:grid;grid-template-columns:8.375rem 8.5rem 6.5rem 6.5rem 2rem;-ms-flex-align:center;align-items:center;padding-right:var(--spacing-16, 1rem);padding-left:var(--spacing-16, 1rem)}:host header,:host section:nth-child(even){background-color:var(--stable-light-40, rgba(241, 241, 241, 0.4))}:host header{padding-top:var(--spacing-16, 1rem);padding-bottom:var(--spacing-16, 1rem);font-size:var(--font-size-14, 0.875rem)}:host section{padding-top:var(--spacing-04, 0.25rem);padding-bottom:var(--spacing-04, 0.25rem)}:host section yoo-form-autocomplete:nth-of-type(1){width:6rem}:host section yoo-form-autocomplete:nth-of-type(n+2){width:5.5rem}:host section yoo-form-autocomplete:nth-of-type(2n+2){grid-column:3}:host section yoo-form-autocomplete:nth-of-type(2n+3){grid-column:4}:host section yoo-form-autocomplete:nth-of-type(2n+4),:host section yoo-form-autocomplete:nth-of-type(2n+5){margin-top:var(--spacing-08, 0.5rem)}:host footer{display:grid;grid-gap:var(--spacing-16, 1rem);grid-template-columns:repeat(2, 5rem);-ms-flex-pack:end;justify-content:flex-end;padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem) 0}:host hr{width:100%;margin:0;border:none;border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host([readonly]) section{grid-template-columns:8.375rem 6.5rem 5.5rem 4rem}:host([readonly]) section span{margin:var(--spacing-04, 0.25rem) 0}:host([readonly]) section span:nth-of-type(2n+2){grid-column:2}:host([readonly]) section span:nth-of-type(2n+3){grid-column:3}:host([readonly]) section span:nth-of-type(2n+4){grid-column:4}:host(.web){}:host(.web)::-webkit-scrollbar{width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host(.web)::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}:host(.web)::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}:host(.web:hover)::-webkit-scrollbar-track{background-color:var(--stable-light, #f1f1f1)}:host(.web:hover)::-webkit-scrollbar-thumb{background:var(--stable, #adadad)}";
 
@@ -105,7 +106,7 @@ const YooFormOpeningHoursComponent = class {
     return (index.h(index.Host, null, index.h(Main, { content: this.value, readonly: this.readonly, onChange: (content) => this.onChange(content) })));
   }
   renderEditable() {
-    return (index.h(index.Host, null, index.h(Header, null), index.h(Main, { content: this.value, readonly: this.readonly, onChange: (content) => this.onChange(content) }), [index.h("hr", null), index.h(Footer, { onClearAll: () => this.onChange(index$2.allDaysValue), onReset: () => this.onChange(index$2.defaultsOpeningHours) })]));
+    return (index.h(index.Host, null, index.h(Header, null), index.h(Main, { content: this.value, readonly: this.readonly, onChange: (content) => this.onChange(content) }), [index.h("hr", null), index.h(Footer, { onClearAll: () => this.onChange(index$1.allDaysValue), onReset: () => this.onChange(index$1.defaultsOpeningHours) })]));
   }
   render() {
     return this.readonly ? this.renderReadOnly() : this.renderEditable();

package/dist/cjs/yoo-form-palette.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
+const index = require('./index-e182c32d.js');
 
 const formPaletteCss = ":host .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;border-radius:var(--border-radius-04, 0.25rem);-webkit-box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1))}:host .outer-container .color-square{-ms-flex:1;flex:1;height:var(--spacing-24, 1.5rem)}:host .outer-container .color-square:first-of-type{border-top-left-radius:var(--border-radius-04, 0.25rem);border-bottom-left-radius:var(--border-radius-04, 0.25rem)}:host .outer-container .color-square:last-of-type{border-top-right-radius:var(--border-radius-04, 0.25rem);border-bottom-right-radius:var(--border-radius-04, 0.25rem)}";