@ukic/web-components 3.29.0 → 3.30.0

package/components/ic-accordion.js

@@ -46,16 +46,9 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
         };
         // Set accordion animation
         this.setAccordionAnimation = (el, duration, property, delay) => {
-            if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
-                el.style.transitionDuration = `${duration}ms`;
-                el.style.transitionProperty = property;
-                el.style.transitionDelay = delay;
-            }
-            else {
-                el.style.transitionDuration = "0ms";
-                el.style.transitionProperty = "none";
-                el.style.transitionDelay = "0ms";
-            }
+            el.style.transitionDuration = `${duration}ms`;
+            el.style.transitionProperty = property;
+            el.style.transitionTimingFunction = delay;
         };
         this.setExpandedContentStyle = (ev, expandedContent) => {
             if (ev.propertyName === "height" && expandedContent.clientHeight > 0) {
@@ -69,30 +62,52 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             }
         };
         this.animateExpandedContent = () => {
-            if (this.expandedContentEl) {
-                const expandedContentEl = this.expandedContentEl;
-                const elementHeight = expandedContentEl.scrollHeight;
-                if (elementHeight > 0 && this.expanded) {
-                    expandedContentEl.style.setProperty(this.CONTENT_VISIBILITY_PROPERTY, "visible");
-                    expandedContentEl.style.height = `${elementHeight}px`;
-                    this.setAccordionAnimation(expandedContentEl, "300", "height", "ease-out");
-                    expandedContentEl.addEventListener("transitionend", (e) => {
-                        this.setExpandedContentStyle(e, expandedContentEl);
-                    });
-                }
-                else if (!this.expanded) {
-                    const expandedContentEl = this.expandedContentEl;
-                    expandedContentEl.style.height = `${expandedContentEl.scrollHeight}px`;
-                    if (expandedContentEl.scrollHeight > 0 && !this.expanded) {
-                        expandedContentEl.style.height = "0";
-                        this.setAccordionAnimation(expandedContentEl, "300", "height", "ease-in");
-                        expandedContentEl.classList.remove(EXPANDED_CONTENT_OPENED_CLASS);
-                    }
-                    expandedContentEl.addEventListener("transitionend", (e) => {
-                        this.hideExpandedContent(e, expandedContentEl);
-                    });
-                }
+            const expandedContentEl = this.expandedContentEl;
+            if (!expandedContentEl)
+                return;
+            const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+            if (this.expanded) {
+                this.expandContent(expandedContentEl, prefersReducedMotion);
+                return;
+            }
+            this.collapseContent(expandedContentEl, prefersReducedMotion);
+        };
+        this.expandContent = (expandedContentEl, prefersReducedMotion) => {
+            const elementHeight = expandedContentEl.scrollHeight;
+            if (elementHeight <= 0)
+                return;
+            expandedContentEl.style.setProperty(this.CONTENT_VISIBILITY_PROPERTY, "visible");
+            if (prefersReducedMotion) {
+                expandedContentEl.classList.add(EXPANDED_CONTENT_OPENED_CLASS);
+                expandedContentEl.style.height = "auto";
+                return;
+            }
+            expandedContentEl.style.height = `${elementHeight}px`;
+            this.setAccordionAnimation(expandedContentEl, "300", "height", "ease-out");
+            expandedContentEl.addEventListener("transitionend", (e) => {
+                this.setExpandedContentStyle(e, expandedContentEl);
+            }, { once: true });
+        };
+        this.collapseContent = (expandedContentEl, prefersReducedMotion) => {
+            const elementHeight = expandedContentEl.scrollHeight;
+            if (elementHeight <= 0)
+                return;
+            // Set the content panel as pixels from "auto" so it can be animated
+            expandedContentEl.style.height = `${elementHeight}px`;
+            if (prefersReducedMotion) {
+                expandedContentEl.style.height = "0";
+                expandedContentEl.classList.remove(EXPANDED_CONTENT_OPENED_CLASS);
+                expandedContentEl.style.setProperty(this.CONTENT_VISIBILITY_PROPERTY, "hidden");
+                return;
             }
+            requestAnimationFrame(() => {
+                expandedContentEl.style.height = "0";
+            });
+            this.setAccordionAnimation(expandedContentEl, "300", "height", "ease-in");
+            expandedContentEl.classList.remove(EXPANDED_CONTENT_OPENED_CLASS);
+            expandedContentEl.addEventListener("transitionend", (e) => {
+                this.hideExpandedContent(e, expandedContentEl);
+            }, { once: true });
         };
     }
     watchDisabledHandler() {
@@ -129,19 +144,19 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
     }
     render() {
         const { size, disabled, expanded, theme } = this;
-        return (h(Host, { key: '58ea81b0011f31da3d2d872244720011cb9028c8', id: this.accordionId, class: {
+        return (h(Host, { key: '840baa7799dc4c48c232a7dc170937bb563900d5', id: this.accordionId, class: {
                 ["ic-accordion-disabled"]: !!disabled,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, "aria-disabled": disabled ? "true" : "false" }, h("button", { key: '1a79e3d09955ed9bb07ddac08690ff157d98313d', ref: (el) => (this.accordionBtnHeading = el), id: `${this.accordionId}-button`, disabled: disabled, tabindex: disabled ? -1 : 0, class: {
+            }, "aria-disabled": disabled ? "true" : "false" }, h("button", { key: 'dce03cb5ba0f61a1d5b75ab1f648eaa970d5d78e', ref: (el) => (this.accordionBtnHeading = el), id: `${this.accordionId}-button`, disabled: disabled, tabindex: disabled ? -1 : 0, class: {
                 [`${size}`]: true,
                 ["section-button"]: true,
                 ["section-button-open"]: !!expanded && !disabled,
-            }, "aria-expanded": `${expanded}`, "aria-controls": "expanded-content-area", onClick: this.toggleExpanded }, isSlotUsed(this.el, "icon") && (h("div", { key: 'fc0e123d20dca395b2210f1ee14c7d89bb8e50ad', class: "icon-container" }, h("slot", { key: 'c2185289998b60967ec0a0097a3aad8b4a88f07c', name: "icon" }))), h("ic-typography", { key: '211d4d69f0468dbec907c6d32ec61adea8e6be61', variant: "subtitle-large", class: "section-header" }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (this.heading)), h("span", { key: 'e9f9ef3f67e85d33d0459c55d7307dcf522f0628', class: {
+            }, "aria-expanded": `${expanded}`, "aria-controls": "expanded-content-area", onClick: this.toggleExpanded }, isSlotUsed(this.el, "icon") && (h("div", { key: '3301b5e4526831e7e8a4400d775f55d99ec29d27', class: "icon-container" }, h("slot", { key: 'aa49cdcd343009d6d5b7e68f5c1013cd7fcc7638', name: "icon" }))), h("ic-typography", { key: 'da324db78e29a81f0c5bb7209f870b8832c25d67', variant: "subtitle-large", class: "section-header" }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (this.heading)), h("span", { key: '9eb1350c8ae3f9c940e1299a17b3b510ccb66ef6', class: {
                 ["expand-chevron"]: true,
                 ["content-expanded-chevron"]: !!expanded && !disabled,
-            }, "aria-hidden": "true", innerHTML: chevronIcon })), h("div", { key: '1e74fb0c312fc767a7518cbfcce5f55a90fc22a9', class: {
+            }, "aria-hidden": "true", innerHTML: chevronIcon })), h("div", { key: '9b04e4a6df4def67189609215cd4849890900146', class: {
                 ["expanded-content"]: true,
-            }, "aria-labelledby": `${this.accordionId}-button`, role: "region", "aria-hidden": `${!expanded}`, id: "expanded-content-area", ref: (el) => (this.expandedContentEl = el) }, h("div", { key: '04ed5966177cce63233f64e4e2d01bcbecbe10af', class: "expanded-content-inner" }, this.message ? (h("ic-typography", { variant: "body" }, this.message)) : (h("slot", null))))));
+            }, "aria-labelledby": `${this.accordionId}-button`, role: "region", "aria-hidden": `${!expanded}`, id: "expanded-content-area", ref: (el) => (this.expandedContentEl = el) }, h("div", { key: '594f88da687634cbbad7e12d8df21a3dc7961a64', class: "expanded-content-inner" }, this.message ? (h("ic-typography", { variant: "body" }, this.message)) : (h("slot", null))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ic-accordion.js.map

@@ -1 +1 @@
-{"file":"ic-accordion.js","mappings":"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","names":[],"sources":["src/components/ic-accordion/ic-accordion.css?tag=ic-accordion&encapsulation=shadow","src/components/ic-accordion/ic-accordion.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  border-bottom: var(--ic-space-1px) solid var(--ic-accordion-divider);\n}\n\n:host .expand-chevron {\n  color: var(--ic-accordion-chevron);\n}\n\n:host(.ic-accordion-disabled) .expand-chevron {\n  color: var(--ic-accordion-chevron-disabled);\n}\n\n.section-button.small {\n  padding: var(--ic-space-xxs) var(--ic-space-xs);\n}\n\n.section-button.large {\n  padding: var(--ic-space-sm) var(--ic-space-xs);\n}\n\n:host(:first-of-type) {\n  border-top: var(--ic-space-1px) solid var(--ic-accordion-divider);\n}\n\n:focus {\n  outline: none;\n}\n\n.section-button {\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: var(--ic-space-xs);\n  font-weight: var(--ic-font-weight-bold);\n  border: none;\n}\n\n.section-header {\n  --ic-typography-color: var(--ic-accordion-heading-text);\n\n  color: var(--ic-accordion-heading-text);\n  text-align: left;\n  flex: 1 0;\n}\n\n:host(.ic-accordion-disabled) .section-header {\n  --ic-typography-color: var(--ic-accordion-heading-text-disabled);\n\n  color: var(--ic-accordion-heading-text-disabled);\n}\n\nbutton:hover {\n  background-color: var(--ic-accordion-background-hover);\n  cursor: pointer;\n}\n\nbutton:active {\n  background-color: var(--ic-accordion-background-pressed);\n}\n\nbutton:focus {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-transition-duration-fast);\n}\n\nbutton:disabled {\n  pointer-events: none;\n}\n\n.icon-container {\n  margin: 0 var(--ic-space-xs) 0 0;\n  display: flex;\n  align-items: center;\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n  color: var(--ic-accordion-icon);\n}\n\n:host(.ic-accordion-disabled) .icon-container {\n  color: var(--ic-accordion-icon-disabled);\n}\n\n::slotted(svg) {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n}\n\n.expand-chevron {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n  margin-left: calc(var(--ic-space-xl) + var(--ic-space-xs));\n  transform: rotate(90deg);\n  justify-self: end;\n}\n\n.content-expanded-chevron {\n  transform: rotate(-90deg);\n}\n\n.expanded-content {\n  --ic-typography-color: var(--ic-accordion-body-text);\n\n  color: var(--ic-accordion-body-text);\n  height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  visibility: var(--ic-expanded-content-visibility, hidden);\n}\n\n.expanded-content-inner {\n  padding: var(--ic-space-xs);\n}\n\n.expanded-content-opened {\n  overflow: visible;\n}\n\n@media (forced-colors: active) {\n  button:focus {\n    border: var(--ic-border-hc) !important;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  button:focus {\n    transition: none;\n  }\n}\n","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, removeDisabledFalse } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\nlet accordionIds = 0;\nconst EXPANDED_CONTENT_OPENED_CLASS = \"expanded-content-opened\";\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-visibility\";\n\n  @Element() el: HTMLIcAccordionElement;\n\n  /**\n   * If `true`, the accordion will be disabled.\n   */\n  @Prop() disabled?: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\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 = \"medium\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\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    this.accordionBtnHeading?.focus();\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  disconnectedCallback(): void {\n    const expandedContentEl = this.expandedContentEl;\n    if (expandedContentEl) {\n      expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.setExpandedContentStyle(e, expandedContentEl),\n        true\n      );\n      expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.hideExpandedContent(e, 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 && this.expandedContentEl) {\n      this.expandedContentEl.style.height = \"auto\";\n      this.expandedContentEl.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"visible\"\n      );\n      this.expandedContentEl.classList.add(EXPANDED_CONTENT_OPENED_CLASS);\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    if (!window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n      el.style.transitionDuration = `${duration}ms`;\n      el.style.transitionProperty = property;\n      el.style.transitionDelay = delay;\n    } else {\n      el.style.transitionDuration = \"0ms\";\n      el.style.transitionProperty = \"none\";\n      el.style.transitionDelay = \"0ms\";\n    }\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_CLASS);\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    if (this.expandedContentEl) {\n      const expandedContentEl = this.expandedContentEl;\n      const elementHeight = expandedContentEl.scrollHeight;\n      if (elementHeight > 0 && this.expanded) {\n        expandedContentEl.style.setProperty(\n          this.CONTENT_VISIBILITY_PROPERTY,\n          \"visible\"\n        );\n        expandedContentEl.style.height = `${elementHeight}px`;\n        this.setAccordionAnimation(\n          expandedContentEl,\n          \"300\",\n          \"height\",\n          \"ease-out\"\n        );\n\n        expandedContentEl.addEventListener(\n          \"transitionend\",\n          (e: TransitionEvent) => {\n            this.setExpandedContentStyle(e, expandedContentEl);\n          }\n        );\n      } else if (!this.expanded) {\n        const expandedContentEl = this.expandedContentEl;\n        expandedContentEl.style.height = `${expandedContentEl.scrollHeight}px`;\n        if (expandedContentEl.scrollHeight > 0 && !this.expanded) {\n          expandedContentEl.style.height = \"0\";\n          this.setAccordionAnimation(\n            expandedContentEl,\n            \"300\",\n            \"height\",\n            \"ease-in\"\n          );\n          expandedContentEl.classList.remove(EXPANDED_CONTENT_OPENED_CLASS);\n        }\n        expandedContentEl.addEventListener(\"transitionend\", (e) => {\n          this.hideExpandedContent(e, expandedContentEl);\n        });\n      }\n    }\n  };\n\n  render() {\n    const { size, disabled, expanded, theme } = this;\n    return (\n      <Host\n        id={this.accordionId}\n        class={{\n          [\"ic-accordion-disabled\"]: !!disabled,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\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            {this.message ? (\n              <ic-typography variant=\"body\">{this.message}</ic-typography>\n            ) : (\n              <slot />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-accordion.js","mappings":"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","names":[],"sources":["src/components/ic-accordion/ic-accordion.css?tag=ic-accordion&encapsulation=shadow","src/components/ic-accordion/ic-accordion.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  border-bottom: var(--ic-space-1px) solid var(--ic-accordion-divider);\n}\n\n:host .expand-chevron {\n  color: var(--ic-accordion-chevron);\n}\n\n:host(.ic-accordion-disabled) .expand-chevron {\n  color: var(--ic-accordion-chevron-disabled);\n}\n\n.section-button.small {\n  padding: var(--ic-space-xxs) var(--ic-space-xs);\n}\n\n.section-button.large {\n  padding: var(--ic-space-sm) var(--ic-space-xs);\n}\n\n:host(:first-of-type) {\n  border-top: var(--ic-space-1px) solid var(--ic-accordion-divider);\n}\n\n:focus {\n  outline: none;\n}\n\n.section-button {\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: var(--ic-space-xs);\n  font-weight: var(--ic-font-weight-bold);\n  border: none;\n}\n\n.section-header {\n  --ic-typography-color: var(--ic-accordion-heading-text);\n\n  color: var(--ic-accordion-heading-text);\n  text-align: left;\n  flex: 1 0;\n}\n\n:host(.ic-accordion-disabled) .section-header {\n  --ic-typography-color: var(--ic-accordion-heading-text-disabled);\n\n  color: var(--ic-accordion-heading-text-disabled);\n}\n\nbutton:hover {\n  background-color: var(--ic-accordion-background-hover);\n  cursor: pointer;\n}\n\nbutton:active {\n  background-color: var(--ic-accordion-background-pressed);\n}\n\nbutton:focus {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-transition-duration-fast);\n}\n\nbutton:disabled {\n  pointer-events: none;\n}\n\n.icon-container {\n  margin: 0 var(--ic-space-xs) 0 0;\n  display: flex;\n  align-items: center;\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n  color: var(--ic-accordion-icon);\n}\n\n:host(.ic-accordion-disabled) .icon-container {\n  color: var(--ic-accordion-icon-disabled);\n}\n\n::slotted(svg) {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n}\n\n.expand-chevron {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n  margin-left: calc(var(--ic-space-xl) + var(--ic-space-xs));\n  transform: rotate(90deg);\n  justify-self: end;\n}\n\n.content-expanded-chevron {\n  transform: rotate(-90deg);\n}\n\n.expanded-content {\n  --ic-typography-color: var(--ic-accordion-body-text);\n\n  color: var(--ic-accordion-body-text);\n  height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  visibility: var(--ic-expanded-content-visibility, hidden);\n}\n\n.expanded-content-inner {\n  padding: var(--ic-space-xs);\n}\n\n.expanded-content-opened {\n  overflow: visible;\n}\n\n@media (forced-colors: active) {\n  button:focus {\n    border: var(--ic-border-hc) !important;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  button:focus {\n    transition: none;\n  }\n}\n","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, removeDisabledFalse } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\nlet accordionIds = 0;\nconst EXPANDED_CONTENT_OPENED_CLASS = \"expanded-content-opened\";\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-visibility\";\n\n  @Element() el: HTMLIcAccordionElement;\n\n  /**\n   * If `true`, the accordion will be disabled.\n   */\n  @Prop() disabled?: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\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 = \"medium\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\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    this.accordionBtnHeading?.focus();\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  disconnectedCallback(): void {\n    const expandedContentEl = this.expandedContentEl;\n    if (expandedContentEl) {\n      expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.setExpandedContentStyle(e, expandedContentEl),\n        true\n      );\n      expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.hideExpandedContent(e, 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 && this.expandedContentEl) {\n      this.expandedContentEl.style.height = \"auto\";\n      this.expandedContentEl.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"visible\"\n      );\n      this.expandedContentEl.classList.add(EXPANDED_CONTENT_OPENED_CLASS);\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.transitionTimingFunction = 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_CLASS);\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 expandedContentEl = this.expandedContentEl;\n    if (!expandedContentEl) return;\n\n    const prefersReducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    ).matches;\n\n    if (this.expanded) {\n      this.expandContent(expandedContentEl, prefersReducedMotion);\n      return;\n    }\n\n    this.collapseContent(expandedContentEl, prefersReducedMotion);\n  };\n\n  private expandContent = (\n    expandedContentEl: HTMLDivElement,\n    prefersReducedMotion: boolean\n  ) => {\n    const elementHeight = expandedContentEl.scrollHeight;\n    if (elementHeight <= 0) return;\n\n    expandedContentEl.style.setProperty(\n      this.CONTENT_VISIBILITY_PROPERTY,\n      \"visible\"\n    );\n\n    if (prefersReducedMotion) {\n      expandedContentEl.classList.add(EXPANDED_CONTENT_OPENED_CLASS);\n      expandedContentEl.style.height = \"auto\";\n      return;\n    }\n\n    expandedContentEl.style.height = `${elementHeight}px`;\n\n    this.setAccordionAnimation(expandedContentEl, \"300\", \"height\", \"ease-out\");\n\n    expandedContentEl.addEventListener(\n      \"transitionend\",\n      (e: TransitionEvent) => {\n        this.setExpandedContentStyle(e, expandedContentEl);\n      },\n      { once: true }\n    );\n  };\n\n  private collapseContent = (\n    expandedContentEl: HTMLDivElement,\n    prefersReducedMotion: boolean\n  ) => {\n    const elementHeight = expandedContentEl.scrollHeight;\n\n    if (elementHeight <= 0) return;\n\n    // Set the content panel as pixels from \"auto\" so it can be animated\n    expandedContentEl.style.height = `${elementHeight}px`;\n\n    if (prefersReducedMotion) {\n      expandedContentEl.style.height = \"0\";\n      expandedContentEl.classList.remove(EXPANDED_CONTENT_OPENED_CLASS);\n      expandedContentEl.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"hidden\"\n      );\n      return;\n    }\n\n    requestAnimationFrame(() => {\n      expandedContentEl.style.height = \"0\";\n    });\n\n    this.setAccordionAnimation(expandedContentEl, \"300\", \"height\", \"ease-in\");\n    expandedContentEl.classList.remove(EXPANDED_CONTENT_OPENED_CLASS);\n    expandedContentEl.addEventListener(\n      \"transitionend\",\n      (e) => {\n        this.hideExpandedContent(e, expandedContentEl);\n      },\n      { once: true }\n    );\n  };\n\n  render() {\n    const { size, disabled, expanded, theme } = this;\n    return (\n      <Host\n        id={this.accordionId}\n        class={{\n          [\"ic-accordion-disabled\"]: !!disabled,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\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            {this.message ? (\n              <ic-typography variant=\"body\">{this.message}</ic-typography>\n            ) : (\n              <slot />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}