help-and-feedback-component - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

dist/collection/collection-manifest.json

@@ -27,2 +27,7 @@ {
           "attr": "color"
+        },
+        {
+          "name": "dataUrl",
+          "type": "String",
+          "attr": "data-url"
         }
@@ -66,2 +71,7 @@ ],
         {
+          "name": "content",
+          "type": "String",
+          "attr": "content"
+        },
+        {
           "name": "isModalOpen",
@@ -68,0 +78,0 @@ "type": "Boolean",

dist/collection/components/help-and-feedback/help-and-feedback.js

@@ -32,2 +32,11 @@ export class HelpAndFeedback {
         this.setColors(this.color);
+        if (this.dataUrl) {
+            return fetch(this.dataUrl)
+                .then(response => response.json())
+                .then(data => {
+                if (data.content) {
+                    this.content = data.content;
+                }
+            });
+        }
     }
@@ -39,4 +48,4 @@ render() {
             h("div", null, this.isModalOpen
-                ? h("modal-help-and-feedback", { onClick: () => this.hideModal(), class: 'modal-container', "is-modal-open": 'true', "background-color": this.background })
-                : h("modal-help-and-feedback", { "is-modal-open": 'false', "background-color": this.background }))
+                ? h("modal-help-and-feedback", { onClick: () => this.hideModal(), class: 'modal-container', "is-modal-open": 'true', "background-color": this.background, content: this.content })
+                : h("modal-help-and-feedback", { "is-modal-open": 'false', "background-color": this.background, content: this.content }))
         ]);
@@ -54,2 +63,6 @@ }
         },
+        "dataUrl": {
+            "type": String,
+            "attr": "data-url"
+        },
         "iconButtonElement": {
@@ -56,0 +69,0 @@ "elementRef": true

dist/collection/components/modal/modal.js

@@ -17,3 +17,4 @@ export class ModalHelpAndFeedback {
                     h("button", { class: 'material icon-button', "aria-label": 'close help and feedback', onClick: (event) => this.closeModal(event) },
-                        h("i", { class: 'material-icons' }, "close")))));
+                        h("i", { class: 'material-icons' }, "close"))),
+                h("div", null, this.content)));
         }
@@ -30,2 +31,6 @@ else {
         },
+        "content": {
+            "type": String,
+            "attr": "content"
+        },
         "isModalOpen": {
@@ -32,0 +37,0 @@ "type": Boolean,

dist/esm/es5/help-and-feedback-component.components.js

 // HelpAndFeedbackComponent: Host Data, ES Module/ES5 Target
 
-export var HelpAndFeedback = ["help-and-feedback",function(){return(import("./help-and-feedback.js")).then(function(m){return m.HelpAndFeedback})},1,[["background",1,0,1,2],["color",1,0,1,2],["iconButtonElement",7],["isModalOpen",5]],0,[["closedModal","closedModalHandler"]]];
+export var HelpAndFeedback = ["help-and-feedback",function(){return(import("./help-and-feedback.js")).then(function(m){return m.HelpAndFeedback})},1,[["background",1,0,1,2],["color",1,0,1,2],["dataUrl",1,0,"data-url",2],["iconButtonElement",7],["isModalOpen",5]],0,[["closedModal","closedModalHandler"]]];
 
-export var ModalHelpAndFeedback = ["modal-help-and-feedback",function(){return(import("./help-and-feedback.js")).then(function(m){return m.ModalHelpAndFeedback})},1,[["backgroundColor",1,0,"background-color",2],["isModalOpen",2,0,"is-modal-open",3],["modalElement",7]]];
+export var ModalHelpAndFeedback = ["modal-help-and-feedback",function(){return(import("./help-and-feedback.js")).then(function(m){return m.ModalHelpAndFeedback})},1,[["backgroundColor",1,0,"background-color",2],["content",1,0,1,2],["isModalOpen",2,0,"is-modal-open",3],["modalElement",7]]];

dist/esm/es5/help-and-feedback.js

@@ -33,3 +33,13 @@ /*! Built with http://stenciljs.com */
     HelpAndFeedback.prototype.componentWillLoad = function () {
+        var _this = this;
         this.setColors(this.color);
+        if (this.dataUrl) {
+            return fetch(this.dataUrl)
+                .then(function (response) { return response.json(); })
+                .then(function (data) {
+                if (data.content) {
+                    _this.content = data.content;
+                }
+            });
+        }
     };
@@ -41,4 +51,4 @@ HelpAndFeedback.prototype.render = function () {
             h("div", null, this.isModalOpen
-                ? h("modal-help-and-feedback", { onClick: function () { return _this.hideModal(); }, class: 'modal-container', "is-modal-open": 'true', "background-color": this.background })
-                : h("modal-help-and-feedback", { "is-modal-open": 'false', "background-color": this.background }))
+                ? h("modal-help-and-feedback", { onClick: function () { return _this.hideModal(); }, class: 'modal-container', "is-modal-open": 'true', "background-color": this.background, content: this.content })
+                : h("modal-help-and-feedback", { "is-modal-open": 'false', "background-color": this.background, content: this.content }))
         ]);
@@ -62,2 +72,6 @@ };
                 },
+                "dataUrl": {
+                    "type": String,
+                    "attr": "data-url"
+                },
                 "iconButtonElement": {
@@ -106,3 +120,3 @@ "elementRef": true
         if (this.isModalOpen) {
-            return (h("div", { class: 'modal__help-and-feedback open' }, h("div", { class: 'modal__toolbar' }, h("h1", { class: 'modal__title' }, "Help and feedback"), h("button", { class: 'material icon-button', "aria-label": 'close help and feedback', onClick: function (event) { return _this.closeModal(event); } }, h("i", { class: 'material-icons' }, "close")))));
+            return (h("div", { class: 'modal__help-and-feedback open' }, h("div", { class: 'modal__toolbar' }, h("h1", { class: 'modal__title' }, "Help and feedback"), h("button", { class: 'material icon-button', "aria-label": 'close help and feedback', onClick: function (event) { return _this.closeModal(event); } }, h("i", { class: 'material-icons' }, "close"))), h("div", null, this.content)));
         }
@@ -125,2 +139,6 @@ else {
                 },
+                "content": {
+                    "type": String,
+                    "attr": "content"
+                },
                 "isModalOpen": {
@@ -127,0 +145,0 @@ "type": Boolean,

dist/esm/es5/modal-help-and-feedback.js

@@ -6,2 +6,8 @@ /*! Built with http://stenciljs.com */
     }
+    // setColors(background: string) {
+    //     // Set the toolbar's background color
+    // }
+    ModalHelpAndFeedback.prototype.componentWillLoad = function () {
+        // this.setColors(this.backgroundColor);    
+    };
     ModalHelpAndFeedback.prototype.closeModal = function (event) {
@@ -11,4 +17,5 @@ this.closedModal.emit(event);
     ModalHelpAndFeedback.prototype.render = function () {
+        var _this = this;
         if (this.isModalOpen) {
-            return (h("div", { class: 'modal__help-and-feedback open' }, h("div", { class: 'modal__toolbar' }, h("h1", { class: 'modal__title' }, "Help and feedback"), h("button", { class: 'material icon-button', "aria-label": 'close help and feedback' }, h("i", { class: 'material-icons' }, "close")))));
+            return (h("div", { class: 'modal__help-and-feedback open' }, h("div", { class: 'modal__toolbar' }, h("h1", { class: 'modal__title' }, "Help and feedback"), h("button", { class: 'material icon-button', "aria-label": 'close help and feedback', onClick: function (event) { return _this.closeModal(event); } }, h("i", { class: 'material-icons' }, "close")))));
         }
@@ -24,10 +31,9 @@ else {
     });
-    Object.defineProperty(ModalHelpAndFeedback, "encapsulation", {
-        get: function () { return "shadow"; },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(ModalHelpAndFeedback, "properties", {
         get: function () {
             return {
+                "backgroundColor": {
+                    "type": String,
+                    "attr": "background-color"
+                },
                 "isModalOpen": {
@@ -60,3 +66,3 @@ "type": Boolean,
     Object.defineProperty(ModalHelpAndFeedback, "style", {
-        get: function () { return ".modal__help-and-feedback {\n  background: #fff;\n  color: #000;\n  min-width: 240px;\n  max-width: 80%;\n  max-height: 80%;\n  margin: auto;\n  top: 20%;\n  position: absolute;\n  overflow: auto;\n  -webkit-box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);\n  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);\n  opacity: 0;\n  border-radius: 4px;\n  -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\n  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }\n  .modal__help-and-feedback.open {\n    position: relative;\n    opacity: 1;\n    -webkit-transform: translate(0, 0) scale(1);\n    transform: translate(0, 0) scale(1);\n    width: 40%; }\n  .modal__help-and-feedback .modal__toolbar {\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n    display: -webkit-box;\n    display: -webkit-flex;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n    -webkit-flex-direction: column;\n    -ms-flex-direction: column;\n    flex-direction: column;\n    position: relative;\n    z-index: 2;\n    font-size: 20px;\n    min-height: 64px;\n    width: 100%;\n    font-size: 20px;\n    letter-spacing: .005em;\n    box-sizing: border-box;\n    font-weight: 400;\n    padding: 0 16px; }"; },
+        get: function () { return ".modal__help-and-feedback {\n  font-family: Roboto, Helvetica Neue, sans-serif;\n  background: #fff;\n  color: #000;\n  min-width: 240px;\n  max-width: 80%;\n  max-height: 80%;\n  margin: auto;\n  top: 20%;\n  position: absolute;\n  overflow: auto;\n  -webkit-box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);\n  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);\n  opacity: 0;\n  border-radius: 4px;\n  -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\n  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }\n  .modal__help-and-feedback.open {\n    position: relative;\n    opacity: 1;\n    -webkit-transform: translate(0, 0) scale(1);\n    transform: translate(0, 0) scale(1);\n    width: 40%; }\n  .modal__help-and-feedback .modal__toolbar {\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n    display: -webkit-box;\n    display: -webkit-flex;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: justify;\n    -webkit-justify-content: space-between;\n    -ms-flex-pack: justify;\n    justify-content: space-between;\n    -webkit-box-align: center;\n    -webkit-align-items: center;\n    -ms-flex-align: center;\n    align-items: center;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n    -webkit-flex-direction: row;\n    -ms-flex-direction: row;\n    flex-direction: row;\n    position: relative;\n    z-index: 2;\n    font-size: 20px;\n    min-height: 64px;\n    max-height: 64px;\n    width: 100%;\n    padding: 0 16px;\n    background-color: inherit; }\n    .modal__help-and-feedback .modal__toolbar h1 {\n      font-size: 20px;\n      letter-spacing: .005em;\n      font-weight: 400;\n      display: inline-block;\n      margin: 0;\n      line-height: 64px; }"; },
         enumerable: true,
@@ -63,0 +69,0 @@ configurable: true

dist/help-and-feedback-component.js

@@ -126,2 +126,2 @@ /*! Built with http://stenciljs.com */
 
-  })(window, document, "HelpAndFeedbackComponent","help-and-feedback-component",0,"help-and-feedback-component.core.js","es5-build-disabled.js","hydrated",[["help-and-feedback","help-and-feedback",1,[["background",1,0,1,2],["color",1,0,1,2],["iconButtonElement",7],["isModalOpen",5]],0,[["closedModal","closedModalHandler"]]],["modal-help-and-feedback","help-and-feedback",1,[["backgroundColor",1,0,"background-color",2],["isModalOpen",2,0,"is-modal-open",3],["modalElement",7]]]],HTMLElement.prototype);
+  })(window, document, "HelpAndFeedbackComponent","help-and-feedback-component",0,"help-and-feedback-component.core.js","es5-build-disabled.js","hydrated",[["help-and-feedback","help-and-feedback",1,[["background",1,0,1,2],["color",1,0,1,2],["dataUrl",1,0,"data-url",2],["iconButtonElement",7],["isModalOpen",5]],0,[["closedModal","closedModalHandler"]]],["modal-help-and-feedback","help-and-feedback",1,[["backgroundColor",1,0,"background-color",2],["content",1,0,1,2],["isModalOpen",2,0,"is-modal-open",3],["modalElement",7]]]],HTMLElement.prototype);

dist/help-and-feedback-component/help-and-feedback.js

@@ -35,2 +35,11 @@ /*! Built with http://stenciljs.com */
         this.setColors(this.color);
+        if (this.dataUrl) {
+            return fetch(this.dataUrl)
+                .then(response => response.json())
+                .then(data => {
+                if (data.content) {
+                    this.content = data.content;
+                }
+            });
+        }
     }
@@ -42,4 +51,4 @@ render() {
             h("div", null, this.isModalOpen
-                ? h("modal-help-and-feedback", { onClick: () => this.hideModal(), class: 'modal-container', "is-modal-open": 'true', "background-color": this.background })
-                : h("modal-help-and-feedback", { "is-modal-open": 'false', "background-color": this.background }))
+                ? h("modal-help-and-feedback", { onClick: () => this.hideModal(), class: 'modal-container', "is-modal-open": 'true', "background-color": this.background, content: this.content })
+                : h("modal-help-and-feedback", { "is-modal-open": 'false', "background-color": this.background, content: this.content }))
         ]);
@@ -57,2 +66,6 @@ }
         },
+        "dataUrl": {
+            "type": String,
+            "attr": "data-url"
+        },
         "iconButtonElement": {
@@ -88,3 +101,4 @@ "elementRef": true
                     h("button", { class: 'material icon-button', "aria-label": 'close help and feedback', onClick: (event) => this.closeModal(event) },
-                        h("i", { class: 'material-icons' }, "close")))));
+                        h("i", { class: 'material-icons' }, "close"))),
+                h("div", null, this.content)));
         }
@@ -101,2 +115,6 @@ else {
         },
+        "content": {
+            "type": String,
+            "attr": "content"
+        },
         "isModalOpen": {
@@ -103,0 +121,0 @@ "type": Boolean,

dist/help-and-feedback-component/modal-help-and-feedback.js

@@ -5,2 +5,8 @@ /*! Built with http://stenciljs.com */
 class ModalHelpAndFeedback {
+    // setColors(background: string) {
+    //     // Set the toolbar's background color
+    // }
+    componentWillLoad() {
+        // this.setColors(this.backgroundColor);    
+    }
     closeModal(event) {
@@ -14,3 +20,3 @@ this.closedModal.emit(event);
                     h("h1", { class: 'modal__title' }, "Help and feedback"),
-                    h("button", { class: 'material icon-button', "aria-label": 'close help and feedback' },
+                    h("button", { class: 'material icon-button', "aria-label": 'close help and feedback', onClick: (event) => this.closeModal(event) },
                         h("i", { class: 'material-icons' }, "close")))));
@@ -23,4 +29,7 @@ }
     static get is() { return "modal-help-and-feedback"; }
-    static get encapsulation() { return "shadow"; }
     static get properties() { return {
+        "backgroundColor": {
+            "type": String,
+            "attr": "background-color"
+        },
         "isModalOpen": {
@@ -42,5 +51,5 @@ "type": Boolean,
         }]; }
-    static get style() { return ".modal__help-and-feedback {\n  background: #fff;\n  color: #000;\n  min-width: 240px;\n  max-width: 80%;\n  max-height: 80%;\n  margin: auto;\n  top: 20%;\n  position: absolute;\n  overflow: auto;\n  -webkit-box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);\n  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);\n  opacity: 0;\n  border-radius: 4px;\n  -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\n  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }\n  .modal__help-and-feedback.open {\n    position: relative;\n    opacity: 1;\n    -webkit-transform: translate(0, 0) scale(1);\n    transform: translate(0, 0) scale(1);\n    width: 40%; }\n  .modal__help-and-feedback .modal__toolbar {\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n    display: -webkit-box;\n    display: -webkit-flex;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n    -webkit-flex-direction: column;\n    -ms-flex-direction: column;\n    flex-direction: column;\n    position: relative;\n    z-index: 2;\n    font-size: 20px;\n    min-height: 64px;\n    width: 100%;\n    font-size: 20px;\n    letter-spacing: .005em;\n    box-sizing: border-box;\n    font-weight: 400;\n    padding: 0 16px; }"; }
+    static get style() { return ".modal__help-and-feedback {\n  font-family: Roboto, Helvetica Neue, sans-serif;\n  background: #fff;\n  color: #000;\n  min-width: 240px;\n  max-width: 80%;\n  max-height: 80%;\n  margin: auto;\n  top: 20%;\n  position: absolute;\n  overflow: auto;\n  -webkit-box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);\n  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);\n  opacity: 0;\n  border-radius: 4px;\n  -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\n  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }\n  .modal__help-and-feedback.open {\n    position: relative;\n    opacity: 1;\n    -webkit-transform: translate(0, 0) scale(1);\n    transform: translate(0, 0) scale(1);\n    width: 40%; }\n  .modal__help-and-feedback .modal__toolbar {\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n    display: -webkit-box;\n    display: -webkit-flex;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: justify;\n    -webkit-justify-content: space-between;\n    -ms-flex-pack: justify;\n    justify-content: space-between;\n    -webkit-box-align: center;\n    -webkit-align-items: center;\n    -ms-flex-align: center;\n    align-items: center;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n    -webkit-flex-direction: row;\n    -ms-flex-direction: row;\n    flex-direction: row;\n    position: relative;\n    z-index: 2;\n    font-size: 20px;\n    min-height: 64px;\n    max-height: 64px;\n    width: 100%;\n    padding: 0 16px;\n    background-color: inherit; }\n    .modal__help-and-feedback .modal__toolbar h1 {\n      font-size: 20px;\n      letter-spacing: .005em;\n      font-weight: 400;\n      display: inline-block;\n      margin: 0;\n      line-height: 64px; }"; }
 }
 
 export { ModalHelpAndFeedback };

dist/types/components.d.ts

@@ -34,2 +34,3 @@ import './stencil.core';
       'color': string;
+      'dataUrl': string;
     }
@@ -59,2 +60,3 @@ }
       'color'?: string;
+      'dataUrl'?: string;
     }
@@ -70,2 +72,3 @@ }
       'backgroundColor': string;
+      'content': string;
       'isModalOpen': boolean;
@@ -95,2 +98,3 @@ }
       'backgroundColor'?: string;
+      'content'?: string;
       'isModalOpen'?: boolean;
@@ -97,0 +101,0 @@ 'onClosedModal'?: (event: CustomEvent) => void;

dist/types/components/help-and-feedback/help-and-feedback.d.ts

@@ -6,3 +6,5 @@ import '../../stencil.core';
     background: string;
+    dataUrl: string;
     isModalOpen: boolean;
+    content: string;
     closedModalHandler(event: UIEvent): void;
@@ -12,4 +14,4 @@ setColors(color: string): void;
     hideModal(): void;
-    componentWillLoad(): void;
+    componentWillLoad(): Promise<void>;
     render(): JSX.Element[];
 }

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

@@ -7,2 +7,3 @@ import '../../stencil.core';
     backgroundColor: string;
+    content: string;
     closedModal: EventEmitter;
@@ -9,0 +10,0 @@ componentWillLoad(): void;

dist/types/components/top-app-bar/top-app-bar.d.ts

@@ -186,2 +186,21 @@ import '../../stencil.core';
 import '../../stencil.core';
+import '../../stencil.core';
+import '../../stencil.core';
+import '../../stencil.core';
+import '../../stencil.core';
+import '../../stencil.core';
+import '../../stencil.core';
+import '../../stencil.core';
+import '../../stencil.core';
+import '../../stencil.core';
+import '../../stencil.core';
+import '../../stencil.core';
+import '../../stencil.core';
+import '../../stencil.core';
+import '../../stencil.core';
+import '../../stencil.core';
+import '../../stencil.core';
+import '../../stencil.core';
+import '../../stencil.core';
+import '../../stencil.core';
 export declare class TopAppBar {
@@ -188,0 +207,0 @@ topBarElement: HTMLElement;

package.json

 {
   "name": "help-and-feedback-component",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Material icon button made with StencilJS",
@@ -5,0 +5,0 @@ "module": "dist/esm/index.js",

New alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

291382

increased by1.49%

Lines of code

6146

increased by1.81%

Worsened metrics

Number of medium supply chain risk alerts

3

increased byInfinity%

No dependency changes