primevue/toast/index.mjs

PrimeVue is a premium UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, wh

import { cn } from '@primeuix/utils';
import { setAttribute } from '@primeuix/utils/dom';
import { isString, isEmpty } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex';
import Portal from 'primevue/portal';
import ToastEventBus from 'primevue/toasteventbus';
import BaseComponent from '@primevue/core/basecomponent';
import ToastStyle from 'primevue/toast/style';
import Check from '@primeicons/vue/check';
import ExclamationTriangle from '@primeicons/vue/exclamation-triangle';
import InfoCircle from '@primeicons/vue/info-circle';
import Times from '@primeicons/vue/times';
import TimesCircle from '@primeicons/vue/times-circle';
import Ripple from 'primevue/ripple';
import { toRaw, resolveDirective, openBlock, createElementBlock, mergeProps, createBlock, resolveDynamicComponent, Fragment, createCommentVNode, createElementVNode, toDisplayString, normalizeProps, withDirectives, resolveComponent, withCtx, renderList } from 'vue';

var script$2 = {
  name: 'BaseToast',
  "extends": BaseComponent,
  props: {
    group: {
      type: String,
      "default": null
    },
    position: {
      type: String,
      "default": 'top-right'
    },
    mode: {
      type: String,
      "default": 'stacked'
    },
    gap: {
      type: Number,
      "default": 12
    },
    limit: {
      type: Number,
      "default": 3
    },
    autoZIndex: {
      type: Boolean,
      "default": true
    },
    baseZIndex: {
      type: Number,
      "default": 0
    },
    breakpoints: {
      type: Object,
      "default": null
    },
    closeIcon: {
      type: String,
      "default": undefined
    },
    infoIcon: {
      type: String,
      "default": undefined
    },
    warnIcon: {
      type: String,
      "default": undefined
    },
    errorIcon: {
      type: String,
      "default": undefined
    },
    successIcon: {
      type: String,
      "default": undefined
    },
    secondaryIcon: {
      type: String,
      "default": undefined
    },
    contrastIcon: {
      type: String,
      "default": undefined
    },
    closeButtonProps: {
      type: null,
      "default": null
    },
    onMouseEnter: {
      type: Function,
      "default": undefined
    },
    onMouseLeave: {
      type: Function,
      "default": undefined
    },
    onClick: {
      type: Function,
      "default": undefined
    }
  },
  style: ToastStyle,
  provide: function provide() {
    return {
      $pcToast: this,
      $parentInstance: this
    };
  }
};

function _typeof$2(o) { "@babel/helpers - typeof"; return _typeof$2 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$2(o); }
function _defineProperty$2(e, r, t) { return (r = _toPropertyKey$2(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
function _toPropertyKey$2(t) { var i = _toPrimitive$2(t, "string"); return "symbol" == _typeof$2(i) ? i : i + ""; }
function _toPrimitive$2(t, r) { if ("object" != _typeof$2(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$2(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var SWIPE_THRESHOLD = 50;
var VELOCITY_THRESHOLD = 0.11;
var SWIPE_OUT_DURATION = 500;
var script$1 = {
  name: 'ToastMessage',
  hostName: 'Toast',
  "extends": BaseComponent,
  inject: ['$pcToast'],
  emits: ['close'],
  closeTimeout: null,
  closeRaf: null,
  remainingTime: 0,
  timerStartTime: 0,
  pointerStartPosition: null,
  swipeStartTime: 0,
  props: {
    message: {
      type: null,
      "default": null
    },
    templates: {
      type: Object,
      "default": null
    },
    closeIcon: {
      type: String,
      "default": null
    },
    infoIcon: {
      type: String,
      "default": null
    },
    warnIcon: {
      type: String,
      "default": null
    },
    errorIcon: {
      type: String,
      "default": null
    },
    successIcon: {
      type: String,
      "default": null
    },
    secondaryIcon: {
      type: String,
      "default": null
    },
    contrastIcon: {
      type: String,
      "default": null
    },
    closeButtonProps: {
      type: null,
      "default": null
    },
    onMouseEnter: {
      type: Function,
      "default": undefined
    },
    onMouseLeave: {
      type: Function,
      "default": undefined
    },
    onClick: {
      type: Function,
      "default": undefined
    },
    index: {
      type: Number,
      "default": 0
    }
  },
  data: function data() {
    return {
      isMounted: false,
      measuredHeight: 0,
      removed: false,
      offsetBeforeRemove: 0,
      swiping: false,
      isSwiped: false,
      swipeOut: false,
      swipeDirection: null,
      swipeOutDirection: null,
      swipeAmountX: 0,
      swipeAmountY: 0
    };
  },
  watch: {
    shouldPauseTimer: function shouldPauseTimer(v) {
      if (this.removed) return;
      if (v) {
        this.pauseTimer();
      } else {
        this.startTimer();
      }
    }
  },
  mounted: function mounted() {
    var _this$$pcToast, _this$$pcToast$onEnte;
    this.measureHeight();
    this.isMounted = true;
    (_this$$pcToast = this.$pcToast) === null || _this$$pcToast === void 0 || (_this$$pcToast$onEnte = _this$$pcToast.onEnter) === null || _this$$pcToast$onEnte === void 0 || _this$$pcToast$onEnte.call(_this$$pcToast);
    if (!this.shouldPauseTimer) {
      this.startTimer();
    }
  },
  beforeUnmount: function beforeUnmount() {
    var _this$$pcToast2, _this$$pcToast2$onLea;
    this.clearCloseTimeout();
    (_this$$pcToast2 = this.$pcToast) === null || _this$$pcToast2 === void 0 || (_this$$pcToast2$onLea = _this$$pcToast2.onLeave) === null || _this$$pcToast2$onLea === void 0 || _this$$pcToast2$onLea.call(_this$$pcToast2);
  },
  unmounted: function unmounted() {
    if (this.removed) {
      var _this$$pcToast3, _this$$pcToast3$onAft;
      (_this$$pcToast3 = this.$pcToast) === null || _this$$pcToast3 === void 0 || (_this$$pcToast3$onAft = _this$$pcToast3.onAfterLeave) === null || _this$$pcToast3$onAft === void 0 || _this$$pcToast3$onAft.call(_this$$pcToast3);
    }
  },
  methods: {
    measureHeight: function measureHeight() {
      var _this$$pcToast4, _this$$pcToast4$onIte;
      var el = this.$refs.messageEl;
      if (!el) return;
      var originalHeight = el.style.height;
      el.style.height = 'auto';
      var height = el.getBoundingClientRect().height;
      el.style.height = originalHeight;
      this.measuredHeight = height;
      (_this$$pcToast4 = this.$pcToast) === null || _this$$pcToast4 === void 0 || (_this$$pcToast4$onIte = _this$$pcToast4.onItemHeightChange) === null || _this$$pcToast4$onIte === void 0 || _this$$pcToast4$onIte.call(_this$$pcToast4, {
        index: this.index,
        height: height
      });
    },
    startTimer: function startTimer() {
      var _this = this;
      this.clearCloseTimeout();
      if (this.message.sticky) return;
      if (!this.remainingTime || this.remainingTime <= 0) {
        if (!this.message.life) return;
        this.remainingTime = this.message.life;
      }
      this.timerStartTime = Date.now();
      this.closeTimeout = setTimeout(function () {
        _this.onMessageRemoveFocus();
        _this.closeStack();
      }, this.remainingTime);
    },
    pauseTimer: function pauseTimer() {
      if (this.timerStartTime > 0 && this.closeTimeout) {
        var elapsed = Date.now() - this.timerStartTime;
        this.remainingTime = Math.max(0, this.remainingTime - elapsed);
      }
      this.clearCloseTimeout();
    },
    markRemoved: function markRemoved() {
      var _this$$pcToast5, _this$$pcToast5$onIte;
      this.offsetBeforeRemove = this.offset;
      this.removed = true;
      (_this$$pcToast5 = this.$pcToast) === null || _this$$pcToast5 === void 0 || (_this$$pcToast5$onIte = _this$$pcToast5.onItemHeightChange) === null || _this$$pcToast5$onIte === void 0 || _this$$pcToast5$onIte.call(_this$$pcToast5, {
        index: this.index,
        height: 0,
        removed: true
      });
    },
    isDismissible: function isDismissible() {
      var _this$message;
      return ((_this$message = this.message) === null || _this$message === void 0 ? void 0 : _this$message.closable) !== false;
    },
    onPointerDown: function onPointerDown(event) {
      if (event.button !== 0) return;
      if (!this.isDismissible()) return;
      this.swipeStartTime = Date.now();
      this.offsetBeforeRemove = this.offset;
      try {
        event.target.setPointerCapture(event.pointerId);
      } catch (_) {
        // ignore — some elements don't support pointer capture
      }
      this.swiping = true;
      this.pointerStartPosition = {
        x: event.clientX,
        y: event.clientY
      };
    },
    onPointerMove: function onPointerMove(event) {
      var _window$getSelection$, _window$getSelection, _this$$pcToast$positi, _this$$pcToast6;
      if (!this.pointerStartPosition || !this.isDismissible()) return;
      if (((_window$getSelection$ = (_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.toString().length) !== null && _window$getSelection$ !== void 0 ? _window$getSelection$ : 0) > 0) return;
      var yDelta = event.clientY - this.pointerStartPosition.y;
      var xDelta = event.clientX - this.pointerStartPosition.x;
      var isRealSwipe = Math.abs(xDelta) > 1 || Math.abs(yDelta) > 1;
      var positionParts = ((_this$$pcToast$positi = (_this$$pcToast6 = this.$pcToast) === null || _this$$pcToast6 === void 0 ? void 0 : _this$$pcToast6.position) !== null && _this$$pcToast$positi !== void 0 ? _this$$pcToast$positi : 'top-right').split('-');
      var side = positionParts[0];
      var align = positionParts[1];
      if (!this.swipeDirection && isRealSwipe) {
        this.swipeDirection = Math.abs(xDelta) > Math.abs(yDelta) ? 'x' : 'y';
      }
      var nextX = 0;
      var nextY = 0;
      if (this.swipeDirection === 'x') {
        var naturalDirection = align === 'left' && xDelta < 0 || align === 'right' && xDelta > 0;
        nextX = naturalDirection ? xDelta : this.applyDampening(xDelta);
      } else if (this.swipeDirection === 'y') {
        var _naturalDirection = side === 'top' && yDelta < 0 || side === 'bottom' && yDelta > 0;
        nextY = _naturalDirection ? yDelta : this.applyDampening(yDelta);
      }
      if (Math.abs(nextX) > 0 || Math.abs(nextY) > 0) {
        this.isSwiped = true;
      }
      this.swipeAmountX = nextX;
      this.swipeAmountY = nextY;
    },
    onPointerUp: function onPointerUp() {
      if (this.swipeOut || !this.isDismissible()) return;
      this.swiping = false;
      this.pointerStartPosition = null;
      var swipeAmount = this.swipeDirection === 'x' ? this.swipeAmountX : this.swipeAmountY;
      var elapsed = Date.now() - (this.swipeStartTime || Date.now());
      var velocity = elapsed > 0 ? Math.abs(swipeAmount) / elapsed : 0;
      if (Math.abs(swipeAmount) >= SWIPE_THRESHOLD || velocity > VELOCITY_THRESHOLD) {
        this.offsetBeforeRemove = this.offset;
        if (this.swipeDirection === 'x') {
          this.swipeOutDirection = this.swipeAmountX > 0 ? 'right' : 'left';
        } else {
          this.swipeOutDirection = this.swipeAmountY > 0 ? 'down' : 'up';
        }
        this.swipeOut = true;
        this.markRemoved();
        this.scheduleSwipeOutClose();
        return;
      }
      this.swipeAmountX = 0;
      this.swipeAmountY = 0;
      this.isSwiped = false;
      this.swipeDirection = null;
    },
    onDragEnd: function onDragEnd() {
      this.swiping = false;
      this.swipeDirection = null;
      this.pointerStartPosition = null;
    },
    applyDampening: function applyDampening(delta) {
      var factor = Math.abs(delta) / 20;
      var dampenedDelta = delta * (1 / (1.5 + factor));
      return Math.abs(dampenedDelta) < Math.abs(delta) ? dampenedDelta : delta;
    },
    scheduleSwipeOutClose: function scheduleSwipeOutClose() {
      var _this2 = this;
      this.clearCloseTimeout();
      this.closeTimeout = setTimeout(function () {
        _this2.close({
          message: _this2.message,
          type: 'close'
        });
      }, SWIPE_OUT_DURATION);
    },
    scheduleClose: function scheduleClose(type) {
      var _this3 = this;
      this.clearCloseTimeout();
      this.closeRaf = requestAnimationFrame(function () {
        _this3.closeRaf = null;
        var el = _this3.$refs.messageEl;
        var duration = el ? (parseFloat(getComputedStyle(el).transitionDuration) || 0) * 1000 : 0;
        _this3.closeTimeout = setTimeout(function () {
          _this3.close({
            message: _this3.message,
            type: type
          });
        }, duration || SWIPE_OUT_DURATION);
      });
    },
    closeStack: function closeStack() {
      this.markRemoved();
      this.scheduleClose('life-end');
    },
    close: function close(params) {
      this.$emit('close', params);
    },
    onCloseClick: function onCloseClick() {
      this.clearCloseTimeout();
      this.onMessageRemoveFocus();
      this.markRemoved();
      this.scheduleClose('close');
    },
    onMessageRemoveFocus: function onMessageRemoveFocus() {
      var _el$nextElementSiblin, _el$previousElementSi;
      var el = this.$refs.messageEl;
      if (!el) return;
      var activeEl = document.activeElement;
      if (!el.contains(activeEl)) return;
      var selector = '[data-pc-section="closebutton"]:not([tabindex="-1"])';
      var next = (_el$nextElementSiblin = el.nextElementSibling) === null || _el$nextElementSiblin === void 0 ? void 0 : _el$nextElementSiblin.querySelector(selector);
      var prev = (_el$previousElementSi = el.previousElementSibling) === null || _el$previousElementSi === void 0 ? void 0 : _el$previousElementSi.querySelector(selector);
      requestAnimationFrame(function () {
        if (next) next.focus({
          preventScroll: true
        });else if (prev) prev.focus({
          preventScroll: true
        });
      });
    },
    clearCloseTimeout: function clearCloseTimeout() {
      if (this.closeTimeout) {
        clearTimeout(this.closeTimeout);
        this.closeTimeout = null;
      }
      if (this.closeRaf) {
        cancelAnimationFrame(this.closeRaf);
        this.closeRaf = null;
      }
    },
    onMessageClick: function onMessageClick(event) {
      var _this$onClick;
      (_this$onClick = this.onClick) === null || _this$onClick === void 0 || _this$onClick.call(this, {
        originalEvent: event,
        message: this.message
      });
    },
    onMessageMouseEnter: function onMessageMouseEnter(event) {
      var _this$onMouseEnter;
      (_this$onMouseEnter = this.onMouseEnter) === null || _this$onMouseEnter === void 0 || _this$onMouseEnter.call(this, {
        originalEvent: event,
        message: this.message
      });
    },
    onMessageMouseLeave: function onMessageMouseLeave(event) {
      var _this$onMouseLeave;
      (_this$onMouseLeave = this.onMouseLeave) === null || _this$onMouseLeave === void 0 || _this$onMouseLeave.call(this, {
        originalEvent: event,
        message: this.message
      });
    },
    resolveIcon: function resolveIcon(icon) {
      return isString(icon) ? icon : toRaw(icon);
    },
    isComponentIcon: function isComponentIcon(icon) {
      return !!icon && !isString(icon);
    }
  },
  computed: {
    isExpanded: function isExpanded() {
      var _this$$pcToast$isExpa, _this$$pcToast7;
      return (_this$$pcToast$isExpa = (_this$$pcToast7 = this.$pcToast) === null || _this$$pcToast7 === void 0 ? void 0 : _this$$pcToast7.isExpanded) !== null && _this$$pcToast$isExpa !== void 0 ? _this$$pcToast$isExpa : false;
    },
    toastCount: function toastCount() {
      var _this$$pcToast$messag, _this$$pcToast8;
      return (_this$$pcToast$messag = (_this$$pcToast8 = this.$pcToast) === null || _this$$pcToast8 === void 0 || (_this$$pcToast8 = _this$$pcToast8.messages) === null || _this$$pcToast8 === void 0 ? void 0 : _this$$pcToast8.length) !== null && _this$$pcToast$messag !== void 0 ? _this$$pcToast$messag : 0;
    },
    isVisible: function isVisible() {
      var _this$$pcToast$getIsV, _this$$pcToast9, _this$$pcToast9$getIs;
      return (_this$$pcToast$getIsV = (_this$$pcToast9 = this.$pcToast) === null || _this$$pcToast9 === void 0 || (_this$$pcToast9$getIs = _this$$pcToast9.getIsVisible) === null || _this$$pcToast9$getIs === void 0 ? void 0 : _this$$pcToast9$getIs.call(_this$$pcToast9, this.index)) !== null && _this$$pcToast$getIsV !== void 0 ? _this$$pcToast$getIsV : false;
    },
    stackExpanded: function stackExpanded() {
      var _this$$pcToast$expand, _this$$pcToast0;
      return (_this$$pcToast$expand = (_this$$pcToast0 = this.$pcToast) === null || _this$$pcToast0 === void 0 ? void 0 : _this$$pcToast0.expanded) !== null && _this$$pcToast$expand !== void 0 ? _this$$pcToast$expand : false;
    },
    visibleIndex: function visibleIndex() {
      var _this$$pcToast$getVis, _this$$pcToast1, _this$$pcToast1$getVi;
      return (_this$$pcToast$getVis = (_this$$pcToast1 = this.$pcToast) === null || _this$$pcToast1 === void 0 || (_this$$pcToast1$getVi = _this$$pcToast1.getVisibleIndex) === null || _this$$pcToast1$getVi === void 0 ? void 0 : _this$$pcToast1$getVi.call(_this$$pcToast1, this.index)) !== null && _this$$pcToast$getVis !== void 0 ? _this$$pcToast$getVis : 0;
    },
    offset: function offset() {
      var _this$$pcToast$getOff, _this$$pcToast10, _this$$pcToast10$getO;
      return (_this$$pcToast$getOff = (_this$$pcToast10 = this.$pcToast) === null || _this$$pcToast10 === void 0 || (_this$$pcToast10$getO = _this$$pcToast10.getOffset) === null || _this$$pcToast10$getO === void 0 ? void 0 : _this$$pcToast10$getO.call(_this$$pcToast10, this.index)) !== null && _this$$pcToast$getOff !== void 0 ? _this$$pcToast$getOff : 0;
    },
    isInteracting: function isInteracting() {
      var _this$$pcToast$isInte, _this$$pcToast11;
      return (_this$$pcToast$isInte = (_this$$pcToast11 = this.$pcToast) === null || _this$$pcToast11 === void 0 ? void 0 : _this$$pcToast11.isInteracting) !== null && _this$$pcToast$isInte !== void 0 ? _this$$pcToast$isInte : false;
    },
    shouldPauseTimer: function shouldPauseTimer() {
      return this.stackExpanded || this.isInteracting || this.swiping;
    },
    isAriaHidden: function isAriaHidden() {
      return !this.isVisible && !this.removed ? 'true' : null;
    },
    isTabbable: function isTabbable() {
      if (this.removed) return false;
      return this.isVisible;
    },
    stackStyles: function stackStyles() {
      return {
        '--px-toast-index': this.removed ? this.index : this.visibleIndex,
        '--px-toast-z-index': this.toastCount - this.visibleIndex,
        '--px-initial-height': this.measuredHeight ? "".concat(this.measuredHeight, "px") : undefined,
        '--px-toast-offset': "".concat(this.removed ? this.offsetBeforeRemove : this.offset, "px"),
        '--px-swipe-amount-x': "".concat(this.swipeAmountX, "px"),
        '--px-swipe-amount-y': "".concat(this.swipeAmountY, "px"),
        'z-index': this.toastCount - this.visibleIndex
      };
    },
    iconComponent: function iconComponent() {
      return {
        info: this.infoIcon ? 'span' : InfoCircle,
        success: this.successIcon ? 'span' : Check,
        warn: this.warnIcon ? 'span' : ExclamationTriangle,
        error: this.errorIcon ? 'span' : TimesCircle,
        secondary: this.secondaryIcon ? 'span' : InfoCircle,
        contrast: this.contrastIcon ? 'span' : InfoCircle
      }[this.message.severity];
    },
    closeAriaLabel: function closeAriaLabel() {
      return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
    },
    dataP: function dataP() {
      return cn(_defineProperty$2({}, this.message.severity, this.message.severity));
    }
  },
  components: {
    Times: Times,
    InfoCircle: InfoCircle,
    Check: Check,
    ExclamationTriangle: ExclamationTriangle,
    TimesCircle: TimesCircle
  },
  directives: {
    ripple: Ripple
  }
};

function _typeof$1(o) { "@babel/helpers - typeof"; return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$1(o); }
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty$1(e, r, t) { return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
function _toPropertyKey$1(t) { var i = _toPrimitive$1(t, "string"); return "symbol" == _typeof$1(i) ? i : i + ""; }
function _toPrimitive$1(t, r) { if ("object" != _typeof$1(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$1(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var _hoisted_1$1 = ["aria-hidden", "data-p", "data-id", "data-index", "data-mounted", "data-removed", "data-front", "data-expanded", "data-visible", "data-swiping", "data-swiped", "data-swipe-out", "data-swipe-direction", "data-dismissible"];
var _hoisted_2 = ["data-p"];
var _hoisted_3 = ["data-p"];
var _hoisted_4 = ["data-p"];
var _hoisted_5 = ["aria-label", "tabindex", "data-p"];
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
  var _$props$message;
  var _directive_ripple = resolveDirective("ripple");
  return openBlock(), createElementBlock("div", mergeProps({
    ref: "messageEl",
    "class": [_ctx.cx('message'), $props.message.styleClass],
    role: "alert",
    "aria-live": "assertive",
    "aria-atomic": "true",
    "aria-hidden": $options.isAriaHidden,
    "data-p": $options.dataP,
    "data-id": (_$props$message = $props.message) === null || _$props$message === void 0 ? void 0 : _$props$message.id,
    "data-index": $props.index,
    "data-stack": "",
    "data-mounted": $data.isMounted ? '' : undefined,
    "data-removed": $data.removed ? '' : undefined,
    "data-front": $options.visibleIndex === 0 ? '' : undefined,
    "data-expanded": $options.isExpanded ? '' : undefined,
    "data-visible": $options.isVisible ? '' : undefined,
    "data-swiping": $data.swiping ? '' : undefined,
    "data-swiped": $data.isSwiped ? '' : undefined,
    "data-swipe-out": $data.swipeOut ? '' : undefined,
    "data-swipe-direction": $data.swipeOutDirection ? $data.swipeOutDirection : undefined,
    "data-dismissible": String($options.isDismissible()),
    style: $options.stackStyles
  }, _ctx.ptm('message'), {
    onClick: _cache[1] || (_cache[1] = function () {
      return $options.onMessageClick && $options.onMessageClick.apply($options, arguments);
    }),
    onMouseenter: _cache[2] || (_cache[2] = function () {
      return $options.onMessageMouseEnter && $options.onMessageMouseEnter.apply($options, arguments);
    }),
    onMouseleave: _cache[3] || (_cache[3] = function () {
      return $options.onMessageMouseLeave && $options.onMessageMouseLeave.apply($options, arguments);
    }),
    onPointerdown: _cache[4] || (_cache[4] = function () {
      return $options.onPointerDown && $options.onPointerDown.apply($options, arguments);
    }),
    onPointermove: _cache[5] || (_cache[5] = function () {
      return $options.onPointerMove && $options.onPointerMove.apply($options, arguments);
    }),
    onPointerup: _cache[6] || (_cache[6] = function () {
      return $options.onPointerUp && $options.onPointerUp.apply($options, arguments);
    }),
    onDragend: _cache[7] || (_cache[7] = function () {
      return $options.onDragEnd && $options.onDragEnd.apply($options, arguments);
    })
  }), [$props.templates.container ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.container), {
    key: 0,
    message: $props.message,
    closeCallback: $options.onCloseClick
  }, null, 8, ["message", "closeCallback"])) : (openBlock(), createElementBlock("div", mergeProps({
    key: 1,
    "class": [_ctx.cx('messageContent'), $props.message.contentStyleClass]
  }, _ctx.ptm('messageContent')), [!$props.templates.message ? (openBlock(), createElementBlock(Fragment, {
    key: 0
  }, [$props.templates.messageicon ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.messageicon), mergeProps({
    key: 0,
    message: $props.message,
    "class": _ctx.cx('messageIcon')
  }, _ctx.ptm('messageIcon')), null, 16, ["message", "class"])) : $options.isComponentIcon($props.message.icon) ? (openBlock(), createBlock(resolveDynamicComponent($options.resolveIcon($props.message.icon)), mergeProps({
    key: 1,
    "class": _ctx.cx('messageIcon')
  }, _ctx.ptm('messageIcon')), null, 16, ["class"])) : $props.message.icon ? (openBlock(), createElementBlock("span", mergeProps({
    key: 2,
    "class": [_ctx.cx('messageIcon'), $props.message.icon]
  }, _ctx.ptm('messageIcon')), null, 16)) : $options.iconComponent ? (openBlock(), createBlock(resolveDynamicComponent($options.iconComponent), mergeProps({
    key: 3,
    "class": _ctx.cx('messageIcon')
  }, _ctx.ptm('messageIcon')), null, 16, ["class"])) : createCommentVNode("", true), createElementVNode("div", mergeProps({
    "class": _ctx.cx('messageText'),
    "data-p": $options.dataP
  }, _ctx.ptm('messageText')), [createElementVNode("span", mergeProps({
    "class": _ctx.cx('summary'),
    "data-p": $options.dataP
  }, _ctx.ptm('summary')), toDisplayString($props.message.summary), 17, _hoisted_3), $props.message.detail ? (openBlock(), createElementBlock("div", mergeProps({
    key: 0,
    "class": _ctx.cx('detail'),
    "data-p": $options.dataP
  }, _ctx.ptm('detail')), toDisplayString($props.message.detail), 17, _hoisted_4)) : createCommentVNode("", true)], 16, _hoisted_2)], 64)) : (openBlock(), createBlock(resolveDynamicComponent($props.templates.message), {
    key: 1,
    message: $props.message
  }, null, 8, ["message"])), $props.message.closable !== false ? (openBlock(), createElementBlock("div", normalizeProps(mergeProps({
    key: 2
  }, _ctx.ptm('buttonContainer'))), [withDirectives((openBlock(), createElementBlock("button", mergeProps({
    "class": _ctx.cx('closeButton'),
    type: "button",
    "aria-label": $options.closeAriaLabel,
    tabindex: $options.isTabbable ? null : -1,
    onClick: _cache[0] || (_cache[0] = function () {
      return $options.onCloseClick && $options.onCloseClick.apply($options, arguments);
    }),
    "data-p": $options.dataP
  }, _objectSpread$1(_objectSpread$1({}, $props.closeButtonProps), _ctx.ptm('closeButton'))), [(openBlock(), createBlock(resolveDynamicComponent($props.templates.closeicon || 'Times'), mergeProps({
    "class": [_ctx.cx('closeIcon'), $props.closeIcon]
  }, _ctx.ptm('closeIcon')), null, 16, ["class"]))], 16, _hoisted_5)), [[_directive_ripple]])], 16)) : createCommentVNode("", true)], 16))], 16, _hoisted_1$1);
}

script$1.render = render$1;

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
var messageIdx = 0;
var script = {
  name: 'Toast',
  "extends": script$2,
  inheritAttrs: false,
  emits: ['close', 'life-end'],
  data: function data() {
    return {
      messages: [],
      expanded: false,
      removingCount: 0,
      heights: [],
      isInteracting: false
    };
  },
  styleElement: null,
  zIndexClearTimeout: null,
  mounted: function mounted() {
    ToastEventBus.on('add', this.onAdd);
    ToastEventBus.on('remove', this.onRemove);
    ToastEventBus.on('remove-group', this.onRemoveGroup);
    ToastEventBus.on('remove-all-groups', this.onRemoveAllGroups);
    if (this.breakpoints) {
      this.createStyle();
    }
  },
  beforeUnmount: function beforeUnmount() {
    this.destroyStyle();
    if (this.zIndexClearTimeout) {
      clearTimeout(this.zIndexClearTimeout);
      this.zIndexClearTimeout = null;
    }
    if (this.$refs.container && this.autoZIndex) {
      ZIndex.clear(this.$refs.container);
    }
    ToastEventBus.off('add', this.onAdd);
    ToastEventBus.off('remove', this.onRemove);
    ToastEventBus.off('remove-group', this.onRemoveGroup);
    ToastEventBus.off('remove-all-groups', this.onRemoveAllGroups);
  },
  methods: {
    add: function add(message) {
      if (message.id == null) {
        message.id = messageIdx++;
      }
      this.messages = [].concat(_toConsumableArray(this.messages), [message]);
    },
    remove: function remove(params) {
      var index = this.messages.findIndex(function (m) {
        return m.id === params.message.id;
      });
      if (index !== -1) {
        this.messages.splice(index, 1);
        this.heights = this.heights.filter(function (x) {
          return x.index !== index;
        }).map(function (x) {
          return x.index > index ? _objectSpread(_objectSpread({}, x), {}, {
            index: x.index - 1
          }) : x;
        });
        if (this.messages.length <= 1) {
          this.expanded = false;
        }
        this.$emit(params.type, {
          message: params.message
        });
      }
    },
    onAdd: function onAdd(message) {
      if (this.group == message.group) {
        this.add(message);
      }
    },
    onRemove: function onRemove(message) {
      this.remove({
        message: message,
        type: 'close'
      });
    },
    onRemoveGroup: function onRemoveGroup(group) {
      if (this.group === group) {
        this.messages = [];
        this.heights = [];
        this.removingCount = 0;
        this.expanded = false;
        this.isInteracting = false;
      }
    },
    onRemoveAllGroups: function onRemoveAllGroups() {
      var _this = this;
      var closingMessages = this.messages;
      this.messages = [];
      this.heights = [];
      this.removingCount = 0;
      this.expanded = false;
      this.isInteracting = false;
      closingMessages.forEach(function (message) {
        return _this.$emit('close', {
          message: message
        });
      });
    },
    onEnter: function onEnter() {
      if (this.autoZIndex && this.$refs.container && this.$refs.container.style.zIndex === '') {
        ZIndex.set('modal', this.$refs.container, this.baseZIndex || this.$primevue.config.zIndex.modal);
      }
    },
    onLeave: function onLeave() {
      var _this2 = this;
      if (this.$refs.container && this.autoZIndex && isEmpty(this.messages)) {
        if (this.zIndexClearTimeout) {
          clearTimeout(this.zIndexClearTimeout);
        }
        this.zIndexClearTimeout = setTimeout(function () {
          ZIndex.clear(_this2.$refs.container);
          _this2.zIndexClearTimeout = null;
        }, 200);
      }
    },
    onAfterLeave: function onAfterLeave() {
      this.removingCount = Math.max(0, this.removingCount - 1);
    },
    onContainerMouseEnter: function onContainerMouseEnter() {
      this.expanded = true;
    },
    onContainerMouseLeave: function onContainerMouseLeave(event) {
      if (this.isInteracting) return;
      if (this.isPointerOrFocusInside(event.relatedTarget)) {
        return;
      }
      this.expanded = false;
    },
    onContainerFocusIn: function onContainerFocusIn() {
      this.expanded = true;
    },
    onContainerFocusOut: function onContainerFocusOut(event) {
      if (this.isInteracting) return;
      if (this.isPointerOrFocusInside(event.relatedTarget)) {
        return;
      }
      this.expanded = false;
    },
    onContainerPointerDown: function onContainerPointerDown(event) {
      var target = event.target;
      if (target instanceof HTMLElement && target.closest('[data-dismissible="false"]')) return;
      this.isInteracting = true;
    },
    onContainerPointerUp: function onContainerPointerUp() {
      this.isInteracting = false;
    },
    isPointerOrFocusInside: function isPointerOrFocusInside(relatedTarget) {
      var container = this.$refs.container;
      return !!(relatedTarget && container && container.contains(relatedTarget));
    },
    onItemHeightChange: function onItemHeightChange(event) {
      if (event.removed) {
        this.heights = this.heights.filter(function (x) {
          return x.index !== event.index;
        });
        this.removingCount = this.removingCount + 1;
        return;
      }
      var existing = this.heights.findIndex(function (x) {
        return x.index === event.index;
      });
      if (existing >= 0) {
        var copy = _toConsumableArray(this.heights);
        copy[existing] = {
          index: event.index,
          height: event.height
        };
        this.heights = copy;
      } else {
        this.heights = [].concat(_toConsumableArray(this.heights), [{
          index: event.index,
          height: event.height
        }]).sort(function (a, b) {
          return a.index - b.index;
        });
      }
    },
    getVisibleIndex: function getVisibleIndex(domIndex) {
      var visualIdx = this.visibleIndexMap.get(domIndex);
      return visualIdx != null ? visualIdx : this.messages.length - 1 - domIndex;
    },
    getOffset: function getOffset(domIndex) {
      var _this$visibleIndexMap, _this$offsets$visualI;
      var visualIdx = (_this$visibleIndexMap = this.visibleIndexMap.get(domIndex)) !== null && _this$visibleIndexMap !== void 0 ? _this$visibleIndexMap : 0;
      return (_this$offsets$visualI = this.offsets[visualIdx]) !== null && _this$offsets$visualI !== void 0 ? _this$offsets$visualI : 0;
    },
    getIsVisible: function getIsVisible(domIndex) {
      return this.visibleDomIndices.has(domIndex);
    },
    createStyle: function createStyle() {
      if (!this.styleElement && !this.isUnstyled) {
        var _this$$primevue;
        this.styleElement = document.createElement('style');
        this.styleElement.type = 'text/css';
        setAttribute(this.styleElement, 'nonce', (_this$$primevue = this.$primevue) === null || _this$$primevue === void 0 || (_this$$primevue = _this$$primevue.config) === null || _this$$primevue === void 0 || (_this$$primevue = _this$$primevue.csp) === null || _this$$primevue === void 0 ? void 0 : _this$$primevue.nonce);
        document.head.appendChild(this.styleElement);
        var innerHTML = '';
        for (var breakpoint in this.breakpoints) {
          var breakpointStyle = '';
          for (var styleProp in this.breakpoints[breakpoint]) {
            breakpointStyle += styleProp + ':' + this.breakpoints[breakpoint][styleProp] + '!important;';
          }
          innerHTML += "\n                        @media screen and (max-width: ".concat(breakpoint, ") {\n                            .p-toast[").concat(this.$attrSelector, "] {\n                                ").concat(breakpointStyle, "\n                            }\n                        }\n                    ");
        }
        this.styleElement.innerHTML = innerHTML;
      }
    },
    destroyStyle: function destroyStyle() {
      if (this.styleElement) {
        document.head.removeChild(this.styleElement);
        this.styleElement = null;
      }
    }
  },
  computed: {
    isExpanded: function isExpanded() {
      return this.mode === 'expanded' || this.expanded;
    },
    sortedHeights: function sortedHeights() {
      return _toConsumableArray(this.heights).sort(function (a, b) {
        return b.index - a.index;
      });
    },
    frontToastHeight: function frontToastHeight() {
      var _this$sortedHeights$, _this$sortedHeights$2;
      return (_this$sortedHeights$ = (_this$sortedHeights$2 = this.sortedHeights[0]) === null || _this$sortedHeights$2 === void 0 ? void 0 : _this$sortedHeights$2.height) !== null && _this$sortedHeights$ !== void 0 ? _this$sortedHeights$ : 0;
    },
    offsets: function offsets() {
      var sorted = this.sortedHeights;
      var offsets = [0];
      for (var i = 1; i < sorted.length; i++) {
        offsets[i] = offsets[i - 1] + sorted[i - 1].height;
      }
      return offsets;
    },
    visibleIndexMap: function visibleIndexMap() {
      var map = new Map();
      this.sortedHeights.forEach(function (entry, idx) {
        return map.set(entry.index, idx);
      });
      return map;
    },
    visibleDomIndices: function visibleDomIndices() {
      return new Set(this.sortedHeights.slice(0, this.limit).map(function (x) {
        return x.index;
      }));
    },
    raiseFactor: function raiseFactor() {
      return (this.position || '').startsWith('bottom') ? -1 : 1;
    },
    hostDataExpanded: function hostDataExpanded() {
      return this.isExpanded ? '' : null;
    },
    containerStyle: function containerStyle() {
      var base = this.sx('root', true, {
        position: this.position
      });
      return [base, {
        '--px-gap': "".concat(this.gap, "px"),
        '--px-front-toast-height': "".concat(this.frontToastHeight, "px"),
        '--px-raise-factor': this.raiseFactor
      }];
    },
    dataP: function dataP() {
      return cn(_defineProperty({}, this.position, this.position));
    }
  },
  components: {
    ToastMessage: script$1,
    Portal: Portal
  }
};

var _hoisted_1 = ["data-p", "data-position", "data-expanded"];
function render(_ctx, _cache, $props, $setup, $data, $options) {
  var _component_ToastMessage = resolveComponent("ToastMessage");
  var _component_Portal = resolveComponent("Portal");
  return openBlock(), createBlock(_component_Portal, null, {
    "default": withCtx(function () {
      return [createElementVNode("div", mergeProps({
        ref: "container",
        "class": _ctx.cx('root'),
        style: $options.containerStyle,
        "data-p": $options.dataP,
        "data-position": _ctx.position,
        "data-expanded": $options.hostDataExpanded
      }, _ctx.ptmi('root'), {
        onMouseenter: _cache[1] || (_cache[1] = function () {
          return $options.onContainerMouseEnter && $options.onContainerMouseEnter.apply($options, arguments);
        }),
        onMouseleave: _cache[2] || (_cache[2] = function () {
          return $options.onContainerMouseLeave && $options.onContainerMouseLeave.apply($options, arguments);
        }),
        onFocusin: _cache[3] || (_cache[3] = function () {
          return $options.onContainerFocusIn && $options.onContainerFocusIn.apply($options, arguments);
        }),
        onFocusout: _cache[4] || (_cache[4] = function () {
          return $options.onContainerFocusOut && $options.onContainerFocusOut.apply($options, arguments);
        }),
        onPointerdown: _cache[5] || (_cache[5] = function () {
          return $options.onContainerPointerDown && $options.onContainerPointerDown.apply($options, arguments);
        }),
        onPointerup: _cache[6] || (_cache[6] = function () {
          return $options.onContainerPointerUp && $options.onContainerPointerUp.apply($options, arguments);
        })
      }), [(openBlock(true), createElementBlock(Fragment, null, renderList($data.messages, function (msg, i) {
        return openBlock(), createBlock(_component_ToastMessage, {
          key: msg.id,
          index: i,
          message: msg,
          templates: _ctx.$slots,
          closeIcon: _ctx.closeIcon,
          infoIcon: _ctx.infoIcon,
          warnIcon: _ctx.warnIcon,
          errorIcon: _ctx.errorIcon,
          successIcon: _ctx.successIcon,
          secondaryIcon: _ctx.secondaryIcon,
          contrastIcon: _ctx.contrastIcon,
          closeButtonProps: _ctx.closeButtonProps,
          onMouseEnter: _ctx.onMouseEnter,
          onMouseLeave: _ctx.onMouseLeave,
          onClick: _ctx.onClick,
          unstyled: _ctx.unstyled,
          onClose: _cache[0] || (_cache[0] = function ($event) {
            return $options.remove($event);
          }),
          pt: _ctx.pt
        }, null, 8, ["index", "message", "templates", "closeIcon", "infoIcon", "warnIcon", "errorIcon", "successIcon", "secondaryIcon", "contrastIcon", "closeButtonProps", "onMouseEnter", "onMouseLeave", "onClick", "unstyled", "pt"]);
      }), 128))], 16, _hoisted_1)];
    }),
    _: 1
  });
}

script.render = render;

export { script as default };