@zanichelli/albe-web-components 12.4.0 → 12.4.1

package/dist/collection/components/list/z-list-element/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/list/z-list-element/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State} from \"@stencil/core\";\nimport {\n  DividerSize,\n  ExpandableListButtonAlign,\n  ExpandableListStyle,\n  KeyboardCode,\n  ListDividerType,\n  ListSize,\n  ListType,\n} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list-element\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZListElement {\n  @Element() host: HTMLZListElementElement;\n\n  /** remove filter click event, returns filterid */\n  @Event({\n    eventName: \"accessibleFocus\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  accessibleFocus: EventEmitter<number>;\n\n  /** set parent aria-activedescendant on focus event, returns filterid */\n  @Event({\n    eventName: \"ariaDescendantFocus\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  ariaDescendantFocus: EventEmitter<number>;\n\n  /** remove filter click event, returns filterid */\n  @Event({\n    eventName: \"clickItem\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  clickItem: EventEmitter;\n\n  @Listen(\"accessibleFocus\", {target: \"document\"})\n  accessibleFocusHandler(e: CustomEvent): void {\n    if (this.listElementId === e.detail) {\n      const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);\n      toFocus.focus();\n    }\n  }\n\n  /**\n   * [optional] Align expandable button left or right.\n   */\n  @Prop({reflect: true})\n  alignButton?: ExpandableListButtonAlign = ExpandableListButtonAlign.LEFT;\n\n  /**\n   * [optional] Sets element clickable.\n   */\n  @Prop({reflect: true})\n  clickable?: boolean = false;\n\n  /**\n   * [optional] Sets the divider color.\n   */\n  @Prop()\n  dividerColor?: string = \"color-surface03\";\n\n  /**\n   * [optional] Sets the position where to insert the divider.\n   */\n  @Prop()\n  dividerType?: ListDividerType = ListDividerType.NONE;\n\n  /**\n   * [optional] Sets the divider size.\n   */\n  @Prop()\n  dividerSize?: DividerSize = DividerSize.SMALL;\n\n  /**\n   * [optional] Sets element as expandable.\n   */\n  @Prop({reflect: true})\n  expandable?: boolean = false;\n\n  /**\n   * [optional] Sets expandable style to element.\n   */\n  @Prop()\n  expandableStyle?: ExpandableListStyle = ExpandableListStyle.ACCORDION;\n\n  /**\n   * [optional] List element id.\n   */\n  @Prop({reflect: true})\n  listElementId?: number;\n\n  /**\n   * [optional] Sets size of inside elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] Sets text color of the element.\n   */\n  @Prop({reflect: true})\n  color?: string = \"none\";\n\n  /**\n   * [optional] Sets disabled style of the element.\n   */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /**\n   * [optional] If is used in ZContextualMenu component\n   */\n  @Prop({reflect: true})\n  isContextualMenu?: boolean = false;\n\n  /**\n   * [optional] position of the list element inside the list or the group\n   */\n  @Prop({reflect: true})\n  listElementPosition?: string = \"0\";\n\n  /**\n   * [optional] type of the list marker for each element\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  /**\n   * [optional] Sets element role.\n   */\n  @Prop({reflect: true})\n  role?: string = \"listitem\";\n\n  @State()\n  showInnerContent = false;\n\n  private openElementConfig = {\n    accordion: {\n      open: \"minus-circled\",\n      close: \"plus-circled\",\n    },\n    menu: {\n      open: \"chevron-up\",\n      close: \"chevron-down\",\n    },\n  };\n\n  /**\n   * Constructor.\n   */\n  constructor() {\n    this.handleClick = this.handleClick.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n  }\n\n  /**\n   * Handler for click on element. If element is expandable, change state.\n   * @returns void\n   */\n  private handleClick(): void {\n    this.clickItem.emit(this.listElementId);\n    if (!this.expandable) {\n      return;\n    }\n    this.showInnerContent = !this.showInnerContent;\n  }\n\n  private calculateClass(): string {\n    if (this.isContextualMenu) {\n      return \"container-contextual-menu\";\n    }\n\n    return \"container\";\n  }\n\n  private handleKeyDown(event): void {\n    const expandByKey = event.code === KeyboardCode.ENTER;\n    switch (event.code) {\n      case KeyboardCode.ARROW_DOWN:\n        event.preventDefault();\n        this.accessibleFocus.emit(this.listElementId + 1);\n        break;\n      case KeyboardCode.ARROW_UP:\n        event.preventDefault();\n        this.accessibleFocus.emit(this.listElementId - 1);\n        break;\n      case KeyboardCode.ENTER:\n        event.preventDefault();\n        this.clickItem.emit(this.listElementId);\n        break;\n      default:\n        break;\n    }\n\n    if (!this.expandable || !expandByKey) {\n      return;\n    }\n    this.showInnerContent = !this.showInnerContent;\n  }\n\n  /**\n   * Renders button to expand element.\n   * @returns expadable button\n   */\n  private renderExpandableButton(): HTMLZIconElement {\n    if (!this.expandable) {\n      return null;\n    }\n\n    return (\n      <z-icon\n        name={\n          this.showInnerContent\n            ? this.openElementConfig[this.expandableStyle].open\n            : this.openElementConfig[this.expandableStyle].close\n        }\n      />\n    );\n  }\n\n  /**\n   * Renders expanded content if element is expandable.\n   * @returns expanded content\n   */\n  private renderExpandedContent(): HTMLDivElement {\n    if (!this.expandable) {\n      return null;\n    }\n\n    return (\n      <div\n        class={{\n          \"z-list-element-inner-container\": true,\n          \"expanded\": this.showInnerContent,\n        }}\n      >\n        <slot name=\"inner-content\" />\n      </div>\n    );\n  }\n\n  /**\n   * Renders content of the z-list-element\n   * @returns list content\n   */\n  private renderContent(): HTMLDivElement {\n    if (this.listType === ListType.NONE) {\n      return <slot />;\n    }\n\n    if (this.listType === ListType.ORDERED) {\n      return (\n        <div class=\"z-list-content-container\">\n          <div>{this.listElementPosition}.&emsp;</div>\n          <slot />\n        </div>\n      );\n    }\n\n    if (this.listType === ListType.UNORDERED) {\n      return (\n        <div class=\"z-list-content-container\">\n          <span>&bull;&emsp;</span>\n          <slot />\n        </div>\n      );\n    }\n  }\n\n  render(): HTMLZListElementElement {\n    return (\n      <Host\n        aria-expanded={this.expandable ? this.showInnerContent : null}\n        onClick={this.handleClick}\n        onFocus={() => this.ariaDescendantFocus.emit(this.listElementId)}\n        onKeyDown={this.handleKeyDown}\n        clickable={this.clickable && !this.disabled}\n        tabIndex={!this.isContextualMenu ? \"0\" : null}\n      >\n        <div\n          class={`${this.calculateClass()}`}\n          style={{color: `var(--${this.color})`}}\n          tabindex={this.isContextualMenu ? \"0\" : \"-1\"}\n          id={`z-list-element-id-${this.listElementId}`}\n          part=\"list-item-container\"\n        >\n          <div class=\"z-list-element-container\">\n            {this.renderExpandableButton()}\n            {this.renderContent()}\n          </div>\n          {this.renderExpandedContent()}\n        </div>\n        {this.dividerType === ListDividerType.ELEMENT && (\n          <z-divider\n            color={this.dividerColor}\n            size={this.dividerSize}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/list/z-list-element/index.spec.js

@@ -0,0 +1,135 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ZListElement } from "./index";
+describe("Suite test ZListElement", () => {
+    it("Test render ZListElement", async () => {
+        const page = await newSpecPage({
+            components: [ZListElement],
+            html: `<z-list-element><span>Test</span></z-list-element>`,
+        });
+        expect(page.root).toEqualHtml(`
+    <z-list-element align-button="left" color="none" list-element-position="0" list-type="none" role="listitem" size="medium" tabindex="0">
+        <mock:shadow-root>
+          <div class="container" id="z-list-element-id-undefined" part="list-item-container"  tabindex="-1" style="color: var(--none);">
+            <div class="z-list-element-container">
+              <slot></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+        <span>
+          Test
+        </span>
+      </z-list-element>
+    `);
+    });
+    it("Test render ZListElement expandable", async () => {
+        const page = await newSpecPage({
+            components: [ZListElement],
+            html: `<z-list-element expandable="true"><span>Test</span><div slot="inner-content">Test</div></z-list-element>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-list-element align-button="left" color="none" list-element-position="0" list-type="none" expandable="" role="listitem" size="medium" tabindex="0">
+        <mock:shadow-root>
+          <div class="container" id="z-list-element-id-undefined" part="list-item-container" tabindex="-1" style="color: var(--none);">
+            <div class="z-list-element-container">
+              <z-icon name="plus-circled"></z-icon>
+              <slot></slot>
+            </div>
+            <div class="z-list-element-inner-container">
+              <slot name="inner-content"></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+        <span>
+          Test
+        </span>
+        <div slot="inner-content">
+          Test
+        </div>
+      </z-list-element>
+    `);
+    });
+    it("Test render ZListElement expanded content", async () => {
+        const page = await newSpecPage({
+            components: [ZListElement],
+            html: `<z-list-element expandable="true"><span>Test</span><div slot="inner-content">Test</div></z-list-element>`,
+        });
+        page.root.click();
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-list-element align-button="left" color="none" list-element-position="0" list-type="none" aria-expanded="" expandable="" role="listitem" size="medium" tabindex="0">
+        <mock:shadow-root>
+          <div class="container" id="z-list-element-id-undefined" part="list-item-container"  tabindex="-1" style="color: var(--none);">
+            <div class="z-list-element-container">
+              <z-icon name="minus-circled"></z-icon>
+              <slot></slot>
+            </div>
+            <div class="expanded z-list-element-inner-container">
+              <slot name="inner-content"></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+        <span>
+          Test
+        </span>
+        <div slot="inner-content">
+          Test
+        </div>
+      </z-list-element>
+    `);
+    });
+    it("Test render ZListElement expandable style", async () => {
+        const page = await newSpecPage({
+            components: [ZListElement],
+            html: `<z-list-element expandable-style="menu" expandable="true"><span>Test</span><div slot="inner-content">Test</div></z-list-element>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-list-element align-button="left" color="none" list-element-position="0" list-type="none" expandable="" expandable-style="menu" role="listitem" size="medium" tabindex="0">
+        <mock:shadow-root>
+          <div class="container" id="z-list-element-id-undefined" part="list-item-container" tabindex="-1" style="color: var(--none);">
+            <div class="z-list-element-container">
+              <z-icon name="chevron-down"></z-icon>
+              <slot></slot>
+            </div>
+            <div class="z-list-element-inner-container">
+              <slot name="inner-content"></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+        <span>
+          Test
+        </span>
+        <div slot="inner-content">
+          Test
+        </div>
+      </z-list-element>
+    `);
+    });
+    it("Test render ZListElement align button right", async () => {
+        const page = await newSpecPage({
+            components: [ZListElement],
+            html: `<z-list-element expandable="true" align-button="right"><span>Test</span><div slot="inner-content">Test</div></z-list-element>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-list-element align-button="right" color="none" list-element-position="0" list-type="none" expandable="" role="listitem" size="medium" tabindex="0">
+        <mock:shadow-root>
+          <div class="container" id="z-list-element-id-undefined" part="list-item-container"  tabindex="-1" style="color: var(--none);">
+            <div class="z-list-element-container">
+              <z-icon name="plus-circled"></z-icon>
+              <slot></slot>
+            </div>
+            <div class="z-list-element-inner-container">
+              <slot name="inner-content"></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+        <span>
+          Test
+        </span>
+        <div slot="inner-content">
+          Test
+        </div>
+      </z-list-element>
+    `);
+    });
+});
+//# sourceMappingURL=index.spec.js.map

package/dist/collection/components/list/z-list-element/index.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/list/z-list-element/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAErC,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACvC,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,oDAAoD;SAC3D,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;KAa7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,0GAA0G;SACjH,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;KAoB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,0GAA0G;SACjH,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;QAClB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;KAoB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,kIAAkI;SACzI,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;KAoB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;QAC3D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,+HAA+H;SACtI,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;KAoB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZListElement} from \"./index\";\n\ndescribe(\"Suite test ZListElement\", () => {\n  it(\"Test render ZListElement\", async () => {\n    const page = await newSpecPage({\n      components: [ZListElement],\n      html: `<z-list-element><span>Test</span></z-list-element>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <z-list-element align-button=\"left\" color=\"none\" list-element-position=\"0\" list-type=\"none\" role=\"listitem\" size=\"medium\" tabindex=\"0\">\n        <mock:shadow-root>\n          <div class=\"container\" id=\"z-list-element-id-undefined\" part=\"list-item-container\"  tabindex=\"-1\" style=\"color: var(--none);\">\n            <div class=\"z-list-element-container\">\n              <slot></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        <span>\n          Test\n        </span>\n      </z-list-element>\n    `);\n  });\n\n  it(\"Test render ZListElement expandable\", async () => {\n    const page = await newSpecPage({\n      components: [ZListElement],\n      html: `<z-list-element expandable=\"true\"><span>Test</span><div slot=\"inner-content\">Test</div></z-list-element>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-list-element align-button=\"left\" color=\"none\" list-element-position=\"0\" list-type=\"none\" expandable=\"\" role=\"listitem\" size=\"medium\" tabindex=\"0\">\n        <mock:shadow-root>\n          <div class=\"container\" id=\"z-list-element-id-undefined\" part=\"list-item-container\" tabindex=\"-1\" style=\"color: var(--none);\">\n            <div class=\"z-list-element-container\">\n              <z-icon name=\"plus-circled\"></z-icon>\n              <slot></slot>\n            </div>\n            <div class=\"z-list-element-inner-container\">\n              <slot name=\"inner-content\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        <span>\n          Test\n        </span>\n        <div slot=\"inner-content\">\n          Test\n        </div>\n      </z-list-element>\n    `);\n  });\n\n  it(\"Test render ZListElement expanded content\", async () => {\n    const page = await newSpecPage({\n      components: [ZListElement],\n      html: `<z-list-element expandable=\"true\"><span>Test</span><div slot=\"inner-content\">Test</div></z-list-element>`,\n    });\n\n    page.root.click();\n    await page.waitForChanges();\n\n    expect(page.root).toEqualHtml(`\n      <z-list-element align-button=\"left\" color=\"none\" list-element-position=\"0\" list-type=\"none\" aria-expanded=\"\" expandable=\"\" role=\"listitem\" size=\"medium\" tabindex=\"0\">\n        <mock:shadow-root>\n          <div class=\"container\" id=\"z-list-element-id-undefined\" part=\"list-item-container\"  tabindex=\"-1\" style=\"color: var(--none);\">\n            <div class=\"z-list-element-container\">\n              <z-icon name=\"minus-circled\"></z-icon>\n              <slot></slot>\n            </div>\n            <div class=\"expanded z-list-element-inner-container\">\n              <slot name=\"inner-content\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        <span>\n          Test\n        </span>\n        <div slot=\"inner-content\">\n          Test\n        </div>\n      </z-list-element>\n    `);\n  });\n\n  it(\"Test render ZListElement expandable style\", async () => {\n    const page = await newSpecPage({\n      components: [ZListElement],\n      html: `<z-list-element expandable-style=\"menu\" expandable=\"true\"><span>Test</span><div slot=\"inner-content\">Test</div></z-list-element>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-list-element align-button=\"left\" color=\"none\" list-element-position=\"0\" list-type=\"none\" expandable=\"\" expandable-style=\"menu\" role=\"listitem\" size=\"medium\" tabindex=\"0\">\n        <mock:shadow-root>\n          <div class=\"container\" id=\"z-list-element-id-undefined\" part=\"list-item-container\" tabindex=\"-1\" style=\"color: var(--none);\">\n            <div class=\"z-list-element-container\">\n              <z-icon name=\"chevron-down\"></z-icon>\n              <slot></slot>\n            </div>\n            <div class=\"z-list-element-inner-container\">\n              <slot name=\"inner-content\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        <span>\n          Test\n        </span>\n        <div slot=\"inner-content\">\n          Test\n        </div>\n      </z-list-element>\n    `);\n  });\n\n  it(\"Test render ZListElement align button right\", async () => {\n    const page = await newSpecPage({\n      components: [ZListElement],\n      html: `<z-list-element expandable=\"true\" align-button=\"right\"><span>Test</span><div slot=\"inner-content\">Test</div></z-list-element>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-list-element align-button=\"right\" color=\"none\" list-element-position=\"0\" list-type=\"none\" expandable=\"\" role=\"listitem\" size=\"medium\" tabindex=\"0\">\n        <mock:shadow-root>\n          <div class=\"container\" id=\"z-list-element-id-undefined\" part=\"list-item-container\"  tabindex=\"-1\" style=\"color: var(--none);\">\n            <div class=\"z-list-element-container\">\n              <z-icon name=\"plus-circled\"></z-icon>\n              <slot></slot>\n            </div>\n            <div class=\"z-list-element-inner-container\">\n              <slot name=\"inner-content\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n        <span>\n          Test\n        </span>\n        <div slot=\"inner-content\">\n          Test\n        </div>\n      </z-list-element>\n    `);\n  });\n});\n"]}

package/dist/collection/components/list/z-list-group/index.js

@@ -1,175 +1,165 @@
 import { h, Host } from "@stencil/core";
 import { DividerSize, ListSize, ListDividerType, ListType } from "../../../beans";
 export class ZListGroup {
-  constructor() {
-    /**
-     * [optional] Sets size of inside elements.
-     */
-    this.size = ListSize.MEDIUM;
-    /**
-     * [optional] Sets the position where to insert the divider.
-     */
-    this.dividerType = ListDividerType.NONE;
-    /**
-     * [optional] Sets the divider size.
-     */
-    this.dividerSize = DividerSize.SMALL;
-    /**
-     * [optional] Sets the divider color.
-     */
-    this.dividerColor = "gray200";
-    /**
-     * [optional] type of the list marker for each element
-     */
-    this.listType = 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());
+    constructor() {
+        this.size = ListSize.MEDIUM;
+        this.dividerType = ListDividerType.NONE;
+        this.dividerSize = DividerSize.SMALL;
+        this.dividerColor = "gray200";
+        this.listType = ListType.NONE;
     }
-  }
-  componentWillLoad() {
-    this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
-  }
-  render() {
-    return (h(Host, { role: "group" }, h("div", { class: {
-        "z-list-group-header-container": true,
-        "has-header": this.hasHeader,
-      } }, h("slot", { name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))), h("slot", null)));
-  }
-  static get is() { return "z-list-group"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ListSize",
-          "resolved": "ListSize.LARGE | ListSize.MEDIUM | ListSize.SMALL | ListSize.X_LARGE",
-          "references": {
-            "ListSize": {
-              "location": "import",
-              "path": "../../../beans"
+    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);
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Sets size of inside elements."
-        },
-        "attribute": "size",
-        "reflect": true,
-        "defaultValue": "ListSize.MEDIUM"
-      },
-      "dividerType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ListDividerType",
-          "resolved": "ListDividerType.ELEMENT | ListDividerType.HEADER | ListDividerType.NONE",
-          "references": {
-            "ListDividerType": {
-              "location": "import",
-              "path": "../../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Sets the position where to insert the divider."
-        },
-        "attribute": "divider-type",
-        "reflect": true,
-        "defaultValue": "ListDividerType.NONE"
-      },
-      "dividerSize": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DividerSize",
-          "resolved": "DividerSize.LARGE | DividerSize.MEDIUM | DividerSize.SMALL",
-          "references": {
-            "DividerSize": {
-              "location": "import",
-              "path": "../../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Sets the divider size."
-        },
-        "attribute": "divider-size",
-        "reflect": true,
-        "defaultValue": "DividerSize.SMALL"
-      },
-      "dividerColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Sets the divider color."
-        },
-        "attribute": "divider-color",
-        "reflect": true,
-        "defaultValue": "\"gray200\""
-      },
-      "listType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ListType",
-          "resolved": "ListType.NONE | ListType.ORDERED | ListType.UNORDERED",
-          "references": {
-            "ListType": {
-              "location": "import",
-              "path": "../../../beans"
+            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 (h(Host, { key: 'c25db9a48f30bf98694c87dce08463ac6b314719', role: "group" }, h("div", { key: '354ea1928b4f2e58b46ef2eb18e84234e9db2cd9', class: {
+                "z-list-group-header-container": true,
+                "has-header": this.hasHeader,
+            } }, h("slot", { key: '48b577a0a6b35ab74eb9b70c53dd9462ab57e92d', name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))), h("slot", { key: '407e9151406fdc7f01b0ba40a69bd0516d5cc1f4' })));
+    }
+    static get is() { return "z-list-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ListSize",
+                    "resolved": "ListSize.LARGE | ListSize.MEDIUM | ListSize.SMALL | ListSize.X_LARGE",
+                    "references": {
+                        "ListSize": {
+                            "location": "import",
+                            "path": "../../../beans",
+                            "id": "src/beans/index.tsx::ListSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] Sets size of inside elements."
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "ListSize.MEDIUM"
+            },
+            "dividerType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ListDividerType",
+                    "resolved": "ListDividerType.ELEMENT | ListDividerType.HEADER | ListDividerType.NONE",
+                    "references": {
+                        "ListDividerType": {
+                            "location": "import",
+                            "path": "../../../beans",
+                            "id": "src/beans/index.tsx::ListDividerType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] Sets the position where to insert the divider."
+                },
+                "attribute": "divider-type",
+                "reflect": true,
+                "defaultValue": "ListDividerType.NONE"
+            },
+            "dividerSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DividerSize",
+                    "resolved": "DividerSize.LARGE | DividerSize.MEDIUM | DividerSize.SMALL",
+                    "references": {
+                        "DividerSize": {
+                            "location": "import",
+                            "path": "../../../beans",
+                            "id": "src/beans/index.tsx::DividerSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] Sets the divider size."
+                },
+                "attribute": "divider-size",
+                "reflect": true,
+                "defaultValue": "DividerSize.SMALL"
+            },
+            "dividerColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] Sets the divider color."
+                },
+                "attribute": "divider-color",
+                "reflect": true,
+                "defaultValue": "\"gray200\""
+            },
+            "listType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ListType",
+                    "resolved": "ListType.NONE | ListType.ORDERED | ListType.UNORDERED",
+                    "references": {
+                        "ListType": {
+                            "location": "import",
+                            "path": "../../../beans",
+                            "id": "src/beans/index.tsx::ListType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] type of the list marker for each element"
+                },
+                "attribute": "list-type",
+                "reflect": true,
+                "defaultValue": "ListType.NONE"
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] type of the list marker for each element"
-        },
-        "attribute": "list-type",
-        "reflect": true,
-        "defaultValue": "ListType.NONE"
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
+        };
+    }
+    static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/list/z-list-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/list/z-list-group/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,EAAC,WAAW,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAOhF,MAAM,OAAO,UAAU;;oBAOH,QAAQ,CAAC,MAAM;2BAMD,eAAe,CAAC,IAAI;2BAMxB,WAAW,CAAC,KAAK;4BAMrB,SAAS;wBAMX,QAAQ,CAAC,IAAI;;IAInC,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC5B,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBAC3D,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBAC3D,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YAC/D,CAAC;YACD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5C,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACrD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QAClE,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACtE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO;YAChB,4DACE,KAAK,EAAE;oBACL,+BAA+B,EAAE,IAAI;oBACrC,YAAY,EAAE,IAAI,CAAC,SAAS;iBAC7B;gBAED,6DAAM,IAAI,EAAC,cAAc,GAAG;gBAC3B,IAAI,CAAC,WAAW,KAAK,eAAe,CAAC,MAAM,IAAI,CAC9C,iBACE,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,IAAI,EAAE,IAAI,CAAC,WAAW,GACtB,CACH,CACG;YACN,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {DividerSize, ListSize, ListDividerType, ListType} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list-group\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZListGroup {\n  @Element() host: HTMLZListGroupElement;\n\n  /**\n   * [optional] Sets size of inside elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] Sets the position where to insert the divider.\n   */\n  @Prop({reflect: true})\n  dividerType?: ListDividerType = ListDividerType.NONE;\n\n  /**\n   * [optional] Sets the divider size.\n   */\n  @Prop({reflect: true})\n  dividerSize?: DividerSize = DividerSize.SMALL;\n\n  /**\n   * [optional] Sets the divider color.\n   */\n  @Prop({reflect: true})\n  dividerColor?: string = \"gray200\";\n\n  /**\n   * [optional] type of the list marker for each element\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  private hasHeader: boolean;\n\n  componentDidLoad(): void {\n    const children = this.host.children;\n    for (let i = 0; i < children.length; i++) {\n      if (children.length - 1 > i) {\n        children[i].setAttribute(\"divider-type\", this.dividerType);\n        children[i].setAttribute(\"divider-size\", this.dividerSize);\n        children[i].setAttribute(\"divider-color\", this.dividerColor);\n      }\n      children[i].setAttribute(\"size\", this.size);\n      children[i].setAttribute(\"list-type\", this.listType);\n      children[i].setAttribute(\"list-element-position\", i.toString());\n    }\n  }\n\n  componentWillLoad(): void {\n    this.hasHeader = !!this.host.querySelector('[slot=\"header-title\"]');\n  }\n\n  render(): HTMLZListGroupElement {\n    return (\n      <Host role=\"group\">\n        <div\n          class={{\n            \"z-list-group-header-container\": true,\n            \"has-header\": this.hasHeader,\n          }}\n        >\n          <slot name=\"header-title\" />\n          {this.dividerType === ListDividerType.HEADER && (\n            <z-divider\n              color={this.dividerColor}\n              size={this.dividerSize}\n            />\n          )}\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/list/z-list-group/index.spec.js

@@ -0,0 +1,39 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ZListGroup } from "./index";
+describe("Suite test ZListGroup", () => {
+    it("Test render ZListGroup", async () => {
+        const page = await newSpecPage({
+            components: [ZListGroup],
+            html: `<z-list-group><z-list-element></z-list-element></z-list-group>`,
+        });
+        expect(page.root).toEqualHtml(`
+    <z-list-group divider-color="gray200" divider-size="small" divider-type="none" list-type="none" role="group" size="medium">
+        <mock:shadow-root>
+          <div class="z-list-group-header-container">
+            <slot name="header-title"></slot>
+          </div>
+          <slot></slot>
+        </mock:shadow-root>
+        <z-list-element list-element-position="0" list-type="none" size="medium"></z-list-element>
+      </z-list-group>
+    `);
+    });
+    it("Test render ZListGroup size prop", async () => {
+        const page = await newSpecPage({
+            components: [ZListGroup],
+            html: `<z-list-group size="small"><z-list-element></z-list-element></z-list-group>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-list-group divider-color="gray200" divider-size="small" divider-type="none" list-type="none" role="group" size="small">
+        <mock:shadow-root>
+          <div class="z-list-group-header-container">
+            <slot name="header-title"></slot>
+          </div>
+          <slot></slot>
+        </mock:shadow-root>
+        <z-list-element list-element-position="0" list-type="none" size="small"></z-list-element>
+      </z-list-group>
+    `);
+    });
+});
+//# sourceMappingURL=index.spec.js.map

package/dist/collection/components/list/z-list-group/index.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/list/z-list-group/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,UAAU,EAAC,MAAM,SAAS,CAAC;AAEnC,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;QACtC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,gEAAgE;SACvE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,6EAA6E;SACpF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZListGroup} from \"./index\";\n\ndescribe(\"Suite test ZListGroup\", () => {\n  it(\"Test render ZListGroup\", async () => {\n    const page = await newSpecPage({\n      components: [ZListGroup],\n      html: `<z-list-group><z-list-element></z-list-element></z-list-group>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <z-list-group divider-color=\"gray200\" divider-size=\"small\" divider-type=\"none\" list-type=\"none\" role=\"group\" size=\"medium\">\n        <mock:shadow-root>\n          <div class=\"z-list-group-header-container\">\n            <slot name=\"header-title\"></slot>\n          </div>\n          <slot></slot>\n        </mock:shadow-root>\n        <z-list-element list-element-position=\"0\" list-type=\"none\" size=\"medium\"></z-list-element>\n      </z-list-group>\n    `);\n  });\n\n  it(\"Test render ZListGroup size prop\", async () => {\n    const page = await newSpecPage({\n      components: [ZListGroup],\n      html: `<z-list-group size=\"small\"><z-list-element></z-list-element></z-list-group>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-list-group divider-color=\"gray200\" divider-size=\"small\" divider-type=\"none\" list-type=\"none\" role=\"group\" size=\"small\">\n        <mock:shadow-root>\n          <div class=\"z-list-group-header-container\">\n            <slot name=\"header-title\"></slot>\n          </div>\n          <slot></slot>\n        </mock:shadow-root>\n        <z-list-element list-element-position=\"0\" list-type=\"none\" size=\"small\"></z-list-element>\n      </z-list-group>\n    `);\n  });\n});\n"]}