@oiz/stzh-components 2.7.0 → 2.8.0-beta

package/dist/cjs/stzh-status.cjs.entry.js

@@ -1,34 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-bf651831.js');
-
-const stzhStatusCss = ".sc-stzh-status-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-status-h{display:none}.sc-stzh-status-h *.sc-stzh-status,.sc-stzh-status-h *.sc-stzh-status::before,.sc-stzh-status-h *.sc-stzh-status::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-status-h{--color:var(--stzh-base-color);--min-width:none}[with-loadingbar].sc-stzh-status-h:not([with-loadingbar=false]){--min-width:10rem}[type=success].sc-stzh-status-h{--color:var(--stzh-color-truegreen)}[type=warning].sc-stzh-status-h{--color:var(--stzh-color-warning)}[type=error].sc-stzh-status-h{--color:var(--stzh-color-error)}[type=info].sc-stzh-status-h{--color:var(--stzh-color-zueriblue)}.stzh-status.sc-stzh-status{min-width:var(--min-width);color:var(--color)}.stzh-status__dot.sc-stzh-status{border-radius:50%;width:0.75rem;height:0.75rem;background-color:currentColor;margin-right:var(--stzh-space-xxsmall)}.stzh-status__bar.sc-stzh-status{display:block;height:0.25rem;border-radius:0.75rem;background-color:var(--stzh-color-grey13);margin-top:var(--stzh-space-xxsmall)}.stzh-status__bar-inner.sc-stzh-status{display:block;height:100%;width:0;border-radius:0.75rem;background:currentColor}.stzh-status__text.sc-stzh-status{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}";
-
-const StzhStatus = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.percent = 0;
-    this.withLoadingbar = false;
-    this.label = "";
-    this.type = "default";
-  }
-  render() {
-    const classes = {
-      "stzh-status": true,
-      [`stzh-status--type-${this.type}`]: !!this.type
-    };
-    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("div", { class: "stzh-status__text" }, index.h("div", { class: "stzh-status__dot" }), this.label &&
-      index.h("div", { class: "stzh-status__label" }, this.label)), this.withLoadingbar &&
-      index.h("div", { class: "stzh-status__bar" }, index.h("div", { class: "stzh-status__bar-inner", style: {
-          width: `${this.percent}%`
-        } })))));
-  }
-  get element() { return index.getElement(this); }
-};
-StzhStatus.style = stzhStatusCss;
-
-exports.stzh_status = StzhStatus;
-
-//# sourceMappingURL=stzh-status.cjs.entry.js.map

package/dist/cjs/stzh-status.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"stzh-status.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,+oDAA+oD;;MCexpD,UAAU;;;mBAEK,CAAC;0BAGwB,KAAK;iBAGhC,EAAE;gBAG4D,SAAS;;EAI/F,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;MACnB,CAAC,qBAAqB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;KAChD,CAAC;IAEF,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,OAAO,IACjBA,iBAAK,KAAK,EAAC,mBAAmB,IAC5BA,iBAAK,KAAK,EAAC,kBAAkB,GAAO,EACnC,IAAI,CAAC,KAAK;MACTA,iBAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,KAAK,CACP,CAEJ,EACL,IAAI,CAAC,cAAc;MAClBA,iBAAK,KAAK,EAAC,kBAAkB,IAC3BA,iBAAK,KAAK,EAAC,wBAAwB,EAAC,KAAK,EAAE;UACzC,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,GAAG;SAC1B,GAAQ,CACL,CAEJ,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/stzh-status/stzh-status.scss?tag=stzh-status&encapsulation=scoped","./src/components/stzh-status/stzh-status.tsx"],"sourcesContent":[":host {\n  --color: #{$baseColor};\n  --min-width: none;\n\n  &[with-loadingbar]:not([with-loadingbar=\"false\"]) {\n    --min-width: 160px;\n  }\n\n  &[type=\"success\"] {\n    --color: #{$colorTruegreen};\n  }\n\n  &[type=\"warning\"] {\n    --color: #{$colorWarning};\n  }\n\n  &[type=\"error\"] {\n    --color: #{$colorError};\n  }\n\n  &[type=\"info\"] {\n    --color: #{$colorZueriblue};\n  }\n}\n\n.stzh-status {\n  min-width: var(--min-width);\n  color: var(--color);\n\n  &__dot {\n    border-radius: 50%;\n    width: 12px;\n    height: 12px;\n    background-color: currentColor;\n    margin-right: space('xxsmall');\n  }\n\n  &__bar {\n    display: block;\n    height: 4px;\n    border-radius: 12px;\n    background-color: $colorGrey13;\n    margin-top: space('xxsmall');\n  }\n\n  &__bar-inner {\n    display: block;\n    height: 100%;\n    width: 0;\n    border-radius: 12px;\n    background: currentColor;\n  }\n\n  &__text {\n    @include fontSize('micro');\n    display: flex;\n    align-items: center;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n */\n@Component({\n  tag: \"stzh-status\",\n  styleUrl: \"stzh-status.scss\",\n  scoped: true\n})\nexport class StzhStatus {\n  /** Percent */\n  @Prop() percent: number = 0;\n\n  /** Whether to hide/show loadingbar */\n  @Prop({ reflect: true }) withLoadingbar: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  @Element() element: HTMLStzhStatusElement;\n\n  render() {\n    const classes = {\n      \"stzh-status\": true,\n      [`stzh-status--type-${this.type}`]: !!this.type\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-status__text\">\n            <div class=\"stzh-status__dot\"></div>\n            {this.label &&\n              <div class=\"stzh-status__label\">\n                {this.label}\n              </div>\n            }\n          </div>\n          {this.withLoadingbar &&\n            <div class=\"stzh-status__bar\">\n              <div class=\"stzh-status__bar-inner\" style={{\n                width: `${this.percent}%`\n              }}></div>\n            </div>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/utils-a2ff9f84.js.map

@@ -1 +0,0 @@
-{"file":"utils-a2ff9f84.js","mappings":"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","names":[],"sources":["./src/utils/utils.ts"],"sourcesContent":["// Determines whether an element has a slot. If name is specified, the function will look for a corresponding named\n// slot, otherwise it will look for a \"default\" slot (e.g. a non-empty text node or an element with no slot attribute).\nexport function hasSlot(el: HTMLElement, name?: string) {\n  // Look for a named slot\n  if (name) {\n    return el.querySelector(`[slot=\"${name}\"]`) !== null;\n  }\n\n  // Look for a default slot\n  return Array.from(childNodes(el)).some(node => {\n    if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== '') {\n      return true;\n    }\n\n    if (node.nodeType === node.ELEMENT_NODE) {\n      const el = node as HTMLElement;\n      if (!el.hasAttribute('slot')) {\n        return true;\n      }\n    }\n\n    return false;\n  });\n}\n\nexport function setPropsIfNull(element: Element, attributes: any) {\n  Object.keys(attributes).forEach(attribute => {\n    if (element.getAttribute(attribute) === null) {\n      element[attribute] = attributes[attribute];\n    }\n  })\n}\n\nexport function isStzhElement(element: Element) {\n  if (!element || element.nodeType !== 1) {\n    return false;\n  }\n\n  return element.tagName.toLowerCase().indexOf('stzh-') === 0;\n}\n\nexport function children(node: Element) {\n  return childNodes(node).map((n: any) => n.nodeType === 1);\n}\n\nexport function childNodes(node: Element) {\n  const childNodes = node.childNodes;\n\n  // check if element is stencil element without shadow dom\n  // and then detect elements that were slotted into the element\n  if (node[\"s-sc\"]) {\n    const result = [];\n\n    for (let i = 0; i < childNodes.length; i++) {\n      const slot = childNodes[i][\"s-nr\"];\n\n      if (slot) {\n        result.push(slot);\n      }\n    }\n\n    return result;\n  }\n\n  return Array.from(childNodes);\n}\n\nconst nativeCloneNodeFn = Node.prototype.cloneNode;\n\nexport function cloneElement(node: Element, deep: boolean) {\n  const clonedNode = nativeCloneNodeFn.call(node, false);\n  const srcChildNodes = childNodes(node);\n\n  if (deep) {\n    for (let i = 0; i < srcChildNodes.length; i++) {\n      if (srcChildNodes[i].nodeType !== 2) {\n        const childClone = cloneElement(srcChildNodes[i], true);\n        clonedNode.appendChild(childClone);\n      }\n    }\n  }\n\n  return clonedNode;\n}\n\n// Clone an stzh-* element that is using stencil polyfilled slots (no shadow dom)\n// and potentially wrapped in normal elements (e.g. angular component)\nexport function cloneWrappedStzhElement(elementToClone: Element): [Element, Element, Element] {\n  let clonedElement: Element;\n  let clonedStzhElement: Element;\n  let originalStzhElement: Element;\n\n  if (isStzhElement(elementToClone)) {\n    clonedElement = cloneElement(elementToClone, true);\n    clonedStzhElement = clonedElement;\n    originalStzhElement = elementToClone;\n  } else {\n    clonedElement = elementToClone.cloneNode() as Element;\n\n    let clonedInnerElementLast: Element = clonedElement;\n    let originalInnerElementLast: Element = elementToClone;\n\n    // clone inner root elements separately until we find a stzh element\n    while (originalInnerElementLast.children.length === 1 && !isStzhElement(originalInnerElementLast.children[0])) {\n      originalInnerElementLast = originalInnerElementLast.children[0];\n      const clonedInnerElementCurrent = originalInnerElementLast.cloneNode() as Element;\n\n      clonedInnerElementLast.appendChild(clonedInnerElementCurrent);\n      clonedInnerElementLast = clonedInnerElementCurrent;\n    }\n\n    if (isStzhElement(originalInnerElementLast.children[0])) {\n      clonedStzhElement = cloneElement(originalInnerElementLast.children[0], true);\n      originalStzhElement = originalInnerElementLast.children[0];\n      clonedInnerElementLast.appendChild(clonedStzhElement);\n    } else {\n      // no root stzh element found, so we give up and just deep clone the root\n      clonedElement = cloneElement(elementToClone, true);\n    }\n  }\n\n  return [clonedElement, clonedStzhElement, originalStzhElement];\n}\n"],"version":3}

package/dist/esm/string-utils-f98ee4e8.js

@@ -1,17 +0,0 @@
-function createParagraphsFromBrs(content) {
-  const replaced = content
-    .replace(/^\s*(?:<br\s*\/?>\s*)*/i, "")
-    .replace(/\s*(?:<br\s*\/?>\s*)*$/i, "")
-    .replace(/(?:<br\s*\/?>\s*?){2,}/gi, "</p><p>");
-  return `<p>${replaced}</p>`;
-}
-function camelCase(dashString) {
-  return dashString
-    .replace(/-([a-z])/g, function (g) {
-    return g[1].toUpperCase();
-  });
-}
-
-export { createParagraphsFromBrs as a, camelCase as c };
-
-//# sourceMappingURL=string-utils-f98ee4e8.js.map

package/dist/esm/string-utils-f98ee4e8.js.map

@@ -1 +0,0 @@
-{"file":"string-utils-f98ee4e8.js","mappings":"SAAgB,uBAAuB,CAAC,OAAe;EACrD,MAAM,QAAQ,GAAG,OAAO;KACrB,OAAO,CAAC,yBAAyB,EAAE,EAAE,CAAC;KACtC,OAAO,CAAC,yBAAyB,EAAE,EAAE,CAAC;KACtC,OAAO,CAAC,0BAA0B,EAAE,SAAS,CAAC,CAAC;EAElD,OAAO,MAAM,QAAQ,MAAM,CAAC;AAC9B,CAAC;SAEe,SAAS,CAAC,UAAkB;EAC1C,OAAO,UAAU;KACd,OAAO,CAAC,WAAW,EAAE,UAAU,CAAC;IAC/B,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;GAC3B,CAAC,CAAC;AACP;;;;","names":[],"sources":["./src/utils/string-utils.ts"],"sourcesContent":["export function createParagraphsFromBrs(content: string) {\n  const replaced = content\n    .replace(/^\\s*(?:<br\\s*\\/?>\\s*)*/i, \"\")\n    .replace(/\\s*(?:<br\\s*\\/?>\\s*)*$/i, \"\")\n    .replace(/(?:<br\\s*\\/?>\\s*?){2,}/gi, \"</p><p>\");\n\n  return `<p>${replaced}</p>`;\n}\n\nexport function camelCase(dashString: string) {\n  return dashString\n    .replace(/-([a-z])/g, function (g) {\n      return g[1].toUpperCase();\n    });\n}\n"],"version":3}

package/dist/esm/stzh-actionset.entry.js

@@ -1,169 +0,0 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-67fd55c9.js';
-import { f as fetchTranslations } from './translation-utils-2623783f.js';
-import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './media-utils-9b041ceb.js';
-
-const stzhActionsetCss = ".sc-stzh-actionset-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-actionset-h{display:none}.sc-stzh-actionset-h *.sc-stzh-actionset,.sc-stzh-actionset-h *.sc-stzh-actionset::before,.sc-stzh-actionset-h *.sc-stzh-actionset::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.stzh-actionset__actions.sc-stzh-actionset{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.stzh-actionset__actions-wrapper.sc-stzh-actionset{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;overflow:hidden}.stzh-actionset__action.sc-stzh-actionset:not(:last-child){margin-right:var(--stzh-space-xsmall)}.stzh-actionset__action-popover.sc-stzh-actionset{opacity:0}.stzh-actionset--has-collapsed-items.sc-stzh-actionset .stzh-actionset__action-popover.sc-stzh-actionset{--width:auto;opacity:1}@media screen and (min-width: 1024px){.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{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__actions-wrapper.sc-stzh-actionset{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;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.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.sc-stzh-actionset{display:none}}";
-
-const StzhActionset = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.stzhActionClick = createEvent(this, "stzhActionClick", 7);
-    this._actions = [];
-    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 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 = child.offsetWidth + marginLeft + marginRight;
-            const childHeight = child.offsetHeight + marginTop + marginBottom;
-            if (newActionsHeight < childHeight) {
-              newActionsHeight = childHeight;
-            }
-            newActionsWidth = newActionsWidth + childWidth + 1;
-          }
-        });
-        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);
-    };
-    this.localization = undefined;
-    this.variant = "stack";
-    this.popoverButtonVariant = "";
-    this.popoverButtonSize = "";
-    this.popoverPlacement = "bottom-end";
-    this.actions = [];
-    this.actionsCollapsed = [];
-    this.dynamicActions = undefined;
-    this.isSmall = undefined;
-    this.isMedium = undefined;
-  }
-  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 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) => (h("stzh-button", { class: {
-        "stzh-actionset__action": true,
-        "is-button": true,
-        // "show-medium": !action.onlyCollapseText,
-        // "hide-when-collapsed": !action.onlyCollapseText,
-        // "hide-text-when-collapsed": action.onlyCollapseText
-      }, 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" ? "default" : "tiny"), badgePosition: "icon", onClick: (e) => { this.actionClick(action, e); } }, h("span", { class: {
-      // "show-medium": action.onlyCollapseText,
-      // "hide-when-collapsed": action.onlyCollapseText
-      } }, action.label)));
-    return (h(Host, { "has-collapsed-items": this.actionsCollapsed.length > 0 }, h("div", { class: classes }, h("div", { class: "stzh-actionset__actions", role: "group" }, h("div", { 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))
-          :
-            Action(action))))), h("stzh-popover", { 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", { 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" ? "default" : "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 : "") }), h("stzh-menu", { 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 getElement(this); }
-  static get watchers() { return {
-    "actions": ["actionsWatcher"]
-  }; }
-};
-StzhActionset.style = stzhActionsetCss;
-
-export { StzhActionset as stzh_actionset };
-
-//# sourceMappingURL=stzh-actionset.entry.js.map

package/dist/esm/stzh-actionset.entry.js.map

@@ -1 +0,0 @@
-{"file":"stzh-actionset.entry.js","mappings":"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","names":[],"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\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 {\n    opacity: 0;\n  }\n\n  &--has-collapsed-items &__action-popover {\n    --width: auto;\n    opacity: 1;\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 {\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 {\n    @include mq($to: small) {\n      display: none;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  State\n} from \"@stencil/core\";\n\nimport {\n  StzhActionsetItem,\n  StzhActionsetItemClickEvent\n} from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhActionsetLocalizedText } from './stzh-actionset.localization';\n\nimport {\n  media,\n  addMediaChangeListener,\n  removeMediaChangeListener\n} from '../../utils/media-utils';\n\nimport {\n  Placement,\n} 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\" | \"input\" | \"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 (\n      this.variant === \"overflow\" && this.isMedium\n      || this.variant === \"stack\" && this.isSmall\n    ) {\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 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 = child.offsetWidth + marginLeft + marginRight;\n          const childHeight = child.offsetHeight + marginTop + marginBottom;\n\n          if (newActionsHeight < childHeight) {\n            newActionsHeight = childHeight;\n          }\n\n          newActionsWidth = newActionsWidth + childWidth + 1;\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 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) => (\n      <stzh-button\n        class={{\n          \"stzh-actionset__action\": true,\n          \"is-button\": true,\n          // \"show-medium\": !action.onlyCollapseText,\n          // \"hide-when-collapsed\": !action.onlyCollapseText,\n          // \"hide-text-when-collapsed\": action.onlyCollapseText\n        }}\n        icon={action.icon}\n        iconPosition={action.iconPosition}\n        iconOnly={action.iconOnly}\n        badge={action.badge}\n        variant={action.variant\n          ? action.variant\n          : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n        size={action.size\n          ? action.size\n          : (this.variant === \"stack\" ? \"default\" : \"tiny\")}\n        badgePosition=\"icon\"\n        onClick={(e) => { this.actionClick(action, e) }}\n      >\n        <span\n          class={{\n            // \"show-medium\": action.onlyCollapseText,\n            // \"hide-when-collapsed\": action.onlyCollapseText\n          }}\n        >\n          {action.label}\n        </span>\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\n              ref={(el) => (this.actionsElement = el as HTMLElement)}\n              class=\"stzh-actionset__actions-wrapper\"\n            >\n              {this._actions.map(action => (\n                (this.dynamicActions\n                  || (!this.dynamicActions &&\n                    this.actionsCollapsed.indexOf(action) === -1))\n                &&\n                  (action.tooltipContent\n                    ?\n                    <stzh-tooltip\n                      strategy=\"fixed\"\n                      content={action.tooltipContent}\n                    >\n                      {Action(action)}\n                    </stzh-tooltip>\n                    :\n                    Action(action))\n              ))}\n            </div>\n\n            <stzh-popover\n              label={this.variant === \"stack\"\n                ? this.localization.furtherActions\n                : (!this.isMedium ? this.localization.actions : \"\")}\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={this.popoverButtonVariant !== \"\"\n                  ? this.popoverButtonVariant\n                  : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n                size={this.popoverButtonSize !== \"\"\n                ? this.popoverButtonSize\n                : (this.variant === \"stack\" ? \"default\" : \"tiny\")}\n                icon={this.variant === \"stack\" ? \"angle-down\" : \"more-vertical\"}\n                iconOnly={this.variant === \"overflow\" && this.isMedium}\n                iconPosition=\"right\"\n                label={this.variant === \"stack\"\n                  ? this.localization.furtherActions\n                  : (!this.isMedium ? 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) => { this.actionClick(action, e) }}\n                  >\n                    {action.label}\n                  </stzh-menu-item>\n                ))}\n              </stzh-menu>\n            </stzh-popover>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}