@haiilo/catalyst 1.3.1 → 2.0.0

package/dist/components/cat-toast-demo.js

@@ -1,647 +0,0 @@
-import { proxyCustomElement, HTMLElement as HTMLElement$1, h } from '@stencil/core/internal/client';
-import { c as createCommonjsModule, a as commonjsGlobal } from './loglevel.js';
-import { d as defineCustomElement$4 } from './cat-button2.js';
-import { d as defineCustomElement$3 } from './cat-icon2.js';
-import { d as defineCustomElement$2 } from './cat-spinner2.js';
-
-var toastify = createCommonjsModule(function (module) {
-/*!
- * Toastify js 1.12.0
- * https://github.com/apvarun/toastify-js
- * @license MIT licensed
- *
- * Copyright (C) 2018 Varun A P
- */
-(function(root, factory) {
-  if (module.exports) {
-    module.exports = factory();
-  } else {
-    root.Toastify = factory();
-  }
-})(commonjsGlobal, function(global) {
-  // Object initialization
-  var Toastify = function(options) {
-      // Returning a new init object
-      return new Toastify.lib.init(options);
-    },
-    // Library version
-    version = "1.12.0";
-
-  // Set the default global options
-  Toastify.defaults = {
-    oldestFirst: true,
-    text: "Toastify is awesome!",
-    node: undefined,
-    duration: 3000,
-    selector: undefined,
-    callback: function () {
-    },
-    destination: undefined,
-    newWindow: false,
-    close: false,
-    gravity: "toastify-top",
-    positionLeft: false,
-    position: '',
-    backgroundColor: '',
-    avatar: "",
-    className: "",
-    stopOnFocus: true,
-    onClick: function () {
-    },
-    offset: {x: 0, y: 0},
-    escapeMarkup: true,
-    ariaLive: 'polite',
-    style: {background: ''}
-  };
-
-  // Defining the prototype of the object
-  Toastify.lib = Toastify.prototype = {
-    toastify: version,
-
-    constructor: Toastify,
-
-    // Initializing the object with required parameters
-    init: function(options) {
-      // Verifying and validating the input object
-      if (!options) {
-        options = {};
-      }
-
-      // Creating the options object
-      this.options = {};
-
-      this.toastElement = null;
-
-      // Validating the options
-      this.options.text = options.text || Toastify.defaults.text; // Display message
-      this.options.node = options.node || Toastify.defaults.node;  // Display content as node
-      this.options.duration = options.duration === 0 ? 0 : options.duration || Toastify.defaults.duration; // Display duration
-      this.options.selector = options.selector || Toastify.defaults.selector; // Parent selector
-      this.options.callback = options.callback || Toastify.defaults.callback; // Callback after display
-      this.options.destination = options.destination || Toastify.defaults.destination; // On-click destination
-      this.options.newWindow = options.newWindow || Toastify.defaults.newWindow; // Open destination in new window
-      this.options.close = options.close || Toastify.defaults.close; // Show toast close icon
-      this.options.gravity = options.gravity === "bottom" ? "toastify-bottom" : Toastify.defaults.gravity; // toast position - top or bottom
-      this.options.positionLeft = options.positionLeft || Toastify.defaults.positionLeft; // toast position - left or right
-      this.options.position = options.position || Toastify.defaults.position; // toast position - left or right
-      this.options.backgroundColor = options.backgroundColor || Toastify.defaults.backgroundColor; // toast background color
-      this.options.avatar = options.avatar || Toastify.defaults.avatar; // img element src - url or a path
-      this.options.className = options.className || Toastify.defaults.className; // additional class names for the toast
-      this.options.stopOnFocus = options.stopOnFocus === undefined ? Toastify.defaults.stopOnFocus : options.stopOnFocus; // stop timeout on focus
-      this.options.onClick = options.onClick || Toastify.defaults.onClick; // Callback after click
-      this.options.offset = options.offset || Toastify.defaults.offset; // toast offset
-      this.options.escapeMarkup = options.escapeMarkup !== undefined ? options.escapeMarkup : Toastify.defaults.escapeMarkup;
-      this.options.ariaLive = options.ariaLive || Toastify.defaults.ariaLive;
-      this.options.style = options.style || Toastify.defaults.style;
-      if(options.backgroundColor) {
-        this.options.style.background = options.backgroundColor;
-      }
-
-      // Returning the current object for chaining functions
-      return this;
-    },
-
-    // Building the DOM element
-    buildToast: function() {
-      // Validating if the options are defined
-      if (!this.options) {
-        throw "Toastify is not initialized";
-      }
-
-      // Creating the DOM object
-      var divElement = document.createElement("div");
-      divElement.className = "toastify on " + this.options.className;
-
-      // Positioning toast to left or right or center
-      if (!!this.options.position) {
-        divElement.className += " toastify-" + this.options.position;
-      } else {
-        // To be depreciated in further versions
-        if (this.options.positionLeft === true) {
-          divElement.className += " toastify-left";
-          console.warn('Property `positionLeft` will be depreciated in further versions. Please use `position` instead.');
-        } else {
-          // Default position
-          divElement.className += " toastify-right";
-        }
-      }
-
-      // Assigning gravity of element
-      divElement.className += " " + this.options.gravity;
-
-      if (this.options.backgroundColor) {
-        // This is being deprecated in favor of using the style HTML DOM property
-        console.warn('DEPRECATION NOTICE: "backgroundColor" is being deprecated. Please use the "style.background" property.');
-      }
-
-      // Loop through our style object and apply styles to divElement
-      for (var property in this.options.style) {
-        divElement.style[property] = this.options.style[property];
-      }
-
-      // Announce the toast to screen readers
-      if (this.options.ariaLive) {
-        divElement.setAttribute('aria-live', this.options.ariaLive);
-      }
-
-      // Adding the toast message/node
-      if (this.options.node && this.options.node.nodeType === Node.ELEMENT_NODE) {
-        // If we have a valid node, we insert it
-        divElement.appendChild(this.options.node);
-      } else {
-        if (this.options.escapeMarkup) {
-          divElement.innerText = this.options.text;
-        } else {
-          divElement.innerHTML = this.options.text;
-        }
-
-        if (this.options.avatar !== "") {
-          var avatarElement = document.createElement("img");
-          avatarElement.src = this.options.avatar;
-
-          avatarElement.className = "toastify-avatar";
-
-          if (this.options.position == "left" || this.options.positionLeft === true) {
-            // Adding close icon on the left of content
-            divElement.appendChild(avatarElement);
-          } else {
-            // Adding close icon on the right of content
-            divElement.insertAdjacentElement("afterbegin", avatarElement);
-          }
-        }
-      }
-
-      // Adding a close icon to the toast
-      if (this.options.close === true) {
-        // Create a span for close element
-        var closeElement = document.createElement("button");
-        closeElement.type = "button";
-        closeElement.setAttribute("aria-label", "Close");
-        closeElement.className = "toast-close";
-        closeElement.innerHTML = "✖";
-
-        // Triggering the removal of toast from DOM on close click
-        closeElement.addEventListener(
-          "click",
-          function(event) {
-            event.stopPropagation();
-            this.removeElement(this.toastElement);
-            window.clearTimeout(this.toastElement.timeOutValue);
-          }.bind(this)
-        );
-
-        //Calculating screen width
-        var width = window.innerWidth > 0 ? window.innerWidth : screen.width;
-
-        // Adding the close icon to the toast element
-        // Display on the right if screen width is less than or equal to 360px
-        if ((this.options.position == "left" || this.options.positionLeft === true) && width > 360) {
-          // Adding close icon on the left of content
-          divElement.insertAdjacentElement("afterbegin", closeElement);
-        } else {
-          // Adding close icon on the right of content
-          divElement.appendChild(closeElement);
-        }
-      }
-
-      // Clear timeout while toast is focused
-      if (this.options.stopOnFocus && this.options.duration > 0) {
-        var self = this;
-        // stop countdown
-        divElement.addEventListener(
-          "mouseover",
-          function(event) {
-            window.clearTimeout(divElement.timeOutValue);
-          }
-        );
-        // add back the timeout
-        divElement.addEventListener(
-          "mouseleave",
-          function() {
-            divElement.timeOutValue = window.setTimeout(
-              function() {
-                // Remove the toast from DOM
-                self.removeElement(divElement);
-              },
-              self.options.duration
-            );
-          }
-        );
-      }
-
-      // Adding an on-click destination path
-      if (typeof this.options.destination !== "undefined") {
-        divElement.addEventListener(
-          "click",
-          function(event) {
-            event.stopPropagation();
-            if (this.options.newWindow === true) {
-              window.open(this.options.destination, "_blank");
-            } else {
-              window.location = this.options.destination;
-            }
-          }.bind(this)
-        );
-      }
-
-      if (typeof this.options.onClick === "function" && typeof this.options.destination === "undefined") {
-        divElement.addEventListener(
-          "click",
-          function(event) {
-            event.stopPropagation();
-            this.options.onClick();
-          }.bind(this)
-        );
-      }
-
-      // Adding offset
-      if(typeof this.options.offset === "object") {
-
-        var x = getAxisOffsetAValue("x", this.options);
-        var y = getAxisOffsetAValue("y", this.options);
-
-        var xOffset = this.options.position == "left" ? x : "-" + x;
-        var yOffset = this.options.gravity == "toastify-top" ? y : "-" + y;
-
-        divElement.style.transform = "translate(" + xOffset + "," + yOffset + ")";
-
-      }
-
-      // Returning the generated element
-      return divElement;
-    },
-
-    // Displaying the toast
-    showToast: function() {
-      // Creating the DOM object for the toast
-      this.toastElement = this.buildToast();
-
-      // Getting the root element to with the toast needs to be added
-      var rootElement;
-      if (typeof this.options.selector === "string") {
-        rootElement = document.getElementById(this.options.selector);
-      } else if (this.options.selector instanceof HTMLElement || (typeof ShadowRoot !== 'undefined' && this.options.selector instanceof ShadowRoot)) {
-        rootElement = this.options.selector;
-      } else {
-        rootElement = document.body;
-      }
-
-      // Validating if root element is present in DOM
-      if (!rootElement) {
-        throw "Root element is not defined";
-      }
-
-      // Adding the DOM element
-      var elementToInsert = Toastify.defaults.oldestFirst ? rootElement.firstChild : rootElement.lastChild;
-      rootElement.insertBefore(this.toastElement, elementToInsert);
-
-      // Repositioning the toasts in case multiple toasts are present
-      Toastify.reposition();
-
-      if (this.options.duration > 0) {
-        this.toastElement.timeOutValue = window.setTimeout(
-          function() {
-            // Remove the toast from DOM
-            this.removeElement(this.toastElement);
-          }.bind(this),
-          this.options.duration
-        ); // Binding `this` for function invocation
-      }
-
-      // Supporting function chaining
-      return this;
-    },
-
-    hideToast: function() {
-      if (this.toastElement.timeOutValue) {
-        clearTimeout(this.toastElement.timeOutValue);
-      }
-      this.removeElement(this.toastElement);
-    },
-
-    // Removing the element from the DOM
-    removeElement: function(toastElement) {
-      // Hiding the element
-      // toastElement.classList.remove("on");
-      toastElement.className = toastElement.className.replace(" on", "");
-
-      // Removing the element from DOM after transition end
-      window.setTimeout(
-        function() {
-          // remove options node if any
-          if (this.options.node && this.options.node.parentNode) {
-            this.options.node.parentNode.removeChild(this.options.node);
-          }
-
-          // Remove the element from the DOM, only when the parent node was not removed before.
-          if (toastElement.parentNode) {
-            toastElement.parentNode.removeChild(toastElement);
-          }
-
-          // Calling the callback function
-          this.options.callback.call(toastElement);
-
-          // Repositioning the toasts again
-          Toastify.reposition();
-        }.bind(this),
-        400
-      ); // Binding `this` for function invocation
-    },
-  };
-
-  // Positioning the toasts on the DOM
-  Toastify.reposition = function() {
-
-    // Top margins with gravity
-    var topLeftOffsetSize = {
-      top: 15,
-      bottom: 15,
-    };
-    var topRightOffsetSize = {
-      top: 15,
-      bottom: 15,
-    };
-    var offsetSize = {
-      top: 15,
-      bottom: 15,
-    };
-
-    // Get all toast messages on the DOM
-    var allToasts = document.getElementsByClassName("toastify");
-
-    var classUsed;
-
-    // Modifying the position of each toast element
-    for (var i = 0; i < allToasts.length; i++) {
-      // Getting the applied gravity
-      if (containsClass(allToasts[i], "toastify-top") === true) {
-        classUsed = "toastify-top";
-      } else {
-        classUsed = "toastify-bottom";
-      }
-
-      var height = allToasts[i].offsetHeight;
-      classUsed = classUsed.substr(9, classUsed.length-1);
-      // Spacing between toasts
-      var offset = 15;
-
-      var width = window.innerWidth > 0 ? window.innerWidth : screen.width;
-
-      // Show toast in center if screen with less than or equal to 360px
-      if (width <= 360) {
-        // Setting the position
-        allToasts[i].style[classUsed] = offsetSize[classUsed] + "px";
-
-        offsetSize[classUsed] += height + offset;
-      } else {
-        if (containsClass(allToasts[i], "toastify-left") === true) {
-          // Setting the position
-          allToasts[i].style[classUsed] = topLeftOffsetSize[classUsed] + "px";
-
-          topLeftOffsetSize[classUsed] += height + offset;
-        } else {
-          // Setting the position
-          allToasts[i].style[classUsed] = topRightOffsetSize[classUsed] + "px";
-
-          topRightOffsetSize[classUsed] += height + offset;
-        }
-      }
-    }
-
-    // Supporting function chaining
-    return this;
-  };
-
-  // Helper function to get offset.
-  function getAxisOffsetAValue(axis, options) {
-
-    if(options.offset[axis]) {
-      if(isNaN(options.offset[axis])) {
-        return options.offset[axis];
-      }
-      else {
-        return options.offset[axis] + 'px';
-      }
-    }
-
-    return '0px';
-
-  }
-
-  function containsClass(elem, yourClass) {
-    if (!elem || typeof yourClass !== "string") {
-      return false;
-    } else if (
-      elem.className &&
-      elem.className
-        .trim()
-        .split(/\s+/gi)
-        .indexOf(yourClass) > -1
-    ) {
-      return true;
-    } else {
-      return false;
-    }
-  }
-
-  // Setting up the prototype for the init object
-  Toastify.lib.init.prototype = Toastify.lib;
-
-  // Returning the Toastify function to be assigned to the window object/module
-  return Toastify;
-});
-});
-
-var TypeIcons;
-(function (TypeIcons) {
-  TypeIcons["success"] = "check-circle-filled";
-  TypeIcons["error"] = "cross-circle-filled";
-  TypeIcons["info"] = "danger-filled";
-  TypeIcons["primary"] = "star-circle-filled";
-  TypeIcons["secondary"] = "info-circle-filled";
-})(TypeIcons || (TypeIcons = {}));
-const ToastPositions = {
-  'top-left': {
-    gravity: 'top',
-    position: 'left'
-  },
-  'top-center': {
-    gravity: 'top',
-    position: 'center'
-  },
-  'top-right': {
-    gravity: 'top',
-    position: 'right'
-  },
-  'bottom-left': {
-    gravity: 'bottom',
-    position: 'left'
-  },
-  'bottom-center': {
-    gravity: 'bottom',
-    position: 'center'
-  },
-  'bottom-right': {
-    gravity: 'bottom',
-    position: 'right'
-  }
-};
-class CatNotificationService {
-  error(title, message = ' ', options) {
-    const toastOptions = this.extractOptions(title, message, options);
-    toastify(toastOptions).showToast();
-  }
-  success(title, message = ' ', options) {
-    const toastOptions = this.extractOptions(title, message, options);
-    toastify(toastOptions).showToast();
-  }
-  info(title, message = ' ', options) {
-    const toastOptions = this.extractOptions(title, message, options);
-    toastify(toastOptions).showToast();
-  }
-  primary(title, message = ' ', options) {
-    const toastOptions = this.extractOptions(title, message, options);
-    toastify(toastOptions).showToast();
-  }
-  secondary(title, message = ' ', options) {
-    const toastOptions = this.extractOptions(title, message, options);
-    toastify(toastOptions).showToast();
-  }
-  toastHTMLTemplate(title, message = ' ', options) {
-    var _a;
-    const template = document.createElement('template');
-    const typeIcon = (options === null || options === void 0 ? void 0 : options.type) ? TypeIcons[options.type] : TypeIcons.secondary;
-    title = title.trim();
-    message = message.trim();
-    const hasMessage = message && message !== '';
-    const hasMessageClass = hasMessage ? 'has-message' : '';
-    template.innerHTML = `<div class="cat-toastify-wrapper">
-        <div class="cat-toastify-icon-wrapper ${(_a = options === null || options === void 0 ? void 0 : options.type) !== null && _a !== void 0 ? _a : 'secondary'}">
-             <cat-icon icon="${typeIcon}"></cat-icon>
-        </div>
-        <div class="cat-toastify-title-wrapper ${hasMessageClass}">
-            <div class="cat-toastify-title">${title}</div></div>
-        ${hasMessage ? `<div class="cat-toastify-message">${message}</div>` : ''}
-      </div>`;
-    return template.content.firstChild;
-  }
-  getPosition(options) {
-    const position = {
-      gravity: 'bottom',
-      position: 'left'
-    };
-    if ((options === null || options === void 0 ? void 0 : options.position) && ToastPositions[options.position]) {
-      position.position = ToastPositions[options.position].position;
-      position.gravity = ToastPositions[options.position].gravity;
-    }
-    return position;
-  }
-  extractOptions(title, message = ' ', options) {
-    const position = this.getPosition(options);
-    return {
-      node: (options === null || options === void 0 ? void 0 : options.content) ? options.content : this.toastHTMLTemplate(title, message, options),
-      duration: CatNotificationService.DURATION,
-      close: true,
-      className: 'cat-toastify',
-      gravity: position.gravity,
-      position: position.position,
-      stopOnFocus: true,
-      offset: {
-        x: '1.5rem',
-        y: '1.5rem'
-      }
-    };
-  }
-}
-CatNotificationService.DURATION = 80000;
-const NotificationsService = new CatNotificationService();
-
-const catToastDemoCss = ":host{display:block}";
-
-const CatToastDemo$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
-  constructor() {
-    super();
-    this.__registerHost();
-  }
-  render() {
-    return h("cat-button", { onClick: this.onClick.bind(this) }, "Show Notifications");
-  }
-  onClick() {
-    const infoOptions = {
-      position: 'top-left',
-      type: 'info'
-    };
-    const errorOptions = {
-      position: 'top-center',
-      type: 'error'
-    };
-    const errorOptions2 = {
-      position: 'bottom-left',
-      type: 'error'
-    };
-    const successOptions3 = {
-      position: 'bottom-right',
-      type: 'success'
-    };
-    const template = document.createElement('template');
-    template.innerHTML = `<div style="padding: 7px 30px 7px 10px">Custom HTML Node Content</div>`;
-    const successOptions4 = {
-      position: 'bottom-right',
-      type: 'success',
-      content: template.content.firstChild
-    };
-    const primaryOptions = {
-      position: 'bottom-right',
-      type: 'primary'
-    };
-    const secondaryOptions = {
-      position: 'bottom-right',
-      type: 'secondary'
-    };
-    NotificationsService.secondary('Secondary Click', 'secondary info', secondaryOptions);
-    NotificationsService.primary('primary Click', 'secondary info', primaryOptions);
-    NotificationsService.error('Default Click');
-    NotificationsService.error('Long default title, long default title, long default title, long default title');
-    NotificationsService.info('Info Click', 'Info message', infoOptions);
-    NotificationsService.success('', ' ', successOptions4);
-    NotificationsService.error('Error Title', ' ', errorOptions);
-    NotificationsService.error('Error 2 Title', 'Very long message, Very long message, Very long message, Very long message, Very long message, Very long message, Very long message, Very long message, Very long message, Very long message,Very long message, Very long message, Very long message, Very long message, Very long message, ', errorOptions2);
-    NotificationsService.success('Success Title - very long title without message', ' ', successOptions3);
-  }
-  static get style() { return catToastDemoCss; }
-}, [0, "cat-toast-demo"]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cat-toast-demo", "cat-button", "cat-icon", "cat-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cat-toast-demo":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CatToastDemo$1);
-      }
-      break;
-    case "cat-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "cat-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "cat-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const CatToastDemo = CatToastDemo$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { CatToastDemo, NotificationsService as N, defineCustomElement };
-
-//# sourceMappingURL=cat-toast-demo.js.map