@cagovweb/cal-ds-banner - npm Package Compare versions

Comparing version 0.0.1-beta2 to 0.0.1-beta3

dist/index.js

@@ -13,4 +13,5 @@ var CssBaseStyleString = ":host{font-family:system-ui,-apple-system,\"Segoe UI\",Roboto,\"Helvetica Neue\",\"Noto Sans\",\"Liberation Sans\",Arial,sans-serif;--gov-header:#071645;--brand-primary:#13394b;--brand-secondary:#0070a3;--banner-light:#d5dbde;--banner-dark:#09202b;--brand-hover-light:#3ca3d3;--brand-hover-dark:#246c8e;--background-primary-light:#d9d8cf;--background-secondary-light:#f5f3eb;--background-primary-dark:#43433f;--background-secondary-dark:#65645f;--action-primary:#fec335;--action-secondary:#fae2ad;--text-white:#fff;--grey:#ccc;--grey-text:#323232;--grey-background:#eee;--gutter-gap:1.674vw;--flow-space:1rem;--radius:1rem;--shadow:0.2rem 0.2rem 0.5rem 0 rgba(0 0 0 / 25%);--shadow-focus:0.1rem 0.1rem 0.25rem 0 rgba(0 0 0 / 10%);--shadow-active:0.2rem 0.2rem 0.5rem 0 rgba(0 0 0 / 60%);--font-size:1rem;--ratio:1.24;--s0:calc(var(--font-size) - 0.3rem) + 0.2vw;--st:calc(var(--s0) * var(--ratio));--base:calc(var(--st) * var(--ratio));--lt:calc(var(--base) * var(--ratio));--h6:calc(var(--s0) * var(--ratio));--h5:calc(var(--h6) * var(--ratio));--h4:calc(var(--h5) * var(--ratio));--h3:calc(var(--h4) * var(--ratio));--h2:calc(var(--h3) * var(--ratio));--h1:calc(var(--h2) * var(--ratio) * var(--ratio));}";
  * @property {string} [html] - HTML to apply to component (Event configurable)
- * @property {() => void} [connectedCallback]
- * @property {(name:string,oldValue:string,newValue:string) => void} [attributeChangedCallback]
+ * @property {() => void} [connectedCallback] - Callback to use when the component is added to DOM
+ * @property {() => void} [templateChangedCallback] - callback to use when the TEMPLATE content changes
+ * @property {(name:string,oldValue:string,newValue:string) => void} [attributeChangedCallback] - Callback to use when attribute changes
  */
@@ -99,2 +100,18 @@
     this.UserTemplate = this.querySelector("template")?.content;
+    const templateChangedCallback = options.templateChangedCallback;
+
+    if (this.UserTemplate && templateChangedCallback) {
+      // Create an observer instance linked to the callback function
+      const observer = new MutationObserver(mutationsList =>
+        mutationsList.forEach(templateChangedCallback)
+      );
+
+      // Start observing the target node for configured mutations
+      observer.observe(this.UserTemplate, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
+    }
   }
@@ -228,5 +245,5 @@
 
-var css = ":host > div{background-color:#fdbc5b;border:none;min-height:2rem;> div{display:flex;gap:0.3rem;align-items:center;margin:0 auto;padding:0.5rem 1rem;width:100%;max-width:1280px;font-family:\"Noto Sans\",system-ui,-apple-system,\"Segoe UI\",Roboto,\"Helvetica Neue\",sans-serif;> p{margin:0;font-size:1.4rem;a{color:#0057ad;text-decoration:underline;&:hover,&:focus{color:#20367c;text-decoration:none;}&:focus{outline:2px solid #0057ad;}}}@media (width >= 576px){max-width:576px!important;}@media (width >= 768px){max-width:768px!important;}@media (width >= 992px){max-width:992px!important;}@media (width >= 1200px){max-width:1200px!important;}@media (width >= 1280px){max-width:1280px!important;}}}";
+var css = ":host > div{background-color:#fdbc5b;min-height:2rem;> div{display:flex;gap:0.3rem;align-items:center;margin:0 auto;padding:0.5rem 1rem;width:100%;max-width:1820px;font-family:\"Noto Sans\",system-ui,-apple-system,\"Segoe UI\",Roboto,\"Helvetica Neue\",sans-serif;> p{margin:0;font-size:1.4rem;a{color:#0057ad;text-decoration:underline;&:hover,&:focus{color:#20367c;text-decoration:none;}&:focus{outline:2px solid #0057ad;}}}@media (width >= 576px){max-width:576px!important;}@media (width >= 768px){max-width:768px!important;}@media (width >= 992px){max-width:992px!important;}@media (width >= 1200px){max-width:1200px!important;}@media (width >= 1280px){max-width:1280px!important;}@media (width >= 1400px){max-width:1820px!important;}}}";
 
-var html = "<div> <div> <svg aria-hidden=\"true\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 18 17.6\" style=\"width: 1rem; height: 1rem;\"> <g> <radialGradient id=\"SVGID_1_\" cx=\"7.6553\" cy=\"6.5485\" r=\"7.5719\" gradientUnits=\"userSpaceOnUse\"> <stop offset=\"0.4356\" style=\"stop-color:#FF0000\"/> <stop offset=\"0.8402\" style=\"stop-color:#AB0000\"/> </radialGradient> <circle style=\"fill:url(#SVGID_1_);\" cx=\"9\" cy=\"8.7\" r=\"8\"/> </g> </svg> <p></p> </div> </div> ";
+var html = "<div> <div> <svg aria-hidden=\"true\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 18 17.6\" style=\"width: 1rem\"> <g> <radialGradient id=\"SVGID_1_\" cx=\"7.6553\" cy=\"6.5485\" r=\"7.5719\" gradientUnits=\"userSpaceOnUse\"> <stop offset=\"0.4356\" style=\"stop-color:#FF0000\"/> <stop offset=\"0.8402\" style=\"stop-color:#AB0000\"/> </radialGradient> <circle style=\"fill:url(#SVGID_1_);\" cx=\"9\" cy=\"8.7\" r=\"8\"/> </g> </svg> <p></p> </div> </div> ";
 
@@ -293,23 +310,5 @@ // from
       connectedCallback: _contentChanged,
+      templateChangedCallback: _contentChanged,
       attributeChangedCallback
     });
-
-    if (this.UserTemplate) {
-      // Callback function to execute when mutations are observed
-      // eslint-disable-next-line jsdoc/no-undefined-types
-      /** @type {MutationCallback} */
-      const mutationCallback = mutationsList =>
-        mutationsList.forEach(_contentChanged);
-
-      // Create an observer instance linked to the callback function
-      const observer = new MutationObserver(mutationCallback);
-
-      // Start observing the target node for configured mutations
-      observer.observe(this.UserTemplate, {
-        attributes: true,
-        childList: true,
-        subtree: true,
-        characterData: true
-      });
-    }
   }
@@ -316,0 +315,0 @@ }

package.json

 {
   "name": "@cagovweb/cal-ds-banner",
-  "version": "0.0.1-beta2",
+  "version": "0.0.1-beta3",
   "description": "cal-ds-banner top banner",
@@ -10,3 +10,3 @@ "type": "module",
     "type": "git",
-    "url": "https://github.com/carterm/design-system-research.git",
+    "url": "git+https://github.com/carterm/design-system-research.git",
     "directory": "src/js/web-components/cal-ds-banner"
@@ -50,3 +50,6 @@ },
     "NPM deprecate old version": "npm deprecate @cagovweb/cal-ds-banner@0.0.1-beta1 \"Version no longer supported. Upgrade to @latest\""
+  },
+  "dependencies": {
+    "@cagovweb/cal-ds-base": "^0.0.1"
   }
 }

README.md

@@ -27,1 +27,9 @@ # `cal-ds-banner`
 ```
+
+## Try this on any page on the web!
+
+Place this in the web console
+
+```javascript
+document.head.appendChild(Object.assign(document.createElement("script"), {src: "https://cdn.jsdelivr.net/npm/@cagovweb/cal-ds-banner",type:"module"}));document.body.innerHTML += `<cal-ds-banner><template><strong>Live now:</strong> Press conference | <a href="">Priorities</a></template></cal-ds-banner>`;
+```

src/index.js

@@ -5,3 +5,3 @@ // from
 //@ts-check
-import cal_ds_base from "../../_cal-ds-base/index";
+import cal_ds_base from "../node_modules/@cagovweb/cal-ds-base/src/index.js";
 
@@ -70,24 +70,6 @@ // @ts-ignore
       connectedCallback: _contentChanged,
+      templateChangedCallback: _contentChanged,
       attributeChangedCallback
     });
-
-    if (this.UserTemplate) {
-      // Callback function to execute when mutations are observed
-      // eslint-disable-next-line jsdoc/no-undefined-types
-      /** @type {MutationCallback} */
-      const mutationCallback = mutationsList =>
-        mutationsList.forEach(_contentChanged);
-
-      // Create an observer instance linked to the callback function
-      const observer = new MutationObserver(mutationCallback);
-
-      // Start observing the target node for configured mutations
-      observer.observe(this.UserTemplate, {
-        attributes: true,
-        childList: true,
-        subtree: true,
-        characterData: true
-      });
-    }
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

18317

increased by0.26%

Number of lines in readme file

35

increased by29.63%

Worsened metrics

Dependency count

1

increased byInfinity%

Lines of code

450

decreased by-3.02%

Dependency changes

• + Added@cagovweb/cal-ds-base@^0.0.1

• + Added@cagovweb/cal-ds-base@0.0.1(transitive)