@yoobic/yobi 8.2.2 → 8.3.0-2

package/dist/cjs/yoo-form-progress-indicator.cjs.entry.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const formProgressIndicatorCss = ":host{--scroll-container-color:unset;--scroll-container-margin:unset}:host .scroll-container{position:relative;min-height:6rem;margin:var(--scroll-container-margin);padding-bottom:var(--spacing-08, 0.5rem);background-color:var(--scroll-container-color);-webkit-transition:0.3s;transition:0.3s}:host .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .outer-container .step-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:5rem;padding-top:0.75rem;cursor:pointer}:host .outer-container .step-container.last{margin-right:var(--spacing-16, 1rem)}:host .outer-container .step-container.active{padding-top:0.5625rem}:host .outer-container .step-container .step-title{display:-webkit-box;max-height:calc((var(--font-size-14, 0.875rem) + 0.125rem) * 2);overflow:hidden;line-height:calc(var(--font-size-14, 0.875rem) + 0.125rem);text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;-ms-flex-pack:center;justify-content:center;margin:var(--spacing-08, 0.5rem) var(--spacing-32, 2rem) 0 0;font-size:var(--font-size-14, 0.875rem)}:host .outer-container .step-container .step-circle-outer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:2.5rem;height:2.5rem}:host .outer-container .step-container .step-circle-outer.active{border:2px solid var(--dark, #000000);border-radius:50%}:host .outer-container .step-container .step-circle{border-radius:50%;position:relative;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:1.875rem;height:1.875rem;overflow:hidden;color:var(--light, #ffffff);font-size:var(--font-size-16, 1rem);background-color:var(--stable-light, #f1f1f1)}:host .outer-container .step-container .step-circle.more{padding:5.5px 8.5px;cursor:context-menu}:host .outer-container .step-container .step-circle.completed{color:var(--accent, #276ef1);background-color:var(--stable-alt, #d0d0d0)}:host .outer-container .step-container .step-circle .percentage-fill{position:absolute;top:auto;right:0;bottom:0;left:0;-webkit-transition:0.3s all;transition:0.3s all}:host .outer-container .step-container .progress-line{position:absolute;top:1.9375rem;right:-4px;bottom:auto;left:1rem;height:var(--border-width-01, 0.0625rem);background-color:var(--stable-light, #f1f1f1)}:host .outer-container .step-container .progress-line.first{left:4px}:host .outer-container .step-container .progress-line.last{right:50%}:host .outer-container .step-container .progress-line.active{left:44px}:host .outer-container .step-container .progress-line.active-next{right:0}:host .outer-container .context-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .outer-container .context-container span{position:relative;width:100%;padding:0.5rem 1rem;line-height:1.5;border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0)}:host .outer-container .context-container span:last-child{border-bottom:none}:host .outer-container .context-container span:hover{color:var(--dark, #000000);background:var(--accent-hover)}:host .outer-container .context-container span.context-current{font-weight:var(--font-weight-700, 700)}:host .outer-container .context-container span yoo-icon{position:absolute;top:0.75rem;right:0.625rem;bottom:auto;left:auto}:host(.small) .outer-container{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto;padding:0}:host(.small) .outer-container .step-container.last{width:1rem;margin-right:0}:host(.small) .outer-container .step-container.active{padding-top:0.6875rem}:host(.small) .outer-container .step-container .progress-line.active{left:0.25rem}:host(.small) .outer-container .step-container .step-circle-outer{width:1rem}:host(.small) .outer-container .step-container .step-circle-outer.active{border:none}:host(.small) .outer-container .step-container .step-circle-outer .step-circle{width:1.4rem;min-width:1.4rem;max-width:1.4rem;height:1.4rem;color:var(--text-color, #807f83);font-size:var(--font-size-12, 0.75rem);background:var(--stable-light, #f1f1f1);border:none}:host(.small) .outer-container .step-container .step-circle-outer .step-circle.current{color:var(--light, #ffffff);background:var(--success, #3aa76d)}:host(.small) .outer-container .step-container .step-circle-outer .step-circle.completed{background:var(--success, #3aa76d)}:host(.small) .outer-container .step-container .step-circle-outer .step-circle.light{background:var(--light, #ffffff);border:none}:host(.small) .outer-container .step-container .progress-line.active-next{background:var(--success, #3aa76d)}:host(.small) .outer-container .step-container .step-title{margin-top:0}:host(.vertical) .outer-container{-ms-flex-direction:column;flex-direction:column;max-width:2rem}:host(.vertical) .outer-container .step-container{position:relative;padding-right:0rem;padding-bottom:2.8125rem}:host(.vertical) .outer-container .step-container .step-title{position:relative;top:2.3125rem;right:0px;bottom:0px;left:2.8125rem}:host(.vertical) .outer-container .step-container .step-circle{padding:4.5px 0.5px;text-align:center}:host(.vertical) .outer-container .step-container .step-circle.completed .completed-icon{text-align:center}:host(.vertical) .outer-container .progress-line{position:absolute;top:2.6875rem;right:0.875rem;bottom:auto;left:auto;z-index:-1;width:5px;height:8.45rem;background-color:var(--stable-alt, #d0d0d0)}:host(.vertical) .outer-container .progress-line.faded{z-index:-2;background-color:var(--stable-light, #f1f1f1)}:host(.aligned-left) yoo-ion-scroll{padding:0 var(--spacing-16, 1rem)}:host(.aligned-left) .outer-container .step-container{display:block}:host(.aligned-left) .outer-container .step-container.last{width:auto}:host(.app-color) .outer-container .step-container .step-circle{color:var(--app-color, #5a30f4);background-color:var(--light, #ffffff);border:var(--border-width-01, 0.0625rem) solid var(--app-color, #5a30f4)}:host(.app-color) .outer-container .step-container .step-circle.completed{color:var(--light, #ffffff) !important;background:var(--app-color, #5a30f4)}:host(.app-color) .outer-container .step-container .step-circle.completed span{color:var(--light, #ffffff)}:host(.app-color) .outer-container .step-container .step-circle.invalid{color:var(--light, #ffffff) !important;background-color:var(--danger, #d44333);border:var(--border-width-01, 0.0625rem) solid var(--danger, #d44333)}:host(.app-color) .outer-container .step-container .step-circle.invalid span{color:var(--light, #ffffff)}:host(.app-color) .outer-container .step-container .step-circle.current-invalid{color:var(--danger, #d44333);border:var(--border-width-01, 0.0625rem) solid var(--danger, #d44333)}:host(.app-color) .outer-container .step-container .step-circle.locked{color:var(--light, #ffffff);background-color:var(--stable, #adadad);border:var(--border-width-01, 0.0625rem) solid var(--stable, #adadad)}:host(.app-color) .outer-container .step-container .step-circle .percentage-fill{background:var(--app-color, #5a30f4)}:host(.app-color) .outer-container .step-container .progress-line.completed{background-color:var(--app-color, #5a30f4)}:host(.app-color) .outer-container .step-container .step-circle.completed{background:var(--app-color, #5a30f4) !important;border:var(--border-width-01, 0.0625rem) solid var(--app-color, #5a30f4)}:host(.app-color) .outer-container .step-container .step-circle-outer .step-circle.current{border:var(--border-width-01, 0.0625rem) solid var(--app-color, #5a30f4)}:host(.app-color) .outer-container .step-container .progress-line.active-next{background:var(--app-color, #5a30f4) !important}:host(.success) .outer-container .step-container .step-circle{color:var(--success, #3aa76d);background-color:var(--light, #ffffff);border:var(--border-width-01, 0.0625rem) solid var(--success, #3aa76d)}:host(.success) .outer-container .step-container .step-circle.completed{color:var(--light, #ffffff) !important;background:var(--success, #3aa76d)}:host(.success) .outer-container .step-container .step-circle.completed span{color:var(--light, #ffffff)}:host(.success) .outer-container .step-container .step-circle.invalid{color:var(--light, #ffffff) !important;background-color:var(--danger, #d44333);border:var(--border-width-01, 0.0625rem) solid var(--danger, #d44333)}:host(.success) .outer-container .step-container .step-circle.invalid span{color:var(--light, #ffffff)}:host(.success) .outer-container .step-container .step-circle.current-invalid{color:var(--danger, #d44333);border:var(--border-width-01, 0.0625rem) solid var(--danger, #d44333)}:host(.success) .outer-container .step-container .step-circle.locked{color:var(--light, #ffffff);background-color:var(--stable, #adadad);border:var(--border-width-01, 0.0625rem) solid var(--stable, #adadad)}:host(.success) .outer-container .step-container .step-circle .percentage-fill{background:var(--success, #3aa76d)}:host(.success) .outer-container .step-container .progress-line.completed{background-color:var(--success, #3aa76d)}:host(.success) .outer-container .step-container .step-circle.completed{color:var(--success, #3aa76d);border:var(--border-width-01, 0.0625rem) solid var(--success, #3aa76d)}:host(.danger) .outer-container .step-container .step-circle{color:var(--danger, #d44333);background-color:var(--light, #ffffff);border:var(--border-width-01, 0.0625rem) solid var(--danger, #d44333)}:host(.danger) .outer-container .step-container .step-circle.completed{color:var(--light, #ffffff) !important;background:var(--danger, #d44333)}:host(.danger) .outer-container .step-container .step-circle.completed span{color:var(--light, #ffffff)}:host(.danger) .outer-container .step-container .step-circle.invalid{color:var(--light, #ffffff) !important;background-color:var(--danger, #d44333);border:var(--border-width-01, 0.0625rem) solid var(--danger, #d44333)}:host(.danger) .outer-container .step-container .step-circle.invalid span{color:var(--light, #ffffff)}:host(.danger) .outer-container .step-container .step-circle.current-invalid{color:var(--danger, #d44333);border:var(--border-width-01, 0.0625rem) solid var(--danger, #d44333)}:host(.danger) .outer-container .step-container .step-circle.locked{color:var(--light, #ffffff);background-color:var(--stable, #adadad);border:var(--border-width-01, 0.0625rem) solid var(--stable, #adadad)}:host(.danger) .outer-container .step-container .step-circle .percentage-fill{background:var(--danger, #d44333)}:host(.danger) .outer-container .step-container .progress-line.completed{background-color:var(--danger, #d44333)}:host(.danger) .outer-container .step-container .step-circle.completed{color:var(--danger, #d44333)}:host(.warning) .outer-container .step-container .step-circle{background-color:var(--warning, #ed6e33)}:host(.warning) .outer-container .step-container .step-circle.current{color:var(--warning, #ed6e33);border:var(--border-width-01, 0.0625rem) solid var(--warning, #ed6e33)}:host(.warning) .outer-container .progress-line-container .progress-line{background-color:var(--warning, #ed6e33)}:host(.warning) .outer-container .step-container .step-circle.completed{color:var(--warning, #ed6e33)}:host(.info) .outer-container .step-container .step-circle{background-color:var(--info, #d84c96)}:host(.info) .outer-container .step-container .step-circle.current{color:var(--info, #d84c96);border:var(--border-width-01, 0.0625rem) solid var(--info, #d84c96)}:host(.info) .outer-container .progress-line-container .progress-line{background-color:var(--info, #d84c96)}:host(.info) .outer-container .step-container .step-circle.completed{color:var(--info, #d84c96)}:host(.more-stable) yoo-truncate{background-color:var(--stable-ultralight, #fafafa)}";
 
@@ -98,23 +99,23 @@ const YooFormProgressIndicatorComponent = class {
   renderCompletedIndicator() {
     return this.visibleSteps.map((step, index$1) => (index.h("div", { class: "step-container" }, index.h("div", { class: "step-title" }, index.h("span", null, step)), index.h("div", { class: "step-circle completed", onClick: (event) => this.selectStep(event, index$1) }, index.h("span", { class: "completed-icon" }, index.h("yoo-icon", { name: "check" }))), index$1 < this.visibleSteps.length - 1 ? index.h("div", { class: "progress-line" }) : null)));
   }
-  renderStepContainer(step, index$2, lastIndex) {
-    const displayIndex = index$2 + 1;
+  renderStepContainer(step, index$1, lastIndex) {
+    const displayIndex = index$1 + 1;
     return (index.h("div", { class: {
         'step-container ': true,
-        last: this.isLastStep(index$2),
-        active: this.isCurrentStep(index$2)
-      } }, index.h("div", { class: { 'step-circle-outer': true, active: this.isCurrentStep(index$2) } }, index.h("div", { class: {
+        last: this.isLastStep(index$1),
+        active: this.isCurrentStep(index$1)
+      } }, index.h("div", { class: { 'step-circle-outer': true, active: this.isCurrentStep(index$1) } }, index.h("div", { class: {
         'step-circle ': true,
-        current: this.isCurrentStep(index$2),
-        completed: this.isValidStep(index$2) && !this.lockIndex[index$2],
-        invalid: this.isInvalidStep(index$2) && !this.lockIndex[index$2],
-        locked: this.lockIndex[index$2]
+        current: this.isCurrentStep(index$1),
+        completed: this.isValidStep(index$1) && !this.lockIndex[index$1],
+        invalid: this.isInvalidStep(index$1) && !this.lockIndex[index$1],
+        locked: this.lockIndex[index$1]
       }, ref: (el) => {
-        if (this.isCurrentStep(index$2)) {
+        if (this.isCurrentStep(index$1)) {
           this.currentCircle = el;
         }
-      }, onClick: (event) => this.selectStep(event, index$2) }, this.displayMode === 'icon' ? this.renderIcon(index$2) : this.renderNumber(index$2))), index$2 !== lastIndex && this.renderProgresLine(index$2, lastIndex), this.isCurrentStep(index$2) ? (index.h("div", { class: "step-title", style: { width: `${this.stepTitleWidth}px` } }, displayIndex + '. ' + index$1.translateMulti(step))) : null));
+      }, onClick: (event) => this.selectStep(event, index$1) }, this.displayMode === 'icon' ? this.renderIcon(index$1) : this.renderNumber(index$1))), index$1 !== lastIndex && this.renderProgresLine(index$1, lastIndex), this.isCurrentStep(index$1) ? (index.h("div", { class: "step-title", style: { width: `${this.stepTitleWidth}px` } }, displayIndex + '. ' + overlays.translateMulti(step))) : null));
   }
   renderNumber(index$1) {
     if (this.lockIndex[index$1]) {

package/dist/cjs/yoo-form-qrcode.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 formQrcodeCss = ":host .outer-container.readonly{padding-top:var(--spacing-08, 0.5rem);text-align:center;background:var(--stable-ultralight, #fafafa)}:host .outer-container .canvas{width:12.5rem;height:12.5rem;padding:var(--spacing-08, 0.5rem);border-radius:var(--border-radius-04, 0.25rem)}:host([size=medium]) .outer-container .canvas{width:6.25rem;height:6.25rem}:host([size=medium]) .outer-container.readonly{margin-top:0.5rem;padding:1rem;border-radius:0.5rem}:host([size=large]) .outer-container.readonly{margin-top:1.25rem;padding:5rem;border-radius:1.25rem}";
 
@@ -46,7 +47,7 @@ const YooFormQrcodeComponent = class {
   }
   renderQRCode() {
     if (this.value && this.canvasEl) {
-      return index$1.generateYoobicQRCode(this.value, this.canvasEl, this.size, this.logo, this.whiteLabel);
+      return overlays.generateYoobicQRCode(this.value, this.canvasEl, this.size, this.logo, this.whiteLabel);
     }
   }
   render() {

package/dist/cjs/yoo-form-query-builder.cjs.entry.js

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const formInputHelpers = require('./form-input-helpers-a04f76d2.js');
-require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+const formInputHelpers = require('./form-input-helpers-a2843dc0.js');
+require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
+require('./index-de8540eb.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
-require('./common-helpers-6970c46c.js');
+require('./index-1fdbd9b3.js');
+require('./common-helpers-a4efe957.js');
 
 const formQueryBuilderCss = ":host{padding:0}";
 

package/dist/cjs/yoo-form-radio.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 formRadioCss = ":host([color=accent]) input:enabled:checked{border-color:var(--accent, #276ef1)}:host([color=accent]) input:enabled:hover{background-color:var(--accent-20, rgba(39, 110, 241, 0.2));border-color:var(--accent, #276ef1)}:host([color=anthracite]) input:enabled:checked{border-color:var(--anthracite, #1a1a1a)}:host([color=anthracite]) input:enabled:hover{background-color:var(--anthracite-20, rgba(26, 26, 26, 0.2));border-color:var(--anthracite, #1a1a1a)}:host([color=app-color]) input:enabled:checked{border-color:var(--app-color, #5a30f4)}:host([color=app-color]) input:enabled:hover{background-color:var(--app-color-20, rgba(90, 48, 244, 0.2));border-color:var(--app-color, #5a30f4)}:host([color=danger]) input:enabled:checked{border-color:var(--danger, #d44333)}:host([color=danger]) input:enabled:hover{background-color:var(--danger-20, rgba(212, 67, 51, 0.2));border-color:var(--danger, #d44333)}:host([color=dark]) input:enabled:checked{border-color:var(--dark, #000000)}:host([color=dark]) input:enabled:hover{background-color:var(--dark-20, rgba(0, 0, 0, 0.2));border-color:var(--dark, #000000)}:host([color=energized]) input:enabled:checked{border-color:var(--energized, #ffc043)}:host([color=energized]) input:enabled:hover{background-color:var(--energized-20, rgba(255, 192, 67, 0.2));border-color:var(--energized, #ffc043)}:host([color=info]) input:enabled:checked{border-color:var(--info, #d84c96)}:host([color=info]) input:enabled:hover{background-color:var(--info-20, rgba(216, 76, 150, 0.2));border-color:var(--info, #d84c96)}:host([color=light]) input:enabled:checked{border-color:var(--light, #ffffff)}:host([color=light]) input:enabled:hover{background-color:var(--light-20, rgba(255, 255, 255, 0.2));border-color:var(--light, #ffffff)}:host([color=stable]) input:enabled:checked{border-color:var(--stable, #adadad)}:host([color=stable]) input:enabled:hover{background-color:var(--stable-20, rgba(173, 173, 173, 0.2));border-color:var(--stable, #adadad)}:host([color=stable-alt]) input:enabled:checked{border-color:var(--stable-alt, #d0d0d0)}:host([color=stable-alt]) input:enabled:hover{background-color:var(--stable-alt-20, rgba(208, 208, 208, 0.2));border-color:var(--stable-alt, #d0d0d0)}:host([color=stable-light]) input:enabled:checked{border-color:var(--stable-light, #f1f1f1)}:host([color=stable-light]) input:enabled:hover{background-color:var(--stable-light-20, rgba(241, 241, 241, 0.2));border-color:var(--stable-light, #f1f1f1)}:host([color=stable-ultralight]) input:enabled:checked{border-color:var(--stable-ultralight, #fafafa)}:host([color=stable-ultralight]) input:enabled:hover{background-color:var(--stable-ultralight-20, rgba(250, 250, 250, 0.2));border-color:var(--stable-ultralight, #fafafa)}:host([color=success]) input:enabled:checked{border-color:var(--success, #3aa76d)}:host([color=success]) input:enabled:hover{background-color:var(--success-20, rgba(58, 167, 109, 0.2));border-color:var(--success, #3aa76d)}:host([color=text-color]) input:enabled:checked{border-color:var(--text-color, #807f83)}:host([color=text-color]) input:enabled:hover{background-color:var(--text-color-20, rgba(128, 127, 131, 0.2));border-color:var(--text-color, #807f83)}:host([color=warning]) input:enabled:checked{border-color:var(--warning, #ed6e33)}:host([color=warning]) input:enabled:hover{background-color:var(--warning-20, rgba(237, 110, 51, 0.2));border-color:var(--warning, #ed6e33)}:host input{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;margin:var(--spacing-02, 0.125rem);padding:0;border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:50%;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host input:checked{background-color:var(--light, #ffffff)}:host input:disabled:not(:checked){background-color:var(--stable-ultralight, #fafafa);border-color:var(--stable-alt, #d0d0d0)}:host input:enabled{cursor:pointer}:host input:enabled:not(:checked){background-color:var(--light, #ffffff)}:host([size=small]) input,:host([size=medium]) input{width:0.875rem;min-width:0.875rem;height:0.875rem;min-height:0.875rem}:host([size=small]) input:checked,:host([size=medium]) input:checked{border-width:var(--border-width-03, 0.1875rem)}:host([size=large]) input{width:1.25rem;min-width:1.25rem;height:1.25rem;min-height:1.25rem}:host([size=large]) input:checked{border-width:var(--border-width-04, 0.25rem)}:host{--form-radio-label-gap:var(--spacing-16, 1rem)}:host input:enabled+label{cursor:pointer}:host label{padding-left:var(--spacing-08, 0.5rem);line-height:1}:host ::slotted(*){display:grid;grid-auto-flow:column;gap:var(--form-radio-label-gap);-ms-flex-align:center;align-items:center;white-space:nowrap}:host([size=small]) label{font-size:var(--font-size-12, 0.75rem)}:host([size=medium]) label{font-size:var(--font-size-14, 0.875rem)}:host([size=large]) label{font-size:var(--font-size-16, 1rem)}:host{display:grid}:host div{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host([flow=column]){grid-auto-columns:-webkit-max-content;grid-auto-columns:max-content;grid-auto-flow:column}:host([flow=column][size=small]),:host([flow=column][size=medium]){grid-gap:var(--spacing-16, 1rem)}:host([flow=column][size=large]){grid-gap:var(--spacing-24, 1.5rem)}:host([flow=row]){grid-auto-rows:1fr;grid-gap:var(--spacing-08, 0.5rem)}:host(.expanded) input{-ms-flex:none;flex:none}:host(.expanded) span{width:100%}:host label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;overflow:hidden;white-space:nowrap}:host yoo-tooltip{padding-left:var(--spacing-08, 0.5rem)}:host([flow=row].mission-validation) ::slotted(*){white-space:normal}:host([flow=row].mission-validation) div{padding-bottom:var(--spacing-08, 0.5rem)}";
 

package/dist/cjs/yoo-form-range.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 formInputHelpers = require('./form-input-helpers-a04f76d2.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 formRangeCss = ":host yoo-range{-webkit-box-sizing:border-box;box-sizing:border-box}:host(:not([readonly])){display:grid}:host(:not([readonly])) yoo-range{padding:var(--spacing-08, 0.5rem)}:host([dual-knobs]){grid-column-gap:var(--spacing-16, 1rem);grid-template-columns:1fr 1fr}:host([dual-knobs]) yoo-range{grid-column:1/-1}";
 
@@ -101,7 +102,7 @@ const YooFormRangeComponent = class {
   }
   renderReadonly() {
     return this.dualKnobs && this.value ?
-      index.h("span", null, [0, 1].map(i => { var _a; return ((_a = this.value) === null || _a === void 0 ? void 0 : _a[i]) && this.value[i]; }).join(` ${index$1.translate('YOOBICTO')} `))
+      index.h("span", null, [0, 1].map(i => { var _a; return ((_a = this.value) === null || _a === void 0 ? void 0 : _a[i]) && this.value[i]; }).join(` ${overlays.translate('YOOBICTO')} `))
       : index.h("span", null, this.value);
   }
   render() {

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

@@ -2,14 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
-const draggableTagsHelpers = require('./draggable-tags-helpers-bb3be597.js');
-const formInputHelpers = require('./form-input-helpers-a04f76d2.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const draggableTagsHelpers = require('./draggable-tags-helpers-0f80afe0.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('./index-de8540eb.js');
 
 const formRankingCss = ":host{display:block}:host .outer-container{position:relative;width:100%}:host .outer-container .list-item{position:absolute;top:0;width:100%}:host .outer-container .list-item .item-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:100%;background-color:var(--light, #ffffff);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .outer-container .list-item .item-content .value{width:100%;padding:var(--spacing-08, 0.5rem)}:host .outer-container .list-item .item-content yoo-icon{margin-right:var(--spacing-08, 0.5rem)}";
 
@@ -60,7 +61,7 @@ const YooFormRankingComponent = class {
     return this.validity;
   }
   get isInModal() {
-    return !!index$1.findParent(this.host, 'yoo-ion-modal');
+    return !!overlays.findParent(this.host, 'yoo-ion-modal');
   }
   get listItems() {
     var _a;
@@ -131,7 +132,7 @@ const YooFormRankingComponent = class {
   }
   layout(element, index) {
     const itemPosition = this.sortables.slice(0, index).reduce((acc, el) => (acc += el.element.clientHeight), 0);
-    element && index$1.gsapTo(element, 0.3, { y: itemPosition });
+    element && overlays.gsapTo(element, 0.3, { y: itemPosition });
   }
   /**
    * This function apply sortable ability to element.
@@ -147,10 +148,10 @@ const YooFormRankingComponent = class {
       const badgeElement = itemElement.querySelector('yoo-badge');
       const draggableTriggerIcon = itemElement.querySelector('yoo-icon');
       draggableTriggerIcon.style.height = `${valueElement.clientHeight}px`;
-      return index$1.gsapTimeline().then((timeline) => {
+      return overlays.gsapTimeline().then((timeline) => {
         if (timeline) {
           const animation = timeline({
-            boxShadow: index$1.getCssColor('shadow-03'),
+            boxShadow: overlays.getCssColor('shadow-03'),
             force3D: true,
             paused: true
           });
@@ -179,7 +180,7 @@ const YooFormRankingComponent = class {
             this.layout(itemElement, sortable.index);
             this.updateAnswer();
           };
-          dragger = new index$1.Draggable(itemElement, {
+          dragger = new overlays.Draggable(itemElement, {
             type: 'y',
             trigger: draggableTriggerIcon,
             onPress: onPressItem,
@@ -198,7 +199,7 @@ const YooFormRankingComponent = class {
           dragger: dragger,
           element: itemElement,
           index: index,
-          value: this.values.find((value) => index$1.translateMulti(value) === contentElement.querySelector('.value').textContent),
+          value: this.values.find((value) => overlays.translateMulti(value) === contentElement.querySelector('.value').textContent),
           setIndex: setItemIndex
         };
         return sortable;
@@ -206,7 +207,7 @@ const YooFormRankingComponent = class {
     }
   }
   setItemPosition(element, index) {
-    index$1.gsapSet(element, { y: this.getListItemPosition(index) });
+    overlays.gsapSet(element, { y: this.getListItemPosition(index) });
   }
   arrayMove(array, from, to) {
     // changes an elements's position in array
@@ -223,11 +224,11 @@ const YooFormRankingComponent = class {
       return isCorrect ? 'success' : 'danger';
     }
   }
-  renderItem(value, index$2) {
+  renderItem(value, index$1) {
     var _a;
     const badgeColor = this.readonly ? this.getCorrectionColor(value) : `app-color${((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) ? '' : '-60'}`;
-    const text = this.readonly ? (index$2 + 1).toString() : '';
-    return (index.h("div", { class: "list-item", ref: (el) => (this.itemElements[index$2] = el) }, index.h("div", { class: "item-content" }, index.h("yoo-badge", { color: badgeColor, size: "small", text: text }), index.h("div", { class: "value" }, index$1.translateMulti(value)), !this.readonly && index.h("yoo-icon", { name: "ranking-toggle", color: "stable" }))));
+    const text = this.readonly ? (index$1 + 1).toString() : '';
+    return (index.h("div", { class: "list-item", ref: (el) => (this.itemElements[index$1] = el) }, index.h("div", { class: "item-content" }, index.h("yoo-badge", { color: badgeColor, size: "small", text: text }), index.h("div", { class: "value" }, overlays.translateMulti(value)), !this.readonly && index.h("yoo-icon", { name: "ranking-toggle", color: "stable" }))));
   }
   render() {
     const values = this.readonly ? this.value : this.values;

package/dist/cjs/yoo-form-recap-step.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 formRecapStepCss = ":host .outer-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin:var(--spacing-16, 1rem);margin-bottom:0;padding:var(--spacing-16, 1rem);text-align:left;background-color:var(--light, #ffffff);border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--tile-shadow, 0 1px 4px 0 rgba(0, 0, 0, 0.1));box-shadow:var(--tile-shadow, 0 1px 4px 0 rgba(0, 0, 0, 0.1));cursor:pointer}:host .outer-container .icon-outer-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;margin-right:var(--spacing-16, 1rem)}:host .outer-container .icon-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:3rem;height:3rem;color:var(--light, #ffffff);font-size:var(--font-size-16, 1rem);border-radius:50%}:host .outer-container .icon-container:not(.transparent).locked{background-color:var(--stable, #adadad)}:host .outer-container .icon-container:not(.transparent).valid{background:var(--app-color, #5a30f4)}:host .outer-container .icon-container:not(.transparent).invalid{background:var(--danger, #d44333)}:host .outer-container .icon-container.step{position:relative;overflow:hidden;border:var(--border-width-01, 0.0625rem) solid var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}:host .outer-container .icon-container.step yoo-icon{fill:var(--app-color, #5a30f4)}:host .outer-container .icon-container .percentage-fill{position:absolute;top:auto;right:0;bottom:0;left:0;background:var(--app-color, #5a30f4);-webkit-transition:0.3s all;transition:0.3s all}:host .outer-container .text-container{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row}:host .outer-container .text-container .text-container-main{-ms-flex:1;flex:1}:host .outer-container .step-container{color:var(--dark, #000000);font-weight:bold;font-size:var(--font-size-16, 1rem)}:host .outer-container .step-container yoo-icon{padding-right:var(--spacing-04, 0.25rem);font-weight:var(--font-weight-700, 700)}:host .outer-container .avatars-container{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;padding-right:var(--spacing-08, 0.5rem)}:host .outer-container .subtitle-container{color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem)}";
 
@@ -48,8 +49,8 @@ const YooFormRecapStepComponent = class {
         locked: this.locked,
         valid: this.step.valid && !this.locked,
         invalid: this.step.valid === false && !this.locked,
-        step: index$1.isNullOrUndefined(this.step.valid) && !this.locked
-      } }, this.renderIcon())), index.h("div", { class: "text-container" }, index.h("div", { class: "text-container-main" }, !this.subTitle && index.h("div", { class: "step-container" }, index$1.translate('PAGE') + ' ' + this.stepNumber), !this.subTitle && index.h("div", { class: "title-container" }, index.h("yoo-truncate", { class: "form-recap", showEllipsisButton: true, content: index$1.translateMulti(this.mainTitle) })), this.subTitle && index.h("div", { class: "step-container", innerHTML: this.stepNumber + '. ' + index$1.translateMulti(this.mainTitle) }), this.subTitle && index.h("div", { class: "subtitle-container", innerHTML: index$1.translateMulti(this.subTitle) }), index.h("slot", null)), ((_a = this.users) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("div", { class: "text-container-right" }, index.h("yoo-avatars", { users: this.users, size: "extra-small", layout: "stack" }))))));
+        step: overlays.isNullOrUndefined(this.step.valid) && !this.locked
+      } }, this.renderIcon())), index.h("div", { class: "text-container" }, index.h("div", { class: "text-container-main" }, !this.subTitle && index.h("div", { class: "step-container" }, overlays.translate('PAGE') + ' ' + this.stepNumber), !this.subTitle && index.h("div", { class: "title-container" }, index.h("yoo-truncate", { class: "form-recap", showEllipsisButton: true, content: overlays.translateMulti(this.mainTitle) })), this.subTitle && index.h("div", { class: "step-container", innerHTML: this.stepNumber + '. ' + overlays.translateMulti(this.mainTitle) }), this.subTitle && index.h("div", { class: "subtitle-container", innerHTML: overlays.translateMulti(this.subTitle) }), index.h("slot", null)), ((_a = this.users) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("div", { class: "text-container-right" }, index.h("yoo-avatars", { users: this.users, size: "extra-small", layout: "stack" }))))));
   }
 };
 YooFormRecapStepComponent.style = formRecapStepCss;

package/dist/cjs/yoo-form-recurrence-delay.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 formRecurrenceDelayCss = ":host{display:grid;grid-template-columns:repeat(2, 1fr);gap:var(--spacing-16, 1rem)}";
 
@@ -71,7 +72,7 @@ const YooFormRecurrenceDelayComponent = class {
         this.quantifier = event.detail;
         this.internal = true;
         this.updateValue();
-      } }), index.h("yoo-form-autocomplete", { size: this.size, idOnly: true, value: this.unit, values: [{ _id: 'HOURS', title: index$1.translate('YOOBICHOURS') }, { _id: 'DAYS', title: index$1.translate('YOOBICDAYS') }], onInputChanged: (event) => {
+      } }), index.h("yoo-form-autocomplete", { size: this.size, idOnly: true, value: this.unit, values: [{ _id: 'HOURS', title: overlays.translate('YOOBICHOURS') }, { _id: 'DAYS', title: overlays.translate('YOOBICDAYS') }], onInputChanged: (event) => {
         event.stopPropagation();
         this.unit = event.detail;
         this.internal = true;

package/dist/cjs/yoo-form-recurrence-preview.cjs.entry.js

@@ -2,18 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const index = require('./index-e182c32d.js');
+const index$1 = require('./index-1fdbd9b3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const formRecurrencePreviewCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;background-color:var(--light, #ffffff);-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 footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host header{font-weight:bold}:host main{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}:host main.empty{-ms-flex-pack:center;justify-content:center}:host main:not(.empty){padding:var(--spacing-16, 1rem) var(--spacing-48, 3rem);overflow:auto}:host h1{margin:0 0 var(--spacing-16, 1rem);font-size:inherit}:host p{margin:0;color:var(--stable, #adadad);font-size:var(--font-size-14, 0.875rem);text-align:center}:host table{width:100%;border-collapse:collapse}:host table,:host td,:host th{border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0)}:host tbody tr:nth-child(odd){background:var(--stable-light, #f1f1f1)}:host td,:host th{width:50%;padding:var(--spacing-08, 0.5rem) var(--spacing-24, 1.5rem);text-align:left}:host yoo-empty-state+p{margin-top:var(--spacing-16, 1rem)}:host .schedule{display:grid;grid-template-columns:repeat(2, 1fr);gap:var(--spacing-24, 1.5rem);width:100%;margin-top:var(--spacing-24, 1.5rem)}:host .timezones{display:grid;grid-template-columns:repeat(2, 1fr);gap:var(--spacing-16, 1rem);max-width:34.5rem}:host .timezones h1{text-align:right}:host .timezones p{grid-column:1/-1}";
 
-const EmptyState = () => [index.h("yoo-empty-state", null), index.h("p", null, index$1.translate('LISTEMPTY'))];
-const Recurrences = ({ dates, label }) => (index.h("div", { class: "recurrences" }, index.h("h1", null, index$1.translate(label)), index.h("table", null, index.h("thead", null, index.h("tr", null, index.h("th", null, index$1.translate('YOOBICDATE')), index.h("th", null, index$1.translate('YOOBICHOUR')))), index.h("tbody", null, dates.map((date) => (index.h("tr", null, index.h("td", null, index$1.pipes.dateFormat.transform(date, 'ddd L')), index.h("td", null, index$1.pipes.dateFormat.transform(date, 'LT')))))))));
-const Timezones = ({ value, values, onUpdate }) => (index.h("div", { class: "timezones" }, index.h("p", { innerHTML: index$1.translate('RECURRENCEPREVIEWDETAILS') }), index.h("h1", null, index$1.translate('RECURRENCEPREVIEWTIMEZONE')), index.h("yoo-form-autocomplete", { size: "medium", value: value, values: values, onFetchData: (event) => { var _a; return (_a = event.detail.infiniteScroll) === null || _a === void 0 ? void 0 : _a.complete(); }, onInputChanged: (event) => {
+const EmptyState = () => [index.h("yoo-empty-state", null), index.h("p", null, overlays.translate('LISTEMPTY'))];
+const Recurrences = ({ dates, label }) => (index.h("div", { class: "recurrences" }, index.h("h1", null, overlays.translate(label)), index.h("table", null, index.h("thead", null, index.h("tr", null, index.h("th", null, overlays.translate('YOOBICDATE')), index.h("th", null, overlays.translate('YOOBICHOUR')))), index.h("tbody", null, dates.map((date) => (index.h("tr", null, index.h("td", null, overlays.pipes.dateFormat.transform(date, 'ddd L')), index.h("td", null, overlays.pipes.dateFormat.transform(date, 'LT')))))))));
+const Timezones = ({ value, values, onUpdate }) => (index.h("div", { class: "timezones" }, index.h("p", { innerHTML: overlays.translate('RECURRENCEPREVIEWDETAILS') }), index.h("h1", null, overlays.translate('RECURRENCEPREVIEWTIMEZONE')), index.h("yoo-form-autocomplete", { size: "medium", value: value, values: values, onFetchData: (event) => { var _a; return (_a = event.detail.infiniteScroll) === null || _a === void 0 ? void 0 : _a.complete(); }, onInputChanged: (event) => {
     event.stopPropagation();
     onUpdate(event.detail);
   } })));
@@ -28,16 +29,16 @@ const YooFormRecurrencePreviewComponent = class {
     /**
      * Selected timezone.
      */
-    this.timezone = index$1.guessCurrentTimezone();
+    this.timezone = overlays.guessCurrentTimezone();
   }
   finish() {
     this.close.emit();
-    index$1.closeModal(null);
+    overlays.closeModal(null);
   }
   render() {
     const recurrences = index$1.getNextRecurrences(this.value, { max: this.max, timezone: this.timezone });
     const hasRecurrences = !!(recurrences === null || recurrences === void 0 ? void 0 : recurrences.length);
-    return (index.h(index.Host, { class: { ...commonHelpers.getAppContext(this.host) } }, index.h("header", null, index.h("yoo-navbar", null, index.h("yoo-items", { slot: "start" }, index.h("yoo-button", { animated: true, color: "stable", fill: "transparent", rippleType: "unbounded", shape: "circular", onClick: () => this.finish() }, index.h("yoo-icon", { color: "stable", name: "close" }))), index.h("yoo-truncate", null, index$1.translate('RECURRENCEPREVIEWTITLE')))), index.h("main", { class: { empty: !hasRecurrences } }, hasRecurrences && index.h(Timezones, { value: this.timezone, values: index$1.TIMEZONES, onUpdate: (timezone) => (this.timezone = timezone) }), hasRecurrences && (index.h("div", { class: "schedule" }, index.h(Recurrences, { dates: index$1.getNextRecurrences(this.value, { max: this.max, timezone: index$1.guessCurrentTimezone() }), label: index$1.translate('RECURRENCEPREVIEWLEFT') }), index.h(Recurrences, { dates: recurrences, label: index$1.translate('RECURRENCEPREVIEWRIGHT') }))), !hasRecurrences && index.h(EmptyState, null)), index.h("footer", null, index.h("yoo-button", { animated: true, color: "app-color", onClick: () => this.finish() }, index$1.translate('YOOBICSAVE')))));
+    return (index.h(index.Host, { class: { ...commonHelpers.getAppContext(this.host) } }, index.h("header", null, index.h("yoo-navbar", null, index.h("yoo-items", { slot: "start" }, index.h("yoo-button", { animated: true, color: "stable", fill: "transparent", rippleType: "unbounded", shape: "circular", onClick: () => this.finish() }, index.h("yoo-icon", { color: "stable", name: "close" }))), index.h("yoo-truncate", null, overlays.translate('RECURRENCEPREVIEWTITLE')))), index.h("main", { class: { empty: !hasRecurrences } }, hasRecurrences && index.h(Timezones, { value: this.timezone, values: overlays.TIMEZONES, onUpdate: (timezone) => (this.timezone = timezone) }), hasRecurrences && (index.h("div", { class: "schedule" }, index.h(Recurrences, { dates: index$1.getNextRecurrences(this.value, { max: this.max, timezone: overlays.guessCurrentTimezone() }), label: overlays.translate('RECURRENCEPREVIEWLEFT') }), index.h(Recurrences, { dates: recurrences, label: overlays.translate('RECURRENCEPREVIEWRIGHT') }))), !hasRecurrences && index.h(EmptyState, null)), index.h("footer", null, index.h("yoo-button", { animated: true, color: "app-color", onClick: () => this.finish() }, overlays.translate('YOOBICSAVE')))));
   }
   get host() { return index.getElement(this); }
 };

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

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-c8609d4f.js');
-const index = require('./index-f3d7c03d.js');
-const index$2 = require('./index-fc264952.js');
+const index = require('./index-e182c32d.js');
+const index$2 = require('./index-1fdbd9b3.js');
+const overlays = require('./overlays-b6c94fc8.js');
+const index$1 = require('./index-de8540eb.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
@@ -19,20 +20,20 @@ const fromTimeString = (hour) => (parseInt(hour.substr(0, hour.indexOf('.'))) %
 const toTimeString = (hour) => (hour >= 12 && `${hour - 12 || 12}.00 pm`) || `${hour || 12}.00 am`;
 const allHours = Array.from({ length: 24 }).map((_, index) => toTimeString(index));
 const frequencies = [
-  { _id: 'YOOBICDAY', title: index.translate('YOOBICDAY') },
-  { _id: 'YOOBICWEEK', title: index.translate('YOOBICWEEK') },
-  { _id: 'MONTH', title: index.translate('YOOBICMONTH') }
+  { _id: 'YOOBICDAY', title: overlays.translate('YOOBICDAY') },
+  { _id: 'YOOBICWEEK', title: overlays.translate('YOOBICWEEK') },
+  { _id: 'MONTH', title: overlays.translate('YOOBICMONTH') }
 ];
-const Frequency = ({ frequency, hours, interval, onChange }) => (index$1.h("section", { class: "frequency" },
-  index$1.h("yoo-form-input", { hasIconPrefix: false, min: MIN_INTERVAL.toString(), size: "medium", type: "number", uiValidation: { valid: false, invalid: false }, value: interval, onInputChanged: (event) => {
+const Frequency = ({ frequency, hours, interval, onChange }) => (index.h("section", { class: "frequency" },
+  index.h("yoo-form-input", { hasIconPrefix: false, min: MIN_INTERVAL.toString(), size: "medium", type: "number", uiValidation: { valid: false, invalid: false }, value: interval, onInputChanged: (event) => {
       event.stopPropagation();
       onChange(frequency, hours, event.detail);
     }, onValidityChanged: (event) => event.stopPropagation() }),
-  index$1.h("yoo-form-autocomplete", { dynamicOrdering: false, idOnly: true, size: "medium", value: frequency, values: frequencies, onInputChanged: (event) => {
+  index.h("yoo-form-autocomplete", { dynamicOrdering: false, idOnly: true, size: "medium", value: frequency, values: frequencies, onInputChanged: (event) => {
       event.stopPropagation();
       onChange(event.detail, hours, interval);
     }, onValidityChanged: (event) => event.stopPropagation() }),
-  index$1.h("yoo-form-autocomplete", { dynamicOrdering: false, entityType: "slots", forceHideSearch: true, multiple: true, multipleSelectionSuffix: null, size: "medium", value: hours === null || hours === void 0 ? void 0 : hours.map((hour) => toTimeString(hour)), values: allHours, onInputChanged: (event) => {
+  index.h("yoo-form-autocomplete", { dynamicOrdering: false, entityType: "slots", forceHideSearch: true, multiple: true, multipleSelectionSuffix: null, size: "medium", value: hours === null || hours === void 0 ? void 0 : hours.map((hour) => toTimeString(hour)), values: allHours, onInputChanged: (event) => {
       event.stopPropagation();
       onChange(frequency, (event.detail || []).map((hour) => fromTimeString(hour)).sort((hour1, hour2) => hour1 - hour2), interval);
     }, onValidityChanged: (event) => event.stopPropagation() })));
@@ -48,20 +49,20 @@ const weeks = ['FIRST', 'SECOND', 'THIRD', 'YOOBICLAST'];
 const MonthOptions = ({ hidden, options, onChange }) => {
   const mode = options === null || options === void 0 ? void 0 : options.mode;
   const byweekday = options === null || options === void 0 ? void 0 : options.byweekday;
-  return (index$1.h("section", { class: "month", hidden: hidden },
-    index$1.h("yoo-form-autocomplete", { dynamicOrdering: false, size: "medium", value: toModeTranslationKey(mode), values: modes$1.map((mode) => toModeTranslationKey(mode)), onInputChanged: (event) => {
+  return (index.h("section", { class: "month", hidden: hidden },
+    index.h("yoo-form-autocomplete", { dynamicOrdering: false, size: "medium", value: toModeTranslationKey(mode), values: modes$1.map((mode) => toModeTranslationKey(mode)), onInputChanged: (event) => {
         event.stopPropagation();
         onChange({ ...options, mode: fromModeTranslationKey(event.detail) });
       }, onValidityChanged: (event) => event.stopPropagation() }),
-    index$1.h("yoo-form-autocomplete", { dynamicOrdering: false, forceHideSearch: true, hidden: mode === 'WEEKDAY', size: "medium", value: options === null || options === void 0 ? void 0 : options.bymonthday, values: monthdays, onInputChanged: (event) => {
+    index.h("yoo-form-autocomplete", { dynamicOrdering: false, forceHideSearch: true, hidden: mode === 'WEEKDAY', size: "medium", value: options === null || options === void 0 ? void 0 : options.bymonthday, values: monthdays, onInputChanged: (event) => {
         event.stopPropagation();
         onChange({ ...options, bymonthday: event.detail });
       }, onValidityChanged: (event) => event.stopPropagation() }),
-    index$1.h("yoo-form-autocomplete", { dynamicOrdering: false, hidden: mode === 'MONTHDAY', size: "medium", value: toWeekTranslationKey(byweekday === null || byweekday === void 0 ? void 0 : byweekday.week), values: weeks.map((week) => toWeekTranslationKey(week)), onInputChanged: (event) => {
+    index.h("yoo-form-autocomplete", { dynamicOrdering: false, hidden: mode === 'MONTHDAY', size: "medium", value: toWeekTranslationKey(byweekday === null || byweekday === void 0 ? void 0 : byweekday.week), values: weeks.map((week) => toWeekTranslationKey(week)), onInputChanged: (event) => {
         event.stopPropagation();
         onChange({ ...options, byweekday: { ...byweekday, week: fromWeekTranslationKey(event.detail) } });
       }, onValidityChanged: (event) => event.stopPropagation() }),
-    index$1.h("yoo-form-autocomplete", { dynamicOrdering: false, entityType: "days", forceHideSearch: true, hidden: mode === 'MONTHDAY', size: "medium", value: byweekday === null || byweekday === void 0 ? void 0 : byweekday.weekday, values: weekdays, onInputChanged: (event) => {
+    index.h("yoo-form-autocomplete", { dynamicOrdering: false, entityType: "days", forceHideSearch: true, hidden: mode === 'MONTHDAY', size: "medium", value: byweekday === null || byweekday === void 0 ? void 0 : byweekday.weekday, values: weekdays, onInputChanged: (event) => {
         event.stopPropagation();
         onChange({ ...options, byweekday: { ...byweekday, weekday: event.detail } });
       }, onValidityChanged: (event) => event.stopPropagation() })));
@@ -71,45 +72,45 @@ const translationKey = 'SCHEDULEEND';
 const modes = ['DYNAMIC', 'FIXEDBYCOUNT', 'FIXEDBYDATE'];
 const End = ({ end, start, onChange }) => {
   const selectedMode = end === null || end === void 0 ? void 0 : end.mode;
-  return (index$1.h("section", { class: "schedule-end" },
-    index$1.h("label", null, index.translate(translationKey)),
-    index$1.h("yoo-form-radio", { options: modes, size: "medium", value: selectedMode, onInputChanged: (event) => {
+  return (index.h("section", { class: "schedule-end" },
+    index.h("label", null, overlays.translate(translationKey)),
+    index.h("yoo-form-radio", { options: modes, size: "medium", value: selectedMode, onInputChanged: (event) => {
         event.stopPropagation();
         onChange({ ...end, mode: event.detail });
-      } }, modes.map((mode, index$3) => (index$1.h("div", { slot: index$3.toString() },
-      index.translate(`${translationKey}${mode}`),
-      mode === 'FIXEDBYCOUNT' && (index$1.h("yoo-form-input", { style: { visibility: selectedMode !== 'FIXEDBYCOUNT' ? 'hidden' : undefined }, hasIconPrefix: false, min: MIN_COUNT.toString(), size: "medium", type: "number", uiValidation: { valid: false, invalid: false }, value: end === null || end === void 0 ? void 0 : end.count, onInputChanged: (event) => {
+      } }, modes.map((mode, index$2) => (index.h("div", { slot: index$2.toString() },
+      overlays.translate(`${translationKey}${mode}`),
+      mode === 'FIXEDBYCOUNT' && (index.h("yoo-form-input", { style: { visibility: selectedMode !== 'FIXEDBYCOUNT' ? 'hidden' : undefined }, hasIconPrefix: false, min: MIN_COUNT.toString(), size: "medium", type: "number", uiValidation: { valid: false, invalid: false }, value: end === null || end === void 0 ? void 0 : end.count, onInputChanged: (event) => {
           event.stopPropagation();
           onChange({ ...end, count: event.detail });
         }, onValidityChanged: (event) => event.stopPropagation() })),
-      mode === 'FIXEDBYDATE' && (index$1.h("yoo-form-date-time", { style: { visibility: selectedMode !== 'FIXEDBYDATE' ? 'hidden' : undefined }, clearable: false, minDate: getScheduleEndMinDate(start), size: "medium", type: index$2.FormFieldType.datetime, value: end === null || end === void 0 ? void 0 : end.date, onInputChanged: (event) => {
+      mode === 'FIXEDBYDATE' && (index.h("yoo-form-date-time", { style: { visibility: selectedMode !== 'FIXEDBYDATE' ? 'hidden' : undefined }, clearable: false, minDate: getScheduleEndMinDate(start), size: "medium", type: index$1.FormFieldType.datetime, value: end === null || end === void 0 ? void 0 : end.date, onInputChanged: (event) => {
           event.stopPropagation();
           onChange({ ...end, date: event.detail ? new Date(event.detail) : undefined });
         }, onValidityChanged: (event) => event.stopPropagation() }))))))));
 };
 
-const Start = ({ start, onChange }) => (index$1.h("section", { class: "schedule-start" },
-  index$1.h("label", null, index.translate('SCHEDULESTART')),
-  index$1.h("yoo-form-date-time", { clearable: false, size: "medium", type: index$2.FormFieldType.datetime, value: start === null || start === void 0 ? void 0 : start.date, onInputChanged: (event) => {
+const Start = ({ start, onChange }) => (index.h("section", { class: "schedule-start" },
+  index.h("label", null, overlays.translate('SCHEDULESTART')),
+  index.h("yoo-form-date-time", { clearable: false, size: "medium", type: index$1.FormFieldType.datetime, value: start === null || start === void 0 ? void 0 : start.date, onInputChanged: (event) => {
       event.stopPropagation();
       onChange({ ...start, date: event.detail ? new Date(event.detail) : undefined });
     }, onValidityChanged: (event) => event.stopPropagation() }),
-  index$1.h("yoo-tooltip", { content: index.translate('SCHEDULESTARTTOOLTIP'), placement: "right" },
-    index$1.h("yoo-icon", { color: "stable", name: "help", size: "small" }))));
+  index.h("yoo-tooltip", { content: overlays.translate('SCHEDULESTARTTOOLTIP'), placement: "right" },
+    index.h("yoo-icon", { color: "stable", name: "help", size: "small" }))));
 
 const Schedule = ({ schedule, onChange }) => {
   const start = schedule === null || schedule === void 0 ? void 0 : schedule.start;
   const end = schedule === null || schedule === void 0 ? void 0 : schedule.end;
-  return (index$1.h("section", { class: "schedule" },
-    index$1.h(Start, { start: start, onChange: (start) => onChange({ start, end }) }),
-    index$1.h(End, { end: end, start: start, onChange: (end) => onChange({ start, end }) })));
+  return (index.h("section", { class: "schedule" },
+    index.h(Start, { start: start, onChange: (start) => onChange({ start, end }) }),
+    index.h(End, { end: end, start: start, onChange: (end) => onChange({ start, end }) })));
 };
 
 const allWeekdays = ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY'];
 const WeekOptions = ({ hidden, options, onChange }) => {
   const weekdays = (options === null || options === void 0 ? void 0 : options.byweekday) || [];
-  return (index$1.h("section", { class: "week", hidden: hidden },
-    index$1.h("yoo-form-autocomplete", { dynamicOrdering: false, entityType: "weekdays", forceHideSearch: true, multiple: true, multipleSelectionSuffix: null, size: "medium", value: weekdays, values: allWeekdays, onInputChanged: (event) => {
+  return (index.h("section", { class: "week", hidden: hidden },
+    index.h("yoo-form-autocomplete", { dynamicOrdering: false, entityType: "weekdays", forceHideSearch: true, multiple: true, multipleSelectionSuffix: null, size: "medium", value: weekdays, values: allWeekdays, onInputChanged: (event) => {
         event.stopPropagation();
         onChange({ ...options, byweekday: event.detail.sort((weekday1, weekday2) => allWeekdays.indexOf(weekday1) - allWeekdays.indexOf(weekday2)) });
       }, onValidityChanged: (event) => event.stopPropagation() })));
@@ -168,9 +169,9 @@ const formRecurrenceCss = ":host{display:grid;grid-auto-rows:-webkit-min-content
 
 const YooFormRecurrenceComponent = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    this.inputChanged = index$1.createEvent(this, "inputChanged", 7);
-    this.validityChanged = index$1.createEvent(this, "validityChanged", 7);
+    index.registerInstance(this, hostRef);
+    this.inputChanged = index.createEvent(this, "inputChanged", 7);
+    this.validityChanged = index.createEvent(this, "validityChanged", 7);
     /**
      * If `true`, the user can see animations.
      */
@@ -212,7 +213,7 @@ const YooFormRecurrenceComponent = class {
         }
       });
     }
-    this.value = index.sanitizeRecurrence(this.value);
+    this.value = index$2.sanitizeRecurrence(this.value);
     this.updateValidity();
   }
   componentWillUpdate() {
@@ -227,7 +228,7 @@ const YooFormRecurrenceComponent = class {
     }
   }
   updateValue(value) {
-    this.value = index.getRecurrenceValue({ ...this.value, ...value });
+    this.value = index$2.getRecurrenceValue({ ...this.value, ...value });
     this.updateValidity();
     this.inputChanged.emit(this.value);
   }
@@ -235,7 +236,7 @@ const YooFormRecurrenceComponent = class {
     var _a, _b;
     const options = (_a = this.value) === null || _a === void 0 ? void 0 : _a.options;
     const frequency = options === null || options === void 0 ? void 0 : options.frequency;
-    return (index$1.h(index$1.Host, null, index$1.h("label", null, index.translate('REPEATSEVERY')), index$1.h(Frequency, { frequency: frequency, hours: options === null || options === void 0 ? void 0 : options.byhour, interval: options === null || options === void 0 ? void 0 : options.interval, onChange: (frequency, byhour, interval) => this.updateValue({ options: { ...options, byhour, frequency, interval } }) }), index$1.h("label", { hidden: frequency !== 'YOOBICWEEK' && frequency !== 'MONTH' }, index.translate('REPEATSON')), index$1.h(WeekOptions, { hidden: frequency !== 'YOOBICWEEK', options: options === null || options === void 0 ? void 0 : options.weekOptions, onChange: (weekOptions) => this.updateValue({ options: { ...options, weekOptions } }) }), index$1.h(MonthOptions, { hidden: frequency !== 'MONTH', options: options === null || options === void 0 ? void 0 : options.monthOptions, onChange: (monthOptions) => this.updateValue({ options: { ...options, monthOptions } }) }), index$1.h("p", { innerHTML: index.translate('RECURRENCEHOURSTOOLTIP') }), index$1.h("yoo-collapsible", { class: "form", header: index.translate('ADVANCEDSETTINGS') }, index$1.h(Schedule, { schedule: (_b = this.value) === null || _b === void 0 ? void 0 : _b.schedule, onChange: (schedule) => this.updateValue({ schedule }) }))));
+    return (index.h(index.Host, null, index.h("label", null, overlays.translate('REPEATSEVERY')), index.h(Frequency, { frequency: frequency, hours: options === null || options === void 0 ? void 0 : options.byhour, interval: options === null || options === void 0 ? void 0 : options.interval, onChange: (frequency, byhour, interval) => this.updateValue({ options: { ...options, byhour, frequency, interval } }) }), index.h("label", { hidden: frequency !== 'YOOBICWEEK' && frequency !== 'MONTH' }, overlays.translate('REPEATSON')), index.h(WeekOptions, { hidden: frequency !== 'YOOBICWEEK', options: options === null || options === void 0 ? void 0 : options.weekOptions, onChange: (weekOptions) => this.updateValue({ options: { ...options, weekOptions } }) }), index.h(MonthOptions, { hidden: frequency !== 'MONTH', options: options === null || options === void 0 ? void 0 : options.monthOptions, onChange: (monthOptions) => this.updateValue({ options: { ...options, monthOptions } }) }), index.h("p", { innerHTML: overlays.translate('RECURRENCEHOURSTOOLTIP') }), index.h("yoo-collapsible", { class: "form", header: overlays.translate('ADVANCEDSETTINGS') }, index.h(Schedule, { schedule: (_b = this.value) === null || _b === void 0 ? void 0 : _b.schedule, onChange: (schedule) => this.updateValue({ schedule }) }))));
   }
 };
 YooFormRecurrenceComponent.style = formRecurrenceCss;