import { TOAST_ROLES as l, TOAST_ALTERNATE_KINDS as u, TOAST_MIN_DURATION as s, TOAST_LAYOUTS as h } from "./toast-constants.js";
import o from "../../common/utils/index.js";
import { n as a } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import y from "../notice/notice-icon.js";
import c from "../notice/notice-content.js";
import f from "../notice/notice-action.js";
import { NOTICE_KINDS as g } from "../notice/notice-constants.js";
import { DtIconInfo as i, DtIconAlertTriangle as _, DtIconBell as p, DtIconSparkle as m } from "@dialpad/dialtone-icons/vue2";
import { ICON_SIZE_MODIFIERS as S } from "../icon/icon-constants.js";
const v = {
  name: "ToastLayoutDefault",
  components: {
    DtNoticeIcon: y,
    DtNoticeContent: c,
    DtNoticeAction: f
  },
  props: {
    isShown: {
      type: Boolean,
      default: !1
    },
    /**
     * Sets an ID on the title element of the component. Useful for aria-describedby
     * or aria-labelledby or any other reason you may need an id to refer to the title.
     */
    titleId: {
      type: String,
      default() {
        return o.getUniqueString();
      }
    },
    /**
     * Sets an ID on the content element of the component. Useful for aria-describedby
     * or aria-labelledby or any other reason you may need an id to refer to the content.
     */
    contentId: {
      type: String,
      default() {
        return o.getUniqueString();
      }
    },
    /**
     * Title header of the toast. This can be left blank to remove the title from the toast entirely.
     */
    title: {
      type: String,
      default: ""
    },
    /**
     * Message of the toast. Overridden by default slot.
     */
    message: {
      type: String,
      default: ""
    },
    /**
     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to
     * communicate an important message like an error that does not contain any interactive elements.
     * @values status, alert
     */
    role: {
      type: String,
      default: "status",
      validator: (e) => l.includes(e)
    },
    /**
     * Severity level of the toast, sets the icon and background
     * @values base, error, info, success, warning
     */
    kind: {
      type: String,
      default: "base",
      validator: (e) => g.includes(e)
    },
    /**
     * Used in scenarios where the message needs to visually dominate the screen.
     * @values true, false
     */
    important: {
      type: Boolean,
      default: !1
    },
    /**
     * Hides the close button from the toast
     * @values true, false
     */
    hideClose: {
      type: Boolean,
      default: !1
    },
    /**
     * Hides the icon from the notice
     * @values true, false
     */
    hideIcon: {
      type: Boolean,
      default: !1
    },
    /**
     * Hides the action from the notice
     * @values true, false
     */
    hideAction: {
      type: Boolean,
      default: !1
    }
  },
  computed: {
    kindClass() {
      return {
        error: "d-toast--error",
        info: "d-toast--info",
        success: "d-toast--success",
        warning: "d-toast--warning",
        base: "d-toast--base"
      }[this.kind];
    }
  }
};
var I = function() {
  var t = this, n = t._self._c;
  return t.isShown ? n("div", { class: [
    "d-toast",
    t.kindClass,
    { "d-toast--important": t.important }
  ], attrs: { "data-qa": "dt-toast", "aria-hidden": (!t.isShown).toString() } }, [n("div", { staticClass: "d-toast__dialog" }, [t.hideIcon ? t._e() : n("dt-notice-icon", t._g({ attrs: { kind: t.kind } }, t.$listeners), [t._t("icon")], 2), n("dt-notice-content", t._g({ attrs: { "title-id": t.titleId, "content-id": t.contentId, title: t.title, role: t.role }, scopedSlots: t._u([{ key: "titleOverride", fn: function() {
    return [t._t("titleOverride")];
  }, proxy: !0 }], null, !0) }, t.$listeners), [t._t("default", function() {
    return [t._v(" " + t._s(t.message) + " ")];
  })], 2), n("dt-notice-action", t._g({ attrs: { "hide-action": t.hideAction, "hide-close": t.hideClose } }, t.$listeners), [t._t("action")], 2)], 1)]) : t._e();
}, T = [], k = /* @__PURE__ */ a(
  v,
  I,
  T
);
const r = k.exports, C = /* @__PURE__ */ new Map([
  ["info", i],
  ["success", i],
  ["warning", _],
  ["error", i],
  ["base", p],
  ["gradient", m]
]), w = {
  name: "DtToastLayoutAlternateIcon",
  components: {
    DtIconInfo: i,
    DtIconAlertTriangle: _,
    DtIconBell: p,
    DtIconSparkle: m
  },
  props: {
    /**
     * Kind of icon
     * @values base, error, info, success, warning
     */
    kind: {
      type: String,
      default: "base",
      validator(e) {
        return u.includes(e);
      }
    },
    size: {
      type: String,
      default: "400",
      validator: (e) => Object.keys(S).includes(e)
    }
  },
  computed: {
    defaultIcon() {
      return C.get(this.kind);
    }
  }
};
var $ = function() {
  var t = this, n = t._self._c;
  return n("div", { staticClass: "d-toast-layout-alternate__icon", attrs: { "aria-hidden": "true" } }, [t._t("default", function() {
    return [t.defaultIcon ? n(t.defaultIcon, { tag: "component", attrs: { size: t.size } }) : t._e()];
  })], 2);
}, A = [], D = /* @__PURE__ */ a(
  w,
  $,
  A
);
const O = D.exports, B = {
  name: "ToastLayoutAlternate",
  components: {
    DtNoticeAction: f,
    DtNoticeContent: c,
    DtToastLayoutAlternateIcon: O
  },
  props: {
    isShown: {
      type: Boolean,
      default: !1
    },
    /**
     * Sets an ID on the title element of the component. Useful for aria-describedby
     * or aria-labelledby or any other reason you may need an id to refer to the title.
     */
    titleId: {
      type: String,
      default() {
        return o.getUniqueString();
      }
    },
    /**
     * Sets an ID on the content element of the component. Useful for aria-describedby
     * or aria-labelledby or any other reason you may need an id to refer to the content.
     */
    contentId: {
      type: String,
      default() {
        return o.getUniqueString();
      }
    },
    /**
     * Title header of the toast. This can be left blank to remove the title from the toast entirely.
     */
    title: {
      type: String,
      default: ""
    },
    /**
     * Message of the toast. Overridden by default slot.
     */
    message: {
      type: String,
      default: ""
    },
    /**
     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to
     * communicate an important message like an error that does not contain any interactive elements.
     * @values status, alert
     */
    role: {
      type: String,
      default: "status",
      validator: (e) => l.includes(e)
    },
    /**
     * Severity level of the toast, sets the icon and background
     * @values base, error, info, success, warning, gradient
     */
    kind: {
      type: String,
      default: "base",
      validator: (e) => u.includes(e)
    },
    /**
     * Hides the close button from the toast
     * @values true, false
     */
    hideClose: {
      type: Boolean,
      default: !1
    },
    /**
     * Hides the icon from the notice
     * @values true, false
     */
    hideIcon: {
      type: Boolean,
      default: !1
    }
  },
  computed: {
    kindClass() {
      return {
        error: "d-toast-alternate--error",
        info: "d-toast-alternate--info",
        success: "d-toast-alternate--success",
        warning: "d-toast-alternate--warning",
        gradient: "d-toast-alternate--gradient"
      }[this.kind];
    }
  }
};
var x = function() {
  var t = this, n = t._self._c;
  return t.isShown ? n("div", { class: [
    "d-toast-alternate",
    t.kindClass
  ], attrs: { "data-qa": "dt-toast", "aria-hidden": (!t.isShown).toString() } }, [n("div", { staticClass: "d-toast-alternate__dialog" }, [n("div", { staticClass: "d-toast-alternate__header" }, [t.hideIcon ? t._e() : n("dt-toast-layout-alternate-icon", t._g({ attrs: { kind: t.kind, size: "200" } }, t.$listeners), [t._t("icon")], 2), n("dt-notice-content", t._g({ attrs: { "title-id": t.titleId, "content-id": t.contentId, title: t.title, role: t.role }, scopedSlots: t._u([{ key: "titleOverride", fn: function() {
    return [t._t("titleOverride")];
  }, proxy: !0 }], null, !0) }, t.$listeners)), n("dt-notice-action", t._g({ attrs: { "hide-action": !0, "hide-close": t.hideClose, "button-size": "xs" } }, t.$listeners))], 1), n("div", { staticClass: "d-toast-alternate__content" }, [t._t("default", function() {
    return [t._v(" " + t._s(t.message) + " ")];
  })], 2)])]) : t._e();
}, L = [], N = /* @__PURE__ */ a(
  B,
  x,
  L
);
const d = N.exports, b = {
  name: "DtToast",
  components: {
    ToastLayoutDefault: r,
    ToastLayoutAlternate: d
  },
  props: {
    /**
     * Sets an ID on the title element of the component. Useful for aria-describedby
     * or aria-labelledby or any other reason you may need an id to refer to the title.
     */
    titleId: {
      type: String,
      default: void 0
    },
    /**
     * Sets an ID on the content element of the component. Useful for aria-describedby
     * or aria-labelledby or any other reason you may need an id to refer to the content.
     */
    contentId: {
      type: String,
      default: void 0
    },
    /**
     * Title header of the toast. This can be left blank to remove the title from the toast entirely.
     */
    title: {
      type: String,
      default: void 0
    },
    /**
     * Message of the toast. Overridden by default slot.
     */
    message: {
      type: String,
      default: void 0
    },
    /**
     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to
     * communicate an important message like an error that does not contain any interactive elements.
     * @values status, alert
     */
    role: {
      type: String,
      default: "status"
    },
    /**
     * Severity level of the toast, could be different depending on which toast layout is used.
     * @values base, error, info, success, warning, gradient
     */
    kind: {
      type: String,
      default: void 0
    },
    /**
     * Used in scenarios where the message needs to visually dominate the screen.
     * @values true, false
     */
    important: {
      type: Boolean,
      default: !1
    },
    /**
     * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear
     * after reaching the duration time, so it's convenient to use `.sync` modifier with this prop to update
     * the data in your component.
     * Supports .sync modifier
     * @values true, false
     */
    show: {
      type: Boolean,
      default: !1
    },
    /**
     * Hides the close button from the toast
     * @values true, false
     */
    hideClose: {
      type: Boolean,
      default: void 0
    },
    /**
     * Hides the icon from the notice
     * @values true, false
     */
    hideIcon: {
      type: Boolean,
      default: void 0
    },
    /**
     * Hides the action from the notice
     * @values true, false
     */
    hideAction: {
      type: Boolean,
      default: void 0
    },
    /**
     * The duration in ms the toast will display before disappearing.
     * The toast won't disappear if the duration is not provided.
     * If it's provided, it should be equal to or greater than 6000.
     */
    duration: {
      type: Number,
      default: null,
      validator: (e) => e >= s
    },
    /**
     * The layout / styling you wish to use for the toast.
     * @values default, alternate
     */
    layout: {
      type: String,
      default: "default",
      validator: (e) => h.includes(e)
    }
  },
  emits: [
    /**
     * Close button click event
     *
     * @event close
     */
    "close",
    /**
     * Sync show value
     *
     * @event update:show
     */
    "update:show"
  ],
  data() {
    return {
      isShown: !1,
      minDuration: s
    };
  },
  computed: {
    shouldSetTimeout() {
      return !!this.duration && this.duration >= this.minDuration;
    },
    selectedLayout() {
      return this.layout === "alternate" ? d : r;
    }
  },
  watch: {
    show: {
      handler: function(e) {
        this.isShown = e, e ? this.setTimeout() : clearTimeout(this.displayTimer);
      },
      immediate: !0
    }
  },
  destroyed() {
    this.shouldSetTimeout && clearTimeout(this.displayTimer);
  },
  methods: {
    setTimeout() {
      this.shouldSetTimeout && (this.displayTimer = setTimeout(() => {
        this.isShown = !1, this.$emit("update:show", !1);
      }, this.duration));
    },
    handleClose() {
      this.isShown = !1, this.$emit("update:show", !1);
    }
  }
};
var R = function() {
  var t = this, n = t._self._c;
  return n(t.selectedLayout, t._g({ tag: "component", attrs: { "is-shown": t.isShown, "title-id": t.titleId, "content-id": t.contentId, title: t.title, message: t.message, role: t.role, kind: t.kind, important: t.important, "hide-close": t.hideClose, "hide-icon": t.hideIcon, "hide-action": t.hideAction }, on: { close: t.handleClose }, scopedSlots: t._u([{ key: "icon", fn: function() {
    return [t._t("icon")];
  }, proxy: !0 }, { key: "titleOverride", fn: function() {
    return [t._t("titleOverride")];
  }, proxy: !0 }, { key: "action", fn: function() {
    return [t._t("action")];
  }, proxy: !0 }], null, !0) }, t.$listeners), [t._t("default", function() {
    return [t._v(" " + t._s(t.message) + " ")];
  })], 2);
}, q = [], z = /* @__PURE__ */ a(
  b,
  R,
  q
);
const H = z.exports;
export {
  H as default
};
//# sourceMappingURL=toast.js.map
