@memberstack/dom 1.9.27 → 1.9.29

package/lib/utils/defaultMessageBox.js

@@ -1,42 +1,119 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.initCSS = exports.addErrorBox = exports.addSuccessBox = void 0;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/defaultMessageBox.ts
+var defaultMessageBox_exports = {};
+__export(defaultMessageBox_exports, {
+  addErrorBox: () => addErrorBox,
+  addSuccessBox: () => addSuccessBox,
+  initCSS: () => initCSS
+});
+module.exports = __toCommonJS(defaultMessageBox_exports);
 var closeIcon;
 if (typeof window !== "undefined") {
-    closeIcon = document.createElement("div");
-    closeIcon.setAttribute("id", "ms-status-close");
-    closeIcon.setAttribute("data-ms-message-close", "");
-    closeIcon.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z\" fill=\"white\"/></svg>";
+  closeIcon = document.createElement("div");
+  closeIcon.setAttribute("id", "ms-status-close");
+  closeIcon.setAttribute("data-ms-message-close", "");
+  closeIcon.innerHTML = `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" fill="white"/></svg>`;
 }
-var addSuccessBox = function () {
-    var successStatusIcon = document.createElement("div");
-    successStatusIcon.setAttribute("id", "ms-status-icon");
-    successStatusIcon.innerHTML = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"10\" cy=\"10\" r=\"10\" fill=\"#62d37f\"/><path d=\"M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Zm4.59-12.42L8 12.17 5.41 9.59 4 11l4 4 8-8-1.41-1.42Z\" fill=\"#fff\"/></svg>";
-    var successHTML = "<div data-ms-message class=\"ms-error-message\">\n\t\t".concat(successStatusIcon.outerHTML, "\n\t\t<div id=\"ms-message\" data-ms-message-text></div>\n\t\t").concat(closeIcon.outerHTML, "\n\t\t</div>");
-    var successdiv = document.createElement("div");
-    successdiv.setAttribute("data-ms-message", "success");
-    successdiv.innerHTML = successHTML;
-    successdiv.style.display = "none";
-    document.body.appendChild(successdiv);
+var addSuccessBox = () => {
+  const successStatusIcon = document.createElement("div");
+  successStatusIcon.setAttribute("id", "ms-status-icon");
+  successStatusIcon.innerHTML = `<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" fill="#62d37f"/><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Zm4.59-12.42L8 12.17 5.41 9.59 4 11l4 4 8-8-1.41-1.42Z" fill="#fff"/></svg>`;
+  const successHTML = `<div data-ms-message class="ms-error-message">
+		${successStatusIcon.outerHTML}
+		<div id="ms-message" data-ms-message-text></div>
+		${closeIcon.outerHTML}
+		</div>`;
+  const successdiv = document.createElement("div");
+  successdiv.setAttribute("data-ms-message", "success");
+  successdiv.innerHTML = successHTML;
+  successdiv.style.display = "none";
+  document.body.appendChild(successdiv);
 };
-exports.addSuccessBox = addSuccessBox;
-var addErrorBox = function () {
-    var errorStatusIcon = document.createElement("div");
-    errorStatusIcon.setAttribute("id", "ms-status-icon");
-    errorStatusIcon.innerHTML = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z\" fill=\"#E40023\"/></svg>";
-    var errorHTML = "<div data-ms-message class=\"ms-error-message\">\n\t\t".concat(errorStatusIcon.outerHTML, "\n\t\t<div id=\"ms-message\" data-ms-message-text></div>\n\t\t").concat(closeIcon.outerHTML, "\n\t\t</div>");
-    var errordiv = document.createElement("div");
-    errordiv.setAttribute("data-ms-message", "error");
-    errordiv.innerHTML = errorHTML;
-    errordiv.style.display = "none";
-    document.body.appendChild(errordiv);
+var addErrorBox = () => {
+  const errorStatusIcon = document.createElement("div");
+  errorStatusIcon.setAttribute("id", "ms-status-icon");
+  errorStatusIcon.innerHTML = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z" fill="#E40023"/></svg>`;
+  const errorHTML = `<div data-ms-message class="ms-error-message">
+		${errorStatusIcon.outerHTML}
+		<div id="ms-message" data-ms-message-text></div>
+		${closeIcon.outerHTML}
+		</div>`;
+  const errordiv = document.createElement("div");
+  errordiv.setAttribute("data-ms-message", "error");
+  errordiv.innerHTML = errorHTML;
+  errordiv.style.display = "none";
+  document.body.appendChild(errordiv);
 };
-exports.addErrorBox = addErrorBox;
-var initCSS = function () {
-    var cssEl = document.createElement("style");
-    var css = "\n\t\t@keyframes fadeIn {\n\t\t\t0% {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t100% {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t}\n\t\t.ms-error-message { \n\t\t\t\tposition: fixed;\n\t\t\t\tleft: 50%;\n\t\t\t\tbottom: 3%;\n\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t\tmargin: 0 auto;\n\t\t\t\tz-index: 10000000; \n\t\t\t\tdisplay: flex; \n\t\t\t\talign-items: center;\n\t\t\t\tpadding: 12px 16px;\n\t\t\t\tborder-radius: 8px; \n\t\t\t\tbackground-color: #0A0A0A; \n\t\t\t\tcolor: #fff; \n\t\t\t\tfont-size: 16.8px; \n\t\t\t\tline-height: 28px; \n\t\t\t\tfont-weight: 500; \n\t\t\t\ttransform-origin: center;\n\t\t\t\tanimation: fadeIn 0.2s ease-in;\n\t\t\t\t-webkit-animation: fadeIn 0.2s ease-in;\n\t\t\t\t-moz-animation: fadeIn 0.2s ease-in;\n\t\t\t\t-o-animation: fadeIn 0.2s ease-in;\n\t\t\t\t-ms-animation: fadeIn 0.2s ease-in;\n\t\t\t}\n\t\t\t#ms-status-icon {\n\t\t\t\twidth: 20px;\n\t\t\t\theight: 20px;\n\t\t\t\tmargin-right: 12px;\n\t\t\t\t}\n\t\t\t\t#ms-status-close {\n\t\t\t\t\tmargin-left: 20px;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t}\n\t\t\t\t\t#ms-status-close svg {\n\t\t\t\t\t\theight: 12px;\n\t\t\t\t\t}";
-    cssEl.setAttribute("data-ms-style", "");
-    cssEl.appendChild(document.createTextNode(css));
-    document.head.appendChild(cssEl);
+var initCSS = () => {
+  const cssEl = document.createElement("style");
+  const css = `
+		@keyframes fadeIn {
+			0% {
+				opacity: 0;
+			}
+			100% {
+				opacity: 1;
+			}
+		}
+		.ms-error-message { 
+				position: fixed;
+				left: 50%;
+				bottom: 3%;
+				transform: translate(-50%, -50%);
+				margin: 0 auto;
+				z-index: 10000000; 
+				display: flex; 
+				align-items: center;
+				padding: 12px 16px;
+				border-radius: 8px; 
+				background-color: #0A0A0A; 
+				color: #fff; 
+				font-size: 16.8px; 
+				line-height: 28px; 
+				font-weight: 500; 
+				transform-origin: center;
+				animation: fadeIn 0.2s ease-in;
+				-webkit-animation: fadeIn 0.2s ease-in;
+				-moz-animation: fadeIn 0.2s ease-in;
+				-o-animation: fadeIn 0.2s ease-in;
+				-ms-animation: fadeIn 0.2s ease-in;
+			}
+			#ms-status-icon {
+				width: 20px;
+				height: 20px;
+				margin-right: 12px;
+				}
+				#ms-status-close {
+					margin-left: 20px;
+					cursor: pointer;
+					}
+					#ms-status-close svg {
+						height: 12px;
+					}`;
+  cssEl.setAttribute("data-ms-style", "");
+  cssEl.appendChild(document.createTextNode(css));
+  document.head.appendChild(cssEl);
 };
-exports.initCSS = initCSS;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  addErrorBox,
+  addSuccessBox,
+  initCSS
+});

package/lib/utils/defaultMessageBox.mjs

@@ -0,0 +1,93 @@
+// src/utils/defaultMessageBox.ts
+var closeIcon;
+if (typeof window !== "undefined") {
+  closeIcon = document.createElement("div");
+  closeIcon.setAttribute("id", "ms-status-close");
+  closeIcon.setAttribute("data-ms-message-close", "");
+  closeIcon.innerHTML = `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" fill="white"/></svg>`;
+}
+var addSuccessBox = () => {
+  const successStatusIcon = document.createElement("div");
+  successStatusIcon.setAttribute("id", "ms-status-icon");
+  successStatusIcon.innerHTML = `<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" fill="#62d37f"/><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Zm4.59-12.42L8 12.17 5.41 9.59 4 11l4 4 8-8-1.41-1.42Z" fill="#fff"/></svg>`;
+  const successHTML = `<div data-ms-message class="ms-error-message">
+		${successStatusIcon.outerHTML}
+		<div id="ms-message" data-ms-message-text></div>
+		${closeIcon.outerHTML}
+		</div>`;
+  const successdiv = document.createElement("div");
+  successdiv.setAttribute("data-ms-message", "success");
+  successdiv.innerHTML = successHTML;
+  successdiv.style.display = "none";
+  document.body.appendChild(successdiv);
+};
+var addErrorBox = () => {
+  const errorStatusIcon = document.createElement("div");
+  errorStatusIcon.setAttribute("id", "ms-status-icon");
+  errorStatusIcon.innerHTML = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z" fill="#E40023"/></svg>`;
+  const errorHTML = `<div data-ms-message class="ms-error-message">
+		${errorStatusIcon.outerHTML}
+		<div id="ms-message" data-ms-message-text></div>
+		${closeIcon.outerHTML}
+		</div>`;
+  const errordiv = document.createElement("div");
+  errordiv.setAttribute("data-ms-message", "error");
+  errordiv.innerHTML = errorHTML;
+  errordiv.style.display = "none";
+  document.body.appendChild(errordiv);
+};
+var initCSS = () => {
+  const cssEl = document.createElement("style");
+  const css = `
+		@keyframes fadeIn {
+			0% {
+				opacity: 0;
+			}
+			100% {
+				opacity: 1;
+			}
+		}
+		.ms-error-message { 
+				position: fixed;
+				left: 50%;
+				bottom: 3%;
+				transform: translate(-50%, -50%);
+				margin: 0 auto;
+				z-index: 10000000; 
+				display: flex; 
+				align-items: center;
+				padding: 12px 16px;
+				border-radius: 8px; 
+				background-color: #0A0A0A; 
+				color: #fff; 
+				font-size: 16.8px; 
+				line-height: 28px; 
+				font-weight: 500; 
+				transform-origin: center;
+				animation: fadeIn 0.2s ease-in;
+				-webkit-animation: fadeIn 0.2s ease-in;
+				-moz-animation: fadeIn 0.2s ease-in;
+				-o-animation: fadeIn 0.2s ease-in;
+				-ms-animation: fadeIn 0.2s ease-in;
+			}
+			#ms-status-icon {
+				width: 20px;
+				height: 20px;
+				margin-right: 12px;
+				}
+				#ms-status-close {
+					margin-left: 20px;
+					cursor: pointer;
+					}
+					#ms-status-close svg {
+						height: 12px;
+					}`;
+  cssEl.setAttribute("data-ms-style", "");
+  cssEl.appendChild(document.createTextNode(css));
+  document.head.appendChild(cssEl);
+};
+export {
+  addErrorBox,
+  addSuccessBox,
+  initCSS
+};

package/package.json

@@ -1,7 +1,9 @@
 {
   "name": "@memberstack/dom",
-  "version": "1.9.27",
+  "version": "1.9.29",
   "main": "./lib/index.js",
+  "module": "./lib/index.mjs",
+  "types": "./lib/index.d.ts",
   "files": [
     "lib/**/*"
   ],
@@ -13,20 +15,24 @@
     "js-cookie": "^3.0.1"
   },
   "scripts": {
-    "prepublishOnly": "yarn workspace prebuilt-uis build && npx tsc",
-    "prepublishOnly:porter-dev": "yarn workspace prebuilt-uis build && npx tsc && yarn replace:vars:local endpoint=https://dev-client.memberstack.com",
+    "dev": "tsup --format esm,cjs --dts --watch --env.API_ENDPOINT=https://client.memberstack.com",
+    "build": "tsup --format esm,cjs --dts --env.API_ENDPOINT=https://client.memberstack.com",
+    "prepublishOnly": "yarn workspace prebuilt-uis build && yarn build:local",
+    "prepublishOnly:porter-prod": "yarn workspace prebuilt-uis build && tsup --format esm,cjs --dts --env.API_ENDPOINT=https://client.memberstack.com",
+    "prepublishOnly:porter-dev": "yarn workspace prebuilt-uis build && tsup --format esm,cjs --dts --env.API_ENDPOINT=https://dev-client.memberstack.com",
     "watch": "tsc-watch",
-    "watch:dev": "tsc-watch --onSuccess 'yarn replace:vars:local'",
-    "watch:dev-ngrok": "tsc-watch --onSuccess 'yarn replace:vars:local endpoint=https://client-testing.ngrok.io'",
-    "watch:dev-api": "tsc-watch --onSuccess 'yarn replace:vars:local endpoint=https://dev-client.memberstack.com'",
-    "clean": "rm -rf node_modules",
-    "replace:vars:local": "ts-node utils/replaceDynamicVars -development",
+    "watch:dev": "tsup --format esm,cjs --dts --watch --env.API_ENDPOINT=http://localhost:3005",
+    "watch:dev-ngrok": "tsup --format esm,cjs --dts --watch --env.API_ENDPOINT=https://client-testing.ngrok.io",
+    "watch:dev-api": "tsup --format esm,cjs --dts --watch --env.API_ENDPOINT=https://dev-client.memberstack.com",
+    "clean": "rm -rf node_modules lib",
     "deploy:latest": "npx np --tag latest --no-tests --any-branch",
     "deploy:next": "npx np --tag next --no-tests --any-branch",
-    "build:local": "npx tsc"
+    "build:local": "tsup --format esm,cjs --dts"
   },
   "devDependencies": {
     "replace-in-file": "^6.3.5",
-    "ts-jest": "^26.5.6"
+    "ts-jest": "^26.5.6",
+    "tsc-watch": "^6.0.4",
+    "tsup": "^7.2.0"
   }
 }

package/lib/utils/fileInput.d.ts

@@ -1 +0,0 @@
-export declare const createFileInputElement: () => HTMLInputElement;

package/lib/utils/fileInput.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createFileInputElement = void 0;
-var createFileInputElement = function () {
-    var fileInputField = document.createElement("input");
-    fileInputField.setAttribute("required", "");
-    fileInputField.setAttribute("type", "file");
-    fileInputField.setAttribute("accept", "image/*");
-    fileInputField.setAttribute("profile-image", "true");
-    fileInputField.setAttribute("name", "profile-image");
-    fileInputField.setAttribute("data-name", "File");
-    fileInputField.setAttribute("hidden", "");
-    fileInputField.setAttribute("tabindex", "-1");
-    return fileInputField;
-};
-exports.createFileInputElement = createFileInputElement;