import { TOAST_ROLES as A, TOAST_ALTERNATE_KINDS as L, TOAST_MIN_DURATION as v, TOAST_LAYOUTS as V } from "./toast-constants.js";
import m, { extractVueListeners as O } from "../../common/utils/index.js";
import { resolveComponent as l, createElementBlock as T, createCommentVNode as r, openBlock as d, normalizeClass as B, createElementVNode as u, createBlock as _, createVNode as h, mergeProps as s, withCtx as o, renderSlot as i, createTextVNode as C, toDisplayString as p, resolveDynamicComponent as N } from "vue";
import { _ as y } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import E from "../notice/notice-action.js";
import b from "../notice/notice-content.js";
import R from "../notice/notice-icon.js";
import { NOTICE_KINDS as K } from "../notice/notice-constants.js";
import { DtIconSparkle as z, DtIconBell as q, DtIconAlertTriangle as U, DtIconInfo as f } from "@dialpad/dialtone-icons/vue3";
import { ICON_SIZE_MODIFIERS as $ } from "../icon/icon-constants.js";
const j = {
  name: "ToastLayoutDefault",
  components: {
    DtNoticeIcon: R,
    DtNoticeContent: b,
    DtNoticeAction: E
  },
  inheritAttrs: !1,
  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 m.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 m.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: (t) => A.includes(t)
    },
    /**
     * Severity level of the toast, sets the icon and background
     * @values base, error, info, success, warning
     */
    kind: {
      type: String,
      default: "base",
      validator: (t) => K.includes(t)
    },
    /**
     * 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
    }
  },
  emits: ["close"],
  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];
    },
    toastListeners() {
      return O(this.$attrs);
    }
  }
}, F = ["aria-hidden"], P = { class: "d-toast__dialog" };
function Y(t, a, e, g, c, n) {
  const S = l("dt-notice-icon"), I = l("dt-notice-content"), k = l("dt-notice-action");
  return e.isShown ? (d(), T("div", {
    key: 0,
    class: B([
      "d-toast",
      n.kindClass,
      t.$attrs.class,
      { "d-toast--important": e.important }
    ]),
    "data-qa": "dt-toast",
    "aria-hidden": (!e.isShown).toString()
  }, [
    u("div", P, [
      e.hideIcon ? r("", !0) : (d(), _(S, s({
        key: 0,
        kind: e.kind
      }, n.toastListeners), {
        default: o(() => [
          i(t.$slots, "icon")
        ]),
        _: 3
      }, 16, ["kind"])),
      h(I, s({
        "title-id": e.titleId,
        "content-id": e.contentId,
        title: e.title,
        role: e.role
      }, n.toastListeners), {
        titleOverride: o(() => [
          i(t.$slots, "titleOverride")
        ]),
        default: o(() => [
          i(t.$slots, "default", {}, () => [
            C(p(e.message), 1)
          ])
        ]),
        _: 3
      }, 16, ["title-id", "content-id", "title", "role"]),
      h(k, s({
        "hide-action": e.hideAction,
        "hide-close": e.hideClose
      }, n.toastListeners, {
        onClose: a[0] || (a[0] = (M) => t.$emit("close"))
      }), {
        default: o(() => [
          i(t.$slots, "action")
        ]),
        _: 3
      }, 16, ["hide-action", "hide-close"])
    ])
  ], 10, F)) : r("", !0);
}
const w = /* @__PURE__ */ y(j, [["render", Y]]), Z = /* @__PURE__ */ new Map([
  ["info", f],
  ["success", f],
  ["warning", U],
  ["error", f],
  ["base", q],
  ["gradient", z]
]), G = {
  compatConfig: { MODE: 3 },
  name: "DtToastLayoutAlternateIcon",
  components: {
    DtIconInfo: f,
    DtIconAlertTriangle: U,
    DtIconBell: q,
    DtIconSparkle: z
  },
  props: {
    /**
     * Kind of icon
     * @values base, error, info, success, warning
     */
    kind: {
      type: String,
      default: "base",
      validate(t) {
        return L.includes(t);
      }
    },
    size: {
      type: String,
      default: "400",
      validator: (t) => Object.keys($).includes(t)
    }
  },
  computed: {
    defaultIcon() {
      return Z.get(this.kind);
    }
  }
}, H = {
  "aria-hidden": "true",
  class: "d-toast-layout-alternate__icon"
};
function J(t, a, e, g, c, n) {
  return d(), T("div", H, [
    i(t.$slots, "default", {}, () => [
      n.defaultIcon ? (d(), _(N(n.defaultIcon), {
        key: 0,
        size: e.size
      }, null, 8, ["size"])) : r("", !0)
    ])
  ]);
}
const Q = /* @__PURE__ */ y(G, [["render", J]]), W = {
  name: "ToastLayoutAlternate",
  components: {
    DtNoticeAction: E,
    DtNoticeContent: b,
    DtToastLayoutAlternateIcon: Q
  },
  inheritAttrs: !1,
  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 m.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 m.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: (t) => A.includes(t)
    },
    /**
     * Severity level of the toast, sets the icon and background
     * @values base, error, info, success, warning, gradient
     */
    kind: {
      type: String,
      default: "base",
      validator: (t) => L.includes(t)
    },
    /**
     * 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];
    },
    toastListeners() {
      return O(this.$attrs);
    }
  }
}, X = ["aria-hidden"], x = { class: "d-toast-alternate__dialog" }, tt = { class: "d-toast-alternate__header" }, et = { class: "d-toast-alternate__content" };
function nt(t, a, e, g, c, n) {
  const S = l("dt-toast-layout-alternate-icon"), I = l("dt-notice-content"), k = l("dt-notice-action");
  return e.isShown ? (d(), T("div", {
    key: 0,
    class: B([
      "d-toast-alternate",
      t.$attrs.class,
      n.kindClass
    ]),
    "data-qa": "dt-toast",
    "aria-hidden": (!e.isShown).toString()
  }, [
    u("div", x, [
      u("div", tt, [
        e.hideIcon ? r("", !0) : (d(), _(S, s({
          key: 0,
          kind: e.kind,
          size: "200"
        }, n.toastListeners), {
          default: o(() => [
            i(t.$slots, "icon")
          ]),
          _: 3
        }, 16, ["kind"])),
        h(I, s({
          "title-id": e.titleId,
          "content-id": e.contentId,
          title: e.title,
          role: e.role
        }, n.toastListeners), {
          titleOverride: o(() => [
            i(t.$slots, "titleOverride")
          ]),
          _: 3
        }, 16, ["title-id", "content-id", "title", "role"]),
        h(k, s({
          "hide-action": !0,
          "hide-close": e.hideClose,
          "button-size": "xs"
        }, n.toastListeners, {
          onClose: a[0] || (a[0] = (M) => t.$emit("close"))
        }), null, 16, ["hide-close"])
      ]),
      u("div", et, [
        i(t.$slots, "default", {}, () => [
          C(p(e.message), 1)
        ])
      ])
    ])
  ], 10, X)) : r("", !0);
}
const D = /* @__PURE__ */ y(W, [["render", nt]]), it = {
  compatConfig: { MODE: 3 },
  name: "DtToast",
  components: {
    ToastLayoutDefault: w,
    ToastLayoutAlternate: D
  },
  inheritAttrs: !1,
  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 `v-model` with this prop to update
     * the data in your component.
     * Supports v-model
     * @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: (t) => t >= v
    },
    /**
     * The layout / styling you wish to use for the toast.
     * @values default, alternate
     */
    layout: {
      type: String,
      default: "default",
      validator: (t) => V.includes(t)
    }
  },
  emits: [
    /**
     * Close button click event
     *
     * @event close
     */
    "close",
    /**
     * Sync show value
     *
     * @event update:show
     */
    "update:show"
  ],
  data() {
    return {
      isShown: !1,
      minDuration: v
    };
  },
  computed: {
    shouldSetTimeout() {
      return !!this.duration && this.duration >= this.minDuration;
    },
    selectedLayout() {
      return this.layout === "alternate" ? D : w;
    }
  },
  watch: {
    show: {
      handler: function(t) {
        this.isShown = t, t ? this.setTimeout() : clearTimeout(this.displayTimer);
      },
      immediate: !0
    }
  },
  unmounted() {
    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("close"), this.$emit("update:show", !1);
    }
  }
};
function ot(t, a, e, g, c, n) {
  return d(), _(N(n.selectedLayout), s({
    "is-shown": c.isShown,
    "title-id": e.titleId,
    "content-id": e.contentId,
    title: e.title,
    message: e.message,
    role: e.role,
    kind: e.kind,
    important: e.important,
    "hide-close": e.hideClose,
    "hide-icon": e.hideIcon,
    "hide-action": e.hideAction
  }, t.$attrs, { onClose: n.handleClose }), {
    icon: o(() => [
      i(t.$slots, "icon")
    ]),
    titleOverride: o(() => [
      i(t.$slots, "titleOverride")
    ]),
    action: o(() => [
      i(t.$slots, "action")
    ]),
    default: o(() => [
      i(t.$slots, "default", {}, () => [
        C(p(e.message), 1)
      ])
    ]),
    _: 3
  }, 16, ["is-shown", "title-id", "content-id", "title", "message", "role", "kind", "important", "hide-close", "hide-icon", "hide-action", "onClose"]);
}
const _t = /* @__PURE__ */ y(it, [["render", ot]]);
export {
  _t as default
};
//# sourceMappingURL=toast.js.map
