@oiz/stzh-components 4.9.0-beta3 → 4.9.0-beta4

package/dist/components/p-BA7AN5yq.js

@@ -0,0 +1,238 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-BOU3cRYl.js';
+import { s as setPropsIfNull, h as hasSlot } from './p-CN5apKPb.js';
+import { w as waitForEvent } from './p--SdF31O7.js';
+import { s as stopAnimations, a as animateTo, b as shimKeyframesAutoValues } from './p-BOO84wnP.js';
+import { d as defineCustomElement$3 } from './p-6ax-mKBx.js';
+import { d as defineCustomElement$2 } from './p-8LohUgRI.js';
+import { d as defineCustomElement$1 } from './p-DkuigYKB.js';
+
+const stzhToastCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{pointer-events:all;--label-font-family:var(--stzh-toast-label-font-family);--label-font-weight:var(--stzh-toast-label-font-weight);--label-font-style:var(--stzh-toast-label-font-style);--label-color:var(--stzh-toast-label-color);--background-color:var(--stzh-toast-background-color);--close-color:var(--stzh-toast-close-color);--button-color:var(--stzh-toast-button-color);--icon-color:var(--stzh-toast-icon-color)}:host([type=success]){--icon-color:var(--stzh-toast-success-icon-color)}:host([type=warning]){--icon-color:var(--stzh-toast-warning-icon-color)}:host([type=error]){--icon-color:var(--stzh-toast-error-icon-color)}.stzh-toast{position:relative;display:flex;box-shadow:var(--stzh-box-shadow-message);background-color:var(--background-color);border-radius:var(--stzh-button-border-radius);transition:background-color var(--stzh-base-transition-animation-speed)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-toast{border:0.0625rem solid Highlight}}.stzh-toast__content{flex-grow:1;display:flex;gap:var(--stzh-space-small);padding:var(--stzh-space-medium)}.stzh-toast__icon-wrapper{flex-shrink:0;display:flex}.stzh-toast__icon{color:var(--icon-color)}.stzh-toast__text-wrapper{flex-grow:1}.stzh-toast__label{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);color:var(--label-color);font-family:var(--label-font-family);font-weight:var(--label-font-weight);font-style:var(--label-font-style);transition:color var(--stzh-base-transition-animation-speed);padding-right:var(--stzh-space-xxlarge)}@media screen and (min-width: 600px){.stzh-toast__label{padding-right:var(--stzh-space-xxxlarge)}}.stzh-toast__close-wrapper{flex-shrink:0}.stzh-toast__link{--stzh-button-tertiary-color:var(--button-color);display:flex;justify-content:flex-end}.stzh-toast__close[variant=tertiary]{--color:var(--close-color);position:absolute;top:0;right:0}.stzh-toast{}.stzh-toast--has-link .stzh-toast__label:not(:empty)+.stzh-toast__link{margin-top:var(--stzh-space-xsmall)}`;
+
+const ANIMATION_SHOW = {
+    keyframes: [
+        { transform: "translateY(100%)", opacity: "0", height: "0", marginBottom: "0" },
+        { transform: "translateY(0px)", opacity: "1", height: "auto", marginBottom: "auto" },
+    ],
+    options: {
+        duration: 300,
+        easing: "ease-out",
+    },
+};
+const ANIMATION_HIDE = {
+    keyframes: [
+        { transform: "translateX(0px)", opacity: "1", height: "auto", marginBottom: "auto" },
+        { transform: "translateX(-100%)", opacity: "0", height: "auto", marginBottom: "auto" },
+        { transform: "translateX(-100%)", opacity: "0", height: "0", marginBottom: "0" },
+        // { transform: "translateY(0px)", opacity: "1", height: "auto", marginBottom: 'auto' },
+        // { transform: "translateY(-100%)", opacity: "0", height: "0", marginBottom: '0' },
+    ],
+    options: {
+        duration: 300,
+        easing: "ease-in",
+    },
+};
+const StzhToast = /*@__PURE__*/ proxyCustomElement(class StzhToast extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.stzhOpen = createEvent(this, "stzhOpen");
+        this.stzhOpened = createEvent(this, "stzhOpened");
+        this.stzhClose = createEvent(this, "stzhClose");
+        this.stzhClosed = createEvent(this, "stzhClosed");
+        /** Label */
+        this.label = "";
+        /** Type */
+        this.type = "info";
+        /** Whether to hide close button */
+        this.hideClose = false;
+        /** Open state */
+        this.open = true;
+        /** Whether open animation should be played initially. */
+        this.initialOpenAnimation = false;
+        this.handleLinkSlotchange = () => {
+            var _a;
+            const host = ((_a = this.element.getRootNode()) === null || _a === void 0 ? void 0 : _a.host) || this.element;
+            const buttons = host.querySelectorAll('stzh-button[slot="link"], [slot="link"] stzh-button');
+            buttons.forEach(link => {
+                setPropsIfNull(link, {
+                    size: "small",
+                    variant: "tertiary",
+                });
+            });
+        };
+        this.onCloseButtonClick = () => {
+            this.hide();
+        };
+    }
+    async openWatcher(newValue) {
+        if (!this.rootElement) {
+            return;
+        }
+        if (newValue) {
+            if (this.toggledByMethod) {
+                this.stzhOpen.emit({
+                    component: "stzh-toast",
+                });
+            }
+            await stopAnimations(this.element);
+            // this.element.style.willChange = "transform, opacity, height";
+            this.element.hidden = false;
+            const computedStyle = getComputedStyle(this.element, null);
+            await animateTo(this.element, shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {
+                height: this.element.scrollHeight,
+                marginTop: parseInt(computedStyle["margin-top"]),
+                marginBottom: parseInt(computedStyle["margin-bottom"]),
+            }), ANIMATION_SHOW.options);
+            this.element.style.height = "auto";
+            this.element.style.opacity = "1";
+            // this.element.style.willChange = "auto";
+            if (this.toggledByMethod) {
+                this.stzhOpened.emit({
+                    component: "stzh-toast",
+                });
+            }
+        }
+        else {
+            if (this.toggledByMethod) {
+                this.stzhClose.emit({
+                    component: "stzh-toast",
+                });
+            }
+            await stopAnimations(this.element);
+            // this.element.style.willChange = "transform, opacity, height";
+            const computedStyle = getComputedStyle(this.element, null);
+            await animateTo(this.element, shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {
+                height: this.element.scrollHeight,
+                marginTop: parseInt(computedStyle["margin-top"]),
+                marginBottom: parseInt(computedStyle["margin-bottom"]),
+            }), ANIMATION_HIDE.options);
+            this.element.style.height = "0px";
+            this.element.style.opacity = "0";
+            this.element.hidden = true;
+            // this.element.style.willChange = "auto";
+            if (this.toggledByMethod) {
+                this.stzhClosed.emit({
+                    component: "stzh-toast",
+                });
+            }
+        }
+        this.toggledByMethod = false;
+    }
+    async show() {
+        if (this.open) {
+            return;
+        }
+        this.toggledByMethod = true;
+        this.open = true;
+        return waitForEvent(this.element, "stzhOpened");
+    }
+    async hide() {
+        if (!this.open) {
+            return;
+        }
+        this.toggledByMethod = true;
+        this.open = false;
+        return waitForEvent(this.element, "stzhClosed");
+    }
+    async componentWillLoad() {
+        if (!this.localization) {
+            this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "toast");
+        }
+    }
+    componentDidLoad() {
+        if (this.initialOpenAnimation && this.open) {
+            // hide first so the open animation will be shown
+            this.element.hidden = true;
+            this.element.style.height = "0px";
+            this.element.style.opacity = "0";
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    this.openWatcher(true);
+                });
+            });
+        }
+        else {
+            this.element.hidden = !this.open;
+            this.element.style.height = this.open ? "auto" : "0px";
+            this.element.style.opacity = this.open ? "1" : "0";
+        }
+    }
+    // connectedCallback() {
+    //   this.init();
+    //   this.observer = new MutationObserver(this.init);
+    //   this.observer.observe(this.element, {
+    //     childList: true,
+    //     subtree: true
+    //   });
+    // }
+    // disconnectedCallback() {
+    //   if (this.observer) {
+    //     this.observer.disconnect();
+    //   }
+    // }
+    render() {
+        const linkUsed = hasSlot(this.element, "link");
+        const classes = {
+            "stzh-toast": true,
+            "stzh-toast--has-link": linkUsed,
+            "stzh-toast--has-close-hidden": this.hideClose,
+            [`stzh-toast--type-${this.type}`]: !!this.type,
+        };
+        return (h(Host, { key: 'c4cddcb991046c55971bad61369fe88d55cc85ec' }, h("div", { key: 'e9f198ca43f7bdd7ea563e22e6e630a27afddc3e', ref: el => (this.rootElement = el), class: classes }, h("div", { key: 'abf21ad1ec3651e9e9e52f1b2799b72b3425bd67', class: "stzh-toast__content" }, h("div", { key: 'fc0eadf23d03c0b1951a22bb62ba3690e5a526b2', class: "stzh-toast__icon-wrapper" }, h("stzh-icon", { key: 'b2040c789432f36bbbb31e24c5b8675358f00dc3', class: "stzh-toast__icon", name: (this.type === "info" && "info-help-filled") ||
+                (this.type === "success" && "checkmark-circle-filled") ||
+                (this.type === "warning" && "important-warning-filled") ||
+                (this.type === "error" && "warning-filled") })), h("div", { key: 'b6ae1a7b96bc58a17661a5b8466ceb605e11dbed', class: "stzh-toast__text-wrapper" }, h("div", { key: 'cfe7ebf5a2741c556484a7cef8c5320c4fb2a8e0', class: "stzh-toast__label" }, this.label), h("div", { key: '604fd967e474f5eab5ba4557b77b03e11390ae80', class: "stzh-toast__link" }, h("slot", { key: '30b1ad692cd7f968ac86686ef45702c1b2bacea2', name: "link", onSlotchange: this.handleLinkSlotchange })))), !this.hideClose && (h("div", { key: '3e59560a0ffd1f7054d5fbfbdf0a9f4722ca0765', class: "stzh-toast__close-wrapper" }, h("stzh-button", { key: '858a808cf4570cdd7191fe34e51050aa5a94a3ed', class: "stzh-toast__close", onClick: this.onCloseButtonClick, label: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" }))))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "open": ["openWatcher"]
+    }; }
+    static get style() { return stzhToastCss(); }
+}, [257, "stzh-toast", {
+        "label": [1],
+        "type": [513],
+        "hideClose": [516, "hide-close"],
+        "open": [516],
+        "initialOpenAnimation": [4, "initial-open-animation"],
+        "localization": [16],
+        "show": [64],
+        "hide": [64]
+    }, undefined, {
+        "open": ["openWatcher"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["stzh-toast", "stzh-badge", "stzh-button", "stzh-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "stzh-toast":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), StzhToast);
+            }
+            break;
+        case "stzh-badge":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "stzh-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "stzh-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { StzhToast as S, defineCustomElement as d };
+//# sourceMappingURL=p-BA7AN5yq.js.map
+
+//# sourceMappingURL=p-BA7AN5yq.js.map

package/dist/components/p-BA7AN5yq.js.map

@@ -0,0 +1 @@
+{"file":"p-BA7AN5yq.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-toast/stzh-toast.scss?tag=stzh-toast&encapsulation=shadow","src/components/stzh-toast/stzh-toast.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color of toast\n */\n\n:host {\n  pointer-events: all;\n\n  --label-font-family: #{$toastLabelFontFamily};\n  --label-font-weight: #{$toastLabelFontWeight};\n  --label-font-style: #{$toastLabelFontStyle};\n\n  --label-color: #{$toastLabelColor};\n  --background-color: #{$toastBackgroundColor};\n  --close-color: #{$toastCloseColor};\n  --button-color: #{$toastButtonColor};\n  --icon-color: #{$toastIconColor};\n}\n\n:host([type=\"success\"]) {\n  --icon-color: #{$toastSuccessIconColor};\n}\n\n:host([type=\"warning\"]) {\n  --icon-color: #{$toastWarningIconColor};\n}\n\n:host([type=\"error\"]) {\n  --icon-color: #{$toastErrorIconColor};\n}\n\n.stzh-toast {\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n  transition: background-color $baseTransitionAnimationSpeed;\n\n  @include highContrast() {\n    border: 1px solid Highlight;\n  }\n\n  &__content {\n    flex-grow: 1;\n    display: flex;\n    gap: space(\"small\");\n    padding: space(\"medium\");\n  }\n\n  &__icon-wrapper {\n    flex-shrink: 0;\n    display: flex;\n  }\n\n  &__icon {\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    flex-grow: 1;\n  }\n\n  &__label {\n    @include fontSize(\"milli\");\n    color: var(--label-color);\n    font-family: var(--label-font-family);\n    font-weight: var(--label-font-weight);\n    font-style: var(--label-font-style);\n    transition: color $baseTransitionAnimationSpeed;\n    padding-right: space(\"xxlarge\");\n\n    @include mq($from: small) {\n      padding-right: space(\"xxxlarge\");\n    }\n  }\n\n  &__close-wrapper {\n    flex-shrink: 0;\n  }\n\n  &__link {\n    --stzh-button-tertiary-color: var(--button-color);\n\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Has link */\n\n  &--has-link &__label:not(:empty) + &__link {\n    margin-top: space(\"xsmall\");\n  }\n}\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Method, Watch } from \"@stencil/core\";\n\nimport {\n  StzhToastOpenEvent,\n  StzhToastOpenedEvent,\n  StzhToastCloseEvent,\n  StzhToastClosedEvent,\n  StzhToastType,\n} from \"../../index\";\n\nimport { StzhToastLocalizedText } from \"./stzh-toast.localization\";\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../utils/animation-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { transform: \"translateY(100%)\", opacity: \"0\", height: \"0\", marginBottom: \"0\" },\n    { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: \"auto\" },\n  ],\n  options: {\n    duration: 300,\n    easing: \"ease-out\",\n  },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { transform: \"translateX(0px)\", opacity: \"1\", height: \"auto\", marginBottom: \"auto\" },\n    { transform: \"translateX(-100%)\", opacity: \"0\", height: \"auto\", marginBottom: \"auto\" },\n    { transform: \"translateX(-100%)\", opacity: \"0\", height: \"0\", marginBottom: \"0\" },\n    // { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n    // { transform: \"translateY(-100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n  ],\n  options: {\n    duration: 300,\n    easing: \"ease-in\",\n  },\n};\n\n/**\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-toast\",\n  styleUrl: \"stzh-toast.scss\",\n  shadow: true,\n})\nexport class StzhToast {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhToastType = \"info\";\n\n  /** Whether to hide close button */\n  @Prop({ reflect: true }) hideClose: boolean = false;\n\n  /** Open state */\n  @Prop({ reflect: true }) open: boolean = true;\n\n  /** Whether open animation should be played initially. */\n  @Prop() initialOpenAnimation = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhToastLocalizedText;\n\n  /** Toast open event */\n  @Event() stzhOpen: EventEmitter<StzhToastOpenEvent>;\n\n  /** Toast opened event (after animation)  */\n  @Event() stzhOpened: EventEmitter<StzhToastOpenedEvent>;\n\n  /** Toast close event */\n  @Event() stzhClose: EventEmitter<StzhToastCloseEvent>;\n\n  /** Toast closed event (after animation)  */\n  @Event() stzhClosed: EventEmitter<StzhToastClosedEvent>;\n\n  @Element() element: HTMLStzhToastElement;\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.rootElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-toast\",\n        });\n      }\n\n      await stopAnimations(this.element);\n\n      // this.element.style.willChange = \"transform, opacity, height\";\n      this.element.hidden = false;\n\n      const computedStyle = getComputedStyle(this.element, null);\n\n      await animateTo(\n        this.element,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.element.scrollHeight,\n          marginTop: parseInt(computedStyle[\"margin-top\"]),\n          marginBottom: parseInt(computedStyle[\"margin-bottom\"]),\n        }),\n        ANIMATION_SHOW.options,\n      );\n\n      this.element.style.height = \"auto\";\n      this.element.style.opacity = \"1\";\n      // this.element.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-toast\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-toast\",\n        });\n      }\n\n      await stopAnimations(this.element);\n\n      // this.element.style.willChange = \"transform, opacity, height\";\n\n      const computedStyle = getComputedStyle(this.element, null);\n\n      await animateTo(\n        this.element,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.element.scrollHeight,\n          marginTop: parseInt(computedStyle[\"margin-top\"]),\n          marginBottom: parseInt(computedStyle[\"margin-bottom\"]),\n        }),\n        ANIMATION_HIDE.options,\n      );\n\n      this.element.style.height = \"0px\";\n      this.element.style.opacity = \"0\";\n      this.element.hidden = true;\n      // this.element.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-toast\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  // private observer: MutationObserver;\n  private toggledByMethod: boolean;\n  private rootElement: HTMLElement;\n\n  private handleLinkSlotchange = () => {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const buttons = host.querySelectorAll('stzh-button[slot=\"link\"], [slot=\"link\"] stzh-button');\n\n    buttons.forEach(link => {\n      setPropsIfNull(link, {\n        size: \"small\",\n        variant: \"tertiary\",\n      } as HTMLStzhButtonElement);\n    });\n  };\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"toast\");\n    }\n  }\n\n  componentDidLoad() {\n    if (this.initialOpenAnimation && this.open) {\n      // hide first so the open animation will be shown\n      this.element.hidden = true;\n      this.element.style.height = \"0px\";\n      this.element.style.opacity = \"0\";\n\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          this.openWatcher(true);\n        });\n      });\n    } else {\n      this.element.hidden = !this.open;\n      this.element.style.height = this.open ? \"auto\" : \"0px\";\n      this.element.style.opacity = this.open ? \"1\" : \"0\";\n    }\n  }\n\n  // connectedCallback() {\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  //   if (this.observer) {\n  //     this.observer.disconnect();\n  //   }\n  // }\n\n  render() {\n    const linkUsed = hasSlot(this.element, \"link\");\n\n    const classes = {\n      \"stzh-toast\": true,\n      \"stzh-toast--has-link\": linkUsed,\n      \"stzh-toast--has-close-hidden\": this.hideClose,\n      [`stzh-toast--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host>\n        <div ref={el => (this.rootElement = el as HTMLElement)} class={classes}>\n          <div class=\"stzh-toast__content\">\n            <div class=\"stzh-toast__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-toast__icon\"\n                name={\n                  (this.type === \"info\" && \"info-help-filled\") ||\n                  (this.type === \"success\" && \"checkmark-circle-filled\") ||\n                  (this.type === \"warning\" && \"important-warning-filled\") ||\n                  (this.type === \"error\" && \"warning-filled\")\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-toast__text-wrapper\">\n              <div class=\"stzh-toast__label\">{this.label}</div>\n              <div class=\"stzh-toast__link\">\n                <slot name=\"link\" onSlotchange={this.handleLinkSlotchange}></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose && (\n            <div class=\"stzh-toast__close-wrapper\">\n              <stzh-button\n                class=\"stzh-toast__close\"\n                onClick={this.onCloseButtonClick}\n                label={this.localization.close}\n                variant=\"tertiary\"\n                size=\"small\"\n                iconOnly={true}\n                icon=\"close-big\"\n              ></stzh-button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-BAyu2WG3.js

@@ -0,0 +1,334 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-BOU3cRYl.js';
+import { h as hasSlot } from './p-CN5apKPb.js';
+import { S as StzhInputDescription } from './p-CF6aqBg9.js';
+import { d as defineCustomElement$5 } from './p-6ax-mKBx.js';
+import { d as defineCustomElement$4 } from './p-8LohUgRI.js';
+import { d as defineCustomElement$3 } from './p-DkuigYKB.js';
+import { d as defineCustomElement$2 } from './p-Bk_CuXEU.js';
+import { d as defineCustomElement$1 } from './p-CEPvA7qH.js';
+
+const stzhInputCss = () => `.sc-stzh-input-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-input-h,[stzh-hidden].sc-stzh-input-h{display:none}.sc-stzh-input-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-input-h *.sc-stzh-input,.sc-stzh-input-h *.sc-stzh-input::before,.sc-stzh-input-h *.sc-stzh-input::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-input-h .has-focus.sc-stzh-input{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input{outline-style:none !important}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input::-moz-focus-inner{border:0 !important}.sc-stzh-input-h{--text-align:left;--color:var(--stzh-input-color, var(--stzh-color-secondary60));--border-color:var(--stzh-color-grey70);--border-radius:var(--stzh-form-input-border-radius);--background-color:var(--stzh-color-white);--padding-top:var(--stzh-space-xsmall);--padding-bottom:var(--stzh-space-xsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--height:var(--stzh-form-input-height);--input-width:100%;--label-color:var(--stzh-input-label-color, var(--stzh-color-primary));--placeholder-color:var(--stzh-color-grey70);--button-right-color:var(--stzh-color-grey80);--hover-color:var(--stzh-input-hover-color, var(--stzh-color-secondary60));--hover-border-color:var(
+    --stzh-input-hover-border-color,
+    var(--stzh-color-secondary50)
+  );--hover-background-color:var(--stzh-color-white);--hover-button-right-color:var(--stzh-color-primary70);--focus-color:var(--stzh-color-black);--focus-border-color:var(--stzh-color-secondary50);--focus-background-color:var(--stzh-color-secondary20);--focus-button-right-color:var(--stzh-color-primary70);--text-selection-background-color:var(--stzh-color-secondary30)}[type=hidden].sc-stzh-input-h{position:absolute;top:-624.9375rem;left:-624.9375rem;visibility:hidden}.sc-stzh-input-h{width:100%}[size=small].sc-stzh-input-h{--height:var(--stzh-form-input-small-height)}[is-filled].sc-stzh-input-h:not([is-filled=false]){--button-right-color:var(--stzh-color-primary70);--hover-button-right-color:var(--stzh-color-primary70);--focus-button-right-color:var(--stzh-color-black)}[is-invalid].sc-stzh-input-h{--color:var(--stzh-color-error60);--border-color:var(--stzh-color-error60);--background-color:var(--stzh-color-white);--label-color:var(--stzh-color-error60);--placeholder-color:var(--stzh-color-error60);--button-right-color:var(--stzh-color-error60);--hover-color:var(--stzh-color-error60);--hover-border-color:var(--stzh-color-error60);--hover-background-color:var(--stzh-color-white);--hover-button-right-color:var(--stzh-color-error60);--focus-color:var(--stzh-color-error60);--focus-border-color:var(--stzh-color-error60);--focus-background-color:var(--stzh-color-white);--focus-button-right-color:var(--stzh-color-error60)}[readonly].sc-stzh-input-h:not([readonly=false]),[disabled].sc-stzh-input-h:not([disabled=false]){--color:var(--stzh-color-grey70);--border-color:var(--stzh-color-grey70);--background-color:var(--stzh-color-grey10);--label-color:var(--stzh-color-grey70);--placeholder-color:var(--stzh-color-grey70);--description-color:var(--stzh-color-grey70);--button-right-color:var(--stzh-color-grey70);--hover-color:var(--stzh-color-grey70);--hover-border-color:var(--stzh-color-grey70);--hover-background-color:var(--stzh-color-grey10);--hover-button-right-color:var(--stzh-color-grey70);--focus-color:var(--stzh-color-grey70);--focus-border-color:var(--stzh-color-grey70);--focus-background-color:var(--stzh-color-grey10);--focus-button-right-color:var(--stzh-color-grey70)}.sc-stzh-input-h:is(:has(.stzh-input__input:hover)){--button-right-color:var(--hover-button-right-color)}.sc-stzh-input-h:is(:has(.stzh-input__input:focus)){--button-right-color:var(--focus-button-right-color)}.sc-stzh-input-h.sc-stzh-input-s>[slot=button-right],.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right],.stzh-input__button-right.sc-stzh-input{position:absolute;top:0px;right:0px}.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right],.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>[slot=button-right] stzh-popover,.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right] stzh-popover{display:block}.sc-stzh-input-h.sc-stzh-input-s>stzh-button[slot=button-right],.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>stzh-button[slot=button-right][disabled]:not([disabled=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right][disabled]:not([disabled=false]),.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button,.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button,.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[disabled]:not([disabled=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[disabled]:not([disabled=false]),.sc-stzh-input-h.sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button,.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button,.sc-stzh-input-h.sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=false]),.stzh-input__button-right.sc-stzh-input,.stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false]){--color:var(--button-right-color);--background-color:transparent;--border-color:transparent;--hover-color:var(--button-right-color);--hover-background-color:transparent;--hover-border-color:transparent}.sc-stzh-input-h.sc-stzh-input-s>stzh-button[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>stzh-button[slot=button-right][size=default][icon-only]:not([icon-only=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right][size=default][icon-only]:not([icon-only=false]),.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button,.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.sc-stzh-input-h.sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button,.sc-stzh-input-h.sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.stzh-input__button-right[size=default][icon-only].sc-stzh-input:not([icon-only=false]){--icon-size:var(--stzh-icon-size-medium)}.stzh-input__marker-symbol.sc-stzh-input{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-input__marker-text.sc-stzh-input{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-input__description-wrapper.sc-stzh-input{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-input__error.sc-stzh-input,.stzh-input__description.sc-stzh-input{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-input__error.sc-stzh-input{color:var(--stzh-color-error60)}.stzh-input__error-list.sc-stzh-input{list-style:none;margin:0;padding:0}.stzh-input__description.sc-stzh-input{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-input__description-long.sc-stzh-input{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-input__description-long.sc-stzh-input{margin-top:0}}.stzh-input__description-long-popover.sc-stzh-input{--width:auto;--max-width:27.3125rem}.stzh-input__description-long-button.sc-stzh-input{display:flex;justify-content:center;align-items:center;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-input.sc-stzh-input stzh-icon.stzh-input__description-long-icon.sc-stzh-input{--size:var(--stzh-icon-size-xsmall)}.stzh-input--has-error.sc-stzh-input .stzh-input__error.sc-stzh-input,.stzh-input--has-description.sc-stzh-input .stzh-input__description.sc-stzh-input{margin-top:var(--stzh-space-xxxsmall)}.stzh-input.sc-stzh-input .sc-stzh-input::selection{background:var(--text-selection-background-color)}.stzh-input__field-wrapper.sc-stzh-input{position:relative;display:flex;width:var(--input-width)}.stzh-input__input.sc-stzh-input{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);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);border:0.125rem solid var(--border-color);transition-property:color, border-color, background-color;transition-duration:var(--stzh-base-transition-animation-speed);border-radius:var(--border-radius);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);margin:0;width:100%;color:var(--color);background-color:var(--background-color);appearance:none;text-align:var(--text-align)}.stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:hover{color:var(--hover-color);border-color:var(--hover-border-color);background-color:var(--hover-background-color)}.stzh-input__input.sc-stzh-input:focus{color:var(--focus-color);border-color:var(--focus-border-color);background-color:var(--focus-background-color)}.stzh-input__input.sc-stzh-input:-webkit-autofill{background-clip:text}.stzh-input__input.sc-stzh-input:placeholder-shown{text-overflow:ellipsis}.stzh-input__input[type=search].sc-stzh-input::-webkit-search-decoration,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-cancel-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-decoration{-webkit-appearance:none}.stzh-input__input--input.sc-stzh-input{height:var(--height)}.stzh-input__input--textarea.sc-stzh-input{min-height:var(--height);resize:vertical}.stzh-input__label.sc-stzh-input{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);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;display:block;color:var(--label-color);width:auto;max-width:100%;margin-bottom:var(--stzh-space-xxxsmall)}.stzh-input__label.no-label-truncate.sc-stzh-input{text-overflow:clip;white-space:normal;overflow:visible}.stzh-input__label.sc-stzh-input:empty{display:none}.stzh-input__marker.sc-stzh-input{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-input--type-password.stzh-input--is-not-filled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-password.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-password.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-not-clearable.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-not-filled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right.sc-stzh-input{pointer-events:none}.stzh-input--has-button-right.sc-stzh-input .stzh-input__input.sc-stzh-input{padding-right:var(--height)}.stzh-input--size-small.sc-stzh-input .stzh-input__input.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-outer-spin-button,.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-inner-spin-button{appearance:none;margin:0}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input[type=number].sc-stzh-input{appearance:textfield}.stzh-input--has-label-hidden.sc-stzh-input .stzh-input__label.sc-stzh-input{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input{cursor:not-allowed}`;
+
+let inputCounter = 0;
+const StzhInput = /*@__PURE__*/ proxyCustomElement(class StzhInput extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.stzhChange = createEvent(this, "stzhChange");
+        this.stzhChanged = createEvent(this, "stzhChanged");
+        this.stzhFocus = createEvent(this, "stzhFocus");
+        this.stzhBlur = createEvent(this, "stzhBlur");
+        /** Whether the input is a textarea or an input field */
+        this.multiline = false;
+        /** If input field, this defines the type (if `search`, a search icon will be displayed) */
+        this.type = "text";
+        /** If input type is number, this will be the step size  */
+        this.step = 1;
+        /** If input type is number and this property is true, this will show the spin buttons on hover/focus */
+        this.showSpin = false;
+        /** Whether the element is readonly or not */
+        this.readonly = false;
+        /** Whether the element is disabled or not */
+        this.disabled = false;
+        /** Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) */
+        this.clearable = false;
+        /** Hide `(optional)` label (or use `required` inside form to hide it) */
+        this.hideOptional = false;
+        /** The value of the input element */
+        this.value = "";
+        /** Default value (used by reset) */
+        this.defaultValue = "";
+        /** Invalid status */
+        this.invalid = false;
+        /** Required status */
+        this.required = false;
+        /**
+         * Specify what the user agent has to provide as automated assistance.
+         * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values
+         */
+        this.autocomplete = "on";
+        /** Whether autocomplete should be turned off  */
+        this.noAutocomplete = false;
+        /** Label */
+        this.label = "";
+        /** Whether label should be truncate or not */
+        this.noLabelTruncate = false;
+        /** Whether label should be visually hidden. */
+        this.labelHidden = false;
+        /** Size variant */
+        this.size = "default";
+        /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
+        this.a11yDescribedby = "";
+        this.focusedByInput = false;
+        this.onClearClick = async (event) => {
+            this.value = "";
+            this.input.focus();
+            await this.waitForNextRender();
+            this.stzhChange.emit({
+                component: "stzh-input",
+                originalEvent: event,
+                value: this.value,
+            });
+            this.stzhChanged.emit({
+                component: "stzh-input",
+                originalEvent: event,
+                value: this.value,
+            });
+        };
+        this.onTogglePasswordVisibilityClick = async () => {
+            this.showPassword = !this.showPassword;
+        };
+        this.handleReset = async () => {
+            this.value = this.defaultValue;
+            // we also update value, since render doesn't get executed sometimes
+            this.input.value = this.defaultValue;
+            // TODO: check if we need own reset event or trigger the change event
+            // (custom browser behaviour doesn't send change event, when reset is executed)
+            // this.stzhChange.emit({
+            //   component: "stzh-input",
+            //   originalEvent: event,
+            //   value: this.value
+            // });
+        };
+        this.onInput = (event) => {
+            this.value = this.input.value;
+            this.stzhChange.emit({
+                component: "stzh-input",
+                originalEvent: event,
+                value: this.value,
+            });
+        };
+        this.onChange = (event) => {
+            this.value = this.input.value;
+            this.stzhChanged.emit({
+                component: "stzh-input",
+                originalEvent: event,
+                value: this.value,
+            });
+        };
+        this.onRootFocus = () => {
+            if (!this.focusedByInput) {
+                this.input.focus();
+            }
+            this.focusedByInput = false;
+        };
+        this.onFocus = (event) => {
+            this.focusedByInput = true;
+            const focusEvent = new FocusEvent("focus", {
+                view: window,
+                bubbles: false,
+                cancelable: false,
+            });
+            this.element.dispatchEvent(focusEvent);
+            this.stzhFocus.emit({
+                component: "stzh-input",
+                originalEvent: event,
+            });
+        };
+        this.onBlur = (event) => {
+            // fixes weird bug where autofill selection doesn't get removed
+            this.input.value = this.input.value;
+            const blurEvent = new FocusEvent("blur", {
+                view: window,
+                bubbles: false,
+                cancelable: false,
+            });
+            this.element.dispatchEvent(blurEvent);
+            this.stzhBlur.emit({
+                component: "stzh-input",
+                originalEvent: event,
+            });
+        };
+    }
+    resetListener(event) {
+        if (event.target.contains(this.element)) {
+            requestAnimationFrame(() => {
+                this.handleReset();
+            });
+        }
+    }
+    valueWatcher(newValue) {
+        this.filled = 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 = [];
+        }
+    }
+    typeWatcher(newValue) {
+        const types = ["text", "search", "password", "email", "url", "tel", "number", "hidden"];
+        if (!this.multiline && !types.includes(newValue)) {
+            throw new Error(`Type ${newValue} not supported`);
+        }
+    }
+    waitForNextRender() {
+        return new Promise(resolve => (this.renderPromiseResolve = resolve));
+    }
+    renderTextarea() {
+        return (h("textarea", { class: "stzh-input__input stzh-input__input--textarea", ref: el => (this.input = el), id: this.inputId, name: this.name, value: this.value, rows: this.rows, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onChange: this.onChange, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }));
+    }
+    renderInput() {
+        return (h("input", { class: "stzh-input__input stzh-input__input--input", ref: el => (this.input = el), id: this.inputId, type: this.showPassword ? "text" : this.type, name: this.name, value: this.value, defaultValue: this.defaultValue, min: this.min, max: this.max, step: this.step, inputmode: this.inputmode, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.noAutocomplete ? "off" : this.autocomplete, "aria-autocomplete": this.noAutocomplete ? "none" : undefined, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onChange: this.onChange, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }));
+    }
+    componentDidRender() {
+        if (this.renderPromiseResolve) {
+            this.renderPromiseResolve();
+        }
+    }
+    async componentWillLoad() {
+        this.inputId = `stzh-input-${inputCounter++}`;
+        this.typeWatcher(this.type);
+        this.valueWatcher(this.value);
+        this.errorWatcher(this.error);
+        this.defaultValue = this.defaultValue || this.value;
+        if (!this.localization) {
+            this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "input");
+        }
+    }
+    render() {
+        var _a;
+        const buttonRightSlotUsed = hasSlot(this.element, "button-right");
+        const descriptionUsed = hasSlot(this.element, "description") || !!this.description;
+        const descriptionLongUsed = hasSlot(this.element, "description-long") || !!this.descriptionLong;
+        const errorUsed = hasSlot(this.element, "error") || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        const classes = {
+            "stzh-input": true,
+            "stzh-input--has-button-right": buttonRightSlotUsed ||
+                this.type === "search" ||
+                (this.clearable && this.filled && !this.readonly && !this.disabled),
+            "stzh-input--has-description": descriptionUsed,
+            "stzh-input--has-description-long": descriptionLongUsed,
+            "stzh-input--has-error": errorUsed,
+            "stzh-input--has-spin": this.showSpin,
+            "stzh-input--is-invalid": this.invalid || errorUsed,
+            "stzh-input--is-disabled": this.disabled,
+            "stzh-input--is-readonly": this.readonly,
+            "stzh-input--is-required": this.required,
+            "stzh-input--is-filled": this.filled,
+            "stzh-input--is-not-filled": !this.filled,
+            "stzh-input--is-clearable": this.clearable,
+            "stzh-input--is-not-clearable": !this.clearable,
+            "stzh-input--has-label-hidden": this.labelHidden,
+            [`stzh-input--size-${this.size}`]: !!this.size,
+            [`stzh-input--type-${this.type}`]: !!this.type,
+        };
+        return (h(Host, { key: '5d7bee8c302ef22395b9a644b26f7a3ba5373b50', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus, "is-filled": this.filled }, h("div", { key: '4e09eeb25c42d00dad7ebbc6b19da028e38339b3', class: classes }, h("label", { key: 'd3fddcd73dee0917802af5df4caa3b5ee3f4e346', class: {
+                "stzh-input__label": true,
+                "no-label-truncate": this.noLabelTruncate,
+            }, htmlFor: this.inputId }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '68cfebd8ed934cc3db6f55c7b344191dd041900e', class: "stzh-input__marker" }, h("span", { key: '3c18301715b2a99f72c26bc98ebe453e59716b33', class: "stzh-input__marker-symbol", "aria-hidden": "true" }, this.required
+            ? this.localization.$globals.requiredFieldMarker
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: 'd8bfa06b895a15cc28dddbf4587d1b9499f480f5', class: "stzh-input__marker-text" }, this.required
+            ? this.localization.$globals.requiredFieldText
+            : this.localization.$globals.optionalFieldText)))), h("div", { key: '34582842d9d6c4ef3dcf959b2fd2ad92e03ef5c3', class: "stzh-input__field-wrapper" }, this.multiline ? this.renderTextarea() : this.renderInput(), this.clearable || this.type === "search" || this.type === "password" ? ((!this.clearable || this.disabled || this.readonly || !this.filled) &&
+            (this.type === "search" || this.type === "password") ? (h("stzh-button", { class: "stzh-input__button-right", icon: this.type === "search" ? "search" : "view", size: this.size, iconOnly: true, onClick: this.onTogglePasswordVisibilityClick, disabled: this.disabled || this.readonly })) : this.filled ? (h("stzh-button", { class: "stzh-input__button-right", icon: "close", size: this.size, iconOnly: true, onClick: this.onClearClick, a11yLabel: this.localization.$globals.clearButtonLabel, "aria-controls": this.inputId })) : (h("slot", { name: "button-right" }))) : (h("slot", { name: "button-right" }))), (errorUsed || this.description || this.descriptionLong) && (h(StzhInputDescription, { key: '98d20ad480a2fdbc2055973f9aa5909649cac1b4', classPrefix: "stzh-input", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "value": ["valueWatcher"],
+        "error": ["errorWatcher"],
+        "type": ["typeWatcher"]
+    }; }
+    static get style() { return stzhInputCss(); }
+}, [262, "stzh-input", {
+        "localization": [16],
+        "multiline": [4],
+        "rows": [2],
+        "type": [513],
+        "step": [2],
+        "min": [2],
+        "max": [2],
+        "showSpin": [516, "show-spin"],
+        "readonly": [516],
+        "disabled": [516],
+        "clearable": [516],
+        "hideOptional": [516, "hide-optional"],
+        "minlength": [2],
+        "maxlength": [2],
+        "name": [513],
+        "value": [1025],
+        "defaultValue": [1025, "default-value"],
+        "description": [1],
+        "descriptionLong": [1, "description-long"],
+        "descriptionLongTitle": [1, "description-long-title"],
+        "error": [1],
+        "invalid": [516],
+        "required": [516],
+        "inputmode": [1],
+        "autocomplete": [1],
+        "noAutocomplete": [4, "no-autocomplete"],
+        "label": [1],
+        "noLabelTruncate": [4, "no-label-truncate"],
+        "labelHidden": [4, "label-hidden"],
+        "size": [513],
+        "a11yDescribedby": [1, "a11y-describedby"],
+        "filled": [32],
+        "showPassword": [32]
+    }, [[4, "reset", "resetListener"]], {
+        "value": ["valueWatcher"],
+        "error": ["errorWatcher"],
+        "type": ["typeWatcher"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["stzh-input", "stzh-badge", "stzh-button", "stzh-icon", "stzh-popover", "stzh-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "stzh-input":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), StzhInput);
+            }
+            break;
+        case "stzh-badge":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "stzh-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "stzh-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "stzh-popover":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "stzh-text":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { StzhInput as S, defineCustomElement as d };
+//# sourceMappingURL=p-BAyu2WG3.js.map
+
+//# sourceMappingURL=p-BAyu2WG3.js.map