@ukic/web-components 2.8.0 → 2.10.0

package/dist/collection/components/ic-accordion/ic-accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-accordion.js","sourceRoot":"","sources":["../../../src/components/ic-accordion/ic-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Watch,\n  Method,\n} from \"@stencil/core\";\nimport { isSlotUsed } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcThemeForeground, IcSizes } from \"../../utils/types\";\n\nlet accordionIds = 0;\n\n/**\n * @slot heading - Content is placed as the accordion heading.\n * @slot icon - Content is placed to the left of the heading.\n */\n\n@Component({\n  tag: \"ic-accordion\",\n  styleUrl: \"ic-accordion.css\",\n  shadow: true,\n})\nexport class Accordion {\n  private accordionId = `ic-accordion-${accordionIds++}`;\n  private expandedContentEl: HTMLDivElement;\n  private accordionBtnHeading: HTMLButtonElement;\n  private CONTENT_VISIBILITY_PROPERTY = \"--ic-expanded-content-visiblity\";\n\n  @Element() el: HTMLIcAccordionElement;\n  /**\n   * @internal Determines whether the light or dark variant of the accordion should be displayed.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the accordion will be disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the accordion appears expanded.\n   */\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  /**\n   * The section header outlining section content.\n   */\n  @Prop() heading?: string = \"\";\n\n  /**\n   * The main body message of the accordion.\n   */\n  @Prop() message?: string = \"\";\n\n  /**\n   * The size of the accordion.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * @internal Emitted when accordion is clicked.\n   */\n  @Event() accordionClicked: EventEmitter<{ id: string }>;\n\n  // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close\n  @Watch(\"expanded\")\n  handleExpandedWatch(): void {\n    this.animateExpandedContent();\n  }\n\n  /**\n   * Sets focus on accordion heading.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.accordionBtnHeading) {\n      this.accordionBtnHeading.focus();\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.expandedContentEl) {\n      this.expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.setExpandedContentStyle(e, this.expandedContentEl),\n        true\n      );\n      this.expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.hideExpandedContent(e, this.expandedContentEl),\n        true\n      );\n    }\n  }\n\n  componentDidLoad(): void {\n    // So accordion opens by default if expanded set to true\n    if (this.expanded) {\n      this.expandedContentEl.style.height = \"auto\";\n      this.expandedContentEl.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"visible\"\n      );\n    }\n  }\n\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n    this.accordionClicked.emit({ id: this.accordionId });\n  };\n\n  // Set accordion animation\n  private setAccordionAnimation = (\n    el: HTMLElement,\n    duration: string,\n    property: string,\n    delay: string\n  ) => {\n    el.style.transitionDuration = `${duration}ms`;\n    el.style.transitionProperty = property;\n    el.style.transitionDelay = delay;\n  };\n\n  private setExpandedContentStyle = (\n    ev: TransitionEvent,\n    expandedContent: HTMLDivElement\n  ) => {\n    if (ev.propertyName === \"height\" && expandedContent.clientHeight > 0) {\n      expandedContent.classList.add(\"expanded-content-opened\");\n      expandedContent.style.height = \"auto\";\n    }\n  };\n\n  private hideExpandedContent = (\n    ev: TransitionEvent,\n    expandedContent: HTMLDivElement\n  ) => {\n    if (ev.propertyName === \"height\" && expandedContent.clientHeight === 0) {\n      expandedContent.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"hidden\"\n      );\n    }\n  };\n\n  private animateExpandedContent = () => {\n    const elementHeight = this.expandedContentEl.scrollHeight;\n    if (elementHeight > 0 && this.expanded) {\n      this.expandedContentEl.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"visible\"\n      );\n      this.expandedContentEl.style.height = `${elementHeight}px`;\n      this.setAccordionAnimation(\n        this.expandedContentEl,\n        \"300\",\n        \"height\",\n        \"ease-out\"\n      );\n\n      this.expandedContentEl.addEventListener(\n        \"transitionend\",\n        (e: TransitionEvent) => {\n          this.setExpandedContentStyle(e, this.expandedContentEl);\n        }\n      );\n    } else if (!this.expanded) {\n      this.expandedContentEl.style.height = `${this.expandedContentEl.scrollHeight}px`;\n      if (this.expandedContentEl.scrollHeight > 0 && !this.expanded) {\n        this.expandedContentEl.style.height = \"0\";\n        this.setAccordionAnimation(\n          this.expandedContentEl,\n          \"300\",\n          \"height\",\n          \"ease-in\"\n        );\n        this.expandedContentEl.classList.remove(\"expanded-content-opened\");\n      }\n      this.expandedContentEl.addEventListener(\"transitionend\", (e) => {\n        this.hideExpandedContent(e, this.expandedContentEl);\n      });\n    }\n  };\n\n  render() {\n    const { appearance, size, disabled, expanded } = this;\n    return (\n      <Host\n        id={this.accordionId}\n        class={{\n          [`${appearance}`]: true,\n          [\"disabled\"]: disabled,\n        }}\n        aria-disabled={disabled ? \"true\" : \"false\"}\n      >\n        <button\n          ref={(el) => (this.accordionBtnHeading = el)}\n          id={`${this.accordionId}-button`}\n          disabled={disabled}\n          tabindex={disabled ? -1 : 0}\n          class={{\n            [`${size}`]: true,\n            [\"section-button\"]: true,\n            [\"section-button-open\"]: expanded && !disabled,\n          }}\n          aria-expanded={`${expanded}`}\n          aria-controls=\"expanded-content-area\"\n          onClick={this.toggleExpanded}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography variant=\"subtitle-large\" class=\"section-header\">\n            {isSlotUsed(this.el, \"heading\") ? (\n              <slot name=\"heading\" />\n            ) : (\n              this.heading\n            )}\n          </ic-typography>\n          <span\n            class={{\n              [\"expand-chevron\"]: true,\n              [\"content-expanded-chevron\"]: expanded && !disabled,\n            }}\n            aria-hidden=\"true\"\n            innerHTML={chevronIcon}\n          />\n        </button>\n        <div\n          class={{\n            [\"expanded-content\"]: true,\n          }}\n          aria-labelledby={`${this.accordionId}-button`}\n          role=\"region\"\n          aria-hidden={`${!expanded}`}\n          id=\"expanded-content-area\"\n          ref={(el) => (this.expandedContentEl = el)}\n        >\n          <div class=\"expanded-content-inner\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-accordion.js","sourceRoot":"","sources":["../../../src/components/ic-accordion/ic-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Watch,\n  Method,\n} from \"@stencil/core\";\nimport { isSlotUsed } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcThemeForeground, IcSizes } from \"../../utils/types\";\n\nlet accordionIds = 0;\n\n/**\n * @slot heading - Content is placed as the accordion heading.\n * @slot icon - Content is placed to the left of the heading.\n */\n\n@Component({\n  tag: \"ic-accordion\",\n  styleUrl: \"ic-accordion.css\",\n  shadow: true,\n})\nexport class Accordion {\n  private accordionId = `ic-accordion-${accordionIds++}`;\n  private expandedContentEl: HTMLDivElement;\n  private accordionBtnHeading: HTMLButtonElement;\n  private CONTENT_VISIBILITY_PROPERTY = \"--ic-expanded-content-visiblity\";\n\n  @Element() el: HTMLIcAccordionElement;\n  /**\n   * @internal Determines whether the light or dark variant of the accordion should be displayed.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the accordion will be disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the accordion appears expanded.\n   */\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  /**\n   * The section header outlining section content.\n   */\n  @Prop() heading?: string = \"\";\n\n  /**\n   * The main body message of the accordion.\n   */\n  @Prop() message?: string = \"\";\n\n  /**\n   * The size of the accordion.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * @internal Emitted when accordion is clicked.\n   */\n  @Event() accordionClicked: EventEmitter<{ id: string }>;\n\n  // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close\n  @Watch(\"expanded\")\n  handleExpandedWatch(): void {\n    this.animateExpandedContent();\n  }\n\n  /**\n   * Sets focus on accordion heading.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.accordionBtnHeading) {\n      this.accordionBtnHeading.focus();\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.expandedContentEl) {\n      this.expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.setExpandedContentStyle(e, this.expandedContentEl),\n        true\n      );\n      this.expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.hideExpandedContent(e, this.expandedContentEl),\n        true\n      );\n    }\n  }\n\n  componentDidLoad(): void {\n    // So accordion opens by default if expanded set to true\n    if (this.expanded) {\n      this.expandedContentEl.style.height = \"auto\";\n      this.expandedContentEl.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"visible\"\n      );\n    }\n  }\n\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n    this.accordionClicked.emit({ id: this.accordionId });\n  };\n\n  // Set accordion animation\n  private setAccordionAnimation = (\n    el: HTMLElement,\n    duration: string,\n    property: string,\n    delay: string\n  ) => {\n    el.style.transitionDuration = `${duration}ms`;\n    el.style.transitionProperty = property;\n    el.style.transitionDelay = delay;\n  };\n\n  private setExpandedContentStyle = (\n    ev: TransitionEvent,\n    expandedContent: HTMLDivElement\n  ) => {\n    if (ev.propertyName === \"height\" && expandedContent.clientHeight > 0) {\n      expandedContent.classList.add(\"expanded-content-opened\");\n      expandedContent.style.height = \"auto\";\n    }\n  };\n\n  private hideExpandedContent = (\n    ev: TransitionEvent,\n    expandedContent: HTMLDivElement\n  ) => {\n    if (ev.propertyName === \"height\" && expandedContent.clientHeight === 0) {\n      expandedContent.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"hidden\"\n      );\n    }\n  };\n\n  private animateExpandedContent = () => {\n    const elementHeight = this.expandedContentEl.scrollHeight;\n    if (elementHeight > 0 && this.expanded) {\n      this.expandedContentEl.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"visible\"\n      );\n      this.expandedContentEl.style.height = `${elementHeight}px`;\n      this.setAccordionAnimation(\n        this.expandedContentEl,\n        \"300\",\n        \"height\",\n        \"ease-out\"\n      );\n\n      this.expandedContentEl.addEventListener(\n        \"transitionend\",\n        (e: TransitionEvent) => {\n          this.setExpandedContentStyle(e, this.expandedContentEl);\n        }\n      );\n    } else if (!this.expanded) {\n      this.expandedContentEl.style.height = `${this.expandedContentEl.scrollHeight}px`;\n      if (this.expandedContentEl.scrollHeight > 0 && !this.expanded) {\n        this.expandedContentEl.style.height = \"0\";\n        this.setAccordionAnimation(\n          this.expandedContentEl,\n          \"300\",\n          \"height\",\n          \"ease-in\"\n        );\n        this.expandedContentEl.classList.remove(\"expanded-content-opened\");\n      }\n      this.expandedContentEl.addEventListener(\"transitionend\", (e) => {\n        this.hideExpandedContent(e, this.expandedContentEl);\n      });\n    }\n  };\n\n  render() {\n    const { appearance, size, disabled, expanded } = this;\n    return (\n      <Host\n        id={this.accordionId}\n        class={{\n          [`${appearance}`]: true,\n          [\"disabled\"]: disabled,\n        }}\n        aria-disabled={disabled ? \"true\" : \"false\"}\n      >\n        <button\n          ref={(el) => (this.accordionBtnHeading = el)}\n          id={`${this.accordionId}-button`}\n          disabled={disabled}\n          tabindex={disabled ? -1 : 0}\n          class={{\n            [`${size}`]: true,\n            [\"section-button\"]: true,\n            [\"section-button-open\"]: expanded && !disabled,\n          }}\n          aria-expanded={`${expanded}`}\n          aria-controls=\"expanded-content-area\"\n          onClick={this.toggleExpanded}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography variant=\"subtitle-large\" class=\"section-header\">\n            {isSlotUsed(this.el, \"heading\") ? (\n              <slot name=\"heading\" />\n            ) : (\n              this.heading\n            )}\n          </ic-typography>\n          <span\n            class={{\n              [\"expand-chevron\"]: true,\n              [\"content-expanded-chevron\"]: expanded && !disabled,\n            }}\n            aria-hidden=\"true\"\n            innerHTML={chevronIcon}\n          />\n        </button>\n        <div\n          class={{\n            [\"expanded-content\"]: true,\n          }}\n          aria-labelledby={`${this.accordionId}-button`}\n          role=\"region\"\n          aria-hidden={`${!expanded}`}\n          id=\"expanded-content-area\"\n          ref={(el) => (this.expandedContentEl = el)}\n        >\n          <div class=\"expanded-content-inner\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-accordion/test/basic/ic-accordion.spec.js

@@ -1,35 +1,35 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { Accordion } from "../../ic-accordion";
 describe("ic-accordion snapshots", () => {
-  it("should match default snapshot", async () => {
-    const page = await newSpecPage({
-      components: [Accordion],
-      html: `
+    it("should match default snapshot", async () => {
+        const page = await newSpecPage({
+            components: [Accordion],
+            html: `
       <ic-accordion heading="Accordion 1">
         <ic-typography variant="body">
           This is an example of the main body text.
         </ic-typography>
       </ic-accordion>
       `,
+        });
+        expect(page.root).toMatchSnapshot("renders as default");
     });
-    expect(page.root).toMatchSnapshot("renders as default");
-  });
-  it("should match light snapshot", async () => {
-    const page = await newSpecPage({
-      components: [Accordion],
-      html: `
+    it("should match light snapshot", async () => {
+        const page = await newSpecPage({
+            components: [Accordion],
+            html: `
       <ic-accordion heading="Accordion 1">
         <ic-typography variant="body">
           This is an example of the main body text.
         </ic-typography>
       </ic-accordion>`,
+        });
+        expect(page.root).toMatchSnapshot("renders as light");
     });
-    expect(page.root).toMatchSnapshot("renders as light");
-  });
-  it("should match with icon snapshot", async () => {
-    const page = await newSpecPage({
-      components: [Accordion],
-      html: `
+    it("should match with icon snapshot", async () => {
+        const page = await newSpecPage({
+            components: [Accordion],
+            html: `
       <ic-accordion heading="Accordion 1">
         <svg
           slot="icon"
@@ -47,300 +47,300 @@ describe("ic-accordion snapshots", () => {
           This is an example of the main body text
         </ic-typography>
       </ic-accordion>`,
+        });
+        expect(page.root).toMatchSnapshot("renders with icon");
     });
-    expect(page.root).toMatchSnapshot("renders with icon");
-  });
-  it("should render with slot", async () => {
-    const page = await newSpecPage({
-      components: [Accordion],
-      html: `
+    it("should render with slot", async () => {
+        const page = await newSpecPage({
+            components: [Accordion],
+            html: `
       <ic-accordion heading="Accordion 1" size="small">
         <slot>This is an example of the main body text.</slot>
       </ic-accordion>`,
+        });
+        expect(page.root).toMatchSnapshot("renders small accordion");
     });
-    expect(page.root).toMatchSnapshot("renders small accordion");
-  });
-  it("should match small snapshot", async () => {
-    const page = await newSpecPage({
-      components: [Accordion],
-      html: `
+    it("should match small snapshot", async () => {
+        const page = await newSpecPage({
+            components: [Accordion],
+            html: `
       <ic-accordion heading="Accordion 1" size="small">
         <ic-typography variant="body">
           This is an example of the main body text.
         </ic-typography>
       </ic-accordion>`,
+        });
+        expect(page.root).toMatchSnapshot("renders small accordion");
     });
-    expect(page.root).toMatchSnapshot("renders small accordion");
-  });
-  it("should match large snapshot", async () => {
-    const page = await newSpecPage({
-      components: [Accordion],
-      html: `
+    it("should match large snapshot", async () => {
+        const page = await newSpecPage({
+            components: [Accordion],
+            html: `
       <ic-accordion size="large" heading="Accordion 1">
         <ic-typography variant="body">
           This is an example of the main body text.
         </ic-typography>
       </ic-accordion>`,
+        });
+        expect(page.root).toMatchSnapshot("renders large accordion");
     });
-    expect(page.root).toMatchSnapshot("renders large accordion");
-  });
-  it("should render with a heading slot when supplied", async () => {
-    const page = await newSpecPage({
-      components: [Accordion],
-      html: `  
+    it("should render with a heading slot when supplied", async () => {
+        const page = await newSpecPage({
+            components: [Accordion],
+            html: `  
       <ic-accordion>
         <slot name="heading"/></slot>
         <ic-typography variant="body">
           This is an example of the main body text.
         </ic-typography>
       </ic-accordion>`,
+        });
+        expect(page.root).toMatchSnapshot("renders with heading slot");
     });
-    expect(page.root).toMatchSnapshot("renders with heading slot");
-  });
-  it("should render in a disabled state", async () => {
-    const page = await newSpecPage({
-      components: [Accordion],
-      html: `
+    it("should render in a disabled state", async () => {
+        const page = await newSpecPage({
+            components: [Accordion],
+            html: `
       <ic-accordion heading="Accordion 1" disabled>
         <ic-typography variant="body">
           This is an example of the main body text.
         </ic-typography>
       </ic-accordion>`,
+        });
+        expect(page.root).toMatchSnapshot("disabled");
     });
-    expect(page.root).toMatchSnapshot("disabled");
-  });
-  describe("ic-accordion component", () => {
-    it("it should test the toggleExpanded function", async () => {
-      const page = await newSpecPage({
-        components: [Accordion],
-        html: `
+    describe("ic-accordion component", () => {
+        it("it should test the toggleExpanded function", async () => {
+            const page = await newSpecPage({
+                components: [Accordion],
+                html: `
       <ic-accordion heading="Accordion 1">
         <ic-typography variant="body">
           This is an example of the main body text.
         </ic-typography>
       </ic-accordion>`,
-      });
-      expect(page.root.expanded).toBe(false);
-      await page.rootInstance.toggleExpanded();
-      await page.waitForChanges();
-      expect(page.root.expanded).toBe(true);
-    });
-    it("tests id number is added to accordion", async () => {
-      const page = await newSpecPage({
-        components: [Accordion],
-        html: `
+            });
+            expect(page.root.expanded).toBe(false);
+            await page.rootInstance.toggleExpanded();
+            await page.waitForChanges();
+            expect(page.root.expanded).toBe(true);
+        });
+        it("tests id number is added to accordion", async () => {
+            const page = await newSpecPage({
+                components: [Accordion],
+                html: `
       <ic-accordion heading="Accordion 1">
         <ic-typography variant="body">
           This is an example of the main body text.
         </ic-typography>
       </ic-accordion>`,
-      });
-      const eventSpy = jest.fn();
-      const accordionId = page.root.id;
-      page.root.addEventListener("accordionClicked", eventSpy);
-      await page.waitForChanges();
-      await page.rootInstance.toggleExpanded();
-      await page.waitForChanges();
-      expect(eventSpy).toHaveBeenCalledWith(expect.objectContaining({
-        detail: expect.objectContaining({
-          id: accordionId,
-        }),
-      }));
-    });
-    it("it should test the disabled function", async () => {
-      const page = await newSpecPage({
-        components: [Accordion],
-        html: `
+            });
+            const eventSpy = jest.fn();
+            const accordionId = page.root.id;
+            page.root.addEventListener("accordionClicked", eventSpy);
+            await page.waitForChanges();
+            await page.rootInstance.toggleExpanded();
+            await page.waitForChanges();
+            expect(eventSpy).toHaveBeenCalledWith(expect.objectContaining({
+                detail: expect.objectContaining({
+                    id: accordionId,
+                }),
+            }));
+        });
+        it("it should test the disabled function", async () => {
+            const page = await newSpecPage({
+                components: [Accordion],
+                html: `
       <ic-accordion heading="Accordion 1" disabled>
         <ic-typography variant="body">
           This is an example of the main body text.
         </ic-typography>
       </ic-accordion>`,
-      });
-      expect(page.root.disabled).toBe(true);
-    });
-    it("it should add transition styling to the element", async () => {
-      const page = await newSpecPage({
-        components: [Accordion],
-        html: `
+            });
+            expect(page.root.disabled).toBe(true);
+        });
+        it("it should add transition styling to the element", async () => {
+            const page = await newSpecPage({
+                components: [Accordion],
+                html: `
       <ic-accordion heading="Accordion 1" disabled>
         <ic-typography variant="body">
           This is an example of the main body text.
         </ic-typography>
       </ic-accordion>`,
-      });
-      const div = document.createElement("div");
-      page.rootInstance.setAccordionAnimation(div, "300", "height", "ease-out");
-      expect(div.style.transitionDuration).toBe("300ms");
-      expect(div.style.transitionProperty).toBe("height");
-      expect(div.style.transitionDelay).toBe("ease-out");
-    });
-    it("it should call setAccordionAnimation if scroll height > 0 and expanded = true", async () => {
-      const page = await newSpecPage({
-        components: [Accordion],
-        html: `
+            });
+            const div = document.createElement("div");
+            page.rootInstance.setAccordionAnimation(div, "300", "height", "ease-out");
+            expect(div.style.transitionDuration).toBe("300ms");
+            expect(div.style.transitionProperty).toBe("height");
+            expect(div.style.transitionDelay).toBe("ease-out");
+        });
+        it("it should call setAccordionAnimation if scroll height > 0 and expanded = true", async () => {
+            const page = await newSpecPage({
+                components: [Accordion],
+                html: `
       <ic-accordion heading="Accordion 1" expanded>
         <ic-typography variant="body">
           This is an example of the main body text.
         </ic-typography>
       </ic-accordion>`,
-      });
-      const spySetAccordionAnimation = jest.spyOn(page.rootInstance, "setAccordionAnimation");
-      const accordionExpanded = page.root.shadowRoot.querySelector(".expanded-content");
-      page.rootInstance.expandedContentEl = accordionExpanded;
-      Object.defineProperty(page.rootInstance.expandedContentEl, "scrollHeight", { configurable: true, value: 500 });
-      page.rootInstance.animateExpandedContent();
-      expect(spySetAccordionAnimation).toHaveBeenCalled();
-    });
-    it("it should call setAccordionAnimation if scroll height = '500' and expanded = 'false'", async () => {
-      const page = await newSpecPage({
-        components: [Accordion],
-        html: `
+            });
+            const spySetAccordionAnimation = jest.spyOn(page.rootInstance, "setAccordionAnimation");
+            const accordionExpanded = page.root.shadowRoot.querySelector(".expanded-content");
+            page.rootInstance.expandedContentEl = accordionExpanded;
+            Object.defineProperty(page.rootInstance.expandedContentEl, "scrollHeight", { configurable: true, value: 500 });
+            page.rootInstance.animateExpandedContent();
+            expect(spySetAccordionAnimation).toHaveBeenCalled();
+        });
+        it("it should call setAccordionAnimation if scroll height = '500' and expanded = 'false'", async () => {
+            const page = await newSpecPage({
+                components: [Accordion],
+                html: `
       <ic-accordion heading="Accordion 1" >
         <ic-typography variant="body">
           This is an example of the main body text.
         </ic-typography>
       </ic-accordion>`,
-      });
-      const spySetAccordionAnimation = jest.spyOn(page.rootInstance, "setAccordionAnimation");
-      const accordionExpanded = page.root.shadowRoot.querySelector(".expanded-content");
-      page.rootInstance.expandedContentEl = accordionExpanded;
-      Object.defineProperty(page.rootInstance.expandedContentEl, "scrollHeight", { configurable: true, value: 500 });
-      page.rootInstance.animateExpandedContent();
-      expect(spySetAccordionAnimation).toHaveBeenCalled();
-    });
-    it("should set height and .expanded-content-opened on expanded content", async () => {
-      const transitionEvent = {
-        propertyName: "height",
-      };
-      const page = await newSpecPage({
-        components: [Accordion],
-        html: `
+            });
+            const spySetAccordionAnimation = jest.spyOn(page.rootInstance, "setAccordionAnimation");
+            const accordionExpanded = page.root.shadowRoot.querySelector(".expanded-content");
+            page.rootInstance.expandedContentEl = accordionExpanded;
+            Object.defineProperty(page.rootInstance.expandedContentEl, "scrollHeight", { configurable: true, value: 500 });
+            page.rootInstance.animateExpandedContent();
+            expect(spySetAccordionAnimation).toHaveBeenCalled();
+        });
+        it("should set height and .expanded-content-opened on expanded content", async () => {
+            const transitionEvent = {
+                propertyName: "height",
+            };
+            const page = await newSpecPage({
+                components: [Accordion],
+                html: `
       <ic-accordion heading="Accordion 1" >
         <ic-typography variant="body">
           This is an example of the main body text.
         </ic-typography>
       </ic-accordion>`,
-      });
-      const accordionExpanded = page.root.shadowRoot.querySelector(".expanded-content");
-      page.rootInstance.expandedContentEl = accordionExpanded;
-      page.rootInstance.expandedContentEl.clientHeight = 50;
-      await page.rootInstance.setExpandedContentStyle(transitionEvent, page.rootInstance.expandedContentEl);
-      expect(page.rootInstance.expandedContentEl.className.split(" ")).toContain("expanded-content-opened");
-      expect(page.rootInstance.expandedContentEl.style.height).toBe("auto");
-    });
-    it("should not set height and .expanded-content-opened on expanded content", async () => {
-      const transitionEvent = {
-        propertyName: "height",
-      };
-      const page = await newSpecPage({
-        components: [Accordion],
-        html: `
+            });
+            const accordionExpanded = page.root.shadowRoot.querySelector(".expanded-content");
+            page.rootInstance.expandedContentEl = accordionExpanded;
+            page.rootInstance.expandedContentEl.clientHeight = 50;
+            await page.rootInstance.setExpandedContentStyle(transitionEvent, page.rootInstance.expandedContentEl);
+            expect(page.rootInstance.expandedContentEl.className.split(" ")).toContain("expanded-content-opened");
+            expect(page.rootInstance.expandedContentEl.style.height).toBe("auto");
+        });
+        it("should not set height and .expanded-content-opened on expanded content", async () => {
+            const transitionEvent = {
+                propertyName: "height",
+            };
+            const page = await newSpecPage({
+                components: [Accordion],
+                html: `
       <ic-accordion heading="Accordion 1" >
         <ic-typography variant="body">
           This is an example of the main body text.
         </ic-typography>
       </ic-accordion>`,
-      });
-      const accordionExpanded = page.root.shadowRoot.querySelector(".expanded-content");
-      page.rootInstance.expandedContentEl = accordionExpanded;
-      page.rootInstance.expandedContentEl.clientHeight = 0;
-      await page.rootInstance.setExpandedContentStyle(transitionEvent, page.rootInstance.expandedContentEl);
-      expect(page.rootInstance.expandedContentEl.className.split(" ")).not.toContain("expanded-content-opened");
-      expect(page.rootInstance.expandedContentEl.style.height).toBe("");
-      await page.rootInstance.disconnectedCallback();
-    });
-    it("should set visibility on expanded content to hidden", async () => {
-      const transitionEvent = {
-        propertyName: "height",
-      };
-      const page = await newSpecPage({
-        components: [Accordion],
-        html: `
+            });
+            const accordionExpanded = page.root.shadowRoot.querySelector(".expanded-content");
+            page.rootInstance.expandedContentEl = accordionExpanded;
+            page.rootInstance.expandedContentEl.clientHeight = 0;
+            await page.rootInstance.setExpandedContentStyle(transitionEvent, page.rootInstance.expandedContentEl);
+            expect(page.rootInstance.expandedContentEl.className.split(" ")).not.toContain("expanded-content-opened");
+            expect(page.rootInstance.expandedContentEl.style.height).toBe("");
+            await page.rootInstance.disconnectedCallback();
+        });
+        it("should set visibility on expanded content to hidden", async () => {
+            const transitionEvent = {
+                propertyName: "height",
+            };
+            const page = await newSpecPage({
+                components: [Accordion],
+                html: `
         <ic-accordion heading="Accordion 1" >
           <ic-typography variant="body">
             This is an example of the main body text.
           </ic-typography>
         </ic-accordion>`,
-      });
-      const accordionExpanded = page.root.shadowRoot.querySelector(".expanded-content");
-      page.rootInstance.expandedContentEl = accordionExpanded;
-      page.rootInstance.expandedContentEl.clientHeight = 0;
-      await page.rootInstance.hideExpandedContent(transitionEvent, page.rootInstance.expandedContentEl);
-      expect(page.rootInstance.expandedContentEl.style.getPropertyValue("--ic-expanded-content-visiblity")).toBe("hidden");
-    });
-    it("should set visibility to undefined if client height is greater than 0", async () => {
-      const transitionEvent = {
-        propertyName: "height",
-      };
-      const page = await newSpecPage({
-        components: [Accordion],
-        html: `
+            });
+            const accordionExpanded = page.root.shadowRoot.querySelector(".expanded-content");
+            page.rootInstance.expandedContentEl = accordionExpanded;
+            page.rootInstance.expandedContentEl.clientHeight = 0;
+            await page.rootInstance.hideExpandedContent(transitionEvent, page.rootInstance.expandedContentEl);
+            expect(page.rootInstance.expandedContentEl.style.getPropertyValue("--ic-expanded-content-visiblity")).toBe("hidden");
+        });
+        it("should set visibility to undefined if client height is greater than 0", async () => {
+            const transitionEvent = {
+                propertyName: "height",
+            };
+            const page = await newSpecPage({
+                components: [Accordion],
+                html: `
         <ic-accordion heading="Accordion 1" >
           <ic-typography variant="body">
             This is an example of the main body text.
           </ic-typography>
         </ic-accordion>`,
-      });
-      const accordionExpanded = page.root.shadowRoot.querySelector(".expanded-content");
-      page.rootInstance.expandedContentEl = accordionExpanded;
-      page.rootInstance.expandedContentEl.clientHeight = 50;
-      await page.rootInstance.hideExpandedContent(transitionEvent, page.rootInstance.expandedContentEl);
-      expect(page.rootInstance.expandedContentEl.style.getPropertyValue("--ic-expanded-content-visiblity")).toBe("");
-    });
-    it("should call 'setFocus' when accordion can be focused", async () => {
-      const page = await newSpecPage({
-        components: [Accordion],
-        html: `
+            });
+            const accordionExpanded = page.root.shadowRoot.querySelector(".expanded-content");
+            page.rootInstance.expandedContentEl = accordionExpanded;
+            page.rootInstance.expandedContentEl.clientHeight = 50;
+            await page.rootInstance.hideExpandedContent(transitionEvent, page.rootInstance.expandedContentEl);
+            expect(page.rootInstance.expandedContentEl.style.getPropertyValue("--ic-expanded-content-visiblity")).toBe("");
+        });
+        it("should call 'setFocus' when accordion can be focused", async () => {
+            const page = await newSpecPage({
+                components: [Accordion],
+                html: `
         <ic-accordion heading="Accordion 1" >
           <ic-typography variant="body">
             This is an example of the main body text.
           </ic-typography>
         </ic-accordion>`,
-      });
-      //Can't expect anything in this test - this is to increase code coverage only
-      await page.rootInstance.setFocus().toHaveBeenCalled;
-    });
-    it("should call setExpandedContentStyle when transitionend in animateExpandedContent and expanded is true", async () => {
-      const page = await newSpecPage({
-        components: [Accordion],
-        html: `
+            });
+            //Can't expect anything in this test - this is to increase code coverage only
+            await page.rootInstance.setFocus().toHaveBeenCalled;
+        });
+        it("should call setExpandedContentStyle when transitionend in animateExpandedContent and expanded is true", async () => {
+            const page = await newSpecPage({
+                components: [Accordion],
+                html: `
         <ic-accordion heading="Accordion 1" >
           <ic-typography variant="body">
             This is an example of the main body text.
           </ic-typography>
         </ic-accordion>`,
-      });
-      const setExpandedContentStyleSpy = jest.spyOn(page.rootInstance, "setExpandedContentStyle");
-      const accordionExpanded = page.root.shadowRoot.querySelector(".expanded-content");
-      page.rootInstance.expandedContentEl = accordionExpanded;
-      page.rootInstance.expandedContentEl.scrollHeight = 50;
-      page.rootInstance.expanded = true;
-      await page.rootInstance.animateExpandedContent();
-      const event = new Event("transitionend");
-      page.rootInstance.expandedContentEl.dispatchEvent(event);
-      expect(setExpandedContentStyleSpy).toHaveBeenCalled();
-    });
-    it("should call hideExpandedContent when transitionend in animateExpandedContent and expanded is false", async () => {
-      const page = await newSpecPage({
-        components: [Accordion],
-        html: `
+            });
+            const setExpandedContentStyleSpy = jest.spyOn(page.rootInstance, "setExpandedContentStyle");
+            const accordionExpanded = page.root.shadowRoot.querySelector(".expanded-content");
+            page.rootInstance.expandedContentEl = accordionExpanded;
+            page.rootInstance.expandedContentEl.scrollHeight = 50;
+            page.rootInstance.expanded = true;
+            await page.rootInstance.animateExpandedContent();
+            const event = new Event("transitionend");
+            page.rootInstance.expandedContentEl.dispatchEvent(event);
+            expect(setExpandedContentStyleSpy).toHaveBeenCalled();
+        });
+        it("should call hideExpandedContent when transitionend in animateExpandedContent and expanded is false", async () => {
+            const page = await newSpecPage({
+                components: [Accordion],
+                html: `
         <ic-accordion heading="Accordion 1" >
           <ic-typography variant="body">
             This is an example of the main body text.
           </ic-typography>
         </ic-accordion>`,
-      });
-      const hideExpandedContentSpy = jest.spyOn(page.rootInstance, "hideExpandedContent");
-      const accordionExpanded = page.root.shadowRoot.querySelector(".expanded-content");
-      page.rootInstance.expandedContentEl = accordionExpanded;
-      page.rootInstance.expandedContentEl.scrollHeight = 50;
-      page.rootInstance.expanded = false;
-      await page.rootInstance.animateExpandedContent();
-      const event = new Event("transitionend");
-      page.rootInstance.expandedContentEl.dispatchEvent(event);
-      expect(hideExpandedContentSpy).toHaveBeenCalled();
+            });
+            const hideExpandedContentSpy = jest.spyOn(page.rootInstance, "hideExpandedContent");
+            const accordionExpanded = page.root.shadowRoot.querySelector(".expanded-content");
+            page.rootInstance.expandedContentEl = accordionExpanded;
+            page.rootInstance.expandedContentEl.scrollHeight = 50;
+            page.rootInstance.expanded = false;
+            await page.rootInstance.animateExpandedContent();
+            const event = new Event("transitionend");
+            page.rootInstance.expandedContentEl.dispatchEvent(event);
+            expect(hideExpandedContentSpy).toHaveBeenCalled();
+        });
     });
-  });
 });
 //# sourceMappingURL=ic-accordion.spec.js.map