@yoobic/yobi 8.3.0 → 8.3.1-10

package/dist/design-system/yoo-form-input.entry.js

@@ -1,18 +1,18 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-becca019.js';
-import { r as resizeObserve } from './index-4bc6078a.js';
+import { r as resizeObserve } from './index-abd62f7b.js';
 import { q as isString, b as isFunction, a as isNumber } from './lodash-f6e59a8e.js';
-import { g as getAppContext } from './common-helpers-fe634d0d.js';
-import { v as validate, i as initNumber, a as setValueAndValidateInput, s as setValidator, c as convertValueForInputType, h as onIconClicked, o as onInputClear, b as onInputBlurred, d as onInputFocused, j as clearFocused } from './form-input-helpers-48580c4a.js';
-import { g as getRenderer } from './grid-renderers-e4eff8fe.js';
-import { A as isWeb, X as isNullOrUndefined, C as debounce, j as isNativeMobile, H as isIOS, ab as enableKeyboardResize, bO as isSafari, k as isAndroid, dy as isHTML, fv as extractTextFromStringHTML, ar as copyToClipboard, b3 as showToast, t as translate, db as isAnimationsDisabled } from './overlays-ccc6076c.js';
-import './index-e7f48bcb.js';
-import './incentive-helpers-95e6321a.js';
-import './missions-helpers-efcd28d8.js';
-import './form-helpers-a8dddf68.js';
+import { g as getAppContext } from './common-helpers-4b9004c1.js';
+import { v as validate, i as initNumber, a as setValueAndValidateInput, s as setValidator, c as convertValueForInputType, h as onIconClicked, o as onInputClear, b as onInputBlurred, d as onInputFocused, j as clearFocused } from './form-input-helpers-76052552.js';
+import { g as getRenderer } from './grid-renderers-6c6d822c.js';
+import { A as isWeb, X as isNullOrUndefined, C as debounce, j as isNativeMobile, H as isIOS, ab as enableKeyboardResize, bP as isSafari, k as isAndroid, dz as isHTML, fv as extractTextFromStringHTML, as as copyToClipboard, b4 as showToast, t as translate, dc as isAnimationsDisabled } from './overlays-d9ef0a1c.js';
+import './index-eec8505b.js';
+import './incentive-helpers-90e3a6d4.js';
+import './missions-helpers-eece55e8.js';
+import './form-helpers-ecbb6379.js';
 import './geolocation-helpers-29d4c5f5.js';
 import './_commonjsHelpers-f4d11124.js';
 
-const formInputCss = ":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);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%;direction:ltr;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{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{display:none;min-height:0.9375rem;padding-top:var(--spacing-02, 0.125rem);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){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(--spacing-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(--spacing-04, 0.25rem) var(--spacing-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(.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:var(--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{padding-left:0}:host(.menu) input::-webkit-input-placeholder{color:var(--stable, #adadad);opacity:1}:host(.menu) input::-moz-placeholder{color:var(--stable, #adadad);opacity:1}:host(.menu) input:-ms-input-placeholder{color:var(--stable, #adadad);opacity:1}:host(.menu) input::-ms-input-placeholder{color:var(--stable, #adadad);opacity:1}:host(.menu) input::placeholder{color:var(--stable, #adadad);opacity:1}:host(.menu) input yoo-icon{fill:var(--stable, #adadad)}:host(.menu) .icon-prefix yoo-icon{fill:var(--stable, #adadad)}:host(.menu) .input-container{background:var(--stable-light, #f1f1f1);border:none}:host(.side-menu.large) .input-container{width:100%;height:var(--spacing-32, 2rem);margin:0;border-radius:var(--spacing-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=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([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:calc(100% - var(--spacing-16, 1rem));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{display:block}:host([format=contenteditable]) .input-container [contenteditable]{z-index:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;height:calc(var(--input-font-size) + var(--spacing-16, 1rem));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)}:host([format=contenteditable]) .input-container [contenteditable]:focus{outline:none}: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 .actions:active{display:-ms-flexbox;display:flex}:host([format=contenteditable]) .input-container.has-value{color:var(--dark, #000000)}:host([format=contenteditable]) .input-container.has-value .placeholder{color:transparent}:host([format=contenteditable]) .input-container.focused{background-color:var(--light, #ffffff)}:host([format=contenteditable]) .input-container.focused .placeholder yoo-icon{display:none}:host([format=contenteditable]) .input-container.focused [contenteditable]{border:var(--border-width-01, 0.0625rem) solid var(--dark, #000000)}:host([format=contenteditable]) .input-container.focused .actions{display:-ms-flexbox;display:flex}: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(.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 = ":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);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%;direction:ltr;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{display:none;min-height:0.9375rem;padding-top:var(--spacing-02, 0.125rem);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){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(--spacing-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(--spacing-04, 0.25rem) var(--spacing-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(.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:var(--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{padding-left:0}: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(--spacing-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=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([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:calc(100% - var(--spacing-16, 1rem));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{display:block}:host([format=contenteditable]) .input-container [contenteditable]{z-index:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;height:calc(var(--input-font-size) + var(--spacing-16, 1rem));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)}:host([format=contenteditable]) .input-container [contenteditable]:focus{outline:none}: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 .actions:active{display:-ms-flexbox;display:flex}:host([format=contenteditable]) .input-container.has-value{color:var(--dark, #000000)}:host([format=contenteditable]) .input-container.has-value .placeholder{color:transparent}:host([format=contenteditable]) .input-container.focused{background-color:var(--light, #ffffff)}:host([format=contenteditable]) .input-container.focused .placeholder yoo-icon{display:none}:host([format=contenteditable]) .input-container.focused [contenteditable]{border:var(--border-width-01, 0.0625rem) solid var(--dark, #000000)}:host([format=contenteditable]) .input-container.focused .actions{display:-ms-flexbox;display:flex}: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(.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) {
@@ -220,7 +220,7 @@ const YooFormInputComponent = class {
         el.value = this.localValue + '.';
       }
       if (!isNumberInput || el.value || ev.data !== '-') {
-        if (!(isNumberInput && (el.value.length === 1 && el.value[0] === '-'))) {
+        if (!(isNumberInput && el.value.length === 1 && el.value[0] === '-')) {
           if (isNumberInput && ['e', '+'].includes(ev.data)) {
             el.value = this.value;
           }
@@ -404,8 +404,8 @@ const YooFormInputComponent = class {
     }
     return [
       this.copyToClipboard && h("yoo-icon", { onClick: () => this.onCopyToClipboard(copyText), class: "float-left", name: "duplicate", size: this.getIconSize() }),
-      this.type !== 'email' && h("p", { class: { 'truncate': this.copyToClipboard }, innerHTML: innerHTML, onClick: () => this.copyToClipboard && this.onCopyToClipboard(copyText) }),
-      this.type === 'email' && h("a", { href: `mailto:${value}`, class: { 'truncate': this.copyToClipboard }, innerHTML: innerHTML, onClick: () => this.copyToClipboard && this.onCopyToClipboard(copyText) })
+      this.type !== 'email' && h("p", { class: { truncate: this.copyToClipboard }, innerHTML: innerHTML, onClick: () => this.copyToClipboard && this.onCopyToClipboard(copyText) }),
+      this.type === 'email' && (h("a", { href: `mailto:${value}`, class: { truncate: this.copyToClipboard }, innerHTML: innerHTML, onClick: () => this.copyToClipboard && this.onCopyToClipboard(copyText) }))
     ];
   }
   renderMaxCharacterCounter() {
@@ -422,7 +422,7 @@ const YooFormInputComponent = class {
           placeholderlabel: this.placeholdertolabel,
           valid: this.uiValidation.valid && this.validity,
           invalid: this.uiValidation.invalid && this.validity === false && !this.inputReloaded
-        } }, this.finalIconPrefix && this.hasIconPrefix && (h("div", { class: "icon-prefix", onClick: () => (this.inputElement && this.inputElement.focus ? this.inputElement.focus() : null) }, h("yoo-icon", { name: this.finalIconPrefix, size: this.getIconSize() }))), h("input", { type: this.inputType, name: this.name, tabindex: this.inputTabIndex, ref: (el) => (this.inputElement = el), autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, autoComplete: ['username', 'password'].includes(this.name) ? this.name : undefined, inputmode: this.inputmode ? this.inputmode : undefined, placeholder: !this.placeholdertolabel && this.internalPlaceholder ? translate(this.internalPlaceholder) : '', required: this.required, onBlur: (ev) => onInputBlurred(ev, this, '.input-container', this.type, this.uiValidation), onChange: (ev) => this.fireInputChangeEvent ? this.onInputChanged(ev) : ev === null || ev === void 0 ? void 0 : ev.stopPropagation(), onInput: (ev) => this.onInputChanged(ev), onFocus: () => onInputFocused(this, '.input-container'), onKeyDown: (ev) => this.onKeyPress(ev), onWheel: this.onWheel, min: this.min, max: this.max, pattern: this.getPattern(), step: this.step, class: {
+        } }, this.finalIconPrefix && this.hasIconPrefix && (h("div", { class: "icon-prefix", onClick: () => (this.inputElement && this.inputElement.focus ? this.inputElement.focus() : null) }, h("yoo-icon", { name: this.finalIconPrefix, size: this.getIconSize(), color: this.iconPrefixColor }))), h("input", { type: this.inputType, name: this.name, tabindex: this.inputTabIndex, ref: (el) => (this.inputElement = el), autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, autoComplete: ['username', 'password'].includes(this.name) ? this.name : undefined, inputmode: this.inputmode ? this.inputmode : undefined, placeholder: !this.placeholdertolabel && this.internalPlaceholder ? translate(this.internalPlaceholder) : '', required: this.required, onBlur: (ev) => onInputBlurred(ev, this, '.input-container', this.type, this.uiValidation), onChange: (ev) => (this.fireInputChangeEvent ? this.onInputChanged(ev) : ev === null || ev === void 0 ? void 0 : ev.stopPropagation()), onInput: (ev) => this.onInputChanged(ev), onFocus: () => onInputFocused(this, '.input-container'), onKeyDown: (ev) => this.onKeyPress(ev), onWheel: this.onWheel, min: this.min, max: this.max, pattern: this.getPattern(), step: this.step, class: {
           last: !((hasValue && this.clearable) || (this.type === 'password' && this.showPasswordToggle) || (this.uiValidation.invalid && this.validity === false)),
           'hide-value': (_a = this.checkboxParams) === null || _a === void 0 ? void 0 : _a.value,
           'has-icon-prefix': this.finalIconPrefix && this.hasIconPrefix
@@ -431,7 +431,7 @@ const YooFormInputComponent = class {
         this.inlineActions.map((action) => (h("div", { class: "icon-suffix", onClick: () => action.handler }, h("yoo-icon", { name: action.icon, color: action.iconColor }))))),
       this.checkboxParams && (h("yoo-form-checkbox", { class: this.checkboxParams.class, header: this.checkboxParams.header, help: this.checkboxParams.help, size: this.checkboxParams.size, value: this.checkboxParams.value, onInputChanged: this.onCheckboxChanged })),
       this.tooltip && (h("div", { class: { 'icon-suffix-focus last icon-close': true } }, h("yoo-tooltip", { content: this.tooltip }, h("yoo-icon", { size: "medium", name: "help" })))),
-      this.uiValidation.invalid && h("div", { class: { 'invalid-message': true, invalid: (this.validity === false && !this.inputReloaded) } }, translate(invalidMessageKey))
+      this.uiValidation.invalid && h("div", { class: { 'invalid-message': true, invalid: this.validity === false && !this.inputReloaded } }, translate(invalidMessageKey))
     ];
   }
   contentEditableInputBlurred(ev) {
@@ -482,7 +482,7 @@ const YooFormInputComponent = class {
     return (h("section", { class: "actions", ref: (el) => (this.contentEditableActionsElement = el) }, this.renderAction('cancel'), this.renderAction('confirm')));
   }
   renderAction(type) {
-    return h("div", { class: type }, h("yoo-button", { disabled: !this.modified || this.disabled, size: this.size, customColor: "stable-alt", onClick: () => this[type]() }, h("yoo-icon", { size: this.getIconSize(), name: type === 'cancel' ? 'close' : 'tick' })));
+    return (h("div", { class: type }, h("yoo-button", { disabled: !this.modified || this.disabled, size: this.size, customColor: "stable-alt", onClick: () => this[type]() }, h("yoo-icon", { size: this.getIconSize(), name: type === 'cancel' ? 'close' : 'tick' }))));
   }
   render() {
     return (h(Host, { class: {

package/dist/design-system/yoo-form-json.entry.js

@@ -1,12 +1,12 @@
 import { r as registerInstance, i as createEvent, h } from './index-becca019.js';
-import './index-4bc6078a.js';
+import './index-abd62f7b.js';
 import { a as createCommonjsModule, c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-f4d11124.js';
-import { g as getJSONHighlighted } from './form-helpers-a8dddf68.js';
-import { s as setValidator, a as setValueAndValidateInput } from './form-input-helpers-48580c4a.js';
-import { t as translate } from './overlays-ccc6076c.js';
+import { g as getJSONHighlighted } from './form-helpers-ecbb6379.js';
+import { s as setValidator, a as setValueAndValidateInput } from './form-input-helpers-76052552.js';
+import { t as translate } from './overlays-d9ef0a1c.js';
 import './lodash-f6e59a8e.js';
-import './index-e7f48bcb.js';
-import './common-helpers-fe634d0d.js';
+import './index-eec8505b.js';
+import './common-helpers-4b9004c1.js';
 
 var clipboard = createCommonjsModule(function (module, exports) {
 /*!

package/dist/design-system/yoo-form-location.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, i as createEvent, h, g as getElement } from './index-becca019.js';
-import './index-4bc6078a.js';
-import { a as setValueAndValidateInput, s as setValidator } from './form-input-helpers-48580c4a.js';
-import { A as isWeb, t as translate } from './overlays-ccc6076c.js';
+import './index-abd62f7b.js';
+import { a as setValueAndValidateInput, s as setValidator } from './form-input-helpers-76052552.js';
+import { A as isWeb, t as translate } from './overlays-d9ef0a1c.js';
 import './lodash-f6e59a8e.js';
-import './index-e7f48bcb.js';
-import './common-helpers-fe634d0d.js';
+import './index-eec8505b.js';
+import './common-helpers-4b9004c1.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formLocationCss = ":host .outer-container .map-container,:host .readonly .map-container{position:relative;height:11.25rem;margin-top:var(--spacing-08, 0.5rem);overflow:hidden;background:var(--stable, #adadad);border-radius:var(--border-radius-04, 0.25rem)}:host .outer-container yoo-form-toggle,:host .readonly yoo-form-toggle{display:block;margin-top:var(--spacing-08, 0.5rem)}:host(.history) .readonly{border:none !important}";

package/dist/design-system/yoo-form-missing-word.entry.js

@@ -1,12 +1,12 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-becca019.js';
-import './index-4bc6078a.js';
+import './index-abd62f7b.js';
 import { A as isEqual } from './lodash-f6e59a8e.js';
-import { i as initTags } from './index-8d92d803.js';
-import { s as showWarningAlert, c as checkArray, h as hasDuplicates, b as getDuplicatedValue } from './draggable-tags-helpers-882cf829.js';
-import { a as setValueAndValidateInput } from './form-input-helpers-48580c4a.js';
-import { bB as formatTranslation, Z as translateMulti, bd as isValueATranslationKey, bC as MAX_TAGS_CHARACTERS, t as translate } from './overlays-ccc6076c.js';
-import './index-e7f48bcb.js';
-import './common-helpers-fe634d0d.js';
+import { i as initTags } from './index-054d7a9d.js';
+import { s as showWarningAlert, c as checkArray, h as hasDuplicates, b as getDuplicatedValue } from './draggable-tags-helpers-981d15a0.js';
+import { a as setValueAndValidateInput } from './form-input-helpers-76052552.js';
+import { bC as formatTranslation, Z as translateMulti, be as isValueATranslationKey, bD as MAX_TAGS_CHARACTERS, t as translate } from './overlays-d9ef0a1c.js';
+import './index-eec8505b.js';
+import './common-helpers-4b9004c1.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formMissingWordCss = ".accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}.info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}.wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host{display:block;padding:var(--spacing-04, 0.25rem);overflow:visible;border:0.0625rem solid transparent}:host .instructions{margin:var(--spacing-32, 2rem) 0 var(--spacing-08, 0.5rem);color:var(--stable, #adadad);font-size:var(--font-size-18, 1.125rem)}:host yoo-banner{height:0}:host .dropzone#zone-tags{min-height:5rem;margin:calc(var(--spacing-08, 0.5rem) / -2) calc(var(--spacing-08, 0.5rem) / -2)}:host .dropzone#zone-tags>*{margin:calc(var(--spacing-08, 0.5rem) / 2) calc(var(--spacing-08, 0.5rem) / 2)}:host .dropzone:not(#zone-tags){height:2rem;margin:0 var(--spacing-04, 0.25rem);text-align:center;border-bottom-width:var(--border-width-01, 0.0625rem);border-bottom-style:solid;-webkit-transition:background-color 250ms ease-in-out;transition:background-color 250ms ease-in-out}:host .dropzone:not(#zone-tags).has-tag{margin-top:var(--spacing-04, 0.25rem);padding:var(--spacing-04, 0.25rem);border-bottom-color:transparent}:host .dropzone:not(#zone-tags):not(.has-tag){width:5rem;padding-right:var(--spacing-02, 0.125rem);padding-left:var(--spacing-02, 0.125rem);border-bottom-color:var(--app-color, #5a30f4);-webkit-transform:translateY(0.75rem);transform:translateY(0.75rem)}:host .dropzone:not(#zone-tags).hit{background:var(--stable-alt-40, rgba(208, 208, 208, 0.4))}:host .dropzone:not(#zone-tags) yoo-tag{position:relative;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}:host .dropzone-container{display:-ms-inline-flexbox;display:inline-flex}:host section.paragraph{line-height:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.playing){background-color:var(--stable-light-40, rgba(241, 241, 241, 0.4));border:0.0625rem solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-08, 0.5rem);-webkit-transition:background-color 0.5s ease-in-out, border 0.5s ease-in-out;transition:background-color 0.5s ease-in-out, border 0.5s ease-in-out}:host([readonly]) .dropzone:not(#zone-tags){margin-right:0;margin-left:0}:host([animated]) .dropzone-container{-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transition:all 500ms ease-in-out;transition:all 500ms ease-in-out}:host([animated]) .dropzone-container[hidden]{-webkit-transform:scale(0);transform:scale(0)}";

package/dist/design-system/yoo-form-missionfield.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-becca019.js';
-import './index-4bc6078a.js';
+import './index-abd62f7b.js';
 import { A as isEqual } from './lodash-f6e59a8e.js';
-import { g as getAppContext } from './common-helpers-fe634d0d.js';
-import { s as setValidator, a as setValueAndValidateInput } from './form-input-helpers-48580c4a.js';
-import { bD as filterListByText } from './overlays-ccc6076c.js';
-import './index-e7f48bcb.js';
+import { g as getAppContext } from './common-helpers-4b9004c1.js';
+import { s as setValidator, a as setValueAndValidateInput } from './form-input-helpers-76052552.js';
+import { bE as filterListByText } from './overlays-d9ef0a1c.js';
+import './index-eec8505b.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formMissionfieldCss = ":host .container .spacer{width:100%;height:var(--spacing-16, 1rem)}:host .readonly .title,:host .readonly .field,:host .readonly .score{margin-right:var(--spacing-16, 1rem)}:host(.inline:not(.mobile)) .container{display:-ms-flexbox;display:flex}:host(.inline:not(.mobile)) .container yoo-form-autocomplete{width:12.5rem}:host(.inline:not(.mobile)) .container .spacer{min-width:var(--spacing-16, 1rem);max-width:var(--spacing-16, 1rem)}:host(.inline.mobile) .container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.inline.mobile) .container yoo-form-autocomplete{width:100%}:host(.inline.mobile) .container .spacer{min-width:var(--spacing-16, 1rem);max-width:var(--spacing-16, 1rem)}";

package/dist/design-system/yoo-form-multi-input.entry.js

@@ -1,11 +1,11 @@
 import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-becca019.js';
-import { c as FormFieldType } from './index-e7f48bcb.js';
-import './index-4bc6078a.js';
+import { c as FormFieldType } from './index-eec8505b.js';
+import './index-abd62f7b.js';
 import { A as isEqual, q as isString } from './lodash-f6e59a8e.js';
 import { S as Sortable } from './sortable.esm-f788d1ca.js';
-import { g as getAppContext } from './common-helpers-fe634d0d.js';
-import { s as setValidator, a as setValueAndValidateInput } from './form-input-helpers-48580c4a.js';
-import { aO as getUUID, A as isWeb, t as translate, d9 as MODAL_BASE_ZINDEX, bd as isValueATranslationKey } from './overlays-ccc6076c.js';
+import { g as getAppContext } from './common-helpers-4b9004c1.js';
+import { s as setValidator, a as setValueAndValidateInput } from './form-input-helpers-76052552.js';
+import { aP as getUUID, A as isWeb, t as translate, da as MODAL_BASE_ZINDEX, be as isValueATranslationKey } from './overlays-d9ef0a1c.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formMultiInputCss = ":host .row{display:-ms-flexbox;display:flex}:host .row.grid{display:grid;grid-template-columns:49% 49%}:host .row .column{-ms-flex:1;flex:1;max-width:100%}:host .row .column:first-child .cell,:host .row .column:first-child .button-container{display:-ms-flexbox;display:flex;padding-left:0}:host .row .column:last-child .cell,:host .row .column:last-child .button-container{display:-ms-flexbox;display:flex;padding-right:0}:host .row .column .cell,:host .row .column .button-container{padding-right:var(--spacing-16, 1rem);padding-left:var(--spacing-16, 1rem)}:host .row .column .cell{position:relative;display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap;-ms-flex-align:end;align-items:flex-end;padding-top:0;padding-bottom:var(--spacing-08, 0.5rem)}:host .row .column .cell .input-content{display:-ms-flexbox;display:flex}:host .row .column .cell .input-content.mobile{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end}:host .row .column .cell .input-content yoo-form-input{-ms-flex:1;flex:1}:host .row .column .cell .input-content .remove-button{height:-webkit-min-content;height:-moz-min-content;height:min-content}:host .row .column .cell .image-container{display:-ms-flexbox;display:flex}:host .row .column .cell .image-container:not(.no-padding){padding-right:var(--spacing-16, 1rem)}:host .row .column .cell yoo-form-input-container{-ms-flex:1;flex:1;min-width:6rem;overflow:hidden;white-space:nowrap}:host .row .column .cell yoo-form-input-container yoo-form-text-editor{white-space:initial}:host .row .column .cell .field-translation{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-top:0.3rem;color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem);display:-ms-flexbox;display:flex;white-space:normal}:host .row .column .cell .field-translation yoo-icon{margin-right:0.3rem}:host .row .column .cell .field-translation *{display:inline-block}:host .row .column .cell .delete-cell{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin-left:var(--spacing-08, 0.5rem)}:host .row .column .cell .link-web{position:absolute;bottom:1.2rem;left:-0.5rem;visibility:hidden}:host .row .column .cell .link-visible{visibility:visible !important}:host .row .column .button-container{display:-ms-flexbox;display:flex}:host .row .column .button-container yoo-button{-ms-flex:1;flex:1;padding-left:var(--spacing-08, 0.5rem)}:host .row .column .button-container yoo-button:first-child{padding-left:0}:host .row .column.column-title yoo-form-input.title-input{padding:var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem) 0}:host .row .column yoo-button{padding-left:var(--spacing-08, 0.5rem)}:host .row.sortable-chosen:not(.sortable-ghost){padding-right:var(--spacing-08, 0.5rem);padding-left:var(--spacing-08, 0.5rem);background-color:var(--stable-light, #f1f1f1)}:host .row.sortable-chosen .column .button-container{display:none}:host(.mobile) .row{-ms-flex-direction:column;flex-direction:column}:host(.mobile) .row .column .cell,:host(.mobile) .row .column .button-container{-ms-flex-pack:end;justify-content:flex-end;padding-top:var(--spacing-08, 0.5rem);padding-right:0;padding-left:0}:host(.mobile) .row .column .cell{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}:host(.mobile) .row .column .cell .link-mobile{margin-right:var(--spacing-16, 1rem);padding:var(--spacing-08, 0.5rem);background-color:var(--app-color-10, rgba(90, 48, 244, 0.1));border-radius:50%;visibility:hidden}:host(.mobile) .row .column .cell .remove-button{margin-top:var(--spacing-16, 1rem)}:host(.reveal) .link-web{top:2.5rem;bottom:unset}:host(.full-width) yoo-form-text-editor,:host(.full-width) yoo-form-text-area{width:100%}:host(.dragging) .row .column .button-container{display:none}";

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, i as createEvent, h, g as getElement } from './index-becca019.js';
-import './index-4bc6078a.js';
-import { dS as safeScrollIntoView, t as translate, p as closeModal, A as isWeb } from './overlays-ccc6076c.js';
+import './index-abd62f7b.js';
+import { dS as safeScrollIntoView, t as translate, p as closeModal, A as isWeb } from './overlays-d9ef0a1c.js';
 import './lodash-f6e59a8e.js';
-import './index-e7f48bcb.js';
+import './index-eec8505b.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formNumberPickerDialogCss = ":host .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%}:host .outer-container .content{position:relative;height:calc(100% - 44px);background-color:var(--light, #ffffff)}:host .outer-container .content yoo-ion-scroll{top:auto;z-index:20008;height:100%;-webkit-transition:0.3s;transition:0.3s}:host .outer-container .item-selected{color:var(--app-color, #5a30f4)}:host .center{padding-top:0.5rem;text-align:center}:host .lastElement{padding-bottom:5rem}:host .footer-background{position:absolute;top:auto;right:0;bottom:0;left:0;z-index:1}:host .footer-background.bottom{height:2.875rem;background:var(--light, #ffffff);border:var(--border);border-radius:var(--border-radius-01, 0.0625rem)}:host .footer-background.middle{bottom:2.875rem;height:1.4375rem}:host .footer-background.middle.web{height:2.875rem}:host .footer-background.top{top:0;bottom:4.3125rem;height:1.4375rem}:host .footer-background.top.web{bottom:5.75rem;height:2.875rem}";

package/dist/design-system/yoo-form-number-picker.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, i as createEvent, h, g as getElement } from './index-becca019.js';
-import { K as getCssColor, A as isWeb, z as showModal, j as isNativeMobile, aJ as Keyboard, t as translate } from './overlays-ccc6076c.js';
-import './index-4bc6078a.js';
+import { K as getCssColor, A as isWeb, z as showModal, j as isNativeMobile, aK as Keyboard, t as translate } from './overlays-d9ef0a1c.js';
+import './index-abd62f7b.js';
 import { O as isFinite, a6 as range } from './lodash-f6e59a8e.js';
-import './index-e7f48bcb.js';
+import './index-eec8505b.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formNumberPickerCss = ":host .outer-container{display:-ms-flexbox;display:flex;height:100%}:host .outer-container.readonly{padding:0.5rem 0.5rem 0 0}:host .outer-container yoo-form-input{--input-background-color:transparent;width:100%;height:100%}:host([use-buttons]) .outer-container{margin:0 auto;color:var(--light, #ffffff);border-radius:var(--border-radius-04, 0.25rem)}:host([use-buttons]) .outer-container yoo-button.left{--border-radius-top-right:0;--border-radius-bottom-right:0}:host([use-buttons]) .outer-container yoo-button.right{--border-radius-top-left:0;--border-radius-bottom-left:0}:host([use-buttons]) .outer-container .input-container{width:100%;height:100%}:host([use-buttons]) .outer-container .input-invalid{border:var(--border-width-01, 0.0625rem) solid var(--danger, #d44333)}:host([use-buttons]) .invalid-container{text-align:end}:host([use-buttons]) .invalid-container .message{display:none}:host([use-buttons]) .invalid-container .invalid-message{display:inline-block;color:var(--danger, #d44333);font-size:var(--font-size-12, 0.75rem);text-align:end}:host([size=large][use-buttons]) .outer-container{width:12.5rem;height:3rem;border-radius:var(--border-radius-08, 0.5rem)}:host([size=large][use-buttons]) .outer-container .input-container.input-invalid{max-height:2.875rem}:host([size=large][use-buttons]) .outer-container yoo-button{--side-padding:0 var(--spacing-24, 1.5rem)}:host([size=large][use-buttons]) .outer-container yoo-button.right{--border-radius-top-right:var(--border-radius-08, 0.5rem);--border-radius-bottom-right:var(--border-radius-08, 0.5rem)}:host([size=large][use-buttons]) .outer-container yoo-button.left{--border-radius-top-left:var(--border-radius-08, 0.5rem);--border-radius-bottom-left:var(--border-radius-08, 0.5rem)}:host([size=medium][use-buttons]) .outer-container{width:7rem;height:2rem}:host([size=medium][use-buttons]) .outer-container .input-container.input-invalid{max-height:1.875rem}:host([size=small][use-buttons]) .outer-container{width:6rem;height:1.5rem}:host([size=small][use-buttons]) .outer-container .input-container.input-invalid{max-height:1.375rem}:host([size=small][use-buttons]) .outer-container yoo-form-input{--input-font-size:var(--font-size-12, 0.75rem)}:host([use-buttons][type=primary]) .outer-container{border:solid var(--app-color, #5a30f4) var(--border-width-01, 0.0625rem)}:host([use-buttons][type=primary]) .outer-container .input-container{background-color:var(--app-color, #5a30f4)}:host([use-buttons][type=primary]) .outer-container .input-container:not(.input-invalid){border-right:solid var(--light-20, rgba(255, 255, 255, 0.2)) var(--border-width-01, 0.0625rem);border-left:solid var(--light-20, rgba(255, 255, 255, 0.2)) var(--border-width-01, 0.0625rem)}:host([use-buttons][type=secondary]) .outer-container{border:solid var(--stable-alt, #d0d0d0) var(--border-width-01, 0.0625rem)}:host([use-buttons][type=secondary]) .outer-container .input-container{background-color:var(--light, #ffffff)}:host([use-buttons][type=secondary]) .outer-container .input-container:not(.input-invalid){border-right:solid var(--stable-10, rgba(173, 173, 173, 0.1)) var(--border-width-01, 0.0625rem);border-left:solid var(--stable-10, rgba(173, 173, 173, 0.1)) var(--border-width-01, 0.0625rem)}:host([use-buttons][disabled]) .outer-container{border:solid var(--stable-light, #f1f1f1) var(--border-width-01, 0.0625rem)}:host([use-buttons][disabled]) .outer-container .input-container{background-color:transparent}:host([use-buttons][readonly]) .outer-container{height:auto;margin:0;border:none}";

package/dist/design-system/yoo-form-opening-hours.entry.js

@@ -1,7 +1,7 @@
 import { h, r as registerInstance, i as createEvent, e as Host } from './index-becca019.js';
-import { y as allDayPeriod, z as periods, D as allDayPeriods, H as period, J as allDaysValue, K as defaultsOpeningHours } from './index-e7f48bcb.js';
-import './index-4bc6078a.js';
-import { t as translate } from './overlays-ccc6076c.js';
+import { y as allDayPeriod, z as periods, D as allDayPeriods, H as period, J as allDaysValue, K as defaultsOpeningHours } from './index-eec8505b.js';
+import './index-abd62f7b.js';
+import { t as translate } from './overlays-d9ef0a1c.js';
 import './lodash-f6e59a8e.js';
 import './_commonjsHelpers-f4d11124.js';
 

package/dist/design-system/yoo-form-permissions.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-becca019.js';
-import { L as FormPermissionsRole } from './index-e7f48bcb.js';
-import './index-4bc6078a.js';
-import { g as getAppContext } from './common-helpers-fe634d0d.js';
-import { C as debounce, t as translate } from './overlays-ccc6076c.js';
+import { L as FormPermissionsRole } from './index-eec8505b.js';
+import './index-abd62f7b.js';
+import { g as getAppContext } from './common-helpers-4b9004c1.js';
+import { C as debounce, t as translate } from './overlays-d9ef0a1c.js';
 import './lodash-f6e59a8e.js';
 import './_commonjsHelpers-f4d11124.js';
 

package/dist/design-system/yoo-form-phone-number.entry.js

@@ -1,9 +1,9 @@
 import { h, r as registerInstance, i as createEvent, e as Host, g as getElement } from './index-becca019.js';
-import './index-4bc6078a.js';
+import './index-abd62f7b.js';
 import { g as getGeolocation } from './geolocation-helpers-29d4c5f5.js';
-import { t as translate } from './overlays-ccc6076c.js';
+import { t as translate } from './overlays-d9ef0a1c.js';
 import './lodash-f6e59a8e.js';
-import './index-e7f48bcb.js';
+import './index-eec8505b.js';
 import './_commonjsHelpers-f4d11124.js';
 
 // This file is a workaround for a bug in web browsers' "native"
@@ -4163,17 +4163,17 @@ var AsYouTypeState = /*#__PURE__*/function () {
     key: "setCallingCode",
     value: function setCallingCode(callingCode) {
       this.callingCode = callingCode;
-      return this.onCallingCodeChange(this.country, callingCode);
+      this.onCallingCodeChange(callingCode, this.country);
     }
   }, {
     key: "startInternationalNumber",
-    value: function startInternationalNumber() {
+    value: function startInternationalNumber(country, callingCode) {
       // Prepend the `+` to parsed input.
       this.international = true; // If a default country was set then reset it
       // because an explicitly international phone
       // number is being entered.
 
-      this.initCountryAndCallingCode();
+      this.initCountryAndCallingCode(country, callingCode);
     }
   }, {
     key: "appendDigits",
@@ -6033,7 +6033,10 @@ var AsYouTypeParser = /*#__PURE__*/function () {
         state.update({
           IDDPrefix: digits.slice(0, digits.length - numberWithoutIDD.length)
         });
-        this.startInternationalNumber(state);
+        this.startInternationalNumber(state, {
+          country: undefined,
+          callingCode: undefined
+        });
         return true;
       }
     }
@@ -6049,15 +6052,20 @@ var AsYouTypeParser = /*#__PURE__*/function () {
           state.update({
             missingPlus: true
           });
-          this.startInternationalNumber(state);
+          this.startInternationalNumber(state, {
+            country: state.country,
+            callingCode: newCallingCode
+          });
           return true;
         }
       }
     }
   }, {
     key: "startInternationalNumber",
-    value: function startInternationalNumber(state) {
-      state.startInternationalNumber(); // If a national (significant) number has been extracted before, reset it.
+    value: function startInternationalNumber(state, _ref3) {
+      var country = _ref3.country,
+          callingCode = _ref3.callingCode;
+      state.startInternationalNumber(country, callingCode); // If a national (significant) number has been extracted before, reset it.
 
       if (state.nationalSignificantNumber) {
         state.resetNationalSignificantNumber();
@@ -6284,7 +6292,7 @@ var AsYouType$1 = /*#__PURE__*/function () {
           // with the old versions.
           _this.country = country;
         },
-        onCallingCodeChange: function onCallingCodeChange(country, callingCode) {
+        onCallingCodeChange: function onCallingCodeChange(callingCode, country) {
           _this.metadata.selectNumberingPlan(country, callingCode);
 
           _this.formatter.reset(_this.metadata.numberingPlan, _this.state);

package/dist/design-system/yoo-form-plan-assign.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, i as createEvent, h } from './index-becca019.js';
-import './index-4bc6078a.js';
-import { s as setValidator, a as setValueAndValidateInput } from './form-input-helpers-48580c4a.js';
-import { t as translate } from './overlays-ccc6076c.js';
+import './index-abd62f7b.js';
+import { s as setValidator, a as setValueAndValidateInput } from './form-input-helpers-76052552.js';
+import { t as translate } from './overlays-d9ef0a1c.js';
 import './lodash-f6e59a8e.js';
-import './index-e7f48bcb.js';
-import './common-helpers-fe634d0d.js';
+import './index-eec8505b.js';
+import './common-helpers-4b9004c1.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formPlanAssignCss = ":host .margin-bottom{display:block;margin-bottom:1rem}";

package/dist/design-system/yoo-form-plan.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, i as createEvent, f as forceUpdate, h, g as getElement } from './index-becca019.js';
-import './index-4bc6078a.js';
+import './index-abd62f7b.js';
 import { C as get } from './lodash-f6e59a8e.js';
-import { a as setValueAndValidateInput, s as setValidator } from './form-input-helpers-48580c4a.js';
-import { C as debounce, Q as findParent, dT as getPermissions, P as getAsyncExtraData, dU as isPlanInFuture, t as translate } from './overlays-ccc6076c.js';
-import './index-e7f48bcb.js';
-import './common-helpers-fe634d0d.js';
+import { a as setValueAndValidateInput, s as setValidator } from './form-input-helpers-76052552.js';
+import { C as debounce, Q as findParent, dT as getPermissions, P as getAsyncExtraData, dU as isPlanInFuture, t as translate } from './overlays-d9ef0a1c.js';
+import './index-eec8505b.js';
+import './common-helpers-4b9004c1.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formPlanCss = ":host .outer-container yoo-button{margin:var(--spacing-16, 1rem) 0}";

package/dist/design-system/yoo-form-pricecheck.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, i as createEvent, f as forceUpdate, h, g as getElement } from './index-becca019.js';
-import { c as FormFieldType } from './index-e7f48bcb.js';
-import './index-4bc6078a.js';
+import { c as FormFieldType } from './index-eec8505b.js';
+import './index-abd62f7b.js';
 import { k as keys, v as isObject } from './lodash-f6e59a8e.js';
-import { s as setValidator, a as setValueAndValidateInput } from './form-input-helpers-48580c4a.js';
-import { ae as showAlert, t as translate, a3 as getSession, bE as toSeconds, bF as dateDiff, Q as findParent, z as showModal, p as closeModal } from './overlays-ccc6076c.js';
-import './common-helpers-fe634d0d.js';
+import { s as setValidator, a as setValueAndValidateInput } from './form-input-helpers-76052552.js';
+import { ae as showAlert, t as translate, a3 as getSession, bF as toSeconds, bG as dateDiff, Q as findParent, z as showModal, p as closeModal } from './overlays-d9ef0a1c.js';
+import './common-helpers-4b9004c1.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formPricecheckCss = ":host .outer-container .barcode-container,:host .readonly .barcode-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:98px;height:98px;margin-bottom:1rem;border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:0.5rem;cursor:pointer}:host .outer-container .barcode-container .required,:host .readonly .barcode-container .required{position:absolute;top:auto;right:auto;bottom:auto;left:0.625rem;color:var(--app-color, #5a30f4);font-size:var(--font-size-16, 1rem)}:host .outer-container .products>.title,:host .readonly .products>.title{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin-top:0.5rem;color:var(--dark, #000000);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem);line-height:1.5;text-align:left;text-transform:uppercase}:host .outer-container .products .subtitle,:host .readonly .products .subtitle{margin-top:0.125rem;color:var(--text-color, #807f83);font-size:var(--font-size-12, 0.75rem)}:host .outer-container .products .remove,:host .outer-container .products .edit,:host .readonly .products .remove,:host .readonly .products .edit{display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:40px;text-align:center}:host .outer-container .products .entity,:host .readonly .products .entity{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .outer-container .products .toolbar,:host .readonly .products .toolbar{z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0 0.5rem 0.5rem 1rem;font-size:var(--font-size-14, 0.875rem);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .outer-container .products .toolbar.history,:host .readonly .products .toolbar.history{font-size:var(--font-size-14, 0.875rem)}:host .outer-container .products .toolbar .price,:host .readonly .products .toolbar .price{-ms-flex:1;flex:1;padding-left:0.5rem;padding-left:4.2rem;color:var(--dark, #000000);white-space:nowrap}:host .outer-container .products .toolbar .delta,:host .readonly .products .toolbar .delta{margin-left:1rem}:host .outer-container .products .toolbar .delta.success,:host .readonly .products .toolbar .delta.success{color:var(--success, #3aa76d)}:host .outer-container .products .toolbar .delta.app-color,:host .readonly .products .toolbar .delta.app-color{color:var(--app-color, #5a30f4)}:host .outer-container .products .toolbar .delta.danger,:host .readonly .products .toolbar .delta.danger{color:var(--danger, #d44333)}:host .outer-container .products .toolbar .icon,:host .readonly .products .toolbar .icon{width:22px;min-width:22px;height:22px;min-height:22px;text-align:center;background:var(--stable-light, #f1f1f1);border-radius:50%}:host .outer-container .products .footer,:host .readonly .products .footer{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:0.5rem;padding-top:1rem;padding-bottom:0.5rem;color:var(--dark, #000000)}:host .outer-container .products .footer .title,:host .readonly .products .footer .title{-ms-flex:1;flex:1;text-transform:uppercase}:host .outer-container .products .footer .price,:host .readonly .products .footer .price{text-align:right}:host .readonly{padding:0.5rem 0.5rem 0 0}:host(.history) .readonly{padding:0 !important}";

package/dist/design-system/yoo-form-product-batch.entry.js

@@ -1,11 +1,11 @@
-import { r as registerInstance, i as createEvent, h } from './index-becca019.js';
-import './index-4bc6078a.js';
-import { g as getProductBatchDateTag } from './operation-helpers-adad82c1.js';
-import { e as showPhotoEditor } from './common-helpers-fe634d0d.js';
-import { s as setValidator } from './form-input-helpers-48580c4a.js';
-import { t as translate } from './overlays-ccc6076c.js';
+import { r as registerInstance, i as createEvent, h, g as getElement } from './index-becca019.js';
+import './index-abd62f7b.js';
+import { g as getProductBatchDateTag } from './operation-helpers-1b727086.js';
+import { e as showPhotoEditor } from './common-helpers-4b9004c1.js';
+import { s as setValidator } from './form-input-helpers-76052552.js';
+import { t as translate } from './overlays-d9ef0a1c.js';
 import './lodash-f6e59a8e.js';
-import './index-e7f48bcb.js';
+import './index-eec8505b.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formProductBatchCss = ":host .readonly{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin-bottom:0.5rem}:host .readonly .content{-ms-flex:1;flex:1}:host .readonly yoo-img{width:5rem;height:5rem;margin-right:var(--spacing-16, 1rem)}:host .readonly .title{font-weight:var(--font-weight-700, 700);font-size:var(--font-size-18, 1.125rem);line-height:1.18}:host .readonly .subtitle{font-size:var(--font-size-18, 1.125rem)}:host .readonly .subtitle .value{padding-left:0.5rem;color:var(--text-color, #807f83)}:host .readonly yoo-tag{margin-top:0.5rem}";
@@ -38,7 +38,7 @@ const YooFormProductBatchComponent = class {
   }
   onOpenImage() {
     var _a, _b, _c;
-    showPhotoEditor({ src: (_c = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.image) === null || _c === void 0 ? void 0 : _c._downloadURL, isReadonly: true }, {
+    showPhotoEditor(this.host, { src: (_c = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.image) === null || _c === void 0 ? void 0 : _c._downloadURL, isReadonly: true }, {
       enterAnimation: 'slideYEnterAnimation',
       leaveAnimation: 'slideYLeaveAnimation'
     });
@@ -56,6 +56,7 @@ const YooFormProductBatchComponent = class {
   render() {
     return this.readonly ? this.renderReadonly() : this.renderEditable();
   }
+  get host() { return getElement(this); }
   static get watchers() { return {
     "required": ["onRequireChanged"]
   }; }