primevue 3.29.2 → 3.30.0

package/toast/toast.cjs.js

@@ -1,9 +1,10 @@
 'use strict';
 
-var BaseComponent = require('primevue/basecomponent');
 var Portal = require('primevue/portal');
 var ToastEventBus = require('primevue/toasteventbus');
 var utils = require('primevue/utils');
+var BaseComponent = require('primevue/basecomponent');
+var usestyle = require('primevue/usestyle');
 var CheckIcon = require('primevue/icons/check');
 var ExclamationTriangleIcon = require('primevue/icons/exclamationtriangle');
 var InfoCircleIcon = require('primevue/icons/infocircle');
@@ -14,9 +15,9 @@ var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 var ToastEventBus__default = /*#__PURE__*/_interopDefaultLegacy(ToastEventBus);
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 var CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
 var ExclamationTriangleIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExclamationTriangleIcon);
 var InfoCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(InfoCircleIcon);
@@ -24,420 +25,428 @@ var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
 var TimesCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesCircleIcon);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
-var script$1 = {
-    name: 'ToastMessage',
-    extends: BaseComponent__default["default"],
-    emits: ['close'],
-    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
-        },
-        closeButtonProps: {
-            type: null,
-            default: null
-        }
+function _typeof$2(obj) { "@babel/helpers - typeof"; return _typeof$2 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$2(obj); }
+function _defineProperty$2(obj, key, value) { key = _toPropertyKey$2(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey$2(arg) { var key = _toPrimitive$2(arg, "string"); return _typeof$2(key) === "symbol" ? key : String(key); }
+function _toPrimitive$2(input, hint) { if (_typeof$2(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$2(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var styles = "\n.p-toast {\n    width: 25rem;\n}\n\n.p-toast-message-content {\n    display: flex;\n    align-items: flex-start;\n}\n\n.p-toast-message-text {\n    flex: 1 1 auto;\n}\n\n.p-toast-top-center {\n    transform: translateX(-50%);\n}\n\n.p-toast-bottom-center {\n    transform: translateX(-50%);\n}\n\n.p-toast-center {\n    min-width: 20vw;\n    transform: translate(-50%, -50%);\n}\n\n.p-toast-icon-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\n.p-toast-icon-close.p-link {\n    cursor: pointer;\n}\n\n/* Animations */\n.p-toast-message-enter-from {\n    opacity: 0;\n    -webkit-transform: translateY(50%);\n    -ms-transform: translateY(50%);\n    transform: translateY(50%);\n}\n\n.p-toast-message-leave-from {\n    max-height: 1000px;\n}\n\n.p-toast .p-toast-message.p-toast-message-leave-to {\n    max-height: 0;\n    opacity: 0;\n    margin-bottom: 0;\n    overflow: hidden;\n}\n\n.p-toast-message-enter-active {\n    -webkit-transition: transform 0.3s, opacity 0.3s;\n    transition: transform 0.3s, opacity 0.3s;\n}\n\n.p-toast-message-leave-active {\n    -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;\n    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;\n}\n";
+
+// Position
+var inlineStyles = {
+  root: function root(_ref) {
+    var position = _ref.position;
+    return {
+      position: 'fixed',
+      top: position === 'top-right' || position === 'top-left' || position === 'top-center' ? '20px' : position === 'center' ? '50%' : null,
+      right: (position === 'top-right' || position === 'bottom-right') && '20px',
+      bottom: (position === 'bottom-left' || position === 'bottom-right' || position === 'bottom-center') && '20px',
+      left: position === 'top-left' || position === 'bottom-left' ? '20px' : position === 'center' || position === 'top-center' || position === 'bottom-center' ? '50%' : null
+    };
+  }
+};
+var classes = {
+  root: function root(_ref2) {
+    var props = _ref2.props,
+      instance = _ref2.instance;
+    return ['p-toast p-component p-toast-' + props.position, {
+      'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+      'p-ripple-disabled': instance.$primevue.config.ripple === false
+    }];
+  },
+  container: function container(_ref3) {
+    var props = _ref3.props;
+    return ['p-toast-message', {
+      'p-toast-message-info': props.message.severity === 'info' || props.message.severity === undefined,
+      'p-toast-message-warn': props.message.severity === 'warn',
+      'p-toast-message-error': props.message.severity === 'error',
+      'p-toast-message-success': props.message.severity === 'success'
+    }];
+  },
+  content: 'p-toast-message-content',
+  icon: function icon(_ref4) {
+    var _ref5;
+    var props = _ref4.props;
+    return ['p-toast-message-icon', (_ref5 = {}, _defineProperty$2(_ref5, props.infoIcon, props.message.severity === 'info'), _defineProperty$2(_ref5, props.warnIcon, props.message.severity === 'warn'), _defineProperty$2(_ref5, props.errorIcon, props.message.severity === 'error'), _defineProperty$2(_ref5, props.successIcon, props.message.severity === 'success'), _ref5)];
+  },
+  text: 'p-toast-message-text',
+  summary: 'p-toast-summary',
+  detail: 'p-toast-detail',
+  button: 'p-toast-icon-close p-link',
+  buttonIcon: 'p-toast-icon-close-icon'
+};
+var _useStyle = usestyle.useStyle(styles, {
+    name: 'toast',
+    manual: true
+  }),
+  loadStyle = _useStyle.load;
+var script$2 = {
+  name: 'BaseToast',
+  "extends": BaseComponent__default["default"],
+  props: {
+    group: {
+      type: String,
+      "default": null
     },
-    closeTimeout: null,
-    mounted() {
-        if (this.message.life) {
-            this.closeTimeout = setTimeout(() => {
-                this.close({ message: this.message, type: 'life-end' });
-            }, this.message.life);
-        }
+    position: {
+      type: String,
+      "default": 'top-right'
     },
-    beforeUnmount() {
-        this.clearCloseTimeout();
+    autoZIndex: {
+      type: Boolean,
+      "default": true
     },
-    methods: {
-        close(params) {
-            this.$emit('close', params);
-        },
-        onCloseClick() {
-            this.clearCloseTimeout();
-            this.close({ message: this.message, type: 'close' });
-        },
-        clearCloseTimeout() {
-            if (this.closeTimeout) {
-                clearTimeout(this.closeTimeout);
-                this.closeTimeout = null;
-            }
-        }
+    baseZIndex: {
+      type: Number,
+      "default": 0
     },
-    computed: {
-        containerClass() {
-            return [
-                'p-toast-message',
-                this.message.styleClass,
-                {
-                    'p-toast-message-info': this.message.severity === 'info',
-                    'p-toast-message-warn': this.message.severity === 'warn',
-                    'p-toast-message-error': this.message.severity === 'error',
-                    'p-toast-message-success': this.message.severity === 'success'
-                }
-            ];
-        },
-        iconComponent() {
-            return {
-                info: !this.infoIcon && InfoCircleIcon__default["default"],
-                success: !this.successIcon && CheckIcon__default["default"],
-                warn: !this.warnIcon && ExclamationTriangleIcon__default["default"],
-                error: !this.errorIcon && TimesCircleIcon__default["default"]
-            }[this.message.severity];
-        },
-        iconClass() {
-            return [
-                {
-                    [this.infoIcon]: this.message.severity === 'info',
-                    [this.warnIcon]: this.message.severity === 'warn',
-                    [this.errorIcon]: this.message.severity === 'error',
-                    [this.successIcon]: this.message.severity === 'success'
-                }
-            ];
-        },
-        closeAriaLabel() {
-            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
-        }
+    breakpoints: {
+      type: Object,
+      "default": null
+    },
+    closeIcon: {
+      type: String,
+      "default": undefined
     },
-    components: {
-        TimesIcon: TimesIcon__default["default"],
-        InfoCircleIcon: InfoCircleIcon__default["default"],
-        CheckIcon: CheckIcon__default["default"],
-        ExclamationTriangleIcon: ExclamationTriangleIcon__default["default"],
-        TimesCircleIcon: TimesCircleIcon__default["default"]
+    infoIcon: {
+      type: String,
+      "default": undefined
     },
-    directives: {
-        ripple: Ripple__default["default"]
+    warnIcon: {
+      type: String,
+      "default": undefined
+    },
+    errorIcon: {
+      type: String,
+      "default": undefined
+    },
+    successIcon: {
+      type: String,
+      "default": undefined
+    },
+    closeButtonProps: {
+      type: null,
+      "default": null
     }
+  },
+  css: {
+    classes: classes,
+    inlineStyles: inlineStyles,
+    loadStyle: loadStyle
+  },
+  provide: function provide() {
+    return {
+      $parentInstance: this
+    };
+  }
 };
 
-const _hoisted_1 = ["aria-label"];
+var script$1 = {
+  name: 'ToastMessage',
+  "extends": BaseComponent__default["default"],
+  emits: ['close'],
+  closeTimeout: null,
+  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
+    },
+    closeButtonProps: {
+      type: null,
+      "default": null
+    }
+  },
+  mounted: function mounted() {
+    var _this = this;
+    if (this.message.life) {
+      this.closeTimeout = setTimeout(function () {
+        _this.close({
+          message: _this.message,
+          type: 'life-end'
+        });
+      }, this.message.life);
+    }
+  },
+  beforeUnmount: function beforeUnmount() {
+    this.clearCloseTimeout();
+  },
+  methods: {
+    close: function close(params) {
+      this.$emit('close', params);
+    },
+    onCloseClick: function onCloseClick() {
+      this.clearCloseTimeout();
+      this.close({
+        message: this.message,
+        type: 'close'
+      });
+    },
+    clearCloseTimeout: function clearCloseTimeout() {
+      if (this.closeTimeout) {
+        clearTimeout(this.closeTimeout);
+        this.closeTimeout = null;
+      }
+    }
+  },
+  computed: {
+    iconComponent: function iconComponent() {
+      return {
+        info: !this.infoIcon && InfoCircleIcon__default["default"],
+        success: !this.successIcon && CheckIcon__default["default"],
+        warn: !this.warnIcon && ExclamationTriangleIcon__default["default"],
+        error: !this.errorIcon && TimesCircleIcon__default["default"]
+      }[this.message.severity];
+    },
+    closeAriaLabel: function closeAriaLabel() {
+      return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
+    }
+  },
+  components: {
+    TimesIcon: TimesIcon__default["default"],
+    InfoCircleIcon: InfoCircleIcon__default["default"],
+    CheckIcon: CheckIcon__default["default"],
+    ExclamationTriangleIcon: ExclamationTriangleIcon__default["default"],
+    TimesCircleIcon: TimesCircleIcon__default["default"]
+  },
+  directives: {
+    ripple: Ripple__default["default"]
+  }
+};
 
+function _typeof$1(obj) { "@babel/helpers - typeof"; return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$1(obj); }
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty$1(obj, key, value) { key = _toPropertyKey$1(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey$1(arg) { var key = _toPrimitive$1(arg, "string"); return _typeof$1(key) === "symbol" ? key : String(key); }
+function _toPrimitive$1(input, hint) { if (_typeof$1(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$1(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var _hoisted_1 = ["aria-label"];
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _directive_ripple = vue.resolveDirective("ripple");
-
-  return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-    class: $options.containerClass,
+  var _directive_ripple = vue.resolveDirective("ripple");
+  return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+    "class": _ctx.cx('container'),
     role: "alert",
     "aria-live": "assertive",
     "aria-atomic": "true"
-  }, _ctx.ptm('container')), [
-    vue.createElementVNode("div", vue.mergeProps({
-      class: ["p-toast-message-content", $props.message.contentStyleClass]
-    }, _ctx.ptm('content')), [
-      (!$props.templates.message)
-        ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.icon ? $props.templates.icon : $options.iconComponent.name ? $options.iconComponent : 'span'), vue.mergeProps({
-              class: [$options.iconClass, "p-toast-message-icon"]
-            }, _ctx.ptm('icon')), null, 16, ["class"])),
-            vue.createElementVNode("div", vue.mergeProps({ class: "p-toast-message-text" }, _ctx.ptm('text')), [
-              vue.createElementVNode("span", vue.mergeProps({ class: "p-toast-summary" }, _ctx.ptm('summary')), vue.toDisplayString($props.message.summary), 17),
-              vue.createElementVNode("div", vue.mergeProps({ class: "p-toast-detail" }, _ctx.ptm('detail')), vue.toDisplayString($props.message.detail), 17)
-            ], 16)
-          ], 64))
-        : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.message), {
-            key: 1,
-            message: $props.message
-          }, null, 8, ["message"])),
-      ($props.message.closable !== false)
-        ? (vue.openBlock(), vue.createElementBlock("div", vue.normalizeProps(vue.mergeProps({ key: 2 }, _ctx.ptm('buttonContainer'))), [
-            vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
-              class: "p-toast-icon-close p-link",
-              type: "button",
-              "aria-label": $options.closeAriaLabel,
-              onClick: _cache[0] || (_cache[0] = (...args) => ($options.onCloseClick && $options.onCloseClick(...args))),
-              autofocus: ""
-            }, { ...$props.closeButtonProps, ..._ctx.ptm('button') }), [
-              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.closeicon || 'TimesIcon'), vue.mergeProps({
-                class: ['p-toast-icon-close-icon', $props.closeIcon]
-              }, _ctx.ptm('buttonIcon')), null, 16, ["class"]))
-            ], 16, _hoisted_1)), [
-              [_directive_ripple]
-            ])
-          ], 16))
-        : vue.createCommentVNode("", true)
-    ], 16)
-  ], 16))
+  }, _ctx.ptm('container')), [vue.createElementVNode("div", vue.mergeProps({
+    "class": [_ctx.cx('content'), $props.message.contentStyleClass]
+  }, _ctx.ptm('content')), [!$props.templates.message ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+    key: 0
+  }, [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.icon ? $props.templates.icon : $options.iconComponent && $options.iconComponent.name ? $options.iconComponent : 'span'), vue.mergeProps({
+    "class": _ctx.cx('icon')
+  }, _ctx.ptm('icon')), null, 16, ["class"])), vue.createElementVNode("div", vue.mergeProps({
+    "class": _ctx.cx('text')
+  }, _ctx.ptm('text')), [vue.createElementVNode("span", vue.mergeProps({
+    "class": _ctx.cx('summary')
+  }, _ctx.ptm('summary')), vue.toDisplayString($props.message.summary), 17), vue.createElementVNode("div", vue.mergeProps({
+    "class": _ctx.cx('detail')
+  }, _ctx.ptm('detail')), vue.toDisplayString($props.message.detail), 17)], 16)], 64)) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.message), {
+    key: 1,
+    message: $props.message
+  }, null, 8, ["message"])), $props.message.closable !== false ? (vue.openBlock(), vue.createElementBlock("div", vue.normalizeProps(vue.mergeProps({
+    key: 2
+  }, _ctx.ptm('buttonContainer'))), [vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
+    "class": _ctx.cx('button'),
+    type: "button",
+    "aria-label": $options.closeAriaLabel,
+    onClick: _cache[0] || (_cache[0] = function () {
+      return $options.onCloseClick && $options.onCloseClick.apply($options, arguments);
+    }),
+    autofocus: ""
+  }, _objectSpread$1(_objectSpread$1({}, $props.closeButtonProps), _ctx.ptm('button'))), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.closeicon || 'TimesIcon'), vue.mergeProps({
+    "class": [_ctx.cx('buttonIcon'), $props.closeIcon]
+  }, _ctx.ptm('buttonIcon')), null, 16, ["class"]))], 16, _hoisted_1)), [[_directive_ripple]])], 16)) : vue.createCommentVNode("", true)], 16)], 16);
 }
 
 script$1.render = render$1;
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var messageIdx = 0;
-
 var script = {
-    name: 'Toast',
-    extends: BaseComponent__default["default"],
-    inheritAttrs: false,
-    emits: ['close', 'life-end'],
-    props: {
-        group: {
-            type: String,
-            default: null
-        },
-        position: {
-            type: String,
-            default: 'top-right'
-        },
-        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
-        },
-        closeButtonProps: {
-            type: null,
-            default: null
+  name: 'Toast',
+  "extends": script$2,
+  inheritAttrs: false,
+  emits: ['close', 'life-end'],
+  data: function data() {
+    return {
+      messages: []
+    };
+  },
+  styleElement: null,
+  mounted: function mounted() {
+    ToastEventBus__default["default"].on('add', this.onAdd);
+    ToastEventBus__default["default"].on('remove-group', this.onRemoveGroup);
+    ToastEventBus__default["default"].on('remove-all-groups', this.onRemoveAllGroups);
+    if (this.breakpoints) {
+      this.createStyle();
+    }
+  },
+  beforeUnmount: function beforeUnmount() {
+    this.destroyStyle();
+    if (this.$refs.container && this.autoZIndex) {
+      utils.ZIndexUtils.clear(this.$refs.container);
+    }
+    ToastEventBus__default["default"].off('add', this.onAdd);
+    ToastEventBus__default["default"].off('remove-group', this.onRemoveGroup);
+    ToastEventBus__default["default"].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 = -1;
+      for (var i = 0; i < this.messages.length; i++) {
+        if (this.messages[i] === params.message) {
+          index = i;
+          break;
         }
+      }
+      this.messages.splice(index, 1);
+      this.$emit(params.type, {
+        message: params.message
+      });
     },
-    data() {
-        return {
-            messages: []
-        };
+    onAdd: function onAdd(message) {
+      if (this.group == message.group) {
+        this.add(message);
+      }
     },
-    styleElement: null,
-    mounted() {
-        ToastEventBus__default["default"].on('add', this.onAdd);
-        ToastEventBus__default["default"].on('remove-group', this.onRemoveGroup);
-        ToastEventBus__default["default"].on('remove-all-groups', this.onRemoveAllGroups);
-
-        if (this.breakpoints) {
-            this.createStyle();
-        }
+    onRemoveGroup: function onRemoveGroup(group) {
+      if (this.group === group) {
+        this.messages = [];
+      }
     },
-    beforeUnmount() {
-        this.destroyStyle();
-
-        if (this.$refs.container && this.autoZIndex) {
-            utils.ZIndexUtils.clear(this.$refs.container);
-        }
-
-        ToastEventBus__default["default"].off('add', this.onAdd);
-        ToastEventBus__default["default"].off('remove-group', this.onRemoveGroup);
-        ToastEventBus__default["default"].off('remove-all-groups', this.onRemoveAllGroups);
+    onRemoveAllGroups: function onRemoveAllGroups() {
+      this.messages = [];
     },
-    methods: {
-        add(message) {
-            if (message.id == null) {
-                message.id = messageIdx++;
-            }
-
-            this.messages = [...this.messages, message];
-        },
-        remove(params) {
-            let index = -1;
-
-            for (let i = 0; i < this.messages.length; i++) {
-                if (this.messages[i] === params.message) {
-                    index = i;
-                    break;
-                }
-            }
-
-            this.messages.splice(index, 1);
-            this.$emit(params.type, { message: params.message });
-        },
-        onAdd(message) {
-            if (this.group == message.group) {
-                this.add(message);
-            }
-        },
-        onRemoveGroup(group) {
-            if (this.group === group) {
-                this.messages = [];
-            }
-        },
-        onRemoveAllGroups() {
-            this.messages = [];
-        },
-        onEnter() {
-            this.$refs.container.setAttribute(this.attributeSelector, '');
-
-            if (this.autoZIndex) {
-                utils.ZIndexUtils.set('modal', this.$refs.container, this.baseZIndex || this.$primevue.config.zIndex.modal);
-            }
-        },
-        onLeave() {
-            if (this.$refs.container && this.autoZIndex && utils.ObjectUtils.isEmpty(this.messages)) {
-                setTimeout(() => {
-                    utils.ZIndexUtils.clear(this.$refs.container);
-                }, 200);
-            }
-        },
-        createStyle() {
-            if (!this.styleElement) {
-                this.styleElement = document.createElement('style');
-                this.styleElement.type = 'text/css';
-                document.head.appendChild(this.styleElement);
-
-                let innerHTML = '';
-
-                for (let breakpoint in this.breakpoints) {
-                    let breakpointStyle = '';
-
-                    for (let styleProp in this.breakpoints[breakpoint]) {
-                        breakpointStyle += styleProp + ':' + this.breakpoints[breakpoint][styleProp] + '!important;';
-                    }
-
-                    innerHTML += `
-                        @media screen and (max-width: ${breakpoint}) {
-                            .p-toast[${this.attributeSelector}] {
-                                ${breakpointStyle}
-                            }
-                        }
-                    `;
-                }
-
-                this.styleElement.innerHTML = innerHTML;
-            }
-        },
-        destroyStyle() {
-            if (this.styleElement) {
-                document.head.removeChild(this.styleElement);
-                this.styleElement = null;
-            }
-        }
+    onEnter: function onEnter() {
+      this.$refs.container.setAttribute(this.attributeSelector, '');
+      if (this.autoZIndex) {
+        utils.ZIndexUtils.set('modal', this.$refs.container, this.baseZIndex || this.$primevue.config.zIndex.modal);
+      }
     },
-    computed: {
-        containerClass() {
-            return [
-                'p-toast p-component p-toast-' + this.position,
-                {
-                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                    'p-ripple-disabled': this.$primevue.config.ripple === false
-                }
-            ];
-        },
-        attributeSelector() {
-            return utils.UniqueComponentId();
+    onLeave: function onLeave() {
+      var _this = this;
+      if (this.$refs.container && this.autoZIndex && utils.ObjectUtils.isEmpty(this.messages)) {
+        setTimeout(function () {
+          utils.ZIndexUtils.clear(_this.$refs.container);
+        }, 200);
+      }
+    },
+    createStyle: function createStyle() {
+      if (!this.styleElement && !this.isUnstyled) {
+        this.styleElement = document.createElement('style');
+        this.styleElement.type = 'text/css';
+        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.attributeSelector, "] {\n                                ").concat(breakpointStyle, "\n                            }\n                        }\n                    ");
         }
+        this.styleElement.innerHTML = innerHTML;
+      }
     },
-    components: {
-        ToastMessage: script$1,
-        Portal: Portal__default["default"]
+    destroyStyle: function destroyStyle() {
+      if (this.styleElement) {
+        document.head.removeChild(this.styleElement);
+        this.styleElement = null;
+      }
+    }
+  },
+  computed: {
+    attributeSelector: function attributeSelector() {
+      return utils.UniqueComponentId();
     }
+  },
+  components: {
+    ToastMessage: script$1,
+    Portal: Portal__default["default"]
+  }
 };
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_ToastMessage = vue.resolveComponent("ToastMessage");
-  const _component_Portal = vue.resolveComponent("Portal");
-
-  return (vue.openBlock(), vue.createBlock(_component_Portal, null, {
-    default: vue.withCtx(() => [
-      vue.createElementVNode("div", vue.mergeProps({
+  var _component_ToastMessage = vue.resolveComponent("ToastMessage");
+  var _component_Portal = vue.resolveComponent("Portal");
+  return vue.openBlock(), vue.createBlock(_component_Portal, null, {
+    "default": vue.withCtx(function () {
+      return [vue.createElementVNode("div", vue.mergeProps({
         ref: "container",
-        class: $options.containerClass
-      }, { ..._ctx.$attrs, ..._ctx.ptm('root') }), [
-        vue.createVNode(vue.TransitionGroup, vue.mergeProps({
-          name: "p-toast-message",
-          tag: "div",
-          onEnter: $options.onEnter,
-          onLeave: $options.onLeave
-        }, _ctx.ptm('message')), {
-          default: vue.withCtx(() => [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.messages, (msg) => {
-              return (vue.openBlock(), vue.createBlock(_component_ToastMessage, {
-                key: msg.id,
-                message: msg,
-                templates: _ctx.$slots,
-                closeIcon: $props.closeIcon,
-                infoIcon: $props.infoIcon,
-                warnIcon: $props.warnIcon,
-                errorIcon: $props.errorIcon,
-                successIcon: $props.successIcon,
-                closeButtonProps: $props.closeButtonProps,
-                onClose: _cache[0] || (_cache[0] = $event => ($options.remove($event))),
-                pt: _ctx.pt
-              }, null, 8, ["message", "templates", "closeIcon", "infoIcon", "warnIcon", "errorIcon", "successIcon", "closeButtonProps", "pt"]))
-            }), 128))
-          ]),
-          _: 1
-        }, 16, ["onEnter", "onLeave"])
-      ], 16)
-    ]),
+        "class": _ctx.cx('root'),
+        style: _ctx.sx('root', true, {
+          position: _ctx.position
+        })
+      }, _objectSpread(_objectSpread({}, _ctx.$attrs), _ctx.ptm('root'))), [vue.createVNode(vue.TransitionGroup, vue.mergeProps({
+        name: "p-toast-message",
+        tag: "div",
+        onEnter: $options.onEnter,
+        onLeave: $options.onLeave
+      }, _ctx.ptm('message')), {
+        "default": vue.withCtx(function () {
+          return [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.messages, function (msg) {
+            return vue.openBlock(), vue.createBlock(_component_ToastMessage, {
+              key: msg.id,
+              message: msg,
+              templates: _ctx.$slots,
+              closeIcon: _ctx.closeIcon,
+              infoIcon: _ctx.infoIcon,
+              warnIcon: _ctx.warnIcon,
+              errorIcon: _ctx.errorIcon,
+              successIcon: _ctx.successIcon,
+              closeButtonProps: _ctx.closeButtonProps,
+              onClose: _cache[0] || (_cache[0] = function ($event) {
+                return $options.remove($event);
+              }),
+              pt: _ctx.pt
+            }, null, 8, ["message", "templates", "closeIcon", "infoIcon", "warnIcon", "errorIcon", "successIcon", "closeButtonProps", "pt"]);
+          }), 128))];
+        }),
+        _: 1
+      }, 16, ["onEnter", "onLeave"])], 16)];
+    }),
     _: 1
-  }))
+  });
 }
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = "\n.p-toast {\n    position: fixed;\n    width: 25rem;\n}\n.p-toast-message-content {\n    display: flex;\n    align-items: flex-start;\n}\n.p-toast-message-text {\n    flex: 1 1 auto;\n}\n.p-toast-top-right {\n    top: 20px;\n    right: 20px;\n}\n.p-toast-top-left {\n    top: 20px;\n    left: 20px;\n}\n.p-toast-bottom-left {\n    bottom: 20px;\n    left: 20px;\n}\n.p-toast-bottom-right {\n    bottom: 20px;\n    right: 20px;\n}\n.p-toast-top-center {\n    top: 20px;\n    left: 50%;\n    transform: translateX(-50%);\n}\n.p-toast-bottom-center {\n    bottom: 20px;\n    left: 50%;\n    transform: translateX(-50%);\n}\n.p-toast-center {\n    left: 50%;\n    top: 50%;\n    min-width: 20vw;\n    transform: translate(-50%, -50%);\n}\n.p-toast-icon-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n.p-toast-icon-close.p-link {\n    cursor: pointer;\n}\n\n/* Animations */\n.p-toast-message-enter-from {\n    opacity: 0;\n    -webkit-transform: translateY(50%);\n    -ms-transform: translateY(50%);\n    transform: translateY(50%);\n}\n.p-toast-message-leave-from {\n    max-height: 1000px;\n}\n.p-toast .p-toast-message.p-toast-message-leave-to {\n    max-height: 0;\n    opacity: 0;\n    margin-bottom: 0;\n    overflow: hidden;\n}\n.p-toast-message-enter-active {\n    -webkit-transition: transform 0.3s, opacity 0.3s;\n    transition: transform 0.3s, opacity 0.3s;\n}\n.p-toast-message-leave-active {\n    -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;\n    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;\n}\n";
-styleInject(css_248z);
-
 script.render = render;
 
 module.exports = script;