@everymatrix/helper-modal 1.32.4 → 1.33.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c6e4ec44.js');
+
+/*
+ Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["helper-modal.cjs",[[1,"helper-modal",{"titleModal":[513,"title-modal"],"visible":[1540],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "./components/helper-modal/helper-modal.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.15.2",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/helper-modal/helper-modal.css

@@ -0,0 +1,68 @@
+:host {
+  display: block;
+}
+
+.HelperModalWrapper {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  opacity: 0;
+  visibility: hidden;
+  transform: scale(1.1);
+  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
+  z-index: 1;
+}
+
+.HelperModalVisible {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1);
+  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
+}
+
+.HelperModalContent {
+  position: relative;
+  border: solid 1px #848e97;
+  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.007);
+  font-size: 14px;
+  padding: 10px 10px 5px 10px;
+  background-color: #fff;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 4px;
+  width: 600px;
+  max-height: 600px;
+  overflow-y: scroll;
+}
+
+.HelperModalMobileContent {
+  background: #FFF;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 4px;
+  width: 80%;
+  max-height: 350px;
+}
+
+.HelperModalClose {
+  cursor: pointer;
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  font-size: 20px;
+  color: #000;
+}
+
+.HelperModalMobileClose {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  font-size: 20px;
+  color: #000;
+}

package/dist/collection/components/helper-modal/helper-modal.js

@@ -0,0 +1,156 @@
+import { Component, Event, h, Prop, State } from '@stencil/core';
+import { isMobile } from "../../utils/utils";
+export class HelperModal {
+  constructor() {
+    /**
+     * Toggles if the helper is visible or not
+     */
+    this.visible = true;
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
+    this.limitStylingAppends = false;
+    this.userAgent = window.navigator.userAgent;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let cssFile = document.createElement('style');
+      setTimeout(() => {
+        cssFile.innerHTML = this.clientStylingUrlContent;
+        this.stylingContainer.prepend(cssFile);
+      }, 1);
+    };
+  }
+  handleHelperModalClose() {
+    this.visible = false;
+    this.cancel.emit();
+  }
+  ;
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrlContent)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  render() {
+    return ((this.visible &&
+      h("div", { class: this.visible ? "HelperModalWrapper HelperModalVisible" : "HelperModalWrapper", ref: el => this.stylingContainer = el },
+        h("div", { class: "HelperModalWrapper HelperModalVisible" },
+          h("div", { class: "HelperModalContent" + (isMobile(this.userAgent) ? ' HelperModalMobileContent' : '') },
+            h("span", { class: "HelperModalClose" + (isMobile(this.userAgent) ? ' HelperModalMobileClose' : ''), onClick: this.handleHelperModalClose.bind(this) }, "X"),
+            h("slot", null))))));
+  }
+  static get is() { return "helper-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["helper-modal.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["helper-modal.css"]
+  }; }
+  static get properties() { return {
+    "titleModal": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Modal title"
+      },
+      "attribute": "title-modal",
+      "reflect": true
+    },
+    "visible": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Toggles if the helper is visible or not"
+      },
+      "attribute": "visible",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "clientStyling": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via string"
+      },
+      "attribute": "client-styling",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "clientStylingUrlContent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via url content"
+      },
+      "attribute": "client-styling-url-content",
+      "reflect": true,
+      "defaultValue": "''"
+    }
+  }; }
+  static get states() { return {
+    "limitStylingAppends": {}
+  }; }
+  static get events() { return [{
+      "method": "cancel",
+      "name": "modalCloseEvent",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "The event triggered when the modal is closed"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/collection/utils/utils.js

@@ -0,0 +1,30 @@
+/**
+ * @name isMobile
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {Boolean} true or false
+ */
+export const isMobile = (userAgent) => {
+  return !!(userAgent.toLowerCase().match(/android/i) ||
+    userAgent.toLowerCase().match(/blackberry|bb/i) ||
+    userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+    userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+};
+/**
+ * @name getDevice
+ * @description A method that returns the type of the device
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {String} Android/iPhone/iPad/PC
+ */
+export const getDevice = (userAgent) => {
+  if (userAgent.toLowerCase().match(/android/i)) {
+    return 'Android';
+  }
+  if (userAgent.toLowerCase().match(/iphone/i)) {
+    return 'iPhone';
+  }
+  if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
+    return 'iPad';
+  }
+  return 'PC';
+};

package/dist/components/helper-modal.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface HelperModal extends Components.HelperModal, HTMLElement {}
+export const HelperModal: {
+  prototype: HelperModal;
+  new (): HelperModal;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/helper-modal.js

@@ -0,0 +1,96 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+/**
+ * @name isMobile
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {Boolean} true or false
+ */
+const isMobile = (userAgent) => {
+  return !!(userAgent.toLowerCase().match(/android/i) ||
+    userAgent.toLowerCase().match(/blackberry|bb/i) ||
+    userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+    userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+};
+
+const helperModalCss = ":host{display:block}.HelperModalWrapper{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.7);opacity:0;visibility:hidden;transform:scale(1.1);transition:visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;z-index:1}.HelperModalVisible{opacity:1;visibility:visible;transform:scale(1);transition:visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s}.HelperModalContent{position:relative;border:solid 1px #848e97;box-shadow:2px 2px 2px rgba(0, 0, 0, 0.007);font-size:14px;padding:10px 10px 5px 10px;background-color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:4px;width:600px;max-height:600px;overflow-y:scroll}.HelperModalMobileContent{background:#FFF;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:4px;width:80%;max-height:350px}.HelperModalClose{cursor:pointer;position:absolute;top:15px;right:15px;font-size:20px;color:#000}.HelperModalMobileClose{position:absolute;top:15px;right:15px;font-size:20px;color:#000}";
+
+const HelperModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.cancel = createEvent(this, "modalCloseEvent", 7);
+    /**
+     * Toggles if the helper is visible or not
+     */
+    this.visible = true;
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
+    this.limitStylingAppends = false;
+    this.userAgent = window.navigator.userAgent;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let cssFile = document.createElement('style');
+      setTimeout(() => {
+        cssFile.innerHTML = this.clientStylingUrlContent;
+        this.stylingContainer.prepend(cssFile);
+      }, 1);
+    };
+  }
+  handleHelperModalClose() {
+    this.visible = false;
+    this.cancel.emit();
+  }
+  ;
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrlContent)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  render() {
+    return ((this.visible &&
+      h("div", { class: this.visible ? "HelperModalWrapper HelperModalVisible" : "HelperModalWrapper", ref: el => this.stylingContainer = el }, h("div", { class: "HelperModalWrapper HelperModalVisible" }, h("div", { class: "HelperModalContent" + (isMobile(this.userAgent) ? ' HelperModalMobileContent' : '') }, h("span", { class: "HelperModalClose" + (isMobile(this.userAgent) ? ' HelperModalMobileClose' : ''), onClick: this.handleHelperModalClose.bind(this) }, "X"), h("slot", null))))));
+  }
+  static get style() { return helperModalCss; }
+}, [1, "helper-modal", {
+    "titleModal": [513, "title-modal"],
+    "visible": [1540],
+    "clientStyling": [513, "client-styling"],
+    "clientStylingUrlContent": [513, "client-styling-url-content"],
+    "limitStylingAppends": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["helper-modal"];
+  components.forEach(tagName => { switch (tagName) {
+    case "helper-modal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HelperModal$1);
+      }
+      break;
+  } });
+}
+
+const HelperModal = HelperModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HelperModal, defineCustomElement };

package/dist/components/index.d.ts

@@ -0,0 +1,26 @@
+/* HelperModal custom elements */
+
+import type { Components, JSX } from "../types/components";
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export type { Components, JSX };
+
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';

package/dist/esm/helper-modal.entry.js

@@ -0,0 +1,72 @@
+import { r as registerInstance, c as createEvent, h } from './index-4d594e7d.js';
+
+/**
+ * @name isMobile
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {Boolean} true or false
+ */
+const isMobile = (userAgent) => {
+  return !!(userAgent.toLowerCase().match(/android/i) ||
+    userAgent.toLowerCase().match(/blackberry|bb/i) ||
+    userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+    userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+};
+
+const helperModalCss = ":host{display:block}.HelperModalWrapper{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.7);opacity:0;visibility:hidden;transform:scale(1.1);transition:visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;z-index:1}.HelperModalVisible{opacity:1;visibility:visible;transform:scale(1);transition:visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s}.HelperModalContent{position:relative;border:solid 1px #848e97;box-shadow:2px 2px 2px rgba(0, 0, 0, 0.007);font-size:14px;padding:10px 10px 5px 10px;background-color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:4px;width:600px;max-height:600px;overflow-y:scroll}.HelperModalMobileContent{background:#FFF;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:4px;width:80%;max-height:350px}.HelperModalClose{cursor:pointer;position:absolute;top:15px;right:15px;font-size:20px;color:#000}.HelperModalMobileClose{position:absolute;top:15px;right:15px;font-size:20px;color:#000}";
+
+const HelperModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.cancel = createEvent(this, "modalCloseEvent", 7);
+    /**
+     * Toggles if the helper is visible or not
+     */
+    this.visible = true;
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
+    this.limitStylingAppends = false;
+    this.userAgent = window.navigator.userAgent;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let cssFile = document.createElement('style');
+      setTimeout(() => {
+        cssFile.innerHTML = this.clientStylingUrlContent;
+        this.stylingContainer.prepend(cssFile);
+      }, 1);
+    };
+  }
+  handleHelperModalClose() {
+    this.visible = false;
+    this.cancel.emit();
+  }
+  ;
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrlContent)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  render() {
+    return ((this.visible &&
+      h("div", { class: this.visible ? "HelperModalWrapper HelperModalVisible" : "HelperModalWrapper", ref: el => this.stylingContainer = el }, h("div", { class: "HelperModalWrapper HelperModalVisible" }, h("div", { class: "HelperModalContent" + (isMobile(this.userAgent) ? ' HelperModalMobileContent' : '') }, h("span", { class: "HelperModalClose" + (isMobile(this.userAgent) ? ' HelperModalMobileClose' : ''), onClick: this.handleHelperModalClose.bind(this) }, "X"), h("slot", null))))));
+  }
+};
+HelperModal.style = helperModalCss;
+
+export { HelperModal as helper_modal };

package/dist/esm/helper-modal.js

@@ -0,0 +1,17 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-4d594e7d.js';
+
+/*
+ Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = import.meta.url;
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return bootstrapLazy([["helper-modal",[[1,"helper-modal",{"titleModal":[513,"title-modal"],"visible":[1540],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
+});