@yoobic/yobi 8.2.2 → 8.3.0-2

package/dist/cjs/yoo-form-emailreport.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 formEmailreportCss = ":host .subtitle{color:var(--text-color, #807f83)}:host .readonly{padding:0.5rem 0.5rem 0 0}:host(.history) .readonly{padding:0 !important}";
 
@@ -35,14 +36,14 @@ const YooFormEmailreportComponent = class {
         if (this.fieldValues && this.fieldValues.length > 0) {
           emails = emails.concat(this.fieldValues);
         }
-        if (index$1.getSession().selectedLocation && lodash.isArray(index$1.getSession().selectedLocation.notificationemail) && index$1.getSession().selectedLocation.notificationemail.length > 0) {
-          emails = emails.concat(index$1.getSession().selectedLocation.notificationemail);
+        if (overlays.getSession().selectedLocation && lodash.isArray(overlays.getSession().selectedLocation.notificationemail) && overlays.getSession().selectedLocation.notificationemail.length > 0) {
+          emails = emails.concat(overlays.getSession().selectedLocation.notificationemail);
         }
-        if (index$1.getSession().selectedLocation && index$1.getSession().selectedLocation.contactemail) {
-          emails.push(index$1.getSession().selectedLocation.contactemail);
+        if (overlays.getSession().selectedLocation && overlays.getSession().selectedLocation.contactemail) {
+          emails.push(overlays.getSession().selectedLocation.contactemail);
         }
-        if (index$1.getSession().user) {
-          values.unshift(index$1.getSession().user);
+        if (overlays.getSession().user) {
+          values.unshift(overlays.getSession().user);
         }
         if (values && values.length > 0) {
           const emailValues = values.map((u) => u.email || u.username || u._id);
@@ -90,7 +91,7 @@ const YooFormEmailreportComponent = class {
     ev.stopPropagation();
   }
   renderInput() {
-    return (index.h("yoo-form-autocomplete", { ref: (el) => (this.formAutocomplete = el), size: index$1.isWeb(this.host) ? 'medium' : 'large', multiple: true, isLocal: this.isLocal, value: this.value, values: this.isLocal ? this.fieldValues : null, iconPrefix: "email", entityType: "emails", displayType: "card-list", placeholder: this.isLocal ? 'ADDNEWEMAILS' : null, onFetchData: (ev) => this.onFetchData(ev), onInputChanged: (ev) => this.onInputChanged(ev), onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => this.onAutoCompleteValidityChanged(ev), tags: this.tags, clearable: true, allowCustomTag: true, tabindex: this.inputTabIndex }));
+    return (index.h("yoo-form-autocomplete", { ref: (el) => (this.formAutocomplete = el), size: overlays.isWeb(this.host) ? 'medium' : 'large', multiple: true, isLocal: this.isLocal, value: this.value, values: this.isLocal ? this.fieldValues : null, iconPrefix: "email", entityType: "emails", displayType: "card-list", placeholder: this.isLocal ? 'ADDNEWEMAILS' : null, onFetchData: (ev) => this.onFetchData(ev), onInputChanged: (ev) => this.onInputChanged(ev), onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => this.onAutoCompleteValidityChanged(ev), tags: this.tags, clearable: true, allowCustomTag: true, tabindex: this.inputTabIndex }));
   }
   renderReadonly() {
     const emails = lodash.compact([].concat(this.value));

package/dist/cjs/yoo-form-entity-value-pairs.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 lodash = require('./lodash-597bda6d.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const formEntityValuePairsCss = ":host .form-entity-value-pair{margin-top:var(--spacing-16, 1rem)}:host .form-entity-value-pair .header-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .form-entity-value-pair .header-container yoo-entity{-ms-flex-positive:1;flex-grow:1}:host .form-entity-value-pair .header-container .delete-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-alt-40, rgba(208, 208, 208, 0.4))}:host .form-entity-value-pair .header-container .delete-container yoo-button{margin-bottom:var(--spacing-08, 0.5rem)}:host .form-entity-value-pair .inputs-container{display:-ms-flexbox;display:flex;margin-top:var(--spacing-08, 0.5rem)}:host .form-entity-value-pair .inputs-container yoo-form-input-container{-ms-flex:0.5;flex:0.5}:host .max-message{color:var(--app-color, #5a30f4);font-size:var(--font-size-12, 0.75rem);text-align:right}";
 
@@ -126,7 +127,7 @@ const YooFormEntityValuePairsComponent = class {
       ev.detail.query.fields = this.queryFields;
       if (!lodash.isEqual(this.selectionQuery, ev.detail.query)) {
         this.selectionQuery = ev.detail.query;
-        index$1.getAsyncExtraData({ type: 'select-all-query', params: { collectionName: this.collectionName, query: this.selectionQuery } }).then((items) => {
+        overlays.getAsyncExtraData({ type: 'select-all-query', params: { collectionName: this.collectionName, query: this.selectionQuery } }).then((items) => {
           this.pairs =
             (items === null || items === void 0 ? void 0 : items.map((item) => {
               var _a;
@@ -149,18 +150,18 @@ const YooFormEntityValuePairsComponent = class {
    * @param {IFormEntityValuePair} pair
    * @param {number} index The index of the entity into the list of the pairs
    */
-  renderEntityCardListItem(pair, index$2) {
+  renderEntityCardListItem(pair, index$1) {
     var _a, _b, _c, _d;
     const entityType = this.config.cardListEntityType || this.entityType;
     return (index.h("div", { class: "form-entity-value-pair" }, index.h("div", { class: "header-container" }, index.h("yoo-entity", { item: pair, entityType: entityType, displayType: "card-list", readonly: this.readonly }), !this.readonly &&
-      index.h("div", { class: "delete-container" }, index.h("yoo-button", { shape: "square", onClick: (ev) => this.onClickDelete(ev, index$2) }, index.h("yoo-icon", { name: "delete", size: "small" })))), !this.readonly &&
-      index.h("div", { class: "inputs-container" }, index.h("yoo-form-input-container", { field: { title: index$1.translate((_a = this.config) === null || _a === void 0 ? void 0 : _a.inputLabel), help: index$1.translate((_b = this.config) === null || _b === void 0 ? void 0 : _b.inputHelp) }, required: false }, index.h("yoo-form-input", { type: (_c = this.config) === null || _c === void 0 ? void 0 : _c.inputType, required: false, clearable: true, hasIconPrefix: false, size: "medium", validators: (_d = this.config) === null || _d === void 0 ? void 0 : _d.validators, value: pair.value, onInputChanged: (ev) => this.updateEntityPairedValue(ev, index$2) })))));
+      index.h("div", { class: "delete-container" }, index.h("yoo-button", { shape: "square", onClick: (ev) => this.onClickDelete(ev, index$1) }, index.h("yoo-icon", { name: "delete", size: "small" })))), !this.readonly &&
+      index.h("div", { class: "inputs-container" }, index.h("yoo-form-input-container", { field: { title: overlays.translate((_a = this.config) === null || _a === void 0 ? void 0 : _a.inputLabel), help: overlays.translate((_b = this.config) === null || _b === void 0 ? void 0 : _b.inputHelp) }, required: false }, index.h("yoo-form-input", { type: (_c = this.config) === null || _c === void 0 ? void 0 : _c.inputType, required: false, clearable: true, hasIconPrefix: false, size: "medium", validators: (_d = this.config) === null || _d === void 0 ? void 0 : _d.validators, value: pair.value, onInputChanged: (ev) => this.updateEntityPairedValue(ev, index$1) })))));
   }
   render() {
     var _a, _b, _c, _d;
     return index.h(index.Host, null, !this.readonly && [
       index.h("yoo-form-autocomplete", { ref: (el) => (this.formAutocompleteEntities = el), displayType: "card-list", size: "medium", iconPrefix: this.iconPrefix, collectionName: this.collectionName, entityType: this.entityType, multiple: true, returnQuery: true, max: this.max, value: this.getSelectedPairs(), sortsAndFilters: (_a = this.selectionQuery) === null || _a === void 0 ? void 0 : _a.sortsAndFilters, currentSelectedTags: (_b = this.selectionQuery) === null || _b === void 0 ? void 0 : _b.tags, onInputChanged: (ev) => this.updateSelectedPairs(ev), onFetchData: (ev) => this.onFetchData(ev), onFetchFieldFilterData: (ev) => this.onFetchFieldFilterData(ev), onFetchCustomData: (ev) => this.onFetchCustomData(ev), model: this.model, tags: this.tags, clearSortsAndFilters: false, clearTags: false }),
-      this.max && ((_c = this.pairs) === null || _c === void 0 ? void 0 : _c.length) >= this.max && index.h("div", { class: "max-message" }, index$1.translate('MAXSELECTEDITEMREACHED', { count: this.max }))
+      this.max && ((_c = this.pairs) === null || _c === void 0 ? void 0 : _c.length) >= this.max && index.h("div", { class: "max-message" }, overlays.translate('MAXSELECTEDITEMREACHED', { count: this.max }))
     ], (_d = this.pairs) === null || _d === void 0 ? void 0 :
       _d.map((p, index) => this.renderEntityCardListItem(p, index)));
   }

package/dist/cjs/yoo-form-explanation.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 formExplanationCss = ":host{display:block;font-size:var(--font-size-16, 1rem)}:host>*+h3{margin-top:var(--spacing-16, 1rem)}:host h3{margin-bottom:var(--spacing-08, 0.5rem);font-weight:normal;font-size:inherit}:host p{margin:0;color:var(--success, #3aa76d)}:host yoo-form-document{--outer-container-padding:0}:host yoo-markdown{color:var(--stable, #adadad)}";
 
@@ -19,7 +20,7 @@ const YooFormExplanationComponent = class {
     (_a = this.markdown) === null || _a === void 0 ? void 0 : _a.setContent();
   }
   render() {
-    return (index.h(index.Host, null, !!this.answer && [index.h("h3", null, index$1.translate('CORRECTANSWER')), index.h("p", null, this.answer)], !!this.text && [index.h("h3", null, index$1.translate('YOOBICWHY?')), index.h("yoo-markdown", { ref: (el) => (this.markdown = el), content: index$1.translateMulti(this.text) })], !!this.document && [index.h("h3", null, index$1.translate('EXTRA')), index.h("yoo-form-document", { showActionSheet: index$1.isNativeMobile() && index$1.isPdf(this.document), document: this.document })]));
+    return (index.h(index.Host, null, !!this.answer && [index.h("h3", null, overlays.translate('CORRECTANSWER')), index.h("p", null, this.answer)], !!this.text && [index.h("h3", null, overlays.translate('YOOBICWHY?')), index.h("yoo-markdown", { ref: (el) => (this.markdown = el), content: overlays.translateMulti(this.text) })], !!this.document && [index.h("h3", null, overlays.translate('EXTRA')), index.h("yoo-form-document", { showActionSheet: overlays.isNativeMobile() && overlays.isPdf(this.document), document: this.document })]));
   }
 };
 YooFormExplanationComponent.style = formExplanationCss;

package/dist/cjs/yoo-form-feed-preview.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 formFeedPreviewCss = ":host{width:100%;height:100%}:host .readonly{border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-04, 0.25rem)}";
 

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

@@ -2,14 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$2 = 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 index$1 = require('./index-7d3c7ee7.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const formFeedbackCss = ":host .heading{padding-bottom:var(--spacing-48, 3rem);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-28, 1.75rem);text-align:center}:host .feedback-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:space-evenly;justify-content:space-evenly}:host .readonly{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:start;justify-content:flex-start}:host .readonly span{font-size:var(--font-size-36, 2.25rem)}:host([type=confidence]) yoo-form-choice-card{--card-border-color:transparent}:host([type=confidence]) .container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;max-width:25rem;height:100%}:host([type=confidence]) .container .heading{margin:0 var(--spacing-16, 1rem);color:var(--light, #ffffff)}:host([type=confidence]) .container .feedback-container,:host([type=confidence]) .container .readonly{-ms-flex-pack:justify;justify-content:space-between;margin:0 var(--spacing-24, 1.5rem)}:host([type=confidence]) .container .feedback-container .feedback,:host([type=confidence]) .container .readonly .feedback{width:4.375rem;margin-right:var(--spacing-16, 1rem)}:host([type=confidence]) .container .feedback-container .feedback .description,:host([type=confidence]) .container .readonly .feedback .description{margin:0;padding-top:var(--spacing-16, 1rem);color:var(--light, #ffffff);line-height:var(--spacing-24, 1.5rem);text-align:center;word-break:break-word}:host([type=confidence]) .container .button-container{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin-top:var(--spacing-64, 4rem)}:host([type=confidence]) .container .readonly{display:grid;grid-template-columns:repeat(3, minmax(0px, 1fr));margin:0;-webkit-column-gap:var(--spacing-16, 1rem);-moz-column-gap:var(--spacing-16, 1rem);column-gap:var(--spacing-16, 1rem)}:host(.mobile) .button-container{position:absolute;bottom:0.375rem;left:0;width:100%}:host(.mobile) .button-container yoo-button{width:100%;margin:var(--spacing-16, 1rem)}:host(.web) .container{margin:0 auto}";
 
@@ -46,22 +47,22 @@ const YooFormFeedbackComponent = class {
     return isSelected ? 'app-color' : this.isConfidenceQuiz ? 'light-20' : 'light';
   }
   renderHeading() {
-    return this.heading ? index.h("h1", { class: "heading" }, index$2.translate(this.heading)) : '';
+    return this.heading ? index.h("h1", { class: "heading" }, overlays.translate(this.heading)) : '';
   }
   renderDescription(description) {
-    return description ? index.h("p", { class: "description" }, index$2.translate(description)) : '';
+    return description ? index.h("p", { class: "description" }, overlays.translate(description)) : '';
   }
   renderButtons() {
     this.buttonElements = this.emojis.map((emoji, index$1) => {
       var _a;
-      return (index.h("div", { class: "feedback" }, index.h("yoo-button", { class: this.isConfidenceQuiz ? 'no-border extra-large-emoji' : '', size: this.size, shape: this.shape || this.isConfidenceQuiz ? 'circular' : 'rectangular', color: this.getColor(this.value - 1 === index$1), animated: true, onClick: () => this.onStateClick(index$1) }, emoji), this.renderDescription(index$2.getConfidenceDescriptionKey((_a = this.confidenceValues) === null || _a === void 0 ? void 0 : _a[index$1]))));
+      return (index.h("div", { class: "feedback" }, index.h("yoo-button", { class: this.isConfidenceQuiz ? 'no-border extra-large-emoji' : '', size: this.size, shape: this.shape || this.isConfidenceQuiz ? 'circular' : 'rectangular', color: this.getColor(this.value - 1 === index$1), animated: true, onClick: () => this.onStateClick(index$1) }, emoji), this.renderDescription(overlays.getConfidenceDescriptionKey((_a = this.confidenceValues) === null || _a === void 0 ? void 0 : _a[index$1]))));
     });
     return this.buttonElements;
   }
   renderFormChoice() {
     return this.emojis.map((emoji, index$1) => {
       var _a;
-      return index.h("yoo-form-choice-card", { values: [{ description: index$2.getConfidenceDescriptionKey((_a = this.confidenceValues) === null || _a === void 0 ? void 0 : _a[index$1]), emoji, hideCheckbox: true }], customEvent: this.isConfidenceQuiz, selected: this.isConfidenceQuiz && (this.value - 1 === index$1), onChoiceSelected: () => this.onStateClick(index$1) });
+      return index.h("yoo-form-choice-card", { values: [{ description: overlays.getConfidenceDescriptionKey((_a = this.confidenceValues) === null || _a === void 0 ? void 0 : _a[index$1]), emoji, hideCheckbox: true }], customEvent: this.isConfidenceQuiz, selected: this.isConfidenceQuiz && (this.value - 1 === index$1), onChoiceSelected: () => this.onStateClick(index$1) });
     });
   }
   renderReadonly() {

package/dist/cjs/yoo-form-filter-date.cjs.entry.js

@@ -2,10 +2,11 @@
 
 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 overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const Option = ({ animated, selected, size, text, onToggle }, children) => (index.h("div", { class: "option" },
@@ -18,25 +19,25 @@ const Option = ({ animated, selected, size, text, onToggle }, children) => (inde
 const RangeAbsoluteOption = ({ selected, value, onChange }) => (index.h("yoo-calendar", { dateRange: value, hidden: !selected, isDatePicker: true, isRange: true, size: "small", onDateRangeChanged: (event) => onChange(event.detail.map(({ date }) => date)) }));
 const NonRangeAbsoluteOption = ({ selected, value, onChange }) => (index.h("yoo-calendar", { activeDay: value, hidden: !selected, isDatePicker: true, size: "small", onDateChanged: (event) => onChange(event.detail.date) }));
 const RelativeOption = ({ selected, size, value, onChange }) => (index.h("div", { class: "input", hidden: !selected },
-  index$1.translate('INTHELAST'),
+  overlays.translate('INTHELAST'),
   index.h("yoo-form-input", { clearable: false, hasIconPrefix: false, min: "1", size: size, type: "number", value: value, onInputChanged: (event) => {
       event.stopPropagation();
       onChange(event.detail);
     } })));
 
-const isRangeAbsolute = (operator) => operator === index$2.FormFilterDateOperator.absoluteRange;
-const isNonRangeAbsolute = (operator) => [index$2.FormFilterDateOperator.absoluteOn, index$2.FormFilterDateOperator.absoluteBefore, index$2.FormFilterDateOperator.absoluteAfter].includes(operator);
+const isRangeAbsolute = (operator) => operator === index$1.FormFilterDateOperator.absoluteRange;
+const isNonRangeAbsolute = (operator) => [index$1.FormFilterDateOperator.absoluteOn, index$1.FormFilterDateOperator.absoluteBefore, index$1.FormFilterDateOperator.absoluteAfter].includes(operator);
 const isAbsolute = (operator) => isRangeAbsolute(operator) || isNonRangeAbsolute(operator);
 const isRelative = (operator) => !isAbsolute(operator);
 
 const formFilterDateCss = ":host{--dialog-max-height:initial;--dialog-position:initial;--dialog-width:initial}:host h1{margin:0;color:var(--dark, #000000);font-size:inherit}:host yoo-calendar{width:13rem;height:13rem;padding:var(--spacing-08, 0.5rem)}:host yoo-form-input{width:5rem;padding-left:1rem}:host yoo-calendar,:host .input{grid-column:2/2}:host .input:not([hidden]){display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .option{display:grid;grid-template-rows:repeat(2, auto);grid-template-columns:auto 1fr;-ms-flex-align:center;align-items:center;-webkit-column-gap:var(--spacing-08, 0.5rem);-moz-column-gap:var(--spacing-08, 0.5rem);column-gap:var(--spacing-08, 0.5rem)}:host .options{display:grid;margin-bottom:var(--spacing-08, 0.5rem)}:host([size=small]) yoo-calendar,:host([size=small]) .input,:host([size=medium]) yoo-calendar,:host([size=medium]) .input{margin-top:var(--spacing-04, 0.25rem)}:host([size=small]) .options,:host([size=medium]) .options{gap:var(--spacing-08, 0.5rem)}:host([size=large]) yoo-calendar,:host([size=large]) .input{margin-top:var(--spacing-08, 0.5rem)}:host([size=large]) .options{gap:var(--spacing-16, 1rem)}";
 
 const suffixes = {
-  [index$2.FormFilterDateOperator.relativeDay]: 'YOOBICD',
-  [index$2.FormFilterDateOperator.relativeWeek]: 'YOOBICW',
-  [index$2.FormFilterDateOperator.relativeMonth]: 'YOOBICM',
-  [index$2.FormFilterDateOperator.relativeQuarter]: 'YOOBICQ',
-  [index$2.FormFilterDateOperator.relativeYear]: 'YOOBICY'
+  [index$1.FormFilterDateOperator.relativeDay]: 'YOOBICD',
+  [index$1.FormFilterDateOperator.relativeWeek]: 'YOOBICW',
+  [index$1.FormFilterDateOperator.relativeMonth]: 'YOOBICM',
+  [index$1.FormFilterDateOperator.relativeQuarter]: 'YOOBICQ',
+  [index$1.FormFilterDateOperator.relativeYear]: 'YOOBICY'
 };
 const YooFormFilterDateComponent = class {
   constructor(hostRef) {
@@ -55,33 +56,33 @@ const YooFormFilterDateComponent = class {
      */
     this.readonly = false;
     this.values = {
-      [index$2.FormFilterDateOperator.relativeDay]: undefined,
-      [index$2.FormFilterDateOperator.relativeWeek]: undefined,
-      [index$2.FormFilterDateOperator.relativeMonth]: undefined,
-      [index$2.FormFilterDateOperator.relativeQuarter]: undefined,
-      [index$2.FormFilterDateOperator.relativeYear]: undefined,
-      [index$2.FormFilterDateOperator.absoluteOn]: new Date(),
-      [index$2.FormFilterDateOperator.absoluteRange]: undefined,
-      [index$2.FormFilterDateOperator.absoluteBefore]: new Date(),
-      [index$2.FormFilterDateOperator.absoluteAfter]: new Date()
+      [index$1.FormFilterDateOperator.relativeDay]: undefined,
+      [index$1.FormFilterDateOperator.relativeWeek]: undefined,
+      [index$1.FormFilterDateOperator.relativeMonth]: undefined,
+      [index$1.FormFilterDateOperator.relativeQuarter]: undefined,
+      [index$1.FormFilterDateOperator.relativeYear]: undefined,
+      [index$1.FormFilterDateOperator.absoluteOn]: new Date(),
+      [index$1.FormFilterDateOperator.absoluteRange]: undefined,
+      [index$1.FormFilterDateOperator.absoluteBefore]: new Date(),
+      [index$1.FormFilterDateOperator.absoluteAfter]: new Date()
     };
   }
   get caption() {
     var _a, _b, _c;
     switch ((_a = this.value) === null || _a === void 0 ? void 0 : _a.operator) {
-      case index$2.FormFilterDateOperator.relativeDay:
-      case index$2.FormFilterDateOperator.relativeWeek:
-      case index$2.FormFilterDateOperator.relativeMonth:
-      case index$2.FormFilterDateOperator.relativeQuarter:
-      case index$2.FormFilterDateOperator.relativeYear:
-        return this.value.value != null ? [index$1.translate('INTHELAST'), `${this.value.value}${index$1.translate(suffixes[this.value.operator])}`].join(' ') : undefined;
-      case index$2.FormFilterDateOperator.absoluteOn:
-      case index$2.FormFilterDateOperator.absoluteBefore:
-      case index$2.FormFilterDateOperator.absoluteAfter:
-        return this.value.value != null ? [index$1.translate(this.value.operator.toUpperCase()), index$1.dateFormat(this.value.value, 'D MMM')].join(' ') : undefined;
-      case index$2.FormFilterDateOperator.absoluteRange:
+      case index$1.FormFilterDateOperator.relativeDay:
+      case index$1.FormFilterDateOperator.relativeWeek:
+      case index$1.FormFilterDateOperator.relativeMonth:
+      case index$1.FormFilterDateOperator.relativeQuarter:
+      case index$1.FormFilterDateOperator.relativeYear:
+        return this.value.value != null ? [overlays.translate('INTHELAST'), `${this.value.value}${overlays.translate(suffixes[this.value.operator])}`].join(' ') : undefined;
+      case index$1.FormFilterDateOperator.absoluteOn:
+      case index$1.FormFilterDateOperator.absoluteBefore:
+      case index$1.FormFilterDateOperator.absoluteAfter:
+        return this.value.value != null ? [overlays.translate(this.value.operator.toUpperCase()), overlays.dateFormat(this.value.value, 'D MMM')].join(' ') : undefined;
+      case index$1.FormFilterDateOperator.absoluteRange:
         return Array.isArray(this.value.value) && this.value.value.every((value) => value != null)
-          ? [index$1.dateFormat((_b = this.value.value) === null || _b === void 0 ? void 0 : _b[0], 'D MMM'), index$1.translate('YOOBICTO'), index$1.dateFormat((_c = this.value.value) === null || _c === void 0 ? void 0 : _c[1], 'D MMM')].join(' ')
+          ? [overlays.dateFormat((_b = this.value.value) === null || _b === void 0 ? void 0 : _b[0], 'D MMM'), overlays.translate('YOOBICTO'), overlays.dateFormat((_c = this.value.value) === null || _c === void 0 ? void 0 : _c[1], 'D MMM')].join(' ')
           : undefined;
       default:
         return undefined;
@@ -112,18 +113,18 @@ const YooFormFilterDateComponent = class {
     this.value = { operator, value };
   }
   render() {
-    return this.readonly ? (index.h("yoo-tag", { color: "text-color-10" }, this.caption)) : (index.h("yoo-form-filter", { caption: this.caption, color: this.color, expanded: this.expanded, icon: this.icon || 'calendar', placeholder: this.placeholder, size: this.size, onClear: () => this.clear(), onFinish: () => this.submit() }, index.h("div", { class: "options" }, index.h("h1", null, index$1.translate('RELATIVE')), Object.values(index$2.FormFilterDateOperator)
+    return this.readonly ? (index.h("yoo-tag", { color: "text-color-10" }, this.caption)) : (index.h("yoo-form-filter", { caption: this.caption, color: this.color, expanded: this.expanded, icon: this.icon || 'calendar', placeholder: this.placeholder, size: this.size, onClear: () => this.clear(), onFinish: () => this.submit() }, index.h("div", { class: "options" }, index.h("h1", null, overlays.translate('RELATIVE')), Object.values(index$1.FormFilterDateOperator)
       .filter((operator) => isRelative(operator))
       .map((operator) => {
       var _a;
       const selected = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.operator) === operator;
-      return (index.h(Option, { animated: this.animated, selected: selected, size: this.size, text: index$1.translate(operator.toUpperCase()), onToggle: () => this.toggleOption(operator) }, index.h(RelativeOption, { selected: selected, size: this.size, value: selected ? this.value.value : undefined, onChange: (value) => this.changeOptionValue(operator, value) })));
-    }), index.h("h1", null, index$1.translate('ABSOLUTE')), Object.values(index$2.FormFilterDateOperator)
+      return (index.h(Option, { animated: this.animated, selected: selected, size: this.size, text: overlays.translate(operator.toUpperCase()), onToggle: () => this.toggleOption(operator) }, index.h(RelativeOption, { selected: selected, size: this.size, value: selected ? this.value.value : undefined, onChange: (value) => this.changeOptionValue(operator, value) })));
+    }), index.h("h1", null, overlays.translate('ABSOLUTE')), Object.values(index$1.FormFilterDateOperator)
       .filter((operator) => isAbsolute(operator))
       .map((operator) => {
       var _a;
       const selected = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.operator) === operator;
-      return (index.h(Option, { animated: this.animated, selected: selected, size: this.size, text: index$1.translate(operator.toUpperCase()), onToggle: () => this.toggleOption(operator) }, isRangeAbsolute(operator) && (index.h(RangeAbsoluteOption, { selected: selected, value: selected ? this.value.value : undefined, onChange: (value) => selected && this.changeOptionValue(operator, value) })), isNonRangeAbsolute(operator) && (index.h(NonRangeAbsoluteOption, { selected: selected, value: selected ? this.value.value : undefined, onChange: (value) => selected && this.changeOptionValue(operator, value) }))));
+      return (index.h(Option, { animated: this.animated, selected: selected, size: this.size, text: overlays.translate(operator.toUpperCase()), onToggle: () => this.toggleOption(operator) }, isRangeAbsolute(operator) && (index.h(RangeAbsoluteOption, { selected: selected, value: selected ? this.value.value : undefined, onChange: (value) => selected && this.changeOptionValue(operator, value) })), isNonRangeAbsolute(operator) && (index.h(NonRangeAbsoluteOption, { selected: selected, value: selected ? this.value.value : undefined, onChange: (value) => selected && this.changeOptionValue(operator, value) }))));
     }))));
   }
 };

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

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-fc264952.js');
-const index$2 = 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 overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const Option = ({ animated, selected, size, text, onToggle }, children) => (index.h("div", { class: "option" },
@@ -67,10 +68,10 @@ const YooFormFilterNumberComponent = class {
       case index$1.FormFilterNumberOperator.equal:
       case index$1.FormFilterNumberOperator.greaterThan:
       case index$1.FormFilterNumberOperator.lessThan:
-        return this.value.value != null ? [index$2.translate(this.value.operator.toUpperCase()), this.value.value].join(' ') : undefined;
+        return this.value.value != null ? [overlays.translate(this.value.operator.toUpperCase()), this.value.value].join(' ') : undefined;
       case index$1.FormFilterNumberOperator.between:
         return Array.isArray(this.value.value) && this.value.value.every((value) => value != null)
-          ? [index$2.translate(this.value.operator.toUpperCase()), (_b = this.value.value) === null || _b === void 0 ? void 0 : _b[0], index$2.translate('YOOBICAND'), (_c = this.value.value) === null || _c === void 0 ? void 0 : _c[1]].join(' ')
+          ? [overlays.translate(this.value.operator.toUpperCase()), (_b = this.value.value) === null || _b === void 0 ? void 0 : _b[0], overlays.translate('YOOBICAND'), (_c = this.value.value) === null || _c === void 0 ? void 0 : _c[1]].join(' ')
           : undefined;
       default:
         return undefined;
@@ -104,7 +105,7 @@ const YooFormFilterNumberComponent = class {
     return this.readonly ? (index.h("yoo-tag", { color: "text-color-10" }, this.caption)) : (index.h("yoo-form-filter", { caption: this.caption, color: this.color, expanded: this.expanded, icon: this.icon, placeholder: this.placeholder, size: this.size, onClear: () => this.clear(), onFinish: () => this.submit() }, index.h("div", { class: "options" }, Object.values(index$1.FormFilterNumberOperator).map((operator) => {
       var _a, _b, _c;
       const selected = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.operator) === operator;
-      return (index.h(Option, { animated: this.animated, selected: selected, size: this.size, text: index$2.translate(operator.toUpperCase()), onToggle: () => this.toggleOption(operator) }, isRangeOperator(operator) && (index.h(RangeOption, { selected: selected, size: this.size, slider: this.showSlider ? { min: this.minValueSlider, max: this.maxValueSlider } : undefined, value: selected ? (_b = this.value) === null || _b === void 0 ? void 0 : _b.value : undefined, onChange: (value) => this.changeOptionValue(operator, value) })), isNonRangeOperator(operator) && (index.h(NonRangeOption, { selected: selected, size: this.size, value: selected ? (_c = this.value) === null || _c === void 0 ? void 0 : _c.value : undefined, onChange: (value) => this.changeOptionValue(operator, value) }))));
+      return (index.h(Option, { animated: this.animated, selected: selected, size: this.size, text: overlays.translate(operator.toUpperCase()), onToggle: () => this.toggleOption(operator) }, isRangeOperator(operator) && (index.h(RangeOption, { selected: selected, size: this.size, slider: this.showSlider ? { min: this.minValueSlider, max: this.maxValueSlider } : undefined, value: selected ? (_b = this.value) === null || _b === void 0 ? void 0 : _b.value : undefined, onChange: (value) => this.changeOptionValue(operator, value) })), isNonRangeOperator(operator) && (index.h(NonRangeOption, { selected: selected, size: this.size, value: selected ? (_c = this.value) === null || _c === void 0 ? void 0 : _c.value : undefined, onChange: (value) => this.changeOptionValue(operator, value) }))));
     }))));
   }
 };

package/dist/cjs/yoo-form-filter-text.cjs.entry.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-fc264952.js');
-const index$2 = 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 overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formFilterTextCss = ":host{--dialog-max-height:initial;--dialog-position:initial;--dialog-width:initial}:host yoo-form-input{grid-column:2/2;width:11rem}:host .option{display:grid;grid-template-rows:repeat(2, auto);grid-template-columns:auto 1fr;-ms-flex-align:center;align-items:center;-webkit-column-gap:var(--spacing-08, 0.5rem);-moz-column-gap:var(--spacing-08, 0.5rem);column-gap:var(--spacing-08, 0.5rem)}:host .options{display:grid;margin-bottom:var(--spacing-08, 0.5rem)}:host([size=small]) yoo-form-input,:host([size=medium]) yoo-form-input{margin-top:var(--spacing-04, 0.25rem)}:host([size=small]) .options,:host([size=medium]) .options{gap:var(--spacing-08, 0.5rem)}:host([size=large]) yoo-form-input{margin-top:var(--spacing-08, 0.5rem)}:host([size=large]) .options{gap:var(--spacing-16, 1rem)}";
@@ -41,7 +42,7 @@ const YooFormFilterTextComponent = class {
     };
   }
   get caption() {
-    return this.value && this.value.operator && this.value.value ? [index$2.translate(this.value.operator.toUpperCase()), this.value.value].join(' ') : undefined;
+    return this.value && this.value.operator && this.value.value ? [overlays.translate(this.value.operator.toUpperCase()), this.value.value].join(' ') : undefined;
   }
   componentWillLoad() {
     this.submittedValue = this.value;
@@ -71,7 +72,7 @@ const YooFormFilterTextComponent = class {
     return this.readonly ? (index.h("yoo-tag", { color: "text-color-10" }, this.caption)) : (index.h("yoo-form-filter", { caption: this.caption, color: this.color, expanded: this.expanded, icon: this.icon, placeholder: this.placeholder, size: this.size, onClear: () => this.clear(), onFinish: () => this.submit() }, index.h("div", { class: "options" }, Object.values(index$1.FormFilterTextOperator).map((operator) => {
       var _a;
       const selected = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.operator) === operator;
-      return (index.h(Option, { animated: this.animated, selected: selected, size: this.size, text: index$2.translate(operator.toUpperCase()), value: selected ? this.value.value : undefined, onChange: (value) => this.changeOptionValue(operator, value), onToggle: () => this.toggleOption(operator) }));
+      return (index.h(Option, { animated: this.animated, selected: selected, size: this.size, text: overlays.translate(operator.toUpperCase()), value: selected ? this.value.value : undefined, onChange: (value) => this.changeOptionValue(operator, value), onToggle: () => this.toggleOption(operator) }));
     }))));
   }
 };

package/dist/cjs/yoo-form-filter.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 formFilterCss = ":host ::slotted(*){overflow:auto}:host footer{display:-ms-flexbox;display:flex;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--app-color, #5a30f4);border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);cursor:pointer}:host header{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;color:var(--text-color, #807f83)}:host input{padding:0;color:inherit;font:inherit;background:transparent;border:none;outline:none;-webkit-box-shadow:none;box-shadow:none;cursor:inherit}:host input::-webkit-input-placeholder{color:var(--text-color, #807f83)}:host input::-moz-placeholder{color:var(--text-color, #807f83)}:host input:-ms-input-placeholder{color:var(--text-color, #807f83)}:host input::-ms-input-placeholder{color:var(--text-color, #807f83)}:host input::placeholder{color:var(--text-color, #807f83)}:host yoo-context-dialog{position:var(--dialog-position);width:var(--dialog-width);max-height:var(--dialog-max-height);margin-top:var(--spacing-08, 0.5rem)}:host .clear{color:var(--app-color, #5a30f4);cursor:pointer}:host .input{display:grid;grid-auto-flow:column;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);cursor:pointer}:host([expanded]) .input{border:var(--border-width-01, 0.0625rem) solid var(--dark, #000000)}:host([size=small]) ::slotted(*),:host([size=medium]) ::slotted(*){padding:var(--spacing-08, 0.5rem)}:host([size=small]) header,:host([size=medium]) header{padding:var(--spacing-08, 0.5rem)}:host([size=small]) .input,:host([size=medium]) .input{gap:var(--spacing-08, 0.5rem);padding:0 var(--spacing-08, 0.5rem)}:host([size=small]){font-size:var(--font-size-12, 0.75rem)}:host([size=small]) footer{-ms-flex-preferred-size:2rem;flex-basis:2rem}:host([size=small]) .input{height:1.5rem;border-radius:var(--border-radius-02, 0.125rem)}:host([size=medium]){font-size:var(--font-size-14, 0.875rem)}:host([size=medium]) footer{-ms-flex-preferred-size:2.5rem;flex-basis:2.5rem}:host([size=medium]) .input{height:2rem;border-radius:var(--border-radius-04, 0.25rem)}:host([size=large]){font-size:var(--font-size-16, 1rem)}:host([size=large]) ::slotted(*){padding:var(--spacing-16, 1rem)}:host([size=large]) header{padding:var(--spacing-16, 1rem)}:host([size=large]) .input{gap:var(--spacing-16, 1rem);padding:0 var(--spacing-16, 1rem)}:host([size=large]) footer{-ms-flex-preferred-size:3rem;flex-basis:3rem}:host([size=large]) .input{height:3rem;border-radius:var(--border-radius-08, 0.5rem)}:host([color=stable-alt]) .input{background:var(--stable-alt, #d0d0d0)}:host([color=stable-light]) .input{background:var(--stable-light, #f1f1f1)}:host([color=light]) .input{background:var(--light, #ffffff)}";
 
@@ -36,7 +37,7 @@ const YooFormFilterComponent = class {
   }
   componentDidLoad() {
     var _a;
-    (_a = index$1.findParent(this.host)) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', () => {
+    (_a = overlays.findParent(this.host)) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', () => {
       this.expanded = false;
     });
   }
@@ -57,7 +58,7 @@ const YooFormFilterComponent = class {
   }
   render() {
     const iconSize = this.size === 'large' ? 'medium' : 'small';
-    return (index.h(index.Host, null, index.h("div", { class: "input", style: { gridTemplateColumns: `${this.icon ? 'auto ' : ''}minmax(0, 1fr) auto` }, onClick: () => this.toggleContextDialog(), ref: el => { this.inputEl = el; } }, !!this.icon && index.h("yoo-icon", { name: this.icon, size: iconSize }), index.h("input", { placeholder: index$1.translateMulti(this.placeholder), readOnly: true, value: this.caption }), index.h("yoo-icon", { name: this.expanded ? 'arrow-up' : 'arrow-down', size: iconSize })), index.h("yoo-context-dialog", { ref: el => { this.contextDialog = el; }, hidden: !this.expanded }, index.h("header", null, this.caption || index$1.translateMulti(this.placeholder), !!this.caption && (index.h("div", { class: "clear", onClick: () => this.clear.emit() }, index$1.translate('CLEAR')))), index.h("slot", null), index.h("footer", { onClick: () => this.toggleContextDialog() }, index$1.translate('YOOBICDONE')))));
+    return (index.h(index.Host, null, index.h("div", { class: "input", style: { gridTemplateColumns: `${this.icon ? 'auto ' : ''}minmax(0, 1fr) auto` }, onClick: () => this.toggleContextDialog(), ref: el => { this.inputEl = el; } }, !!this.icon && index.h("yoo-icon", { name: this.icon, size: iconSize }), index.h("input", { placeholder: overlays.translateMulti(this.placeholder), readOnly: true, value: this.caption }), index.h("yoo-icon", { name: this.expanded ? 'arrow-up' : 'arrow-down', size: iconSize })), index.h("yoo-context-dialog", { ref: el => { this.contextDialog = el; }, hidden: !this.expanded }, index.h("header", null, this.caption || overlays.translateMulti(this.placeholder), !!this.caption && (index.h("div", { class: "clear", onClick: () => this.clear.emit() }, overlays.translate('CLEAR')))), index.h("slot", null), index.h("footer", { onClick: () => this.toggleContextDialog() }, overlays.translate('YOOBICDONE')))));
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/yoo-form-footer.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 index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
-const button_factory = require('./button.factory-0133597a.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const button_factory = require('./button.factory-a01664d3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
-require('./index-1ff4deca.js');
+require('./index-933cab98.js');
+require('./index-de8540eb.js');
 
 const formFooterCss = ":host{--border-radius:0;--border:none;z-index:1;width:100%}:host .outer-container{z-index:2;background-color:var(--light, #ffffff)}:host .outer-container yoo-copyright{padding:var(--spacing-08, 0.5rem)}:host .outer-container .mission-footer{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;height:var(--footer-height);background-color:var(--light, #ffffff);border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .outer-container .mission-footer yoo-button{z-index:3}:host .outer-container .mission-footer .button-container{z-index:3;padding:var(--spacing-16, 1rem) var(--spacing-08, 0.5rem)}:host .outer-container .mission-footer .button-container.single{width:100%}:host .outer-container .mission-footer .button-container:first-child{padding-left:var(--spacing-16, 1rem)}:host .outer-container .mission-footer .button-container:last-child{padding-right:var(--spacing-16, 1rem)}:host .outer-container .mission-footer .timer-container{display:-ms-flexbox;display:flex;gap:var(--spacing-16, 1rem);-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:start;width:100%;max-width:14rem;margin-left:var(--spacing-16, 1rem)}:host .outer-container .mission-footer .timer-container yoo-progress-bar{width:20%;margin:0;--progress-bar-color:var(--app-color, #5a30f4);--stroke-width-circle:6}:host(:not(.relative)){position:absolute;top:auto;right:0;bottom:0;left:0}:host(.iphone-x) .outer-container{padding-bottom:20px}:host(.no-gradient) .mission-footer{height:3.125rem}:host(.mobile){--footer-height:5.75rem;min-height:var(--footer-height)}:host(.mobile) .mission-footer{-ms-flex-pack:distribute;justify-content:space-around;width:100%}:host(.mobile) .mission-footer .button-container{width:100%;overflow:hidden}:host(.mobile) .mission-footer .button-container yoo-button{--button-width-container:100%}:host(.web){--footer-height:cssvar(spacing-56);display:block;height:var(--spacing-56, 3.5rem)}:host(.web) .mission-footer{-ms-flex-pack:end !important;justify-content:flex-end !important;height:var(--spacing-56, 3.5rem);--footer-height:cssvar(spacing-56)}:host(.web) .mission-footer .button-container{padding-top:var(--spacing-08, 0.5rem);padding-bottom:var(--spacing-08, 0.5rem)}:host(.web) .mission-footer .button-container yoo-button{min-width:6rem}:host(.no-border) .mission-footer{border-top:0}:host(.hide){display:none}:host(.full-width) .mission-footer .button-container{width:100%}:host(.web.fixed) .mission-footer{position:fixed !important}:host(.sticky.web){position:-webkit-sticky;position:sticky;bottom:0}:host(.course.web.fixed) .mission-footer{width:calc(100% - 17.5rem)}:host(.web.rating){position:absolute;top:auto;right:0;bottom:0;left:0}:host(.expanded-grid-view) .mission-footer .button-container yoo-button{width:4.125rem}@media (orientation: landscape){:host(.landscape.tablet:not(.emulate-preview)) .mission-footer{-ms-flex-pack:center;justify-content:center}:host(.landscape.tablet:not(.emulate-preview)) .mission-footer .button-container{width:25%}}:host(.lesson) .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.lesson.web) .mission-footer{width:100%}:host(.slot){--footer-height:auto}:host(.slot) .outer-container{padding:0 var(--spacing-16, 1rem)}:host(.slot) .button-container{width:100%}:host(.slot) .mission-footer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.slot) .mission-footer .header{width:100%;padding:var(--spacing-08, 0.5rem) 0}:host(.lesson-detail) .mission-footer .timer-container{-ms-flex-pack:end !important;justify-content:flex-end !important;padding-right:var(--spacing-16, 1rem)}";
 
@@ -25,14 +26,14 @@ const YooFormFooterComponent = class {
   async getOuterContainer() {
     return this.outerContainer;
   }
-  renderButton(button, index$2) {
+  renderButton(button, index$1) {
     return (index.h("div", { class: {
         'button-container': true,
-        first: index$2 === 0 && this.countDownValue === null
-      } }, button_factory.getButton({ size: index$1.isWeb(this.host) ? 'medium' : 'large', ...button })));
+        first: index$1 === 0 && this.countDownValue === null
+      } }, button_factory.getButton({ size: overlays.isWeb(this.host) ? 'medium' : 'large', ...button })));
   }
   renderTimer() {
-    const countDownDisplay = index$1.getTimeOneLetterFormat(this.countDownValue);
+    const countDownDisplay = overlays.getTimeOneLetterFormat(this.countDownValue);
     const countDownProgress = lodash.isNumber(this.countDownValue) && lodash.isNumber(this.countDownStartValue) ? (this.countDownValue / this.countDownStartValue) * 100 : 0;
     const onCountingDown = (ev) => {
       if (ev && ev.target && ev.detail && ev.detail === 100) {
@@ -53,7 +54,7 @@ const YooFormFooterComponent = class {
     if (this.slotHeader) {
       hostClasses.slot = true;
     }
-    return (index.h(index.Host, { class: hostClasses }, index.h("div", { class: "outer-container", ref: (el) => (this.outerContainer = el) }, this.showCopyright && index.h("yoo-copyright", null), hasControls && (index.h("div", { class: "mission-footer" }, lodash.isNumber(this.countDownValue) && this.renderTimer(), index$1.isWeb(this.host) && index.h("div", { class: "flex" }), this.slotHeader && index.h("div", { class: "header" }, index.h("slot", { name: "header" })), this.buttons && this.buttons.map((button, index) => this.renderButton(button, index)))))));
+    return (index.h(index.Host, { class: hostClasses }, index.h("div", { class: "outer-container", ref: (el) => (this.outerContainer = el) }, this.showCopyright && index.h("yoo-copyright", null), hasControls && (index.h("div", { class: "mission-footer" }, lodash.isNumber(this.countDownValue) && this.renderTimer(), overlays.isWeb(this.host) && index.h("div", { class: "flex" }), this.slotHeader && index.h("div", { class: "header" }, index.h("slot", { name: "header" })), this.buttons && this.buttons.map((button, index) => this.renderButton(button, index)))))));
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/yoo-form-formula.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 formFormulaCss = ":host .readonly{padding:0.5rem 0.5rem 0 0}";