@yoobic/yobi 8.2.2 → 8.3.0-2

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

@@ -2,17 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+const index$1 = require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
-const formInputHelpers = require('./form-input-helpers-a04f76d2.js');
-const gridRenderers = require('./grid-renderers-3ac73ae6.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const formInputHelpers = require('./form-input-helpers-a2843dc0.js');
+const gridRenderers = require('./grid-renderers-66983c8b.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
-require('./incentive-helpers-7c50738b.js');
-require('./missions-helpers-a2279e7c.js');
-require('./form-helpers-3480a64b.js');
+require('./index-de8540eb.js');
+require('./incentive-helpers-a7243401.js');
+require('./missions-helpers-210de6b1.js');
+require('./form-helpers-93ee135f.js');
 require('./geolocation-helpers-c499cf4c.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);--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:1;flex:1;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(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}:host .input-container input:-moz-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}:host .input-container input::-moz-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}:host .input-container input:-ms-input-placeholder{color:var(--text-color, #807f83);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=large]:not([readonly]):not(.search)) .input-container{height:3rem}:host([size=medium]:not([readonly]):not(.search)) .input-container{height:2rem;font-size:var(--font-size-14, 0.875rem);border-radius:var(--border-radius-04, 0.25rem)}:host([size=medium]:not([readonly]):not(.search)) .input-container input{font-size:var(--font-size-14, 0.875rem)}:host([size=medium]:not([readonly]):not(.search)) .input-container input::-webkit-input-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=medium]:not([readonly]):not(.search)) .input-container input:-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=medium]:not([readonly]):not(.search)) .input-container input::-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=medium]:not([readonly]):not(.search)) .input-container input:-ms-input-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=small]:not([readonly]):not(.search)) .input-container{height:1.5rem;border-radius:var(--border-radius-04, 0.25rem)}:host([size=small]:not([readonly]):not(.search)) .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(.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)}";
@@ -46,7 +47,7 @@ const YooFormInputComponent = class {
     this.checkboxParams = null;
     this.hostWidth = 0;
     this.onWheel = () => {
-      if (index$1.isWeb(this.host) && this.isNumberInput(this.type)) {
+      if (overlays.isWeb(this.host) && this.isNumberInput(this.type)) {
         this.inputElement.blur();
       }
     };
@@ -94,7 +95,7 @@ const YooFormInputComponent = class {
     return this;
   }
   async isValidityNotEmpty() {
-    return !index$1.isNullOrUndefined(this.validity);
+    return !overlays.isNullOrUndefined(this.validity);
   }
   async clear() {
     if (this.inputElement) {
@@ -142,7 +143,7 @@ const YooFormInputComponent = class {
     if (this.maxCharacters) {
       this.remainingCharacters = this.maxCharacters - (this.value ? this.value.length : 0);
     }
-    this.emitValueAndSetValidity = index$1.debounce((value, skipValueAssignment) => {
+    this.emitValueAndSetValidity = overlays.debounce((value, skipValueAssignment) => {
       var _a, _b;
       formInputHelpers.setValueAndValidateInput(value, this, false, true, skipValueAssignment, ((_a = this.translationKey) === null || _a === void 0 ? void 0 : _a.length) > 0);
       if (((_b = this.translationKey) === null || _b === void 0 ? void 0 : _b.length) > 0) {
@@ -210,7 +211,7 @@ const YooFormInputComponent = class {
     if (el) {
       const isNumberInput = this.isNumberInput(this.type);
       const type = isNumberInput ? 'number' : this.type;
-      if (index$1.isIOS() && isNumberInput && ev.data === ',') {
+      if (overlays.isIOS() && isNumberInput && ev.data === ',') {
         el.value = this.localValue + '.';
       }
       if (!isNumberInput || el.value || ev.data !== '-') {
@@ -229,7 +230,7 @@ const YooFormInputComponent = class {
               this.remainingCharacters = this.maxCharacters - el.value.length;
             }
           }
-          const skipValueAssignment = !((this.localValue === null && value) || (this.localValue && (!index$1.isNullOrUndefined(value) || value === '')));
+          const skipValueAssignment = !((this.localValue === null && value) || (this.localValue && (!overlays.isNullOrUndefined(value) || value === '')));
           this.emitValueAndSetValidity(value, skipValueAssignment);
           this.localValue = value;
         }
@@ -273,7 +274,7 @@ const YooFormInputComponent = class {
         }
         // This only allows the keycodes of numbers 0-9
         // otherwise the event is prevented (minus keycode = 189)
-        if ((index$1.isIOS() && index$1.isNativeMobile()) || index$1.isSafari()) {
+        if ((overlays.isIOS() && overlays.isNativeMobile()) || overlays.isSafari()) {
           const COMMA_KEYCODE = 188;
           const DECIMAL_POINT_KEYCODE = 190;
           const ZERO_KEYCODE = 48;
@@ -285,7 +286,7 @@ const YooFormInputComponent = class {
             ev.preventDefault();
           }
         }
-        else if (index$1.isAndroid() && index$1.isNativeMobile() && keycode === SPACEBAR_KEYCODE) {
+        else if (overlays.isAndroid() && overlays.isNativeMobile() && keycode === SPACEBAR_KEYCODE) {
           ev.preventDefault();
         }
       }
@@ -294,7 +295,7 @@ const YooFormInputComponent = class {
   setLocalValue(updateTranslation) {
     var _a;
     if (((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) > 0 && lodash.isString(this.value) && updateTranslation) {
-      index$1.isHTML(this.value) && (this.value = index$1.extractTextFromStringHTML(this.value));
+      overlays.isHTML(this.value) && (this.value = overlays.extractTextFromStringHTML(this.value));
       const key = this.value.replace(/%/g, '');
       const translationIndex = this.translations.findIndex((tran) => { var _a; return tran.key === key || tran.key === ((_a = this.translationKey) === null || _a === void 0 ? void 0 : _a.replace(/%/g, '')); });
       if (translationIndex > -1) {
@@ -306,13 +307,13 @@ const YooFormInputComponent = class {
   }
   onShowPassword() {
     this.isPasswordInput(this.inputType) ? (this.inputType = 'text') : (this.inputType = 'password');
-    const cordovaAndroid = index$1.isNativeMobile() && index$1.isAndroid();
+    const cordovaAndroid = overlays.isNativeMobile() && overlays.isAndroid();
     formInputHelpers.onIconClicked('eye', this, cordovaAndroid);
   }
   onCopyToClipboard(value) {
-    index$1.copyToClipboard(value);
-    index$1.showToast({
-      message: index$1.translate('COPIEDTOCLIPBOARD'),
+    overlays.copyToClipboard(value);
+    overlays.showToast({
+      message: overlays.translate('COPIEDTOCLIPBOARD'),
       duration: 2000,
       cssClass: 'success header',
       closable: true
@@ -388,7 +389,7 @@ const YooFormInputComponent = class {
         value = Math.round(value / this.factor);
       }
     }
-    let innerHTML = this.useTranslate ? index$1.translate((value === null || value === void 0 ? void 0 : value.toString()) || '') : (value === null || value === void 0 ? void 0 : value.toString()) || '';
+    let innerHTML = this.useTranslate ? overlays.translate((value === null || value === void 0 ? void 0 : value.toString()) || '') : (value === null || value === void 0 ? void 0 : value.toString()) || '';
     const copyText = innerHTML;
     if (this.iconSuffix) {
       innerHTML += `<yoo-icon class="inline-left" name="${this.iconSuffix}" size="${this.getIconSize()}"></yoo-icon>`;
@@ -407,7 +408,7 @@ const YooFormInputComponent = class {
   }
   renderEditable() {
     var _a, _b, _c;
-    const hasValue = !index$1.isNullOrUndefined(this.localValue) && this.localValue !== '';
+    const hasValue = !overlays.isNullOrUndefined(this.localValue) && this.localValue !== '';
     const invalidMessageKey = this.invalidMessage || 'INCORRECTFORMAT';
     return [
       this.placeholdertolabel && this.internalPlaceholder && (index.h("div", { class: this.placeholdertolabel ? 'label' : 'label active' }, this.internalPlaceholder, !this.required && index.h("span", { class: "label-required" }, "(' ('+translate('OPTIONAL')+')')"))),
@@ -416,16 +417,16 @@ 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 && (index.h("div", { class: "icon-prefix", onClick: () => (this.inputElement && this.inputElement.focus ? this.inputElement.focus() : null) }, index.h("yoo-icon", { name: this.finalIconPrefix, size: this.getIconSize() }))), index.h("input", { type: this.inputType, name: this.name, tabindex: this.inputTabIndex, ref: (el) => (this.inputElement = el), autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, inputmode: this.inputmode ? this.inputmode : undefined, placeholder: !this.placeholdertolabel && this.internalPlaceholder ? index$1.translate(this.internalPlaceholder) : '', required: this.required, onBlur: (ev) => formInputHelpers.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: () => formInputHelpers.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 && (index.h("div", { class: "icon-prefix", onClick: () => (this.inputElement && this.inputElement.focus ? this.inputElement.focus() : null) }, index.h("yoo-icon", { name: this.finalIconPrefix, size: this.getIconSize() }))), index.h("input", { type: this.inputType, name: this.name, tabindex: this.inputTabIndex, ref: (el) => (this.inputElement = el), autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, inputmode: this.inputmode ? this.inputmode : undefined, placeholder: !this.placeholdertolabel && this.internalPlaceholder ? overlays.translate(this.internalPlaceholder) : '', required: this.required, onBlur: (ev) => formInputHelpers.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: () => formInputHelpers.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
-        }, disabled: this.disabled, value: this.localValue }), this.maxCharacters && this.renderMaxCharacterCounter(), this.host.classList.contains('warning') && index.h("div", { class: "warning-icon" }), (hasValue && !index$1.isNullOrUndefined(this.validity) && this.uiValidation && this.uiValidation.valid && this.validity) ||
+        }, disabled: this.disabled, value: this.localValue }), this.maxCharacters && this.renderMaxCharacterCounter(), this.host.classList.contains('warning') && index.h("div", { class: "warning-icon" }), (hasValue && !overlays.isNullOrUndefined(this.validity) && this.uiValidation && this.uiValidation.valid && this.validity) ||
         (this.uiValidation.invalid && this.validity === false && !this.inputReloaded && (index.h("div", { class: 'valid-icon ' + (this.validity ? 'valid' : 'invalid' + (this.clearable && hasValue && this.type === 'password' && this.showPasswordToggle ? '' : ' last')) }, index.h("yoo-icon", { color: this.validity ? 'app-color' : 'danger', name: this.validity ? 'check' : 'rejected', size: this.getIconSize() })))), this.type === 'password' && this.showPasswordToggle && (index.h("div", { class: 'icon-suffix-focus' + (this.clearable && hasValue ? '' : ' last'), onClick: this.onShowPassword.bind(this) }, hasValue && index.h("yoo-icon", { size: this.getIconSize(), name: "eye", color: this.inputType === 'password' ? 'stable-alt' : 'light' }))), this.clearable && !((_b = this.checkboxParams) === null || _b === void 0 ? void 0 : _b.value) && (index.h("div", { class: { 'icon-suffix-focus last icon-close': true }, style: { display: hasValue ? undefined : 'none' }, onClick: () => (hasValue ? this.clearInput() : null) }, index.h("yoo-icon", { size: this.getIconSize(), name: "cross" }))), this.iconSuffix && (index.h("div", { class: "icon-suffix-focus", onClick: () => (this.inputElement && this.inputElement.focus ? this.inputElement.focus() : null) }, index.h("yoo-icon", { name: this.iconSuffix, size: this.getIconSize() }))), ((_c = this.inlineActions) === null || _c === void 0 ? void 0 : _c.length) > 0 &&
         this.inlineActions.map((action) => (index.h("div", { class: "icon-suffix", onClick: () => action.handler }, index.h("yoo-icon", { name: action.icon, color: action.iconColor }))))),
       this.checkboxParams && (index.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 && (index.h("div", { class: { 'icon-suffix-focus last icon-close': true } }, index.h("yoo-tooltip", { content: this.tooltip }, index.h("yoo-icon", { size: "medium", name: "help" })))),
-      this.uiValidation.invalid && index.h("div", { class: { 'invalid-message': true, invalid: (this.validity === false && !this.inputReloaded) } }, index$1.translate(invalidMessageKey))
+      this.uiValidation.invalid && index.h("div", { class: { 'invalid-message': true, invalid: (this.validity === false && !this.inputReloaded) } }, overlays.translate(invalidMessageKey))
     ];
   }
   render() {
@@ -434,7 +435,7 @@ const YooFormInputComponent = class {
         disabled: this.disabled,
         'has-invalid-format': !this.isTextInput(this.inputType),
         'has-checkbox': this.checkboxParams || this.tooltip,
-        'no-animation': index$1.isAnimationsDisabled(),
+        'no-animation': overlays.isAnimationsDisabled(),
         ...commonHelpers.getAppContext(this.host)
       } }, this.readonly ? this.renderReadonly() : this.renderEditable()));
   }