@zanichelli/albe-web-components 7.0.0 → 7.1.1

package/dist/cjs/z-link.cjs.entry.js

@@ -6,69 +6,69 @@ const index = require('./index-e3299e0a.js');
 
 const stylesCss = ":host{--font-size-link:inherit;--font-weight-link:inherit;font-family:var(--font-family-sans);font-size:var(--font-size-link);font-weight:var(--font-weight-link);line-height:inherit;outline:none}:host([big]){--font-size-link:16px;--font-weight-link:var(--font-sb)}a{display:inline-flex;align-items:center;padding:calc(var(--space-unit) * 0.5) 0;border-top:var(--border-size-medium) solid transparent;border-bottom:var(--border-size-medium) solid transparent;color:var(--color-link-primary);cursor:pointer;fill:var(--color-link-primary);text-decoration:none}a:hover,a:focus,a:active{text-decoration:underline}a.active{color:var(--color-active-link);fill:var(--color-active-link)}a:hover,a:focus{color:var(--color-hover-link);fill:var(--color-hover-link)}a:active{color:var(--color-pressed-link);fill:var(--color-pressed-link)}a:visited{color:var(--color-visited-link);fill:var(--color-visited-link)}a.disabled,a.inverse.disabled{color:var(--color-disabled03);cursor:default;fill:var(--color-disabled03);pointer-events:none}a.underline,a.underline:active,a.underline:hover,a.underline:visited,a.underline.disabled,a.underline.black,a.underline.white{text-decoration:underline}a.disabled,a.disabled:active,a.disabled:visited,a.disabled:hover{text-decoration:none}a.inverse{color:var(--color-inverse-link);fill:var(--color-inverse-link)}a.inverse.active{color:var(--color-inverse-active-link);fill:var(--color-inverse-active-link)}a.inverse:hover,a.inverse:focus{color:var(--color-inverse-hover-link);fill:var(--color-inverse-hover-link)}a.inverse:active{color:var(--color-inverse-pressed-link);fill:var(--color-inverse-pressed-link)}a.inverse:visited{color:var(--color-inverse-visited-link);fill:var(--color-inverse-visited-link)}a.black{color:var(--gray800);fill:var(--gray800);text-decoration:none}a.black:hover,a.black.active{color:var(--color-black);fill:var(--color-black)}a.black:visited{color:var(--gray800);fill:var(--gray800)}a.black:hover,a.black:focus,a.black:active{text-decoration:underline}a.black:active{color:var(--gray700);fill:var(--gray700)}a.white,a.white:active,a.white:hover,a.white.active{color:var(--bg-white);fill:var(--bg-white);text-decoration:none}a.white:visited{color:var(--bg-white);fill:var(--bg-white)}a.white:hover,a.white:focus,a.white:active{text-decoration:underline}a.white.disabled,a.black.disabled{color:var(--gray500);fill:var(--gray500)}a>z-icon:first-child{margin-right:var(--space-unit)}a>z-icon:last-child{margin-left:var(--space-unit)}";
 
-const ZLink = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.zLinkClick = index.createEvent(this, "zLinkClick", 7);
-    /** link target (optional) */
-    this.target = "_self";
-    /** tabindex link attribute (optional) */
-    this.htmltabindex = 0;
-    /** disable link flag (optional) */
-    this.isdisabled = false;
-    /** active link flag (optional) */
-    this.isactive = false;
-    /** white variant flag (optional) */
-    this.iswhite = false;
-    /** link text variant (optional) */
-    this.textcolor = "primary";
-    /** big link version */
-    this.big = false;
-    /** link icon position (optional) */
-    this.iconposition = "left";
-    /** draw underline on text (optional) */
-    this.underline = false;
-    this.iconSize = 18;
-    this.emitZLinkClick = this.emitZLinkClick.bind(this);
-    this.emitZLinkInteraction = this.emitZLinkInteraction.bind(this);
-  }
-  componentWillLoad() {
-    if (this.iswhite) {
-      console.warn("z-link iswhite prop is deprecated and will be dropped in a next release, please use textcolor prop instead");
-    }
-    if (this.big) {
-      console.warn("z-link big prop is deprecated and will be dropped in a next release, please override --font-size-link and --font-weight-link variables instead");
-    }
-  }
-  emitZLinkClick(e, linkId) {
-    this.emitZLinkInteraction(e, linkId);
-  }
-  emitZLinkInteraction(e, linkId) {
-    this.zLinkClick.emit({ e, linkId });
-  }
-  componentDidLoad() {
-    if (this.icon) {
-      const height = parseFloat(window.getComputedStyle(this.hostElement).getPropertyValue("font-size"));
-      const currentSize = this.big ? 18 : Math.round(height * 1.125);
-      if (!Number.isNaN(currentSize) && this.iconSize !== currentSize) {
-        this.iconSize = currentSize;
-      }
-    }
-  }
-  render() {
-    return (index.h("a", { id: this.htmlid, href: this.href ? this.href : null, class: {
-        disabled: this.isdisabled,
-        active: this.isactive,
-        white: this.iswhite,
-        [this.textcolor || ""]: true,
-        underline: this.underline,
-      }, target: this.target, role: this.href ? "link" : "button", tabindex: this.isdisabled ? -1 : this.htmltabindex, onClick: (e) => this.emitZLinkClick(e, this.htmlid) }, this.iconposition === "right" && index.h("slot", null), this.icon && (index.h("z-icon", { style: {
-        "--z-icon-width": `${this.iconSize}px`,
-        "--z-icon-height": `${this.iconSize}px`,
-      }, name: this.icon })), this.iconposition === "left" && index.h("slot", null)));
-  }
-  get hostElement() { return index.getElement(this); }
-};
+const ZLink = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.zLinkClick = index.createEvent(this, "zLinkClick", 7);
+    /** link target (optional) */
+    this.target = "_self";
+    /** tabindex link attribute (optional) */
+    this.htmltabindex = 0;
+    /** disable link flag (optional) */
+    this.isdisabled = false;
+    /** active link flag (optional) */
+    this.isactive = false;
+    /** white variant flag (optional) */
+    this.iswhite = false;
+    /** link text variant (optional) */
+    this.textcolor = "primary";
+    /** big link version */
+    this.big = false;
+    /** link icon position (optional) */
+    this.iconposition = "left";
+    /** draw underline on text (optional) */
+    this.underline = false;
+    this.iconSize = 18;
+    this.emitZLinkClick = this.emitZLinkClick.bind(this);
+    this.emitZLinkInteraction = this.emitZLinkInteraction.bind(this);
+  }
+  componentWillLoad() {
+    if (this.iswhite) {
+      console.warn("z-link iswhite prop is deprecated and will be dropped in a next release, please use textcolor prop instead");
+    }
+    if (this.big) {
+      console.warn("z-link big prop is deprecated and will be dropped in a next release, please override --font-size-link and --font-weight-link variables instead");
+    }
+  }
+  emitZLinkClick(e, linkId) {
+    this.emitZLinkInteraction(e, linkId);
+  }
+  emitZLinkInteraction(e, linkId) {
+    this.zLinkClick.emit({ e, linkId });
+  }
+  componentDidLoad() {
+    if (this.icon) {
+      const height = parseFloat(window.getComputedStyle(this.hostElement).getPropertyValue("font-size"));
+      const currentSize = this.big ? 18 : Math.round(height * 1.125);
+      if (!Number.isNaN(currentSize) && this.iconSize !== currentSize) {
+        this.iconSize = currentSize;
+      }
+    }
+  }
+  render() {
+    return (index.h("a", { id: this.htmlid, href: this.href ? this.href : null, class: {
+        disabled: this.isdisabled,
+        active: this.isactive,
+        white: this.iswhite,
+        [this.textcolor || ""]: true,
+        underline: this.underline,
+      }, target: this.target, role: this.href ? "link" : "button", tabindex: this.isdisabled ? -1 : this.htmltabindex, onClick: (e) => this.emitZLinkClick(e, this.htmlid) }, this.iconposition === "right" && index.h("slot", null), this.icon && (index.h("z-icon", { style: {
+        "--z-icon-width": `${this.iconSize}px`,
+        "--z-icon-height": `${this.iconSize}px`,
+      }, name: this.icon })), this.iconposition === "left" && index.h("slot", null)));
+  }
+  get hostElement() { return index.getElement(this); }
+};
 ZLink.style = stylesCss;
 
 exports.z_link = ZLink;

package/dist/cjs/z-list_3.cjs.entry.js

@@ -3,257 +3,257 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-677bbad4.js');
+const index$1 = require('./index-7a9a8430.js');
 
 const stylesCss$2 = ":host{display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}";
 
-const ZList = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * [optional] Sets size of inside elements.
-     */
-    this.size = index$1.ListSize.MEDIUM;
-    /**
-     * [optional] type of the list marker for each element
-     */
-    this.listType = index$1.ListType.NONE;
-  }
-  setChildrenSizeType() {
-    const children = this.host.children;
-    for (let i = 0; i < children.length; i++) {
-      children[i].setAttribute("size", this.size);
-      children[i].setAttribute("list-type", this.listType);
-      children[i].setAttribute("list-element-position", (i + 1).toString());
-    }
-  }
-  componentDidLoad() {
-    this.setChildrenSizeType();
-  }
-  render() {
-    return (index.h(index.Host, { role: "list" }, index.h("slot", null)));
-  }
-  get host() { return index.getElement(this); }
-};
+const ZList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * [optional] Sets size of inside elements.
+     */
+    this.size = index$1.ListSize.MEDIUM;
+    /**
+     * [optional] type of the list marker for each element
+     */
+    this.listType = index$1.ListType.NONE;
+  }
+  setChildrenSizeType() {
+    const children = this.host.children;
+    for (let i = 0; i < children.length; i++) {
+      children[i].setAttribute("size", this.size);
+      children[i].setAttribute("list-type", this.listType);
+      children[i].setAttribute("list-element-position", (i + 1).toString());
+    }
+  }
+  componentDidLoad() {
+    this.setChildrenSizeType();
+  }
+  render() {
+    return (index.h(index.Host, { role: "list" }, index.h("slot", null)));
+  }
+  get host() { return index.getElement(this); }
+};
 ZList.style = stylesCss$2;
 
 const stylesCss$1 = ":host{outline:none}:host>.container,:host>.container-contextual-menu{--background-color-list-element:var(--bg-white);--background-hover-color-list-element:var(--color-surface02);--background-active-color-list-element:var(--color-surface02);display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none}:host([size=\"small\"])>.container{min-height:calc(var(--space-unit) * 4);padding:calc(var(--space-unit) / 2) 0}:host([size=\"medium\"])>.container{min-height:calc(var(--space-unit) * 5);padding:var(--space-unit) 0}:host([size=\"large\"])>.container{min-height:calc(var(--space-unit) * 7);padding:calc(var(--space-unit) * 2) 0}:host([size=\"x-large\"])>.container{min-height:calc(var(--space-unit) * 9);padding:calc(var(--space-unit) * 3) 0}:host([expandable])>.container,:host([expandable])>.container-contextual-menu,:host([clickable])>.container,:host([clickable])>.container-contextual-menu{cursor:pointer}:host([expandable]:hover)>.container,:host([expandable]:hover)>.container-contextual-menu,:host([clickable]:hover)>.container,:host([clickable]:hover)>.container-contextual-menu{background-color:var(--background-hover-color-list-element)}:host([expandable]:focus:focus-visible)>.container,:host([expandable]:focus:focus-visible)>.container-contextual-menu,:host([clickable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container-contextual-menu{box-shadow:var(--shadow-focus-primary)}:host([clickable]:not([expandable]))>.container.clicked,:host([clickable]:not([expandable]))>.container-contextual-menu.clicked{box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([expandable]:active)>.container-contextual-menu,:host([clickable]:active)>.container,:host([clickable]:active)>.container-contextual-menu{background-color:var(--background-active-color-list-element)}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container,:host([align-button=\"left\"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container,:host([align-button=\"right\"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex;flex-direction:row-reverse;justify-content:space-between}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button=\"left\"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button=\"right\"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container,:host>.container-contextual-menu>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded,:host>.container-contextual-menu>.z-list-element-inner-container.expanded{display:block}:host([clickable]:hover)>.container-contextual-menu{background-color:var(--color-surface03)}.container-contextual-menu:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-list-content-container{display:flex;align-items:center}";
 
-const ZListElement = class {
-  /**
-   * Constructor.
-   */
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.accessibleFocus = index.createEvent(this, "accessibleFocus", 7);
-    this.clickItem = index.createEvent(this, "clickItem", 7);
-    /**
-     * [optional] Align expandable button left or right.
-     */
-    this.alignButton = index$1.ExpandableListButtonAlign.LEFT;
-    /**
-     * [optional] Sets element clickable.
-     */
-    this.clickable = false;
-    /**
-     * [optional] Sets the divider color.
-     */
-    this.dividerColor = "color-surface03";
-    /**
-     * [optional] Sets the position where to insert the divider.
-     */
-    this.dividerType = index$1.ListDividerType.NONE;
-    /**
-     * [optional] Sets the divider size.
-     */
-    this.dividerSize = index$1.DividerSize.SMALL;
-    /**
-     * [optional] Sets element as expandable.
-     */
-    this.expandable = false;
-    /**
-     * [optional] Sets expandable style to element.
-     */
-    this.expandableStyle = index$1.ExpandableListStyle.ACCORDION;
-    /**
-     * [optional] Sets size of inside elements.
-     */
-    this.size = index$1.ListSize.MEDIUM;
-    /**
-     * [optional] Sets text color of the element.
-     */
-    this.color = "none";
-    /**
-     * [optional] Sets disabled style of the element.
-     */
-    this.disabled = false;
-    /**
-     * [optional] If is used in ZContextualMenu component
-     */
-    this.isContextualMenu = false;
-    /**
-     * [optional] position of the list element inside the list or the group
-     */
-    this.listElementPosition = "0";
-    /**
-     * [optional] type of the list marker for each element
-     */
-    this.listType = index$1.ListType.NONE;
-    this.showInnerContent = false;
-    this.openElementConfig = {
-      accordion: {
-        open: "minus-circled",
-        close: "plus-circled",
-      },
-      menu: {
-        open: "chevron-up",
-        close: "chevron-down",
-      },
-    };
-    this.handleClick = this.handleClick.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-  }
-  accessibleFocusHandler(e) {
-    if (this.listElementId === e.detail) {
-      const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);
-      toFocus.focus();
-    }
-  }
-  /**
-   * Handler for click on element. If element is expandable, change state.
-   * @returns void
-   */
-  handleClick() {
-    this.clickItem.emit(this.listElementId);
-    if (!this.expandable) {
-      return;
-    }
-    this.showInnerContent = !this.showInnerContent;
-  }
-  calculateClass() {
-    if (this.isContextualMenu) {
-      return "container-contextual-menu";
-    }
-    return "container";
-  }
-  handleKeyDown(event) {
-    const expandByKey = event.code === index$1.KeyboardCode.ENTER;
-    switch (event.code) {
-      case index$1.KeyboardCode.ARROW_DOWN:
-        event.preventDefault();
-        this.accessibleFocus.emit(this.listElementId + 1);
-        break;
-      case index$1.KeyboardCode.ARROW_UP:
-        event.preventDefault();
-        this.accessibleFocus.emit(this.listElementId - 1);
-        break;
-      case index$1.KeyboardCode.ENTER:
-        event.preventDefault();
-        this.clickItem.emit(this.listElementId);
-        break;
-    }
-    if (!this.expandable || !expandByKey) {
-      return;
-    }
-    this.showInnerContent = !this.showInnerContent;
-  }
-  /**
-   * Renders button to expand element.
-   * @returns expadable button
-   */
-  renderExpandableButton() {
-    if (!this.expandable) {
-      return null;
-    }
-    return (index.h("z-icon", { name: this.showInnerContent
-        ? this.openElementConfig[this.expandableStyle].open
-        : this.openElementConfig[this.expandableStyle].close }));
-  }
-  /**
-   * Renders expanded content if element is expandable.
-   * @returns expanded content
-   */
-  renderExpandedContent() {
-    if (!this.expandable) {
-      return null;
-    }
-    return (index.h("div", { class: {
-        "z-list-element-inner-container": true,
-        "expanded": this.showInnerContent,
-      } }, index.h("slot", { name: "inner-content" })));
-  }
-  /**
-   * Renders content of the z-list-element
-   * @returns list content
-   */
-  renderContent() {
-    if (this.listType === index$1.ListType.NONE) {
-      return index.h("slot", null);
-    }
-    if (this.listType === index$1.ListType.ORDERED) {
-      return (index.h("div", { class: "z-list-content-container" }, index.h("div", null, this.listElementPosition, ".\u2003"), index.h("slot", null)));
-    }
-    if (this.listType === index$1.ListType.UNORDERED) {
-      return (index.h("div", { class: "z-list-content-container" }, index.h("span", null, "\u2022\u2003"), index.h("slot", null)));
-    }
-  }
-  render() {
-    return (index.h(index.Host, { role: "listitem", "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: !this.isContextualMenu ? "0" : null }, index.h("div", { class: `${this.calculateClass()}`, style: { color: `var(--${this.color})` }, tabindex: this.isContextualMenu ? "0" : "-1", id: `z-list-element-id-${this.listElementId}` }, index.h("div", { class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === index$1.ListDividerType.ELEMENT && (index.h("z-divider", { color: this.dividerColor, size: this.dividerSize }))));
-  }
-  get host() { return index.getElement(this); }
-};
+const ZListElement = class {
+  /**
+   * Constructor.
+   */
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.accessibleFocus = index.createEvent(this, "accessibleFocus", 7);
+    this.clickItem = index.createEvent(this, "clickItem", 7);
+    /**
+     * [optional] Align expandable button left or right.
+     */
+    this.alignButton = index$1.ExpandableListButtonAlign.LEFT;
+    /**
+     * [optional] Sets element clickable.
+     */
+    this.clickable = false;
+    /**
+     * [optional] Sets the divider color.
+     */
+    this.dividerColor = "color-surface03";
+    /**
+     * [optional] Sets the position where to insert the divider.
+     */
+    this.dividerType = index$1.ListDividerType.NONE;
+    /**
+     * [optional] Sets the divider size.
+     */
+    this.dividerSize = index$1.DividerSize.SMALL;
+    /**
+     * [optional] Sets element as expandable.
+     */
+    this.expandable = false;
+    /**
+     * [optional] Sets expandable style to element.
+     */
+    this.expandableStyle = index$1.ExpandableListStyle.ACCORDION;
+    /**
+     * [optional] Sets size of inside elements.
+     */
+    this.size = index$1.ListSize.MEDIUM;
+    /**
+     * [optional] Sets text color of the element.
+     */
+    this.color = "none";
+    /**
+     * [optional] Sets disabled style of the element.
+     */
+    this.disabled = false;
+    /**
+     * [optional] If is used in ZContextualMenu component
+     */
+    this.isContextualMenu = false;
+    /**
+     * [optional] position of the list element inside the list or the group
+     */
+    this.listElementPosition = "0";
+    /**
+     * [optional] type of the list marker for each element
+     */
+    this.listType = index$1.ListType.NONE;
+    this.showInnerContent = false;
+    this.openElementConfig = {
+      accordion: {
+        open: "minus-circled",
+        close: "plus-circled",
+      },
+      menu: {
+        open: "chevron-up",
+        close: "chevron-down",
+      },
+    };
+    this.handleClick = this.handleClick.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+  accessibleFocusHandler(e) {
+    if (this.listElementId === e.detail) {
+      const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);
+      toFocus.focus();
+    }
+  }
+  /**
+   * Handler for click on element. If element is expandable, change state.
+   * @returns void
+   */
+  handleClick() {
+    this.clickItem.emit(this.listElementId);
+    if (!this.expandable) {
+      return;
+    }
+    this.showInnerContent = !this.showInnerContent;
+  }
+  calculateClass() {
+    if (this.isContextualMenu) {
+      return "container-contextual-menu";
+    }
+    return "container";
+  }
+  handleKeyDown(event) {
+    const expandByKey = event.code === index$1.KeyboardCode.ENTER;
+    switch (event.code) {
+      case index$1.KeyboardCode.ARROW_DOWN:
+        event.preventDefault();
+        this.accessibleFocus.emit(this.listElementId + 1);
+        break;
+      case index$1.KeyboardCode.ARROW_UP:
+        event.preventDefault();
+        this.accessibleFocus.emit(this.listElementId - 1);
+        break;
+      case index$1.KeyboardCode.ENTER:
+        event.preventDefault();
+        this.clickItem.emit(this.listElementId);
+        break;
+    }
+    if (!this.expandable || !expandByKey) {
+      return;
+    }
+    this.showInnerContent = !this.showInnerContent;
+  }
+  /**
+   * Renders button to expand element.
+   * @returns expadable button
+   */
+  renderExpandableButton() {
+    if (!this.expandable) {
+      return null;
+    }
+    return (index.h("z-icon", { name: this.showInnerContent
+        ? this.openElementConfig[this.expandableStyle].open
+        : this.openElementConfig[this.expandableStyle].close }));
+  }
+  /**
+   * Renders expanded content if element is expandable.
+   * @returns expanded content
+   */
+  renderExpandedContent() {
+    if (!this.expandable) {
+      return null;
+    }
+    return (index.h("div", { class: {
+        "z-list-element-inner-container": true,
+        "expanded": this.showInnerContent,
+      } }, index.h("slot", { name: "inner-content" })));
+  }
+  /**
+   * Renders content of the z-list-element
+   * @returns list content
+   */
+  renderContent() {
+    if (this.listType === index$1.ListType.NONE) {
+      return index.h("slot", null);
+    }
+    if (this.listType === index$1.ListType.ORDERED) {
+      return (index.h("div", { class: "z-list-content-container" }, index.h("div", null, this.listElementPosition, ".\u2003"), index.h("slot", null)));
+    }
+    if (this.listType === index$1.ListType.UNORDERED) {
+      return (index.h("div", { class: "z-list-content-container" }, index.h("span", null, "\u2022\u2003"), index.h("slot", null)));
+    }
+  }
+  render() {
+    return (index.h(index.Host, { role: "listitem", "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: !this.isContextualMenu ? "0" : null }, index.h("div", { class: `${this.calculateClass()}`, style: { color: `var(--${this.color})` }, tabindex: this.isContextualMenu ? "0" : "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, index.h("div", { class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === index$1.ListDividerType.ELEMENT && (index.h("z-divider", { color: this.dividerColor, size: this.dividerSize }))));
+  }
+  get host() { return index.getElement(this); }
+};
 ZListElement.style = stylesCss$1;
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.z-list-group-header-container{color:var(--gray700);font-size:var(--font-size-2);font-weight:var(--font-sb) !important;letter-spacing:0.16px;line-height:1.4}:host>.z-list-group-header-container.has-header{padding-top:var(--space-unit);padding-bottom:var(--space-unit)}:host>.z-list-group-header-container.has-header>z-divider{margin-top:var(--space-unit)}";
 
-const ZListGroup = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * [optional] Sets size of inside elements.
-     */
-    this.size = index$1.ListSize.MEDIUM;
-    /**
-     * [optional] Sets the position where to insert the divider.
-     */
-    this.dividerType = index$1.ListDividerType.NONE;
-    /**
-     * [optional] Sets the divider size.
-     */
-    this.dividerSize = index$1.DividerSize.SMALL;
-    /**
-     * [optional] Sets the divider color.
-     */
-    this.dividerColor = "gray200";
-    /**
-     * [optional] type of the list marker for each element
-     */
-    this.listType = index$1.ListType.NONE;
-  }
-  componentDidLoad() {
-    const children = this.host.children;
-    for (let i = 0; i < children.length; i++) {
-      if (children.length - 1 > i) {
-        children[i].setAttribute("divider-type", this.dividerType);
-        children[i].setAttribute("divider-size", this.dividerSize);
-        children[i].setAttribute("divider-color", this.dividerColor);
-      }
-      children[i].setAttribute("size", this.size);
-      children[i].setAttribute("list-type", this.listType);
-      children[i].setAttribute("list-element-position", i.toString());
-    }
-  }
-  componentWillLoad() {
-    this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
-  }
-  render() {
-    return (index.h(index.Host, { role: "group" }, index.h("div", { class: {
-        "z-list-group-header-container": true,
-        "has-header": this.hasHeader,
-      } }, index.h("slot", { name: "header-title" }), this.dividerType === index$1.ListDividerType.HEADER && (index.h("z-divider", { color: this.dividerColor, size: this.dividerSize }))), index.h("slot", null)));
-  }
-  get host() { return index.getElement(this); }
-};
+const ZListGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * [optional] Sets size of inside elements.
+     */
+    this.size = index$1.ListSize.MEDIUM;
+    /**
+     * [optional] Sets the position where to insert the divider.
+     */
+    this.dividerType = index$1.ListDividerType.NONE;
+    /**
+     * [optional] Sets the divider size.
+     */
+    this.dividerSize = index$1.DividerSize.SMALL;
+    /**
+     * [optional] Sets the divider color.
+     */
+    this.dividerColor = "gray200";
+    /**
+     * [optional] type of the list marker for each element
+     */
+    this.listType = index$1.ListType.NONE;
+  }
+  componentDidLoad() {
+    const children = this.host.children;
+    for (let i = 0; i < children.length; i++) {
+      if (children.length - 1 > i) {
+        children[i].setAttribute("divider-type", this.dividerType);
+        children[i].setAttribute("divider-size", this.dividerSize);
+        children[i].setAttribute("divider-color", this.dividerColor);
+      }
+      children[i].setAttribute("size", this.size);
+      children[i].setAttribute("list-type", this.listType);
+      children[i].setAttribute("list-element-position", i.toString());
+    }
+  }
+  componentWillLoad() {
+    this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
+  }
+  render() {
+    return (index.h(index.Host, { role: "group" }, index.h("div", { class: {
+        "z-list-group-header-container": true,
+        "has-header": this.hasHeader,
+      } }, index.h("slot", { name: "header-title" }), this.dividerType === index$1.ListDividerType.HEADER && (index.h("z-divider", { color: this.dividerColor, size: this.dividerSize }))), index.h("slot", null)));
+  }
+  get host() { return index.getElement(this); }
+};
 ZListGroup.style = stylesCss;
 
 exports.z_list = ZList;