@everymatrix/helper-modal - npm Package Compare versions

Comparing version 0.0.3 to 0.0.123

dist/cjs/helper-modal.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-c35b2646.js');
+const index = require('./index-c6e4ec44.js');
 
@@ -31,3 +31,24 @@ /**
     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);
+    };
   }
@@ -39,5 +60,16 @@ handleHelperModalClose() {
   ;
+  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 &&
-      index.h("div", { class: this.visible ? "HelperModalWrapper HelperModalVisible" : "HelperModalWrapper" }, index.h("div", { class: "HelperModalWrapper HelperModalVisible" }, index.h("div", { class: "HelperModalContent" + (isMobile(this.userAgent) ? ' HelperModalMobileContent' : '') }, index.h("span", { class: "HelperModalClose" + (isMobile(this.userAgent) ? ' HelperModalMobileClose' : ''), onClick: this.handleHelperModalClose.bind(this) }, "X"), index.h("slot", null))))));
+      index.h("div", { class: this.visible ? "HelperModalWrapper HelperModalVisible" : "HelperModalWrapper", ref: el => this.stylingContainer = el }, index.h("div", { class: "HelperModalWrapper HelperModalVisible" }, index.h("div", { class: "HelperModalContent" + (isMobile(this.userAgent) ? ' HelperModalMobileContent' : '') }, index.h("span", { class: "HelperModalClose" + (isMobile(this.userAgent) ? ' HelperModalMobileClose' : ''), onClick: this.handleHelperModalClose.bind(this) }, "X"), index.h("slot", null))))));
   }
@@ -44,0 +76,0 @@ };

dist/cjs/helper-modal.cjs.js

 'use strict';
 
-const index = require('./index-c35b2646.js');
+const index = require('./index-c6e4ec44.js');
 
 /*
- Stencil Client Patch Browser v2.17.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
  */
@@ -18,3 +18,3 @@ const patchBrowser = () => {
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["helper-modal.cjs",[[1,"helper-modal",{"titleModal":[1,"title-modal"],"visible":[1540]}]]]], options);
+  return index.bootstrapLazy([["helper-modal.cjs",[[1,"helper-modal",{"titleModal":[1,"title-modal"],"visible":[1540],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
 });

dist/cjs/loader.cjs.js

@@ -5,6 +5,6 @@ 'use strict';
 
-const index = require('./index-c35b2646.js');
+const index = require('./index-c6e4ec44.js');
 
 /*
- Stencil Client Patch Esm v2.17.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
  */
@@ -18,3 +18,3 @@ const patchEsm = () => {
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["helper-modal.cjs",[[1,"helper-modal",{"titleModal":[1,"title-modal"],"visible":[1540]}]]]], options);
+  return index.bootstrapLazy([["helper-modal.cjs",[[1,"helper-modal",{"titleModal":[1,"title-modal"],"visible":[1540],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
   });
@@ -21,0 +21,0 @@ };

dist/collection/collection-manifest.json

@@ -7,3 +7,3 @@ {
     "name": "@stencil/core",
-    "version": "2.17.0",
+    "version": "2.15.2",
     "typescriptVersion": "4.5.4"
@@ -10,0 +10,0 @@ },

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

@@ -1,2 +0,2 @@
-import { Component, Event, h, Prop } from '@stencil/core';
+import { Component, Event, h, Prop, State } from '@stencil/core';
 import { isMobile } from "../../utils/utils";
@@ -9,3 +9,24 @@ export class HelperModal {
     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);
+    };
   }
@@ -17,5 +38,16 @@ handleHelperModalClose() {
   ;
+  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" },
+      h("div", { class: this.visible ? "HelperModalWrapper HelperModalVisible" : "HelperModalWrapper", ref: el => this.stylingContainer = el },
         h("div", { class: "HelperModalWrapper HelperModalVisible" },
@@ -69,4 +101,43 @@ h("div", { class: "HelperModalContent" + (isMobile(this.userAgent) ? ' HelperModalMobileContent' : '') },
       "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": false,
+      "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": false,
+      "defaultValue": "''"
     }
   }; }
+  static get states() { return {
+    "limitStylingAppends": {}
+  }; }
   static get events() { return [{
@@ -73,0 +144,0 @@ "method": "cancel",

dist/components/helper-modal.js

@@ -28,3 +28,24 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
     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);
+    };
   }
@@ -36,5 +57,16 @@ handleHelperModalClose() {
   ;
+  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" }, 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))))));
+      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))))));
   }
@@ -44,3 +76,6 @@ static get style() { return helperModalCss; }
     "titleModal": [1, "title-modal"],
-    "visible": [1540]
+    "visible": [1540],
+    "clientStyling": [1, "client-styling"],
+    "clientStylingUrlContent": [1, "client-styling-url-content"],
+    "limitStylingAppends": [32]
   }]);
@@ -47,0 +82,0 @@ function defineCustomElement$1() {

dist/components/index.d.ts

 /* HelperModal custom elements */
-export { HelperModal as HelperModal } from '../types/components/helper-modal/helper-modal';
 
+import type { Components, JSX } from "../types/components";
+
 /**
@@ -22,2 +23,5 @@ * Used to manually set the base path where assets can be found.
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export type { Components, JSX };
+
 export * from '../types';

dist/components/index.js

 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
-export { HelperModal, defineCustomElement as defineCustomElementHelperModal } from './helper-modal.js';

dist/esm/helper-modal.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h } from './index-3e9d116d.js';
+import { r as registerInstance, c as createEvent, h } from './index-4d594e7d.js';
 
@@ -26,3 +26,24 @@ /**
     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);
+    };
   }
@@ -34,5 +55,16 @@ handleHelperModalClose() {
   ;
+  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" }, 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))))));
+      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))))));
   }
@@ -39,0 +71,0 @@ };

dist/esm/helper-modal.js

@@ -1,5 +0,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-3e9d116d.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-4d594e7d.js';
 
 /*
- Stencil Client Patch Browser v2.17.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
  */
@@ -16,3 +16,3 @@ const patchBrowser = () => {
 patchBrowser().then(options => {
-  return bootstrapLazy([["helper-modal",[[1,"helper-modal",{"titleModal":[1,"title-modal"],"visible":[1540]}]]]], options);
+  return bootstrapLazy([["helper-modal",[[1,"helper-modal",{"titleModal":[1,"title-modal"],"visible":[1540],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
 });

dist/esm/loader.js

@@ -1,5 +0,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-3e9d116d.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-4d594e7d.js';
 
 /*
- Stencil Client Patch Esm v2.17.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
  */
@@ -13,3 +13,3 @@ const patchEsm = () => {
   return patchEsm().then(() => {
-  return bootstrapLazy([["helper-modal",[[1,"helper-modal",{"titleModal":[1,"title-modal"],"visible":[1540]}]]]], options);
+  return bootstrapLazy([["helper-modal",[[1,"helper-modal",{"titleModal":[1,"title-modal"],"visible":[1540],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
   });
@@ -16,0 +16,0 @@ };

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

@@ -1,1 +0,1 @@
-import{p as e,b as t}from"./p-179fe522.js";(()=>{const t=import.meta.url,a={};return""!==t&&(a.resourcesUrl=new URL(".",t).href),e(a)})().then((e=>t([["p-a3a00dfb",[[1,"helper-modal",{titleModal:[1,"title-modal"],visible:[1540]}]]]],e)));
+import{p as t,b as l}from"./p-1c2c3fd8.js";(()=>{const l=import.meta.url,i={};return""!==l&&(i.resourcesUrl=new URL(".",l).href),t(i)})().then((t=>l([["p-66f1c138",[[1,"helper-modal",{titleModal:[1,"title-modal"],visible:[1540],clientStyling:[1,"client-styling"],clientStylingUrlContent:[1,"client-styling-url-content"],limitStylingAppends:[32]}]]]],t)));

dist/types/components.d.ts

@@ -11,2 +11,10 @@ /* eslint-disable */
         /**
+          * Client custom styling via string
+         */
+        "clientStyling": string;
+        /**
+          * Client custom styling via url content
+         */
+        "clientStylingUrlContent": string;
+        /**
           * Modal title
@@ -21,6 +29,2 @@ */
 }
-export interface HelperModalCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLHelperModalElement;
-}
 declare global {
@@ -40,5 +44,13 @@ interface HTMLHelperModalElement extends Components.HelperModal, HTMLStencilElement {
         /**
+          * Client custom styling via string
+         */
+        "clientStyling"?: string;
+        /**
+          * Client custom styling via url content
+         */
+        "clientStylingUrlContent"?: string;
+        /**
           * The event triggered when the modal is closed
          */
-        "onModalCloseEvent"?: (event: HelperModalCustomEvent<any>) => void;
+        "onModalCloseEvent"?: (event: CustomEvent<any>) => void;
         /**
@@ -45,0 +57,0 @@ * Modal title

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

@@ -10,3 +10,13 @@ export declare class HelperModal {
   visible: boolean;
+  /**
+   * Client custom styling via string
+   */
+  clientStyling: string;
+  /**
+   * Client custom styling via url content
+   */
+  clientStylingUrlContent: string;
+  private limitStylingAppends;
   private userAgent;
+  private stylingContainer;
   /**
@@ -17,3 +27,6 @@ * The event triggered when the modal is closed
   handleHelperModalClose(): void;
+  componentDidRender(): void;
+  setClientStyling: () => void;
+  setClientStylingURL: () => void;
   render(): any;
 }

package.json

 {
   "name": "@everymatrix/helper-modal",
-  "version": "0.0.3",
+  "version": "0.0.123",
   "main": "./dist/index.cjs.js",
@@ -5,0 +5,0 @@ "module": "./dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

321987

increased by2.68%

Lines of code

5193

increased by4.4%

No dependency changes