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

package/dist/components/p-bZ2GVa1M.js

@@ -1,166 +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 { d as defineCustomElement$7 } from './p-Cz-ha88J.js';
-import { d as defineCustomElement$6 } from './p-BtU8igAM.js';
-import { d as defineCustomElement$5 } from './p-Dq2SboPL.js';
-import { d as defineCustomElement$4 } from './p-BU4OH8Cm.js';
-import { d as defineCustomElement$3 } from './p-B8Wx8Azy.js';
-import { d as defineCustomElement$2 } from './p-BQMsQk8o.js';
-import { d as defineCustomElement$1 } from './p-BN-54ren.js';
-
-const stzhPaginationCss = () => `.sc-stzh-pagination-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-pagination-h,[stzh-hidden].sc-stzh-pagination-h{display:none}.sc-stzh-pagination-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagination-h *.sc-stzh-pagination,.sc-stzh-pagination-h *.sc-stzh-pagination::before,.sc-stzh-pagination-h *.sc-stzh-pagination::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-pagination-h .has-focus.sc-stzh-pagination{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pagination-h .stzh-fylingfocus-focused.sc-stzh-pagination{outline-style:none !important}.sc-stzh-pagination-h .stzh-fylingfocus-focused.sc-stzh-pagination::-moz-focus-inner{border:0 !important}.sc-stzh-pagination-h{--justify-content:inherit;--padding-left:calc(var(--stzh-form-input-height) + var(--stzh-space-medium))}.stzh-pagination.sc-stzh-pagination{position:relative;display:flex;align-items:center;gap:var(--stzh-space-medium);padding-left:var(--padding-left);justify-content:var(--justify-content)}.stzh-pagination__input.sc-stzh-pagination{--text-align:center;--input-width:var(--stzh-form-input-height);--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;position:absolute;top:0;left:0}.stzh-pagination__total.sc-stzh-pagination{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);color:var(--stzh-color-grey70)}.stzh-pagination--size-small.sc-stzh-pagination{padding-left:calc(var(--stzh-form-input-small-height) + var(--stzh-space-medium))}.stzh-pagination--size-small.sc-stzh-pagination .stzh-pagination__input.sc-stzh-pagination{--input-width:var(--stzh-form-input-small-height)}`;
-
-const StzhPagination = /*@__PURE__*/ proxyCustomElement(class StzhPagination extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.stzhChange = createEvent(this, "stzhChange");
-        /** Total pages available. */
-        this.total = 1;
-        /** Name of the hidden date picker input. */
-        this.name = "";
-        /** Current page. */
-        this.value = 1;
-        /** Label for dropdown */
-        this.label = "";
-        /** Whether label is hidden. */
-        this.labelHidden = false;
-        /** Whether the element is readonly or not */
-        this.readonly = false;
-        /** Whether the element is disabled or not */
-        this.disabled = false;
-        /** Whether the current page is mutable via input */
-        this.allowManualInput = true;
-        /** Invalid status */
-        this.invalid = false;
-        /** Required status */
-        this.required = false;
-        /** Size variant */
-        this.size = "default";
-        /** Id of the element which describes the input */
-        this.a11yDescribedby = "";
-        this.gotoPage = (newPage) => {
-            const previous = this.value;
-            if (newPage >= 1 && newPage <= this.total) {
-                this.value = newPage;
-            }
-            else if (newPage > this.total) {
-                this.value = this.total;
-            }
-            else {
-                this.value = 1;
-            }
-            if (previous !== this.value) {
-                this.stzhChange.emit({
-                    component: "stzh-pagination",
-                    page: Number(this.value),
-                });
-            }
-        };
-        this.onRootFocus = () => {
-            if (this.input) {
-                this.input.focus();
-            }
-        };
-        this.onInputChange = (event) => {
-            const newPage = Number(event.detail.value) || 1;
-            this.gotoPage(newPage);
-        };
-    }
-    /** Set current page to previous */
-    async prev() {
-        this.gotoPage(this.value - 1);
-    }
-    /** Set current page to next */
-    async next() {
-        this.gotoPage(this.value + 1);
-    }
-    async componentWillLoad() {
-        if (!this.localization) {
-            this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "pagination");
-        }
-    }
-    render() {
-        var _a;
-        const classes = {
-            "stzh-pagination": true,
-            [`stzh-pagination--size-${this.size}`]: !!this.size,
-        };
-        return (h(Host, { key: '35cd9bdd51c751fecf43393cb8f52751c7b5e80a', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'aa3c3bf2eb1c2120c4441f00fbc2d71a8800f80c', class: classes }, this.allowManualInput ? (h(Fragment, null, h("stzh-input", { class: "stzh-pagination__input", type: "number", min: 1, max: this.total, label: this.label || this.localization.label, labelHidden: true, ref: el => (this.input = el), onStzhChange: this.onInputChange, value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) || "", required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, a11yDescribedby: this.a11yDescribedby, name: this.name, size: this.size, invalid: this.invalid, hideOptional: true, noAutocomplete: true }), h("div", { class: "stzh-pagination__total" }, this.localization.totalLabel.replace(/\{total\}/gi, this.total.toString())))) : (h("div", { class: "stzh-pagination__total" }, this.value, " ", this.localization.totalLabel.replace(/\{total\}/gi, this.total.toString()))), h("stzh-buttongroup", { key: '3fd6f95703c9c8b53a586a56a395db5b8737c04e' }, h("stzh-button", { key: '0778cbf90876d018aa56efc77a144cca90e3d6f7', variant: "tertiary", icon: "angle-left", "icon-only": true, size: this.size, a11yDisabled: this.value <= 1, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label || this.localization.label}, ${this.localization.prevLabel}, ${this.localization.selectedPageLabel} ${this.value}`, disabled: this.disabled, onClick: () => this.prev() }), h("stzh-button", { key: 'bc397fee13ab8bc70ebd53721f9168203646e3c3', variant: "tertiary", icon: "angle-right", "icon-only": true, size: this.size, a11yDisabled: this.value >= this.total, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label || this.localization.label}, ${this.localization.nextLabel}, ${this.localization.selectedPageLabel} ${this.value}`, disabled: this.disabled, onClick: () => this.next() })))));
-    }
-    get element() { return this; }
-    static get style() { return stzhPaginationCss(); }
-}, [258, "stzh-pagination", {
-        "total": [2],
-        "name": [513],
-        "value": [1026],
-        "label": [1],
-        "labelHidden": [4, "label-hidden"],
-        "readonly": [516],
-        "disabled": [516],
-        "allowManualInput": [516, "allow-manual-input"],
-        "description": [1],
-        "descriptionLong": [1, "description-long"],
-        "error": [1],
-        "invalid": [516],
-        "required": [516],
-        "size": [513],
-        "a11yDescribedby": [1, "a11y-describedby"],
-        "localization": [16],
-        "prev": [64],
-        "next": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["stzh-pagination", "stzh-badge", "stzh-button", "stzh-buttongroup", "stzh-icon", "stzh-input", "stzh-popover", "stzh-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "stzh-pagination":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), StzhPagination);
-            }
-            break;
-        case "stzh-badge":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "stzh-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-        case "stzh-buttongroup":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "stzh-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "stzh-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "stzh-popover":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "stzh-text":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { StzhPagination as S, defineCustomElement as d };
-//# sourceMappingURL=p-bZ2GVa1M.js.map
-
-//# sourceMappingURL=p-bZ2GVa1M.js.map

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

@@ -1 +0,0 @@
-{"file":"p-bZ2GVa1M.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-pagination/stzh-pagination.scss?tag=stzh-pagination&encapsulation=scoped","src/components/stzh-pagination/stzh-pagination.tsx"],"sourcesContent":[":host {\n  --justify-content: inherit;\n  --padding-left: calc(#{$formInputHeight} + #{space(\"medium\")});\n}\n\n.stzh-pagination {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: space(\"medium\");\n  padding-left: var(--padding-left);\n  justify-content: var(--justify-content);\n\n  &__input {\n    --text-align: center;\n    --input-width: #{$formInputHeight};\n    --padding-top: 0px;\n    --padding-bottom: 0px;\n    --padding-left: 0px;\n    --padding-right: 0px;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  &__total {\n    @include fontSize(\"nano\");\n    color: $colorGrey70;\n  }\n\n  &--size-small {\n    padding-left: calc(#{$formInputHeightSmall} + #{space(\"medium\")});\n  }\n\n  &--size-small &__input {\n    --input-width: #{$formInputHeightSmall};\n  }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Method, Prop } from \"@stencil/core\";\n\nimport { StzhInputChangeEvent, StzhPaginationChangeEvent } from \"../../index\";\n\nimport { StzhPaginationLocalizedText } from \"./stzh-pagination.localization\";\n\n/**\n */\n@Component({\n  tag: \"stzh-pagination\",\n  styleUrl: \"stzh-pagination.scss\",\n  scoped: true,\n})\nexport class StzhPagination {\n  /** Total pages available. */\n  @Prop() total: number = 1;\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Current page. */\n  @Prop({ mutable: true }) value: number = 1;\n\n  /** Label for dropdown */\n  @Prop() label: string = \"\";\n\n  /** Whether label is hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the current page is mutable via input */\n  @Prop({ reflect: true }) allowManualInput: boolean = true;\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Id of the element which describes the input */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /**  Translation strings. */\n  @Prop() localization: StzhPaginationLocalizedText;\n\n  /** Pagination change event */\n  @Event() stzhChange: EventEmitter<StzhPaginationChangeEvent>;\n\n  @Element() element: HTMLStzhPaginationElement;\n\n  /** Set current page to previous */\n  @Method()\n  async prev() {\n    this.gotoPage(this.value - 1);\n  }\n\n  /** Set current page to next */\n  @Method()\n  async next() {\n    this.gotoPage(this.value + 1);\n  }\n\n  private input: HTMLStzhInputElement;\n\n  private gotoPage = (newPage: number) => {\n    const previous = this.value;\n\n    if (newPage >= 1 && newPage <= this.total) {\n      this.value = newPage;\n    } else if (newPage > this.total) {\n      this.value = this.total;\n    } else {\n      this.value = 1;\n    }\n\n    if (previous !== this.value) {\n      this.stzhChange.emit({\n        component: \"stzh-pagination\",\n        page: Number(this.value),\n      });\n    }\n  };\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  private onInputChange = (event: CustomEvent<StzhInputChangeEvent>) => {\n    const newPage = Number(event.detail.value) || 1;\n    this.gotoPage(newPage);\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pagination\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-pagination\": true,\n      [`stzh-pagination--size-${this.size}`]: !!this.size,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.allowManualInput ? (\n            <Fragment>\n              <stzh-input\n                class=\"stzh-pagination__input\"\n                type=\"number\"\n                min={1}\n                max={this.total}\n                label={this.label || this.localization.label}\n                labelHidden={true}\n                ref={el => (this.input = el as HTMLStzhInputElement)}\n                onStzhChange={this.onInputChange}\n                value={this.value?.toString() || \"\"}\n                required={this.required}\n                disabled={this.disabled}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                error={this.error}\n                a11yDescribedby={this.a11yDescribedby}\n                name={this.name}\n                size={this.size}\n                invalid={this.invalid}\n                hideOptional={true}\n                noAutocomplete={true}\n              ></stzh-input>\n              <div class=\"stzh-pagination__total\">\n                {this.localization.totalLabel.replace(/\\{total\\}/gi, this.total.toString())}\n              </div>\n            </Fragment>\n          ) : (\n            <div class=\"stzh-pagination__total\">\n              {this.value} {this.localization.totalLabel.replace(/\\{total\\}/gi, this.total.toString())}\n            </div>\n          )}\n          <stzh-buttongroup>\n            <stzh-button\n              variant=\"tertiary\"\n              icon=\"angle-left\"\n              icon-only\n              size={this.size}\n              a11yDisabled={this.value <= 1}\n              a11yDescribedby={this.a11yDescribedby}\n              a11yLabel={`${this.label || this.localization.label}, ${this.localization.prevLabel}, ${\n                this.localization.selectedPageLabel\n              } ${this.value}`}\n              disabled={this.disabled}\n              onClick={() => this.prev()}\n            ></stzh-button>\n            <stzh-button\n              variant=\"tertiary\"\n              icon=\"angle-right\"\n              icon-only\n              size={this.size}\n              a11yDisabled={this.value >= this.total}\n              a11yDescribedby={this.a11yDescribedby}\n              a11yLabel={`${this.label || this.localization.label}, ${this.localization.nextLabel}, ${\n                this.localization.selectedPageLabel\n              } ${this.value}`}\n              disabled={this.disabled}\n              onClick={() => this.next()}\n            ></stzh-button>\n          </stzh-buttongroup>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-iO0Ga3pa.js

@@ -1,76 +0,0 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-DAS4ghWk.js';
-import { s as setPropsIfNull } from './p-CN5apKPb.js';
-
-const stzhActionsCss = () => `: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 ::slotted([slot=primary]),:host ::slotted([slot=secondary]),:host ::slotted([slot=tertiary]){flex-grow:1;margin:calc(var(--stzh-space-medium) / 2)}@media screen and (min-width: 600px){:host[space-between=true] ::slotted([slot=tertiary]){flex-grow:inherit}}.stzh-actions__actions{display:flex;flex-direction:column-reverse;margin:calc(var(--stzh-space-medium) / -2)}@media screen and (min-width: 600px){.stzh-actions__actions{flex-direction:row}}.stzh-actions__primary-actions,.stzh-actions__secondary-actions,.stzh-actions__tertiary-actions{display:flex}.stzh-actions__wrapper{display:contents}@media screen and (max-width: 599px){.stzh-actions--process .stzh-actions__wrapper{display:flex;flex-wrap:wrap}}.stzh-actions--process .stzh-actions__actions{justify-content:flex-end}@media screen and (max-width: 599px){.stzh-actions--process .stzh-actions__primary-actions,.stzh-actions--process .stzh-actions__secondary-actions{flex-grow:1}}@media screen and (min-width: 600px){.stzh-actions--process .stzh-actions__tertiary-actions{margin-right:auto}}.stzh-actions--search .stzh-actions__actions{justify-content:flex-end}.stzh-actions{}.stzh-actions--space-between .stzh-actions__actions{justify-content:space-between}@media screen and (min-width: 600px){.stzh-actions--space-between .stzh-actions__actions{flex-direction:column}}@media screen and (min-width: 900px){.stzh-actions--space-between .stzh-actions__actions{flex-direction:row}}@media screen and (min-width: 600px){.stzh-actions--space-between .stzh-actions__wrapper{display:flex;justify-content:flex-end}}`;
-
-const StzhActions = /*@__PURE__*/ proxyCustomElement(class StzhActions extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /** Variant determining what position the action buttons are */
-        this.variant = "form";
-        /** Whether to split tertiary and primary/secondary from each other (left and right). */
-        this.spaceBetween = false;
-        this.init = () => {
-            const secondaryButtons = this.element.querySelectorAll('stzh-button[slot="secondary"], [slot="secondary"] stzh-button');
-            const tertiaryButtons = this.element.querySelectorAll('stzh-button[slot="tertiary"], [slot="tertiary"] stzh-button');
-            secondaryButtons.forEach(button => {
-                setPropsIfNull(button, {
-                    variant: "secondary",
-                });
-            });
-            tertiaryButtons.forEach(button => {
-                setPropsIfNull(button, {
-                    variant: "tertiary",
-                });
-            });
-        };
-    }
-    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-actions": true,
-            "stzh-actions--space-between": this.spaceBetween,
-            [`stzh-actions--${this.variant}`]: !!this.variant,
-        };
-        return (h(Host, { key: '5e7745ad1b0c6a18881a8bd51611d2867507638a', "space-between": this.spaceBetween }, h("div", { key: '87f822b8a1d039513e5c73457fb893118bd3f0f5', class: classes }, h("div", { key: '3d62c876bcaf40178d5b3a383951d0aca987b18f', class: "stzh-actions__actions", role: "group" }, h("div", { key: 'aa6d90aa2f1bbf05c7551d6cc6a0dc2ca8228a75', class: "stzh-actions__tertiary-actions" }, h("slot", { key: '0128b307178d4256271c8d2920ac1937888c33dc', name: "tertiary" })), h("div", { key: 'f87d1e7e3a5a5b9438bf9aa5c4e6fd69a5199664', class: "stzh-actions__wrapper" }, h("div", { key: '00fd5aec290bdb8526a666aa0bec9563937a8c8f', class: "stzh-actions__secondary-actions" }, h("slot", { key: '8e5d4ea825b0aab0b5f6032e51f26382fd224173', name: "secondary" })), h("div", { key: '00a59f08ba15dc28f9488e5ecbd5c9428d9c0cec', class: "stzh-actions__primary-actions" }, h("slot", { key: 'e7bee299264a7b3019f10073e7d07bb693befa16', name: "primary" })))))));
-    }
-    get element() { return this; }
-    static get style() { return stzhActionsCss(); }
-}, [257, "stzh-actions", {
-        "variant": [513],
-        "spaceBetween": [516, "space-between"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["stzh-actions"];
-    components.forEach(tagName => { switch (tagName) {
-        case "stzh-actions":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), StzhActions);
-            }
-            break;
-    } });
-}
-
-export { StzhActions as S, defineCustomElement as d };
-//# sourceMappingURL=p-iO0Ga3pa.js.map
-
-//# sourceMappingURL=p-iO0Ga3pa.js.map

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

@@ -1 +0,0 @@
-{"file":"p-iO0Ga3pa.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-actions/stzh-actions.scss?tag=stzh-actions&encapsulation=shadow","src/components/stzh-actions/stzh-actions.tsx"],"sourcesContent":[":host {\n  ::slotted([slot=\"primary\"]),\n  ::slotted([slot=\"secondary\"]),\n  ::slotted([slot=\"tertiary\"]) {\n    flex-grow: 1;\n    margin: calc(#{space(\"medium\")} / 2);\n  }\n\n  &[space-between=\"true\"] ::slotted([slot=\"tertiary\"]) {\n    @include mq($from: small) {\n      flex-grow: inherit;\n    }\n  }\n}\n\n.stzh-actions {\n  &__actions {\n    display: flex;\n    flex-direction: column-reverse;\n    margin: calc(#{space(\"medium\")} / -2);\n\n    @include mq($from: small) {\n      flex-direction: row;\n    }\n  }\n\n  &__primary-actions,\n  &__secondary-actions,\n  &__tertiary-actions {\n    display: flex;\n  }\n\n  &__wrapper {\n    display: contents;\n  }\n\n  // &--dialog &__actions {\n  //   justify-content: flex-end;\n  // }\n\n  &--process &__wrapper {\n    @include mq($to: small) {\n      display: flex;\n      flex-wrap: wrap;\n    }\n  }\n\n  &--process &__actions {\n    justify-content: flex-end;\n  }\n\n  &--process &__primary-actions,\n  &--process &__secondary-actions {\n    @include mq($to: small) {\n      flex-grow: 1;\n    }\n  }\n\n  &--process &__tertiary-actions {\n    @include mq($from: small) {\n      margin-right: auto;\n    }\n  }\n\n  &--search &__actions {\n    justify-content: flex-end;\n  }\n\n  /* space between */\n  &--space-between &__actions {\n    justify-content: space-between;\n\n    @include mq($from: small) {\n      flex-direction: column;\n    }\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &--space-between &__wrapper {\n    @include mq($from: small) {\n      display: flex;\n      justify-content: flex-end;\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot primary - Slot for primary button\n * @slot secondary - Slot for secondary button\n * @slot tertiary - Slot for tertiary button\n */\n@Component({\n  tag: \"stzh-actions\",\n  styleUrl: \"stzh-actions.scss\",\n  shadow: true,\n})\nexport class StzhActions {\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"form\" | \"dialog\" | \"process\" | \"search\" = \"form\";\n\n  /** Whether to split tertiary and primary/secondary from each other (left and right). */\n  @Prop({ reflect: true }) spaceBetween: boolean = false;\n\n  @Element() element: HTMLStzhActionsElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const secondaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"secondary\"], [slot=\"secondary\"] stzh-button',\n    );\n\n    const tertiaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"tertiary\"], [slot=\"tertiary\"] stzh-button',\n    );\n\n    secondaryButtons.forEach(button => {\n      setPropsIfNull(button, {\n        variant: \"secondary\",\n      } as HTMLStzhButtonElement);\n    });\n\n    tertiaryButtons.forEach(button => {\n      setPropsIfNull(button, {\n        variant: \"tertiary\",\n      } as HTMLStzhButtonElement);\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-actions\": true,\n      \"stzh-actions--space-between\": this.spaceBetween,\n      [`stzh-actions--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host space-between={this.spaceBetween}>\n        <div class={classes}>\n          <div class=\"stzh-actions__actions\" role=\"group\">\n            <div class=\"stzh-actions__tertiary-actions\">\n              <slot name=\"tertiary\"></slot>\n            </div>\n            <div class=\"stzh-actions__wrapper\">\n              <div class=\"stzh-actions__secondary-actions\">\n                <slot name=\"secondary\"></slot>\n              </div>\n              <div class=\"stzh-actions__primary-actions\">\n                <slot name=\"primary\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-tNg83_1b.js

@@ -1,205 +0,0 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-DAS4ghWk.js';
-import { d as defineCustomElement$4 } from './p-Cz-ha88J.js';
-import { d as defineCustomElement$3 } from './p-CgEDyVYF.js';
-import { d as defineCustomElement$2 } from './p-BU4OH8Cm.js';
-import { d as defineCustomElement$1 } from './p-CVGsVbS2.js';
-
-const stzhChipCss = () => `.sc-stzh-chip-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-chip-h,[stzh-hidden].sc-stzh-chip-h{display:none}.sc-stzh-chip-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chip-h *.sc-stzh-chip,.sc-stzh-chip-h *.sc-stzh-chip::before,.sc-stzh-chip-h *.sc-stzh-chip::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-chip-h .has-focus.sc-stzh-chip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-chip-h .stzh-fylingfocus-focused.sc-stzh-chip{outline-style:none !important}.sc-stzh-chip-h .stzh-fylingfocus-focused.sc-stzh-chip::-moz-focus-inner{border:0 !important}.sc-stzh-chip-h{--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--height:2rem;--outer-height:2.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--border-radius:1rem}@media screen and (min-width: 900px){.sc-stzh-chip-h{--outer-height:auto}}.sc-stzh-chip-h{--color:var(--stzh-chip-color, var(--stzh-color-primary70));--remove-color:var(--color);--remove-border-radius:1.5rem;--background-color:var(--stzh-chip-background-color, var(--stzh-color-secondary30));--icon-size:var(--stzh-icon-size-xsmall);--icon-color:var(--color);--icon-gap:var(--stzh-space-xsmall);--counter-color:var(--color);--counter-gap:var(--stzh-space-xsmall);--hover-color:var(--stzh-chip-hover-color, var(--stzh-color-primary70));--hover-background-color:var(
-    --stzh-chip-hover-background-color,
-    var(--stzh-color-secondary40)
-  );--hover-remove-color:var(--hover-color);--hover-remove-background-color:var(--stzh-color-primary30);--hover-icon-color:var(--hover-color);--hover-counter-color:var(--hover-color);display:inline-flex}@media (forced-colors: active), (-ms-high-contrast: active){.sc-stzh-chip-h{--hover-color:Highlight;--hover-background-color:Canvas;--hover-remove-background-color:Canvas}}[variant=input].sc-stzh-chip-h{--background-color:var(--stzh-color-primary10);--hover-color:var(--stzh-color-primary90);--hover-background-color:var(--stzh-color-primary20)}[variant=tag].sc-stzh-chip-h{--color:var(--stzh-color-grey90);--background-color:var(--stzh-color-grey20);--hover-color:var(--stzh-color-grey90);--hover-background-color:var(--stzh-color-grey20)}[variant=input].sc-stzh-chip-h:where([size=small]){--icon-gap:var(--stzh-space-xxsmall)}[variant=tag].sc-stzh-chip-h:where([size=small]){--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall);--icon-gap:var(--stzh-space-xxsmall)}[variant=tag].sc-stzh-chip-h:where([type=warning]){--color:var(--stzh-color-warning90);--hover-color:var(--stzh-color-warning90)}[variant=tag].sc-stzh-chip-h:where([type=error]){--color:var(--stzh-color-error70);--hover-color:var(--stzh-color-error70)}[variant=tag].sc-stzh-chip-h:where([type=success]){--color:var(--stzh-color-success70);--hover-color:var(--stzh-color-success70)}[variant=tag].sc-stzh-chip-h:where([inverted]:not([inverted=false])){--color:var(--stzh-color-white);--background-color:var(--stzh-color-grey90);--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-grey90)}[variant=tag].sc-stzh-chip-h:where([type=warning][inverted]:not([inverted=false])){--color:var(--stzh-color-black);--background-color:var(--stzh-color-warning60);--hover-color:var(--stzh-color-black);--hover-background-color:var(--stzh-color-warning60)}[variant=tag].sc-stzh-chip-h:where([type=error][inverted]:not([inverted=false])){--background-color:var(--stzh-color-error70);--hover-background-color:var(--stzh-color-error70)}[variant=tag].sc-stzh-chip-h:where([type=success][inverted]:not([inverted=false])){--background-color:var(--stzh-color-success70);--hover-background-color:var(--stzh-color-success70)}[active].sc-stzh-chip-h:not([active=false]){--color:var(--stzh-chip-active-color, var(--stzh-color-white));--background-color:var(
-    --stzh-chip-active-background-color,
-    var(--stzh-color-primary70)
-  );--hover-color:var(--stzh-chip-active-hover-color, var(--stzh-color-white));--hover-background-color:var(
-    --stzh-chip-active-hover-background-color,
-    var(--stzh-color-primary90)
-  );--hover-remove-background-color:var(--stzh-color-primary90)}@media (forced-colors: active), (-ms-high-contrast: active){[active].sc-stzh-chip-h:not([active=false]){--color:Highlight;--background-color:Canvas;--hover-color:Highlight;--hover-background-color:Canvas;--hover-remove-background-color:Canvas}}[non-interactive].sc-stzh-chip-h:not([non-interactive=false]){--hover-color:var(--color);--hover-background-color:var(--background-color);--hover-remove-color:var(--remove-color);--hover-remove-background-color:transparent;--hover-icon-color:var(--icon-color);--hover-counter-color:var(--counter-color)}[disabled].sc-stzh-chip-h:not([disabled=false]){--color:var(--stzh-chip-disabled-color, var(--stzh-color-grey80));--background-color:var(
-    --stzh-chip-disabled-background-color,
-    var(--stzh-color-grey20)
-  );--remove-color:var(--color);--icon-color:var(--color);--counter-color:var(--color);--hover-color:var(--color);--hover-background-color:var(--background-color);--hover-remove-color:var(--remove-color);--hover-remove-background-color:transparent;--hover-icon-color:var(--icon-color);--hover-counter-color:var(--counter-color)}[variant=input][disabled].sc-stzh-chip-h:not([disabled=false]){--background-color:var(--stzh-color-grey10)}.sc-stzh-chip-h:where([size=small]){--font-size:var(--stzh-font-nano-font-size);--line-height:var(--stzh-font-nano-text-line-height);--letter-spacing:normal;--height:1.5rem;--border-radius:0.75rem;--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall)}.sc-stzh-chip-h:where([size=large]){--height:2.5rem;--border-radius:1.25rem;--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.sc-stzh-chip-h:where([size-small=default]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--height:2rem;--outer-height:2.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--border-radius:1rem}}@media screen and (min-width: 600px) and (min-width: 900px){.sc-stzh-chip-h:where([size-small=default]){--outer-height:auto}}@media screen and (min-width: 600px){.sc-stzh-chip-h:where([size-small=small]){--font-size:var(--stzh-font-nano-font-size);--line-height:var(--stzh-font-nano-text-line-height);--letter-spacing:normal;--height:1.5rem;--border-radius:0.75rem;--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall)}.sc-stzh-chip-h:where([size-small=large]){--height:2.5rem;--border-radius:1.25rem;--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 900px){.sc-stzh-chip-h:where([size-medium=default]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--height:2rem;--outer-height:2.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--border-radius:1rem}}@media screen and (min-width: 900px) and (min-width: 900px){.sc-stzh-chip-h:where([size-medium=default]){--outer-height:auto}}@media screen and (min-width: 900px){.sc-stzh-chip-h:where([size-medium=small]){--font-size:var(--stzh-font-nano-font-size);--line-height:var(--stzh-font-nano-text-line-height);--letter-spacing:normal;--height:1.5rem;--border-radius:0.75rem;--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall)}.sc-stzh-chip-h:where([size-medium=large]){--height:2.5rem;--border-radius:1.25rem;--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-chip-h:where([size-large=default]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--height:2rem;--outer-height:2.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--border-radius:1rem}}@media screen and (min-width: 1260px) and (min-width: 900px){.sc-stzh-chip-h:where([size-large=default]){--outer-height:auto}}@media screen and (min-width: 1260px){.sc-stzh-chip-h:where([size-large=small]){--font-size:var(--stzh-font-nano-font-size);--line-height:var(--stzh-font-nano-text-line-height);--letter-spacing:normal;--height:1.5rem;--border-radius:0.75rem;--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall)}.sc-stzh-chip-h:where([size-large=large]){--height:2.5rem;--border-radius:1.25rem;--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 1600px){.sc-stzh-chip-h:where([size-ultra=default]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--height:2rem;--outer-height:2.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--border-radius:1rem}}@media screen and (min-width: 1600px) and (min-width: 900px){.sc-stzh-chip-h:where([size-ultra=default]){--outer-height:auto}}@media screen and (min-width: 1600px){.sc-stzh-chip-h:where([size-ultra=small]){--font-size:var(--stzh-font-nano-font-size);--line-height:var(--stzh-font-nano-text-line-height);--letter-spacing:normal;--height:1.5rem;--border-radius:0.75rem;--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall)}.sc-stzh-chip-h:where([size-ultra=large]){--height:2.5rem;--border-radius:1.25rem;--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium)}}.stzh-chip.sc-stzh-chip{position:relative}.stzh-chip__vhidden.sc-stzh-chip{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-chip__button.sc-stzh-chip{font-size:var(--font-size);line-height:var(--line-height);letter-spacing:var(--letter-spacing);min-height:var(--outer-height);font-family:inherit;appearance:none;padding:0px;border:none;background-color:transparent}.stzh-chip__button.is-button.sc-stzh-chip,.stzh-chip__button.is-link.sc-stzh-chip{cursor:pointer}.stzh-chip__button-inner.sc-stzh-chip{height:var(--height);display:flex;flex-direction:row;align-items:center;border-radius:var(--border-radius);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);color:var(--color);background-color:var(--background-color);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-chip__label.sc-stzh-chip{text-align:left}.stzh-chip__icon-wrapper.sc-stzh-chip{--stzh-icon-size:var(--icon-size);display:flex;color:var(--icon-color);transition:color var(--stzh-base-transition-animation-speed);flex-shrink:0}.stzh-chip__icon-wrapper.sc-stzh-chip:not(:empty){margin-right:var(--icon-gap)}.stzh-chip__counter.sc-stzh-chip{display:flex;font-variant-numeric:tabular-nums;margin-left:var(--counter-gap);color:var(--counter-color);transition:color var(--stzh-base-transition-animation-speed)}.stzh-chip__remove.sc-stzh-chip{position:absolute;top:50%;transform:translateY(-50%);right:0;appearance:none;font-family:inherit;border:none;background:none;padding:0;width:var(--height);height:var(--height);border-radius:var(--remove-border-radius);display:flex;justify-content:center;align-items:center;margin-left:var(--stzh-space-xxsmall);color:var(--remove-color);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color, border-color;cursor:pointer}.stzh-chip__remove.sc-stzh-chip:hover{color:var(--hover-remove-color);background-color:var(--hover-remove-background-color)}.stzh-chip__remove-icon.sc-stzh-chip{--size:var(--stzh-icon-size-xxsmall)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__button-inner.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__button-inner.sc-stzh-chip{color:var(--hover-color);background-color:var(--hover-background-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__counter.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__counter.sc-stzh-chip{color:var(--hover-counter-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__icon-wrapper.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__icon-wrapper.sc-stzh-chip{color:var(--hover-icon-color)}.stzh-chip--is-removable.sc-stzh-chip .stzh-chip__button-inner.sc-stzh-chip{padding-right:calc(var(--height) + var(--stzh-space-xxsmall))}.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__button.sc-stzh-chip,.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__remove.sc-stzh-chip{cursor:not-allowed}`;
-
-const StzhChip = /*@__PURE__*/ proxyCustomElement(class StzhChip extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.stzhClick = createEvent(this, "stzhClick");
-        this.stzhRemove = createEvent(this, "stzhRemove");
-        this.stzhFocus = createEvent(this, "stzhFocus");
-        this.stzhBlur = createEvent(this, "stzhBlur");
-        /** Label */
-        this.label = "";
-        /** `href` if the chip should be used as link  */
-        this.href = "";
-        /** Target if the button is used as link (if `href` used)  */
-        this.target = "";
-        /** Whether chip is not interactive */
-        this.nonInteractive = false;
-        /** Whether remove button should be shown */
-        this.removable = false;
-        /** Whether inverted style is shown (only available for `tag` variant) */
-        this.inverted = false;
-        /** Variant */
-        this.variant = "tag";
-        /** Size */
-        this.size = "default";
-        /** Type */
-        this.type = "default";
-        /** Counter */
-        this.counter = "";
-        /** Label of remove button for screenreaders */
-        this.removeLabel = "";
-        /** Active */
-        this.active = false;
-        /** Disabled */
-        this.disabled = false;
-        /** Id for element which describes the link/button */
-        this.a11yDescribedby = "";
-        this.focusedByInput = false;
-        this.onRootFocus = () => {
-            if (!this.focusedByInput) {
-                this.chip.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-chip",
-                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-chip",
-                originalEvent: event,
-            });
-        };
-        this.onClick = (event) => {
-            this.stzhClick.emit({
-                component: "stzh-chip",
-                originalEvent: event,
-                href: this.href,
-            });
-        };
-        this.onRemoveClick = (event) => {
-            this.stzhRemove.emit({
-                component: "stzh-chip",
-                originalEvent: event,
-            });
-        };
-    }
-    componentDidRender() {
-        requestAnimationFrame(() => {
-            var _a;
-            (_a = this.chip) === null || _a === void 0 ? void 0 : _a.setAttribute("s-object-id", this.analyticsId || this.text.innerText);
-        });
-    }
-    renderInner() {
-        return (h("div", { class: "stzh-chip__button-inner" }, h("div", { class: "stzh-chip__icon-wrapper" }, this.icon || (typeof this.icon === "undefined" && this.variant === "tag" && this.type !== "default") ? (h("stzh-icon", { class: "stzh-chip__icon", name: this.icon ||
-                (this.type === "info" && "info-help") ||
-                (this.type === "warning" && "important-warning") ||
-                (this.type === "error" && "warning") ||
-                (this.type === "success" && "checkmark-circle") })) : (h("slot", { name: "icon" }))), h("stzh-clamp", { lines: 1, class: "stzh-chip__label", ref: el => (this.text = el) }, this.label ? this.label : h("slot", null), this.counter && this.counter !== "undefined" && this.counter !== undefined && (h("span", { class: "stzh-chip__vhidden" }, "\u00A0(", this.counter, ")"))), this.counter && this.counter !== "undefined" && this.counter !== undefined && (h("div", { class: "stzh-chip__counter", "aria-hidden": "true" }, this.counter))));
-    }
-    render() {
-        const classes = {
-            "stzh-chip": true,
-            "stzh-chip--is-active": this.active,
-            "stzh-chip--is-disabled": this.disabled,
-            "stzh-chip--is-removable": this.removable,
-            "stzh-chip--is-inverted": this.inverted,
-            "stzh-chip--has-counter": !!this.counter,
-            [`stzh-chip--type-${this.type}`]: !!this.type,
-            [`stzh-chip--size-${this.size}`]: !!this.size,
-            [`stzh-chip--${this.variant}`]: !!this.variant,
-        };
-        const Chip = this.nonInteractive ? "div" : this.href ? "a" : "button";
-        return (h(Host, { key: '96e00d4e289a9b21349c73fb6f472d03c7e6734c', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '8cafb467437c04848ab4cc4a6099ecef3e76220f', class: classes }, this.removable && (h("button", { key: '69981c4f5be28abe8a40971f666174dd5403921f', class: "stzh-chip__remove", onClick: this.onRemoveClick, disabled: this.disabled, "aria-label": this.removeLabel, type: "button", "s-object-id": this.removeAnalyticsId || this.removeLabel }, h("stzh-icon", { key: '811def417077a97b4ea532fbe8e618bdbb4a8782', class: "stzh-chip__remove-icon", name: "close-big" }))), this.href ? (h(Chip, { ref: el => (this.chip = el), class: {
-                "stzh-chip__button": true,
-                "is-button": !this.nonInteractive && !this.href,
-                "is-link": !this.nonInteractive && !!this.href,
-            }, href: this.disabled ? null : this.href, target: this.target, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner())) : (h(Chip, { ref: el => (this.chip = el), class: {
-                "stzh-chip__button": true,
-                "is-button": !this.nonInteractive && !this.href,
-                "is-link": !this.nonInteractive && !!this.href,
-            }, disabled: this.disabled, type: "button", tabindex: this.a11yTabindex, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner())))));
-    }
-    get element() { return this; }
-    static get style() { return stzhChipCss(); }
-}, [262, "stzh-chip", {
-        "label": [1],
-        "icon": [1],
-        "href": [1],
-        "target": [1],
-        "nonInteractive": [516, "non-interactive"],
-        "removable": [516],
-        "inverted": [516],
-        "variant": [513],
-        "size": [513],
-        "sizeSmall": [513, "size-small"],
-        "sizeMedium": [513, "size-medium"],
-        "sizeLarge": [513, "size-large"],
-        "sizeUltra": [513, "size-ultra"],
-        "type": [513],
-        "counter": [1],
-        "removeLabel": [1, "remove-label"],
-        "active": [516],
-        "disabled": [516],
-        "a11yTabindex": [1, "a11y-tabindex"],
-        "a11yLabel": [1, "a11y-label"],
-        "a11yDescribedby": [1, "a11y-describedby"],
-        "analyticsId": [1, "analytics-id"],
-        "removeAnalyticsId": [1, "remove-analytics-id"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["stzh-chip", "stzh-badge", "stzh-clamp", "stzh-icon", "stzh-link"];
-    components.forEach(tagName => { switch (tagName) {
-        case "stzh-chip":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), StzhChip);
-            }
-            break;
-        case "stzh-badge":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "stzh-clamp":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "stzh-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "stzh-link":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { StzhChip as S, defineCustomElement as d };
-//# sourceMappingURL=p-tNg83_1b.js.map
-
-//# sourceMappingURL=p-tNg83_1b.js.map

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

@@ -1 +0,0 @@
-{"file":"p-tNg83_1b.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-chip/stzh-chip.scss?tag=stzh-chip&encapsulation=scoped","src/components/stzh-chip/stzh-chip.tsx"],"sourcesContent":["@mixin chip--size-default() {\n  --font-size: var(--stzh-font-micro-font-size);\n  --line-height: var(--stzh-font-micro-text-line-height);\n  --letter-spacing: normal;\n\n  --height: 32px;\n  --outer-height: 40px;\n  --padding-top: 0;\n  --padding-bottom: 0;\n  --padding-left: #{space(\"small\")};\n  --padding-right: #{space(\"small\")};\n  --border-radius: 16px;\n\n  @include mq($from: medium) {\n    --outer-height: auto;\n  }\n}\n\n@mixin chip--size-large() {\n  --height: 40px;\n  --border-radius: 20px;\n  --padding-left: #{space(\"medium\")};\n  --padding-right: #{space(\"medium\")};\n}\n\n@mixin chip--size-small() {\n  --font-size: var(--stzh-font-nano-font-size);\n  --line-height: var(--stzh-font-nano-text-line-height);\n  --letter-spacing: normal;\n\n  --height: 24px;\n  --border-radius: 12px;\n  --padding-left: #{space(\"xsmall\")};\n  --padding-right: #{space(\"xsmall\")};\n}\n\n:host {\n  @include chip--size-default;\n  --color: var(--stzh-chip-color, #{$colorPrimary70});\n  --remove-color: var(--color);\n  --remove-border-radius: 24px;\n  --background-color: var(--stzh-chip-background-color, #{$colorSecondary30});\n  --icon-size: #{iconSize(\"xsmall\")};\n  --icon-color: var(--color);\n  --icon-gap: #{space(\"xsmall\")};\n  --counter-color: var(--color);\n  --counter-gap: #{space(\"xsmall\")};\n\n  --hover-color: var(--stzh-chip-hover-color, #{$colorPrimary70});\n  --hover-background-color: var(\n    --stzh-chip-hover-background-color,\n    #{$colorSecondary40}\n  );\n  --hover-remove-color: var(--hover-color);\n  --hover-remove-background-color: #{$colorPrimary30};\n  --hover-icon-color: var(--hover-color);\n  --hover-counter-color: var(--hover-color);\n\n  display: inline-flex;\n\n  @include highContrast() {\n    --hover-color: Highlight;\n    --hover-background-color: Canvas;\n    --hover-remove-background-color: Canvas;\n  }\n\n  &[variant=\"input\"] {\n    --background-color: #{$colorPrimary10};\n\n    --hover-color: #{$colorPrimary90};\n    --hover-background-color: #{$colorPrimary20};\n  }\n\n  &[variant=\"tag\"] {\n    --color: #{$colorGrey90};\n    --background-color: #{$colorGrey20};\n\n    --hover-color: #{$colorGrey90};\n    --hover-background-color: #{$colorGrey20};\n  }\n\n  &[variant=\"input\"]:where([size=\"small\"]) {\n    --icon-gap: #{space(\"xxsmall\")};\n  }\n\n  &[variant=\"tag\"]:where([size=\"small\"]) {\n    --padding-left: #{space(\"xsmall\")};\n    --padding-right: #{space(\"xsmall\")};\n    --icon-gap: #{space(\"xxsmall\")};\n  }\n\n  &[variant=\"tag\"]:where([type=\"warning\"]) {\n    --color: #{$colorWarning90};\n\n    --hover-color: #{$colorWarning90};\n  }\n\n  &[variant=\"tag\"]:where([type=\"error\"]) {\n    --color: #{$colorError70};\n\n    --hover-color: #{$colorError70};\n  }\n\n  &[variant=\"tag\"]:where([type=\"success\"]) {\n    --color: #{$colorSuccess70};\n\n    --hover-color: #{$colorSuccess70};\n  }\n\n  &[variant=\"tag\"]:where([inverted]:not([inverted=\"false\"])) {\n    --color: #{$colorWhite};\n    --background-color: #{$colorGrey90};\n\n    --hover-color: #{$colorWhite};\n    --hover-background-color: #{$colorGrey90};\n  }\n\n  &[variant=\"tag\"]:where([type=\"warning\"][inverted]:not([inverted=\"false\"])) {\n    --color: #{$colorBlack};\n    --background-color: #{$colorWarning60};\n\n    --hover-color: #{$colorBlack};\n    --hover-background-color: #{$colorWarning60};\n  }\n\n  &[variant=\"tag\"]:where([type=\"error\"][inverted]:not([inverted=\"false\"])) {\n    --background-color: #{$colorError70};\n\n    --hover-background-color: #{$colorError70};\n  }\n\n  &[variant=\"tag\"]:where([type=\"success\"][inverted]:not([inverted=\"false\"])) {\n    --background-color: #{$colorSuccess70};\n\n    --hover-background-color: #{$colorSuccess70};\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--stzh-chip-active-color, #{$colorWhite});\n    --background-color: var(\n      --stzh-chip-active-background-color,\n      #{$colorPrimary70}\n    );\n\n    --hover-color: var(--stzh-chip-active-hover-color, #{$colorWhite});\n    --hover-background-color: var(\n      --stzh-chip-active-hover-background-color,\n      #{$colorPrimary90}\n    );\n    --hover-remove-background-color: #{$colorPrimary90};\n\n    @include highContrast() {\n      --color: Highlight;\n      --background-color: Canvas;\n\n      --hover-color: Highlight;\n      --hover-background-color: Canvas;\n      --hover-remove-background-color: Canvas;\n    }\n  }\n\n  &[non-interactive]:not([non-interactive=\"false\"]) {\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n    --hover-remove-color: var(--remove-color);\n    --hover-remove-background-color: transparent;\n    --hover-icon-color: var(--icon-color);\n    --hover-counter-color: var(--counter-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: var(--stzh-chip-disabled-color, #{$colorGrey80});\n    --background-color: var(\n      --stzh-chip-disabled-background-color,\n      #{$colorGrey20}\n    );\n    --remove-color: var(--color);\n    --icon-color: var(--color);\n    --counter-color: var(--color);\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n    --hover-remove-color: var(--remove-color);\n    --hover-remove-background-color: transparent;\n    --hover-icon-color: var(--icon-color);\n    --hover-counter-color: var(--counter-color);\n  }\n\n  &[variant=\"input\"][disabled]:not([disabled=\"false\"]) {\n    --background-color: #{$colorGrey10};\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include chip--size-small;\n}\n\n:host(:where([size=\"large\"])) {\n  @include chip--size-large;\n}\n\n@each $breakpoint, $size in $breakpoints {\n  @include mq($from: $breakpoint) {\n    :host(:where([size-#{$breakpoint}=\"default\"])) {\n      @include chip--size-default;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"small\"])) {\n      @include chip--size-small;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"large\"])) {\n      @include chip--size-large;\n    }\n  }\n}\n\n.stzh-chip {\n  position: relative;\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__button {\n    font-size: var(--font-size);\n    line-height: var(--line-height);\n    letter-spacing: var(--letter-spacing);\n    min-height: var(--outer-height);\n    font-family: inherit;\n    appearance: none;\n    padding: 0px;\n    border: none;\n    background-color: transparent;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__button-inner {\n    height: var(--height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: var(--border-radius);\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    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color;\n    text-decoration-line: none;\n  }\n\n  &__label {\n    text-align: left;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    display: flex;\n    color: var(--icon-color);\n    transition: color $baseTransitionAnimationSpeed;\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: var(--icon-gap);\n    }\n  }\n\n  &__counter {\n    display: flex;\n    font-variant-numeric: tabular-nums;\n    margin-left: var(--counter-gap);\n    color: var(--counter-color);\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__remove {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 0;\n    appearance: none;\n    font-family: inherit;\n    border: none;\n    background: none;\n    padding: 0;\n    width: var(--height);\n    height: var(--height);\n    border-radius: var(--remove-border-radius);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-left: space(\"xxsmall\");\n    color: var(--remove-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color, border-color;\n    cursor: pointer;\n\n    &:hover {\n      color: var(--hover-remove-color);\n      background-color: var(--hover-remove-background-color);\n    }\n  }\n\n  &__remove-icon {\n    --size: #{iconSize(\"xxsmall\")};\n  }\n\n  &__button:hover &__button-inner,\n  &__remove:hover + &__button &__button-inner {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__button:hover &__counter,\n  &__remove:hover + &__button &__counter {\n    color: var(--hover-counter-color);\n  }\n\n  &__button:hover &__icon-wrapper,\n  &__remove:hover + &__button &__icon-wrapper {\n    color: var(--hover-icon-color);\n  }\n\n  /* Removeable */\n\n  &--is-removable &__button-inner {\n    padding-right: calc(var(--height) + #{space(\"xxsmall\")});\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button,\n  &--is-disabled &__remove {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport {\n  StzhChipBlurEvent,\n  StzhChipClickEvent,\n  StzhChipFocusEvent,\n  StzhChipRemoveEvent,\n  StzhChipSize,\n  StzhChipType,\n  StzhChipVariant,\n} from \"../../index\";\n\n/**\n * @slot - Slot for label\n * @slot icon - Slot for icon\n */\n@Component({\n  tag: \"stzh-chip\",\n  styleUrl: \"stzh-chip.scss\",\n  scoped: true,\n})\nexport class StzhChip {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string;\n\n  /** `href` if the chip 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  /** Whether chip is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Whether remove button should be shown */\n  @Prop({ reflect: true }) removable: boolean = false;\n\n  /** Whether inverted style is shown (only available for `tag` variant) */\n  @Prop({ reflect: true }) inverted: boolean = false;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhChipVariant = \"tag\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhChipSize = \"default\";\n\n  /** Size variant (above small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhChipSize;\n\n  /** Size variant (above medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhChipSize;\n\n  /** Size variant (above large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhChipSize;\n\n  /** Size variant (above ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhChipSize;\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhChipType = \"default\";\n\n  /** Counter */\n  @Prop() counter: string = \"\";\n\n  /** Label of remove button for screenreaders */\n  @Prop() removeLabel: string = \"\";\n\n  /** Active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the link/button */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: 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  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the remove button element.\n   * Default value will be taken from `removeLabel` prop.\n   */\n  @Prop() removeAnalyticsId: string;\n\n  @Element() element: HTMLStzhChipElement;\n\n  /** Chip click event */\n  @Event() stzhClick: EventEmitter<StzhChipClickEvent>;\n\n  /** Chip remove event */\n  @Event() stzhRemove: EventEmitter<StzhChipRemoveEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhChipFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhChipBlurEvent>;\n\n  private chip: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.chip?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <div class=\"stzh-chip__button-inner\">\n        <div class=\"stzh-chip__icon-wrapper\">\n          {this.icon || (typeof this.icon === \"undefined\" && this.variant === \"tag\" && this.type !== \"default\") ? (\n            <stzh-icon\n              class=\"stzh-chip__icon\"\n              name={\n                this.icon ||\n                (this.type === \"info\" && \"info-help\") ||\n                (this.type === \"warning\" && \"important-warning\") ||\n                (this.type === \"error\" && \"warning\") ||\n                (this.type === \"success\" && \"checkmark-circle\")\n              }\n            ></stzh-icon>\n          ) : (\n            <slot name=\"icon\"></slot>\n          )}\n        </div>\n\n        <stzh-clamp lines={1} class=\"stzh-chip__label\" ref={el => (this.text = el as HTMLElement)}>\n          {this.label ? this.label : <slot></slot>}\n          {this.counter && this.counter !== \"undefined\" && this.counter !== undefined && (\n            <span class=\"stzh-chip__vhidden\">&nbsp;({this.counter})</span>\n          )}\n        </stzh-clamp>\n\n        {this.counter && this.counter !== \"undefined\" && this.counter !== undefined && (\n          <div class=\"stzh-chip__counter\" aria-hidden=\"true\">\n            {this.counter}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.chip.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-chip\",\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-chip\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-chip\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  private onRemoveClick = (event: MouseEvent) => {\n    this.stzhRemove.emit({\n      component: \"stzh-chip\",\n      originalEvent: event,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-chip\": true,\n      \"stzh-chip--is-active\": this.active,\n      \"stzh-chip--is-disabled\": this.disabled,\n      \"stzh-chip--is-removable\": this.removable,\n      \"stzh-chip--is-inverted\": this.inverted,\n      \"stzh-chip--has-counter\": !!this.counter,\n      [`stzh-chip--type-${this.type}`]: !!this.type,\n      [`stzh-chip--size-${this.size}`]: !!this.size,\n      [`stzh-chip--${this.variant}`]: !!this.variant,\n    };\n\n    const Chip = this.nonInteractive ? \"div\" : this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.removable && (\n            <button\n              class=\"stzh-chip__remove\"\n              onClick={this.onRemoveClick}\n              disabled={this.disabled}\n              aria-label={this.removeLabel}\n              type=\"button\"\n              s-object-id={this.removeAnalyticsId || this.removeLabel}\n            >\n              <stzh-icon class=\"stzh-chip__remove-icon\" name=\"close-big\"></stzh-icon>\n            </button>\n          )}\n\n          {this.href ? (\n            <Chip\n              ref={el => (this.chip = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href,\n              }}\n              href={this.disabled ? null : this.href}\n              target={this.target}\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n          ) : (\n            <Chip\n              ref={el => (this.chip = el as HTMLButtonElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href,\n              }}\n              disabled={this.disabled}\n              type=\"button\"\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}