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

package/dist/components/p-BRbEuDtS.js

@@ -1,146 +0,0 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-DAS4ghWk.js';
-import { h as hasSlot } from './p-CN5apKPb.js';
-import { d as defineCustomElement$2 } from './p-Cz-ha88J.js';
-import { d as defineCustomElement$1 } from './p-BU4OH8Cm.js';
-
-const stzhMenuItemCss = () => `.sc-stzh-menu-item-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-menu-item-h,[stzh-hidden].sc-stzh-menu-item-h{display:none}.sc-stzh-menu-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-menu-item-h *.sc-stzh-menu-item,.sc-stzh-menu-item-h *.sc-stzh-menu-item::before,.sc-stzh-menu-item-h *.sc-stzh-menu-item::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-menu-item-h .has-focus.sc-stzh-menu-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-menu-item-h .stzh-fylingfocus-focused.sc-stzh-menu-item{outline-style:none !important}.sc-stzh-menu-item-h .stzh-fylingfocus-focused.sc-stzh-menu-item::-moz-focus-inner{border:0 !important}.sc-stzh-menu-item-h{--height:var(--stzh-menu-item-height);--color:var(--stzh-color-black);--background-color:transparent;--icon-size:var(--stzh-icon-size-small);--padding-top:var(--stzh-space-xsmall);--padding-bottom:var(--stzh-space-xsmall);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--hover-color:var(--stzh-popover-item-hover-color, var(--stzh-color-black));--hover-background-color:var(--stzh-popover-item-hover-bg, var(--stzh-color-grey20))}[size=large].sc-stzh-menu-item-h{--icon-size:var(--stzh-icon-size);--height:var(--stzh-menu-large-item-height);--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge)}[variant=secondary].sc-stzh-menu-item-h{--color:var(--stzh-color-primary70);--hover-color:var(--stzh-color-primary70);--hover-background-color:var(--stzh-color-secondary30)}[active].sc-stzh-menu-item-h:not([active=false]){--color:var(--stzh-color-primary70);--hover-color:var(--stzh-color-primary70);--hover-background-color:var(--stzh-color-grey20)}[disabled].sc-stzh-menu-item-h:not([disabled=false]){--color:var(--stzh-color-grey70);--background-color:var(--stzh-color-grey10);--hover-color:var(--stzh-color-grey70);--hover-background-color:var(--stzh-color-grey10)}.stzh-menu-item.sc-stzh-menu-item{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);font-family:inherit;display:flex;gap:var(--stzh-space-small);align-items:center;justify-content:stretch;appearance:none;-webkit-text-decoration-line:none;text-decoration-line:none;border:none;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);color:var(--color);background-color:var(--background-color);width:100%;height:var(--height);line-height:var(--height);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color, border-color;cursor:pointer}.stzh-menu-item.sc-stzh-menu-item:hover{color:var(--hover-color);background-color:var(--hover-background-color)}.stzh-menu-item__icon-wrapper.sc-stzh-menu-item{--stzh-icon-size:var(--icon-size);position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:1em}.stzh-menu-item__badge.sc-stzh-menu-item{position:absolute;z-index:1;top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-menu-item__text-wrapper.sc-stzh-menu-item{display:flex;gap:var(--stzh-space-xsmall)}.stzh-menu-item__counter.sc-stzh-menu-item{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-menu-item__text.sc-stzh-menu-item{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stzh-menu-item--size-large.sc-stzh-menu-item{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);gap:var(--stzh-space-medium)}.stzh-menu-item--is-disabled.sc-stzh-menu-item{cursor:not-allowed}`;
-
-const StzhMenuItem = /*@__PURE__*/ proxyCustomElement(class StzhMenuItem extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.stzhFocus = createEvent(this, "stzhFocus");
-        this.stzhBlur = createEvent(this, "stzhBlur");
-        this.stzhClick = createEvent(this, "stzhClick");
-        /** Variant */
-        this.variant = "default";
-        /** Size */
-        this.size = "default";
-        /** Badge (only displayed if `icon` property or icon slot is used) */
-        this.badge = "";
-        /** Badge type */
-        this.badgeType = "default";
-        /** Whether badge should be displayed empty */
-        this.badgeEmpty = false;
-        /** Whether the button is disabled */
-        this.disabled = false;
-        /** Whether the button is active */
-        this.active = false;
-        /** Icon (use instead of icon slot) */
-        this.icon = "";
-        /** Label */
-        this.label = "";
-        /** `href` if the button should be used as link  */
-        this.href = "";
-        /** Target if the button is used as link (if `href` used)  */
-        this.target = "";
-        this.focusedByInput = false;
-        this.onRootFocus = () => {
-            if (!this.focusedByInput) {
-                this.menuItem.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-menu-item",
-                originalEvent: event,
-            });
-        };
-        this.onBlur = (event) => {
-            const blurEvent = new FocusEvent("blur", {
-                view: window,
-                bubbles: false,
-                cancelable: false,
-            });
-            this.element.dispatchEvent(blurEvent);
-            this.stzhBlur.emit({
-                component: "stzh-menu-item",
-                originalEvent: event,
-            });
-        };
-        this.onClick = (event) => {
-            this.stzhClick.emit({
-                component: "stzh-menu-item",
-                originalEvent: event,
-                href: this.href,
-            });
-        };
-    }
-    componentDidRender() {
-        requestAnimationFrame(() => {
-            var _a;
-            (_a = this.menuItem) === null || _a === void 0 ? void 0 : _a.setAttribute("s-object-id", this.analyticsId || this.text.innerText);
-        });
-    }
-    renderInner(iconUsed) {
-        return (h(Fragment, null, iconUsed && (h("div", { class: "stzh-menu-item__icon-wrapper" }, this.icon ? (h("stzh-icon", { class: "stzh-menu-item__icon", name: this.icon })) : (h("slot", { name: "icon" })), (this.badge || this.badgeEmpty) && (h("stzh-badge", { class: "stzh-menu-item__badge", label: this.badge, type: this.badgeType })))), h("div", { class: "stzh-menu-item__text-wrapper" }, h("div", { ref: el => (this.text = el), class: "stzh-menu-item__text" }, this.label ? this.label : h("slot", null)), this.counter !== undefined && this.counter > 0 && (h("div", { class: "stzh-menu-item__counter" }, "(", this.counter, ")")))));
-    }
-    render() {
-        const iconUsed = hasSlot(this.element, "icon") || !!this.icon;
-        const classes = {
-            "stzh-menu-item": true,
-            "stzh-menu-item--has-icon": iconUsed,
-            "stzh-menu-item--has-badge": !!this.badge,
-            "stzh-menu-item--is-disabled": this.disabled,
-            "stzh-menu-item--is-active": this.active,
-            [`stzh-menu-item--size-${this.size}`]: !!this.size,
-            [`stzh-menu-item--${this.variant}`]: !!this.variant,
-        };
-        return (h(Host, { key: 'e9de0e4a05a7fd9ebcc3bef588f5786634d50534', role: "menuitem", tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.menuItem = el), href: this.disabled ? null : this.href, target: this.target, class: classes, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))) : (h("button", { ref: el => (this.menuItem = el), class: classes, type: "button", disabled: this.disabled, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed)))));
-    }
-    get element() { return this; }
-    static get style() { return stzhMenuItemCss(); }
-}, [262, "stzh-menu-item", {
-        "variant": [513],
-        "size": [513],
-        "counter": [2],
-        "badge": [1],
-        "badgeType": [513, "badge-type"],
-        "badgeEmpty": [516, "badge-empty"],
-        "disabled": [516],
-        "active": [516],
-        "icon": [1],
-        "label": [1],
-        "href": [1],
-        "target": [1],
-        "a11yLabel": [1, "a11y-label"],
-        "analyticsId": [1, "analytics-id"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["stzh-menu-item", "stzh-badge", "stzh-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "stzh-menu-item":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), StzhMenuItem);
-            }
-            break;
-        case "stzh-badge":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "stzh-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { StzhMenuItem as S, defineCustomElement as d };
-//# sourceMappingURL=p-BRbEuDtS.js.map
-
-//# sourceMappingURL=p-BRbEuDtS.js.map

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

@@ -1 +0,0 @@
-{"file":"p-BRbEuDtS.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-menu-item/stzh-menu-item.scss?tag=stzh-menu-item&encapsulation=scoped","src/components/stzh-menu-item/stzh-menu-item.tsx"],"sourcesContent":["/**\n * @prop --height: Height of item\n * @prop --icon-size: Size of icon next to item\n * @prop --color: Color of item\n * @prop --background-color: Background color of item\n * @prop --hover-color: Hover color of item\n * @prop --hover-background-color: Hover background color of item\n *\n * @prop --stzh-menu-item-height: **Global**: Height of items\n */\n\n:host {\n  --height: var(--stzh-menu-item-height);\n  --color: #{$colorBlack};\n  --background-color: transparent;\n  --icon-size: #{iconSize(\"small\")};\n  --padding-top: #{space(\"xsmall\")};\n  --padding-bottom: #{space(\"xsmall\")};\n  --padding-left: #{space(\"large\")};\n  --padding-right: #{space(\"large\")};\n\n  --hover-color: var(--stzh-popover-item-hover-color, #{$colorBlack});\n  --hover-background-color: var(--stzh-popover-item-hover-bg, #{$colorGrey20});\n\n  &[size=\"large\"] {\n    --icon-size: #{iconSize()};\n    --height: var(--stzh-menu-large-item-height);\n    --padding-left: #{space(\"xlarge\")};\n    --padding-right: #{space(\"xlarge\")};\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$colorPrimary70};\n\n    --hover-color: #{$colorPrimary70};\n    --hover-background-color: #{$colorSecondary30};\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorPrimary70};\n    --hover-color: #{$colorPrimary70};\n    --hover-background-color: #{$colorGrey20};\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey70};\n    --background-color: #{$colorGrey10};\n\n    --hover-color: #{$colorGrey70};\n    --hover-background-color: #{$colorGrey10};\n  }\n}\n\n.stzh-menu-item {\n  @include fontSize(\"micro\");\n  font-family: inherit;\n  display: flex;\n  gap: space(\"small\");\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  text-decoration-line: none;\n  border: none;\n  padding-top: var(--padding-top);\n  padding-bottom: var(--padding-bottom);\n  padding-left: var(--padding-left);\n  padding-right: var(--padding-right);\n  color: var(--color);\n  background-color: var(--background-color);\n  width: 100%;\n  height: var(--height);\n  line-height: var(--height);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: 1em;\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: calc(#{space(\"xsmall\")} * -1);\n    right: calc(#{space(\"xsmall\")} * -1);\n  }\n\n  &__text-wrapper {\n    display: flex;\n    gap: space(\"xsmall\");\n  }\n\n  &__counter {\n    @include font;\n  }\n\n  &__text {\n    @include truncate;\n  }\n\n  /* Large variant */\n\n  &--size-large {\n    @include fontSize(\"milli\");\n    gap: space(\"medium\");\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Prop, Element, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport {\n  StzhMenuItemFocusEvent,\n  StzhMenuItemBlurEvent,\n  StzhMenuItemClickEvent,\n  StzhBadgeType,\n  StzhMenuSize,\n  StzhMenuVariant,\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for `stzh-icon` element\n */\n@Component({\n  tag: \"stzh-menu-item\",\n  styleUrl: \"stzh-menu-item.scss\",\n  scoped: true,\n})\nexport class StzhMenuItem {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhMenuVariant = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhMenuSize = \"default\";\n\n  /** Counter */\n  @Prop() counter: number;\n\n  /** Badge (only displayed if `icon` property or icon slot is used) */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhMenuItemElement;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhMenuItemFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhMenuItemBlurEvent>;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhMenuItemClickEvent>;\n\n  private menuItem: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.menuItem.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.menuItem?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        {iconUsed && (\n          <div class=\"stzh-menu-item__icon-wrapper\">\n            {this.icon ? (\n              <stzh-icon class=\"stzh-menu-item__icon\" name={this.icon}></stzh-icon>\n            ) : (\n              <slot name=\"icon\"></slot>\n            )}\n            {(this.badge || this.badgeEmpty) && (\n              <stzh-badge class=\"stzh-menu-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n            )}\n          </div>\n        )}\n        <div class=\"stzh-menu-item__text-wrapper\">\n          <div ref={el => (this.text = el as HTMLDivElement)} class=\"stzh-menu-item__text\">\n            {this.label ? this.label : <slot></slot>}\n          </div>\n          {this.counter !== undefined && this.counter > 0 && (\n            <div class=\"stzh-menu-item__counter\">({this.counter})</div>\n          )}\n        </div>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-menu-item\": true,\n      \"stzh-menu-item--has-icon\": iconUsed,\n      \"stzh-menu-item--has-badge\": !!this.badge,\n      \"stzh-menu-item--is-disabled\": this.disabled,\n      \"stzh-menu-item--is-active\": this.active,\n      [`stzh-menu-item--size-${this.size}`]: !!this.size,\n      [`stzh-menu-item--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host role=\"menuitem\" tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ? (\n          <a\n            ref={el => (this.menuItem = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n        ) : (\n          <button\n            ref={el => (this.menuItem = el as HTMLButtonElement)}\n            class={classes}\n            type=\"button\"\n            disabled={this.disabled}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-BTwmO0VT.js

@@ -1,234 +0,0 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-DAS4ghWk.js';
-import { s as setPropsIfNull } from './p-CN5apKPb.js';
-import { c as createBaseFocusTrapOptions } from './p-BzugsqyR.js';
-import { c as createFocusTrap } from './p-CBUfcdIy.js';
-import { d as defineCustomElement$4 } from './p-Cz-ha88J.js';
-import { d as defineCustomElement$3 } from './p-BtU8igAM.js';
-import { d as defineCustomElement$2 } from './p-C3DzudRE.js';
-import { d as defineCustomElement$1 } from './p-BU4OH8Cm.js';
-
-const stzhDialogCss = () => `.sc-stzh-dialog-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-dialog-h,[stzh-hidden].sc-stzh-dialog-h{display:none}.sc-stzh-dialog-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-dialog-h *.sc-stzh-dialog,.sc-stzh-dialog-h *.sc-stzh-dialog::before,.sc-stzh-dialog-h *.sc-stzh-dialog::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-dialog-h .has-focus.sc-stzh-dialog{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-dialog-h .stzh-fylingfocus-focused.sc-stzh-dialog{outline-style:none !important}.sc-stzh-dialog-h .stzh-fylingfocus-focused.sc-stzh-dialog::-moz-focus-inner{border:0 !important}.sc-stzh-dialog-h{--padding-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-top:var(--stzh-space-xxxxlarge)}}.sc-stzh-dialog-h{--padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-bottom:var(--stzh-space-xxxxlarge)}}.sc-stzh-dialog-h{--padding-left:var(--stzh-space-large)}@media screen and (min-width: 600px){.sc-stzh-dialog-h{--padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-left:var(--stzh-space-xxxlarge)}}.sc-stzh-dialog-h{--padding-right:var(--stzh-space-large)}@media screen and (min-width: 600px){.sc-stzh-dialog-h{--padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-right:var(--stzh-space-xxxlarge)}}.sc-stzh-dialog-h{--width:100%;--backdrop-opacity:var(--stzh-dialog-backdrop-opacity);--backdrop-background-color:var(--stzh-dialog-backdrop-background-color)}@media screen and (min-width: 600px){.sc-stzh-dialog-h{--width:33.5rem}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--width:38.125rem}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--width:54.125rem}}@media screen and (min-width: 1600px){.sc-stzh-dialog-h{--width:55.5rem}}@media screen and (min-width: 600px){[size=small].sc-stzh-dialog-h{--width:24.6875rem}}@media screen and (min-width: 900px){[size=small].sc-stzh-dialog-h{--width:28.75rem}}@media screen and (min-width: 1260px){[size=small].sc-stzh-dialog-h{--width:32rem}}.stzh-dialog.sc-stzh-dialog{z-index:var(--stzh-z-index-dialog);display:none;position:fixed;top:0;left:0;width:100%;height:100%;flex-direction:column;align-items:stretch;justify-content:stretch}.stzh-dialog__content.sc-stzh-dialog{z-index:2;position:relative;display:flex;flex-direction:column;align-items:center;flex-grow:1;overflow:auto}.stzh-dialog__dialog.sc-stzh-dialog{position:relative;display:flex;flex-direction:column;margin:auto;border:none;background-color:var(--stzh-color-white);width:auto;min-width:var(--width);max-width:100%;box-shadow:var(--stzh-box-shadow-overlay);height:100vh;max-height:100vh;overflow:hidden;outline:none}.stzh-dialog__dialog--fit-content.sc-stzh-dialog{width:-moz-fit-content;width:fit-content}@media screen and (min-width: 600px){.stzh-dialog__dialog.sc-stzh-dialog{height:auto}}.stzh-dialog__backdrop.sc-stzh-dialog{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;text-align:center;background-color:var(--backdrop-background-color);opacity:var(--backdrop-opacity)}.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-dialog__heading.sc-stzh-dialog{padding-top:var(--padding-top);padding-left:var(--padding-left);padding-right:var(--padding-right)}.stzh-dialog__dialog-content.sc-stzh-dialog{padding-left:var(--padding-left);padding-right:var(--padding-right);padding-top:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xxxlarge)}}.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-dialog__dialog-content.sc-stzh-dialog{overflow:auto;flex-grow:1}.stzh-dialog__actions.sc-stzh-dialog:not(:empty){padding:var(--stzh-space-medium) var(--padding-right) var(--padding-bottom) var(--padding-left)}.stzh-dialog__close-button.sc-stzh-dialog{position:absolute;top:var(--stzh-space-xsmall);right:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-dialog__close-button.sc-stzh-dialog{top:var(--stzh-space-large);right:var(--stzh-space-large)}}.stzh-dialog--is-open.sc-stzh-dialog{display:flex}`;
-
-const CLASS_BODY_OPEN = "stzh-dialog-open";
-let activeDialog = null;
-let dialogCounter = 0;
-const StzhDialog = /*@__PURE__*/ proxyCustomElement(class StzhDialog extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.stzhOpen = createEvent(this, "stzhOpen");
-        this.stzhClose = createEvent(this, "stzhClose");
-        /** Close dialog when pressing ESC */
-        this.closeOnEscapeKey = false;
-        /** Close dialog when clicking outside of it */
-        this.closeOnBackdropClick = false;
-        /** Open status */
-        this.open = false;
-        /** Stay in original position (true) or move to body (false) */
-        this.stay = true;
-        /** Size */
-        this.size = "default";
-        /** Whether to hide close button */
-        this.hideClose = false;
-        /** Heading text
-         * *mandatory* since DESI 4.0
-         * */
-        this.heading = "";
-        /** Accessibility role */
-        this.a11yRole = "alertdialog";
-        this.handleDialogClick = (event) => {
-            const target = event.target;
-            if (target.dataset.stzhDialogClose) {
-                this.hide();
-            }
-            else {
-                const closest = target.closest("[data-stzh-dialog-close]");
-                if (closest) {
-                    this.hide();
-                }
-            }
-        };
-        this.handleCloseButtonClick = () => {
-            this.hide();
-        };
-        this.init = () => {
-            const actions = this.element.querySelector('stzh-actions[slot="actions"]');
-            if (actions) {
-                setPropsIfNull(actions, {
-                    variant: "dialog",
-                });
-            }
-        };
-    }
-    handleOutsideClick(event) {
-        if (!this.open || !this.closeOnBackdropClick) {
-            return;
-        }
-        const isClickOutside = event.target !== this.dialogElement && this.dialogElement.contains(event.target) === false;
-        if (isClickOutside) {
-            this.hide();
-        }
-    }
-    handleKeydown(event) {
-        if (event.key === "Escape" && activeDialog === this && this.closeOnEscapeKey) {
-            this.hide();
-        }
-    }
-    handleOpenTriggerClick(event) {
-        const target = event.target;
-        if (target.dataset.stzhDialogTrigger === this.element.id) {
-            this.show();
-        }
-        else {
-            const closest = target.closest("[data-stzh-dialog-trigger]");
-            if (closest && closest.dataset.stzhDialogTrigger === this.element.id) {
-                this.show();
-            }
-        }
-    }
-    async show() {
-        this.open = true;
-        this.stzhOpen.emit({
-            component: "stzh-dialog",
-        });
-    }
-    async hide() {
-        this.open = false;
-        this.stzhClose.emit({
-            component: "stzh-dialog",
-        });
-    }
-    getSiblings() {
-        if (!this.containerElement) {
-            return [];
-        }
-        return Array.from(this.containerElement.children).filter(child => child !== this.element);
-    }
-    disableSiblings() {
-        this.getSiblings().forEach(sibling => {
-            sibling.setAttribute("aria-hidden", "true");
-        });
-    }
-    enableSiblings() {
-        this.getSiblings().forEach(sibling => {
-            sibling.removeAttribute("aria-hidden");
-        });
-    }
-    dialogShown() {
-        activeDialog = this;
-        document.body.classList.add(CLASS_BODY_OPEN);
-        this.disableSiblings();
-        if (this.trap) {
-            this.trap.activate();
-        }
-    }
-    dialogHidden() {
-        document.body.classList.remove(CLASS_BODY_OPEN);
-        this.enableSiblings();
-        if (this.trap) {
-            this.trap.deactivate();
-        }
-        activeDialog = null;
-    }
-    async componentWillLoad() {
-        this.id = `stzh-dialog-${dialogCounter}`;
-        dialogCounter++;
-        if (!this.localization) {
-            this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "dialog");
-        }
-    }
-    componentDidRender() {
-        this.open ? this.dialogShown() : this.dialogHidden();
-    }
-    componentDidUpdate() {
-        this.trap.updateContainerElements(this.element);
-    }
-    componentDidLoad() {
-        this.trap = createFocusTrap(this.element, Object.assign({ fallbackFocus: this.dialogElement }, createBaseFocusTrapOptions()));
-        if (this.open) {
-            this.dialogShown();
-        }
-    }
-    connectedCallback() {
-        if (!this.stay && this.element.parentElement !== document.body) {
-            document.body.appendChild(this.element);
-        }
-        this.containerElement = this.element.parentElement;
-        this.init();
-        this.observer = new MutationObserver(this.init);
-        this.observer.observe(this.element, {
-            childList: true,
-            subtree: true,
-        });
-    }
-    disconnectedCallback() {
-        this.dialogHidden();
-        if (this.observer) {
-            this.observer.disconnect();
-        }
-    }
-    render() {
-        return (h(Host, { key: '083adde5512ab9ceeb8675c4b17e9d29bc8abcd2' }, h("div", { key: 'fdbaa1de1bd13189efc2e54f7ddfd61b4ffe8236', class: {
-                "stzh-dialog": true,
-                "stzh-dialog--is-open": this.open,
-                "stzh-dialog--has-heading": !!this.heading,
-                "stzh-dialog--has-close-hidden": this.hideClose,
-                [`stzh-dialog--size-${this.size}`]: !!this.size,
-            } }, h("div", { key: '2a9059cdf7f02290f5ad58b330097b677880dd8a', class: "stzh-dialog__backdrop" }), h("div", { key: '9c6cc625a094c06d868083bc289b1f185537c1de', class: "stzh-dialog__content" }, h("div", { key: 'a92c8bd82f3b7bb8b9c00d56f75d14698d5bfbe6', class: "stzh-dialog__dialog", ref: el => (this.dialogElement = el), tabindex: "-1", role: this.a11yRole, "aria-hidden": this.open ? "false" : "true", onClick: this.handleDialogClick }, h("stzh-heading", { key: 'df1f419402788b1866fff55f4cac48124001420f', id: `${this.id}-heading`, class: "stzh-dialog__heading", level: "2" }, this.heading ? this.heading : "Title"), h("div", { key: '181ca3137a8bdcba570a9becddec69c33b7939d3', class: "stzh-dialog__dialog-content" }, h("slot", { key: '64f77e06eb37383cf8fb7127c9b1a240cca39751' })), h("div", { key: '6c90e79a550f4b0754d3cf38b0efc2b643c136e0', class: "stzh-dialog__actions" }, h("slot", { key: '817a56c567599503ddac979152e089dd4e529e60', name: "actions" })), !this.hideClose && (h("stzh-button", { key: '36a19a8064eaa9d8719c3e3eddf950b2debbe95c', class: "stzh-dialog__close-button", variant: "tertiary", size: "small", icon: "close", iconOnly: true, onClick: this.handleCloseButtonClick, a11yLabel: this.localization.close, analyticsId: this.closeAnalyticsId || this.localization.close })))))));
-    }
-    get element() { return this; }
-    static get style() { return stzhDialogCss(); }
-}, [262, "stzh-dialog", {
-        "localization": [16],
-        "closeOnEscapeKey": [4, "close-on-escape-key"],
-        "closeOnBackdropClick": [4, "close-on-backdrop-click"],
-        "open": [1028],
-        "stay": [4],
-        "size": [513],
-        "hideClose": [4, "hide-close"],
-        "heading": [1],
-        "a11yRole": [1, "a11y-role"],
-        "closeAnalyticsId": [1, "close-analytics-id"],
-        "show": [64],
-        "hide": [64]
-    }, [[6, "click", "handleOutsideClick"], [4, "keydown", "handleKeydown"], [4, "click", "handleOpenTriggerClick"]]]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["stzh-dialog", "stzh-badge", "stzh-button", "stzh-heading", "stzh-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "stzh-dialog":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), StzhDialog);
-            }
-            break;
-        case "stzh-badge":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "stzh-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "stzh-heading":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "stzh-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { StzhDialog as S, defineCustomElement as d };
-//# sourceMappingURL=p-BTwmO0VT.js.map
-
-//# sourceMappingURL=p-BTwmO0VT.js.map

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

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

package/dist/components/p-BU4OH8Cm.js

@@ -1,127 +0,0 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-DAS4ghWk.js';
-
-const stzhIconCss = () => `: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{--size:var(--stzh-icon-size);--color:var(--stzh-icon-color);--vertical-align:var(--stzh-icon-vertical-align);display:inline-flex;justify-content:center;align-items:center;color:var(--color);vertical-align:var(--vertical-align);width:var(--size);height:var(--size)}@media print{:host{-webkit-print-color-adjust:exact;print-color-adjust:exact}}.stzh-icon{display:none}.stzh-icon__svg{width:var(--size);height:var(--size)}`;
-
-let iconCounter = 0;
-// Shared cache for all instances to store fetched SVG icons
-const iconCache = new Map();
-const StzhIcon = /*@__PURE__*/ proxyCustomElement(class StzhIcon extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * Icon which should be displayed
-         * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.
-         */
-        this.name = "";
-        /**
-         * Hidden icon title for screenreader
-         * (usually not needed when e.g. inside links or buttons that have text)
-         */
-        this.a11yTitle = "";
-        this.svgHtml = "";
-        this.iconDisplay = "none";
-    }
-    async nameWatcher(name) {
-        this.iconDisplay = "none";
-        if (name) {
-            if (iconCache.has(name)) {
-                this.svgHtml = await iconCache.get(name);
-                this.updateAccessibilityAttributes();
-                this.showIcon();
-            }
-            else {
-                const fetchSvgPromise = fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`)
-                    .then(response => {
-                    if (response.status === 200) {
-                        return response.text();
-                    }
-                    throw new Error("Failed to fetch icon");
-                })
-                    .then(svgString => {
-                    const parser = new DOMParser();
-                    const svgDoc = parser.parseFromString(svgString, "image/svg+xml");
-                    const svgElement = svgDoc.documentElement;
-                    svgElement.classList.add("stzh-icon__svg");
-                    return svgElement.outerHTML;
-                });
-                iconCache.set(name, fetchSvgPromise);
-                this.svgHtml = await fetchSvgPromise;
-                this.updateAccessibilityAttributes();
-                this.showIcon();
-            }
-        }
-        else {
-            this.svgElement = null;
-            this.svgHtml = "";
-        }
-    }
-    a11yTitleWatcher(a11yTitle) {
-        if (!this.svgElement)
-            return;
-        this.svgElement.setAttribute("aria-hidden", a11yTitle ? "false" : "true");
-        this.svgElement.setAttribute("focusable", a11yTitle ? "true" : "false");
-        this.svgElement.setAttribute("aria-labelledby", a11yTitle ? `${this.iconId}-title` : null);
-        let title = this.svgElement.querySelector("title");
-        if (!title) {
-            title = document.createElement("title");
-            title.id = `${this.iconId}-title`;
-            this.svgElement.appendChild(title);
-        }
-        title.innerHTML = a11yTitle;
-        this.svgHtml = this.svgElement.outerHTML;
-    }
-    async componentWillLoad() {
-        this.iconId = `stzh-icon-${iconCounter++}`;
-        await this.nameWatcher(this.name);
-    }
-    updateAccessibilityAttributes() {
-        this.a11yTitleWatcher(this.a11yTitle);
-    }
-    showIcon() {
-        // for some obscure reason we need to delay showing the icon in safari,
-        // otherwise the icon doesn't show up randomly
-        // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)
-        window.setTimeout(() => {
-            this.iconDisplay = "contents";
-        }, 0);
-    }
-    render() {
-        return (h(Host, { key: '48bec2666774f99ae81c11a48beb8138b9b107ac' }, h("div", { key: '65b8489b21a64236e6964fca027a2f7f3c963b88', class: "stzh-icon", style: { display: this.iconDisplay }, innerHTML: this.svgHtml })));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "name": ["nameWatcher"],
-        "a11yTitle": ["a11yTitleWatcher"]
-    }; }
-    static get style() { return stzhIconCss(); }
-}, [257, "stzh-icon", {
-        "name": [1],
-        "a11yTitle": [1, "a11y-title"],
-        "svgHtml": [32],
-        "iconDisplay": [32]
-    }, undefined, {
-        "name": ["nameWatcher"],
-        "a11yTitle": ["a11yTitleWatcher"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["stzh-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "stzh-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), StzhIcon);
-            }
-            break;
-    } });
-}
-
-export { StzhIcon as S, defineCustomElement as d };
-//# sourceMappingURL=p-BU4OH8Cm.js.map
-
-//# sourceMappingURL=p-BU4OH8Cm.js.map

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

@@ -1 +0,0 @@
-{"file":"p-BU4OH8Cm.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=shadow","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":["/**\n * @prop --size: Icon size\n * @prop --color: Icon color\n *\n * @prop --stzh-icon-size: **Global**: Default icon size. [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n * @prop --stzh-icon-color: **Global**: Icon color\n * @prop --stzh-icon-vertical-align: **Global**: Icon vertical alignment\n */\n\n:host {\n  --size: #{iconSize()};\n  --color: #{$iconColor};\n  --vertical-align: #{$iconVerticalAlign};\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: var(--color);\n  vertical-align: var(--vertical-align);\n  width: var(--size);\n  height: var(--size);\n\n  @media print {\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\n}\n\n.stzh-icon {\n  display: none;\n\n  &__svg {\n    width: var(--size);\n    height: var(--size);\n  }\n}\n","import { Component, Host, h, Prop, Watch, State, Element } from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n// Shared cache for all instances to store fetched SVG icons\nconst iconCache = new Map<string, Promise<string>>();\n\n@Component({\n  tag: \"stzh-icon\",\n  styleUrl: \"stzh-icon.scss\",\n  shadow: true,\n})\nexport class StzhIcon {\n  /**\n   * Icon which should be displayed\n   * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n   */\n  @Prop() name: string = \"\";\n\n  /**\n   * Hidden icon title for screenreader\n   * (usually not needed when e.g. inside links or buttons that have text)\n   */\n  @Prop({ attribute: \"a11y-title\" }) a11yTitle: string = \"\";\n\n  @Element() element: HTMLStzhIconElement;\n\n  @State() svgHtml: string = \"\";\n  @State() iconDisplay: string = \"none\";\n\n  @Watch(\"name\")\n  async nameWatcher(name: string) {\n    this.iconDisplay = \"none\";\n\n    if (name) {\n      if (iconCache.has(name)) {\n        this.svgHtml = await iconCache.get(name)!;\n        this.updateAccessibilityAttributes();\n        this.showIcon();\n      } else {\n        const fetchSvgPromise = fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`)\n          .then(response => {\n            if (response.status === 200) {\n              return response.text();\n            }\n            throw new Error(\"Failed to fetch icon\");\n          })\n          .then(svgString => {\n            const parser = new DOMParser();\n            const svgDoc = parser.parseFromString(svgString, \"image/svg+xml\");\n            const svgElement = svgDoc.documentElement as unknown as SVGElement;\n            svgElement.classList.add(\"stzh-icon__svg\");\n\n            return svgElement.outerHTML;\n          });\n\n        iconCache.set(name, fetchSvgPromise);\n\n        this.svgHtml = await fetchSvgPromise;\n        this.updateAccessibilityAttributes();\n        this.showIcon();\n      }\n    } else {\n      this.svgElement = null;\n      this.svgHtml = \"\";\n    }\n  }\n\n  @Watch(\"a11yTitle\")\n  a11yTitleWatcher(a11yTitle: string) {\n    if (!this.svgElement) return;\n\n    this.svgElement.setAttribute(\"aria-hidden\", a11yTitle ? \"false\" : \"true\");\n    this.svgElement.setAttribute(\"focusable\", a11yTitle ? \"true\" : \"false\");\n    this.svgElement.setAttribute(\"aria-labelledby\", a11yTitle ? `${this.iconId}-title` : null);\n\n    let title = this.svgElement.querySelector(\"title\");\n\n    if (!title) {\n      title = document.createElement(\"title\");\n      title.id = `${this.iconId}-title`;\n      this.svgElement.appendChild(title);\n    }\n\n    title.innerHTML = a11yTitle;\n    this.svgHtml = this.svgElement.outerHTML;\n  }\n\n  private svgElement: SVGElement | null;\n  private iconId: string;\n\n  async componentWillLoad() {\n    this.iconId = `stzh-icon-${iconCounter++}`;\n    await this.nameWatcher(this.name);\n  }\n\n  private updateAccessibilityAttributes() {\n    this.a11yTitleWatcher(this.a11yTitle);\n  }\n\n  private showIcon() {\n    // for some obscure reason we need to delay showing the icon in safari,\n    // otherwise the icon doesn't show up randomly\n    // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)\n    window.setTimeout(() => {\n      this.iconDisplay = \"contents\";\n    }, 0);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"stzh-icon\" style={{ display: this.iconDisplay }} innerHTML={this.svgHtml}></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}