@oiz/stzh-components 0.0.0-pretest → 1.4.0-npmjstest

package/dist/cjs/stzh-dropdown.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac9bdc7f.js');
-const utils = require('./utils-e84f4a8d.js');
-const translationUtils = require('./translation-utils-2dbbce94.js');
-const stzhInputDescription = require('./stzh-input-description-9ed61d1d.js');
+const utils = require('./utils-d327c19d.js');
+const translationUtils = require('./translation-utils-73073e44.js');
+const stzhInputDescription = require('./stzh-input-description-9802abc2.js');
 const _commonjsHelpers = require('./_commonjsHelpers-bcc1208a.js');
 
 var tomSelect_base = _commonjsHelpers.createCommonjsModule(function (module, exports) {
@@ -4634,453 +4634,453 @@ var no_backspace_delete = _commonjsHelpers.createCommonjsModule(function (module
 
 const stzhDropdownCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}stzh-dropdown{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-color:var(--stzh-color-grey61);--label-color:var(--stzh-color-grey61);--placeholder-color:var(--stzh-color-grey61);--background-color:var(--stzh-color-white);--label-background:var(--stzh-color-white);--icon-size:var(--stzh-icon-size-small);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--hover-color);--popover-width:100%;--popover-min-width:var(--stzh-popover-min-width);--popover-max-width:var(--stzh-popover-min-width);--popover-max-height:calc(6.5 * var(--stzh-menu-item-height));width:100%;border-radius:var(--stzh-form-input-border-radius);}stzh-dropdown[hidden]{display:none}stzh-dropdown *,stzh-dropdown *::before,stzh-dropdown *::after{-webkit-box-sizing:border-box;box-sizing:border-box}stzh-dropdown[variant=plain]{--background-color:transparent}stzh-dropdown[inline]:not([inline=false]){--popover-width:auto;width:auto}stzh-dropdown[invalid]:not([invalid=false]){--color:var(--stzh-color-error);--border-color:var(--stzh-color-error);--label-color:var(--stzh-color-error);--placeholder-color:var(--stzh-color-error);--hover-color:var(--stzh-color-error);--hover-border-color:var(--stzh-color-error)}stzh-dropdown[disabled]:not([disabled=false]){--color:var(--stzh-color-grey61);--border-color:var(--stzh-color-grey5);--label-color:var(--stzh-color-grey61);--placeholder-color:var(--stzh-color-grey61);--background-color:var(--stzh-color-grey5);--label-background:transparent;--hover-color:var(--stzh-color-grey61);--hover-border-color:var(--stzh-color-grey5)}stzh-dropdown[disabled]:not([disabled=false])[variant=plain]{--background-color:transparent}.stzh-dropdown__icon-wrapper stzh-icon,.stzh-dropdown__icon{--size:var(--icon-size)}.stzh-dropdown{}.stzh-dropdown__marker-symbol{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-dropdown__marker-text{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-dropdown__description-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-dropdown__error,.stzh-dropdown__description{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-dropdown__error{color:var(--stzh-color-error)}.stzh-dropdown__error-list{list-style:none;margin:0;padding:0}.stzh-dropdown__description{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-dropdown__description-long{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-dropdown__description-long-popover{--width:auto;--max-width:27.3125rem}.stzh-dropdown__description-long-popover[open]:not([open=false]) .stzh-dropdown__description-long-button{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-dropdown__description-long-button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-dropdown__description-long-button:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-dropdown stzh-icon.stzh-dropdown__description-long-icon{--size:var(--stzh-icon-size-xsmall)}.stzh-dropdown--has-error .stzh-dropdown__error,.stzh-dropdown--has-description .stzh-dropdown__description{margin-top:var(--stzh-space-xxsmall)}.stzh-dropdown .ts-hidden-accessible{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-dropdown .ts-dropdown-content{max-height:var(--popover-max-height);overflow-y:auto;overflow-x:hidden;overflow-scrolling:touch;scroll-behavior:smooth}.stzh-dropdown .ts-control{overflow:hidden;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;border-radius:var(--stzh-form-input-border-radius);background-color:var(--background-color);-webkit-transition-property:color, border-color;transition-property:color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);cursor:pointer}.stzh-dropdown .ts-control:hover,.stzh-dropdown .ts-control:focus-within{border-color:var(--hover-border-color);outline:none}.stzh-dropdown .ts-control>*{vertical-align:baseline;display:inline-block}.stzh-dropdown .ts-control,.stzh-dropdown__sizer{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;width:100%;min-height:var(--stzh-form-input-height);border:0.0625rem solid var(--border-color)}.stzh-dropdown .ts-control>input{font-size:inherit;line-height:inherit;-ms-flex:1 1 auto;flex:1 1 auto;display:inline-block;padding:0;min-height:0;max-height:none;max-width:100%;margin:0;text-indent:0;border:0 none;background:none;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto;-webkit-box-shadow:none;box-shadow:none;cursor:pointer}.stzh-dropdown .ts-control>input::-webkit-input-placeholder{color:var(--placeholder-color)}.stzh-dropdown .ts-control>input:-moz-placeholder{color:var(--placeholder-color)}.stzh-dropdown .ts-control>input::-moz-placeholder{color:var(--placeholder-color)}.stzh-dropdown .ts-control>input:-ms-input-placeholder{color:var(--placeholder-color)}.stzh-dropdown .ts-control>input::-ms-clear{display:none}.stzh-dropdown .ts-control>input:focus{outline:none}.stzh-dropdown .ts-control>input:-moz-placeholder-shown{text-overflow:ellipsis}.stzh-dropdown .ts-control>input:-ms-input-placeholder{text-overflow:ellipsis}.stzh-dropdown .ts-control>input:placeholder-shown{text-overflow:ellipsis}.stzh-dropdown__field-wrapper,.stzh-dropdown__select{position:relative}.stzh-dropdown__icon-wrapper{position:absolute}.stzh-dropdown__select .ts-control>input,.stzh-dropdown__select.single .stzh-dropdown__item,.stzh-dropdown__icon-wrapper,.stzh-dropdown__angle-icon{color:var(--color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-dropdown__select.multi .stzh-dropdown__item{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-dropdown__select:hover .ts-control>input,.stzh-dropdown__select:focus-within .ts-control>input,.stzh-dropdown__select.single:hover .stzh-dropdown__item,.stzh-dropdown__select.single:focus-within .stzh-dropdown__item,.stzh-dropdown__select:hover~.stzh-dropdown__icon-wrapper,.stzh-dropdown__select:focus-within~.stzh-dropdown__icon-wrapper,.stzh-dropdown__select:hover~.stzh-dropdown__angle-icon,.stzh-dropdown__select:focus-within~.stzh-dropdown__angle-icon,.stzh-dropdown__select:hover~.stzh-dropdown__label,.stzh-dropdown__select:focus-within~.stzh-dropdown__label{color:var(--hover-color)}.stzh-dropdown__sizer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-top:calc(var(--stzh-form-input-height) / -1);pointer-events:none;visibility:hidden}.stzh-dropdown__select.has-items~.stzh-dropdown__sizer{display:none}.stzh-dropdown__select.plugin-input_hide~.stzh-dropdown__sizer{visibility:visible}.stzh-dropdown__select.input-active .ts-control,.stzh-dropdown__select.input-active .ts-control>input{cursor:text}.stzh-dropdown__select.input-hidden .ts-control>input,.stzh-dropdown__select.plugin-input_hide .ts-control>input{opacity:0;position:absolute;left:-625rem}.stzh-dropdown__select.single .ts-control,.stzh-dropdown__select.multi .ts-control,.stzh-dropdown__sizer{padding:var(--stzh-space-xsmall) var(--stzh-space-medium);padding-right:calc(var(--stzh-icon-size-medium) + var(--stzh-space-medium) + var(--stzh-space-xsmall))}.stzh-dropdown__icon-wrapper,.stzh-dropdown__angle-icon{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none}.stzh-dropdown__icon-wrapper{display:-ms-flexbox;display:flex;left:var(--stzh-space-medium)}.stzh-dropdown stzh-icon.stzh-dropdown__angle-icon{--size:var(--stzh-icon-size-medium)}.stzh-dropdown__angle-icon{right:var(--stzh-space-medium)}.stzh-dropdown__label{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--label-color);display:block;width:auto;position:absolute;top:calc(var(--stzh-form-input-height) / 2);left:calc(var(--stzh-space-medium) + 0.0625rem);max-width:calc(100% - var(--stzh-space-medium) * 2);-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);pointer-events:none}.stzh-dropdown__label:empty{display:none}.stzh-dropdown__label::before{content:\"\";display:none;background:var(--label-background);position:absolute;width:100%;z-index:-1;left:0;top:50%;height:0.125rem;margin-top:-0.03125rem}.stzh-dropdown__option,.stzh-dropdown__create{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-decoration:none;outline:none;border:none;padding:var(--stzh-space-xsmall) var(--stzh-space-medium);padding-left:var(--stzh-space-large);color:var(--stzh-color-grey70);height:var(--stzh-menu-item-height);line-height:var(--stzh-menu-item-height);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);cursor:pointer}.stzh-dropdown__option:hover,.stzh-dropdown__option.active,.stzh-dropdown__create:hover,.stzh-dropdown__create.active{background-color:var(--stzh-color-grey5)}.stzh-dropdown__option.selected,.stzh-dropdown__create.selected{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-dropdown__option.selected:hover,.stzh-dropdown__option.selected.active,.stzh-dropdown__create.selected:hover,.stzh-dropdown__create.selected.active{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));background-color:var(--stzh-color-primary8)}.stzh-dropdown__option input,.stzh-dropdown__create input{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-dropdown__create{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);display:block}.stzh-dropdown__option-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stzh-dropdown__option[data-selectable] .highlight{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal}.stzh-dropdown__select .stzh-dropdown__option-check{display:none;color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-dropdown__option.selected:hover .stzh-dropdown__option-check,.stzh-dropdown__option.selected.active .stzh-dropdown__option-check{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-dropdown__no-results{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.stzh-dropdown__no-results,.stzh-dropdown__not-loading{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);padding:var(--stzh-space-xsmall) var(--stzh-space-medium);padding-left:var(--stzh-space-large)}.stzh-dropdown__optgroup-header{cursor:default}.stzh-dropdown__loader{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:2.375rem}.stzh-dropdown__dropdown{position:absolute;top:100%;left:0;width:var(--popover-width);margin-top:var(--stzh-space-xsmall);background-color:var(--stzh-color-white);-webkit-box-shadow:var(--stzh-box-shadow-popover);box-shadow:var(--stzh-box-shadow-popover);z-index:var(--stzh-z-index-popover);border-radius:var(--stzh-popover-border-radius);overflow:hidden}@media screen and (min-width: 600px){.stzh-dropdown__dropdown{min-width:var(--popover-min-width);max-width:var(--popover-max-width)}}.stzh-dropdown__select.plugin-input_autogrow.has-items .ts-control>input{min-width:0}.stzh-dropdown__select.plugin-input_autogrow.has-items.focus .ts-control>input{-ms-flex:none;flex:none;min-width:0.25rem}.stzh-dropdown__select.has-items .ts-control>input{margin:0 0.25rem}.stzh-dropdown__select.has-items .ts-control>input::-webkit-input-placeholder{color:transparent}.stzh-dropdown__select.has-items .ts-control>input:-moz-placeholder{color:transparent}.stzh-dropdown__select.has-items .ts-control>input::-moz-placeholder{color:transparent}.stzh-dropdown__select.has-items .ts-control>input:-ms-input-placeholder{color:transparent}.stzh-dropdown--is-multiple .stzh-dropdown__option-check{display:-ms-inline-flexbox;display:inline-flex;opacity:0;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed);margin-right:var(--stzh-space-xsmall)}.stzh-dropdown--is-multiple .stzh-dropdown__option{padding-left:var(--stzh-space-small)}.stzh-dropdown--is-multiple .stzh-dropdown__option.selected .stzh-dropdown__option-check{opacity:1}.stzh-dropdown--is-multiple .stzh-dropdown__select.multi.has-items .ts-control{padding-top:calc(var(--stzh-space-xsmall) - 0.0625rem);padding-bottom:calc(var(--stzh-space-xsmall) - 0.0625rem)}.stzh-dropdown--is-multiple .stzh-dropdown__select.multi .stzh-dropdown__item{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:relative;height:1.5rem;line-height:1.5rem;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border-radius:0.75rem;padding:0 var(--stzh-space-medium);-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0.0625rem solid transparent;background-color:var(--stzh-color-grey5);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);margin:var(--stzh-space-xxsmall) var(--stzh-space-xxsmall) var(--stzh-space-xxsmall) 0;cursor:pointer}.stzh-dropdown--is-multiple .stzh-dropdown__select.multi .stzh-dropdown__item:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));background-color:var(--stzh-color-primary8)}.stzh-dropdown--is-multiple .stzh-dropdown__select.multi .stzh-dropdown__item.active{color:var(--stzh-color-white);background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;padding-right:calc(1.5rem + var(--stzh-space-xxsmall))}.stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove{position:absolute;top:50%;right:-0.0625rem;-webkit-transform:translateY(-50%);transform:translateY(-50%);text-decoration:none;width:1.5rem;height:1.5rem;border-radius:1.5rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin-left:var(--stzh-space-xxsmall);color:var(--stzh-base-lead-color);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed)}.stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));background-color:var(--stzh-color-primary8)}.stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__remove-icon{--size:var(--stzh-icon-size-xxsmall)}.stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item.active .stzh-dropdown__remove-icon{color:var(--stzh-color-white)}.stzh-dropdown--popover-placement-top .stzh-dropdown__dropdown{margin-top:0;top:auto;bottom:100%;margin-bottom:var(--stzh-space-xsmall)}.stzh-dropdown--popover-placement-top.stzh-dropdown--plain .stzh-dropdown__dropdown{margin-bottom:0}.stzh-dropdown--size-small .ts-control,.stzh-dropdown--size-small .stzh-dropdown__sizer{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-dropdown--size-small .ts-control{min-height:var(--stzh-form-input-small-height)}.stzh-dropdown--size-small .stzh-dropdown__sizer{min-height:initial;height:var(--stzh-form-input-small-height);margin-top:calc(var(--stzh-form-input-small-height) / -1)}.stzh-dropdown--size-small .stzh-dropdown__label{top:calc(var(--stzh-form-input-small-height) / 2)}.stzh-dropdown--size-small .stzh-dropdown__select.single .ts-control,.stzh-dropdown--size-small .stzh-dropdown__select.multi .ts-control,.stzh-dropdown--size-small .stzh-dropdown__sizer{padding:var(--stzh-space-xxsmall) var(--stzh-space-medium);padding-right:calc(var(--stzh-icon-size-small) + var(--stzh-space-medium) + var(--stzh-space-xsmall))}.stzh-dropdown--size-small stzh-icon.stzh-dropdown__angle-icon{--size:var(--stzh-icon-size-small)}.stzh-dropdown--has-icon .stzh-dropdown__select.single .ts-control,.stzh-dropdown--has-icon .stzh-dropdown__select.multi .ts-control,.stzh-dropdown--has-icon .stzh-dropdown__sizer{padding-left:calc(var(--icon-size) + var(--stzh-space-medium) + var(--stzh-space-xsmall))}.stzh-dropdown--has-icon .stzh-dropdown__label{left:calc(var(--icon-size) + var(--stzh-space-medium) + var(--stzh-space-xsmall) + 0.0625rem)}.stzh-dropdown--plain .stzh-dropdown__select.single .ts-control,.stzh-dropdown--plain .stzh-dropdown__select.multi .ts-control,.stzh-dropdown--plain .stzh-dropdown__sizer{border:none;padding-left:0;padding-right:calc(var(--stzh-icon-size-medium) + var(--stzh-space-xsmall))}.stzh-dropdown--plain .stzh-dropdown__icon-wrapper{left:0}.stzh-dropdown--plain .stzh-dropdown__angle-icon{right:0}.stzh-dropdown--plain .stzh-dropdown__label{left:0;max-width:100%;padding:0}.stzh-dropdown--plain .stzh-dropdown__label::before{content:none}.stzh-dropdown--plain .stzh-dropdown__dropdown{margin-top:0}.stzh-dropdown--plain.stzh-dropdown--size-small .stzh-dropdown__select.single .ts-control,.stzh-dropdown--plain.stzh-dropdown--size-small .stzh-dropdown__select.multi .ts-control,.stzh-dropdown--plain.stzh-dropdown--size-small .stzh-dropdown__sizer{padding-right:calc(var(--stzh-icon-size-small) + var(--stzh-space-xsmall))}.stzh-dropdown--plain.stzh-dropdown--has-icon .stzh-dropdown__select.single .ts-control,.stzh-dropdown--plain.stzh-dropdown--has-icon .stzh-dropdown__select.multi .ts-control,.stzh-dropdown--plain.stzh-dropdown--has-icon .stzh-dropdown__sizer{padding-left:calc(var(--icon-size) + var(--stzh-space-xsmall))}.stzh-dropdown--plain.stzh-dropdown--has-icon .stzh-dropdown__label{left:calc(var(--icon-size) + var(--stzh-space-xsmall) + 0.0625rem)}.stzh-dropdown--has-fixed-label .stzh-dropdown__label,.stzh-dropdown--is-filled .stzh-dropdown__label,.stzh-dropdown--is-disabled .stzh-dropdown__label,.stzh-dropdown--is-invalid .stzh-dropdown__label,.stzh-dropdown--has-focus .stzh-dropdown__label,.stzh-dropdown--has-placeholder .stzh-dropdown__label{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);top:0;left:calc(var(--stzh-space-medium) - var(--stzh-space-xxsmall));height:1.25rem;line-height:1.25rem;padding:0 var(--stzh-space-xxsmall);max-width:calc(100% - (var(--stzh-space-medium) - var(--stzh-space-xxsmall)) * 2);pointer-events:all}.stzh-dropdown--has-fixed-label .stzh-dropdown__label:not(:empty)::before,.stzh-dropdown--is-filled .stzh-dropdown__label:not(:empty)::before,.stzh-dropdown--is-disabled .stzh-dropdown__label:not(:empty)::before,.stzh-dropdown--is-invalid .stzh-dropdown__label:not(:empty)::before,.stzh-dropdown--has-focus .stzh-dropdown__label:not(:empty)::before,.stzh-dropdown--has-placeholder .stzh-dropdown__label:not(:empty)::before{display:block}.stzh-dropdown--plain.stzh-dropdown--has-fixed-label .stzh-dropdown__label,.stzh-dropdown--plain.stzh-dropdown--is-filled .stzh-dropdown__label,.stzh-dropdown--plain.stzh-dropdown--is-disabled .stzh-dropdown__label,.stzh-dropdown--plain.stzh-dropdown--is-invalid .stzh-dropdown__label,.stzh-dropdown--plain.stzh-dropdown--has-focus .stzh-dropdown__label,.stzh-dropdown--plain.stzh-dropdown--has-placeholder .stzh-dropdown__label{left:0;padding:0;max-width:100%}.stzh-dropdown--is-disabled .stzh-dropdown__select.multi .stzh-dropdown__item,.stzh-dropdown--is-disabled .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove{cursor:not-allowed}.stzh-dropdown--is-disabled .stzh-dropdown__select.multi .stzh-dropdown__item,.stzh-dropdown--is-disabled .stzh-dropdown__select.multi .stzh-dropdown__item:hover{color:var(--stzh-color-grey25);background-color:var(--stzh-color-white);border-color:var(--stzh-base-border-color)}.stzh-dropdown--is-disabled .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove,.stzh-dropdown--is-disabled .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove:hover{color:var(--stzh-color-grey13);background-color:transparent}";
 
-const TomSelectInputHide = function (_plugin_options) {
-  // const self = this;
-  // self.on("initialize", () => {
-  //   const input = self.control_input as HTMLInputElement;
-  //   if (input) input.disabled = true;
-  // })
-};
-const CLASS_FILLED = "stzh-dropdown--is-filled";
-const CLASS_FOCUS = "stzh-dropdown--has-focus";
-tomSelect_base.define("remove_button", remove_button);
-tomSelect_base.define("checkbox_options", checkbox_options);
-tomSelect_base.define("input_autogrow", input_autogrow);
-tomSelect_base.define("no_backspace_delete", no_backspace_delete);
-tomSelect_base.define("input_hide", TomSelectInputHide);
-let dropdownCounter = 0;
-const StzhDropdown = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.stzhChange = index.createEvent(this, "stzhChange", 7);
-    this.stzhItemAdd = index.createEvent(this, "stzhItemAdd", 7);
-    this.stzhItemRemove = index.createEvent(this, "stzhItemRemove", 7);
-    this.stzhOptionAdd = index.createEvent(this, "stzhOptionAdd", 7);
-    this.stzhOptionRemove = index.createEvent(this, "stzhOptionRemove", 7);
-    this.stzhOpen = index.createEvent(this, "stzhOpen", 7);
-    this.stzhClose = index.createEvent(this, "stzhClose", 7);
-    this.stzhFocus = index.createEvent(this, "stzhFocus", 7);
-    this.stzhBlur = index.createEvent(this, "stzhBlur", 7);
-    this.stzhInit = index.createEvent(this, "stzhInit", 7);
-    /**
-     * An array of property names to analyze when filtering options.
-     * Weights can be given to each field to improve search result:
-     * `[{"field":"text","weight":2},{"field":"text2","weight":0.5}]`
-     */
-    this.searchField = ["text"];
-    /** Whether multiple items option can be selected */
-    this.multiple = false;
-    /** Show inline (auto width) */
-    this.inline = false;
-    /** The max number of options to display in the dropdown. Set to `null` for an unlimited number of options. */
-    this.maxOptions = 50;
-    /** When searching for multiple terms (separated by space), this is the operator used. Can be 'and' or 'or' */
-    this.searchConjunction = "and";
-    /**  If true, any options with a "" value will be treated like a normal option. This defaults to false to accommodate the common <select> practice of having the first empty option to act as a placeholder. */
-    this.allowEmptyOption = false;
-    /** Show the dropdown immediately when the control receives focus. */
-    this.openOnFocus = true;
-    /** After a selection is made, the dropdown will remain open if in a multi-selection control or will close in a single-selection control. Setting closeAfterSelect to true will force the dropdown to close after selections are made. Setting closeAfterSelect to false will keep the dropdown open after selections are made. */
-    this.closeAfterSelect = null;
-    /** Invoked when new options should be loaded from the server. Called with the current query string and a callback function to call with the results when they are loaded (or nothing when an error arises). */
-    this.load = null;
-    /** Minimum of characters required to execute the `load` function */
-    this.minCharacters = 3;
-    /** The number of milliseconds to wait before requesting options from the server or null. If null, throttling is disabled. Useful when loading options dynamically while the user types a search / filter expression. */
-    this.loadThrottle = 300;
-    /** If true, the load function will be called upon control initialization (with an empty search). Alternatively it can be set to 'focus' to call the load function when control receives focus. */
-    this.preload = false;
-    /** The name of the property to render as an option / item label (not needed when custom rendering functions are defined). */
-    this.labelField = "text";
-    /** The name of the property to use as the value when an item is selected. */
-    this.valueField = "value";
-    /** The name of the property to group items by. */
-    this.optgroupField = "optgroup";
-    /** The name of the property to render as an option group label (not needed when custom rendering functions are defined). */
-    this.optgroupLabelField = "label";
-    /** The name of the option group property that serves as its unique identifier. */
-    this.optgroupValueField = "value";
-    /** Name of hidden select element */
-    this.name = "";
-    /** Variant */
-    this.variant = "default";
-    /** Size variant */
-    this.size = "default";
-    /** Whether the dropdown is disabled */
-    this.disabled = false;
-    /** Popover placement */
-    this.popoverPlacement = "bottom";
-    /** Label */
-    this.label = "";
-    /** Icon (use instead of icon slot) */
-    this.icon = "";
-    /** Prevent option search */
-    this.noSearch = false;
-    /** Prevent backspace delete */
-    this.noBackspaceDelete = false;
-    /** Invalid status */
-    this.invalid = false;
-    /** Required status */
-    this.required = false;
-    /** Show text in label depending if field is optional/required */
-    this.showMarker = false;
-    /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
-    this.a11yDescribedby = "";
-  }
-  optionsWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._options = JSON.parse(newValue);
-    }
-    else {
-      this._options = newValue;
-    }
-  }
-  itemsWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._items = JSON.parse(newValue);
-    }
-    else {
-      this._items = newValue;
-    }
-  }
-  searchFieldWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._searchField = JSON.parse(newValue);
-    }
-    else {
-      this._searchField = newValue;
-    }
-  }
-  optgroupsWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._optgroups = JSON.parse(newValue);
-    }
-    else {
-      this._optgroups = newValue;
-    }
-  }
-  errorWatcher(newValue) {
-    if (typeof newValue === "string") {
-      try {
-        this._error = JSON.parse(newValue);
-      }
-      catch (e) {
-        if (newValue) {
-          this._error = [newValue];
-        }
-        else {
-          this._error = [];
-        }
-      }
-    }
-    else if (newValue) {
-      this._error = newValue;
-    }
-    else {
-      this._error = [];
-    }
-    this.invalid = this._error.length > 0;
-  }
-  /**
-   * Returns the value of the control.
-   * If multiple items can be selected,
-   * this returns an array, otherwise a string.
-  */
-  async getValue() {
-    return this.tomSelect.getValue();
-  }
-  /** Set new value */
-  async setValue(newValue) {
-    this.tomSelect.setValue(newValue);
-  }
-  /** Focus select */
-  async setFocus() {
-    this.tomSelect.focus();
-  }
-  updateFilled() {
-    if (this._items.length > 0) {
-      this.rootElement.classList.add(CLASS_FILLED);
-    }
-    else {
-      this.rootElement.classList.remove(CLASS_FILLED);
-    }
-  }
-  async componentWillLoad() {
-    this.dropdownId = `stzh-dropdown-${dropdownCounter++}`;
-    this.optionsWatcher(this.options);
-    this.optgroupsWatcher(this.optgroups);
-    this.itemsWatcher(this.items);
-    this.searchFieldWatcher(this.searchField);
-    this.errorWatcher(this.error);
-    if (!this.localization) {
-      this.localization = await translationUtils.fetchTranslations(this.element, 'dropdown');
-    }
-  }
-  async componentWillUpdate() {
-    if (this.tomSelect) {
-      this.tomSelect.destroy();
-      this.tomSelect = null;
-    }
-  }
-  async componentDidRender() {
-    if (this.tomSelect) {
-      return;
-    }
-    const plugins = {};
-    if (this.noSearch) {
-      plugins["input_hide"] = {};
-    }
-    else {
-      plugins["input_autogrow"] = {};
-    }
-    if (this.noBackspaceDelete) {
-      plugins["no_backspace_delete"] = {};
-    }
-    if (this.multiple) {
-      plugins["checkbox_options"] = {};
-      plugins["remove_button"] = {
-        title: this.localization.removeButtonTitle,
-        label: '<stzh-icon name="close" class="stzh-dropdown__remove-icon"></stzh-icon>'
-      };
-    }
-    const tomSelectOptions = {
-      plugins,
-      maxItems: this.multiple ? null : 1,
-      maxOptions: this.maxOptions,
-      items: this._items,
-      optgroups: this._optgroups,
-      searchField: this._searchField,
-      searchConjunction: this.searchConjunction,
-      allowEmptyOption: this.allowEmptyOption,
-      closeAfterSelect: this.closeAfterSelect !== null
-        ? this.closeAfterSelect
-        : !this.multiple,
-      labelField: this.labelField,
-      valueField: this.valueField,
-      optgroupField: this.optgroupField,
-      optgroupLabelField: this.optgroupLabelField,
-      optgroupValueField: this.optgroupValueField,
-      lockOptgroupOrder: this.lockOptgroupOrder,
-      load: this.load,
-      shouldLoad: (query) => {
-        return query.length >= this.minCharacters;
-      },
-      loadThrottle: this.loadThrottle,
-      preload: this.preload,
-      openOnFocus: this.openOnFocus,
-      loadingClass: "is-loading",
-      hideSelected: false,
-      duplicates: false,
-      delimiter: ",",
-      copyClassesToDropdown: false,
-      placeholder: this.placeholder,
-      hidePlaceholder: null,
-      // if you want the user to be able to add own items enable this option
-      // (but checkbox_options plugin throws an error and would need a fix first)
-      // create: true,
-      // createOnBlur: false,
-      // createFilter: null,
-      // persist: false,
-      render: {
-        option: (data, escape) => {
-          return `
-            <div class="stzh-dropdown__option" title="${escape(data[this.labelField])}">
-              <stzh-icon name="checkmark" class="stzh-dropdown__option-check"></stzh-icon>
-              <span class="stzh-dropdown__option-title">
-                ${escape(data[this.labelField])}
-              </span>
-            </div>
-          `;
-        },
-        item: (data, escape) => {
-          return `
-            <div class="stzh-dropdown__item">
-              ${escape(data[this.labelField])}
-            </div>
-          `;
-        },
-        option_create: (data, escape) => {
-          return `
-            <div class="stzh-dropdown__create">
-              ${this.localization.create.replace(/{x}/gi, escape(data.input))}&hellip;
-            </div>
-          `;
-        },
-        no_results: (data, escape) => {
-          return `
-            <div class="stzh-dropdown__no-results">
-              ${this.localization.noResults.replace(/{x}/gi, escape(data.input))}
-            </div>`;
-        },
-        not_loading: this.load === null ? null : (_data, escape) => {
-          return `
-            <div class="stzh-dropdown__not-loading">
-              ${this.localization.notLoading.replace(/{x}/gi, escape(this.minCharacters.toString()))}
-            </div>
-          `;
-        },
-        optgroup: (data) => {
-          let optgroup = document.createElement("div");
-          optgroup.className = "stzh-dropdown__optgroup";
-          optgroup.appendChild(data.options);
-          return optgroup;
-        },
-        optgroup_header: (data, escape) => {
-          return `
-            <div class="stzh-dropdown__optgroup-header">
-              ${escape(data.label)}
-            </div>
-          `;
-        },
-        loading: () => {
-          return `
-            <div class="stzh-dropdown__loader">
-              <stzh-loader></stzh-loader>
-            </div>
-          `;
-        },
-        dropdown: () => {
-          return `<div class="stzh-dropdown__dropdown"></div>`;
-        }
-      },
-      onChange: (value) => {
-        this._items = this.tomSelect.items;
-        this.updateFilled();
-        this.stzhChange.emit({
-          component: "stzh-dropdown",
-          value
-        });
-      },
-      onItemAdd: (value) => {
-        this._items = this.tomSelect.items;
-        this.stzhItemAdd.emit({
-          component: "stzh-dropdown",
-          value
-        });
-      },
-      onItemRemove: (value) => {
-        this._items = this.tomSelect.items;
-        this.stzhItemRemove.emit({
-          component: "stzh-dropdown",
-          value
-        });
-      },
-      onOptionAdd: (value) => {
-        this._options = this.tomSelect.options;
-        this.updateFilled();
-        this.stzhOptionAdd.emit({
-          component: "stzh-dropdown",
-          value
-        });
-      },
-      onOptionRemove: (value) => {
-        this._options = this.tomSelect.options;
-        this.updateFilled();
-        this.stzhOptionRemove.emit({
-          component: "stzh-dropdown",
-          value
-        });
-      },
-      onDropdownOpen: () => {
-        this.stzhOpen.emit({
-          component: "stzh-dropdown"
-        });
-      },
-      onDropdownClose: () => {
-        this.stzhClose.emit({
-          component: "stzh-dropdown"
-        });
-      },
-      onFocus: () => {
-        this.rootElement.classList.add(CLASS_FOCUS);
-        const focusEvent = new FocusEvent('focus', {
-          view: window,
-          bubbles: false,
-          cancelable: false
-        });
-        this.element.dispatchEvent(focusEvent);
-        this.stzhFocus.emit({
-          component: "stzh-dropdown"
-        });
-      },
-      onBlur: () => {
-        this.rootElement.classList.remove(CLASS_FOCUS);
-        const blurEvent = new FocusEvent('blur', {
-          view: window,
-          bubbles: false,
-          cancelable: false
-        });
-        this.element.dispatchEvent(blurEvent);
-        this.stzhBlur.emit({
-          component: "stzh-dropdown"
-        });
-      },
-      onInitialize: () => {
-        this.stzhInit.emit({
-          component: "stzh-dropdown"
-        });
-      },
-    };
-    if (this._options) {
-      tomSelectOptions.options = this._options;
-    }
-    if (this._optgroups) {
-      tomSelectOptions.optgroups = this._optgroups;
-    }
-    if (this._items) {
-      tomSelectOptions.items = this._items;
-    }
-    this.tomSelect = new tomSelect_base(this.select, tomSelectOptions);
-  }
-  disconnectedCallback() {
-    if (this.tomSelect) {
-      this.tomSelect.destroy();
-      this.tomSelect = null;
-    }
-  }
-  render() {
-    var _a;
-    const iconUsed = utils.hasSlot(this.element, 'icon') || !!this.icon;
-    const descriptionUsed = utils.hasSlot(this.element, 'description') || !!this.description;
-    const descriptionLongUsed = utils.hasSlot(this.element, 'description-long') || !!this.descriptionLong;
-    const errorUsed = utils.hasSlot(this.element, 'error') || !!this.error;
-    const classes = {
-      "stzh-dropdown": true,
-      "stzh-dropdown--is-inline": this.inline,
-      "stzh-dropdown--is-multiple": this.multiple,
-      "stzh-dropdown--is-disabled": this.disabled,
-      "stzh-dropdown--is-required": this.required,
-      "stzh-dropdown--is-invalid": this.invalid,
-      [CLASS_FILLED]: this._items && this._items.length > 0,
-      "stzh-dropdown--has-icon": iconUsed,
-      "stzh-dropdown--has-description": descriptionUsed,
-      "stzh-dropdown--has-description-long": descriptionLongUsed,
-      "stzh-dropdown--has-error": errorUsed,
-      "stzh-dropdown--has-placeholder": !!this.placeholder,
-      "stzh-dropdown--has-fixed-label": ((_a = window === null || window === void 0 ? void 0 : window.stzhComponents) === null || _a === void 0 ? void 0 : _a.labels) === "fixed",
-      [`stzh-dropdown--popover-placement-${this.popoverPlacement}`]: !!this.popoverPlacement,
-      [`stzh-dropdown--size-${this.size}`]: !!this.size,
-      [`stzh-dropdown--${this.variant}`]: !!this.variant
-    };
-    return (index.h(index.Host, null, index.h("div", { class: classes, ref: (el) => (this.rootElement = el) }, index.h("div", { class: "stzh-dropdown__field-wrapper" }, index.h("select", { id: this.dropdownId, class: "stzh-dropdown__select", ref: (el) => (this.select = el), multiple: this.multiple, name: this.name, disabled: this.disabled, "aria-invalid": this.invalid ? "true" : "false", "aria-describedby": `${this.dropdownId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false" }, index.h("slot", null)), index.h("div", { class: "stzh-dropdown__sizer" }, this.placeholder), index.h("stzh-icon", { name: "angle-down", class: "stzh-dropdown__angle-icon" }), index.h("div", { class: "stzh-dropdown__icon-wrapper" }, this.icon ?
-      index.h("stzh-icon", { class: "stzh-dropdown__icon", name: this.icon })
-      :
-        index.h("slot", { name: "icon" })), index.h("label", { class: "stzh-dropdown__label", htmlFor: this.dropdownId }, this.label ? this.label : index.h("slot", { name: "label" }), this.showMarker &&
-      index.h("span", { class: "stzh-dropdown__marker" }, index.h("span", { class: "stzh-dropdown__marker-symbol", "aria-hidden": "true" }, this.required
-        ? this.localization.$globals.requiredFieldMarker
-        : this.localization.$globals.optionalFieldMarker), index.h("span", { class: "stzh-dropdown__marker-text" }, this.required
-        ? this.localization.$globals.requiredFieldText
-        : this.localization.$globals.optionalFieldText)))), index.h(stzhInputDescription.StzhInputDescription, { classPrefix: "stzh-dropdown", id: `${this.dropdownId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "options": ["optionsWatcher"],
-    "items": ["itemsWatcher"],
-    "searchField": ["searchFieldWatcher"],
-    "optgroups": ["optgroupsWatcher"],
-    "error": ["errorWatcher"]
-  }; }
-};
+const TomSelectInputHide = function (_plugin_options) {
+  // const self = this;
+  // self.on("initialize", () => {
+  //   const input = self.control_input as HTMLInputElement;
+  //   if (input) input.disabled = true;
+  // })
+};
+const CLASS_FILLED = "stzh-dropdown--is-filled";
+const CLASS_FOCUS = "stzh-dropdown--has-focus";
+tomSelect_base.define("remove_button", remove_button);
+tomSelect_base.define("checkbox_options", checkbox_options);
+tomSelect_base.define("input_autogrow", input_autogrow);
+tomSelect_base.define("no_backspace_delete", no_backspace_delete);
+tomSelect_base.define("input_hide", TomSelectInputHide);
+let dropdownCounter = 0;
+const StzhDropdown = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.stzhChange = index.createEvent(this, "stzhChange", 7);
+    this.stzhItemAdd = index.createEvent(this, "stzhItemAdd", 7);
+    this.stzhItemRemove = index.createEvent(this, "stzhItemRemove", 7);
+    this.stzhOptionAdd = index.createEvent(this, "stzhOptionAdd", 7);
+    this.stzhOptionRemove = index.createEvent(this, "stzhOptionRemove", 7);
+    this.stzhOpen = index.createEvent(this, "stzhOpen", 7);
+    this.stzhClose = index.createEvent(this, "stzhClose", 7);
+    this.stzhFocus = index.createEvent(this, "stzhFocus", 7);
+    this.stzhBlur = index.createEvent(this, "stzhBlur", 7);
+    this.stzhInit = index.createEvent(this, "stzhInit", 7);
+    /**
+     * An array of property names to analyze when filtering options.
+     * Weights can be given to each field to improve search result:
+     * `[{"field":"text","weight":2},{"field":"text2","weight":0.5}]`
+     */
+    this.searchField = ["text"];
+    /** Whether multiple items option can be selected */
+    this.multiple = false;
+    /** Show inline (auto width) */
+    this.inline = false;
+    /** The max number of options to display in the dropdown. Set to `null` for an unlimited number of options. */
+    this.maxOptions = 50;
+    /** When searching for multiple terms (separated by space), this is the operator used. Can be 'and' or 'or' */
+    this.searchConjunction = "and";
+    /**  If true, any options with a "" value will be treated like a normal option. This defaults to false to accommodate the common <select> practice of having the first empty option to act as a placeholder. */
+    this.allowEmptyOption = false;
+    /** Show the dropdown immediately when the control receives focus. */
+    this.openOnFocus = true;
+    /** After a selection is made, the dropdown will remain open if in a multi-selection control or will close in a single-selection control. Setting closeAfterSelect to true will force the dropdown to close after selections are made. Setting closeAfterSelect to false will keep the dropdown open after selections are made. */
+    this.closeAfterSelect = null;
+    /** Invoked when new options should be loaded from the server. Called with the current query string and a callback function to call with the results when they are loaded (or nothing when an error arises). */
+    this.load = null;
+    /** Minimum of characters required to execute the `load` function */
+    this.minCharacters = 3;
+    /** The number of milliseconds to wait before requesting options from the server or null. If null, throttling is disabled. Useful when loading options dynamically while the user types a search / filter expression. */
+    this.loadThrottle = 300;
+    /** If true, the load function will be called upon control initialization (with an empty search). Alternatively it can be set to 'focus' to call the load function when control receives focus. */
+    this.preload = false;
+    /** The name of the property to render as an option / item label (not needed when custom rendering functions are defined). */
+    this.labelField = "text";
+    /** The name of the property to use as the value when an item is selected. */
+    this.valueField = "value";
+    /** The name of the property to group items by. */
+    this.optgroupField = "optgroup";
+    /** The name of the property to render as an option group label (not needed when custom rendering functions are defined). */
+    this.optgroupLabelField = "label";
+    /** The name of the option group property that serves as its unique identifier. */
+    this.optgroupValueField = "value";
+    /** Name of hidden select element */
+    this.name = "";
+    /** Variant */
+    this.variant = "default";
+    /** Size variant */
+    this.size = "default";
+    /** Whether the dropdown is disabled */
+    this.disabled = false;
+    /** Popover placement */
+    this.popoverPlacement = "bottom";
+    /** Label */
+    this.label = "";
+    /** Icon (use instead of icon slot) */
+    this.icon = "";
+    /** Prevent option search */
+    this.noSearch = false;
+    /** Prevent backspace delete */
+    this.noBackspaceDelete = false;
+    /** Invalid status */
+    this.invalid = false;
+    /** Required status */
+    this.required = false;
+    /** Show text in label depending if field is optional/required */
+    this.showMarker = false;
+    /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
+    this.a11yDescribedby = "";
+  }
+  optionsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._options = JSON.parse(newValue);
+    }
+    else {
+      this._options = newValue;
+    }
+  }
+  itemsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._items = JSON.parse(newValue);
+    }
+    else {
+      this._items = newValue;
+    }
+  }
+  searchFieldWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._searchField = JSON.parse(newValue);
+    }
+    else {
+      this._searchField = newValue;
+    }
+  }
+  optgroupsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._optgroups = JSON.parse(newValue);
+    }
+    else {
+      this._optgroups = newValue;
+    }
+  }
+  errorWatcher(newValue) {
+    if (typeof newValue === "string") {
+      try {
+        this._error = JSON.parse(newValue);
+      }
+      catch (e) {
+        if (newValue) {
+          this._error = [newValue];
+        }
+        else {
+          this._error = [];
+        }
+      }
+    }
+    else if (newValue) {
+      this._error = newValue;
+    }
+    else {
+      this._error = [];
+    }
+    this.invalid = this._error.length > 0;
+  }
+  /**
+   * Returns the value of the control.
+   * If multiple items can be selected,
+   * this returns an array, otherwise a string.
+  */
+  async getValue() {
+    return this.tomSelect.getValue();
+  }
+  /** Set new value */
+  async setValue(newValue) {
+    this.tomSelect.setValue(newValue);
+  }
+  /** Focus select */
+  async setFocus() {
+    this.tomSelect.focus();
+  }
+  updateFilled() {
+    if (this._items.length > 0) {
+      this.rootElement.classList.add(CLASS_FILLED);
+    }
+    else {
+      this.rootElement.classList.remove(CLASS_FILLED);
+    }
+  }
+  async componentWillLoad() {
+    this.dropdownId = `stzh-dropdown-${dropdownCounter++}`;
+    this.optionsWatcher(this.options);
+    this.optgroupsWatcher(this.optgroups);
+    this.itemsWatcher(this.items);
+    this.searchFieldWatcher(this.searchField);
+    this.errorWatcher(this.error);
+    if (!this.localization) {
+      this.localization = await translationUtils.fetchTranslations(this.element, 'dropdown');
+    }
+  }
+  async componentWillUpdate() {
+    if (this.tomSelect) {
+      this.tomSelect.destroy();
+      this.tomSelect = null;
+    }
+  }
+  async componentDidRender() {
+    if (this.tomSelect) {
+      return;
+    }
+    const plugins = {};
+    if (this.noSearch) {
+      plugins["input_hide"] = {};
+    }
+    else {
+      plugins["input_autogrow"] = {};
+    }
+    if (this.noBackspaceDelete) {
+      plugins["no_backspace_delete"] = {};
+    }
+    if (this.multiple) {
+      plugins["checkbox_options"] = {};
+      plugins["remove_button"] = {
+        title: this.localization.removeButtonTitle,
+        label: '<stzh-icon name="close" class="stzh-dropdown__remove-icon"></stzh-icon>'
+      };
+    }
+    const tomSelectOptions = {
+      plugins,
+      maxItems: this.multiple ? null : 1,
+      maxOptions: this.maxOptions,
+      items: this._items,
+      optgroups: this._optgroups,
+      searchField: this._searchField,
+      searchConjunction: this.searchConjunction,
+      allowEmptyOption: this.allowEmptyOption,
+      closeAfterSelect: this.closeAfterSelect !== null
+        ? this.closeAfterSelect
+        : !this.multiple,
+      labelField: this.labelField,
+      valueField: this.valueField,
+      optgroupField: this.optgroupField,
+      optgroupLabelField: this.optgroupLabelField,
+      optgroupValueField: this.optgroupValueField,
+      lockOptgroupOrder: this.lockOptgroupOrder,
+      load: this.load,
+      shouldLoad: (query) => {
+        return query.length >= this.minCharacters;
+      },
+      loadThrottle: this.loadThrottle,
+      preload: this.preload,
+      openOnFocus: this.openOnFocus,
+      loadingClass: "is-loading",
+      hideSelected: false,
+      duplicates: false,
+      delimiter: ",",
+      copyClassesToDropdown: false,
+      placeholder: this.placeholder,
+      hidePlaceholder: null,
+      // if you want the user to be able to add own items enable this option
+      // (but checkbox_options plugin throws an error and would need a fix first)
+      // create: true,
+      // createOnBlur: false,
+      // createFilter: null,
+      // persist: false,
+      render: {
+        option: (data, escape) => {
+          return `
+            <div class="stzh-dropdown__option" title="${escape(data[this.labelField])}">
+              <stzh-icon name="checkmark" class="stzh-dropdown__option-check"></stzh-icon>
+              <span class="stzh-dropdown__option-title">
+                ${escape(data[this.labelField])}
+              </span>
+            </div>
+          `;
+        },
+        item: (data, escape) => {
+          return `
+            <div class="stzh-dropdown__item">
+              ${escape(data[this.labelField])}
+            </div>
+          `;
+        },
+        option_create: (data, escape) => {
+          return `
+            <div class="stzh-dropdown__create">
+              ${this.localization.create.replace(/{x}/gi, escape(data.input))}&hellip;
+            </div>
+          `;
+        },
+        no_results: (data, escape) => {
+          return `
+            <div class="stzh-dropdown__no-results">
+              ${this.localization.noResults.replace(/{x}/gi, escape(data.input))}
+            </div>`;
+        },
+        not_loading: this.load === null ? null : (_data, escape) => {
+          return `
+            <div class="stzh-dropdown__not-loading">
+              ${this.localization.notLoading.replace(/{x}/gi, escape(this.minCharacters.toString()))}
+            </div>
+          `;
+        },
+        optgroup: (data) => {
+          let optgroup = document.createElement("div");
+          optgroup.className = "stzh-dropdown__optgroup";
+          optgroup.appendChild(data.options);
+          return optgroup;
+        },
+        optgroup_header: (data, escape) => {
+          return `
+            <div class="stzh-dropdown__optgroup-header">
+              ${escape(data.label)}
+            </div>
+          `;
+        },
+        loading: () => {
+          return `
+            <div class="stzh-dropdown__loader">
+              <stzh-loader></stzh-loader>
+            </div>
+          `;
+        },
+        dropdown: () => {
+          return `<div class="stzh-dropdown__dropdown"></div>`;
+        }
+      },
+      onChange: (value) => {
+        this._items = this.tomSelect.items;
+        this.updateFilled();
+        this.stzhChange.emit({
+          component: "stzh-dropdown",
+          value
+        });
+      },
+      onItemAdd: (value) => {
+        this._items = this.tomSelect.items;
+        this.stzhItemAdd.emit({
+          component: "stzh-dropdown",
+          value
+        });
+      },
+      onItemRemove: (value) => {
+        this._items = this.tomSelect.items;
+        this.stzhItemRemove.emit({
+          component: "stzh-dropdown",
+          value
+        });
+      },
+      onOptionAdd: (value) => {
+        this._options = this.tomSelect.options;
+        this.updateFilled();
+        this.stzhOptionAdd.emit({
+          component: "stzh-dropdown",
+          value
+        });
+      },
+      onOptionRemove: (value) => {
+        this._options = this.tomSelect.options;
+        this.updateFilled();
+        this.stzhOptionRemove.emit({
+          component: "stzh-dropdown",
+          value
+        });
+      },
+      onDropdownOpen: () => {
+        this.stzhOpen.emit({
+          component: "stzh-dropdown"
+        });
+      },
+      onDropdownClose: () => {
+        this.stzhClose.emit({
+          component: "stzh-dropdown"
+        });
+      },
+      onFocus: () => {
+        this.rootElement.classList.add(CLASS_FOCUS);
+        const focusEvent = new FocusEvent('focus', {
+          view: window,
+          bubbles: false,
+          cancelable: false
+        });
+        this.element.dispatchEvent(focusEvent);
+        this.stzhFocus.emit({
+          component: "stzh-dropdown"
+        });
+      },
+      onBlur: () => {
+        this.rootElement.classList.remove(CLASS_FOCUS);
+        const blurEvent = new FocusEvent('blur', {
+          view: window,
+          bubbles: false,
+          cancelable: false
+        });
+        this.element.dispatchEvent(blurEvent);
+        this.stzhBlur.emit({
+          component: "stzh-dropdown"
+        });
+      },
+      onInitialize: () => {
+        this.stzhInit.emit({
+          component: "stzh-dropdown"
+        });
+      },
+    };
+    if (this._options) {
+      tomSelectOptions.options = this._options;
+    }
+    if (this._optgroups) {
+      tomSelectOptions.optgroups = this._optgroups;
+    }
+    if (this._items) {
+      tomSelectOptions.items = this._items;
+    }
+    this.tomSelect = new tomSelect_base(this.select, tomSelectOptions);
+  }
+  disconnectedCallback() {
+    if (this.tomSelect) {
+      this.tomSelect.destroy();
+      this.tomSelect = null;
+    }
+  }
+  render() {
+    var _a;
+    const iconUsed = utils.hasSlot(this.element, 'icon') || !!this.icon;
+    const descriptionUsed = utils.hasSlot(this.element, 'description') || !!this.description;
+    const descriptionLongUsed = utils.hasSlot(this.element, 'description-long') || !!this.descriptionLong;
+    const errorUsed = utils.hasSlot(this.element, 'error') || !!this.error;
+    const classes = {
+      "stzh-dropdown": true,
+      "stzh-dropdown--is-inline": this.inline,
+      "stzh-dropdown--is-multiple": this.multiple,
+      "stzh-dropdown--is-disabled": this.disabled,
+      "stzh-dropdown--is-required": this.required,
+      "stzh-dropdown--is-invalid": this.invalid,
+      [CLASS_FILLED]: this._items && this._items.length > 0,
+      "stzh-dropdown--has-icon": iconUsed,
+      "stzh-dropdown--has-description": descriptionUsed,
+      "stzh-dropdown--has-description-long": descriptionLongUsed,
+      "stzh-dropdown--has-error": errorUsed,
+      "stzh-dropdown--has-placeholder": !!this.placeholder,
+      "stzh-dropdown--has-fixed-label": ((_a = window === null || window === void 0 ? void 0 : window.stzhComponents) === null || _a === void 0 ? void 0 : _a.labels) === "fixed",
+      [`stzh-dropdown--popover-placement-${this.popoverPlacement}`]: !!this.popoverPlacement,
+      [`stzh-dropdown--size-${this.size}`]: !!this.size,
+      [`stzh-dropdown--${this.variant}`]: !!this.variant
+    };
+    return (index.h(index.Host, null, index.h("div", { class: classes, ref: (el) => (this.rootElement = el) }, index.h("div", { class: "stzh-dropdown__field-wrapper" }, index.h("select", { id: this.dropdownId, class: "stzh-dropdown__select", ref: (el) => (this.select = el), multiple: this.multiple, name: this.name, disabled: this.disabled, "aria-invalid": this.invalid ? "true" : "false", "aria-describedby": `${this.dropdownId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false" }, index.h("slot", null)), index.h("div", { class: "stzh-dropdown__sizer" }, this.placeholder), index.h("stzh-icon", { name: "angle-down", class: "stzh-dropdown__angle-icon" }), index.h("div", { class: "stzh-dropdown__icon-wrapper" }, this.icon ?
+      index.h("stzh-icon", { class: "stzh-dropdown__icon", name: this.icon })
+      :
+        index.h("slot", { name: "icon" })), index.h("label", { class: "stzh-dropdown__label", htmlFor: this.dropdownId }, this.label ? this.label : index.h("slot", { name: "label" }), this.showMarker &&
+      index.h("span", { class: "stzh-dropdown__marker" }, index.h("span", { class: "stzh-dropdown__marker-symbol", "aria-hidden": "true" }, this.required
+        ? this.localization.$globals.requiredFieldMarker
+        : this.localization.$globals.optionalFieldMarker), index.h("span", { class: "stzh-dropdown__marker-text" }, this.required
+        ? this.localization.$globals.requiredFieldText
+        : this.localization.$globals.optionalFieldText)))), index.h(stzhInputDescription.StzhInputDescription, { classPrefix: "stzh-dropdown", id: `${this.dropdownId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "options": ["optionsWatcher"],
+    "items": ["itemsWatcher"],
+    "searchField": ["searchFieldWatcher"],
+    "optgroups": ["optgroupsWatcher"],
+    "error": ["errorWatcher"]
+  }; }
+};
 StzhDropdown.style = stzhDropdownCss;
 
 exports.stzh_dropdown = StzhDropdown;