@six-group/ui-library 0.0.0-insider.7c3e3d8 → 0.0.0-insider.7c69df0

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 const toastStack = Object.assign(document.createElement('div'), { className: 'six-toast-stack' });
 /**
  * @since 1.0
@@ -15,354 +15,356 @@ const toastStack = Object.assign(document.createElement('div'), { className: 'si
  * @part close-button - The close button.
  */
 export class SixAlert {
-  constructor() {
-    this.isVisible = false;
-    this.open = false;
-    this.closable = false;
-    this.type = 'primary';
-    this.duration = Infinity;
-  }
-  handleOpenChange() {
-    this.open ? this.show() : this.hide();
-  }
-  handleDurationChange() {
-    this.restartAutoHide();
-  }
-  connectedCallback() {
-    this.handleCloseClick = this.handleCloseClick.bind(this);
-    this.handleMouseMove = this.handleMouseMove.bind(this);
-    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
-  }
-  componentWillLoad() {
-    // Show on init if open
-    if (this.open) {
-      this.show();
-    }
-  }
-  /** Shows the alert. */
-  async show() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (this.isVisible) {
-      return;
-    }
-    const sixShow = this.sixShow.emit();
-    if (sixShow.defaultPrevented) {
-      this.open = false;
-      return;
-    }
-    this.isVisible = true;
-    this.open = true;
-    if (this.duration < Infinity) {
-      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);
+    constructor() {
+        this.handleCloseClick = () => {
+            this.hide();
+        };
+        this.handleMouseMove = () => {
+            this.restartAutoHide();
+        };
+        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('alert')) {
+                this.isVisible = this.open;
+                this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+            }
+        };
+        this.isVisible = false;
+        this.open = false;
+        this.closable = false;
+        this.type = 'primary';
+        this.duration = Infinity;
     }
-  }
-  /** Hides the alert */
-  async hide() {
-    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (!this.isVisible) {
-      return;
+    handleOpenChange() {
+        this.open ? this.show() : this.hide();
     }
-    const sixHide = this.sixHide.emit();
-    if (sixHide.defaultPrevented) {
-      this.open = true;
-      return;
+    handleDurationChange() {
+        this.restartAutoHide();
     }
-    clearTimeout(this.autoHideTimeout);
-    this.isVisible = false;
-    this.open = false;
-  }
-  /**
-   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
-   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
-   * calling this method again. The returned promise will resolve after the alert is hidden.
-   */
-  async toast() {
-    return new Promise((resolve) => {
-      if (!toastStack.parentElement) {
-        document.body.append(toastStack);
-      }
-      toastStack.append(this.host);
-      requestAnimationFrame(() => this.show());
-      this.host.addEventListener('six-alert-after-hide', () => {
-        this.host.remove();
-        resolve();
-        // Remove the toast stack from the DOM when there are no more alerts
-        if (toastStack.querySelector('six-alert') === null) {
-          toastStack.remove();
+    componentWillLoad() {
+        // Show on init if open
+        if (this.open) {
+            this.show();
         }
-      }, { once: true });
-    });
-  }
-  handleCloseClick() {
-    this.hide();
-  }
-  handleMouseMove() {
-    this.restartAutoHide();
-  }
-  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('alert')) {
-      this.isVisible = this.open;
-      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
-    }
-  }
-  restartAutoHide() {
-    clearTimeout(this.autoHideTimeout);
-    if (this.open && this.duration < Infinity) {
-      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);
     }
-  }
-  render() {
-    return (h("div", { ref: (el) => (this.alert = el), part: "base", class: {
-        alert: true,
-        'alert--open': this.open,
-        'alert--visible': this.isVisible,
-        'alert--closable': this.closable,
-        'alert--primary': this.type === 'primary',
-        'alert--success': this.type === 'success',
-        'alert--info': this.type === 'info',
-        'alert--warning': this.type === 'warning',
-        'alert--danger': this.type === 'danger',
-      }, role: "alert", "aria-live": "assertive", "aria-atomic": "true", "aria-hidden": this.open ? 'false' : 'true', onMouseMove: this.handleMouseMove, onTransitionEnd: this.handleTransitionEnd }, h("span", { part: "icon", class: "alert__icon" }, h("slot", { name: "icon" })), h("span", { part: "message", class: "alert__message" }, h("slot", null)), this.closable && (h("span", { class: "alert__close" }, h("six-icon-button", { name: "clear", exportparts: "base:close-button", onClick: this.handleCloseClick })))));
-  }
-  static get is() { return "six-alert"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-alert.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-alert.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 or not the alert is open. You can use this in lieu of the show/hide methods."
-        },
-        "attribute": "open",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "closable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to make the alert closable."
-        },
-        "attribute": "closable",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'success' | 'info' | 'warning' | 'danger'",
-          "resolved": "\"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The type of alert."
-        },
-        "attribute": "type",
-        "reflect": true,
-        "defaultValue": "'primary'"
-      },
-      "duration": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\nalert before it closes (e.g. moves the mouse over it), the timer will restart."
-        },
-        "attribute": "duration",
-        "reflect": false,
-        "defaultValue": "Infinity"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isVisible": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sixShow",
-        "name": "six-alert-show",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+    /** Shows the alert. */
+    async show() {
+        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+        if (this.isVisible) {
+            return;
         }
-      }, {
-        "method": "sixAfterShow",
-        "name": "six-alert-after-show",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted after the alert opens and all transitions are complete."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+        const sixShow = this.sixShow.emit();
+        if (sixShow.defaultPrevented) {
+            this.open = false;
+            return;
         }
-      }, {
-        "method": "sixHide",
-        "name": "six-alert-hide",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+        this.isVisible = true;
+        this.open = true;
+        if (this.duration < Infinity) {
+            this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);
         }
-      }, {
-        "method": "sixAfterHide",
-        "name": "six-alert-after-hide",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted after the alert closes and all transitions are complete."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+    }
+    /** Hides the alert */
+    async hide() {
+        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+        if (!this.isVisible) {
+            return;
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "show": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Shows the alert.",
-          "tags": []
+        const sixHide = this.sixHide.emit();
+        if (sixHide.defaultPrevented) {
+            this.open = true;
+            return;
         }
-      },
-      "hide": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
+        clearTimeout(this.autoHideTimeout);
+        this.isVisible = false;
+        this.open = false;
+    }
+    /**
+     * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
+     * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+     * calling this method again. The returned promise will resolve after the alert is hidden.
+     */
+    async toast() {
+        return new Promise((resolve) => {
+            if (!toastStack.parentElement) {
+                document.body.append(toastStack);
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Hides the alert",
-          "tags": []
+            toastStack.append(this.host);
+            requestAnimationFrame(() => this.show());
+            this.host.addEventListener('six-alert-after-hide', () => {
+                this.host.remove();
+                resolve();
+                // Remove the toast stack from the DOM when there are no more alerts
+                if (toastStack.querySelector('six-alert') === null) {
+                    toastStack.remove();
+                }
+            }, { once: true });
+        });
+    }
+    restartAutoHide() {
+        clearTimeout(this.autoHideTimeout);
+        if (this.open && this.duration < Infinity) {
+            this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);
         }
-      },
-      "toast": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
+    }
+    render() {
+        return (h("div", { part: "base", class: {
+                alert: true,
+                'alert--open': this.open,
+                'alert--visible': this.isVisible,
+                'alert--closable': this.closable,
+                'alert--primary': this.type === 'primary',
+                'alert--success': this.type === 'success',
+                'alert--info': this.type === 'info',
+                'alert--warning': this.type === 'warning',
+                'alert--danger': this.type === 'danger',
+            }, role: "alert", "aria-live": "assertive", "aria-atomic": "true", "aria-hidden": this.open ? 'false' : 'true', onMouseMove: this.handleMouseMove, onTransitionEnd: this.handleTransitionEnd }, h("span", { part: "icon", class: "alert__icon" }, h("slot", { name: "icon" })), h("span", { part: "message", class: "alert__message" }, h("slot", null)), this.closable && (h("span", { class: "alert__close" }, h("six-icon-button", { name: "clear", exportparts: "base:close-button", onClick: this.handleCloseClick })))));
+    }
+    static get is() { return "six-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-alert.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-alert.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 or not the alert is open. You can use this in lieu of the show/hide methods."
+                },
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to make the alert closable."
+                },
+                "attribute": "closable",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'success' | 'info' | 'warning' | 'danger'",
+                    "resolved": "\"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of alert."
+                },
+                "attribute": "type",
+                "reflect": true,
+                "defaultValue": "'primary'"
+            },
+            "duration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\nalert before it closes (e.g. moves the mouse over it), the timer will restart."
+                },
+                "attribute": "duration",
+                "reflect": false,
+                "defaultValue": "Infinity"
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "open",
-        "methodName": "handleOpenChange"
-      }, {
-        "propName": "duration",
-        "methodName": "handleDurationChange"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sixShow",
+                "name": "six-alert-show",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the alert 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-alert-after-show",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after the alert 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-alert-hide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the alert 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-alert-after-hide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after the alert 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 alert.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hides the alert",
+                    "tags": []
+                }
+            },
+            "toast": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }, {
+                "propName": "duration",
+                "methodName": "handleDurationChange"
+            }];
+    }
 }
 //# sourceMappingURL=six-alert.js.map