import { Host, h } from '@stencil/core';
/**
 * Outputs a toast for informing users of a process (either success or failure)
 * that an app has performed or will perform.
 *
 * This component uses BsTransition (see usage examples).
 */
export class BsToast {
  constructor() {
    this.toastId = undefined;
    this.variant = undefined;
    this.stacked = false;
    this.duration = 10000;
    this.enterControlled = false;
    this.enterTrigger = false;
    this.leaveTrigger = false;
  }
  /** Initially pass down variant to children. */
  componentDidLoad() {
    this.onVariantChange(this.variant);
  }
  /** Updates variant of children if prop changes */
  onVariantChange(newVal) {
    // Pass down variant to header
    const headerChild = this.hostEl.querySelector('bs-toast-header');
    headerChild === null || headerChild === void 0 ? void 0 : headerChild.setAttribute('variant', newVal);
  }
  handleDismiss() {
    // Clear the dismiss timer to prevent unnecessary side-effects
    if (this.autoDismissTimer) {
      clearTimeout(this.autoDismissTimer);
      this.autoDismissTimer = undefined;
    }
    this.dismiss.emit(this.toastId);
  }
  /** Set auto-dismissal after the toast has fully entered. */
  handleEnterEnd() {
    if (this.duration > 0) {
      this.autoDismissTimer = setTimeout(() => this.handleDismiss(), this.duration);
    }
    this.enterend.emit();
  }
  render() {
    return (h(Host, null, h("bs-transition", { enterAttribute: 'data-shown', enterDuration: 200, enterControlled: this.enterControlled, enterTrigger: this.enterTrigger, leaveTrigger: this.leaveTrigger, onEnterend: () => this.handleEnterEnd(), onLeaveend: () => this.leaveend.emit() }, h("div", { class: "bs-toast", "data-variant": this.variant, "data-stacked": this.stacked, "aria-role": "alert" }, h("slot", null)))));
  }
  static get is() { return "bs-toast"; }
  static get originalStyleUrls() {
    return {
      "$": ["bs-toast.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["bs-toast.css"]
    };
  }
  static get properties() {
    return {
      "toastId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "ex",
              "text": "toast-id"
            }],
          "text": ""
        },
        "attribute": "toast-id",
        "reflect": false
      },
      "variant": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'warning'|'positive'|'negative'",
          "resolved": "\"negative\" | \"positive\" | \"warning\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Controls the color/icon of the toast."
        },
        "attribute": "variant",
        "reflect": false
      },
      "stacked": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether or not this toast is stacked with other toasts within a `toaster`\ncomponent"
        },
        "attribute": "stacked",
        "reflect": false,
        "defaultValue": "false"
      },
      "duration": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Duration of the toast on the screen in milliseconds. Defaults to 10\nseconds. Provide `0` for this property to never auto-dismiss the toast."
        },
        "attribute": "duration",
        "reflect": false,
        "defaultValue": "10000"
      },
      "enterControlled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether or not the enter transition should be controlled manually. Useful\nwhen the enter transition needs to be triggered manually (e.g. \\`v-show\\`\nin Vue)."
        },
        "attribute": "enter-controlled",
        "reflect": false,
        "defaultValue": "false"
      },
      "enterTrigger": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Only used when \\`enterControlled\\` is \\`true\\`. When ready to play the\nenter transition, set this to \\`true\\`."
        },
        "attribute": "enter-trigger",
        "reflect": false,
        "defaultValue": "false"
      },
      "leaveTrigger": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "If desired, leave transition needs to be triggered manually. Set this to\n\\`true\\` when ready to fire leave transition."
        },
        "attribute": "leave-trigger",
        "reflect": false,
        "defaultValue": "false"
      }
    };
  }
  static get events() {
    return [{
        "method": "dismiss",
        "name": "dismiss",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emits when the toast has been dismissed which may occur when default\ndismiss button is clicked or `duration` has elapsed. Event will have\ndetails in format `<toastId>::dismissed`."
        },
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        }
      }, {
        "method": "enterend",
        "name": "enterend",
        "bubbles": false,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emits when the enter transition has ended. The element should be fully\nrendered by now and may be manipulated (e.g. setting focus)."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }, {
        "method": "leaveend",
        "name": "leaveend",
        "bubbles": false,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Only emits when \\`leaveTrigger\\` is toggled and the leave transition has\nended. The element can be fully removed from the DOM now."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }];
  }
  static get elementRef() { return "hostEl"; }
  static get watchers() {
    return [{
        "propName": "variant",
        "methodName": "onVariantChange"
      }];
  }
  static get listeners() {
    return [{
        "name": "defaultDismiss",
        "method": "handleDismiss",
        "target": undefined,
        "capture": false,
        "passive": false
      }];
  }
}
//# sourceMappingURL=bs-toast.js.map
