@six-group/ui-library 0.0.0-insider.d16ec8e → 0.0.0-insider.d7f75e8

package/dist/collection/components/six-details/six-details.js

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { focusVisible } from '../../utils/focus-visible';
+import { h } from "@stencil/core";
+import { focusVisible } from "../../utils/focus-visible";
 let id = 0;
 /**
  * @since 1.0
@@ -17,419 +17,425 @@ let id = 0;
  * @part content - The details content.
  */
 export class SixDetails {
-  constructor() {
-    this.componentId = `details-${++id}`;
-    this.isVisible = false;
-    this.handleBodyTransitionEnd = (event) => {
-      if (this.body == null)
-        return;
-      const target = event.target;
-      // Ensure we only emit one event when the target element is no longer visible
-      if (event.propertyName === 'height' && target.classList.contains('details__body')) {
-        this.body.style.overflow = this.open ? 'visible' : 'hidden';
-        this.body.style.height = this.open ? 'auto' : '0';
-        this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
-        this.body.hidden = !this.open;
-      }
-    };
-    this.handleSummaryClick = () => {
-      var _a;
-      if (!this.disabled && (this.hasContent || this.selectableEmpty)) {
-        this.open ? this.hide() : this.show();
-        (_a = this.header) === null || _a === void 0 ? void 0 : _a.focus();
-      }
-    };
-    this.handleSummaryKeyDown = (event) => {
-      if (event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault();
-        this.open ? this.hide() : this.show();
-      }
-      if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
-        event.preventDefault();
-        this.hide();
-      }
-      if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
-        event.preventDefault();
-        this.show();
-      }
-    };
-    this.animateSummaryIcon = true;
-    this.open = false;
-    this.summary = '';
-    this.summaryIcon = undefined;
-    this.summaryIconSize = 'inherit';
-    this.disabled = false;
-    this.inline = false;
-    this.selectableEmpty = false;
-    this.hasContent = true;
-  }
-  handleOpenChange() {
-    if (this.body != null) {
-      this.open ? this.show() : this.hide();
-    }
-  }
-  componentDidLoad() {
-    if (this.details == null || this.body == null)
-      return;
-    focusVisible.observe(this.details);
-    this.body.hidden = !this.open;
-    // Show on init if open
-    if (this.open) {
-      this.show();
-    }
-  }
-  disconnectedCallback() {
-    if (this.details != null) {
-      focusVisible.unobserve(this.details);
-    }
-  }
-  /** Shows the detail body */
-  async show() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (this.isVisible || this.body == null)
-      return;
-    const sixShow = this.sixShow.emit();
-    if (sixShow.defaultPrevented) {
-      this.open = false;
-      return;
+    constructor() {
+        this.componentId = `details-${++id}`;
+        this.isVisible = false;
+        this.handleBodyTransitionEnd = (event) => {
+            if (this.body == null)
+                return;
+            const target = event.target;
+            // Ensure we only emit one event when the target element is no longer visible
+            if (event.propertyName === 'height' && target.classList.contains('details__body')) {
+                this.body.style.overflow = this.open ? 'visible' : 'hidden';
+                this.body.style.height = this.open ? 'auto' : '0';
+                this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+                this.body.hidden = !this.open;
+            }
+        };
+        this.handleSummaryClick = () => {
+            var _a;
+            if (!this.disabled && (this.hasContent || this.selectableEmpty)) {
+                this.open ? this.hide() : this.show();
+                (_a = this.header) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
+        this.handleSummaryKeyDown = (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.open ? this.hide() : this.show();
+            }
+            if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+                event.preventDefault();
+                this.hide();
+            }
+            if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+                event.preventDefault();
+                this.show();
+            }
+        };
+        this.animateSummaryIcon = true;
+        this.open = false;
+        this.summary = '';
+        this.summaryIcon = undefined;
+        this.summaryIconSize = 'inherit';
+        this.disabled = false;
+        this.inline = false;
+        this.selectableEmpty = false;
+        this.hasContent = true;
     }
-    this.body.hidden = false;
-    if (this.body.scrollHeight === 0) {
-      // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open
-      // initially, but not immediately visible (i.e. in a tab panel).
-      this.body.style.height = 'auto';
-      this.body.style.overflow = 'visible';
+    handleOpenChange() {
+        if (this.body != null) {
+            this.open ? this.show() : this.hide();
+        }
     }
-    else {
-      this.body.style.height = `${this.body.scrollHeight}px`;
-      this.body.style.overflow = 'hidden';
+    componentDidLoad() {
+        if (this.details == null || this.body == null)
+            return;
+        focusVisible.observe(this.details);
+        this.body.hidden = !this.open;
+        // Show on init if open
+        if (this.open) {
+            this.show();
+        }
     }
-    this.isVisible = true;
-    this.open = true;
-  }
-  /** Hides the detail body */
-  async hide() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (!this.isVisible || this.body == null)
-      return;
-    const body = this.body;
-    const sixHide = this.sixHide.emit();
-    if (sixHide.defaultPrevented) {
-      this.open = true;
-      return;
+    disconnectedCallback() {
+        if (this.details != null) {
+            focusVisible.unobserve(this.details);
+        }
     }
-    // We can't transition out of `height: auto`, so let's set it to the current height first
-    body.style.height = `${body.scrollHeight}px`;
-    body.style.overflow = 'hidden';
-    requestAnimationFrame(() => {
-      // tslint:disable-next-line: no-unused-expression
-      body.clientWidth; // force a reflow
-      body.style.height = '0';
-    });
-    this.isVisible = false;
-    this.open = false;
-  }
-  render() {
-    const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');
-    return (h("div", { ref: (el) => (this.details = el), part: "base", class: {
-        details: true,
-        'details--open': this.open,
-        'details--disabled': this.disabled,
-        inline: this.inline,
-      } }, h("header", { ref: (el) => (this.header = el), part: "header", id: `${this.componentId}-header`, class: "details__header", role: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.componentId}-content`, "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleSummaryClick, onKeyDown: this.handleSummaryKeyDown }, h("div", { part: "summary", class: "details__summary" }, h("slot", { name: "summary" }, this.summary)), h("span", { part: "summary-icon", class: {
-        'details__summary-icon': true,
-        'details__summary-icon--animate': this.animateSummaryIcon,
-      } }, h("slot", { name: "summary-icon", onSlotchange: () => (this.animateSummaryIcon = false) }, summaryIcon && h("six-icon", { size: this.summaryIconSize }, summaryIcon)))), h("div", { ref: (el) => (this.body = el), class: "details__body", onTransitionEnd: this.handleBodyTransitionEnd }, h("div", { part: "content", id: `${this.componentId}-content`, class: "details__content", role: "region", "aria-labelledby": `${this.componentId}-header` }, h("slot", null)))));
-  }
-  static get is() { return "six-details"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-details.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-details.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "open": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates whether the details is open. You can use this in lieu of the show/hide methods."
-        },
-        "attribute": "open",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "summary": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The summary to show in the details header. If you need to display HTML, use the `summary` slot instead."
-        },
-        "attribute": "summary",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "summaryIcon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The summary icon to show in the details header. If you need to display HTML, use the `summary-icon` slot instead."
-        },
-        "attribute": "summary-icon",
-        "reflect": false
-      },
-      "summaryIconSize": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "| 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge'",
-          "resolved": "\"inherit\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The icon's size."
-        },
-        "attribute": "summary-icon-size",
-        "reflect": true,
-        "defaultValue": "'inherit'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to prevent the user from toggling the details."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "inline": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true when you want to use six-details inline e.g. in a sidebar"
-        },
-        "attribute": "inline",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "selectableEmpty": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children"
-        },
-        "attribute": "selectable-empty",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "hasContent": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to false when you want to hide the summary icon and disable the open/close mechanism. Usually not needed, but used internally by 'six-sidebar-item-group'"
-        },
-        "attribute": "has-content",
-        "reflect": false,
-        "defaultValue": "true"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "animateSummaryIcon": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sixShow",
-        "name": "six-details-show",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+    /** Shows the detail body */
+    async show() {
+        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+        if (this.isVisible || this.body == null)
+            return;
+        const sixShow = this.sixShow.emit();
+        if (sixShow.defaultPrevented) {
+            this.open = false;
+            return;
         }
-      }, {
-        "method": "sixAfterShow",
-        "name": "six-details-after-show",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted after the details opens and all transitions are complete."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+        this.body.hidden = false;
+        if (this.body.scrollHeight === 0) {
+            // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open
+            // initially, but not immediately visible (i.e. in a tab panel).
+            this.body.style.height = 'auto';
+            this.body.style.overflow = 'visible';
         }
-      }, {
-        "method": "sixHide",
-        "name": "six-details-hide",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+        else {
+            this.body.style.height = `${this.body.scrollHeight}px`;
+            this.body.style.overflow = 'hidden';
         }
-      }, {
-        "method": "sixAfterHide",
-        "name": "six-details-after-hide",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted after the details closes and all transitions are complete."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+        this.isVisible = true;
+        this.open = true;
+    }
+    /** Hides the detail body */
+    async hide() {
+        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+        if (!this.isVisible || this.body == null)
+            return;
+        const body = this.body;
+        const sixHide = this.sixHide.emit();
+        if (sixHide.defaultPrevented) {
+            this.open = true;
+            return;
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "show": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
+        // We can't transition out of `height: auto`, so let's set it to the current height first
+        body.style.height = `${body.scrollHeight}px`;
+        body.style.overflow = 'hidden';
+        requestAnimationFrame(() => {
+            // tslint:disable-next-line: no-unused-expression
+            body.clientWidth; // force a reflow
+            body.style.height = '0';
+        });
+        this.isVisible = false;
+        this.open = false;
+    }
+    render() {
+        const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');
+        return (h("div", { key: '790a6c1cdc4bbc6c266f9e24bf7c94d151379115', ref: (el) => (this.details = el), part: "base", class: {
+                details: true,
+                'details--open': this.open,
+                'details--disabled': this.disabled,
+                inline: this.inline,
+            } }, h("header", { key: 'e02a32f9923779375d81ee3d79d89aa2ddea38a1', ref: (el) => (this.header = el), part: "header", id: `${this.componentId}-header`, class: "details__header", role: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.componentId}-content`, "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleSummaryClick, onKeyDown: this.handleSummaryKeyDown }, h("div", { key: 'd8647eb075674116011662baf9b8baf3130ae0b7', part: "summary", class: "details__summary" }, h("slot", { key: '5e53c611396e795eb725e4ff364127a781544aad', name: "summary" }, this.summary)), h("span", { key: 'a2108bba713114123324ab7e41a250755daa5204', part: "summary-icon", class: {
+                'details__summary-icon': true,
+                'details__summary-icon--animate': this.animateSummaryIcon,
+            } }, h("slot", { key: '344e5c319ce8e8fe2171afa277a4799c8477178b', name: "summary-icon", onSlotchange: () => (this.animateSummaryIcon = false) }, summaryIcon && h("six-icon", { key: '2b0fc2a643d699fcd17138d8cbf7320957d909b6', size: this.summaryIconSize }, summaryIcon)))), h("div", { key: 'e09bd4d2cb12bc92c595db4ada7d435b24453fb8', ref: (el) => (this.body = el), class: "details__body", onTransitionEnd: this.handleBodyTransitionEnd }, h("div", { key: '065ff7a042f603ccbccd137ecaba36016ccadf6b', part: "content", id: `${this.componentId}-content`, class: "details__content", role: "region", "aria-labelledby": `${this.componentId}-header` }, h("slot", { key: 'c7fa18ef6842f4f8af87e02d7a2e7ae892664276' })))));
+    }
+    static get is() { return "six-details"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-details.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-details.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the details is open. You can use this in lieu of the show/hide methods."
+                },
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "summary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The summary to show in the details header. If you need to display HTML, use the `summary` slot instead."
+                },
+                "attribute": "summary",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "summaryIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The summary icon to show in the details header. If you need to display HTML, use the `summary-icon` slot instead."
+                },
+                "attribute": "summary-icon",
+                "reflect": false
+            },
+            "summaryIconSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge'",
+                    "resolved": "\"inherit\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon's size."
+                },
+                "attribute": "summary-icon-size",
+                "reflect": true,
+                "defaultValue": "'inherit'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to prevent the user from toggling the details."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "inline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true when you want to use six-details inline e.g. in a sidebar"
+                },
+                "attribute": "inline",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "selectableEmpty": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children"
+                },
+                "attribute": "selectable-empty",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hasContent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to false when you want to hide the summary icon and disable the open/close mechanism. Usually not needed, but used internally by 'six-sidebar-item-group'"
+                },
+                "attribute": "has-content",
+                "reflect": false,
+                "defaultValue": "true"
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Shows the detail body",
-          "tags": []
-        }
-      },
-      "hide": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
+        };
+    }
+    static get states() {
+        return {
+            "animateSummaryIcon": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sixShow",
+                "name": "six-details-show",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixAfterShow",
+                "name": "six-details-after-show",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after the details opens and all transitions are complete."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixHide",
+                "name": "six-details-hide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixAfterHide",
+                "name": "six-details-after-hide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after the details closes and all transitions are complete."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Shows the detail body",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hides the detail body",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Hides the detail body",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "open",
-        "methodName": "handleOpenChange"
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
 }
 //# sourceMappingURL=six-details.js.map