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

package/dist/components/p-D71JIHdD.js

@@ -1,238 +0,0 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-ptAFQZzh.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-BaC_gScF.js';
-import { d as defineCustomElement$2 } from './p-ka1rmhv9.js';
-import { d as defineCustomElement$1 } from './p-B8VeEjIy.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-D71JIHdD.js.map
-
-//# sourceMappingURL=p-D71JIHdD.js.map

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

@@ -1 +0,0 @@
-{"file":"p-D71JIHdD.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-DC-bkkG9.js

@@ -1,126 +0,0 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-ptAFQZzh.js';
-import { s as setPropsIfNull } from './p-CN5apKPb.js';
-import { d as defineCustomElement$3 } from './p-BaC_gScF.js';
-import { d as defineCustomElement$2 } from './p-ka1rmhv9.js';
-import { d as defineCustomElement$1 } from './p-B8VeEjIy.js';
-
-const stzhGhettoboxCss = () => `.sc-stzh-ghettobox-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-ghettobox-h,[stzh-hidden].sc-stzh-ghettobox-h{display:none}.sc-stzh-ghettobox-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-ghettobox-h *.sc-stzh-ghettobox,.sc-stzh-ghettobox-h *.sc-stzh-ghettobox::before,.sc-stzh-ghettobox-h *.sc-stzh-ghettobox::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-ghettobox-h .has-focus.sc-stzh-ghettobox{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-ghettobox-h .stzh-fylingfocus-focused.sc-stzh-ghettobox{outline-style:none !important}.sc-stzh-ghettobox-h .stzh-fylingfocus-focused.sc-stzh-ghettobox::-moz-focus-inner{border:0 !important}.sc-stzh-ghettobox-h{--stzh-flyingfocus-color:var(--stzh-base-invert-color);--stzh-base-color:var(--stzh-base-invert-color);--stzh-base-lead-color:var(--stzh-base-invert-color);--stzh-base-border-color:var(--stzh-base-invert-color);--stzh-heading-color:var(--stzh-base-invert-color);--stzh-link-color:var(--stzh-base-invert-color);--stzh-link-hover-color:var(--stzh-base-invert-color);--stzh-button-color:var(--stzh-color-primary);--stzh-button-background-color:var(--stzh-base-invert-color);--stzh-button-hover-color:var(--stzh-color-primary);--stzh-button-hover-background-color:var(--stzh-color-white80op);--stzh-button-disabled-color:var(--stzh-color-primary);--stzh-button-disabled-background-color:var(--stzh-color-white40op);--stzh-button-secondary-color:var(--stzh-base-invert-color);--stzh-button-secondary-background-color:var(--stzh-color-white40op);--stzh-button-secondary-hover-color:var(--stzh-base-invert-color);--stzh-button-secondary-hover-background-color:var(--stzh-color-white30op);--stzh-button-secondary-disabled-color:var(--stzh-color-white60op);--stzh-button-secondary-disabled-background-color:var(--stzh-color-white40op);--stzh-button-tertiary-color:var(--stzh-base-invert-color);--stzh-button-tertiary-hover-color:var(--stzh-base-invert-color);--stzh-button-tertiary-hover-background-color:var(--stzh-color-white20op);--stzh-button-tertiary-disabled-color:var(--stzh-color-white70op);--stzh-button-active-color:var(--stzh-color-primary);--stzh-button-active-background-color:var(--stzh-color-white80op);--stzh-button-active-hover-color:var(--stzh-color-primary);--stzh-button-active-hover-background-color:var(--stzh-color-white80op);--background-color:var(--stzh-color-coral60);--color:var(--stzh-base-invert-color);--richtext-color:var(--color)}.stzh-ghettobox.sc-stzh-ghettobox{position:relative;color:var(--color);box-shadow:var(--stzh-box-shadow-message);background-color:var(--background-color);--stzh-button-secondary-color:var(--stzh-color-coral60);--stzh-button-secondary-background-color:var(--stzh-color-white90op);--stzh-button-secondary-hover-color:var(--stzh-color-coral60);--stzh-button-secondary-hover-background-color:var(--stzh-color-white);--stzh-button-secondary-disabled-color:var(--stzh-color-white60op);--stzh-button-secondary-disabled-background-color:var(--stzh-color-white40op)}.stzh-ghettobox__container.sc-stzh-ghettobox{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-ghettobox__container.sc-stzh-ghettobox{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-ghettobox__container.sc-stzh-ghettobox{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-ghettobox__container.sc-stzh-ghettobox{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-ghettobox__container.sc-stzh-ghettobox{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-ghettobox__container.sc-stzh-ghettobox{padding-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-ghettobox__container.sc-stzh-ghettobox{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox__container.sc-stzh-ghettobox{padding-top:var(--stzh-space-xxxxlarge)}}.stzh-ghettobox__container.sc-stzh-ghettobox{padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-ghettobox__container.sc-stzh-ghettobox{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox__container.sc-stzh-ghettobox{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-ghettobox__hidden-title.sc-stzh-ghettobox{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-ghettobox__message.sc-stzh-ghettobox{gap:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-ghettobox__message.sc-stzh-ghettobox{gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-ghettobox__message.sc-stzh-ghettobox{gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox__message.sc-stzh-ghettobox{gap:var(--stzh-space-xxlarge)}}.stzh-ghettobox__message.sc-stzh-ghettobox{display:flex;flex-direction:column}.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-ghettobox__main-title.sc-stzh-ghettobox{margin:0;color:inherit}.stzh-ghettobox__main-title.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-ghettobox__main-title.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-ghettobox__main-title.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox__main-title.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}.stzh-ghettobox__description.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-ghettobox__description.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-ghettobox__description.sc-stzh-ghettobox{--stzh-base-color:var(--richtext-color)}.stzh-ghettobox__description.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-ghettobox__description.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-ghettobox__description.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-ghettobox__description.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-xlarge)}}.stzh-ghettobox__button.sc-stzh-ghettobox{display:grid}@media screen and (min-width: 600px){.stzh-ghettobox__button.sc-stzh-ghettobox{justify-content:start}}.stzh-ghettobox__close.sc-stzh-ghettobox{position:absolute;top:0;right:0}@media screen and (min-width: 600px){.stzh-ghettobox__close.sc-stzh-ghettobox{top:0.625rem;right:0.625rem}}`;
-
-const StzhGhettobox = /*@__PURE__*/ proxyCustomElement(class StzhGhettobox extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.stzhOpen = createEvent(this, "stzhOpen");
-        this.stzhClose = createEvent(this, "stzhClose");
-        /** Overwrite hidden h1 title */
-        this.hiddenTitle = "";
-        /** Main title */
-        this.mainTitle = "";
-        /** Description */
-        this.description = "";
-        /** Hide close button */
-        this.hideClose = false;
-        /** Open state */
-        this.open = true;
-        this.onCloseButtonClick = () => {
-            this.hide();
-        };
-        this.init = () => {
-            const button = this.element.querySelector('stzh-button[slot="button"]');
-            if (button) {
-                setPropsIfNull(button, {
-                    size: "small",
-                    sizeMedium: "default",
-                    variant: "secondary",
-                    effect: "cta",
-                    icon: "arrow-right",
-                    iconPosition: "right",
-                });
-            }
-        };
-    }
-    async show() {
-        this.open = true;
-        this.stzhOpen.emit({
-            component: "stzh-ghettobox",
-        });
-    }
-    async hide() {
-        this.open = false;
-        this.stzhClose.emit({
-            component: "stzh-ghettobox",
-        });
-    }
-    async componentWillLoad() {
-        if (!this.localization) {
-            this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "ghettobox");
-        }
-    }
-    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 classes = {
-            "stzh-ghettobox": true,
-            "stzh-ghettobox--has-close-button": !this.hideClose,
-        };
-        // TODO: Temporary workaround/bugfix for readspeaker class "rs_skip" can be removed once Readspeaker update with bugfix has arrived (ETA end of 2024).
-        return (h(Host, { key: 'd40a68f06befce32bddf586e8a0ac3baa6c6029b', hidden: !this.open }, h("div", { key: 'f2df3cf8f7301e7050716e02cacf17c55c2c9164', class: Object.assign(Object.assign({}, classes), { rs_skip: !this.open }), "aria-hidden": this.open ? "false" : "true" }, h("div", { key: '223eef31853e7e7e778d365216dd7feac1875a61', class: "stzh-ghettobox__container" }, h("h1", { key: '9c817ce20a40c6fbb81fd65de0a3d6b2f5f52616', class: "stzh-ghettobox__hidden-title" }, this.hiddenTitle || this.localization.hiddenTitle), h("div", { key: 'b36665c321d5da30119675f030797c8980802f39', class: "stzh-ghettobox__message" }, h("div", { key: '72faac5bcf07946254ba27e3496e2a1e085b1e8b', class: "stzh-ghettobox__text" }, h("h2", { key: 'e3c5c4c26f13c93a80742ece7fb2773bb07fd7c5', class: "stzh-ghettobox__main-title" }, this.mainTitle), h("div", { key: '0bb78ab484b3b2f63a31a7ddfdeae63f670dfcf8', class: "stzh-ghettobox__description" }, this.description ? this.description : h("slot", null))), h("div", { key: 'cc2eece7ae9eaeee19ff8638eb8d0e38bb6c58e9', class: "stzh-ghettobox__button" }, h("slot", { key: '0011b4be750fe4ee4aa2ae02c4032b42cafc7272', name: "button" }))), !this.hideClose && (h("stzh-button", { key: '87d3f30a09d3f90fabb822527d9dd7d8ba7ddb43', class: "stzh-ghettobox__close", onClick: this.onCloseButtonClick, a11yLabel: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" }))))));
-    }
-    get element() { return this; }
-    static get style() { return stzhGhettoboxCss(); }
-}, [262, "stzh-ghettobox", {
-        "hiddenTitle": [1, "hidden-title"],
-        "mainTitle": [1, "main-title"],
-        "description": [1],
-        "hideClose": [4, "hide-close"],
-        "localization": [16],
-        "open": [32],
-        "show": [64],
-        "hide": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["stzh-ghettobox", "stzh-badge", "stzh-button", "stzh-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "stzh-ghettobox":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), StzhGhettobox);
-            }
-            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 { StzhGhettobox as S, defineCustomElement as d };
-//# sourceMappingURL=p-DC-bkkG9.js.map
-
-//# sourceMappingURL=p-DC-bkkG9.js.map

package/dist/components/p-DC-bkkG9.js.map

@@ -1 +0,0 @@
-{"file":"p-DC-bkkG9.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/CMS/stzh-ghettobox/stzh-ghettobox.scss?tag=stzh-ghettobox&encapsulation=scoped","src/components/CMS/stzh-ghettobox/stzh-ghettobox.tsx"],"sourcesContent":["/*\n * @prop --background-color: Background color of ghettobox\n */\n\n:host {\n  @include base-invert;\n  @include button-invert;\n\n  --background-color: #{$colorCoral60};\n  --color: #{$baseInvertColor};\n  --richtext-color: var(--color);\n}\n\n.stzh-ghettobox {\n  position: relative;\n  color: var(--color);\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n\n  --stzh-button-secondary-color: #{$colorCoral60};\n  --stzh-button-secondary-background-color: #{$colorWhite90op};\n\n  --stzh-button-secondary-hover-color: #{$colorCoral60};\n  --stzh-button-secondary-hover-background-color: #{$colorWhite};\n\n  --stzh-button-secondary-disabled-color: #{$colorWhite60op};\n  --stzh-button-secondary-disabled-background-color: #{$colorWhite40op};\n\n  &__container {\n    @include container;\n    @include spaceCurve(\"padding-top\", \"large\");\n    @include spaceCurve(\"padding-bottom\", \"large\");\n  }\n\n  &__hidden-title {\n    @include visuallyhidden;\n  }\n\n  &__message {\n    @include spaceCurve(\"gap\", \"regular\");\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__main-title {\n    @include font(\"title\");\n    @include fontCurve(\"h2\", \"heading\");\n    margin: 0;\n    color: inherit;\n\n    &:not(:empty) {\n      @include spaceCurve(\"margin-bottom\", \"regular\");\n    }\n  }\n\n  &__description {\n    @include fontCurve(\"p1\");\n    --stzh-base-color: var(--richtext-color);\n\n    &:not(:empty) {\n      @include spaceCurve(\"margin-bottom\", \"small\");\n    }\n  }\n\n  &__button {\n    display: grid;\n\n    @include mq($from: small) {\n      justify-content: start;\n    }\n  }\n\n  &__close {\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    @include mq($from: small) {\n      top: 10px;\n      right: 10px;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from \"@stencil/core\";\n\nimport { StzhGhettoboxCloseEvent, StzhGhettoboxOpenEvent } from \"../../../index\";\n\nimport { setPropsIfNull } from \"../../../utils/utils\";\nimport { StzhGhettoboxLocalizedText } from \"./stzh-ghettobox.localization\";\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @slot button - Slot for button element\n */\n@Component({\n  tag: \"stzh-ghettobox\",\n  styleUrl: \"stzh-ghettobox.scss\",\n  scoped: true,\n})\nexport class StzhGhettobox {\n  /** Overwrite hidden h1 title */\n  @Prop() hiddenTitle: string = \"\";\n\n  /** Main title */\n  @Prop() mainTitle: string = \"\";\n\n  /** Description */\n  @Prop() description: string = \"\";\n\n  /** Hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings */\n  @Prop() localization: StzhGhettoboxLocalizedText;\n\n  /** Ghettobox open event */\n  @Event() stzhOpen: EventEmitter<StzhGhettoboxOpenEvent>;\n\n  /** Ghettobox close event */\n  @Event() stzhClose: EventEmitter<StzhGhettoboxCloseEvent>;\n\n  @Element() element: HTMLStzhGhettoboxElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-ghettobox\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-ghettobox\",\n    });\n  }\n\n  private observer: MutationObserver;\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  };\n\n  private init = () => {\n    const button = this.element.querySelector('stzh-button[slot=\"button\"]');\n\n    if (button) {\n      setPropsIfNull(button, {\n        size: \"small\",\n        sizeMedium: \"default\",\n        variant: \"secondary\",\n        effect: \"cta\",\n        icon: \"arrow-right\",\n        iconPosition: \"right\",\n      } as HTMLStzhButtonElement);\n    }\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"ghettobox\");\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 classes = {\n      \"stzh-ghettobox\": true,\n      \"stzh-ghettobox--has-close-button\": !this.hideClose,\n    };\n\n    // TODO: Temporary workaround/bugfix for readspeaker class \"rs_skip\" can be removed once Readspeaker update with bugfix has arrived (ETA end of 2024).\n    return (\n      <Host hidden={!this.open}>\n        <div class={{ ...classes, rs_skip: !this.open }} aria-hidden={this.open ? \"false\" : \"true\"}>\n          <div class=\"stzh-ghettobox__container\">\n            <h1 class=\"stzh-ghettobox__hidden-title\">{this.hiddenTitle || this.localization.hiddenTitle}</h1>\n            <div class=\"stzh-ghettobox__message\">\n              <div class=\"stzh-ghettobox__text\">\n                <h2 class=\"stzh-ghettobox__main-title\">{this.mainTitle}</h2>\n                <div class=\"stzh-ghettobox__description\">{this.description ? this.description : <slot></slot>}</div>\n              </div>\n              <div class=\"stzh-ghettobox__button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n            {!this.hideClose && (\n              <stzh-button\n                class=\"stzh-ghettobox__close\"\n                onClick={this.onCloseButtonClick}\n                a11yLabel={this.localization.close}\n                variant=\"tertiary\"\n                size=\"small\"\n                iconOnly={true}\n                icon=\"close-big\"\n              ></stzh-button>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}