npm - @oiz/stzh-components - Versions diffs - 2.7.0 → 2.8.0-beta - Mend

@oiz/stzh-components 2.7.0 → 2.8.0-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (773) hide show

package/dist/components/stzh-dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-dialog.js","mappings":"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","names":["StzhDialog"],"sources":["./src/components/stzh-dialog/stzh-dialog.scss?tag=stzh-dialog&encapsulation=scoped","./src/components/stzh-dialog/stzh-dialog.tsx"],"sourcesContent":[":host {\n --width: 100%;\n --padding: #{spaceCurveValue('large')};\n --close-color: #{$baseLeadColor};\n --backdrop-opacity: 0.8;\n\n @include mq($from: small) {\n --width: 536px;\n --padding: #{spaceCurveValue('large', 'small')};\n }\n\n @include mq($from: medium) {\n --width: 782px;\n --padding: #{spaceCurveValue('large', 'medium')};\n }\n\n @include mq($from: large) {\n --width: 832px;\n --padding: #{spaceCurveValue('large', 'large')};\n }\n\n &[size=\"small\"] {\n @include mq($from: small) {\n --width: 395px;\n }\n\n @include mq($from: medium) {\n --width: 460px;\n }\n\n @include mq($from: large) {\n --width: 512px;\n }\n }\n}\n\n.stzh-dialog {\n z-index: $zIndexDialog;\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n flex-direction: column;\n align-items: stretch;\n justify-content: stretch;\n\n &__content {\n z-index: 2;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-grow: 1;\n overflow: auto;\n }\n\n &__dialog {\n position: relative;\n display: flex;\n flex-direction: column;\n margin: auto;\n border: none;\n background-color: $colorWhite;\n width: var(--width);\n max-width: 100%;\n box-shadow: $boxShadowOverlay;\n height: 100vh;\n max-height: 100vh;\n // overflow: visible;\n overflow: hidden;\n outline: none;\n\n @include mq($from: small) {\n height: auto;\n }\n }\n\n &__backdrop {\n z-index: 1;\n\t\tposition: absolute;\n\t\ttop: 0px;\n\t\tleft: 0px;\n\t\twidth: 100%;\n height: 100%;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\ttext-align: center;\n background-color: $colorPrimary;\n opacity: var(--backdrop-opacity);\n }\n\n &__heading {\n padding: var(--padding);\n padding-bottom: 0;\n }\n\n &__dialog-content {\n padding: var(--padding);\n @include spaceCurve('padding-top', 'medium');\n @include spaceCurve('padding-bottom', 'medium');\n overflow: auto;\n flex-grow: 1;\n }\n\n &__actions {\n padding: var(--padding);\n padding-top: 0;\n }\n\n &__close-button {\n position: absolute;\n top: space('xsmall');\n right: space('xsmall');\n display: flex;\n appearance: none;\n font-family: inherit;\n border: none;\n background: none;\n padding: space('xsmall');\n margin: calc(#{space('xsmall')} * -1);\n border-radius: $buttonBorderRadius;\n cursor: pointer;\n\n @include mq($from: small) {\n top: space('small');\n right: space('small');\n }\n\n @include mq($from: medium) {\n top: space('large');\n right: space('large');\n }\n\n @include mq($from: large) {\n top: calc(#{space('xxlarge')} + #{space('xxsmall')});\n right: calc(#{space('xxlarge')} + #{space('xxsmall')});\n }\n }\n\n &__close-icon {\n --size: #{iconSize('medium')};\n color: var(--close-color);\n }\n\n &--is-open {\n display: flex;\n }\n}\n","import {\n Host,\n Component,\n Element,\n Method,\n Listen,\n Prop,\n Event,\n EventEmitter,\n h,\n} from \"@stencil/core\";\n\nimport {\n StzhDialogOpenEvent,\n StzhDialogCloseEvent\n} from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { StzhDialogLocalizedText } from \"./stzh-dialog.localization\"\n\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\nconst keyCode = {\n ESC: 27\n};\n\nconst CLASS_BODY_OPEN = \"stzh-dialog-open\";\n\nlet activeDialog: StzhDialog = null;\nlet dialogCounter = 0;\n\n/*\n @slot - Slot for any content inside the dialog\n * @prop --width: Width of dialog\n /\n@Component({\n tag: \"stzh-dialog\",\n styleUrl: \"stzh-dialog.scss\",\n scoped: true\n})\nexport class StzhDialog {\n /* Translation strings /\n @Prop() localization: StzhDialogLocalizedText;\n\n /* Close dialog when pressing ESC /\n @Prop() closeOnEscapeKey: boolean = false;\n\n /* Close dialog when clicking outside of it /\n @Prop() closeOnBackdropClick: boolean = false;\n\n /* Open status /\n @Prop({ mutable: true }) open: boolean = false;\n\n /* Stay in original position (true) or move to body (false) /\n @Prop() stay: boolean = true;\n\n /* Size /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Whether to hide close button /\n @Prop() hideClose: boolean = false;\n\n /* Heading text /\n @Prop() heading: string = \"\";\n\n /* Accessibility role /\n @Prop({ attribute: \"a11y-role\" }) a11yRole: \"dialog\" \| \"alertdialog\" = \"alertdialog\";\n\n /* Accessible label for dialog (use if no heading is used) /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the close button element.\n * Default value will be taken from translations.\n /\n @Prop() closeAnalyticsId: string;\n\n /* Dialog open event /\n @Event() stzhOpen: EventEmitter<StzhDialogOpenEvent>;\n\n /* Dialog close event */\n @Event() stzhClose: EventEmitter<StzhDialogCloseEvent>;\n\n @Element() element: HTMLStzhDialogElement;\n\n @Listen(\"click\", { target: \"document\", capture: true })\n handleOutsideClick(event: MouseEvent) {\n if (!this.open \|\| !this.closeOnBackdropClick) {\n return\n }\n\n const isClickOutside = event.target !== this.dialogElement\n && this.dialogElement.contains(event.target as HTMLElement) === false\n\n if (isClickOutside) {\n this.hide()\n }\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeydown(event: KeyboardEvent) {\n if (\n event.keyCode === keyCode.ESC\n && activeDialog === this\n && this.closeOnEscapeKey\n ) {\n this.hide();\n }\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleOpenTriggerClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (target.dataset.stzhDialogTrigger === this.element.id) {\n this.show();\n } else {\n const closest = target.closest(\"[data-stzh-dialog-trigger]\") as HTMLElement;\n\n if (closest && closest.dataset.stzhDialogTrigger === this.element.id) {\n this.show();\n }\n }\n }\n\n @Method()\n async show() {\n this.open = true;\n this.stzhOpen.emit({\n component: \"stzh-dialog\"\n });\n }\n\n @Method()\n async hide() {\n this.open = false;\n this.stzhClose.emit({\n component: \"stzh-dialog\"\n });\n }\n\n private observer: MutationObserver;\n private id: string;\n private trap: FocusTrap;\n private parentElement: HTMLElement;\n private dialogElement: HTMLDivElement;\n\n private handleDialogClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n if (target.dataset.stzhDialogClose) {\n this.hide();\n } else {\n const closest = target.closest(\"[data-stzh-dialog-close]\");\n\n if (closest) {\n this.hide();\n }\n }\n }\n\n private handleCloseButtonClick = () => {\n this.hide();\n }\n\n private init = () => {\n const actions = this.element.querySelector('stzh-actions[slot=\"actions\"]');\n\n if (actions) {\n setPropsIfNull(actions, {\n variant: \"dialog\",\n withBorder: true\n } as HTMLStzhActionsElement)\n }\n }\n\n private getSiblings() {\n if (!this.parentElement) {\n return [];\n }\n\n return Array.from(this.parentElement.children).filter(\n (child) => child !== this.element\n );\n }\n\n private disableSiblings() {\n this.getSiblings().forEach((sibling) => {\n sibling.setAttribute(\"aria-hidden\", \"true\");\n });\n }\n\n private enableSiblings() {\n this.getSiblings().forEach((sibling) => {\n sibling.removeAttribute(\"aria-hidden\");\n });\n }\n\n private dialogShown() {\n activeDialog = this;\n document.body.classList.add(CLASS_BODY_OPEN);\n this.disableSiblings();\n\n if (this.trap) {\n this.trap.activate();\n }\n }\n\n private dialogHidden() {\n document.body.classList.remove(CLASS_BODY_OPEN);\n this.enableSiblings();\n\n if (this.trap) {\n this.trap.deactivate();\n }\n\n activeDialog = null;\n }\n\n async componentWillLoad() {\n this.id = `stzh-dialog-${dialogCounter}`;\n dialogCounter++;\n\n if (!this.localization) {\n this.localization = await fetchTranslations(this.element, \"dialog\");\n }\n }\n\n componentDidRender() {\n this.open ? this.dialogShown() : this.dialogHidden();\n }\n\n componentDidUpdate() {\n this.trap.updateContainerElements(this.element);\n }\n\n componentDidLoad() {\n this.trap = createFocusTrap(this.element, {\n fallbackFocus: this.dialogElement,\n ...createBaseFocusTrapOptions()\n });\n\n if (this.open) {\n this.dialogShown();\n }\n }\n\n connectedCallback() {\n if (!this.stay && this.element.parentElement !== document.body) {\n document.body.appendChild(this.element);\n }\n\n this.parentElement = this.element.parentElement;\n\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n this.dialogHidden();\n\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n \"stzh-dialog\": true,\n \"stzh-dialog--is-open\": this.open,\n \"stzh-dialog--has-heading\": !!this.heading,\n \"stzh-dialog--has-close-hidden\": this.hideClose,\n [`stzh-dialog--size-${this.size}`]: !!this.size,\n }}\n >\n <div class=\"stzh-dialog__backdrop\"></div>\n <div class=\"stzh-dialog__content\">\n <div\n class=\"stzh-dialog__dialog\"\n ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n tabindex=\"-1\"\n role={this.a11yRole}\n aria-label={this.a11yLabel}\n aria-labelledby={this.heading ? `${this.id}-heading` : null}\n aria-hidden={this.open ? \"false\" : \"true\"}\n onClick={this.handleDialogClick}\n >\n {this.heading &&\n <stzh-heading\n id={`${this.id}-heading`}\n class=\"stzh-dialog__heading\"\n level=\"2\"\n with-border\n >\n {this.heading}\n </stzh-heading>\n }\n\n <div class=\"stzh-dialog__dialog-content\">\n <slot></slot>\n </div>\n\n <div class=\"stzh-dialog__actions\">\n <slot name=\"actions\"></slot>\n </div>\n\n {!this.hideClose &&\n <button\n class=\"stzh-dialog__close-button\"\n onClick={this.handleCloseButtonClick}\n aria-label={this.localization.close}\n type=\"button\"\n s-object-id={this.closeAnalyticsId \|\| this.localization.close}\n >\n <stzh-icon class=\"stzh-dialog__close-icon\" name=\"close\"></stzh-icon>\n </button>\n }\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}
1	+ {"file":"stzh-dialog.js","mappings":"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","names":["StzhDialog"],"sources":["./src/components/stzh-dialog/stzh-dialog.scss?tag=stzh-dialog&encapsulation=scoped","./src/components/stzh-dialog/stzh-dialog.tsx"],"sourcesContent":[":host {\n --width: 100%;\n --padding: #{spaceCurveValue('large')};\n --close-color: #{$baseLeadColor};\n --backdrop-opacity: 0.8;\n\n @include mq($from: small) {\n --width: 536px;\n --padding: #{spaceCurveValue('large', 'small')};\n }\n\n @include mq($from: medium) {\n --width: 782px;\n --padding: #{spaceCurveValue('large', 'medium')};\n }\n\n @include mq($from: large) {\n --width: 832px;\n --padding: #{spaceCurveValue('large', 'large')};\n }\n\n &[size=\"small\"] {\n @include mq($from: small) {\n --width: 395px;\n }\n\n @include mq($from: medium) {\n --width: 460px;\n }\n\n @include mq($from: large) {\n --width: 512px;\n }\n }\n}\n\n.stzh-dialog {\n z-index: $zIndexDialog;\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n flex-direction: column;\n align-items: stretch;\n justify-content: stretch;\n\n &__content {\n z-index: 2;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-grow: 1;\n overflow: auto;\n }\n\n &__dialog {\n position: relative;\n display: flex;\n flex-direction: column;\n margin: auto;\n border: none;\n background-color: $colorWhite;\n width: var(--width);\n max-width: 100%;\n box-shadow: $boxShadowOverlay;\n height: 100vh;\n max-height: 100vh;\n // overflow: visible;\n overflow: hidden;\n outline: none;\n\n @include mq($from: small) {\n height: auto;\n }\n }\n\n &__backdrop {\n z-index: 1;\n\t\tposition: absolute;\n\t\ttop: 0px;\n\t\tleft: 0px;\n\t\twidth: 100%;\n height: 100%;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\ttext-align: center;\n background-color: $colorPrimary;\n opacity: var(--backdrop-opacity);\n }\n\n &__heading {\n padding: var(--padding);\n padding-bottom: 0;\n }\n\n &__dialog-content {\n padding: var(--padding);\n @include spaceCurve('padding-top', 'medium');\n @include spaceCurve('padding-bottom', 'medium');\n overflow: auto;\n flex-grow: 1;\n }\n\n &__actions {\n padding: var(--padding);\n padding-top: 0;\n }\n\n &__close-button {\n position: absolute;\n top: space('xsmall');\n right: space('xsmall');\n display: flex;\n appearance: none;\n font-family: inherit;\n border: none;\n background: none;\n padding: space('xsmall');\n margin: calc(#{space('xsmall')} * -1);\n border-radius: $buttonBorderRadius;\n cursor: pointer;\n\n @include mq($from: small) {\n top: space('small');\n right: space('small');\n }\n\n @include mq($from: medium) {\n top: space('large');\n right: space('large');\n }\n\n @include mq($from: large) {\n top: calc(#{space('xxlarge')} + #{space('xxsmall')});\n right: calc(#{space('xxlarge')} + #{space('xxsmall')});\n }\n }\n\n &__close-icon {\n --size: #{iconSize('medium')};\n color: var(--close-color);\n }\n\n &--is-open {\n display: flex;\n }\n}\n","import {\n Host,\n Component,\n Element,\n Method,\n Listen,\n Prop,\n Event,\n EventEmitter,\n h,\n} from \"@stencil/core\";\n\nimport {\n StzhDialogOpenEvent,\n StzhDialogCloseEvent\n} from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { StzhDialogLocalizedText } from \"./stzh-dialog.localization\"\n\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\nconst keyCode = {\n ESC: 27\n};\n\nconst CLASS_BODY_OPEN = \"stzh-dialog-open\";\n\nlet activeDialog: StzhDialog = null;\nlet dialogCounter = 0;\n\n/*\n @slot - Slot for any content inside the dialog\n * @prop --width: Width of dialog\n /\n@Component({\n tag: \"stzh-dialog\",\n styleUrl: \"stzh-dialog.scss\",\n scoped: true\n})\nexport class StzhDialog {\n /* Translation strings /\n @Prop() localization: StzhDialogLocalizedText;\n\n /* Close dialog when pressing ESC /\n @Prop() closeOnEscapeKey: boolean = false;\n\n /* Close dialog when clicking outside of it /\n @Prop() closeOnBackdropClick: boolean = false;\n\n /* Open status /\n @Prop({ mutable: true }) open: boolean = false;\n\n /* Stay in original position (true) or move to body (false) /\n @Prop() stay: boolean = true;\n\n /* Size /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Whether to hide close button /\n @Prop() hideClose: boolean = false;\n\n /* Heading text /\n @Prop() heading: string = \"\";\n\n /* Accessibility role /\n @Prop({ attribute: \"a11y-role\" }) a11yRole: \"dialog\" \| \"alertdialog\" = \"alertdialog\";\n\n /* Accessible label for dialog (use if no heading is used) /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the close button element.\n * Default value will be taken from translations.\n /\n @Prop() closeAnalyticsId: string;\n\n /* Dialog open event /\n @Event() stzhOpen: EventEmitter<StzhDialogOpenEvent>;\n\n /* Dialog close event */\n @Event() stzhClose: EventEmitter<StzhDialogCloseEvent>;\n\n @Element() element: HTMLStzhDialogElement;\n\n @Listen(\"click\", { target: \"document\", capture: true })\n handleOutsideClick(event: MouseEvent) {\n if (!this.open \|\| !this.closeOnBackdropClick) {\n return\n }\n\n const isClickOutside = event.target !== this.dialogElement\n && this.dialogElement.contains(event.target as HTMLElement) === false\n\n if (isClickOutside) {\n this.hide()\n }\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeydown(event: KeyboardEvent) {\n if (\n event.keyCode === keyCode.ESC\n && activeDialog === this\n && this.closeOnEscapeKey\n ) {\n this.hide();\n }\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleOpenTriggerClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (target.dataset.stzhDialogTrigger === this.element.id) {\n this.show();\n } else {\n const closest = target.closest(\"[data-stzh-dialog-trigger]\") as HTMLElement;\n\n if (closest && closest.dataset.stzhDialogTrigger === this.element.id) {\n this.show();\n }\n }\n }\n\n @Method()\n async show() {\n this.open = true;\n this.stzhOpen.emit({\n component: \"stzh-dialog\"\n });\n }\n\n @Method()\n async hide() {\n this.open = false;\n this.stzhClose.emit({\n component: \"stzh-dialog\"\n });\n }\n\n private observer: MutationObserver;\n private id: string;\n private trap: FocusTrap;\n private parentElement: HTMLElement;\n private dialogElement: HTMLDivElement;\n\n private handleDialogClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n if (target.dataset.stzhDialogClose) {\n this.hide();\n } else {\n const closest = target.closest(\"[data-stzh-dialog-close]\");\n\n if (closest) {\n this.hide();\n }\n }\n }\n\n private handleCloseButtonClick = () => {\n this.hide();\n }\n\n private init = () => {\n const actions = this.element.querySelector('stzh-actions[slot=\"actions\"]');\n\n if (actions) {\n setPropsIfNull(actions, {\n variant: \"dialog\",\n withBorder: true\n } as HTMLStzhActionsElement)\n }\n }\n\n private getSiblings() {\n if (!this.parentElement) {\n return [];\n }\n\n return Array.from(this.parentElement.children).filter(\n (child) => child !== this.element\n );\n }\n\n private disableSiblings() {\n this.getSiblings().forEach((sibling) => {\n sibling.setAttribute(\"aria-hidden\", \"true\");\n });\n }\n\n private enableSiblings() {\n this.getSiblings().forEach((sibling) => {\n sibling.removeAttribute(\"aria-hidden\");\n });\n }\n\n private dialogShown() {\n activeDialog = this;\n document.body.classList.add(CLASS_BODY_OPEN);\n this.disableSiblings();\n\n if (this.trap) {\n this.trap.activate();\n }\n }\n\n private dialogHidden() {\n document.body.classList.remove(CLASS_BODY_OPEN);\n this.enableSiblings();\n\n if (this.trap) {\n this.trap.deactivate();\n }\n\n activeDialog = null;\n }\n\n async componentWillLoad() {\n this.id = `stzh-dialog-${dialogCounter}`;\n dialogCounter++;\n\n if (!this.localization) {\n this.localization = await fetchTranslations(this.element, \"dialog\");\n }\n }\n\n componentDidRender() {\n this.open ? this.dialogShown() : this.dialogHidden();\n }\n\n componentDidUpdate() {\n this.trap.updateContainerElements(this.element);\n }\n\n componentDidLoad() {\n this.trap = createFocusTrap(this.element, {\n fallbackFocus: this.dialogElement,\n ...createBaseFocusTrapOptions()\n });\n\n if (this.open) {\n this.dialogShown();\n }\n }\n\n connectedCallback() {\n if (!this.stay && this.element.parentElement !== document.body) {\n document.body.appendChild(this.element);\n }\n\n this.parentElement = this.element.parentElement;\n\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n this.dialogHidden();\n\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n \"stzh-dialog\": true,\n \"stzh-dialog--is-open\": this.open,\n \"stzh-dialog--has-heading\": !!this.heading,\n \"stzh-dialog--has-close-hidden\": this.hideClose,\n [`stzh-dialog--size-${this.size}`]: !!this.size,\n }}\n >\n <div class=\"stzh-dialog__backdrop\"></div>\n <div class=\"stzh-dialog__content\">\n <div\n class=\"stzh-dialog__dialog\"\n ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n tabindex=\"-1\"\n role={this.a11yRole}\n aria-label={this.a11yLabel \|\| null}\n aria-labelledby={this.heading ? `${this.id}-heading` : null}\n aria-hidden={this.open ? \"false\" : \"true\"}\n onClick={this.handleDialogClick}\n >\n {this.heading &&\n <stzh-heading\n id={`${this.id}-heading`}\n class=\"stzh-dialog__heading\"\n level=\"2\"\n with-border\n >\n {this.heading}\n </stzh-heading>\n }\n\n <div class=\"stzh-dialog__dialog-content\">\n <slot></slot>\n </div>\n\n <div class=\"stzh-dialog__actions\">\n <slot name=\"actions\"></slot>\n </div>\n\n {!this.hideClose &&\n <button\n class=\"stzh-dialog__close-button\"\n onClick={this.handleCloseButtonClick}\n aria-label={this.localization.close}\n type=\"button\"\n s-object-id={this.closeAnalyticsId \|\| this.localization.close}\n >\n <stzh-icon class=\"stzh-dialog__close-icon\" name=\"close\"></stzh-icon>\n </button>\n }\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}

package/dist/components/stzh-dropdown2.js CHANGED Viewed

@@ -4900,7 +4900,7 @@ function plugin () {
   });
 }
-const stzhDropdownCss = "@charset \"UTF-8\";: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;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}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);--icon-angle-size:var(--stzh-icon-size-medium);--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));--active-icon-angle-transform:rotate(180deg) translateY(50%);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;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}stzh-dropdown[variant=plain]{--background-color:transparent}stzh-dropdown[inline]:not([inline=false]){--popover-width:auto;width:auto}stzh-dropdown[size=small]{--icon-angle-size:var(--stzh-icon-size-small)}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:transparent;--label-color:var(--stzh-color-grey61);--placeholder-color:var(--stzh-color-grey61);--background-color:var(--stzh-color-black8);--label-background:transparent;--hover-color:var(--stzh-color-grey61);--hover-border-color:transparent}stzh-dropdown[disabled]:not([disabled=false])[variant=plain]{--background-color:transparent}.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;font-family:inherit;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)}.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__vhidden{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__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__icon-angle-wrapper{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__icon-angle-wrapper,.stzh-dropdown__select:focus-within~.stzh-dropdown__icon-angle-wrapper,.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__icon-angle-wrapper{display:-ms-flexbox;display:flex;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none}.stzh-dropdown__icon-wrapper{left:var(--stzh-space-medium)}.stzh-dropdown__icon-angle-wrapper{right:var(--stzh-space-medium)}.stzh-dropdown__icon-wrapper stzh-icon,.stzh-dropdown__icon{--size:var(--icon-size)}.stzh-dropdown__icon-angle-wrapper stzh-icon,.stzh-dropdown__icon-angle{--size:var(--icon-angle-size)}.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-nano-font-size);line-height:var(--stzh-font-nano-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.5px}.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;font-family:inherit;-webkit-text-decoration-line:none;text-decoration-line: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::before{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;content:\"✓\"}.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__select.dropdown-active~.stzh-dropdown__icon-angle-wrapper{-webkit-transform:var(--active-icon-angle-transform);transform:var(--active-icon-angle-transform)}.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;font-family:inherit;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%);-webkit-text-decoration-line:none;text-decoration-line: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,.stzh-dropdown--popover-placement-top-end .stzh-dropdown__dropdown,.stzh-dropdown--popover-placement-top-center .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,.stzh-dropdown--popover-placement-top-end.stzh-dropdown--plain .stzh-dropdown__dropdown,.stzh-dropdown--popover-placement-top-center.stzh-dropdown--plain .stzh-dropdown__dropdown{margin-bottom:0}.stzh-dropdown--popover-placement-top-end .stzh-dropdown__dropdown,.stzh-dropdown--popover-placement-bottom-end .stzh-dropdown__dropdown{left:auto;right:0}.stzh-dropdown--popover-placement-top-center .stzh-dropdown__dropdown,.stzh-dropdown--popover-placement-bottom-center .stzh-dropdown__dropdown{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.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--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__icon-angle-wrapper{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{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{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{left:0;padding:0;max-width:100%}.stzh-dropdown--has-no-search .ts-control>input{position:absolute;width:0px;height:0px}.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 stzhDropdownCss = "@charset \"UTF-8\";: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;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}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);--icon-angle-size:var(--stzh-icon-size-medium);--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));--active-icon-angle-transform:rotate(180deg) translateY(50%);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;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}stzh-dropdown[variant=plain]{--background-color:transparent}stzh-dropdown[inline]:not([inline=false]){--popover-width:auto;width:auto}stzh-dropdown[size=small]{--icon-angle-size:var(--stzh-icon-size-small)}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:transparent;--label-color:var(--stzh-color-grey61);--placeholder-color:var(--stzh-color-grey61);--background-color:var(--stzh-color-black8);--label-background:transparent;--hover-color:var(--stzh-color-grey61);--hover-border-color:transparent}stzh-dropdown[disabled]:not([disabled=false])[variant=plain]{--background-color:transparent}.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;font-family:inherit;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)}.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__vhidden{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__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__icon-angle-wrapper{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__icon-angle-wrapper,.stzh-dropdown__select:focus-within~.stzh-dropdown__icon-angle-wrapper,.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__icon-angle-wrapper{display:-ms-flexbox;display:flex;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none}.stzh-dropdown__icon-wrapper{left:var(--stzh-space-medium)}.stzh-dropdown__icon-angle-wrapper{right:var(--stzh-space-medium)}.stzh-dropdown__icon-wrapper stzh-icon,.stzh-dropdown__icon{--size:var(--icon-size)}.stzh-dropdown__icon-angle-wrapper stzh-icon,.stzh-dropdown__icon-angle{--size:var(--icon-angle-size)}.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-nano-font-size);line-height:var(--stzh-font-nano-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.5px}.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;font-family:inherit;-webkit-text-decoration-line:none;text-decoration-line: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::before{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;content:\"✓\"}.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__select.dropdown-active~.stzh-dropdown__icon-angle-wrapper{-webkit-transform:var(--active-icon-angle-transform);transform:var(--active-icon-angle-transform)}.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;font-family:inherit;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%);-webkit-text-decoration-line:none;text-decoration-line: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,.stzh-dropdown--popover-placement-top-end .stzh-dropdown__dropdown,.stzh-dropdown--popover-placement-top-center .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,.stzh-dropdown--popover-placement-top-end.stzh-dropdown--plain .stzh-dropdown__dropdown,.stzh-dropdown--popover-placement-top-center.stzh-dropdown--plain .stzh-dropdown__dropdown{margin-bottom:0}.stzh-dropdown--popover-placement-top-end .stzh-dropdown__dropdown,.stzh-dropdown--popover-placement-bottom-end .stzh-dropdown__dropdown{left:auto;right:0}.stzh-dropdown--popover-placement-top-center .stzh-dropdown__dropdown,.stzh-dropdown--popover-placement-bottom-center .stzh-dropdown__dropdown{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.stzh-dropdown--has-label-hidden .stzh-dropdown__label{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--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--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__icon-angle-wrapper{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{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{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{left:0;padding:0;max-width:100%}.stzh-dropdown--has-no-search .ts-control>input{position:absolute;width:0px;height:0px}.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 TomSelectInputReadonly = function (_plugin_options) {
   const self = this;
@@ -4968,6 +4968,7 @@ const StzhDropdown = /*@__PURE__*/ proxyCustomElement(class StzhDropdown extends
     this.disabled = false;
     this.popoverPlacement = "bottom";
     this.label = "";
+    this.labelHidden = false;
     this.icon = "";
     this.iconAngle = "angle-down";
     this.noSearch = false;
@@ -5368,6 +5369,7 @@ const StzhDropdown = /*@__PURE__*/ proxyCustomElement(class StzhDropdown extends
       "stzh-dropdown--has-error": errorUsed,
       "stzh-dropdown--has-no-search": this.noSearch,
       "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--has-label-hidden": this.labelHidden,
       [`stzh-dropdown--popover-placement-${this.popoverPlacement}`]: !!this.popoverPlacement,
       [`stzh-dropdown--size-${this.size}`]: !!this.size,
       [`stzh-dropdown--${this.variant}`]: !!this.variant
@@ -5426,6 +5428,7 @@ const StzhDropdown = /*@__PURE__*/ proxyCustomElement(class StzhDropdown extends
     "disabled": [516],
     "popoverPlacement": [513, "popover-placement"],
     "label": [1],
+    "labelHidden": [4, "label-hidden"],
     "icon": [1],
     "iconAngle": [1, "icon-angle"],
     "noSearch": [4, "no-search"],