@yoobic/yobi 8.2.4 → 8.3.0-10

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-6482c595.js');
+require('./index-6886c6f7.js');
+const commonHelpers = require('./common-helpers-81853232.js');
+const draggableTagsHelpers = require('./draggable-tags-helpers-3f1eb81d.js');
+const formInputHelpers = require('./form-input-helpers-1f47449f.js');
+const overlays = require('./overlays-94c28a17.js');
 require('./lodash-597bda6d.js');
+require('./index-920990f8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.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-6482c595.js');
+require('./index-6886c6f7.js');
+const overlays = require('./overlays-94c28a17.js');
 require('./lodash-597bda6d.js');
+require('./index-920990f8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.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-6482c595.js');
+require('./index-6886c6f7.js');
+const overlays = require('./overlays-94c28a17.js');
 require('./lodash-597bda6d.js');
+require('./index-920990f8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.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-6482c595.js');
+const index$1 = require('./index-6886c6f7.js');
+const commonHelpers = require('./common-helpers-81853232.js');
+const overlays = require('./overlays-94c28a17.js');
 require('./lodash-597bda6d.js');
+require('./index-920990f8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.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-6482c595.js');
+const index$2 = require('./index-6886c6f7.js');
+const overlays = require('./overlays-94c28a17.js');
+const index$1 = require('./index-920990f8.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;

package/dist/cjs/yoo-form-reorder.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 commonHelpers = require('./common-helpers-6970c46c.js');
-const formInputHelpers = require('./form-input-helpers-a04f76d2.js');
+const index = require('./index-6482c595.js');
+require('./index-6886c6f7.js');
+const commonHelpers = require('./common-helpers-81853232.js');
+const formInputHelpers = require('./form-input-helpers-1f47449f.js');
+const overlays = require('./overlays-94c28a17.js');
 require('./lodash-597bda6d.js');
+require('./index-920990f8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
 
 const formReorderCss = ":host .outer-container{width:100%;direction:ltr}:host .list-item{position:absolute;top:0;left:0;width:100%;min-height:45px}:host .list-item .item-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .list-item .item-content .grip{position:absolute;right:var(--spacing-16, 1rem)}:host .list-item .remove{position:absolute;top:0;right:0;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:80px;height:calc(100% - 2px);color:var(--light, #ffffff);text-align:center;background-color:var(--danger, #d44333);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .list-item.header .item-content .badge,:host .list-item.header .item-content .action-icon,:host .list-item.header .item-content .grip{display:none}:host .list-item.header .item-content .value{padding-top:1em;padding-left:0;font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem)}:host .list-item.active .action-icon.active{display:none}:host .list-item.available .grip{display:none}:host .list-item.available .action-icon.available{display:none}:host .item-content{position:relative;z-index:2;height:100%;padding:0 0 0 1rem;background-color:var(--light, #ffffff);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);-webkit-transition:-webkit-transform 300ms;transition:-webkit-transform 300ms;transition:transform 300ms;transition:transform 300ms, -webkit-transform 300ms}:host .item-content.removing{-webkit-transform:translateX(-80px) !important;transform:translateX(-80px) !important}:host .item-content.removing .value{-webkit-transform:translateX(2rem);transform:translateX(2rem);-webkit-transition:-webkit-transform 300ms;transition:-webkit-transform 300ms;transition:transform 300ms;transition:transform 300ms, -webkit-transform 300ms}:host .item-content span{display:inline-block;max-width:calc(100vw - 120px);margin:0.6rem 0;font-size:var(--font-size-18, 1.125rem);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .item-content .badge{display:none}:host .item-content .value,:host .item-content .item-icon{padding-left:0.4rem}:host .item-content .action-icon{padding-right:3px;padding-left:3px}:host .item-content .badge.active{display:block;float:left;width:1.25rem;height:1.25rem;margin-top:0.75rem;margin-right:var(--spacing-08, 0.5rem);color:var(--light, #ffffff);font-size:var(--font-size-12, 0.75rem);line-height:1.25rem;text-align:center;background:var(--app-color, #5a30f4);border-radius:50%}:host(.lesson) .item-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.lesson) .item-content .grip{margin-left:auto}:host(.lesson) .item-content .badge.active{min-width:1.25rem;background:var(--app-color, #5a30f4)}";
 
@@ -54,13 +55,13 @@ const YooFormReorderComponent = class {
   resetKeys() {
     var _a, _b, _c, _d, _e;
     const activeKeys = [
-      index$1.getUUID(),
-      ...(((_b = (_a = this.definition) === null || _a === void 0 ? void 0 : _a.active) === null || _b === void 0 ? void 0 : _b.values) || []).map(() => index$1.getUUID())
+      overlays.getUUID(),
+      ...(((_b = (_a = this.definition) === null || _a === void 0 ? void 0 : _a.active) === null || _b === void 0 ? void 0 : _b.values) || []).map(() => overlays.getUUID())
     ];
     let availableKeys = [];
     if ((_c = this.definition) === null || _c === void 0 ? void 0 : _c.available) {
-      availableKeys.push(index$1.getUUID());
-      availableKeys = availableKeys.concat((((_e = (_d = this.definition) === null || _d === void 0 ? void 0 : _d.available) === null || _e === void 0 ? void 0 : _e.values) || []).map(() => index$1.getUUID()));
+      availableKeys.push(overlays.getUUID());
+      availableKeys = availableKeys.concat((((_e = (_d = this.definition) === null || _d === void 0 ? void 0 : _d.available) === null || _e === void 0 ? void 0 : _e.values) || []).map(() => overlays.getUUID()));
     }
     this.keys = this.reverseValueDimensions ? availableKeys.concat(activeKeys) : activeKeys.concat(availableKeys);
   }
@@ -156,7 +157,7 @@ const YooFormReorderComponent = class {
    * and can be moved into separate class and reused somewhere else.
    */
   sortable(value, element, index) {
-    if (!index$1.Draggable) {
+    if (!overlays.Draggable) {
       return;
     }
     const totalItems = this.listItems.length;
@@ -169,7 +170,7 @@ const YooFormReorderComponent = class {
       index,
       setIndex: null
     };
-    return index$1.gsapTimeline().then((timeline) => {
+    return overlays.gsapTimeline().then((timeline) => {
       const animation = timeline({
         boxShadow: 'rgba(40, 47, 54, 0.07) 0px 8px 16px 0px',
         force3D: true,
@@ -183,7 +184,7 @@ const YooFormReorderComponent = class {
         scope.update();
       };
       const moveAnimation = () => {
-        index$1.gsapTo(element, 0.3, { y: this.getListItemPosition(sortable.index) });
+        overlays.gsapTo(element, 0.3, { y: this.getListItemPosition(sortable.index) });
       };
       const releaseAction = () => {
         if (needReturn) {
@@ -192,7 +193,7 @@ const YooFormReorderComponent = class {
         animation.reverse();
         moveAnimation();
         this.checkItemClasses();
-        if (value.isHeader || !index$1.isWeb(this.host)) {
+        if (value.isHeader || !overlays.isWeb(this.host)) {
           sortable.dragger.disable();
         }
         this.changeOutput();
@@ -205,7 +206,7 @@ const YooFormReorderComponent = class {
           needReturn = !changed; // if index has not been changed, then need move to original position after item drop
         }
       };
-      const dragger = new index$1.Draggable(element, {
+      const dragger = new overlays.Draggable(element, {
         onDragStart() {
           dragStartAction(this);
         },
@@ -218,7 +219,7 @@ const YooFormReorderComponent = class {
         type: 'y',
         autoScroll: 1
       });
-      if (this.readonly || !this.allowDragAndDrop || value.isHeader || !index$1.isWeb(this.host)) {
+      if (this.readonly || !this.allowDragAndDrop || value.isHeader || !overlays.isWeb(this.host)) {
         dragger.disable(); // defaultly disabled, it is enabled by click/touch grip area (right part)
       }
       sortable.dragger = dragger;
@@ -234,14 +235,14 @@ const YooFormReorderComponent = class {
     });
   }
   setRowPosition(element, index) {
-    index$1.gsapSet(element, { y: this.getListItemPosition(index) });
+    overlays.gsapSet(element, { y: this.getListItemPosition(index) });
   }
   changeGroup(sortableItem, toGroup) {
     if (!toGroup) {
       toGroup = sortableItem.value.group === 'active' ? 'available' : 'active';
     }
     sortableItem.value.group = toGroup;
-    if (!index$1.isWeb(this.host)) {
+    if (!overlays.isWeb(this.host)) {
       if (!sortableItem.value.isHeader && toGroup === 'active') {
         sortableItem.dragger.enable();
       }
@@ -343,18 +344,18 @@ const YooFormReorderComponent = class {
     // clamps a value to a min/max
     return value < a ? a : value > b ? b : value;
   }
-  renderItem(value, index$2) {
-    const key = this.keys[index$2];
+  renderItem(value, index$1) {
+    const key = this.keys[index$1];
     const classList = {
       'list-item': true,
       header: value.isHeader,
       'always-active': value.locked
     };
     classList[value.group] = true;
-    return (index.h("div", { class: classList, key: key }, index.h("div", { class: "item-content" }, !value.isHeader && !value.locked && !this.readonly && index.h("yoo-icon", { class: "action-icon active", size: "small", name: "circle-plus", color: "app-color", onClick: () => this.moveToActive(value) }), !value.isHeader && !value.locked && !this.readonly && index.h("yoo-icon", { class: "action-icon available", size: "small", name: "circle-minor", color: "danger", onClick: () => this.openRemoving(value) }), !value.isHeader && (value.locked || this.readonly) && index.h("yoo-icon", { class: "lock-icon", color: "stable", name: "lock" }), !value.isHeader && value.icon && index.h("yoo-icon", { class: "item-icon", size: "small", name: value.icon }), index.h("span", { class: "value", "data-value": JSON.stringify(value) }, index$1.translate(value.title || value.name)), !value.isHeader && !this.readonly && this.allowDragAndDrop && (index.h("span", { class: "grip", onClick: () => this.unlockItem(value), onTouchStart: () => this.unlockItem(value) }, index.h("yoo-icon", { name: "ranking-toggle", color: "stable" })))), !value.isHeader && (index.h("div", { class: "remove", onClick: () => this.onRemove(value) }, index$1.translate('REMOVE')))));
+    return (index.h("div", { class: classList, key: key }, index.h("div", { class: "item-content" }, !value.isHeader && !value.locked && !this.readonly && index.h("yoo-icon", { class: "action-icon active", size: "small", name: "circle-plus", color: "app-color", onClick: () => this.moveToActive(value) }), !value.isHeader && !value.locked && !this.readonly && index.h("yoo-icon", { class: "action-icon available", size: "small", name: "circle-minor", color: "danger", onClick: () => this.openRemoving(value) }), !value.isHeader && (value.locked || this.readonly) && index.h("yoo-icon", { class: "lock-icon", color: "stable", name: "lock" }), !value.isHeader && value.icon && index.h("yoo-icon", { class: "item-icon", size: "small", name: value.icon }), index.h("span", { class: "value", "data-value": JSON.stringify(value) }, overlays.translate(value.title || value.name)), !value.isHeader && !this.readonly && this.allowDragAndDrop && (index.h("span", { class: "grip", onClick: () => this.unlockItem(value), onTouchStart: () => this.unlockItem(value) }, index.h("yoo-icon", { name: "ranking-toggle", color: "stable" })))), !value.isHeader && (index.h("div", { class: "remove", onClick: () => this.onRemove(value) }, overlays.translate('REMOVE')))));
   }
   unlockItem(value) {
-    if (!value.isHeader && !index$1.isWeb(this.host)) {
+    if (!value.isHeader && !overlays.isWeb(this.host)) {
       this.sortables.find((s) => s.value.name === value.name).dragger.enable();
     }
   }