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

package/dist/components/p-Bu43XylS.js

@@ -1,242 +0,0 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-DAS4ghWk.js';
-import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './p-CUGRmgip.js';
-import { d as defineCustomElement$8 } from './p-Cz-ha88J.js';
-import { d as defineCustomElement$7 } from './p-BtU8igAM.js';
-import { d as defineCustomElement$6 } from './p-BU4OH8Cm.js';
-import { d as defineCustomElement$5 } from './p-BaT57zfB.js';
-import { d as defineCustomElement$4 } from './p-BRbEuDtS.js';
-import { d as defineCustomElement$3 } from './p-BQMsQk8o.js';
-import { d as defineCustomElement$2 } from './p-BN-54ren.js';
-import { d as defineCustomElement$1 } from './p-C6jXw99A.js';
-
-const stzhActionsetCss = () => `.sc-stzh-actionset-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-actionset-h,[stzh-hidden].sc-stzh-actionset-h{display:none}.sc-stzh-actionset-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-actionset-h *.sc-stzh-actionset,.sc-stzh-actionset-h *.sc-stzh-actionset::before,.sc-stzh-actionset-h *.sc-stzh-actionset::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-actionset-h .has-focus.sc-stzh-actionset{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-actionset-h .stzh-fylingfocus-focused.sc-stzh-actionset{outline-style:none !important}.sc-stzh-actionset-h .stzh-fylingfocus-focused.sc-stzh-actionset::-moz-focus-inner{border:0 !important}.stzh-actionset__actions.sc-stzh-actionset{display:flex;align-items:center}.stzh-actionset__actions-wrapper.sc-stzh-actionset{position:relative;display:flex;flex-wrap:wrap;overflow:hidden}.stzh-actionset__action.sc-stzh-actionset:not(:last-child){margin-right:var(--stzh-space-xsmall)}.stzh-actionset__action-popover-wrapper.sc-stzh-actionset{opacity:0}.stzh-actionset--has-collapsed-items.sc-stzh-actionset .stzh-actionset__action-popover-wrapper.sc-stzh-actionset{opacity:1}.stzh-actionset--has-collapsed-items.sc-stzh-actionset .stzh-actionset__action-popover.sc-stzh-actionset{--width:auto}@media screen and (min-width: 900px){.stzh-actionset--overflow.sc-stzh-actionset .stzh-actionset__action.sc-stzh-actionset{--white-space:nowrap}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__actions.sc-stzh-actionset{flex-direction:column;align-items:stretch}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__actions-wrapper.sc-stzh-actionset{flex-direction:column;align-items:stretch}}@media screen and (min-width: 600px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action.sc-stzh-actionset{--white-space:nowrap}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action.sc-stzh-actionset:not(:last-child){margin-bottom:var(--stzh-space-xsmall);margin-right:0}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action-popover-wrapper.sc-stzh-actionset{margin-top:var(--stzh-space-xsmall)}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset:not(.stzh-actionset--has-collapsed-items) .stzh-actionset__action-popover-wrapper.sc-stzh-actionset{display:none}}`;
-
-const StzhActionset = /*@__PURE__*/ proxyCustomElement(class StzhActionset extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.stzhActionClick = createEvent(this, "stzhActionClick");
-        /** Variant determining what position the action buttons are */
-        this.variant = "stack";
-        /** Button variant of popover button (button thats holds collapsed actions) */
-        this.popoverButtonVariant = "";
-        /** Button size of popover button (button that holds collapsed actions) */
-        this.popoverButtonSize = "";
-        /** Popover placement of button that holds collapsed actions */
-        this.popoverPlacement = "bottom-end";
-        /**
-         * Card header actions.
-         * Array of objects that can include the button attributes `id`, `variant`, `icon`, `size`, `iconPosition`, `iconOnly`, `label` or `badge`:
-         * `[{"id":"action-1", "icon": "alarm-bell", "label": "Lorem"}, {"id":"action-2", "icon": "mail", "label": "Lorem"}]`
-         */
-        this.actions = [];
-        this._actions = [];
-        this.actionsCollapsed = [];
-        this.actionClick = (action, originalEvent) => {
-            this.stzhActionClick.emit({
-                component: "stzh-actionset",
-                action,
-                originalEvent,
-            });
-        };
-        this.update = () => {
-            this.isSmall = media("small").matches;
-            this.isMedium = media("medium").matches;
-            if (!this.actionsElement) {
-                return;
-            }
-            Object.assign(this.actionsElement.style, {
-                width: null,
-                height: null,
-            });
-            let newActionsVisible = 0;
-            if ((this.variant === "overflow" && this.isMedium) || (this.variant === "stack" && this.isSmall)) {
-                this.dynamicActions = true;
-                let newActionsHeight = 0;
-                let newActionsWidth = 0;
-                // update height and width
-                Array.from(this.actionsElement.children).forEach((child) => {
-                    // check which item is visible and
-                    if (child.offsetTop === 0) {
-                        newActionsVisible++;
-                        const { width, height } = child.getBoundingClientRect();
-                        const style = getComputedStyle(child);
-                        const marginLeft = parseInt(style.marginLeft);
-                        const marginRight = parseInt(style.marginRight);
-                        const marginTop = parseInt(style.marginTop);
-                        const marginBottom = parseInt(style.marginBottom);
-                        const childWidth = width + marginLeft + marginRight;
-                        const childHeight = height + marginTop + marginBottom;
-                        if (newActionsHeight < childHeight) {
-                            newActionsHeight = childHeight;
-                        }
-                        newActionsWidth = newActionsWidth + childWidth;
-                    }
-                });
-                Object.assign(this.actionsElement.style, {
-                    width: `${newActionsWidth}px`,
-                    height: `${newActionsHeight}px`,
-                });
-            }
-            else {
-                this.dynamicActions = false;
-                if (this.variant === "overflow") {
-                    newActionsVisible = 0;
-                }
-                else if (this.variant === "stack") {
-                    newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;
-                }
-            }
-            this.actionsCollapsed = this._actions.slice(newActionsVisible);
-        };
-        this.handleResize = () => {
-            if (this.debounceResize) {
-                window.cancelAnimationFrame(this.debounceResize);
-            }
-            this.debounceResize = requestAnimationFrame(this.update);
-        };
-        this.mediaChangeHandler = () => {
-            this.actionsCollapsed = [];
-            requestAnimationFrame(this.update);
-        };
-    }
-    actionsWatcher(newValue) {
-        if (typeof newValue === "string") {
-            this._actions = JSON.parse(newValue);
-        }
-        else {
-            this._actions = newValue;
-        }
-    }
-    async componentWillLoad() {
-        this.actionsWatcher(this.actions);
-        if (!this.localization) {
-            this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "actionset");
-        }
-    }
-    connectedCallback() {
-        addMediaChangeListener(this.mediaChangeHandler);
-        this.resizeObserver = new ResizeObserver(this.handleResize);
-        this.resizeObserver.observe(this.element);
-    }
-    disconnectedCallback() {
-        removeMediaChangeListener(this.mediaChangeHandler);
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
-    }
-    componentDidLoad() {
-        this.update();
-    }
-    render() {
-        const classes = {
-            "stzh-actionset": true,
-            // "stzh-actionset--has-dynamic-actions": this.dynamicActions,
-            "stzh-actionset--has-collapsed-items": this.actionsCollapsed.length > 0,
-            [`stzh-actionset--${this.variant}`]: !!this.variant,
-        };
-        const Action = (action, disableTabbing) => (h("stzh-button", { key: 'd26fe67196ee573cfec1553f8f133766acfd52f4', a11yTabindex: disableTabbing ? "-1" : null, class: {
-                "stzh-actionset__action": true,
-                "is-button": true,
-            }, label: action.label, icon: action.icon, iconPosition: action.iconPosition, iconOnly: action.iconOnly, badge: action.badge, variant: action.variant ? action.variant : this.variant === "stack" ? "secondary" : "tertiary", size: action.size ? action.size : this.variant === "stack" ? "small" : "tiny", badgePosition: "icon", onClick: e => {
-                this.actionClick(action, e);
-            } }));
-        return (h(Host, { key: '1dcec389fb346f91bb7b5d5640b982ac468dce5c', "has-collapsed-items": this.actionsCollapsed.length > 0 }, h("div", { key: '85ed801f3889f5979008f9ad26c0cb7fe7e11f40', class: classes }, h("div", { key: '42ad688053842c9c1f5c2f5dfee124f6289930ce', class: "stzh-actionset__actions", role: "group" }, h("div", { key: '442bf375c91ed04791af1b165c9a612484c90434', ref: el => (this.actionsElement = el), class: "stzh-actionset__actions-wrapper" }, this._actions.map(action => (this.dynamicActions || (!this.dynamicActions && this.actionsCollapsed.indexOf(action) === -1)) &&
-            (action.tooltipContent ? (h("stzh-tooltip", { strategy: "fixed", content: action.tooltipContent }, Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1))) : (Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1))))), h("div", { key: 'eeb781e8c9c1eae50913b17cd54d9f24c441a442', class: "stzh-actionset__action-popover-wrapper" }, h("stzh-popover", { key: '495486581db179ca2e5d69e030eeedfba6a909b1', label: this.variant === "stack"
-                ? this.localization.furtherActions
-                : !this.isMedium
-                    ? this.localization.actions
-                    : "", strategy: "fixed", placement: this.popoverPlacement, class: "stzh-actionset__action-popover" }, h("stzh-button", { key: 'ce5c77ac448d862645fc1b694b7690daeef73147', fullwidth: true, disabled: this.actionsCollapsed.length === 0, class: "stzh-actionset__action is-further", variant: this.popoverButtonVariant !== ""
-                ? this.popoverButtonVariant
-                : this.variant === "stack"
-                    ? "secondary"
-                    : "tertiary", size: this.popoverButtonSize !== "" ? this.popoverButtonSize : this.variant === "stack" ? "small" : "tiny", icon: this.variant === "stack" ? "angle-down" : "more-vertical", iconOnly: this.variant === "overflow" && this.isMedium, iconPosition: "right", label: this.variant === "stack"
-                ? this.localization.furtherActions
-                : !this.isMedium
-                    ? this.localization.actions
-                    : "", a11yLabel: this.variant === "overflow" && this.localization.actions }), h("stzh-menu", { key: '2146f5a6487d68bf62dccb573d2775fb0a362de4', slot: "content" }, this.actionsCollapsed.map(action => (h("stzh-menu-item", {
-            // class="hide-medium show-when-collapsed"
-            icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: e => {
-                this.actionClick(action, e);
-            }
-        }, action.label))))))))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "actions": ["actionsWatcher"]
-    }; }
-    static get style() { return stzhActionsetCss(); }
-}, [258, "stzh-actionset", {
-        "localization": [16],
-        "variant": [513],
-        "popoverButtonVariant": [513, "popover-button-variant"],
-        "popoverButtonSize": [513, "popover-button-size"],
-        "popoverPlacement": [513, "popover-placement"],
-        "actions": [1],
-        "actionsCollapsed": [32],
-        "dynamicActions": [32],
-        "isSmall": [32],
-        "isMedium": [32]
-    }, undefined, {
-        "actions": ["actionsWatcher"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["stzh-actionset", "stzh-badge", "stzh-button", "stzh-icon", "stzh-menu", "stzh-menu-item", "stzh-popover", "stzh-text", "stzh-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "stzh-actionset":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), StzhActionset);
-            }
-            break;
-        case "stzh-badge":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$8();
-            }
-            break;
-        case "stzh-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "stzh-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-        case "stzh-menu":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "stzh-menu-item":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "stzh-popover":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "stzh-text":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "stzh-tooltip":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { StzhActionset as S, defineCustomElement as d };
-//# sourceMappingURL=p-Bu43XylS.js.map
-
-//# sourceMappingURL=p-Bu43XylS.js.map

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

@@ -1 +0,0 @@
-{"file":"p-Bu43XylS.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-actionset/stzh-actionset.scss?tag=stzh-actionset&encapsulation=scoped","src/components/stzh-actionset/stzh-actionset.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-actionset {\n  &__actions {\n    display: flex;\n    align-items: center;\n  }\n\n  &__actions-wrapper {\n    position: relative;\n    display: flex;\n    flex-wrap: wrap;\n    overflow: hidden;\n  }\n\n  &__action {\n    &:not(:last-child) {\n      margin-right: space(\"xsmall\");\n    }\n  }\n\n  &__action-popover-wrapper {\n    opacity: 0;\n  }\n\n  &--has-collapsed-items &__action-popover-wrapper {\n    opacity: 1;\n  }\n\n  &--has-collapsed-items &__action-popover {\n    --width: auto;\n  }\n\n  /* Overflow variant */\n\n  &--overflow &__action {\n    @include mq($from: medium) {\n      --white-space: nowrap;\n    }\n  }\n\n  /* Stack variant */\n\n  &--stack &__actions {\n    @include mq($to: small) {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  }\n\n  &--stack &__actions-wrapper {\n    @include mq($to: small) {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  }\n\n  &--stack &__action {\n    @include mq($from: small) {\n      --white-space: nowrap;\n    }\n\n    &:not(:last-child) {\n      @include mq($to: small) {\n        margin-bottom: space(\"xsmall\");\n        margin-right: 0;\n      }\n    }\n  }\n\n  &--stack &__action-popover-wrapper {\n    @include mq($to: small) {\n      margin-top: space(\"xsmall\");\n    }\n  }\n\n  // Hide more action popover on small if it has no collapsed items\n\n  &--stack:not(#{&}--has-collapsed-items) &__action-popover-wrapper {\n    @include mq($to: small) {\n      display: none;\n    }\n  }\n}\n","import { Component, Host, Prop, h, Element, Watch, Event, EventEmitter, State } from \"@stencil/core\";\n\nimport { StzhActionsetItem, StzhActionsetItemClickEvent } from \"../../index\";\n\nimport { StzhActionsetLocalizedText } from \"./stzh-actionset.localization\";\n\nimport { media, addMediaChangeListener, removeMediaChangeListener } from \"../../utils/media-utils\";\n\nimport { Placement } from \"@floating-ui/dom\";\n\n/**\n */\n@Component({\n  tag: \"stzh-actionset\",\n  styleUrl: \"stzh-actionset.scss\",\n  scoped: true,\n})\nexport class StzhActionset {\n  /** Translation strings */\n  @Prop() localization: StzhActionsetLocalizedText;\n\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"stack\" | \"overflow\" = \"stack\";\n\n  /** Button variant of popover button (button thats holds collapsed actions) */\n  @Prop({ reflect: true }) popoverButtonVariant: \"\" | \"default\" | \"secondary\" | \"tertiary\" = \"\";\n\n  /** Button size of popover button (button that holds collapsed actions) */\n  @Prop({ reflect: true }) popoverButtonSize: \"\" | \"default\" | \"small\" | \"tiny\" = \"\";\n\n  /** Popover placement of button that holds collapsed actions */\n  @Prop({ reflect: true }) popoverPlacement: Placement = \"bottom-end\";\n\n  /**\n   * Card header actions.\n   * Array of objects that can include the button attributes `id`, `variant`, `icon`, `size`, `iconPosition`, `iconOnly`, `label` or `badge`:\n   * `[{\"id\":\"action-1\", \"icon\": \"alarm-bell\", \"label\": \"Lorem\"}, {\"id\":\"action-2\", \"icon\": \"mail\", \"label\": \"Lorem\"}]`\n   */\n  @Prop() actions: StzhActionsetItem[] | string = [];\n  private _actions: StzhActionsetItem[] = [];\n\n  /** Header action click event */\n  @Event() stzhActionClick: EventEmitter<StzhActionsetItemClickEvent>;\n\n  @Element() element: HTMLStzhActionsetElement;\n\n  @Watch(\"actions\")\n  actionsWatcher(newValue: StzhActionsetItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._actions = JSON.parse(newValue);\n    } else {\n      this._actions = newValue;\n    }\n  }\n\n  @State() actionsCollapsed: StzhActionsetItem[] = [];\n  @State() dynamicActions: boolean;\n  @State() isSmall: boolean;\n  @State() isMedium: boolean;\n\n  private actionsElement: HTMLElement;\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private actionClick = (action: StzhActionsetItem, originalEvent: MouseEvent) => {\n    this.stzhActionClick.emit({\n      component: \"stzh-actionset\",\n      action,\n      originalEvent,\n    });\n  };\n\n  private update = () => {\n    this.isSmall = media(\"small\").matches;\n    this.isMedium = media(\"medium\").matches;\n\n    if (!this.actionsElement) {\n      return;\n    }\n\n    Object.assign(this.actionsElement.style, {\n      width: null,\n      height: null,\n    });\n\n    let newActionsVisible = 0;\n\n    if ((this.variant === \"overflow\" && this.isMedium) || (this.variant === \"stack\" && this.isSmall)) {\n      this.dynamicActions = true;\n\n      let newActionsHeight = 0;\n      let newActionsWidth = 0;\n\n      // update height and width\n      Array.from(this.actionsElement.children).forEach((child: HTMLElement) => {\n        // check which item is visible and\n        if (child.offsetTop === 0) {\n          newActionsVisible++;\n\n          const { width, height } = child.getBoundingClientRect();\n\n          const style = getComputedStyle(child);\n          const marginLeft = parseInt(style.marginLeft);\n          const marginRight = parseInt(style.marginRight);\n          const marginTop = parseInt(style.marginTop);\n          const marginBottom = parseInt(style.marginBottom);\n\n          const childWidth = width + marginLeft + marginRight;\n          const childHeight = height + marginTop + marginBottom;\n\n          if (newActionsHeight < childHeight) {\n            newActionsHeight = childHeight;\n          }\n\n          newActionsWidth = newActionsWidth + childWidth;\n        }\n      });\n\n      Object.assign(this.actionsElement.style, {\n        width: `${newActionsWidth}px`,\n        height: `${newActionsHeight}px`,\n      });\n    } else {\n      this.dynamicActions = false;\n\n      if (this.variant === \"overflow\") {\n        newActionsVisible = 0;\n      } else if (this.variant === \"stack\") {\n        newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;\n      }\n    }\n\n    this.actionsCollapsed = this._actions.slice(newActionsVisible);\n  };\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  };\n\n  private mediaChangeHandler = () => {\n    this.actionsCollapsed = [];\n    requestAnimationFrame(this.update);\n  };\n\n  async componentWillLoad() {\n    this.actionsWatcher(this.actions);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"actionset\");\n    }\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentDidLoad() {\n    this.update();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actionset\": true,\n      // \"stzh-actionset--has-dynamic-actions\": this.dynamicActions,\n      \"stzh-actionset--has-collapsed-items\": this.actionsCollapsed.length > 0,\n      [`stzh-actionset--${this.variant}`]: !!this.variant,\n    };\n\n    const Action = (action: StzhActionsetItem, disableTabbing: boolean) => (\n      <stzh-button\n        a11yTabindex={disableTabbing ? \"-1\" : null}\n        class={{\n          \"stzh-actionset__action\": true,\n          \"is-button\": true,\n        }}\n        label={action.label}\n        icon={action.icon}\n        iconPosition={action.iconPosition}\n        iconOnly={action.iconOnly}\n        badge={action.badge}\n        variant={action.variant ? action.variant : this.variant === \"stack\" ? \"secondary\" : \"tertiary\"}\n        size={action.size ? action.size : this.variant === \"stack\" ? \"small\" : \"tiny\"}\n        badgePosition=\"icon\"\n        onClick={e => {\n          this.actionClick(action, e);\n        }}\n      ></stzh-button>\n    );\n\n    return (\n      <Host has-collapsed-items={this.actionsCollapsed.length > 0}>\n        <div class={classes}>\n          <div class=\"stzh-actionset__actions\" role=\"group\">\n            <div ref={el => (this.actionsElement = el as HTMLElement)} class=\"stzh-actionset__actions-wrapper\">\n              {this._actions.map(\n                action =>\n                  (this.dynamicActions || (!this.dynamicActions && this.actionsCollapsed.indexOf(action) === -1)) &&\n                  (action.tooltipContent ? (\n                    <stzh-tooltip strategy=\"fixed\" content={action.tooltipContent}>\n                      {Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1)}\n                    </stzh-tooltip>\n                  ) : (\n                    Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1)\n                  )),\n              )}\n            </div>\n\n            <div class=\"stzh-actionset__action-popover-wrapper\">\n              <stzh-popover\n                label={\n                  this.variant === \"stack\"\n                    ? this.localization.furtherActions\n                    : !this.isMedium\n                      ? this.localization.actions\n                      : \"\"\n                }\n                strategy=\"fixed\"\n                placement={this.popoverPlacement}\n                class=\"stzh-actionset__action-popover\"\n              >\n                <stzh-button\n                  fullwidth\n                  disabled={this.actionsCollapsed.length === 0}\n                  class=\"stzh-actionset__action is-further\"\n                  variant={\n                    this.popoverButtonVariant !== \"\"\n                      ? this.popoverButtonVariant\n                      : this.variant === \"stack\"\n                        ? \"secondary\"\n                        : \"tertiary\"\n                  }\n                  size={\n                    this.popoverButtonSize !== \"\" ? this.popoverButtonSize : this.variant === \"stack\" ? \"small\" : \"tiny\"\n                  }\n                  icon={this.variant === \"stack\" ? \"angle-down\" : \"more-vertical\"}\n                  iconOnly={this.variant === \"overflow\" && this.isMedium}\n                  iconPosition=\"right\"\n                  label={\n                    this.variant === \"stack\"\n                      ? this.localization.furtherActions\n                      : !this.isMedium\n                        ? this.localization.actions\n                        : \"\"\n                  }\n                  a11yLabel={this.variant === \"overflow\" && this.localization.actions}\n                ></stzh-button>\n                <stzh-menu slot=\"content\">\n                  {this.actionsCollapsed.map(action => (\n                    <stzh-menu-item\n                      // class=\"hide-medium show-when-collapsed\"\n                      icon={action.icon}\n                      badge={action.badge}\n                      badgeEmpty={action.badgeEmpty}\n                      badgeType={action.badgeType}\n                      onClick={e => {\n                        this.actionClick(action, e);\n                      }}\n                    >\n                      {action.label}\n                    </stzh-menu-item>\n                  ))}\n                </stzh-menu>\n              </stzh-popover>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-C-L1Esh9.js

@@ -1,171 +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$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 stzhTagCss = () => `.sc-stzh-tag-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-tag-h,[stzh-hidden].sc-stzh-tag-h{display:none}.sc-stzh-tag-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-tag-h *.sc-stzh-tag,.sc-stzh-tag-h *.sc-stzh-tag::before,.sc-stzh-tag-h *.sc-stzh-tag::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-tag-h .has-focus.sc-stzh-tag{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-tag-h .stzh-fylingfocus-focused.sc-stzh-tag{outline-style:none !important}.sc-stzh-tag-h .stzh-fylingfocus-focused.sc-stzh-tag::-moz-focus-inner{border:0 !important}.sc-stzh-tag-h{--color:var(--stzh-tag-color, var(--stzh-color-secondary60));--height:1.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--background-color:var(--stzh-tag-background-color, var(--stzh-color-grey20));--hover-color:var(--stzh-tag-hover-color, var(--stzh-color-secondary60));--hover-background-color:var(
-    --stzh-tag-hover-background-color,
-    var(--background-color)
-  );display:inline-flex}[size=large].sc-stzh-tag-h{--height:2rem}[size=default][type=secondary].sc-stzh-tag-h{--background-color:var(
-    --stzh-tag-secondary-background-color,
-    var(--stzh-color-secondary60)
-  )}[type=secondary].sc-stzh-tag-h{--color:var(--stzh-tag-secondary-color, var(--stzh-color-white));--background-color:var(
-    --stzh-tag-secondary-background-color,
-    var(--stzh-color-secondary60)
-  );--hover-color:var(--stzh-tag-secondary-hover-color, var(--stzh-color-white));--hover-background-color:var(
-    --stzh-tag-secondary-hover-background-color,
-    var(--background-color)
-  )}[non-interactive].sc-stzh-tag-h:not([non-interactive=false]){--hover-color:var(--color);--hover-background-color:var(--background-color)}[disabled].sc-stzh-tag-h:not([disabled=false]){--color:var(--stzh-tag-disabled-color, var(--stzh-color-grey70));--background-color:var(
-    --stzh-tag-disabled-background-color,
-    var(--stzh-color-grey20)
-  );--hover-color:var(--color);--hover-background-color:var(--background-color)}.stzh-tag.sc-stzh-tag{position:relative}.stzh-tag__button.sc-stzh-tag{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);font-family:inherit;height:var(--height);display:flex;flex-direction:row;align-items:center;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);color:var(--color);appearance:none;border:none;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-tag__button.is-button.sc-stzh-tag,.stzh-tag__button.is-link.sc-stzh-tag{cursor:pointer}.stzh-tag__label.sc-stzh-tag{text-align:left}.stzh-tag__button.sc-stzh-tag:hover{color:var(--hover-color);background-color:var(--hover-background-color)}.stzh-tag--size-large.sc-stzh-tag .stzh-tag__button.sc-stzh-tag{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-tag--is-disabled.sc-stzh-tag .stzh-tag__button.sc-stzh-tag{cursor:not-allowed}`;
-
-const StzhTag = /*@__PURE__*/ proxyCustomElement(class StzhTag extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.stzhClick = createEvent(this, "stzhClick");
-        this.stzhFocus = createEvent(this, "stzhFocus");
-        this.stzhBlur = createEvent(this, "stzhBlur");
-        /** Label */
-        this.label = "";
-        /** `href` if the tag should be used as link  */
-        this.href = "";
-        /** Target if the button is used as link (if `href` used)  */
-        this.target = "";
-        /** Whether tag is not interactive */
-        this.nonInteractive = false;
-        /** Type */
-        this.type = "default";
-        /** Size */
-        this.size = "default";
-        /** Disabled */
-        this.disabled = false;
-        /** Id for element which describes the link/button */
-        this.a11yDescribedby = "";
-        this.focusedByInput = false;
-        this.onRootFocus = () => {
-            if (!this.focusedByInput) {
-                this.tag.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-tag",
-                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-tag",
-                originalEvent: event,
-            });
-        };
-        this.onClick = (event) => {
-            this.stzhClick.emit({
-                component: "stzh-tag",
-                originalEvent: event,
-                href: this.href,
-            });
-        };
-    }
-    componentDidRender() {
-        requestAnimationFrame(() => {
-            var _a;
-            if (!this.nonInteractive) {
-                (_a = this.tag) === null || _a === void 0 ? void 0 : _a.setAttribute("s-object-id", this.analyticsId || this.text.innerText);
-            }
-        });
-    }
-    renderInner() {
-        return (h(Fragment, null, h("stzh-clamp", { lines: 1, class: "stzh-tag__label", ref: el => (this.text = el) }, this.label ? this.label : h("slot", null))));
-    }
-    render() {
-        const classes = {
-            "stzh-tag": true,
-            "stzh-tag--is-disabled": this.disabled,
-            [`stzh-tag--size-${this.size}`]: !!this.size,
-            [`stzh-tag--${this.type}`]: !!this.type,
-        };
-        const Tag = this.nonInteractive ? "div" : this.href ? "a" : "button";
-        return (h(Host, { key: '6593610553fe48a4eed6120f02983937e141780f', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'c3b67aeb280a94253427e31e3ce721d5c2ba7bdb', class: classes }, this.href ? (h(Tag, { ref: el => (this.tag = el), class: {
-                "stzh-tag__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(Tag, { ref: el => (this.tag = el), class: {
-                "stzh-tag__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 stzhTagCss(); }
-}, [262, "stzh-tag", {
-        "label": [1],
-        "href": [1],
-        "target": [1],
-        "nonInteractive": [516, "non-interactive"],
-        "type": [513],
-        "size": [513],
-        "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-tag", "stzh-badge", "stzh-clamp", "stzh-icon", "stzh-link"];
-    components.forEach(tagName => { switch (tagName) {
-        case "stzh-tag":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), StzhTag);
-            }
-            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 { StzhTag as S, defineCustomElement as d };
-//# sourceMappingURL=p-C-L1Esh9.js.map
-
-//# sourceMappingURL=p-C-L1Esh9.js.map

package/dist/components/p-C-L1Esh9.js.map

@@ -1 +0,0 @@
-{"file":"p-C-L1Esh9.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-tag/stzh-tag.scss?tag=stzh-tag&encapsulation=scoped","src/components/stzh-tag/stzh-tag.tsx"],"sourcesContent":[":host {\n  --color: var(--stzh-tag-color, #{$colorSecondary60});\n  --height: 24px;\n  --padding-top: 0;\n  --padding-bottom: 0;\n  --padding-left: #{space(\"small\")};\n  --padding-right: #{space(\"small\")};\n  --background-color: var(--stzh-tag-background-color, #{$colorGrey20});\n\n  --hover-color: var(--stzh-tag-hover-color, #{$colorSecondary60});\n  --hover-background-color: var(\n    --stzh-tag-hover-background-color,\n    var(--background-color)\n  );\n\n  display: inline-flex;\n\n  &[size=\"large\"] {\n    --height: 32px;\n  }\n\n  &[size=\"default\"][type=\"secondary\"] {\n    --background-color: var(\n      --stzh-tag-secondary-background-color,\n      #{$colorSecondary60}\n    );\n  }\n\n  &[type=\"secondary\"] {\n    --color: var(--stzh-tag-secondary-color, #{$colorWhite});\n    --background-color: var(\n      --stzh-tag-secondary-background-color,\n      #{$colorSecondary60}\n    );\n    --hover-color: var(--stzh-tag-secondary-hover-color, #{$colorWhite});\n    --hover-background-color: var(\n      --stzh-tag-secondary-hover-background-color,\n      var(--background-color)\n    );\n  }\n\n  &[non-interactive]:not([non-interactive=\"false\"]) {\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: var(--stzh-tag-disabled-color, #{$colorGrey70});\n    --background-color: var(\n      --stzh-tag-disabled-background-color,\n      #{$colorGrey20}\n    );\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n}\n\n.stzh-tag {\n  position: relative;\n\n  &__button {\n    @include fontSize(\"nano\");\n    font-family: inherit;\n    height: var(--height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\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    appearance: none;\n    border: none;\n    background-color: var(--background-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__label {\n    text-align: left;\n  }\n\n  &__button:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  /* Size */\n\n  &--size-large &__button {\n    @include font(\"heavy\");\n    @include fontSize(\"milli\");\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, Fragment } from \"@stencil/core\";\n\nimport { StzhTagType, StzhTagSize, StzhTagClickEvent, StzhTagFocusEvent, StzhTagBlurEvent } from \"../../index\";\n\n/**\n * @slot - Slot for label\n */\n@Component({\n  tag: \"stzh-tag\",\n  styleUrl: \"stzh-tag.scss\",\n  scoped: true,\n})\nexport class StzhTag {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the tag 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 tag is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhTagType = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhTagSize = \"default\";\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: HTMLStzhTagElement;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhTagClickEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhTagFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhTagBlurEvent>;\n\n  private tag: HTMLButtonElement | HTMLAnchorElement | HTMLDivElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      if (!this.nonInteractive) {\n        this.tag?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n      }\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <Fragment>\n        <stzh-clamp lines={1} class=\"stzh-tag__label\" ref={el => (this.text = el as HTMLElement)}>\n          {this.label ? this.label : <slot></slot>}\n        </stzh-clamp>\n      </Fragment>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.tag.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-tag\",\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-tag\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-tag\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-tag\": true,\n      \"stzh-tag--is-disabled\": this.disabled,\n      [`stzh-tag--size-${this.size}`]: !!this.size,\n      [`stzh-tag--${this.type}`]: !!this.type,\n    };\n\n    const Tag = 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.href ? (\n            <Tag\n              ref={el => (this.tag = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-tag__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            </Tag>\n          ) : (\n            <Tag\n              ref={el => (this.tag = el as HTMLButtonElement | HTMLDivElement)}\n              class={{\n                \"stzh-tag__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            </Tag>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}