@six-group/ui-library 4.0.4 → 4.1.0

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

@@ -26,376 +26,378 @@ let id = 0;
  *
  */
 export class SixDialog {
-  constructor() {
-    this.componentId = `dialog-${++id}`;
-    this.willShow = false;
-    this.willHide = false;
-    this.handleCloseClick = () => {
-      this.hide();
-    };
-    this.handleKeyDown = (event) => {
-      if (event.key === 'Escape') {
-        this.hide();
-      }
-    };
-    this.handleOverlayClick = () => {
-      const sixOverlayDismiss = this.sixOverlayDismiss.emit();
-      if (!sixOverlayDismiss.defaultPrevented) {
-        this.hide();
-      }
-    };
-    this.handleSlotChange = () => {
-      this.hasFooter = hasSlot(this.host, 'footer');
-    };
-    this.handleTransitionEnd = (event) => {
-      const target = event.target;
-      // Ensure we only emit one event when the target element is no longer visible
-      if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {
-        this.isVisible = this.open;
+    constructor() {
+        this.componentId = `dialog-${++id}`;
         this.willShow = false;
         this.willHide = false;
-        this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
-      }
-    };
-    this.hasFooter = false;
-    this.isVisible = false;
-    this.open = false;
-    this.label = '';
-    this.noHeader = false;
-  }
-  handleOpenChange() {
-    this.open ? this.show() : this.hide();
-  }
-  connectedCallback() {
-    this.modal = new Modal(this.host, {
-      onFocusOut: () => { var _a; return (_a = this.panel) === null || _a === void 0 ? void 0 : _a.focus(); },
-    });
-  }
-  componentWillLoad() {
-    this.handleSlotChange();
-    // Show on init if open
-    if (this.open) {
-      this.show();
-    }
-  }
-  disconnectedCallback() {
-    unlockBodyScrolling(this.host);
-  }
-  /** Shows the dialog */
-  async show() {
-    if (this.willShow || this.modal == null || this.panel == null || this.dialog == null) {
-      return;
+        this.handleCloseClick = () => {
+            this.hide();
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                this.hide();
+            }
+        };
+        this.handleOverlayClick = () => {
+            const sixOverlayDismiss = this.sixOverlayDismiss.emit();
+            if (!sixOverlayDismiss.defaultPrevented) {
+                this.hide();
+            }
+        };
+        this.handleSlotChange = () => {
+            this.hasFooter = hasSlot(this.host, 'footer');
+        };
+        this.handleTransitionEnd = (event) => {
+            const target = event.target;
+            // Ensure we only emit one event when the target element is no longer visible
+            if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {
+                this.isVisible = this.open;
+                this.willShow = false;
+                this.willHide = false;
+                this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+            }
+        };
+        this.hasFooter = false;
+        this.isVisible = false;
+        this.open = false;
+        this.label = '';
+        this.noHeader = false;
     }
-    const panel = this.panel;
-    const sixShow = this.sixShow.emit();
-    if (sixShow.defaultPrevented) {
-      this.open = false;
-      return;
+    handleOpenChange() {
+        this.open ? this.show() : this.hide();
     }
-    this.willShow = true;
-    this.isVisible = true;
-    this.open = true;
-    this.modal.activate();
-    lockBodyScrolling(this.host);
-    if (this.open) {
-      if (hasPreventScroll) {
-        // Wait for the next frame before setting initial focus so the dialog is technically visible
-        requestAnimationFrame(() => {
-          const sixInitialFocus = this.sixInitialFocus.emit();
-          if (!sixInitialFocus.defaultPrevented) {
-            panel.focus({ preventScroll: true });
-          }
+    connectedCallback() {
+        this.modal = new Modal(this.host, {
+            onFocusOut: () => { var _a; return (_a = this.panel) === null || _a === void 0 ? void 0 : _a.focus(); },
         });
-      }
-      else {
-        // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to
-        // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its
-        // out of view initially.
-        //
-        // Fiddle: https://jsfiddle.net/g6buoafq/1/
-        // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583
-        //
-        this.dialog.addEventListener('transitionend', () => {
-          const sixInitialFocus = this.sixInitialFocus.emit();
-          if (!sixInitialFocus.defaultPrevented) {
-            panel.focus();
-          }
-        }, { once: true });
-      }
     }
-  }
-  /** Hides the dialog */
-  async hide() {
-    if (this.willHide || this.modal == null) {
-      return;
+    componentWillLoad() {
+        this.handleSlotChange();
     }
-    const sixHide = this.sixHide.emit();
-    if (sixHide.defaultPrevented) {
-      this.open = true;
-      return;
+    componentDidLoad() {
+        // Show on init if open
+        if (this.open) {
+            this.show();
+        }
     }
-    this.willHide = true;
-    this.open = false;
-    this.modal.deactivate();
-    unlockBodyScrolling(this.host);
-  }
-  render() {
-    return (h("div", { ref: (el) => (this.dialog = el), part: "base", class: {
-        dialog: true,
-        'dialog--open': this.open,
-        'dialog--visible': this.isVisible,
-        'dialog--has-footer': this.hasFooter,
-      }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, h("div", { part: "overlay", class: "dialog__overlay", onClick: this.handleOverlayClick }), h("div", { ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, !this.noHeader && (h("header", { part: "header", class: "dialog__header" }, h("span", { part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { name: "label" }, this.label || String.fromCharCode(65279))), h("six-icon-button", { exportparts: "base:close-button", class: "dialog__close", name: "close", onClick: this.handleCloseClick }))), h("div", { part: "body", class: "dialog__body" }, h("slot", null)), h("footer", { part: "footer", class: "dialog__footer" }, h("slot", { name: "footer", onSlotchange: this.handleSlotChange })))));
-  }
-  static get is() { return "six-dialog"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-dialog.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-dialog.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 dialog is open. You can use this in lieu of the show/hide methods."
-        },
-        "attribute": "open",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "noHeader": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\neasy, accessible way for users to dismiss the dialog."
-        },
-        "attribute": "no-header",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasFooter": {},
-      "isVisible": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sixShow",
-        "name": "six-dialog-show",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the dialog 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"
-            }
-          }
+    disconnectedCallback() {
+        unlockBodyScrolling(this.host);
+    }
+    /** Shows the dialog */
+    async show() {
+        if (this.willShow || this.modal == null || this.panel == null || this.dialog == null) {
+            return;
         }
-      }, {
-        "method": "sixAfterShow",
-        "name": "six-dialog-after-show",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted after the dialog opens and all transitions are complete."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types",
-              "id": "src/utils/types.ts::EmptyPayload"
-            }
-          }
+        const panel = this.panel;
+        const sixShow = this.sixShow.emit();
+        if (sixShow.defaultPrevented) {
+            this.open = false;
+            return;
         }
-      }, {
-        "method": "sixHide",
-        "name": "six-dialog-hide",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the dialog 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"
+        this.willShow = true;
+        this.isVisible = true;
+        this.open = true;
+        this.modal.activate();
+        lockBodyScrolling(this.host);
+        if (this.open) {
+            if (hasPreventScroll) {
+                // Wait for the next frame before setting initial focus so the dialog is technically visible
+                requestAnimationFrame(() => {
+                    const sixInitialFocus = this.sixInitialFocus.emit();
+                    if (!sixInitialFocus.defaultPrevented) {
+                        panel.focus({ preventScroll: true });
+                    }
+                });
             }
-          }
-        }
-      }, {
-        "method": "sixAfterHide",
-        "name": "six-dialog-after-hide",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted after the dialog closes and all transitions are complete."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types",
-              "id": "src/utils/types.ts::EmptyPayload"
+            else {
+                // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to
+                // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its
+                // out of view initially.
+                //
+                // Fiddle: https://jsfiddle.net/g6buoafq/1/
+                // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583
+                //
+                this.dialog.addEventListener('transitionend', () => {
+                    const sixInitialFocus = this.sixInitialFocus.emit();
+                    if (!sixInitialFocus.defaultPrevented) {
+                        panel.focus();
+                    }
+                }, { once: true });
             }
-          }
         }
-      }, {
-        "method": "sixInitialFocus",
-        "name": "six-dialog-initial-focus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\nallow you to set it on a different element in the dialog, such as an input or button."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types",
-              "id": "src/utils/types.ts::EmptyPayload"
-            }
-          }
+    }
+    /** Hides the dialog */
+    async hide() {
+        if (this.willHide || this.modal == null) {
+            return;
         }
-      }, {
-        "method": "sixOverlayDismiss",
-        "name": "six-dialog-overlay-dismiss",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types",
-              "id": "src/utils/types.ts::EmptyPayload"
-            }
-          }
+        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",
-              "id": "global::Promise"
+        this.willHide = true;
+        this.open = false;
+        this.modal.deactivate();
+        unlockBodyScrolling(this.host);
+    }
+    render() {
+        return (h("div", { ref: (el) => (this.dialog = el), part: "base", class: {
+                dialog: true,
+                'dialog--open': this.open,
+                'dialog--visible': this.isVisible,
+                'dialog--has-footer': this.hasFooter,
+            }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, h("div", { part: "overlay", class: "dialog__overlay", onClick: this.handleOverlayClick }), h("div", { ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, !this.noHeader && (h("header", { part: "header", class: "dialog__header" }, h("span", { part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { name: "label" }, this.label || String.fromCharCode(65279))), h("six-icon-button", { exportparts: "base:close-button", class: "dialog__close", name: "close", onClick: this.handleCloseClick }))), h("div", { part: "body", class: "dialog__body" }, h("slot", null)), h("footer", { part: "footer", class: "dialog__footer" }, h("slot", { name: "footer", onSlotchange: this.handleSlotChange })))));
+    }
+    static get is() { return "six-dialog"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-dialog.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-dialog.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 dialog is open. You can use this in lieu of the show/hide methods."
+                },
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "noHeader": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\neasy, accessible way for users to dismiss the dialog."
+                },
+                "attribute": "no-header",
+                "reflect": false,
+                "defaultValue": "false"
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Shows the dialog",
-          "tags": []
-        }
-      },
-      "hide": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+    }
+    static get states() {
+        return {
+            "hasFooter": {},
+            "isVisible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sixShow",
+                "name": "six-dialog-show",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dialog 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-dialog-after-show",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after the dialog 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-dialog-hide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dialog 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-dialog-after-hide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after the dialog closes and all transitions are complete."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixInitialFocus",
+                "name": "six-dialog-initial-focus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\nallow you to set it on a different element in the dialog, such as an input or button."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixOverlayDismiss",
+                "name": "six-dialog-overlay-dismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing."
+                },
+                "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 dialog",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hides the dialog",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Hides the dialog",
-          "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-dialog.js.map