@dso-toolkit/core 62.17.0 → 62.19.0

package/dist/collection/components/dropdown-menu/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createPopper, Placement, Instance as PopperInstance } from \"@popperjs/core\";\r\nimport { h, Component, Element, Host, Prop, Watch, Listen } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n  tag: \"dso-dropdown-menu\",\r\n  styleUrl: \"dropdown-menu.scss\",\r\n  shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n  /**\r\n   * Whether the menu is open or closed.\r\n   * This attribute is reflected and mutable.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Alignment of the dropdown\r\n   */\r\n  @Prop()\r\n  dropdownAlign: \"left\" | \"right\" = \"left\";\r\n\r\n  /**\r\n   * Space between button and dropdown options\r\n   */\r\n  @Prop()\r\n  dropdownOptionsOffset = 2;\r\n\r\n  /**\r\n   * Whether the menu is checkable.\r\n   */\r\n  @Prop()\r\n  checkable = false;\r\n\r\n  /**\r\n   * Selector for the element the dropdown options should not be overflowing.\r\n   */\r\n  @Prop()\r\n  boundary?: string;\r\n\r\n  /**\r\n   * Force placement of dropdown.\r\n   *\r\n   * This property overrides `dropdownAlign`.\r\n   */\r\n  @Prop()\r\n  placement?: Placement;\r\n\r\n  /**\r\n   * Set position strategy of dropdown options\r\n   */\r\n  @Prop()\r\n  strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n  @Watch(\"placement\")\r\n  @Watch(\"dropdownAlign\")\r\n  watchPosition() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n    });\r\n  }\r\n\r\n  @Watch(\"dropdownOptionsOffset\")\r\n  watchOptionsOffset() {\r\n    this.popper?.setOptions({\r\n      modifiers: [\r\n        {\r\n          name: \"offset\",\r\n          options: {\r\n            offset: [0, this.dropdownOptionsOffset],\r\n          },\r\n        },\r\n      ],\r\n    });\r\n  }\r\n\r\n  @Watch(\"strategy\")\r\n  watchStrategy() {\r\n    this.setStrategy();\r\n  }\r\n\r\n  private setStrategy() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n      this.popper.setOptions({\r\n        strategy: this.strategy,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    let element: Element | null = this.host;\r\n\r\n    const boundary = this.boundary || document;\r\n\r\n    while (element && element.parentNode !== boundary) {\r\n      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n      if (element !== null && hasOverflow(element)) {\r\n        this.popper.setOptions({\r\n          strategy: \"fixed\",\r\n        });\r\n\r\n        return;\r\n      }\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      strategy: \"absolute\",\r\n    });\r\n  }\r\n\r\n  @Element()\r\n  host!: HTMLDsoDropdownMenuElement;\r\n\r\n  private popper: PopperInstance | undefined;\r\n\r\n  get button(): HTMLButtonElement {\r\n    const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n    if (!(button instanceof HTMLButtonElement)) {\r\n      throw new ReferenceError(\"Mandatory toggle button not found\");\r\n    }\r\n\r\n    return button;\r\n  }\r\n\r\n  private tabbables(withButton: boolean): FocusableElement[] {\r\n    const tabbables = tabbable(this.host);\r\n\r\n    return withButton ? tabbables : tabbables.filter((element) => element !== this.button);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n    this.button.setAttribute(\"aria-expanded\", \"false\");\r\n    if (!this.button.id) {\r\n      this.button.id = uuidv4();\r\n    }\r\n\r\n    const options = this.host.querySelector(\".dso-dropdown-options\");\r\n    if (!options) {\r\n      throw new ReferenceError(\"Dropdown options not found\");\r\n    }\r\n\r\n    options.setAttribute(\"role\", \"menu\");\r\n    options.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n    for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n      ul.setAttribute(\"role\", \"group\");\r\n      for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n        li.setAttribute(\"role\", \"none\");\r\n      }\r\n    }\r\n\r\n    if (this.popper) {\r\n      return;\r\n    }\r\n\r\n    const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n    if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n      throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n    }\r\n\r\n    this.popper = createPopper(this.button, dropdownOptionsElement, {\r\n      placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n      modifiers: [\r\n        {\r\n          name: \"offset\",\r\n          options: {\r\n            offset: [0, this.dropdownOptionsOffset],\r\n          },\r\n        },\r\n        {\r\n          name: \"preventOverflow\",\r\n          options: {\r\n            boundary: this.boundary ? document.querySelector(this.boundary) : null,\r\n          },\r\n          enabled: this.boundary !== undefined,\r\n        },\r\n      ],\r\n    });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setStrategy();\r\n    if (this.open) {\r\n      this.popper?.update();\r\n    }\r\n\r\n    for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n      for (const tab of tabbable(li)) {\r\n        tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n        if (this.checkable) {\r\n          tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n        }\r\n      }\r\n    }\r\n\r\n    this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n  }\r\n\r\n  @Listen(\"click\", { target: \"window\" })\r\n  onClick(event: MouseEvent) {\r\n    const composedPath = event.composedPath();\r\n\r\n    if (this.isToggleButtonEvent(composedPath)) {\r\n      this.open = !this.open;\r\n    } else if (this.open && this.isMenuItemEvent(composedPath)) {\r\n      this.open = false;\r\n    }\r\n  }\r\n\r\n  private isToggleButtonEvent(composedPath: EventTarget[]) {\r\n    return composedPath.includes(this.button);\r\n  }\r\n\r\n  private isMenuItemEvent(composedPath: EventTarget[]) {\r\n    return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.popper?.destroy();\r\n  }\r\n\r\n  private focusOutListener = (event: FocusEvent) => {\r\n    if (\r\n      this.open &&\r\n      (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))\r\n    ) {\r\n      this.open = false;\r\n    }\r\n  };\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.defaultPrevented || !this.open) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"Tab\":\r\n        if (event.shiftKey) {\r\n          this.tabInPopup(this.tabbables(true), -1);\r\n        } else {\r\n          this.tabInPopup(this.tabbables(true), 1);\r\n        }\r\n\r\n        break;\r\n      case \"ArrowDown\":\r\n        this.tabInPopup(this.tabbables(false), 1);\r\n        break;\r\n\r\n      case \"ArrowUp\":\r\n        this.tabInPopup(this.tabbables(false), -1);\r\n        break;\r\n\r\n      case \"Escape\":\r\n        this.escape();\r\n        break;\r\n\r\n      case \" \":\r\n        if (event.target instanceof HTMLElement) {\r\n          event.target.click();\r\n        }\r\n\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  }\r\n\r\n  private tabInPopup(tabbables: FocusableElement[], direction: number) {\r\n    const currentIndex = tabbables.findIndex((e) => e === getActiveElement());\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= tabbables.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = tabbables.length - 1;\r\n    }\r\n\r\n    tabbables[nextIndex]?.focus();\r\n  }\r\n\r\n  private escape = () => {\r\n    this.button.focus();\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host onFocusout={this.focusOutListener}>\r\n        <slot name=\"toggle\" />\r\n        <div hidden={!this.open}>\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createPopper, Placement, Instance as PopperInstance } from \"@popperjs/core\";\r\nimport { h, Component, Element, Host, Prop, Watch, Listen } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n  tag: \"dso-dropdown-menu\",\r\n  styleUrl: \"dropdown-menu.scss\",\r\n  shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n  /**\r\n   * Whether the menu is open or closed.\r\n   * This attribute is reflected and mutable.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Alignment of the dropdown\r\n   */\r\n  @Prop()\r\n  dropdownAlign: \"left\" | \"right\" = \"left\";\r\n\r\n  /**\r\n   * Space between button and dropdown options\r\n   */\r\n  @Prop()\r\n  dropdownOptionsOffset = 2;\r\n\r\n  /**\r\n   * Whether the menu is checkable.\r\n   */\r\n  @Prop()\r\n  checkable = false;\r\n\r\n  /**\r\n   * Selector for the element the dropdown options should not be overflowing.\r\n   */\r\n  @Prop()\r\n  boundary?: string;\r\n\r\n  /**\r\n   * Force placement of dropdown.\r\n   *\r\n   * This property overrides `dropdownAlign`.\r\n   */\r\n  @Prop()\r\n  placement?: Placement;\r\n\r\n  /**\r\n   * Set position strategy of dropdown options\r\n   */\r\n  @Prop()\r\n  strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n  @Watch(\"placement\")\r\n  @Watch(\"dropdownAlign\")\r\n  watchPosition() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n    });\r\n  }\r\n\r\n  @Watch(\"dropdownOptionsOffset\")\r\n  watchOptionsOffset() {\r\n    this.popper?.setOptions({\r\n      modifiers: [\r\n        {\r\n          name: \"offset\",\r\n          options: {\r\n            offset: [0, this.dropdownOptionsOffset],\r\n          },\r\n        },\r\n      ],\r\n    });\r\n  }\r\n\r\n  @Watch(\"strategy\")\r\n  watchStrategy() {\r\n    this.setStrategy();\r\n  }\r\n\r\n  private setStrategy() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n      this.popper.setOptions({\r\n        strategy: this.strategy,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    let element: Element | null = this.host;\r\n\r\n    const boundary = this.boundary || document;\r\n\r\n    while (element && element.parentNode !== boundary) {\r\n      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n      if (element !== null && hasOverflow(element)) {\r\n        this.popper.setOptions({\r\n          strategy: \"fixed\",\r\n        });\r\n\r\n        return;\r\n      }\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      strategy: \"absolute\",\r\n    });\r\n  }\r\n\r\n  @Element()\r\n  host!: HTMLDsoDropdownMenuElement;\r\n\r\n  private popper: PopperInstance | undefined;\r\n\r\n  get button(): HTMLButtonElement {\r\n    const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n    if (!(button instanceof HTMLButtonElement)) {\r\n      throw new ReferenceError(\"Mandatory toggle button not found\");\r\n    }\r\n\r\n    return button;\r\n  }\r\n\r\n  private tabbables(withButton: boolean): FocusableElement[] {\r\n    const tabbables = tabbable(this.host);\r\n\r\n    return withButton ? tabbables : tabbables.filter((element) => element !== this.button);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n    this.button.setAttribute(\"aria-expanded\", \"false\");\r\n    if (!this.button.id) {\r\n      this.button.id = uuidv4();\r\n    }\r\n\r\n    const options = this.host.querySelector(\".dso-dropdown-options\");\r\n    if (!options) {\r\n      throw new ReferenceError(\"Dropdown options not found\");\r\n    }\r\n\r\n    options.setAttribute(\"role\", \"menu\");\r\n    options.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n    for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n      ul.setAttribute(\"role\", \"group\");\r\n      for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n        li.setAttribute(\"role\", \"none\");\r\n      }\r\n    }\r\n\r\n    if (this.popper) {\r\n      return;\r\n    }\r\n\r\n    const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n    if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n      throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n    }\r\n\r\n    this.popper = createPopper(this.button, dropdownOptionsElement, {\r\n      placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n      modifiers: [\r\n        {\r\n          name: \"offset\",\r\n          options: {\r\n            offset: [0, this.dropdownOptionsOffset],\r\n          },\r\n        },\r\n        {\r\n          name: \"preventOverflow\",\r\n          options: {\r\n            boundary: this.boundary ? document.querySelector(this.boundary) : null,\r\n          },\r\n          enabled: this.boundary !== undefined,\r\n        },\r\n      ],\r\n    });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setStrategy();\r\n    if (this.open) {\r\n      this.popper?.update();\r\n    }\r\n\r\n    for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n      for (const tab of tabbable(li)) {\r\n        tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n        if (this.checkable) {\r\n          tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n        }\r\n      }\r\n    }\r\n\r\n    this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n  }\r\n\r\n  @Listen(\"click\", { target: \"window\" })\r\n  onClick(event: MouseEvent) {\r\n    const composedPath = event.composedPath();\r\n\r\n    if (this.isToggleButtonEvent(composedPath)) {\r\n      this.open = !this.open;\r\n    } else if (this.open && this.isMenuItemEvent(composedPath)) {\r\n      this.open = false;\r\n    }\r\n  }\r\n\r\n  private isToggleButtonEvent(composedPath: EventTarget[]) {\r\n    return composedPath.includes(this.button);\r\n  }\r\n\r\n  private isMenuItemEvent(composedPath: EventTarget[]) {\r\n    return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.popper?.destroy();\r\n  }\r\n\r\n  private focusOutListener = (event: FocusEvent) => {\r\n    if (\r\n      this.open &&\r\n      (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))\r\n    ) {\r\n      this.open = false;\r\n    }\r\n  };\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.defaultPrevented || !this.open) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"Tab\":\r\n        if (event.shiftKey) {\r\n          this.tabInPopup(this.tabbables(true), -1);\r\n        } else {\r\n          this.tabInPopup(this.tabbables(true), 1);\r\n        }\r\n\r\n        break;\r\n      case \"ArrowDown\":\r\n        this.tabInPopup(this.tabbables(false), 1);\r\n        break;\r\n\r\n      case \"ArrowUp\":\r\n        this.tabInPopup(this.tabbables(false), -1);\r\n        break;\r\n\r\n      case \"Escape\":\r\n        this.escape();\r\n        break;\r\n\r\n      case \" \":\r\n        if (event.target instanceof HTMLElement) {\r\n          event.target.click();\r\n        }\r\n\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  }\r\n\r\n  private tabInPopup(tabbables: FocusableElement[], direction: number) {\r\n    const currentIndex = tabbables.findIndex((e) => e === getActiveElement());\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= tabbables.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = tabbables.length - 1;\r\n    }\r\n\r\n    tabbables[nextIndex]?.focus();\r\n  }\r\n\r\n  private escape = () => {\r\n    this.button.focus();\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host onFocusout={this.focusOutListener}>\r\n        <slot name=\"toggle\" />\r\n        <div hidden={!this.open}>\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/expandable/expandable.css

@@ -1,23 +1,22 @@
-:host {
-  display: block;
+:host([enable-animation]) {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 260ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-
-:host(.dso-hide) {
-  display: none;
+:host([enable-animation]) .slot-container {
+  overflow: hidden;
 }
 
-:host(:not(.dso-animate-ready)) {
-  position: absolute;
-  visibility: hidden;
+:host(:not([enable-animation])) {
+  display: none;
 }
 
-:host([open]) {
-  position: inherit;
-  visibility: inherit;
+:host([open][enable-animation]) {
+  grid-template-rows: 1fr;
 }
 
-:host(:not([is-open])) {
-  overflow-y: hidden;
+:host([open]:not([enable-animation])) {
+  display: block;
 }
 
 *,

package/dist/collection/components/expandable/expandable.js

@@ -1,259 +1,182 @@
 import { h, Host, } from "@stencil/core";
-import anime from "animejs";
 import clsx from "clsx";
-import debounce from "debounce";
 export class Expandable {
-  constructor() {
-    this.open = undefined;
-    this.enableAnimation = false;
-    this.minimumHeight = undefined;
-    this.animationReady = false;
-    this.isOpen = this.open;
-  }
-  toggleOpen() {
-    if (this.enableAnimation) {
-      this.activateAnimation();
+    constructor() {
+        this.open = undefined;
+        this.enableAnimation = false;
+        this.minimumHeight = undefined;
+        this.isClosed = true;
     }
-  }
-  toggleEnableAnimation(enableAnimation) {
-    var _a;
-    if (enableAnimation) {
-      this.prepareAnimationResizeObserver();
-      this.activateObserver();
-    }
-    else {
-      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-      delete this.animeInstance;
-      this.host.removeAttribute("style");
-    }
-  }
-  componentDidLoad() {
-    if (this.enableAnimation) {
-      this.prepareAnimationResizeObserver();
-    }
-    this.activateObserver();
-  }
-  activateObserver() {
-    var _a;
-    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.host);
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  render() {
-    return (h(Host, { "aria-hidden": this.open ? "false" : "true", class: clsx({
-        "dso-animate-ready": this.enableAnimation && this.animationReady,
-        "dso-hide": !this.enableAnimation && !this.open,
-      }), "is-open": this.isOpen }, h("slot", null)));
-  }
-  prepareAnimationResizeObserver() {
-    this.resizeObserver = new ResizeObserver(debounce(([entry]) => {
-      if (!entry) {
-        throw new Error("No entry found");
-      }
-      // entry.contentRect does not include padding, so we use getBoundingClientRect.
-      const height = entry.target.getBoundingClientRect().height;
-      if (this.bodyHeight !== height) {
-        this.bodyHeight = height;
-      }
-      this.instantiateAnimation();
-    }, 150));
-  }
-  instantiateAnimation() {
-    var _a;
-    this.animeInstance = anime({
-      targets: this.host,
-      height: (_a = this.minimumHeight) !== null && _a !== void 0 ? _a : 0,
-      easing: "cubicBezier(0.4, 0, 0.2, 1)",
-      duration: 260,
-      autoplay: false,
-      direction: "normal",
-      changeBegin: () => {
-        this.dsoExpandableAnimationStart.emit({
-          currentOpen: !!this.open,
-          nextOpen: !this.open,
-        });
-      },
-      begin: () => {
-        if (this.open) {
-          this.host.style.visibility = "";
-          this.host.style.position = "";
-          this.host.style.bottom = "";
+    toggleOpen() {
+        if (!this.enableAnimation) {
+            this.isClosed = !this.open;
         }
-        else {
-          this.isOpen = false;
-        }
-      },
-      complete: () => {
-        this.host.style.height = "";
-        if (!this.open) {
-          this.host.style.visibility = "hidden";
-          this.host.style.position = "absolute";
-          this.host.style.bottom = "100%";
+    }
+    /**
+     * Listens to the transitionstart event
+     */
+    transitionstartHandler(e) {
+        if (e.propertyName === "grid-template-rows") {
+            this.dsoExpandableAnimationStart.emit({
+                currentOpen: !!this.open,
+                nextOpen: !this.open,
+            });
         }
-        else {
-          this.isOpen = true;
+    }
+    /**
+     * Listens to the transitionend event
+     */
+    transitionendHandler(e) {
+        if (e.propertyName === "grid-template-rows") {
+            this.isClosed = !this.open;
+            this.dsoExpandableAnimationEnd.emit({ bodyHeight: this.bodyHeight, open: !!this.open });
         }
-      },
-      changeComplete: () => {
-        this.dsoExpandableAnimationEnd.emit({ bodyHeight: this.bodyHeight, open: !!this.open });
-      },
-    });
-    if (!this.open) {
-      this.animeInstance.reverse();
-      this.animeInstance.play();
     }
-    if (this.host) {
-      this.host.style.height = "";
+    render() {
+        return (h(Host, { key: 'd8348c0356bc5ea3d8dffa0cc4d94e359dd05e5d', "aria-hidden": this.open ? "false" : "true", class: clsx({
+                "dso-animate-ready": this.enableAnimation,
+                "dso-hide": this.isClosed,
+            }) }, h("div", { key: '68682bdc2e77eb547f58d80d25011b9787b1870e', class: "slot-container" }, h("slot", { key: '2d1de148f3ea707ee757a85df8ac5931d7b6c44d' }))));
     }
-    this.animationReady = !!this.animeInstance;
-  }
-  activateAnimation() {
-    if (this.animeInstance) {
-      if (this.animeInstance.progress > 0 && this.animeInstance.progress < 100) {
-        this.animeInstance.reverse();
-      }
-      else {
-        if (this.open) {
-          this.animeInstance.direction = "reverse";
-          this.animeInstance.play();
-        }
-        else {
-          this.animeInstance.direction = "normal";
-          this.animeInstance.play();
-        }
-      }
+    static get is() { return "dso-expandable"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["expandable.scss"]
+        };
     }
-  }
-  static get is() { return "dso-expandable"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["expandable.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["expandable.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "open": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Set to `true` to expand the content."
-        },
-        "attribute": "open",
-        "reflect": true
-      },
-      "enableAnimation": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to `true` to show the content animated."
-        },
-        "attribute": "enable-animation",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "minimumHeight": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "When enableAnimation is set to `true`, this property specifies the height of this element at which the animation will expand from / collapse to"
-        },
-        "attribute": "minimum-height",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "animationReady": {},
-      "isOpen": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "dsoExpandableAnimationStart",
-        "name": "dsoExpandableAnimationStart",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Fired before expanding."
-        },
-        "complexType": {
-          "original": "ExpandableAnimationStartEvent",
-          "resolved": "ExpandableAnimationStartEvent",
-          "references": {
-            "ExpandableAnimationStartEvent": {
-              "location": "local",
-              "path": "/usr/src/app/packages/core/src/components/expandable/expandable.tsx",
-              "id": "src/components/expandable/expandable.tsx::ExpandableAnimationStartEvent"
-            }
-          }
-        }
-      }, {
-        "method": "dsoExpandableAnimationEnd",
-        "name": "dsoExpandableAnimationEnd",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Fired after expanding."
-        },
-        "complexType": {
-          "original": "ExpandableAnimationEndEvent",
-          "resolved": "ExpandableAnimationEndEvent",
-          "references": {
-            "ExpandableAnimationEndEvent": {
-              "location": "local",
-              "path": "/usr/src/app/packages/core/src/components/expandable/expandable.tsx",
-              "id": "src/components/expandable/expandable.tsx::ExpandableAnimationEndEvent"
+    static get styleUrls() {
+        return {
+            "$": ["expandable.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `true` to expand the content."
+                },
+                "attribute": "open",
+                "reflect": true
+            },
+            "enableAnimation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `true` to show the content animated."
+                },
+                "attribute": "enable-animation",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "minimumHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When enableAnimation is set to `true`, this property specifies the height of this element at which the animation will expand from / collapse to"
+                },
+                "attribute": "minimum-height",
+                "reflect": false
             }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "open",
-        "methodName": "toggleOpen"
-      }, {
-        "propName": "enableAnimation",
-        "methodName": "toggleEnableAnimation"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "isClosed": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoExpandableAnimationStart",
+                "name": "dsoExpandableAnimationStart",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired before expanding."
+                },
+                "complexType": {
+                    "original": "ExpandableAnimationStartEvent",
+                    "resolved": "ExpandableAnimationStartEvent",
+                    "references": {
+                        "ExpandableAnimationStartEvent": {
+                            "location": "local",
+                            "path": "/usr/src/app/packages/core/src/components/expandable/expandable.tsx",
+                            "id": "src/components/expandable/expandable.tsx::ExpandableAnimationStartEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoExpandableAnimationEnd",
+                "name": "dsoExpandableAnimationEnd",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired after expanding."
+                },
+                "complexType": {
+                    "original": "ExpandableAnimationEndEvent",
+                    "resolved": "ExpandableAnimationEndEvent",
+                    "references": {
+                        "ExpandableAnimationEndEvent": {
+                            "location": "local",
+                            "path": "/usr/src/app/packages/core/src/components/expandable/expandable.tsx",
+                            "id": "src/components/expandable/expandable.tsx::ExpandableAnimationEndEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "toggleOpen"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "transitionstart",
+                "method": "transitionstartHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "transitionend",
+                "method": "transitionendHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=expandable.js.map

package/dist/collection/components/expandable/expandable.js.map

@@ -1 +1 @@
-{"version":3,"file":"expandable.js","sourceRoot":"","sources":["../../../../src/components/expandable/expandable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  h,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n} from \"@stencil/core\";\r\nimport anime, { AnimeInstance } from \"animejs\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nexport interface ExpandableAnimationStartEvent {\r\n  currentOpen: boolean;\r\n  nextOpen: boolean;\r\n}\r\n\r\nexport interface ExpandableAnimationEndEvent {\r\n  bodyHeight: number | undefined;\r\n  open: boolean;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-expandable\",\r\n  styleUrl: \"expandable.scss\",\r\n  shadow: true,\r\n})\r\nexport class Expandable implements ComponentInterface {\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  private bodyHeight?: number;\r\n\r\n  private animeInstance?: AnimeInstance;\r\n\r\n  @Element()\r\n  host!: HTMLDsoExpandableElement;\r\n\r\n  /**\r\n   * Set to `true` to expand the content.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open?: boolean;\r\n\r\n  /**\r\n   * Set to `true` to show the content animated.\r\n   */\r\n  @Prop({ reflect: true })\r\n  enableAnimation = false;\r\n\r\n  /**\r\n   * When enableAnimation is set to `true`, this property specifies the height of this element at which the animation will expand from / collapse to\r\n   */\r\n  @Prop()\r\n  minimumHeight?: number;\r\n\r\n  @State()\r\n  animationReady = false;\r\n\r\n  @State()\r\n  isOpen = this.open;\r\n\r\n  @Watch(\"open\")\r\n  toggleOpen() {\r\n    if (this.enableAnimation) {\r\n      this.activateAnimation();\r\n    }\r\n  }\r\n\r\n  @Watch(\"enableAnimation\")\r\n  toggleEnableAnimation(enableAnimation: boolean) {\r\n    if (enableAnimation) {\r\n      this.prepareAnimationResizeObserver();\r\n      this.activateObserver();\r\n    } else {\r\n      this.resizeObserver?.disconnect();\r\n      delete this.animeInstance;\r\n      this.host.removeAttribute(\"style\");\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Fired before expanding.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoExpandableAnimationStart!: EventEmitter<ExpandableAnimationStartEvent>;\r\n\r\n  /**\r\n   * Fired after expanding.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoExpandableAnimationEnd!: EventEmitter<ExpandableAnimationEndEvent>;\r\n\r\n  componentDidLoad(): void {\r\n    if (this.enableAnimation) {\r\n      this.prepareAnimationResizeObserver();\r\n    }\r\n\r\n    this.activateObserver();\r\n  }\r\n\r\n  private activateObserver() {\r\n    this.resizeObserver?.observe(this.host);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        aria-hidden={this.open ? \"false\" : \"true\"}\r\n        class={clsx({\r\n          \"dso-animate-ready\": this.enableAnimation && this.animationReady,\r\n          \"dso-hide\": !this.enableAnimation && !this.open,\r\n        })}\r\n        is-open={this.isOpen}\r\n      >\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private prepareAnimationResizeObserver(): void {\r\n    this.resizeObserver = new ResizeObserver(\r\n      debounce(([entry]) => {\r\n        if (!entry) {\r\n          throw new Error(\"No entry found\");\r\n        }\r\n\r\n        // entry.contentRect does not include padding, so we use getBoundingClientRect.\r\n        const height = entry.target.getBoundingClientRect().height;\r\n\r\n        if (this.bodyHeight !== height) {\r\n          this.bodyHeight = height;\r\n        }\r\n\r\n        this.instantiateAnimation();\r\n      }, 150),\r\n    );\r\n  }\r\n\r\n  private instantiateAnimation(): void {\r\n    this.animeInstance = anime({\r\n      targets: this.host,\r\n      height: this.minimumHeight ?? 0,\r\n      easing: \"cubicBezier(0.4, 0, 0.2, 1)\",\r\n      duration: 260,\r\n      autoplay: false,\r\n      direction: \"normal\",\r\n      changeBegin: () => {\r\n        this.dsoExpandableAnimationStart.emit({\r\n          currentOpen: !!this.open,\r\n          nextOpen: !this.open,\r\n        });\r\n      },\r\n      begin: () => {\r\n        if (this.open) {\r\n          this.host.style.visibility = \"\";\r\n          this.host.style.position = \"\";\r\n          this.host.style.bottom = \"\";\r\n        } else {\r\n          this.isOpen = false;\r\n        }\r\n      },\r\n      complete: () => {\r\n        this.host.style.height = \"\";\r\n\r\n        if (!this.open) {\r\n          this.host.style.visibility = \"hidden\";\r\n          this.host.style.position = \"absolute\";\r\n          this.host.style.bottom = \"100%\";\r\n        } else {\r\n          this.isOpen = true;\r\n        }\r\n      },\r\n      changeComplete: () => {\r\n        this.dsoExpandableAnimationEnd.emit({ bodyHeight: this.bodyHeight, open: !!this.open });\r\n      },\r\n    });\r\n\r\n    if (!this.open) {\r\n      this.animeInstance.reverse();\r\n      this.animeInstance.play();\r\n    }\r\n\r\n    if (this.host) {\r\n      this.host.style.height = \"\";\r\n    }\r\n\r\n    this.animationReady = !!this.animeInstance;\r\n  }\r\n\r\n  private activateAnimation(): void {\r\n    if (this.animeInstance) {\r\n      if (this.animeInstance.progress > 0 && this.animeInstance.progress < 100) {\r\n        this.animeInstance.reverse();\r\n      } else {\r\n        if (this.open) {\r\n          this.animeInstance.direction = \"reverse\";\r\n          this.animeInstance.play();\r\n        } else {\r\n          this.animeInstance.direction = \"normal\";\r\n          this.animeInstance.play();\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"expandable.js","sourceRoot":"","sources":["../../../../src/components/expandable/expandable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,MAAM,CAAC;AAiBxB,MAAM,OAAO,UAAU;;;+BAgBH,KAAK;;wBAgBZ,IAAI;;IAPf,UAAU;QACR,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAC7B,CAAC;IACH,CAAC;IAiBD;;OAEG;IAEH,sBAAsB,CAAC,CAAkB;QACvC,IAAI,CAAC,CAAC,YAAY,KAAK,oBAAoB,EAAE,CAAC;YAC5C,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC;gBACpC,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;gBACxB,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI;aACrB,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED;;OAEG;IAEH,oBAAoB,CAAC,CAAkB;QACrC,IAAI,CAAC,CAAC,YAAY,KAAK,oBAAoB,EAAE,CAAC;YAC5C,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;YAC3B,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC1F,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,oEACU,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EACzC,KAAK,EAAE,IAAI,CAAC;gBACV,mBAAmB,EAAE,IAAI,CAAC,eAAe;gBACzC,UAAU,EAAE,IAAI,CAAC,QAAQ;aAC1B,CAAC;YAEF,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  h,\r\n  Host,\r\n  Listen,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nexport interface ExpandableAnimationStartEvent {\r\n  currentOpen: boolean;\r\n  nextOpen: boolean;\r\n}\r\n\r\nexport interface ExpandableAnimationEndEvent {\r\n  bodyHeight: number | undefined;\r\n  open: boolean;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-expandable\",\r\n  styleUrl: \"expandable.scss\",\r\n  shadow: true,\r\n})\r\nexport class Expandable implements ComponentInterface {\r\n  private bodyHeight?: number;\r\n\r\n  @Element()\r\n  host!: HTMLDsoExpandableElement;\r\n\r\n  /**\r\n   * Set to `true` to expand the content.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open?: boolean;\r\n\r\n  /**\r\n   * Set to `true` to show the content animated.\r\n   */\r\n  @Prop({ reflect: true })\r\n  enableAnimation = false;\r\n\r\n  /**\r\n   * When enableAnimation is set to `true`, this property specifies the height of this element at which the animation will expand from / collapse to\r\n   */\r\n  @Prop()\r\n  minimumHeight?: number;\r\n\r\n  @Watch(\"open\")\r\n  toggleOpen() {\r\n    if (!this.enableAnimation) {\r\n      this.isClosed = !this.open;\r\n    }\r\n  }\r\n\r\n  @State()\r\n  isClosed = true;\r\n\r\n  /**\r\n   * Fired before expanding.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoExpandableAnimationStart!: EventEmitter<ExpandableAnimationStartEvent>;\r\n\r\n  /**\r\n   * Fired after expanding.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoExpandableAnimationEnd!: EventEmitter<ExpandableAnimationEndEvent>;\r\n\r\n  /**\r\n   * Listens to the transitionstart event\r\n   */\r\n  @Listen(\"transitionstart\")\r\n  transitionstartHandler(e: TransitionEvent) {\r\n    if (e.propertyName === \"grid-template-rows\") {\r\n      this.dsoExpandableAnimationStart.emit({\r\n        currentOpen: !!this.open,\r\n        nextOpen: !this.open,\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Listens to the transitionend event\r\n   */\r\n  @Listen(\"transitionend\")\r\n  transitionendHandler(e: TransitionEvent) {\r\n    if (e.propertyName === \"grid-template-rows\") {\r\n      this.isClosed = !this.open;\r\n      this.dsoExpandableAnimationEnd.emit({ bodyHeight: this.bodyHeight, open: !!this.open });\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        aria-hidden={this.open ? \"false\" : \"true\"}\r\n        class={clsx({\r\n          \"dso-animate-ready\": this.enableAnimation,\r\n          \"dso-hide\": this.isClosed,\r\n        })}\r\n      >\r\n        <div class=\"slot-container\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}