@yoobic/yobi 8.6.61 → 8.6.62

package/dist/cjs/yoo-form-creator-block-expandable.cjs.entry.js

@@ -7,7 +7,7 @@ const index$1 = require('./index-c09665da.js');
 const index$2 = require('./index-4fba7ee9.js');
 const lodash = require('./lodash-1f7fff24.js');
 const index$4 = require('./index-10520a3e.js');
-const index$3 = require('./index-e236c2e8.js');
+const index$3 = require('./index-91bacf6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./annotations-helpers-6e83c6de.js');
 

package/dist/cjs/yoo-form-creator-condition-block.cjs.entry.js

@@ -7,7 +7,7 @@ const index$1 = require('./index-c09665da.js');
 const index$3 = require('./index-4fba7ee9.js');
 const lodash = require('./lodash-1f7fff24.js');
 const index$4 = require('./index-7d3c7ee7.js');
-const index$2 = require('./index-e236c2e8.js');
+const index$2 = require('./index-91bacf6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./annotations-helpers-6e83c6de.js');
 

package/dist/cjs/yoo-form-creator-page-card-list.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-91f073fd.js');
 const index$2 = require('./index-4fba7ee9.js');
 const lodash = require('./lodash-1f7fff24.js');
 const sortable_esm = require('./sortable.esm-00e15691.js');
-const index$1 = require('./index-e236c2e8.js');
+const index$1 = require('./index-91bacf6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-c09665da.js');
 require('./annotations-helpers-6e83c6de.js');

package/dist/cjs/yoo-form-creator-page-card.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-91f073fd.js');
 const index$2 = require('./index-4fba7ee9.js');
-const index$1 = require('./index-e236c2e8.js');
+const index$1 = require('./index-91bacf6d.js');
 require('./lodash-1f7fff24.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-c09665da.js');

package/dist/cjs/yoo-form-creator-score-expandable.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-91f073fd.js');
 const index$1 = require('./index-c09665da.js');
 const index$2 = require('./index-4fba7ee9.js');
 const lodash = require('./lodash-1f7fff24.js');
-const index$3 = require('./index-e236c2e8.js');
+const index$3 = require('./index-91bacf6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./annotations-helpers-6e83c6de.js');
 

package/dist/cjs/yoo-form-creator-translate-dialog.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-91f073fd.js');
 const index$3 = require('./index-c09665da.js');
 const index$1 = require('./index-4fba7ee9.js');
 const lodash = require('./lodash-1f7fff24.js');
-const index$2 = require('./index-e236c2e8.js');
+const index$2 = require('./index-91bacf6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./annotations-helpers-6e83c6de.js');
 

package/dist/cjs/yoo-form-creator-translate.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-91f073fd.js');
 const index$3 = require('./index-c09665da.js');
 const index$1 = require('./index-4fba7ee9.js');
 const lodash = require('./lodash-1f7fff24.js');
-const index$2 = require('./index-e236c2e8.js');
+const index$2 = require('./index-91bacf6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./annotations-helpers-6e83c6de.js');
 
@@ -609,8 +609,8 @@ const YooFormCreatorTranslateComponent = class {
     return index.h("div", { class: "grid-container" }, index.h("yoo-grid", { class: "full-width", ref: (el) => (this.grid = el), gridConfig: this.gridConfig, displayType: "card-grid", items: displayItems, isLocal: true, emptyState: "translations", onSelected: (ev) => this.onItemSelected(ev), onCellClicked: (ev) => this.onCellClicked(ev), secondaryActions: this.secondaryActions }));
   }
   render() {
-    var _a, _b, _c, _d, _e, _f;
-    return (index.h(index.Host, null, index.h("div", { class: "header" }, index.h("yoo-form-input-container", { class: { 'base-language': true, readonly: this.hasTranslations }, field: { title: index$1.translate('BASELANGUAGE') }, hideOptional: true }, index.h("yoo-form-autocomplete", { values: index$1.getTranslateLanguageKeys(this.allLanguages), value: this.baseLanguage, idOnly: true, useTranslate: true, displayType: "card-list", forceHideSearch: true, color: "transparent", onInputChanged: (ev) => this.onBaseLanguageChanged(ev), size: "medium", disabled: this.hasTranslations || this.isTranslator })), index.h("yoo-form-input-container", { class: { 'translate-to': true }, field: { title: this.hasTranslations ? index$1.translate('TRANSLATEDIN') : index$1.translate('TRANSLATETO'), type: index$3.FormFieldType.autocomplete }, hideOptional: true }, index.h("yoo-form-autocomplete", { extraClass: this.hasTranslations ? 'only-allow-secondary-actions' : null, ref: (el) => (this.translateToAutocomplete = el), values: index$1.getTranslateLanguageKeys(this.hasTranslations ? this.selectedLanguages : this.getAvailableLanguages()), value: index$1.getTranslateLanguageKeys(this.selectedLanguages), multiple: true, iconPrefix: "feed", useTranslate: true, entityType: "language", displayType: "card-list", idOnly: true, forceHideSearch: true, placeholder: index$1.translate('SELECTLANGUAGES'), onInputChanged: (ev) => this.onSelectedLanguagesChanged(ev.detail), readonly: this.isTranslator, size: "medium", secondaryActions: [
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return (index.h(index.Host, null, index.h("div", { class: "header" }, index.h("yoo-form-input-container", { class: { 'base-language': true, readonly: this.hasTranslations }, field: { title: index$1.translate('BASELANGUAGE') }, hideOptional: true }, index.h("yoo-form-autocomplete", { values: index$1.getTranslateLanguageKeys(this.allLanguages), value: this.baseLanguage, idOnly: true, useTranslate: true, displayType: "card-list", forceHideSearch: true, color: "transparent", onInputChanged: (ev) => this.onBaseLanguageChanged(ev), size: "medium", disabled: this.hasTranslations || this.isTranslator || ((_a = this.disableTranslateButton) === null || _a === void 0 ? void 0 : _a.length) > 0 })), index.h("yoo-form-input-container", { class: { 'translate-to': true }, field: { title: this.hasTranslations ? index$1.translate('TRANSLATEDIN') : index$1.translate('TRANSLATETO'), type: index$3.FormFieldType.autocomplete }, hideOptional: true }, index.h("yoo-form-autocomplete", { extraClass: this.hasTranslations ? 'only-allow-secondary-actions' : null, ref: (el) => (this.translateToAutocomplete = el), values: index$1.getTranslateLanguageKeys(this.hasTranslations ? this.selectedLanguages : this.getAvailableLanguages()), value: index$1.getTranslateLanguageKeys(this.selectedLanguages), multiple: true, iconPrefix: "feed", useTranslate: true, entityType: "language", displayType: "card-list", idOnly: true, forceHideSearch: true, placeholder: index$1.translate('SELECTLANGUAGES'), onInputChanged: (ev) => this.onSelectedLanguagesChanged(ev.detail), readonly: this.isTranslator, size: "medium", secondaryActions: [
         {
           text: (_item) => index$1.translate('DELETE'),
           color: () => 'danger',
@@ -619,8 +619,8 @@ const YooFormCreatorTranslateComponent = class {
           handler: (language) => this.removeLanguage(language._id),
           isVisible: () => this.hasTranslations
         }
-      ], disabled: this.areTranslationsLocked })), this.hasTranslations && !this.areTranslationsLocked && (index.h("yoo-tooltip", { hoverable: true, placement: "bottom", content: index$1.translate(this.disableNewLanguageButton ? this.disableNewLanguageButton : 'ADDNEWLANGUAGE'), class: "no-pointer" }, index.h("yoo-button", { disabled: ((_a = this.disableNewLanguageButton) === null || _a === void 0 ? void 0 : _a.length) > 0, size: "medium", shape: "square", onClick: () => this.onAddNewLanguageClicked() }, index.h("yoo-icon", { slot: "start", size: "small", name: "plus" })))), !this.hasTranslations && !this.isTranslator && !this.areTranslationsLocked && (this.disableTranslateButton ? index.h("yoo-tooltip", { hoverable: true, placement: "bottom", content: index$1.translate(this.disableTranslateButton), class: "no-pointer" }, index.h("yoo-button", { size: "medium", shape: "rectangular", disabled: !this.selectedLanguages || this.selectedLanguages.length < 1 || ((_b = this.selectedLanguages) === null || _b === void 0 ? void 0 : _b.includes(this.baseLanguage)) || ((_c = this.disableTranslateButton) === null || _c === void 0 ? void 0 : _c.length) > 0, onClick: () => this.onTranslateAll() }, index.h("yoo-icon", { name: "translate", slot: "start", size: "small" }), index$1.translate('TRANSLATE'))) :
-      index.h("yoo-button", { size: "medium", shape: "rectangular", disabled: !this.selectedLanguages || this.selectedLanguages.length < 1 || ((_d = this.selectedLanguages) === null || _d === void 0 ? void 0 : _d.includes(this.baseLanguage)) || ((_e = this.disableTranslateButton) === null || _e === void 0 ? void 0 : _e.length) > 0, onClick: () => this.onTranslateAll() }, index.h("yoo-icon", { name: "translate", slot: "start", size: "small" }), index$1.translate('TRANSLATE'))), index.h("span", { class: "placeholder" }), this.showBilingualView && this.hasTranslations && (index.h("yoo-button", { color: "app-color", size: "medium", shape: "rectangular", onClick: () => this.bilingualViewClicked.emit({ name: null, initialSelectedLanguage: null }) }, index.h("yoo-icon", { name: "eye", slot: "start", color: "light", size: "small" }), index$1.translate('BILINGUAL'))), this.hasTranslations && !this.isTranslator && !this.areTranslationsLocked && (index.h("yoo-tooltip", { hoverable: true, placement: "bottom", content: index$1.translate('TRANSLATENEWFIELDSTOOLTIP'), class: "no-pointer" }, index.h("yoo-button", { size: "medium", shape: "rectangular", onClick: () => this.onTranslateNewFields() }, index.h("yoo-icon", { name: "translate", slot: "start", size: "small" }), index$1.translate('TRANSLATENEWFIELDS')))), !this.isTranslator && index.h("yoo-context-menu", { contentButtons: this.exportActions }, index.h("yoo-button", { color: "light", shape: "square" }, index.h("yoo-icon", { size: "small", name: "more" })))), ((_f = this.missionDescription) === null || _f === void 0 ? void 0 : _f.lockTranslations) && this.renderTranslationLock(), this.renderTranslationGrid()));
+      ], disabled: this.areTranslationsLocked || ((_b = this.disableTranslateButton) === null || _b === void 0 ? void 0 : _b.length) > 0 })), this.hasTranslations && !this.areTranslationsLocked && (index.h("yoo-tooltip", { hoverable: true, placement: "bottom", content: index$1.translate(this.disableNewLanguageButton ? this.disableNewLanguageButton : 'ADDNEWLANGUAGE'), class: "no-pointer" }, index.h("yoo-button", { disabled: ((_c = this.disableNewLanguageButton) === null || _c === void 0 ? void 0 : _c.length) > 0, size: "medium", shape: "square", onClick: () => this.onAddNewLanguageClicked() }, index.h("yoo-icon", { slot: "start", size: "small", name: "plus" })))), !this.hasTranslations && !this.isTranslator && !this.areTranslationsLocked && (this.disableTranslateButton ? index.h("yoo-tooltip", { hoverable: true, placement: "bottom", content: index$1.translate(this.disableTranslateButton), class: "no-pointer" }, index.h("yoo-button", { size: "medium", shape: "rectangular", disabled: !this.selectedLanguages || this.selectedLanguages.length < 1 || ((_d = this.selectedLanguages) === null || _d === void 0 ? void 0 : _d.includes(this.baseLanguage)) || ((_e = this.disableTranslateButton) === null || _e === void 0 ? void 0 : _e.length) > 0, onClick: () => this.onTranslateAll() }, index.h("yoo-icon", { name: "translate", slot: "start", size: "small" }), index$1.translate('TRANSLATE'))) :
+      index.h("yoo-button", { size: "medium", shape: "rectangular", disabled: !this.selectedLanguages || this.selectedLanguages.length < 1 || ((_f = this.selectedLanguages) === null || _f === void 0 ? void 0 : _f.includes(this.baseLanguage)) || ((_g = this.disableTranslateButton) === null || _g === void 0 ? void 0 : _g.length) > 0, onClick: () => this.onTranslateAll() }, index.h("yoo-icon", { name: "translate", slot: "start", size: "small" }), index$1.translate('TRANSLATE'))), index.h("span", { class: "placeholder" }), this.showBilingualView && this.hasTranslations && (index.h("yoo-button", { color: "app-color", size: "medium", shape: "rectangular", onClick: () => this.bilingualViewClicked.emit({ name: null, initialSelectedLanguage: null }) }, index.h("yoo-icon", { name: "eye", slot: "start", color: "light", size: "small" }), index$1.translate('BILINGUAL'))), this.hasTranslations && !this.isTranslator && !this.areTranslationsLocked && (index.h("yoo-tooltip", { hoverable: true, placement: "bottom", content: index$1.translate('TRANSLATENEWFIELDSTOOLTIP'), class: "no-pointer" }, index.h("yoo-button", { size: "medium", shape: "rectangular", onClick: () => this.onTranslateNewFields() }, index.h("yoo-icon", { name: "translate", slot: "start", size: "small" }), index$1.translate('TRANSLATENEWFIELDS')))), !this.isTranslator && index.h("yoo-context-menu", { contentButtons: this.exportActions }, index.h("yoo-button", { color: "light", shape: "square" }, index.h("yoo-icon", { size: "small", name: "more" })))), ((_h = this.missionDescription) === null || _h === void 0 ? void 0 : _h.lockTranslations) && this.renderTranslationLock(), this.renderTranslationGrid()));
   }
   static get watchers() { return {
     "missionDescription": ["updateMisionDescription"],

package/dist/cjs/yoo-form-creator-workflow-side-selection.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-91f073fd.js');
 const index$2 = require('./index-4fba7ee9.js');
 const commonHelpers = require('./common-helpers-9cd02bab.js');
-const index$1 = require('./index-e236c2e8.js');
+const index$1 = require('./index-91bacf6d.js');
 require('./lodash-1f7fff24.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-c09665da.js');

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

@@ -10,7 +10,7 @@ const commonHelpers = require('./common-helpers-9cd02bab.js');
 const lodash = require('./lodash-1f7fff24.js');
 const sortable_esm = require('./sortable.esm-00e15691.js');
 const index$5 = require('./index-10520a3e.js');
-const index$1 = require('./index-e236c2e8.js');
+const index$1 = require('./index-91bacf6d.js');
 const formField_instance = require('./form-field.instance-410c2aea.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./workflow.interface-ffda8358.js');

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

@@ -29,7 +29,7 @@ const isNonRangeAbsolute = (operator) => [index$2.FormFilterDateOperator.absolut
 const isAbsolute = (operator) => isRangeAbsolute(operator) || isNonRangeAbsolute(operator);
 const isRelative = (operator) => !isAbsolute(operator);
 
-const formFilterDateCss = "svg:not(:root){overflow:hidden}: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 formFilterDateCss = "svg:not(:root){overflow:hidden}: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{--input-line-height:1;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',
@@ -42,6 +42,7 @@ const YooFormFilterDateComponent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.inputChanged = index.createEvent(this, "inputChanged", 7);
+    this.dateFilterExpanded = index.createEvent(this, "dateFilterExpanded", 7);
     this.values = {
       [index$2.FormFilterDateOperator.relativeDay]: undefined,
       [index$2.FormFilterDateOperator.relativeWeek]: undefined,
@@ -108,7 +109,7 @@ 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(), onDialogExpanded: (event) => this.dateFilterExpanded.emit(event.detail) }, index.h("div", { class: "options" }, index.h("h1", null, index$1.translate('RELATIVE')), Object.values(index$2.FormFilterDateOperator)
       .filter((operator) => isRelative(operator))
       .map((operator) => {
       var _a;

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

@@ -15,12 +15,16 @@ const YooFormFilterComponent = class {
     index.registerInstance(this, hostRef);
     this.clear = index.createEvent(this, "clear", 7);
     this.finish = index.createEvent(this, "finish", 7);
+    this.dialogExpanded = index.createEvent(this, "dialogExpanded", 7);
     this.caption = undefined;
-    this.expanded = false;
     this.placeholder = undefined;
     this.icon = undefined;
     this.color = undefined;
     this.size = undefined;
+    this.expanded = false;
+  }
+  onExpandedChanged() {
+    this.dialogExpanded.emit(this.expanded);
   }
   get isInline() {
     var _a, _b;
@@ -65,6 +69,9 @@ const YooFormFilterComponent = class {
     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')))));
   }
   get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "expanded": ["onExpandedChanged"]
+  }; }
 };
 YooFormFilterComponent.style = formFilterCss;
 

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

@@ -15,7 +15,7 @@ require('./missions-helpers-bbde7037.js');
 require('./form-helpers-6364266d.js');
 require('./geolocation-helpers-314a8e83.js');
 
-const formInputCss = "svg:not(:root){overflow:hidden}:host{--display-invalid-message:block;--input-background-color:var(--light, #ffffff);--input-border-color:var(--dark, #000000);--input-text-color:var(--text-color, #807f83);--input-font-size:var(--font-size-16, 1rem);--input-flex:1;--caret-color:var(--app-color, #5a30f4);--input-text-weight:normal;--input-empty-width:100%;--input-width:100%;--invalid-message-padding:cssvar(spacing-04) 0 0 0;--invalid-message-position:static;--invalid-message-inset:unset;display:block;width:100%;color:var(--dark, #000000);display:inline-block;-webkit-box-sizing:content-box;box-sizing:content-box;min-width:0;margin:0;padding:0;font-family:var(--font-family, \"Lato\");line-height:1;white-space:normal;vertical-align:middle;background:none;border:0}:host:focus{outline:0}:host[type=reset],:host[type=button],:host[type=submit],:host[type=checkbox],:host[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box}:host[type=search]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}:host .float-left{float:left;margin-top:var(--spacing-04, 0.25rem);margin-right:var(--spacing-08, 0.5rem);cursor:pointer}:host .float-left:hover{fill:var(--app-color, #5a30f4)}:host .truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}:host .truncate:hover{color:var(--app-color, #5a30f4)}:host .input-container{display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;background:var(--input-background-color);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-08, 0.5rem)}:host .input-container.noborder{border:none !important}:host .input-container.valid{border:var(--border-width-01, 0.0625rem) solid var(--success, #3aa76d)}:host .input-container.invalid{border:var(--border-width-01, 0.0625rem) solid var(--danger, #d44333)}:host .input-container.focused{border:var(--border-width-01, 0.0625rem) solid var(--input-border-color)}:host .input-container.focused .valid-icon{display:none}:host .input-container .icon-prefix,:host .input-container .icon-suffix{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:var(--spacing-08, 0.5rem);color:inherit}:host .input-container .icon-prefix{color:inherit}:host .input-container .icon-prefix yoo-icon:not([color]){fill:var(--dark, #000000)}:host .input-container .inline-left{display:inline-block;margin-left:var(--spacing-04, 0.25rem)}:host .input-container .valid-icon,:host .input-container .icon-suffix-focus{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:var(--spacing-08, 0.5rem);color:inherit;display:none;padding-right:var(--spacing-08, 0.5rem)}:host .input-container .valid-icon{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .input-container .valid-icon.valid{color:var(--success, #3aa76d)}:host .input-container .valid-icon.invalid{color:var(--danger, #d44333)}:host .input-container .icon-close{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:var(--spacing-08, 0.5rem);color:inherit}:host .input-container .icon-suffix-focus{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .input-container .warning-icon{width:0.375rem;height:0.375rem;margin-top:1.0625rem;margin-right:1.25rem;background-color:var(--warning, #ed6e33);border:none;border-radius:50%}:host .input-container .character-counter{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0 var(--spacing-08, 0.5rem) 0 var(--spacing-04, 0.25rem);color:var(--text-color, #807f83)}:host .input-container input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;display:block;-ms-flex:var(--input-flex);flex:var(--input-flex);width:100%;min-width:0;padding:var(--spacing-08, 0.5rem);color:inherit;font-weight:var(--font-weight-400, 400);font-size:var(--input-font-size);font-family:var(--font-family, \"Lato\");line-height:1.5;text-align:left;background:transparent;border:none;border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:transparent 0 0 0 62.5rem inset;box-shadow:transparent 0 0 0 62.5rem inset;-webkit-appearance:none;caret-color:var(--caret-color)}:host .input-container input::-webkit-input-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}:host .input-container input:-moz-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}:host .input-container input::-moz-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}:host .input-container input:-ms-input-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}:host .input-container input:focus{outline:none}:host .input-container input.hide-value{color:transparent}:host .input-container input.has-icon-prefix{padding-left:0}:host .placeholderlabel{margin-top:var(--spacing-08, 0.5rem)}:host .placeholderlabel.active{margin-top:0}:host .label{margin-bottom:var(--spacing-04, 0.25rem);padding-left:var(--spacing-08, 0.5rem);color:var(--input-text-color);font-size:var(--font-size-16, 1rem);line-height:1.5;letter-spacing:var(--spacing-02, 0.125rem);text-align:left;-webkit-transform:translateY(1.875rem);transform:translateY(1.875rem);-webkit-transition:-webkit-transform 0.2s ease-in;transition:-webkit-transform 0.2s ease-in;transition:transform 0.2s ease-in;transition:transform 0.2s ease-in, -webkit-transform 0.2s ease-in}:host .label.active{margin-top:var(--spacing-04, 0.25rem);-webkit-transform:translateY(0rem);transform:translateY(0rem)}:host .label .label-required{margin-left:var(--spacing-04, 0.25rem);color:var(--danger, #d44333)}:host .invalid-message{position:var(--invalid-message-position);inset:var(--invalid-message-inset);display:none;min-height:0.9375rem;padding:var(--invalid-message-padding);color:var(--danger, #d44333);font-size:var(--font-size-12, 0.75rem);letter-spacing:initial;text-align:right;text-transform:initial}:host .invalid-message.invalid:not(.focused){display:var(--display-invalid-message);color:var(--danger, #d44333)}:host(.web) .icon-close:not(.focused),:host(.grid-search) .icon-close:not(.focused){display:none}:host([hidden]){display:none}:host([readonly]){color:var(--dark, #000000);line-height:1.5}:host([readonly]) p{margin:0}:host([readonly]) p .top-container{display:-ms-flexbox;display:flex}:host([readonly]) .app-color{color:var(--app-color, #5a30f4)}:host([readonly]) .danger{color:var(--danger, #d44333)}:host([readonly]) .success{color:var(--success, #3aa76d)}:host(.noborder) .input-container{border:none !important}:host(.translucent){--input-background-color:var(--stable-light-20, rgba(241, 241, 241, 0.2));--input-border-color:var(--stable-alt, #d0d0d0)}:host(.translucent) yoo-icon:not([color]){fill:var(--light, #ffffff)}:host(.simple) .input-container{border:none;border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0)}:host(.simple) .input-container input{padding:var(--spacing-08, 0.5rem) 0}:host(.simple) .input-container .icon-suffix{padding:0 var(--spacing-08, 0.5rem);background:var(--light, #ffffff);border:none}:host(.simple) .input-container .icon-prefix{padding:0 var(--spacing-08, 0.5rem);background:var(--light, #ffffff);border:none}:host(.simple-icon) .input-container .icon-suffix{padding:0 var(--spacing-08, 0.5rem);background:var(--light, #ffffff);border:none}:host(.simple-icon) .input-container .icon-prefix{padding:0 var(--spacing-08, 0.5rem);background:var(--light, #ffffff);border:none}:host(.round) .input-container{border-radius:1.5rem}:host(.round) .input-container .icon-prefix{border-top-left-radius:1.5rem;border-bottom-left-radius:1.5rem}:host(.round) .input-container .icon-suffix{border-top-right-radius:1.5rem;border-bottom-right-radius:1.5rem}:host(.round) .input-container input{border-radius:1.5rem}:host(.search) .input-container{width:100%;overflow:hidden;color:var(--text-color, #807f83);background:var(--stable-20, rgba(173, 173, 173, 0.2));border:var(--border-width-01, 0.0625rem) solid transparent;border-radius:var(--border-radius-04, 0.25rem);-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-animation:fadeIn 0.6s forwards;animation:fadeIn 0.6s forwards}:host(.search) .input-container .icon-prefix{border-right:none;border-top-left-radius:var(--spacing-04, 0.25rem);border-bottom-left-radius:var(--spacing-04, 0.25rem);-webkit-transition:all 0.3s;transition:all 0.3s}:host(.search) .input-container .icon-prefix yoo-icon{fill:var(--text-color, #807f83)}:host(.search) .input-container .icon-suffix{border-top-right-radius:var(--spacing-04, 0.25rem);border-bottom-right-radius:var(--spacing-04, 0.25rem);-webkit-transition:all 0.3s;transition:all 0.3s;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:var(--spacing-08, 0.5rem);color:inherit}:host(.search) .input-container .icon-suffix yoo-icon{fill:var(--text-color, #807f83)}:host(.search) .input-container input{padding:var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem);color:var(--dark, #000000);border-radius:0 var(--border-radius-04, 0.25rem) var(--border-radius-04, 0.25rem) 0;-webkit-box-shadow:transparent 0 0 0 62.5rem inset;box-shadow:transparent 0 0 0 62.5rem inset;-webkit-transition:all 0.3s;transition:all 0.3s}:host(.search) .input-container input::-webkit-input-placeholder{color:var(--stable-alt, #d0d0d0);opacity:1}:host(.search) .input-container input:-moz-placeholder{color:var(--stable-alt, #d0d0d0);opacity:1}:host(.search) .input-container input::-moz-placeholder{color:var(--stable-alt, #d0d0d0);opacity:1}:host(.search) .input-container input:-ms-input-placeholder{color:var(--stable-alt, #d0d0d0);opacity:1}:host(.search) .input-container input::-ms-input-placeholder{color:var(--text-color, #807f83)}:host(.search) .input-container input::placeholder{color:var(--text-color, #807f83)}:host(.search) .input-container .icon-close yoo-icon{fill:var(--text-color, #807f83)}:host(.search) .input-container .icon-prefix,:host(.search) .input-container .icon-suffix{padding:var(--spacing-04, 0.25rem) 0 var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem)}:host(.search) .input-container .valid-icon{display:none !important}:host(.rtl.search) .input-container .icon-prefix{padding:var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem) var(--spacing-04, 0.25rem) 0}:host(.search[size=small]) .input-container{height:1.5rem;font-size:var(--font-size-12, 0.75rem)}:host(.search[size=small]) .input-container input{font-size:var(--font-size-12, 0.75rem)}:host(.search[size=small]) .input-container input::-webkit-input-placeholder{font-size:var(--font-size-12, 0.75rem)}:host(.search[size=small]) .input-container input:-moz-placeholder{font-size:var(--font-size-12, 0.75rem)}:host(.search[size=small]) .input-container input::-moz-placeholder{font-size:var(--font-size-12, 0.75rem)}:host(.search[size=small]) .input-container input:-ms-input-placeholder{font-size:var(--font-size-12, 0.75rem)}:host(.search[size=medium]) .input-container{height:2rem;font-size:var(--font-size-14, 0.875rem)}:host(.search[size=medium]) .input-container input{font-size:var(--font-size-14, 0.875rem)}:host(.search[size=medium]) .input-container input::-webkit-input-placeholder{font-size:var(--font-size-14, 0.875rem)}:host(.search[size=medium]) .input-container input:-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}:host(.search[size=medium]) .input-container input::-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}:host(.search[size=medium]) .input-container input:-ms-input-placeholder{font-size:var(--font-size-14, 0.875rem)}:host(.search[size=large]) .input-container{height:2.5rem;font-size:var(--font-size-16, 1rem)}:host(.search[size=large]) .input-container input{font-size:var(--font-size-16, 1rem)}:host(.search[size=large]) .input-container input::-webkit-input-placeholder{font-size:var(--font-size-16, 1rem)}:host(.search[size=large]) .input-container input:-moz-placeholder{font-size:var(--font-size-16, 1rem)}:host(.search[size=large]) .input-container input::-moz-placeholder{font-size:var(--font-size-16, 1rem)}:host(.search[size=large]) .input-container input:-ms-input-placeholder{font-size:var(--font-size-16, 1rem)}:host(.disabled) .input-container{background-color:var(--stable-light, #f1f1f1)}:host(.disabled) .input-container .icon-prefix yoo-icon{fill:var(--stable, #adadad)}:host(.search.disabled) .input-container{color:var(--stable-alt, #d0d0d0);background:var(--stable-light, #f1f1f1)}:host(.search.disabled) .input-container .icon-prefix,:host(.search.disabled) .input-container .icon-suffix{opacity:1}:host(.search.disabled) .input-container .icon-prefix yoo-icon{fill:var(--stable-alt, #d0d0d0)}:host(.search.disabled) .input-container input{color:var(--stable-alt, #d0d0d0);opacity:1}:host(.search.disabled) .input-container input::-webkit-input-placeholder{color:var(--stable-alt, #d0d0d0);opacity:1}:host(.search.disabled) .input-container input::-moz-placeholder{color:var(--stable-alt, #d0d0d0);opacity:1}:host(.search.disabled) .input-container input:-ms-input-placeholder{color:var(--stable-alt, #d0d0d0);opacity:1}:host(.search.disabled) .input-container input::-ms-input-placeholder{color:var(--stable-alt, #d0d0d0);opacity:1}:host(.search.disabled) .input-container input::placeholder{color:var(--stable-alt, #d0d0d0);opacity:1}:host(.search.disabled) .input-container input .icon-prefix yoo-icon{fill:var(--stable-alt, #d0d0d0)}:host(.with-toggle):not(.autocomplete){width:calc(100% - 4rem) !important}:host(.grid-search){width:100%}:host(.grid-search.web.full-width){max-width:unset}:host(.grid-search.web){--input-font-size:cssvar(font-size-14);-ms-flex:unset;flex:unset;width:100%;min-width:6rem;max-width:12.5rem}:host(.grid-search.web) .input-container{border:none}:host(.grid-search.web) .input-container .icon-prefix{background:transparent}:host(.grid-search.web) .input-container input{background:transparent;-webkit-box-shadow:transparent 0 0 0 62.5rem inset;box-shadow:transparent 0 0 0 62.5rem inset}:host(.drop-down.web) .input-container{height:2rem;min-height:0;background:var(--stable-light-60, rgba(241, 241, 241, 0.6));border-color:var(--light, #ffffff);border-radius:var(--border-radius-04, 0.25rem)}:host(.drop-down.web) .input-container .icon-prefix{padding-left:var(--spacing-04, 0.25rem);background:var(--stable-light-60, rgba(241, 241, 241, 0.6))}:host(.drop-down.web) .input-container input{font-size:var(--font-size-14, 0.875rem);background:var(--stable-light-60, rgba(241, 241, 241, 0.6));-webkit-box-shadow:none;box-shadow:none}:host(.drop-down.web) .input-container.focused{border:none}:host(.drop-down.web.no-dropdown-scroll){margin-right:0;padding-right:var(--spacing-08, 0.5rem)}:host(.drop-down) .input-container{background:transparent;border:none var(--light, #ffffff)}:host(.drop-down) .input-container .icon-prefix{padding-left:0}:host(.web-menu) .input-container{width:100%;max-width:15.625rem;height:1.5rem;color:var(--stable, #adadad);background:var(--stable-light, #f1f1f1);border:none}:host(.web-menu) .input-container input{font-size:var(--font-size-14, 0.875rem);background:var(--stable-light, #f1f1f1);-webkit-box-shadow:none;box-shadow:none}:host(.web-menu) .input-container .icon-prefix,:host(.web-menu) .input-container .icon-suffix{font-size:var(--font-size-14, 0.875rem);background:transparent}:host(.photos-tab){padding-left:var(--spacing-40, 2.5rem) !important}:host(.full-width){width:100%}:host(.full-width) .input-container{width:100%}:host(.has-checkbox){display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.has-checkbox) .input-container{-ms-flex:1;flex:1;margin-right:var(--spacing-16, 1rem);border-color:var(--stable-alt, #d0d0d0)}:host(.has-checkbox) .input-container input{border-radius:0.3125rem 0 0.3125rem 0}:host(.has-checkbox) .input-container .icon-suffix-focus.hide{display:none}:host(.condition-form) .input-container{height:1.375rem}:host(.condition-form) .input-container input{background-color:var(--light, #ffffff);-webkit-box-shadow:none;box-shadow:none}:host(.condition-form) .invalid-message{display:none !important}:host(.no-animation) .input-container{-webkit-animation:none;animation:none}:host(.menu) .input-container{background:var(--stable-light, #f1f1f1);border:none}:host(.menu) .input-container input::-webkit-input-placeholder{color:var(--stable, #adadad);opacity:1}:host(.menu) .input-container input::-moz-placeholder{color:var(--stable, #adadad);opacity:1}:host(.menu) .input-container input:-ms-input-placeholder{color:var(--stable, #adadad);opacity:1}:host(.menu) .input-container input::-ms-input-placeholder{color:var(--stable, #adadad);opacity:1}:host(.menu) .input-container input::placeholder{color:var(--stable, #adadad);opacity:1}:host(.menu) .input-container input yoo-icon{fill:var(--stable, #adadad)}:host(.menu) .input-container .icon-prefix yoo-icon{fill:var(--stable, #adadad)}:host(.side-menu.large) .input-container{width:100%;height:var(--spacing-32, 2rem);margin:0;border-radius:var(--border-radius-04, 0.25rem)}:host(.accordion-search) .input-container{height:1.875rem;background-color:var(--stable-ultralight, #fafafa);border:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host(.accordion-search) .input-container input,:host(.accordion-search) .input-container .icon-prefix{color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem);background:transparent}:host(.accordion-search) .input-container input{background:transparent;-webkit-box-shadow:none;box-shadow:none}:host(.expanded-searchbar.web){width:100% !important}:host(.expanded-searchbar.web) .input-container{height:2rem;background-color:var(--stable-ultralight, #fafafa);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-04, 0.25rem)}:host(.expanded-searchbar.web) .input-container.focused{border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0)}:host(.expanded-searchbar.web) .input-container .icon-prefix{padding-left:var(--spacing-08, 0.5rem);background:transparent}:host(.expanded-searchbar.web) .input-container .icon-prefix yoo-icon{fill:var(--dark, #000000)}:host(.expanded-searchbar.web) .input-container input{padding-left:var(--spacing-08, 0.5rem);background:transparent;-webkit-box-shadow:none;box-shadow:none}:host(.use-button){display:inherit}:host(.use-button) .input-container{width:100%;height:100%;border-radius:0}:host(.use-button) .input-container input[type=number]::-webkit-inner-spin-button,:host(.use-button) .input-container input[type=number]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}:host(.use-button) .input-container input[type=number]{-moz-appearance:textfield}:host(.use-button) .input-container input{padding:0;text-align:center}:host([size]:not([readonly]):not(.search):not([format=contenteditable])) .input-container{height:var(--container-height)}:host([size]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input{height:var(--input-height)}:host([size=none]:not([readonly]):not(.search)){--container-height:100%}:host([size=large]:not([readonly]):not(.search)){--container-height:3rem}:host([size=large]:not([readonly]):not(.search)) .input-container input{padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem)}:host([size=large]:not([readonly]):not(.search)) .input-container .icon-prefix{padding:var(--spacing-08, 0.5rem) 0 var(--spacing-08, 0.5rem) var(--spacing-16, 1rem)}:host([size=large]:not([readonly]):not(.search).rtl) .input-container .icon-prefix{padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem) var(--spacing-08, 0.5rem) 0}:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])){--container-height:2rem}:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container{font-size:var(--font-size-14, 0.875rem);border-radius:var(--border-radius-04, 0.25rem)}:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input{font-size:var(--font-size-14, 0.875rem)}:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input::-webkit-input-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input:-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input::-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input:-ms-input-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=small]:not([readonly]):not(.search):not([format=contenteditable])){--container-height:1.5rem}:host([size=small]:not([readonly]):not(.search):not([format=contenteditable])) .input-container{border-radius:var(--border-radius-04, 0.25rem)}:host([size=small]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input{font-size:var(--font-size-14, 0.875rem)}:host(.solid) .input-container{background:var(--light, #ffffff)}:host([animation=placeholderCountdown]) input[type=number]::-webkit-input-placeholder{opacity:1}:host([animation=placeholderCountdown]) input[type=number]::-moz-placeholder{opacity:1}:host([animation=placeholderCountdown]) input[type=number]:-ms-input-placeholder{opacity:1}:host([animation=placeholderCountdown]) input[type=number]::-ms-input-placeholder{opacity:1}:host([animation=placeholderCountdown]) input[type=number]::placeholder{opacity:1}:host([animation=placeholderCountdown]) .fadeout-placeholder::-webkit-input-placeholder{opacity:0 !important;-webkit-transition:opacity 0.3s var(--ease-out-quad);transition:opacity 0.3s var(--ease-out-quad)}:host([animation=placeholderCountdown]) .fadeout-placeholder::-moz-placeholder{opacity:0 !important;-moz-transition:opacity 0.3s var(--ease-out-quad);transition:opacity 0.3s var(--ease-out-quad)}:host([animation=placeholderCountdown]) .fadeout-placeholder:-ms-input-placeholder{opacity:0 !important;-ms-transition:opacity 0.3s var(--ease-out-quad);transition:opacity 0.3s var(--ease-out-quad)}:host([animation=placeholderCountdown]) .fadeout-placeholder::-ms-input-placeholder{opacity:0 !important;-ms-transition:opacity 0.3s var(--ease-out-quad);transition:opacity 0.3s var(--ease-out-quad)}:host([animation=placeholderCountdown]) .fadeout-placeholder::placeholder{opacity:0 !important;-webkit-transition:opacity 0.3s var(--ease-out-quad);transition:opacity 0.3s var(--ease-out-quad)}:host(.empty.web.drop-down:not(.expanded-searchbar)){padding:var(--spacing-04, 0.25rem) var(--spacing-02, 0.125rem) 0 var(--spacing-08, 0.5rem)}:host(:not(.search):not(.disabled):not([format=contenteditable])) .input-container:not(.focused):hover{border:var(--border-width-01, 0.0625rem) solid var(--text-color, #807f83)}:host([format=contenteditable]) .input-container{position:relative;width:100%;color:var(--stable, #adadad);border:var(--border-width-01, 0.0625rem) solid transparent}:host([format=contenteditable]) .input-container .placeholder{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;height:100%;padding:0 var(--spacing-08, 0.5rem);font-size:var(--input-font-size)}:host([format=contenteditable]) .input-container .placeholder yoo-icon{display:none}:host([format=contenteditable]) .input-container:hover{background-color:var(--stable-light, #f1f1f1)}:host([format=contenteditable]) .input-container:hover .placeholder yoo-icon{position:absolute;right:var(--spacing-16, 1rem);display:block;padding:0 var(--spacing-08, 0.5rem)}:host([format=contenteditable]) .input-container:hover [contenteditable]{width:calc(var(--input-empty-width));padding-right:var(--spacing-32, 2rem)}:host([format=contenteditable]) .input-container .actions{position:absolute;right:0;display:none}:host([format=contenteditable]) .input-container .actions>div{padding-left:var(--spacing-08, 0.5rem)}:host([format=contenteditable]) .input-container [contenteditable]{z-index:1;max-width:100%;padding:0 var(--spacing-08, 0.5rem);overflow:auto;font-size:var(--input-font-size);line-height:calc(var(--input-font-size) + var(--spacing-16, 1rem));border:var(--border-width-01, 0.0625rem) solid transparent;border-radius:var(--border-radius-04, 0.25rem);caret-color:var(--app-color, #5a30f4);cursor:text}:host([format=contenteditable]) .input-container [contenteditable]:focus{outline:none}:host([format=contenteditable]) .input-container:not(.has-value) [contenteditable]{width:var(--input-empty-width)}:host([format=contenteditable]) .input-container.has-value{color:var(--input-text-color);font-weight:var(--input-text-weight)}:host([format=contenteditable]) .input-container.has-value .placeholder{color:transparent}:host([format=contenteditable]) .input-container.has-value [contenteditable]{width:var(--input-width)}:host([format=contenteditable]) .input-container.focused{margin-bottom:var(--spacing-32, 2rem);background-color:var(--light, #ffffff)}:host([format=contenteditable]) .input-container.focused .placeholder yoo-icon{display:none}:host([format=contenteditable]) .input-container.focused [contenteditable]{width:calc(var(--input-empty-width) + var(--spacing-32, 2rem));padding-right:0;border:var(--border-width-01, 0.0625rem) solid var(--dark, #000000)}:host([format=contenteditable]) .input-container.focused .actions{display:-ms-flexbox;display:flex}:host([format=contenteditable]) .input-container.focused.has-value{color:var(--dark, #000000);font-weight:var(--normal)}:host([format=contenteditable]) .input-container.focused.invalid [contenteditable]{border:var(--border-width-01, 0.0625rem) solid var(--danger, #d44333)}:host([format=contenteditable].disabled) .input-container{cursor:inherit}:host([size=small]) .actions{bottom:calc(var(--spacing-32, 2rem) * -1)}:host([size=medium]) .actions{bottom:calc(var(--spacing-40, 2.5rem) * -1)}:host([size=large]) .actions{bottom:calc(var(--spacing-56, 3.5rem) * -1)}:host(.rtl) input{text-align:right}:host(.accent) .input-container{border-color:var(--accent, #276ef1)}:host(.accent) .input-container .icon-prefix{border-right:none}:host(.accent) .input-container .icon-prefix yoo-icon{fill:var(--accent, #276ef1)}:host(.accent) .input-container .icon-suffix{color:var(--accent, #276ef1);border-left:none}:host(.accent) .input-container input{color:var(--accent, #276ef1)}:host(.accent) .input-container input::-webkit-input-placeholder{color:var(--accent, #276ef1)}:host(.accent) .input-container input:-moz-placeholder{color:var(--accent, #276ef1)}:host(.accent) .input-container input::-moz-placeholder{color:var(--accent, #276ef1)}:host(.accent) .input-container input:-ms-input-placeholder{color:var(--accent, #276ef1)}:host(.accent) .input-container .label{color:var(--accent, #276ef1)}:host(.success) .input-container{border-color:var(--success, #3aa76d)}:host(.success) .input-container .icon-prefix{border-right:none}:host(.success) .input-container .icon-prefix yoo-icon{fill:var(--success, #3aa76d)}:host(.success) .input-container .icon-suffix{color:var(--success, #3aa76d);border-left:none}:host(.success) .input-container input{color:var(--success, #3aa76d)}:host(.success) .input-container input::-webkit-input-placeholder{color:var(--success, #3aa76d)}:host(.success) .input-container input:-moz-placeholder{color:var(--success, #3aa76d)}:host(.success) .input-container input::-moz-placeholder{color:var(--success, #3aa76d)}:host(.success) .input-container input:-ms-input-placeholder{color:var(--success, #3aa76d)}:host(.success) .input-container .label{color:var(--success, #3aa76d)}:host(.app-color) .input-container{border-color:var(--app-color, #5a30f4)}:host(.app-color) .input-container .icon-prefix{border-right:none}:host(.app-color) .input-container .icon-prefix yoo-icon{fill:var(--app-color, #5a30f4)}:host(.app-color) .input-container .icon-suffix{color:var(--app-color, #5a30f4);border-left:none}:host(.app-color) .input-container input{color:var(--app-color, #5a30f4)}:host(.app-color) .input-container input::-webkit-input-placeholder{color:var(--app-color, #5a30f4)}:host(.app-color) .input-container input:-moz-placeholder{color:var(--app-color, #5a30f4)}:host(.app-color) .input-container input::-moz-placeholder{color:var(--app-color, #5a30f4)}:host(.app-color) .input-container input:-ms-input-placeholder{color:var(--app-color, #5a30f4)}:host(.app-color) .input-container .label{color:var(--app-color, #5a30f4)}:host(.info) .input-container{border-color:var(--info, #d84c96)}:host(.info) .input-container .icon-prefix{border-right:none}:host(.info) .input-container .icon-prefix yoo-icon{fill:var(--info, #d84c96)}:host(.info) .input-container .icon-suffix{color:var(--info, #d84c96);border-left:none}:host(.info) .input-container input{color:var(--info, #d84c96)}:host(.info) .input-container input::-webkit-input-placeholder{color:var(--info, #d84c96)}:host(.info) .input-container input:-moz-placeholder{color:var(--info, #d84c96)}:host(.info) .input-container input::-moz-placeholder{color:var(--info, #d84c96)}:host(.info) .input-container input:-ms-input-placeholder{color:var(--info, #d84c96)}:host(.info) .input-container .label{color:var(--info, #d84c96)}:host(.warning) .input-container{border-color:var(--warning, #ed6e33)}:host(.warning) .input-container .icon-prefix{border-right:none}:host(.warning) .input-container .icon-prefix yoo-icon{fill:var(--warning, #ed6e33)}:host(.warning) .input-container .icon-suffix{color:var(--warning, #ed6e33);border-left:none}:host(.warning) .input-container input{color:var(--warning, #ed6e33)}:host(.warning) .input-container input::-webkit-input-placeholder{color:var(--warning, #ed6e33)}:host(.warning) .input-container input:-moz-placeholder{color:var(--warning, #ed6e33)}:host(.warning) .input-container input::-moz-placeholder{color:var(--warning, #ed6e33)}:host(.warning) .input-container input:-ms-input-placeholder{color:var(--warning, #ed6e33)}:host(.warning) .input-container .label{color:var(--warning, #ed6e33)}:host(.danger) .input-container{border-color:var(--danger, #d44333)}:host(.danger) .input-container .icon-prefix{border-right:none}:host(.danger) .input-container .icon-prefix yoo-icon{fill:var(--danger, #d44333)}:host(.danger) .input-container .icon-suffix{color:var(--danger, #d44333);border-left:none}:host(.danger) .input-container input{color:var(--danger, #d44333)}:host(.danger) .input-container input::-webkit-input-placeholder{color:var(--danger, #d44333)}:host(.danger) .input-container input:-moz-placeholder{color:var(--danger, #d44333)}:host(.danger) .input-container input::-moz-placeholder{color:var(--danger, #d44333)}:host(.danger) .input-container input:-ms-input-placeholder{color:var(--danger, #d44333)}:host(.danger) .input-container .label{color:var(--danger, #d44333)}:host(.dark) .input-container{border-color:var(--dark, #000000)}:host(.dark) .input-container .icon-prefix{border-right:none}:host(.dark) .input-container .icon-prefix yoo-icon{fill:var(--dark, #000000)}:host(.dark) .input-container .icon-suffix{color:var(--dark, #000000);border-left:none}:host(.dark) .input-container input{color:var(--dark, #000000)}:host(.dark) .input-container input::-webkit-input-placeholder{color:var(--dark, #000000)}:host(.dark) .input-container input:-moz-placeholder{color:var(--dark, #000000)}:host(.dark) .input-container input::-moz-placeholder{color:var(--dark, #000000)}:host(.dark) .input-container input:-ms-input-placeholder{color:var(--dark, #000000)}:host(.dark) .input-container .label{color:var(--dark, #000000)}:host(.stable-light) .input-container{border-color:var(--stable-light, #f1f1f1)}:host(.stable-light) .input-container .icon-prefix{border-right:none}:host(.stable-light) .input-container .icon-prefix yoo-icon{fill:var(--stable-light, #f1f1f1)}:host(.stable-light) .input-container .icon-suffix{color:var(--stable-light, #f1f1f1);border-left:none}:host(.stable-light) .input-container input{color:var(--stable-light, #f1f1f1)}:host(.stable-light) .input-container input::-webkit-input-placeholder{color:var(--stable-light, #f1f1f1)}:host(.stable-light) .input-container input:-moz-placeholder{color:var(--stable-light, #f1f1f1)}:host(.stable-light) .input-container input::-moz-placeholder{color:var(--stable-light, #f1f1f1)}:host(.stable-light) .input-container input:-ms-input-placeholder{color:var(--stable-light, #f1f1f1)}:host(.stable-light) .input-container .label{color:var(--stable-light, #f1f1f1)}:host(.stable) .input-container{border-color:var(--stable, #adadad)}:host(.stable) .input-container .icon-prefix{border-right:none}:host(.stable) .input-container .icon-prefix yoo-icon{fill:var(--stable, #adadad)}:host(.stable) .input-container .icon-suffix{color:var(--stable, #adadad);border-left:none}:host(.stable) .input-container input{color:var(--stable, #adadad)}:host(.stable) .input-container input::-webkit-input-placeholder{color:var(--stable, #adadad)}:host(.stable) .input-container input:-moz-placeholder{color:var(--stable, #adadad)}:host(.stable) .input-container input::-moz-placeholder{color:var(--stable, #adadad)}:host(.stable) .input-container input:-ms-input-placeholder{color:var(--stable, #adadad)}:host(.stable) .input-container .label{color:var(--stable, #adadad)}:host(.light) .input-container{border-color:var(--light, #ffffff)}:host(.light) .input-container .icon-prefix{border-right:none}:host(.light) .input-container .icon-prefix yoo-icon{fill:var(--light, #ffffff)}:host(.light) .input-container .icon-suffix{color:var(--light, #ffffff);border-left:none}:host(.light) .input-container input{color:var(--light, #ffffff)}:host(.light) .input-container input::-webkit-input-placeholder{color:var(--light, #ffffff)}:host(.light) .input-container input:-moz-placeholder{color:var(--light, #ffffff)}:host(.light) .input-container input::-moz-placeholder{color:var(--light, #ffffff)}:host(.light) .input-container input:-ms-input-placeholder{color:var(--light, #ffffff)}:host(.light) .input-container .label{color:var(--light, #ffffff)}";
+const formInputCss = "svg:not(:root){overflow:hidden}:host{--display-invalid-message:block;--input-background-color:var(--light, #ffffff);--input-border-color:var(--dark, #000000);--input-text-color:var(--text-color, #807f83);--input-font-size:var(--font-size-16, 1rem);--input-flex:1;--caret-color:var(--app-color, #5a30f4);--input-text-weight:normal;--input-empty-width:100%;--input-width:100%;--input-line-height:1.5;--invalid-message-padding:cssvar(spacing-04) 0 0 0;--invalid-message-position:static;--invalid-message-inset:unset;display:block;width:100%;color:var(--dark, #000000);display:inline-block;-webkit-box-sizing:content-box;box-sizing:content-box;min-width:0;margin:0;padding:0;font-family:var(--font-family, \"Lato\");line-height:1;white-space:normal;vertical-align:middle;background:none;border:0}:host:focus{outline:0}:host[type=reset],:host[type=button],:host[type=submit],:host[type=checkbox],:host[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box}:host[type=search]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}:host .float-left{float:left;margin-top:var(--spacing-04, 0.25rem);margin-right:var(--spacing-08, 0.5rem);cursor:pointer}:host .float-left:hover{fill:var(--app-color, #5a30f4)}:host .truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}:host .truncate:hover{color:var(--app-color, #5a30f4)}:host .input-container{display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;background:var(--input-background-color);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-08, 0.5rem)}:host .input-container.noborder{border:none !important}:host .input-container.valid{border:var(--border-width-01, 0.0625rem) solid var(--success, #3aa76d)}:host .input-container.invalid{border:var(--border-width-01, 0.0625rem) solid var(--danger, #d44333)}:host .input-container.focused{border:var(--border-width-01, 0.0625rem) solid var(--input-border-color)}:host .input-container.focused .valid-icon{display:none}:host .input-container .icon-prefix,:host .input-container .icon-suffix{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:var(--spacing-08, 0.5rem);color:inherit}:host .input-container .icon-prefix{color:inherit}:host .input-container .icon-prefix yoo-icon:not([color]){fill:var(--dark, #000000)}:host .input-container .inline-left{display:inline-block;margin-left:var(--spacing-04, 0.25rem)}:host .input-container .valid-icon,:host .input-container .icon-suffix-focus{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:var(--spacing-08, 0.5rem);color:inherit;display:none;padding-right:var(--spacing-08, 0.5rem)}:host .input-container .valid-icon{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .input-container .valid-icon.valid{color:var(--success, #3aa76d)}:host .input-container .valid-icon.invalid{color:var(--danger, #d44333)}:host .input-container .icon-close{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:var(--spacing-08, 0.5rem);color:inherit}:host .input-container .icon-suffix-focus{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .input-container .warning-icon{width:0.375rem;height:0.375rem;margin-top:1.0625rem;margin-right:1.25rem;background-color:var(--warning, #ed6e33);border:none;border-radius:50%}:host .input-container .character-counter{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0 var(--spacing-08, 0.5rem) 0 var(--spacing-04, 0.25rem);color:var(--text-color, #807f83)}:host .input-container input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;display:block;-ms-flex:var(--input-flex);flex:var(--input-flex);width:100%;min-width:0;padding:var(--spacing-08, 0.5rem);color:inherit;font-weight:var(--font-weight-400, 400);font-size:var(--input-font-size);font-family:var(--font-family, \"Lato\");line-height:var(--input-line-height);text-align:left;background:transparent;border:none;border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:transparent 0 0 0 62.5rem inset;box-shadow:transparent 0 0 0 62.5rem inset;-webkit-appearance:none;caret-color:var(--caret-color)}:host .input-container input::-webkit-input-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}:host .input-container input:-moz-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}:host .input-container input::-moz-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}:host .input-container input:-ms-input-placeholder{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}:host .input-container input:focus{outline:none}:host .input-container input.hide-value{color:transparent}:host .input-container input.has-icon-prefix{padding-left:0}:host .placeholderlabel{margin-top:var(--spacing-08, 0.5rem)}:host .placeholderlabel.active{margin-top:0}:host .label{margin-bottom:var(--spacing-04, 0.25rem);padding-left:var(--spacing-08, 0.5rem);color:var(--input-text-color);font-size:var(--font-size-16, 1rem);line-height:1.5;letter-spacing:var(--spacing-02, 0.125rem);text-align:left;-webkit-transform:translateY(1.875rem);transform:translateY(1.875rem);-webkit-transition:-webkit-transform 0.2s ease-in;transition:-webkit-transform 0.2s ease-in;transition:transform 0.2s ease-in;transition:transform 0.2s ease-in, -webkit-transform 0.2s ease-in}:host .label.active{margin-top:var(--spacing-04, 0.25rem);-webkit-transform:translateY(0rem);transform:translateY(0rem)}:host .label .label-required{margin-left:var(--spacing-04, 0.25rem);color:var(--danger, #d44333)}:host .invalid-message{position:var(--invalid-message-position);inset:var(--invalid-message-inset);display:none;min-height:0.9375rem;padding:var(--invalid-message-padding);color:var(--danger, #d44333);font-size:var(--font-size-12, 0.75rem);letter-spacing:initial;text-align:right;text-transform:initial}:host .invalid-message.invalid:not(.focused){display:var(--display-invalid-message);color:var(--danger, #d44333)}:host(.web) .icon-close:not(.focused),:host(.grid-search) .icon-close:not(.focused){display:none}:host([hidden]){display:none}:host([readonly]){color:var(--dark, #000000);line-height:1.5}:host([readonly]) p{margin:0}:host([readonly]) p .top-container{display:-ms-flexbox;display:flex}:host([readonly]) .app-color{color:var(--app-color, #5a30f4)}:host([readonly]) .danger{color:var(--danger, #d44333)}:host([readonly]) .success{color:var(--success, #3aa76d)}:host(.noborder) .input-container{border:none !important}:host(.translucent){--input-background-color:var(--stable-light-20, rgba(241, 241, 241, 0.2));--input-border-color:var(--stable-alt, #d0d0d0)}:host(.translucent) yoo-icon:not([color]){fill:var(--light, #ffffff)}:host(.simple) .input-container{border:none;border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0)}:host(.simple) .input-container input{padding:var(--spacing-08, 0.5rem) 0}:host(.simple) .input-container .icon-suffix{padding:0 var(--spacing-08, 0.5rem);background:var(--light, #ffffff);border:none}:host(.simple) .input-container .icon-prefix{padding:0 var(--spacing-08, 0.5rem);background:var(--light, #ffffff);border:none}:host(.simple-icon) .input-container .icon-suffix{padding:0 var(--spacing-08, 0.5rem);background:var(--light, #ffffff);border:none}:host(.simple-icon) .input-container .icon-prefix{padding:0 var(--spacing-08, 0.5rem);background:var(--light, #ffffff);border:none}:host(.round) .input-container{border-radius:1.5rem}:host(.round) .input-container .icon-prefix{border-top-left-radius:1.5rem;border-bottom-left-radius:1.5rem}:host(.round) .input-container .icon-suffix{border-top-right-radius:1.5rem;border-bottom-right-radius:1.5rem}:host(.round) .input-container input{border-radius:1.5rem}:host(.search) .input-container{width:100%;overflow:hidden;color:var(--text-color, #807f83);background:var(--stable-20, rgba(173, 173, 173, 0.2));border:var(--border-width-01, 0.0625rem) solid transparent;border-radius:var(--border-radius-04, 0.25rem);-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-animation:fadeIn 0.6s forwards;animation:fadeIn 0.6s forwards}:host(.search) .input-container .icon-prefix{border-right:none;border-top-left-radius:var(--spacing-04, 0.25rem);border-bottom-left-radius:var(--spacing-04, 0.25rem);-webkit-transition:all 0.3s;transition:all 0.3s}:host(.search) .input-container .icon-prefix yoo-icon{fill:var(--text-color, #807f83)}:host(.search) .input-container .icon-suffix{border-top-right-radius:var(--spacing-04, 0.25rem);border-bottom-right-radius:var(--spacing-04, 0.25rem);-webkit-transition:all 0.3s;transition:all 0.3s;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:var(--spacing-08, 0.5rem);color:inherit}:host(.search) .input-container .icon-suffix yoo-icon{fill:var(--text-color, #807f83)}:host(.search) .input-container input{padding:var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem);color:var(--dark, #000000);border-radius:0 var(--border-radius-04, 0.25rem) var(--border-radius-04, 0.25rem) 0;-webkit-box-shadow:transparent 0 0 0 62.5rem inset;box-shadow:transparent 0 0 0 62.5rem inset;-webkit-transition:all 0.3s;transition:all 0.3s}:host(.search) .input-container input::-webkit-input-placeholder{color:var(--stable-alt, #d0d0d0);opacity:1}:host(.search) .input-container input:-moz-placeholder{color:var(--stable-alt, #d0d0d0);opacity:1}:host(.search) .input-container input::-moz-placeholder{color:var(--stable-alt, #d0d0d0);opacity:1}:host(.search) .input-container input:-ms-input-placeholder{color:var(--stable-alt, #d0d0d0);opacity:1}:host(.search) .input-container input::-ms-input-placeholder{color:var(--text-color, #807f83)}:host(.search) .input-container input::placeholder{color:var(--text-color, #807f83)}:host(.search) .input-container .icon-close yoo-icon{fill:var(--text-color, #807f83)}:host(.search) .input-container .icon-prefix,:host(.search) .input-container .icon-suffix{padding:var(--spacing-04, 0.25rem) 0 var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem)}:host(.search) .input-container .valid-icon{display:none !important}:host(.rtl.search) .input-container .icon-prefix{padding:var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem) var(--spacing-04, 0.25rem) 0}:host(.search[size=small]) .input-container{height:1.5rem;font-size:var(--font-size-12, 0.75rem)}:host(.search[size=small]) .input-container input{font-size:var(--font-size-12, 0.75rem)}:host(.search[size=small]) .input-container input::-webkit-input-placeholder{font-size:var(--font-size-12, 0.75rem)}:host(.search[size=small]) .input-container input:-moz-placeholder{font-size:var(--font-size-12, 0.75rem)}:host(.search[size=small]) .input-container input::-moz-placeholder{font-size:var(--font-size-12, 0.75rem)}:host(.search[size=small]) .input-container input:-ms-input-placeholder{font-size:var(--font-size-12, 0.75rem)}:host(.search[size=medium]) .input-container{height:2rem;font-size:var(--font-size-14, 0.875rem)}:host(.search[size=medium]) .input-container input{font-size:var(--font-size-14, 0.875rem)}:host(.search[size=medium]) .input-container input::-webkit-input-placeholder{font-size:var(--font-size-14, 0.875rem)}:host(.search[size=medium]) .input-container input:-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}:host(.search[size=medium]) .input-container input::-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}:host(.search[size=medium]) .input-container input:-ms-input-placeholder{font-size:var(--font-size-14, 0.875rem)}:host(.search[size=large]) .input-container{height:2.5rem;font-size:var(--font-size-16, 1rem)}:host(.search[size=large]) .input-container input{font-size:var(--font-size-16, 1rem)}:host(.search[size=large]) .input-container input::-webkit-input-placeholder{font-size:var(--font-size-16, 1rem)}:host(.search[size=large]) .input-container input:-moz-placeholder{font-size:var(--font-size-16, 1rem)}:host(.search[size=large]) .input-container input::-moz-placeholder{font-size:var(--font-size-16, 1rem)}:host(.search[size=large]) .input-container input:-ms-input-placeholder{font-size:var(--font-size-16, 1rem)}:host(.disabled) .input-container{background-color:var(--stable-light, #f1f1f1)}:host(.disabled) .input-container .icon-prefix yoo-icon{fill:var(--stable, #adadad)}:host(.search.disabled) .input-container{color:var(--stable-alt, #d0d0d0);background:var(--stable-light, #f1f1f1)}:host(.search.disabled) .input-container .icon-prefix,:host(.search.disabled) .input-container .icon-suffix{opacity:1}:host(.search.disabled) .input-container .icon-prefix yoo-icon{fill:var(--stable-alt, #d0d0d0)}:host(.search.disabled) .input-container input{color:var(--stable-alt, #d0d0d0);opacity:1}:host(.search.disabled) .input-container input::-webkit-input-placeholder{color:var(--stable-alt, #d0d0d0);opacity:1}:host(.search.disabled) .input-container input::-moz-placeholder{color:var(--stable-alt, #d0d0d0);opacity:1}:host(.search.disabled) .input-container input:-ms-input-placeholder{color:var(--stable-alt, #d0d0d0);opacity:1}:host(.search.disabled) .input-container input::-ms-input-placeholder{color:var(--stable-alt, #d0d0d0);opacity:1}:host(.search.disabled) .input-container input::placeholder{color:var(--stable-alt, #d0d0d0);opacity:1}:host(.search.disabled) .input-container input .icon-prefix yoo-icon{fill:var(--stable-alt, #d0d0d0)}:host(.with-toggle):not(.autocomplete){width:calc(100% - 4rem) !important}:host(.grid-search){width:100%}:host(.grid-search.web.full-width){max-width:unset}:host(.grid-search.web){--input-font-size:cssvar(font-size-14);-ms-flex:unset;flex:unset;width:100%;min-width:6rem;max-width:12.5rem}:host(.grid-search.web) .input-container{border:none}:host(.grid-search.web) .input-container .icon-prefix{background:transparent}:host(.grid-search.web) .input-container input{background:transparent;-webkit-box-shadow:transparent 0 0 0 62.5rem inset;box-shadow:transparent 0 0 0 62.5rem inset}:host(.drop-down.web) .input-container{height:2rem;min-height:0;background:var(--stable-light-60, rgba(241, 241, 241, 0.6));border-color:var(--light, #ffffff);border-radius:var(--border-radius-04, 0.25rem)}:host(.drop-down.web) .input-container .icon-prefix{padding-left:var(--spacing-04, 0.25rem);background:var(--stable-light-60, rgba(241, 241, 241, 0.6))}:host(.drop-down.web) .input-container input{font-size:var(--font-size-14, 0.875rem);background:var(--stable-light-60, rgba(241, 241, 241, 0.6));-webkit-box-shadow:none;box-shadow:none}:host(.drop-down.web) .input-container.focused{border:none}:host(.drop-down.web.no-dropdown-scroll){margin-right:0;padding-right:var(--spacing-08, 0.5rem)}:host(.drop-down) .input-container{background:transparent;border:none var(--light, #ffffff)}:host(.drop-down) .input-container .icon-prefix{padding-left:0}:host(.web-menu) .input-container{width:100%;max-width:15.625rem;height:1.5rem;color:var(--stable, #adadad);background:var(--stable-light, #f1f1f1);border:none}:host(.web-menu) .input-container input{font-size:var(--font-size-14, 0.875rem);background:var(--stable-light, #f1f1f1);-webkit-box-shadow:none;box-shadow:none}:host(.web-menu) .input-container .icon-prefix,:host(.web-menu) .input-container .icon-suffix{font-size:var(--font-size-14, 0.875rem);background:transparent}:host(.photos-tab){padding-left:var(--spacing-40, 2.5rem) !important}:host(.full-width){width:100%}:host(.full-width) .input-container{width:100%}:host(.has-checkbox){display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.has-checkbox) .input-container{-ms-flex:1;flex:1;margin-right:var(--spacing-16, 1rem);border-color:var(--stable-alt, #d0d0d0)}:host(.has-checkbox) .input-container input{border-radius:0.3125rem 0 0.3125rem 0}:host(.has-checkbox) .input-container .icon-suffix-focus.hide{display:none}:host(.condition-form) .input-container{height:1.375rem}:host(.condition-form) .input-container input{background-color:var(--light, #ffffff);-webkit-box-shadow:none;box-shadow:none}:host(.condition-form) .invalid-message{display:none !important}:host(.no-animation) .input-container{-webkit-animation:none;animation:none}:host(.menu) .input-container{background:var(--stable-light, #f1f1f1);border:none}:host(.menu) .input-container input::-webkit-input-placeholder{color:var(--stable, #adadad);opacity:1}:host(.menu) .input-container input::-moz-placeholder{color:var(--stable, #adadad);opacity:1}:host(.menu) .input-container input:-ms-input-placeholder{color:var(--stable, #adadad);opacity:1}:host(.menu) .input-container input::-ms-input-placeholder{color:var(--stable, #adadad);opacity:1}:host(.menu) .input-container input::placeholder{color:var(--stable, #adadad);opacity:1}:host(.menu) .input-container input yoo-icon{fill:var(--stable, #adadad)}:host(.menu) .input-container .icon-prefix yoo-icon{fill:var(--stable, #adadad)}:host(.side-menu.large) .input-container{width:100%;height:var(--spacing-32, 2rem);margin:0;border-radius:var(--border-radius-04, 0.25rem)}:host(.accordion-search) .input-container{height:1.875rem;background-color:var(--stable-ultralight, #fafafa);border:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host(.accordion-search) .input-container input,:host(.accordion-search) .input-container .icon-prefix{color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem);background:transparent}:host(.accordion-search) .input-container input{background:transparent;-webkit-box-shadow:none;box-shadow:none}:host(.expanded-searchbar.web){width:100% !important}:host(.expanded-searchbar.web) .input-container{height:2rem;background-color:var(--stable-ultralight, #fafafa);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-04, 0.25rem)}:host(.expanded-searchbar.web) .input-container.focused{border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0)}:host(.expanded-searchbar.web) .input-container .icon-prefix{padding-left:var(--spacing-08, 0.5rem);background:transparent}:host(.expanded-searchbar.web) .input-container .icon-prefix yoo-icon{fill:var(--dark, #000000)}:host(.expanded-searchbar.web) .input-container input{padding-left:var(--spacing-08, 0.5rem);background:transparent;-webkit-box-shadow:none;box-shadow:none}:host(.use-button){display:inherit}:host(.use-button) .input-container{width:100%;height:100%;border-radius:0}:host(.use-button) .input-container input[type=number]::-webkit-inner-spin-button,:host(.use-button) .input-container input[type=number]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}:host(.use-button) .input-container input[type=number]{-moz-appearance:textfield}:host(.use-button) .input-container input{padding:0;text-align:center}:host([size]:not([readonly]):not(.search):not([format=contenteditable])) .input-container{height:var(--container-height)}:host([size]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input{height:var(--input-height)}:host([size=none]:not([readonly]):not(.search)){--container-height:100%}:host([size=large]:not([readonly]):not(.search)){--container-height:3rem}:host([size=large]:not([readonly]):not(.search)) .input-container input{padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem)}:host([size=large]:not([readonly]):not(.search)) .input-container .icon-prefix{padding:var(--spacing-08, 0.5rem) 0 var(--spacing-08, 0.5rem) var(--spacing-16, 1rem)}:host([size=large]:not([readonly]):not(.search).rtl) .input-container .icon-prefix{padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem) var(--spacing-08, 0.5rem) 0}:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])){--container-height:2rem}:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container{font-size:var(--font-size-14, 0.875rem);border-radius:var(--border-radius-04, 0.25rem)}:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input{font-size:var(--font-size-14, 0.875rem)}:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input::-webkit-input-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input:-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input::-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input:-ms-input-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=small]:not([readonly]):not(.search):not([format=contenteditable])){--container-height:1.5rem}:host([size=small]:not([readonly]):not(.search):not([format=contenteditable])) .input-container{border-radius:var(--border-radius-04, 0.25rem)}:host([size=small]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input{font-size:var(--font-size-14, 0.875rem)}:host(.solid) .input-container{background:var(--light, #ffffff)}:host([animation=placeholderCountdown]) input[type=number]::-webkit-input-placeholder{opacity:1}:host([animation=placeholderCountdown]) input[type=number]::-moz-placeholder{opacity:1}:host([animation=placeholderCountdown]) input[type=number]:-ms-input-placeholder{opacity:1}:host([animation=placeholderCountdown]) input[type=number]::-ms-input-placeholder{opacity:1}:host([animation=placeholderCountdown]) input[type=number]::placeholder{opacity:1}:host([animation=placeholderCountdown]) .fadeout-placeholder::-webkit-input-placeholder{opacity:0 !important;-webkit-transition:opacity 0.3s var(--ease-out-quad);transition:opacity 0.3s var(--ease-out-quad)}:host([animation=placeholderCountdown]) .fadeout-placeholder::-moz-placeholder{opacity:0 !important;-moz-transition:opacity 0.3s var(--ease-out-quad);transition:opacity 0.3s var(--ease-out-quad)}:host([animation=placeholderCountdown]) .fadeout-placeholder:-ms-input-placeholder{opacity:0 !important;-ms-transition:opacity 0.3s var(--ease-out-quad);transition:opacity 0.3s var(--ease-out-quad)}:host([animation=placeholderCountdown]) .fadeout-placeholder::-ms-input-placeholder{opacity:0 !important;-ms-transition:opacity 0.3s var(--ease-out-quad);transition:opacity 0.3s var(--ease-out-quad)}:host([animation=placeholderCountdown]) .fadeout-placeholder::placeholder{opacity:0 !important;-webkit-transition:opacity 0.3s var(--ease-out-quad);transition:opacity 0.3s var(--ease-out-quad)}:host(.empty.web.drop-down:not(.expanded-searchbar)){padding:var(--spacing-04, 0.25rem) var(--spacing-02, 0.125rem) 0 var(--spacing-08, 0.5rem)}:host(:not(.search):not(.disabled):not([format=contenteditable])) .input-container:not(.focused):hover{border:var(--border-width-01, 0.0625rem) solid var(--text-color, #807f83)}:host([format=contenteditable]) .input-container{position:relative;width:100%;color:var(--stable, #adadad);border:var(--border-width-01, 0.0625rem) solid transparent}:host([format=contenteditable]) .input-container .placeholder{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;height:100%;padding:0 var(--spacing-08, 0.5rem);font-size:var(--input-font-size)}:host([format=contenteditable]) .input-container .placeholder yoo-icon{display:none}:host([format=contenteditable]) .input-container:hover{background-color:var(--stable-light, #f1f1f1)}:host([format=contenteditable]) .input-container:hover .placeholder yoo-icon{position:absolute;right:var(--spacing-16, 1rem);display:block;padding:0 var(--spacing-08, 0.5rem)}:host([format=contenteditable]) .input-container:hover [contenteditable]{width:calc(var(--input-empty-width));padding-right:var(--spacing-32, 2rem)}:host([format=contenteditable]) .input-container .actions{position:absolute;right:0;display:none}:host([format=contenteditable]) .input-container .actions>div{padding-left:var(--spacing-08, 0.5rem)}:host([format=contenteditable]) .input-container [contenteditable]{z-index:1;max-width:100%;padding:0 var(--spacing-08, 0.5rem);overflow:auto;font-size:var(--input-font-size);line-height:calc(var(--input-font-size) + var(--spacing-16, 1rem));border:var(--border-width-01, 0.0625rem) solid transparent;border-radius:var(--border-radius-04, 0.25rem);caret-color:var(--app-color, #5a30f4);cursor:text}:host([format=contenteditable]) .input-container [contenteditable]:focus{outline:none}:host([format=contenteditable]) .input-container:not(.has-value) [contenteditable]{width:var(--input-empty-width)}:host([format=contenteditable]) .input-container.has-value{color:var(--input-text-color);font-weight:var(--input-text-weight)}:host([format=contenteditable]) .input-container.has-value .placeholder{color:transparent}:host([format=contenteditable]) .input-container.has-value [contenteditable]{width:var(--input-width)}:host([format=contenteditable]) .input-container.focused{margin-bottom:var(--spacing-32, 2rem);background-color:var(--light, #ffffff)}:host([format=contenteditable]) .input-container.focused .placeholder yoo-icon{display:none}:host([format=contenteditable]) .input-container.focused [contenteditable]{width:calc(var(--input-empty-width) + var(--spacing-32, 2rem));padding-right:0;border:var(--border-width-01, 0.0625rem) solid var(--dark, #000000)}:host([format=contenteditable]) .input-container.focused .actions{display:-ms-flexbox;display:flex}:host([format=contenteditable]) .input-container.focused.has-value{color:var(--dark, #000000);font-weight:var(--normal)}:host([format=contenteditable]) .input-container.focused.invalid [contenteditable]{border:var(--border-width-01, 0.0625rem) solid var(--danger, #d44333)}:host([format=contenteditable].disabled) .input-container{cursor:inherit}:host([size=small]) .actions{bottom:calc(var(--spacing-32, 2rem) * -1)}:host([size=medium]) .actions{bottom:calc(var(--spacing-40, 2.5rem) * -1)}:host([size=large]) .actions{bottom:calc(var(--spacing-56, 3.5rem) * -1)}:host(.rtl) input{text-align:right}:host(.accent) .input-container{border-color:var(--accent, #276ef1)}:host(.accent) .input-container .icon-prefix{border-right:none}:host(.accent) .input-container .icon-prefix yoo-icon{fill:var(--accent, #276ef1)}:host(.accent) .input-container .icon-suffix{color:var(--accent, #276ef1);border-left:none}:host(.accent) .input-container input{color:var(--accent, #276ef1)}:host(.accent) .input-container input::-webkit-input-placeholder{color:var(--accent, #276ef1)}:host(.accent) .input-container input:-moz-placeholder{color:var(--accent, #276ef1)}:host(.accent) .input-container input::-moz-placeholder{color:var(--accent, #276ef1)}:host(.accent) .input-container input:-ms-input-placeholder{color:var(--accent, #276ef1)}:host(.accent) .input-container .label{color:var(--accent, #276ef1)}:host(.success) .input-container{border-color:var(--success, #3aa76d)}:host(.success) .input-container .icon-prefix{border-right:none}:host(.success) .input-container .icon-prefix yoo-icon{fill:var(--success, #3aa76d)}:host(.success) .input-container .icon-suffix{color:var(--success, #3aa76d);border-left:none}:host(.success) .input-container input{color:var(--success, #3aa76d)}:host(.success) .input-container input::-webkit-input-placeholder{color:var(--success, #3aa76d)}:host(.success) .input-container input:-moz-placeholder{color:var(--success, #3aa76d)}:host(.success) .input-container input::-moz-placeholder{color:var(--success, #3aa76d)}:host(.success) .input-container input:-ms-input-placeholder{color:var(--success, #3aa76d)}:host(.success) .input-container .label{color:var(--success, #3aa76d)}:host(.app-color) .input-container{border-color:var(--app-color, #5a30f4)}:host(.app-color) .input-container .icon-prefix{border-right:none}:host(.app-color) .input-container .icon-prefix yoo-icon{fill:var(--app-color, #5a30f4)}:host(.app-color) .input-container .icon-suffix{color:var(--app-color, #5a30f4);border-left:none}:host(.app-color) .input-container input{color:var(--app-color, #5a30f4)}:host(.app-color) .input-container input::-webkit-input-placeholder{color:var(--app-color, #5a30f4)}:host(.app-color) .input-container input:-moz-placeholder{color:var(--app-color, #5a30f4)}:host(.app-color) .input-container input::-moz-placeholder{color:var(--app-color, #5a30f4)}:host(.app-color) .input-container input:-ms-input-placeholder{color:var(--app-color, #5a30f4)}:host(.app-color) .input-container .label{color:var(--app-color, #5a30f4)}:host(.info) .input-container{border-color:var(--info, #d84c96)}:host(.info) .input-container .icon-prefix{border-right:none}:host(.info) .input-container .icon-prefix yoo-icon{fill:var(--info, #d84c96)}:host(.info) .input-container .icon-suffix{color:var(--info, #d84c96);border-left:none}:host(.info) .input-container input{color:var(--info, #d84c96)}:host(.info) .input-container input::-webkit-input-placeholder{color:var(--info, #d84c96)}:host(.info) .input-container input:-moz-placeholder{color:var(--info, #d84c96)}:host(.info) .input-container input::-moz-placeholder{color:var(--info, #d84c96)}:host(.info) .input-container input:-ms-input-placeholder{color:var(--info, #d84c96)}:host(.info) .input-container .label{color:var(--info, #d84c96)}:host(.warning) .input-container{border-color:var(--warning, #ed6e33)}:host(.warning) .input-container .icon-prefix{border-right:none}:host(.warning) .input-container .icon-prefix yoo-icon{fill:var(--warning, #ed6e33)}:host(.warning) .input-container .icon-suffix{color:var(--warning, #ed6e33);border-left:none}:host(.warning) .input-container input{color:var(--warning, #ed6e33)}:host(.warning) .input-container input::-webkit-input-placeholder{color:var(--warning, #ed6e33)}:host(.warning) .input-container input:-moz-placeholder{color:var(--warning, #ed6e33)}:host(.warning) .input-container input::-moz-placeholder{color:var(--warning, #ed6e33)}:host(.warning) .input-container input:-ms-input-placeholder{color:var(--warning, #ed6e33)}:host(.warning) .input-container .label{color:var(--warning, #ed6e33)}:host(.danger) .input-container{border-color:var(--danger, #d44333)}:host(.danger) .input-container .icon-prefix{border-right:none}:host(.danger) .input-container .icon-prefix yoo-icon{fill:var(--danger, #d44333)}:host(.danger) .input-container .icon-suffix{color:var(--danger, #d44333);border-left:none}:host(.danger) .input-container input{color:var(--danger, #d44333)}:host(.danger) .input-container input::-webkit-input-placeholder{color:var(--danger, #d44333)}:host(.danger) .input-container input:-moz-placeholder{color:var(--danger, #d44333)}:host(.danger) .input-container input::-moz-placeholder{color:var(--danger, #d44333)}:host(.danger) .input-container input:-ms-input-placeholder{color:var(--danger, #d44333)}:host(.danger) .input-container .label{color:var(--danger, #d44333)}:host(.dark) .input-container{border-color:var(--dark, #000000)}:host(.dark) .input-container .icon-prefix{border-right:none}:host(.dark) .input-container .icon-prefix yoo-icon{fill:var(--dark, #000000)}:host(.dark) .input-container .icon-suffix{color:var(--dark, #000000);border-left:none}:host(.dark) .input-container input{color:var(--dark, #000000)}:host(.dark) .input-container input::-webkit-input-placeholder{color:var(--dark, #000000)}:host(.dark) .input-container input:-moz-placeholder{color:var(--dark, #000000)}:host(.dark) .input-container input::-moz-placeholder{color:var(--dark, #000000)}:host(.dark) .input-container input:-ms-input-placeholder{color:var(--dark, #000000)}:host(.dark) .input-container .label{color:var(--dark, #000000)}:host(.stable-light) .input-container{border-color:var(--stable-light, #f1f1f1)}:host(.stable-light) .input-container .icon-prefix{border-right:none}:host(.stable-light) .input-container .icon-prefix yoo-icon{fill:var(--stable-light, #f1f1f1)}:host(.stable-light) .input-container .icon-suffix{color:var(--stable-light, #f1f1f1);border-left:none}:host(.stable-light) .input-container input{color:var(--stable-light, #f1f1f1)}:host(.stable-light) .input-container input::-webkit-input-placeholder{color:var(--stable-light, #f1f1f1)}:host(.stable-light) .input-container input:-moz-placeholder{color:var(--stable-light, #f1f1f1)}:host(.stable-light) .input-container input::-moz-placeholder{color:var(--stable-light, #f1f1f1)}:host(.stable-light) .input-container input:-ms-input-placeholder{color:var(--stable-light, #f1f1f1)}:host(.stable-light) .input-container .label{color:var(--stable-light, #f1f1f1)}:host(.stable) .input-container{border-color:var(--stable, #adadad)}:host(.stable) .input-container .icon-prefix{border-right:none}:host(.stable) .input-container .icon-prefix yoo-icon{fill:var(--stable, #adadad)}:host(.stable) .input-container .icon-suffix{color:var(--stable, #adadad);border-left:none}:host(.stable) .input-container input{color:var(--stable, #adadad)}:host(.stable) .input-container input::-webkit-input-placeholder{color:var(--stable, #adadad)}:host(.stable) .input-container input:-moz-placeholder{color:var(--stable, #adadad)}:host(.stable) .input-container input::-moz-placeholder{color:var(--stable, #adadad)}:host(.stable) .input-container input:-ms-input-placeholder{color:var(--stable, #adadad)}:host(.stable) .input-container .label{color:var(--stable, #adadad)}:host(.light) .input-container{border-color:var(--light, #ffffff)}:host(.light) .input-container .icon-prefix{border-right:none}:host(.light) .input-container .icon-prefix yoo-icon{fill:var(--light, #ffffff)}:host(.light) .input-container .icon-suffix{color:var(--light, #ffffff);border-left:none}:host(.light) .input-container input{color:var(--light, #ffffff)}:host(.light) .input-container input::-webkit-input-placeholder{color:var(--light, #ffffff)}:host(.light) .input-container input:-moz-placeholder{color:var(--light, #ffffff)}:host(.light) .input-container input::-moz-placeholder{color:var(--light, #ffffff)}:host(.light) .input-container input:-ms-input-placeholder{color:var(--light, #ffffff)}:host(.light) .input-container .label{color:var(--light, #ffffff)}";
 
 const YooFormInputComponent = class {
   constructor(hostRef) {

package/dist/cjs/yoo-workflow.cjs.entry.js

@@ -8,7 +8,7 @@ const workflow_interface = require('./workflow.interface-ffda8358.js');
 const commonHelpers = require('./common-helpers-9cd02bab.js');
 const lodash = require('./lodash-1f7fff24.js');
 const index$4 = require('./index-10520a3e.js');
-const index$2 = require('./index-e236c2e8.js');
+const index$2 = require('./index-91bacf6d.js');
 const index$3 = require('./index-9c56868f.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-c09665da.js');

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

@@ -3,11 +3,14 @@ import { h, Host } from '@stencil/core';
 export class YooFormFilterComponent {
   constructor() {
     this.caption = undefined;
-    this.expanded = false;
     this.placeholder = undefined;
     this.icon = undefined;
     this.color = undefined;
     this.size = undefined;
+    this.expanded = false;
+  }
+  onExpandedChanged() {
+    this.dialogExpanded.emit(this.expanded);
   }
   get isInline() {
     var _a, _b;
@@ -82,24 +85,6 @@ export class YooFormFilterComponent {
         "attribute": "caption",
         "reflect": false
       },
-      "expanded": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the dropdown is open."
-        },
-        "attribute": "expanded",
-        "reflect": true,
-        "defaultValue": "false"
-      },
       "placeholder": {
         "type": "string",
         "mutable": false,
@@ -182,6 +167,24 @@ export class YooFormFilterComponent {
         },
         "attribute": "size",
         "reflect": true
+      },
+      "expanded": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the dropdown is open."
+        },
+        "attribute": "expanded",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }
@@ -216,9 +219,30 @@ export class YooFormFilterComponent {
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "dialogExpanded",
+        "name": "dialogExpanded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the dropdown is opened / closed"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
       }];
   }
   static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "expanded",
+        "methodName": "onExpandedChanged"
+      }];
+  }
   static get listeners() {
     return [{
         "name": "click",

package/dist/collection/components/form/form-filter-date/form-filter-date.css

@@ -221,6 +221,7 @@ svg:not(:root) {
   padding: var(--spacing-08, 0.5rem);
 }
 :host yoo-form-input {
+  --input-line-height: 1;
   width: 5rem;
   padding-left: 1rem;
 }

package/dist/collection/components/form/form-filter-date/form-filter-date.js

@@ -79,7 +79,7 @@ export class YooFormFilterDateComponent {
     this.value = { operator, value };
   }
   render() {
-    return this.readonly ? (h("yoo-tag", { color: "text-color-10" }, this.caption)) : (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() }, h("div", { class: "options" }, h("h1", null, translate('RELATIVE')), Object.values(FormFilterDateOperator)
+    return this.readonly ? (h("yoo-tag", { color: "text-color-10" }, this.caption)) : (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(), onDialogExpanded: (event) => this.dateFilterExpanded.emit(event.detail) }, h("div", { class: "options" }, h("h1", null, translate('RELATIVE')), Object.values(FormFilterDateOperator)
       .filter((operator) => isRelative(operator))
       .map((operator) => {
       var _a;
@@ -295,6 +295,21 @@ export class YooFormFilterDateComponent {
             }
           }
         }
+      }, {
+        "method": "dateFilterExpanded",
+        "name": "dateFilterExpanded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the dropdown is opened / closed"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
       }];
   }
 }

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

@@ -216,6 +216,7 @@ svg:not(:root) {
   --input-text-weight: normal;
   --input-empty-width: 100%;
   --input-width: 100%;
+  --input-line-height: 1.5;
   --invalid-message-padding: cssvar(spacing-04) 0 0 0;
   --invalid-message-position: static;
   --invalid-message-inset: unset;
@@ -374,7 +375,7 @@ svg:not(:root) {
   font-weight: var(--font-weight-400, 400);
   font-size: var(--input-font-size);
   font-family: var(--font-family, "Lato");
-  line-height: 1.5;
+  line-height: var(--input-line-height);
   text-align: left;
   background: transparent;
   border: none;

package/dist/collection/components/form-creator/form-creator-translate/form-creator-translate.js

@@ -581,8 +581,8 @@ export class YooFormCreatorTranslateComponent {
     return h("div", { class: "grid-container" }, h("yoo-grid", { class: "full-width", ref: (el) => (this.grid = el), gridConfig: this.gridConfig, displayType: "card-grid", items: displayItems, isLocal: true, emptyState: "translations", onSelected: (ev) => this.onItemSelected(ev), onCellClicked: (ev) => this.onCellClicked(ev), secondaryActions: this.secondaryActions }));
   }
   render() {
-    var _a, _b, _c, _d, _e, _f;
-    return (h(Host, null, h("div", { class: "header" }, h("yoo-form-input-container", { class: { 'base-language': true, readonly: this.hasTranslations }, field: { title: translate('BASELANGUAGE') }, hideOptional: true }, h("yoo-form-autocomplete", { values: getTranslateLanguageKeys(this.allLanguages), value: this.baseLanguage, idOnly: true, useTranslate: true, displayType: "card-list", forceHideSearch: true, color: "transparent", onInputChanged: (ev) => this.onBaseLanguageChanged(ev), size: "medium", disabled: this.hasTranslations || this.isTranslator })), h("yoo-form-input-container", { class: { 'translate-to': true }, field: { title: this.hasTranslations ? translate('TRANSLATEDIN') : translate('TRANSLATETO'), type: FormFieldType.autocomplete }, hideOptional: true }, h("yoo-form-autocomplete", { extraClass: this.hasTranslations ? 'only-allow-secondary-actions' : null, ref: (el) => (this.translateToAutocomplete = el), values: getTranslateLanguageKeys(this.hasTranslations ? this.selectedLanguages : this.getAvailableLanguages()), value: getTranslateLanguageKeys(this.selectedLanguages), multiple: true, iconPrefix: "feed", useTranslate: true, entityType: "language", displayType: "card-list", idOnly: true, forceHideSearch: true, placeholder: translate('SELECTLANGUAGES'), onInputChanged: (ev) => this.onSelectedLanguagesChanged(ev.detail), readonly: this.isTranslator, size: "medium", secondaryActions: [
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return (h(Host, null, h("div", { class: "header" }, h("yoo-form-input-container", { class: { 'base-language': true, readonly: this.hasTranslations }, field: { title: translate('BASELANGUAGE') }, hideOptional: true }, h("yoo-form-autocomplete", { values: getTranslateLanguageKeys(this.allLanguages), value: this.baseLanguage, idOnly: true, useTranslate: true, displayType: "card-list", forceHideSearch: true, color: "transparent", onInputChanged: (ev) => this.onBaseLanguageChanged(ev), size: "medium", disabled: this.hasTranslations || this.isTranslator || ((_a = this.disableTranslateButton) === null || _a === void 0 ? void 0 : _a.length) > 0 })), h("yoo-form-input-container", { class: { 'translate-to': true }, field: { title: this.hasTranslations ? translate('TRANSLATEDIN') : translate('TRANSLATETO'), type: FormFieldType.autocomplete }, hideOptional: true }, h("yoo-form-autocomplete", { extraClass: this.hasTranslations ? 'only-allow-secondary-actions' : null, ref: (el) => (this.translateToAutocomplete = el), values: getTranslateLanguageKeys(this.hasTranslations ? this.selectedLanguages : this.getAvailableLanguages()), value: getTranslateLanguageKeys(this.selectedLanguages), multiple: true, iconPrefix: "feed", useTranslate: true, entityType: "language", displayType: "card-list", idOnly: true, forceHideSearch: true, placeholder: translate('SELECTLANGUAGES'), onInputChanged: (ev) => this.onSelectedLanguagesChanged(ev.detail), readonly: this.isTranslator, size: "medium", secondaryActions: [
         {
           text: (_item) => translate('DELETE'),
           color: () => 'danger',
@@ -591,8 +591,8 @@ export class YooFormCreatorTranslateComponent {
           handler: (language) => this.removeLanguage(language._id),
           isVisible: () => this.hasTranslations
         }
-      ], disabled: this.areTranslationsLocked })), this.hasTranslations && !this.areTranslationsLocked && (h("yoo-tooltip", { hoverable: true, placement: "bottom", content: translate(this.disableNewLanguageButton ? this.disableNewLanguageButton : 'ADDNEWLANGUAGE'), class: "no-pointer" }, h("yoo-button", { disabled: ((_a = this.disableNewLanguageButton) === null || _a === void 0 ? void 0 : _a.length) > 0, size: "medium", shape: "square", onClick: () => this.onAddNewLanguageClicked() }, h("yoo-icon", { slot: "start", size: "small", name: "plus" })))), !this.hasTranslations && !this.isTranslator && !this.areTranslationsLocked && (this.disableTranslateButton ? h("yoo-tooltip", { hoverable: true, placement: "bottom", content: translate(this.disableTranslateButton), class: "no-pointer" }, h("yoo-button", { size: "medium", shape: "rectangular", disabled: !this.selectedLanguages || this.selectedLanguages.length < 1 || ((_b = this.selectedLanguages) === null || _b === void 0 ? void 0 : _b.includes(this.baseLanguage)) || ((_c = this.disableTranslateButton) === null || _c === void 0 ? void 0 : _c.length) > 0, onClick: () => this.onTranslateAll() }, h("yoo-icon", { name: "translate", slot: "start", size: "small" }), translate('TRANSLATE'))) :
-      h("yoo-button", { size: "medium", shape: "rectangular", disabled: !this.selectedLanguages || this.selectedLanguages.length < 1 || ((_d = this.selectedLanguages) === null || _d === void 0 ? void 0 : _d.includes(this.baseLanguage)) || ((_e = this.disableTranslateButton) === null || _e === void 0 ? void 0 : _e.length) > 0, onClick: () => this.onTranslateAll() }, h("yoo-icon", { name: "translate", slot: "start", size: "small" }), translate('TRANSLATE'))), h("span", { class: "placeholder" }), this.showBilingualView && this.hasTranslations && (h("yoo-button", { color: "app-color", size: "medium", shape: "rectangular", onClick: () => this.bilingualViewClicked.emit({ name: null, initialSelectedLanguage: null }) }, h("yoo-icon", { name: "eye", slot: "start", color: "light", size: "small" }), translate('BILINGUAL'))), this.hasTranslations && !this.isTranslator && !this.areTranslationsLocked && (h("yoo-tooltip", { hoverable: true, placement: "bottom", content: translate('TRANSLATENEWFIELDSTOOLTIP'), class: "no-pointer" }, h("yoo-button", { size: "medium", shape: "rectangular", onClick: () => this.onTranslateNewFields() }, h("yoo-icon", { name: "translate", slot: "start", size: "small" }), translate('TRANSLATENEWFIELDS')))), !this.isTranslator && h("yoo-context-menu", { contentButtons: this.exportActions }, h("yoo-button", { color: "light", shape: "square" }, h("yoo-icon", { size: "small", name: "more" })))), ((_f = this.missionDescription) === null || _f === void 0 ? void 0 : _f.lockTranslations) && this.renderTranslationLock(), this.renderTranslationGrid()));
+      ], disabled: this.areTranslationsLocked || ((_b = this.disableTranslateButton) === null || _b === void 0 ? void 0 : _b.length) > 0 })), this.hasTranslations && !this.areTranslationsLocked && (h("yoo-tooltip", { hoverable: true, placement: "bottom", content: translate(this.disableNewLanguageButton ? this.disableNewLanguageButton : 'ADDNEWLANGUAGE'), class: "no-pointer" }, h("yoo-button", { disabled: ((_c = this.disableNewLanguageButton) === null || _c === void 0 ? void 0 : _c.length) > 0, size: "medium", shape: "square", onClick: () => this.onAddNewLanguageClicked() }, h("yoo-icon", { slot: "start", size: "small", name: "plus" })))), !this.hasTranslations && !this.isTranslator && !this.areTranslationsLocked && (this.disableTranslateButton ? h("yoo-tooltip", { hoverable: true, placement: "bottom", content: translate(this.disableTranslateButton), class: "no-pointer" }, h("yoo-button", { size: "medium", shape: "rectangular", disabled: !this.selectedLanguages || this.selectedLanguages.length < 1 || ((_d = this.selectedLanguages) === null || _d === void 0 ? void 0 : _d.includes(this.baseLanguage)) || ((_e = this.disableTranslateButton) === null || _e === void 0 ? void 0 : _e.length) > 0, onClick: () => this.onTranslateAll() }, h("yoo-icon", { name: "translate", slot: "start", size: "small" }), translate('TRANSLATE'))) :
+      h("yoo-button", { size: "medium", shape: "rectangular", disabled: !this.selectedLanguages || this.selectedLanguages.length < 1 || ((_f = this.selectedLanguages) === null || _f === void 0 ? void 0 : _f.includes(this.baseLanguage)) || ((_g = this.disableTranslateButton) === null || _g === void 0 ? void 0 : _g.length) > 0, onClick: () => this.onTranslateAll() }, h("yoo-icon", { name: "translate", slot: "start", size: "small" }), translate('TRANSLATE'))), h("span", { class: "placeholder" }), this.showBilingualView && this.hasTranslations && (h("yoo-button", { color: "app-color", size: "medium", shape: "rectangular", onClick: () => this.bilingualViewClicked.emit({ name: null, initialSelectedLanguage: null }) }, h("yoo-icon", { name: "eye", slot: "start", color: "light", size: "small" }), translate('BILINGUAL'))), this.hasTranslations && !this.isTranslator && !this.areTranslationsLocked && (h("yoo-tooltip", { hoverable: true, placement: "bottom", content: translate('TRANSLATENEWFIELDSTOOLTIP'), class: "no-pointer" }, h("yoo-button", { size: "medium", shape: "rectangular", onClick: () => this.onTranslateNewFields() }, h("yoo-icon", { name: "translate", slot: "start", size: "small" }), translate('TRANSLATENEWFIELDS')))), !this.isTranslator && h("yoo-context-menu", { contentButtons: this.exportActions }, h("yoo-button", { color: "light", shape: "square" }, h("yoo-icon", { size: "small", name: "more" })))), ((_h = this.missionDescription) === null || _h === void 0 ? void 0 : _h.lockTranslations) && this.renderTranslationLock(), this.renderTranslationGrid()));
   }
   static get is() { return "yoo-form-creator-translate"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/form-creator/helpers/index.js

@@ -1,4 +1,4 @@
-import { ALL_MOBILE_FORM_FIELDS, FormCreatorOptions, FormFieldType, ScoringCategory } from '@shared/interfaces';
+import { ALL_MOBILE_FORM_FIELDS, ESwipeCardsMode, FormCreatorOptions, FormFieldType, ScoringCategory } from '@shared/interfaces';
 import { areFormFieldValuesTranslatable, findField, generateUniqueKey, getCustomName, getUUID, isValueALegacyTranslationKey, isValueATranslationKey, showAlert, translate, translateMulti } from '@shared/utils';
 import { cloneDeep, compact, get, isArray, isNil, isString, set } from 'lodash-es';
 import { isAnnotationEmpty } from '../../../utils/helpers/annotations-helpers';
@@ -790,7 +790,7 @@ function getComplexImageValuePath(f) {
   if (f.complexSelectImageValues && f.complexSelectImageValues.length > 0) {
     path = 'complexSelectImageValues';
   }
-  else if (f.complexSwipeCardValues && f.complexSwipeCardValues.length > 0 && (((_a = f.complexSwipeCardValues[0]) === null || _a === void 0 ? void 0 : _a.length) > 0 || ((_b = f.complexSwipeCardValues[1]) === null || _b === void 0 ? void 0 : _b.length) > 0)) {
+  else if (f.complexSwipeCardValues && f.complexSwipeCardValues.length > 0 && (((_a = f.complexSwipeCardValues[0]) === null || _a === void 0 ? void 0 : _a.length) > 0 || ((_b = f.complexSwipeCardValues[1]) === null || _b === void 0 ? void 0 : _b.length) > 0) && f.swipeMode === ESwipeCardsMode.textimage) {
     path = 'complexSwipeCardValues';
   }
   else if (f.complexImageCollectionValues && f.complexImageCollectionValues.length > 0 && (((_c = f.complexImageCollectionValues[0]) === null || _c === void 0 ? void 0 : _c.length) > 0 || ((_d = f.complexImageCollectionValues[1]) === null || _d === void 0 ? void 0 : _d.length) > 0)) {

package/dist/{esm/annotations-helpers-8e21ec07.js → design-system/annotations-helpers-24aac714.js}

@@ -1,4 +1,4 @@
-import { b6 as getUUID } from './index-02044a83.js';
+import { b6 as getUUID } from './index-e7e87cd9.js';
 
 function isAnnotationEmpty(annotation) {
   return !(annotation === null || annotation === void 0 ? void 0 : annotation.text);

package/dist/{esm/button.factory-b405bc09.js → design-system/button.factory-6016803e.js}

@@ -1,4 +1,4 @@
-import { a0 as translateMulti } from './index-02044a83.js';
+import { a0 as translateMulti } from './index-e7e87cd9.js';
 import { h } from './index-2cf5b950.js';
 
 const getButton = (button) => {