'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-128c5169.js');

const bsToastCss = ".bs-toast{background-color:var(--bs-white);border-top:4px solid var(--bs-blue-400);bottom:1.5rem;box-shadow:var(--bs-shadow-contentMedium);left:0;margin-left:1.5rem;margin-right:1.5rem;opacity:0;position:fixed;right:0;transform:translateY(calc(100% + 1.5rem));width:clamp(17rem, 100vw - 3rem, 25rem);z-index:999}.bs-toast[data-stacked]{bottom:auto;left:auto;position:static;right:auto;z-index:auto}@keyframes slideDown{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(calc(100% + 1.5rem))}}@keyframes slideUp{0%{opacity:0;transform:translateY(calc(100% + 1.5rem))}100%{opacity:1;transform:translateY(0)}}:where(.dark) .bs-toast{background-color:var(--bs-navy-400)}.bs-toast:where([data-shown]){animation-delay:10ms;animation-duration:200ms;animation-fill-mode:forwards;animation-name:slideUp;animation-timing-function:ease}.bs-toast:where([data-dismissed]){animation-duration:200ms;animation-fill-mode:forwards;animation-name:slideDown;animation-timing-function:ease}.bs-toast :where(.bs-toast-header){align-items:center;color:var(--bs-ink-base);display:flex;gap:0.5rem;padding-left:1rem;padding-right:1rem;padding-top:1rem}.bs-toast :where(.bs-toast-header .bs-toast-header-icon){color:var(--bs-blue-400)}.bs-toast :where(h5){font-weight:400}.bs-toast :where(.bs-toast-content){border-bottom:1px solid var(--bs-border);color:var(--bs-ink-light);padding-bottom:1rem;padding-left:1rem;padding-right:1rem;padding-top:0.25rem}.bs-toast :where(.bs-toast-actions){display:flex;flex-direction:column-reverse;gap:1rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:1rem;padding-top:0.5rem}.bs-toast:where([data-variant^=\"warning\"]){border-top:4px solid var(--bs-orange-warning)}.bs-toast:where([data-variant^=\"warning\"]) :where(.bs-toast-header .bs-toast-header-icon){color:var(--bs-orange-warning)}.bs-toast:where([data-variant^=\"positive\"]){border-top:4px solid var(--bs-purple-400)}.bs-toast:where([data-variant^=\"positive\"]) :where(.bs-toast-header .bs-toast-header-icon){color:var(--bs-purple-400)}:where(.dark) .bs-toast:where([data-variant^=\"positive\"]){border-top:4px solid var(--bs-purple-200)}:where(.dark) .bs-toast:where([data-variant^=\"positive\"]) :where(.bs-toast-header .bs-toast-header-icon){color:var(--bs-purple-200)}.bs-toast:where([data-variant^=\"negative\"]){border-top:4px solid var(--bs-red-400)}.bs-toast:where([data-variant^=\"negative\"]) :where(.bs-toast-header .bs-toast-header-icon){color:var(--bs-red-400)}@media (min-width: 440px){.bs-toast{left:auto;margin-left:0;margin-right:0;opacity:0;right:1.5rem;transform:translateX(calc(100% + 1.5rem))}.bs-toast:where([data-shown]){animation-delay:10ms;animation-duration:200ms;animation-fill-mode:forwards;animation-name:slideLeft;animation-timing-function:ease}.bs-toast:where([data-dismissed]){animation-duration:200ms;animation-fill-mode:forwards;animation-name:slideRight;animation-timing-function:ease}@keyframes slideRight{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(calc(100% + 1.5rem))}}@keyframes slideLeft{0%{opacity:0;transform:translateX(calc(100% + 1.5rem))}100%{opacity:1;transform:translateX(0)}}.bs-toast :where(.bs-toast-actions){flex-direction:row;justify-content:flex-end}}:host{display:block}.bs-toast-header :where(h5){font-size:var(--bs-text-md);margin:0}.bs-toast-content :where(p){margin:0}";

const BsToast = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.dismiss = index.createEvent(this, "dismiss", 7);
    this.actionclick = index.createEvent(this, "actionclick", 7);
    this.toastId = undefined;
    this.shown = undefined;
    this.variant = undefined;
    this.toastTitle = undefined;
    this.content = undefined;
    this.stacked = false;
    this.duration = 10000;
    this.primaryAction = 'Dismiss';
    this.primaryActionType = 'text';
    this.secondaryAction = undefined;
    this.secondaryActionType = 'text';
    this.tertiaryAction = undefined;
    this.tertiaryActionType = 'text';
    this.dismissAction = 'Dismiss';
    this.isShown = undefined;
    this.isDismissed = undefined;
  }
  /** Set internal shown / dismissed state to prop value */
  onShownChange(newVal, oldVal) {
    this.isShown = newVal;
    // Switched from showing to not showing, so play dismissed animation
    if (oldVal && !newVal) {
      this.isDismissed = true;
    }
    else {
      this.isDismissed = false;
    }
  }
  /** Initially sets internal states based on prop value */
  componentWillLoad() {
    this.onShownChange(this.shown, undefined);
  }
  /** Clear the dismiss timer to prevent unnecessary side-effects */
  clearTimer() {
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = undefined;
    }
  }
  /** Handles dismissal action */
  handleDismiss() {
    this.clearTimer();
    this.isShown = false;
    this.isDismissed = true;
    // Emit after 200ms (same as the css animation)
    // to allow for exit animation to play before potential removal from DOM
    setTimeout(() => this.dismiss.emit(this.toastId), 200);
  }
  /** Handle auto-dismissal of the toast when applicable */
  componentDidRender() {
    if (this.isShown && (this.duration > 0)) {
      this.clearTimer();
      this.timer = setTimeout(() => this.handleDismiss(), this.duration);
    }
  }
  /** Get icon based on variant */
  getIcon() {
    const attributes = {
      class: 'bs-toast-header-icon',
      part: 'bs-toast-header-icon'
    };
    switch (this.variant) {
      case 'warning':
        return index.h("bs-icon-warning", Object.assign({}, attributes));
      case 'positive':
        return index.h("bs-icon-thumbs-up-stroke", Object.assign({}, attributes));
      case 'negative':
        return index.h("bs-icon-warning", Object.assign({}, attributes));
      default:
        return index.h("bs-icon-circle-exclamation", Object.assign({}, attributes));
    }
  }
  /** Handles different actions on button click */
  handleButtonClick(action) {
    if (action === this.dismissAction) {
      this.handleDismiss();
    }
    else {
      this.actionclick.emit(`${this.toastId}::${action}`);
    }
  }
  /** Builds a button based on button type */
  getButton(action, type) {
    // No action, no button
    if (!action) {
      return undefined;
    }
    return (index.h("bs-button", { size: "sm", "ghost-btn": type === 'ghost' ? true : undefined, "text-btn": type === 'text' ? true : undefined, variant: this.variant, onClick: () => this.handleButtonClick(action) }, action));
  }
  render() {
    return (index.h(index.Host, { "data-variant": this.variant }, index.h("div", { class: "bs-toast", "data-shown": this.isShown, "data-dismissed": this.isDismissed, "data-variant": this.variant, "data-stacked": this.stacked, "aria-role": "alert", part: "bs-toast" }, index.h("div", { class: "bs-toast-header" }, this.getIcon(), index.h("h5", null, this.toastTitle)), index.h("div", { class: "bs-toast-content" }, index.h("p", null, index.h("slot", null, this.content))), index.h("div", { class: "bs-toast-actions" }, this.getButton(this.tertiaryAction, this.tertiaryActionType), this.getButton(this.secondaryAction, this.secondaryActionType), this.getButton(this.primaryAction, this.primaryActionType)))));
  }
  static get watchers() { return {
    "shown": ["onShownChange"]
  }; }
};
BsToast.style = bsToastCss;

exports.bs_toast = BsToast;

//# sourceMappingURL=bs-toast.cjs.entry.js.map