@ne1410s/popup - npm Package Compare versions

Comparing version 0.2.4 to 0.2.5

dist/ne14_pop.cjs.min.js

@@ -9,8 +9,7 @@ 'use strict';
 
-var stylesUrl = "data:text/css;base64,LmJhY2sgew0KICBwb3NpdGlvbjogZml4ZWQ7DQogIHRvcDogMDsNCiAgcmlnaHQ6IDA7DQogIGJvdHRvbTogMDsNCiAgbGVmdDogMDsNCiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgwLCAwLCAwLCAwLjg1KTsNCiAgb3BhY2l0eTogMDsNCiAgb3ZlcmZsb3c6IGhpZGRlbjsNCiAgdHJhbnNpdGlvbjogb3BhY2l0eSAwLjNzOw0KICB6LWluZGV4OiA5OTk5OTsNCn0NCi5iYWNrOm5vdCgub3Blbikgew0KICBwb2ludGVyLWV2ZW50czogbm9uZTsNCn0NCi5iYWNrLm9wZW4gew0KICBvcGFjaXR5OiAxOw0KfQ0KLmJhY2sub3BlbiAuZm9yZS5yZWFkeSB7DQogIHRyYW5zaXRpb246IGJveC1zaGFkb3cgMC4zcywgYmFja2dyb3VuZC1jb2xvciAwLjNzOw0KfQ0KLmZvcmUub3ZlciB7DQogIGN1cnNvcjogbW92ZTsNCiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgyNTAsIDI1MCwgMjUwLCAxKTsNCn0NCi5mb3JlLm1vdmluZyB7DQogIGN1cnNvcjogY3Jvc3NoYWlyOw0KICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDIzMCwgMjMwLCAyMzAsIDEpOw0KICB1c2VyLXNlbGVjdDogbm9uZTsNCn0NCi5mb3JlLm92ZXIsDQouZm9yZS5tb3Zpbmcgew0KICBib3gtc2hhZG93OiBpbnNldCAwIDAgMC41ZW0gYmxhY2sgIWltcG9ydGFudDsNCn0NCi5mb3JlIHsNCiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsNCiAgbWluLXdpZHRoOiAxcmVtOw0KICBtYXgtd2lkdGg6IDEwMHZ3Ow0KICBtaW4taGVpZ2h0OiAxcmVtOw0KICBtYXgtaGVpZ2h0OiAxMDB2aDsNCiAgcG9zaXRpb246IGFic29sdXRlOw0KICBvdmVyZmxvdzogaGlkZGVuOw0KICB0b3A6IDUwJTsNCiAgbGVmdDogNTAlOw0KICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4zczsNCn0NCi5mb3JlID4gc3BhbiB7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgZm9udC1zaXplOiAxLjVlbTsNCiAgdXNlci1zZWxlY3Q6IG5vbmU7DQogIGNvbG9yOiByZ2JhKDAsIDAsIDAsIDAuMyk7DQp9DQouZm9yZS5uby1jbG9zZSB7DQogIG1heC13aWR0aDogY2FsYygxMDB2dyAtIDFlbSk7DQogIG1heC1oZWlnaHQ6IGNhbGMoMTAwdmggLSAxZW0pOw0KfQ0KLmZvcmUubm8tY2xvc2UgLmNsb3NlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5mb3JlIC5jbG9zZSB7DQogIGN1cnNvcjogcG9pbnRlcjsNCiAgdG9wOiAtNnB4Ow0KICByaWdodDogMDsNCiAgcGFkZGluZzogMC4yZW07DQp9DQouZm9yZTpub3QoLnJlc2l6ZSkgLnNlLXJlc2l6ZSB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQouZm9yZSAuc2UtcmVzaXplIHsNCiAgY3Vyc29yOiBzZS1yZXNpemU7DQogIGJvdHRvbTogLTlweDsNCiAgcmlnaHQ6IC00cHg7DQp9DQo=";
+var stylesUrl = "data:text/css;base64,LmJhY2sgew0KICBwb3NpdGlvbjogZml4ZWQ7DQogIHRvcDogMDsNCiAgcmlnaHQ6IDA7DQogIGJvdHRvbTogMDsNCiAgbGVmdDogMDsNCiAgYmFja2dyb3VuZDogdmFyKC0tYmFja2dyb3VuZCwgcmdiYSgwLCAwLCAwLCAwLjg1KSk7DQogIG9wYWNpdHk6IDA7DQogIG92ZXJmbG93OiBoaWRkZW47DQogIHRyYW5zaXRpb246IG9wYWNpdHkgMC4zczsNCiAgei1pbmRleDogOTk5OTk7DQp9DQouYmFjazpub3QoLm9wZW4pIHsNCiAgcG9pbnRlci1ldmVudHM6IG5vbmU7DQp9DQouYmFjay5vcGVuIHsNCiAgb3BhY2l0eTogMTsNCn0NCi5iYWNrLm9wZW4gLmZvcmUucmVhZHkgew0KICB0cmFuc2l0aW9uOiBib3gtc2hhZG93IDAuM3MsIGJhY2tncm91bmQtY29sb3IgMC4zczsNCn0NCi5mb3JlLm92ZXIgew0KICBjdXJzb3I6IG1vdmU7DQogIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMjUwLCAyNTAsIDI1MCwgMSk7DQp9DQouZm9yZS5tb3Zpbmcgew0KICBjdXJzb3I6IGNyb3NzaGFpcjsNCiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgyMzAsIDIzMCwgMjMwLCAxKTsNCiAgdXNlci1zZWxlY3Q6IG5vbmU7DQp9DQouZm9yZS5vdmVyLA0KLmZvcmUubW92aW5nIHsNCiAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAuNWVtIGJsYWNrICFpbXBvcnRhbnQ7DQp9DQouZm9yZSB7DQogIGJhY2tncm91bmQtY29sb3I6ICNmZmY7DQogIG1pbi13aWR0aDogMXJlbTsNCiAgbWF4LXdpZHRoOiAxMDB2dzsNCiAgbWluLWhlaWdodDogMXJlbTsNCiAgbWF4LWhlaWdodDogMTAwdmg7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgb3ZlcmZsb3c6IGhpZGRlbjsNCiAgdG9wOiA1MCU7DQogIGxlZnQ6IDUwJTsNCiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDAuM3M7DQogIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMpOw0KICBib3gtc2hhZG93OiB2YXIoLS1ib3gtc2hhZG93KTsNCn0NCi5mb3JlID4gc3BhbiB7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgZm9udC1zaXplOiAxLjVlbTsNCiAgdXNlci1zZWxlY3Q6IG5vbmU7DQogIGNvbG9yOiByZ2JhKDAsIDAsIDAsIDAuMyk7DQp9DQouZm9yZS5uby1jbG9zZSB7DQogIG1heC13aWR0aDogY2FsYygxMDB2dyAtIDFlbSk7DQogIG1heC1oZWlnaHQ6IGNhbGMoMTAwdmggLSAxZW0pOw0KfQ0KLmZvcmUubm8tY2xvc2UgLmNsb3NlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5mb3JlIC5jbG9zZSB7DQogIGN1cnNvcjogcG9pbnRlcjsNCiAgdG9wOiAtNnB4Ow0KICByaWdodDogMDsNCiAgcGFkZGluZzogMC4yZW07DQp9DQouZm9yZTpub3QoLnJlc2l6ZSkgLnNlLXJlc2l6ZSB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQouZm9yZSAuc2UtcmVzaXplIHsNCiAgY3Vyc29yOiBzZS1yZXNpemU7DQogIGJvdHRvbTogLTlweDsNCiAgcmlnaHQ6IC00cHg7DQp9DQo=";
 
 class Popup extends custElems.CustomElementBase {
     constructor() {
-        super(stylesUrl, markupUrl);
-        this._styles = {};
+        super(Popup.Css, Popup.Html);
         const back = this.root.querySelector('.back');
@@ -133,14 +132,5 @@ const fore = back.querySelector('.fore');
                     fore.style.minHeight = fore.style.height = '';
-                    this.propagateSupportedStyles(back);
                 }
                 this.fire(doOpen ? 'open' : 'close');
                 break;
-            case 'style':
-                if (newValue) {
-                    Popup.STYLE_KEYS.map((key) => ({ key, value: this.style[key] }))
-                        .filter((kvp) => kvp.value)
-                        .forEach((kvp) => (this._styles[kvp.key] = kvp.value));
-                    this.removeAttribute('style');
-                }
-                break;
         }
@@ -160,20 +150,2 @@ }
     }
-    /** Some relevant style properties are propagated */
-    propagateSupportedStyles(backing) {
-        // Backing
-        ['backgroundColor'].forEach((prop) => {
-            backing.style[prop] = this._styles[prop];
-        });
-        // Fore
-        const fore = backing.querySelector('.fore');
-        [
-            'borderTopLeftRadius',
-            'borderTopRightRadius',
-            'borderBottomRightRadius',
-            'borderBottomLeftRadius',
-            'boxShadow',
-        ].forEach((prop) => {
-            fore.style[prop] = this._styles[prop];
-        });
-    }
     /** Emits a new event. */
@@ -184,11 +156,5 @@ fire(event, detail) {
 }
-Popup.observedAttributes = ['open', 'style'];
-Popup.STYLE_KEYS = [
-    'backgroundColor',
-    'borderTopLeftRadius',
-    'borderTopRightRadius',
-    'borderBottomRightRadius',
-    'borderBottomLeftRadius',
-    'boxShadow',
-];
+Popup.observedAttributes = ['open'];
+Popup.Css = custElems.reduceCss(custElems.decode(stylesUrl));
+Popup.Html = custElems.reduceHtml(custElems.decode(markupUrl));
 
@@ -195,0 +161,0 @@ if ('customElements' in window) {

dist/ne14_pop.esm.min.js

@@ -1,11 +0,10 @@
-import { CustomElementBase } from '@ne1410s/cust-elems';
+import { CustomElementBase, reduceCss, decode, reduceHtml } from '@ne1410s/cust-elems';
 
 var markupUrl = "data:text/html;base64,PGRpdiBjbGFzcz0iYmFjayI+DQogIDxkaXYgY2xhc3M9ImZvcmUiPg0KICAgIDxzbG90Pjwvc2xvdD4NCiAgICA8c3BhbiBjbGFzcz0iY2xvc2UiPiZ0aW1lczs8L3NwYW4+DQogICAgPHNwYW4gY2xhc3M9InNlLXJlc2l6ZSI+JiN4MjVlMjs8L3NwYW4+DQogIDwvZGl2Pg0KPC9kaXY+DQo=";
 
-var stylesUrl = "data:text/css;base64,LmJhY2sgew0KICBwb3NpdGlvbjogZml4ZWQ7DQogIHRvcDogMDsNCiAgcmlnaHQ6IDA7DQogIGJvdHRvbTogMDsNCiAgbGVmdDogMDsNCiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgwLCAwLCAwLCAwLjg1KTsNCiAgb3BhY2l0eTogMDsNCiAgb3ZlcmZsb3c6IGhpZGRlbjsNCiAgdHJhbnNpdGlvbjogb3BhY2l0eSAwLjNzOw0KICB6LWluZGV4OiA5OTk5OTsNCn0NCi5iYWNrOm5vdCgub3Blbikgew0KICBwb2ludGVyLWV2ZW50czogbm9uZTsNCn0NCi5iYWNrLm9wZW4gew0KICBvcGFjaXR5OiAxOw0KfQ0KLmJhY2sub3BlbiAuZm9yZS5yZWFkeSB7DQogIHRyYW5zaXRpb246IGJveC1zaGFkb3cgMC4zcywgYmFja2dyb3VuZC1jb2xvciAwLjNzOw0KfQ0KLmZvcmUub3ZlciB7DQogIGN1cnNvcjogbW92ZTsNCiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgyNTAsIDI1MCwgMjUwLCAxKTsNCn0NCi5mb3JlLm1vdmluZyB7DQogIGN1cnNvcjogY3Jvc3NoYWlyOw0KICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDIzMCwgMjMwLCAyMzAsIDEpOw0KICB1c2VyLXNlbGVjdDogbm9uZTsNCn0NCi5mb3JlLm92ZXIsDQouZm9yZS5tb3Zpbmcgew0KICBib3gtc2hhZG93OiBpbnNldCAwIDAgMC41ZW0gYmxhY2sgIWltcG9ydGFudDsNCn0NCi5mb3JlIHsNCiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsNCiAgbWluLXdpZHRoOiAxcmVtOw0KICBtYXgtd2lkdGg6IDEwMHZ3Ow0KICBtaW4taGVpZ2h0OiAxcmVtOw0KICBtYXgtaGVpZ2h0OiAxMDB2aDsNCiAgcG9zaXRpb246IGFic29sdXRlOw0KICBvdmVyZmxvdzogaGlkZGVuOw0KICB0b3A6IDUwJTsNCiAgbGVmdDogNTAlOw0KICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4zczsNCn0NCi5mb3JlID4gc3BhbiB7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgZm9udC1zaXplOiAxLjVlbTsNCiAgdXNlci1zZWxlY3Q6IG5vbmU7DQogIGNvbG9yOiByZ2JhKDAsIDAsIDAsIDAuMyk7DQp9DQouZm9yZS5uby1jbG9zZSB7DQogIG1heC13aWR0aDogY2FsYygxMDB2dyAtIDFlbSk7DQogIG1heC1oZWlnaHQ6IGNhbGMoMTAwdmggLSAxZW0pOw0KfQ0KLmZvcmUubm8tY2xvc2UgLmNsb3NlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5mb3JlIC5jbG9zZSB7DQogIGN1cnNvcjogcG9pbnRlcjsNCiAgdG9wOiAtNnB4Ow0KICByaWdodDogMDsNCiAgcGFkZGluZzogMC4yZW07DQp9DQouZm9yZTpub3QoLnJlc2l6ZSkgLnNlLXJlc2l6ZSB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQouZm9yZSAuc2UtcmVzaXplIHsNCiAgY3Vyc29yOiBzZS1yZXNpemU7DQogIGJvdHRvbTogLTlweDsNCiAgcmlnaHQ6IC00cHg7DQp9DQo=";
+var stylesUrl = "data:text/css;base64,LmJhY2sgew0KICBwb3NpdGlvbjogZml4ZWQ7DQogIHRvcDogMDsNCiAgcmlnaHQ6IDA7DQogIGJvdHRvbTogMDsNCiAgbGVmdDogMDsNCiAgYmFja2dyb3VuZDogdmFyKC0tYmFja2dyb3VuZCwgcmdiYSgwLCAwLCAwLCAwLjg1KSk7DQogIG9wYWNpdHk6IDA7DQogIG92ZXJmbG93OiBoaWRkZW47DQogIHRyYW5zaXRpb246IG9wYWNpdHkgMC4zczsNCiAgei1pbmRleDogOTk5OTk7DQp9DQouYmFjazpub3QoLm9wZW4pIHsNCiAgcG9pbnRlci1ldmVudHM6IG5vbmU7DQp9DQouYmFjay5vcGVuIHsNCiAgb3BhY2l0eTogMTsNCn0NCi5iYWNrLm9wZW4gLmZvcmUucmVhZHkgew0KICB0cmFuc2l0aW9uOiBib3gtc2hhZG93IDAuM3MsIGJhY2tncm91bmQtY29sb3IgMC4zczsNCn0NCi5mb3JlLm92ZXIgew0KICBjdXJzb3I6IG1vdmU7DQogIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMjUwLCAyNTAsIDI1MCwgMSk7DQp9DQouZm9yZS5tb3Zpbmcgew0KICBjdXJzb3I6IGNyb3NzaGFpcjsNCiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgyMzAsIDIzMCwgMjMwLCAxKTsNCiAgdXNlci1zZWxlY3Q6IG5vbmU7DQp9DQouZm9yZS5vdmVyLA0KLmZvcmUubW92aW5nIHsNCiAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAuNWVtIGJsYWNrICFpbXBvcnRhbnQ7DQp9DQouZm9yZSB7DQogIGJhY2tncm91bmQtY29sb3I6ICNmZmY7DQogIG1pbi13aWR0aDogMXJlbTsNCiAgbWF4LXdpZHRoOiAxMDB2dzsNCiAgbWluLWhlaWdodDogMXJlbTsNCiAgbWF4LWhlaWdodDogMTAwdmg7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgb3ZlcmZsb3c6IGhpZGRlbjsNCiAgdG9wOiA1MCU7DQogIGxlZnQ6IDUwJTsNCiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDAuM3M7DQogIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMpOw0KICBib3gtc2hhZG93OiB2YXIoLS1ib3gtc2hhZG93KTsNCn0NCi5mb3JlID4gc3BhbiB7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgZm9udC1zaXplOiAxLjVlbTsNCiAgdXNlci1zZWxlY3Q6IG5vbmU7DQogIGNvbG9yOiByZ2JhKDAsIDAsIDAsIDAuMyk7DQp9DQouZm9yZS5uby1jbG9zZSB7DQogIG1heC13aWR0aDogY2FsYygxMDB2dyAtIDFlbSk7DQogIG1heC1oZWlnaHQ6IGNhbGMoMTAwdmggLSAxZW0pOw0KfQ0KLmZvcmUubm8tY2xvc2UgLmNsb3NlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5mb3JlIC5jbG9zZSB7DQogIGN1cnNvcjogcG9pbnRlcjsNCiAgdG9wOiAtNnB4Ow0KICByaWdodDogMDsNCiAgcGFkZGluZzogMC4yZW07DQp9DQouZm9yZTpub3QoLnJlc2l6ZSkgLnNlLXJlc2l6ZSB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQouZm9yZSAuc2UtcmVzaXplIHsNCiAgY3Vyc29yOiBzZS1yZXNpemU7DQogIGJvdHRvbTogLTlweDsNCiAgcmlnaHQ6IC00cHg7DQp9DQo=";
 
 class Popup extends CustomElementBase {
     constructor() {
-        super(stylesUrl, markupUrl);
-        this._styles = {};
+        super(Popup.Css, Popup.Html);
         const back = this.root.querySelector('.back');
@@ -128,14 +127,5 @@ const fore = back.querySelector('.fore');
                     fore.style.minHeight = fore.style.height = '';
-                    this.propagateSupportedStyles(back);
                 }
                 this.fire(doOpen ? 'open' : 'close');
                 break;
-            case 'style':
-                if (newValue) {
-                    Popup.STYLE_KEYS.map((key) => ({ key, value: this.style[key] }))
-                        .filter((kvp) => kvp.value)
-                        .forEach((kvp) => (this._styles[kvp.key] = kvp.value));
-                    this.removeAttribute('style');
-                }
-                break;
         }
@@ -155,20 +145,2 @@ }
     }
-    /** Some relevant style properties are propagated */
-    propagateSupportedStyles(backing) {
-        // Backing
-        ['backgroundColor'].forEach((prop) => {
-            backing.style[prop] = this._styles[prop];
-        });
-        // Fore
-        const fore = backing.querySelector('.fore');
-        [
-            'borderTopLeftRadius',
-            'borderTopRightRadius',
-            'borderBottomRightRadius',
-            'borderBottomLeftRadius',
-            'boxShadow',
-        ].forEach((prop) => {
-            fore.style[prop] = this._styles[prop];
-        });
-    }
     /** Emits a new event. */
@@ -179,11 +151,5 @@ fire(event, detail) {
 }
-Popup.observedAttributes = ['open', 'style'];
-Popup.STYLE_KEYS = [
-    'backgroundColor',
-    'borderTopLeftRadius',
-    'borderTopRightRadius',
-    'borderBottomRightRadius',
-    'borderBottomLeftRadius',
-    'boxShadow',
-];
+Popup.observedAttributes = ['open'];
+Popup.Css = reduceCss(decode(stylesUrl));
+Popup.Html = reduceHtml(decode(markupUrl));
 
@@ -190,0 +156,0 @@ if ('customElements' in window) {

dist/ne14_pop.umd.min.js

@@ -11,21 +11,30 @@ (function (global, factory) {
             this.root = this.attachShadow({ mode });
-            this.root.innerHTML = this.decode(html);
+            this.root.innerHTML = html;
             const style = document.createElement('style');
-            style.textContent = this.decode(css);
+            style.textContent = css;
             this.root.appendChild(style);
         }
-        decode(b64) {
-            const bIndex = (b64 + '').indexOf('base64,');
-            return bIndex === -1 ? b64 : window.atob(b64.substring(bIndex + 7));
-        }
     }
 
+    function decode(b64) {
+        const bIndex = (b64 + '').indexOf('base64,');
+        return bIndex === -1 ? b64 : window.atob(b64.substring(bIndex + 7));
+    }
+    function reduceCss(cssIn) {
+        return cssIn
+            .replace(/\s+/g, ' ')
+            .replace(/([,{}:;])\s/g, '$1')
+            .replace(/\s([{])/g, '$1');
+    }
+    function reduceHtml(htmlIn) {
+        return htmlIn.replace(/\s+/g, ' ').replace(/>\s</g, '><');
+    }
+
     var markupUrl = "data:text/html;base64,PGRpdiBjbGFzcz0iYmFjayI+DQogIDxkaXYgY2xhc3M9ImZvcmUiPg0KICAgIDxzbG90Pjwvc2xvdD4NCiAgICA8c3BhbiBjbGFzcz0iY2xvc2UiPiZ0aW1lczs8L3NwYW4+DQogICAgPHNwYW4gY2xhc3M9InNlLXJlc2l6ZSI+JiN4MjVlMjs8L3NwYW4+DQogIDwvZGl2Pg0KPC9kaXY+DQo=";
 
-    var stylesUrl = "data:text/css;base64,LmJhY2sgew0KICBwb3NpdGlvbjogZml4ZWQ7DQogIHRvcDogMDsNCiAgcmlnaHQ6IDA7DQogIGJvdHRvbTogMDsNCiAgbGVmdDogMDsNCiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgwLCAwLCAwLCAwLjg1KTsNCiAgb3BhY2l0eTogMDsNCiAgb3ZlcmZsb3c6IGhpZGRlbjsNCiAgdHJhbnNpdGlvbjogb3BhY2l0eSAwLjNzOw0KICB6LWluZGV4OiA5OTk5OTsNCn0NCi5iYWNrOm5vdCgub3Blbikgew0KICBwb2ludGVyLWV2ZW50czogbm9uZTsNCn0NCi5iYWNrLm9wZW4gew0KICBvcGFjaXR5OiAxOw0KfQ0KLmJhY2sub3BlbiAuZm9yZS5yZWFkeSB7DQogIHRyYW5zaXRpb246IGJveC1zaGFkb3cgMC4zcywgYmFja2dyb3VuZC1jb2xvciAwLjNzOw0KfQ0KLmZvcmUub3ZlciB7DQogIGN1cnNvcjogbW92ZTsNCiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgyNTAsIDI1MCwgMjUwLCAxKTsNCn0NCi5mb3JlLm1vdmluZyB7DQogIGN1cnNvcjogY3Jvc3NoYWlyOw0KICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDIzMCwgMjMwLCAyMzAsIDEpOw0KICB1c2VyLXNlbGVjdDogbm9uZTsNCn0NCi5mb3JlLm92ZXIsDQouZm9yZS5tb3Zpbmcgew0KICBib3gtc2hhZG93OiBpbnNldCAwIDAgMC41ZW0gYmxhY2sgIWltcG9ydGFudDsNCn0NCi5mb3JlIHsNCiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsNCiAgbWluLXdpZHRoOiAxcmVtOw0KICBtYXgtd2lkdGg6IDEwMHZ3Ow0KICBtaW4taGVpZ2h0OiAxcmVtOw0KICBtYXgtaGVpZ2h0OiAxMDB2aDsNCiAgcG9zaXRpb246IGFic29sdXRlOw0KICBvdmVyZmxvdzogaGlkZGVuOw0KICB0b3A6IDUwJTsNCiAgbGVmdDogNTAlOw0KICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4zczsNCn0NCi5mb3JlID4gc3BhbiB7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgZm9udC1zaXplOiAxLjVlbTsNCiAgdXNlci1zZWxlY3Q6IG5vbmU7DQogIGNvbG9yOiByZ2JhKDAsIDAsIDAsIDAuMyk7DQp9DQouZm9yZS5uby1jbG9zZSB7DQogIG1heC13aWR0aDogY2FsYygxMDB2dyAtIDFlbSk7DQogIG1heC1oZWlnaHQ6IGNhbGMoMTAwdmggLSAxZW0pOw0KfQ0KLmZvcmUubm8tY2xvc2UgLmNsb3NlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5mb3JlIC5jbG9zZSB7DQogIGN1cnNvcjogcG9pbnRlcjsNCiAgdG9wOiAtNnB4Ow0KICByaWdodDogMDsNCiAgcGFkZGluZzogMC4yZW07DQp9DQouZm9yZTpub3QoLnJlc2l6ZSkgLnNlLXJlc2l6ZSB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQouZm9yZSAuc2UtcmVzaXplIHsNCiAgY3Vyc29yOiBzZS1yZXNpemU7DQogIGJvdHRvbTogLTlweDsNCiAgcmlnaHQ6IC00cHg7DQp9DQo=";
+    var stylesUrl = "data:text/css;base64,LmJhY2sgew0KICBwb3NpdGlvbjogZml4ZWQ7DQogIHRvcDogMDsNCiAgcmlnaHQ6IDA7DQogIGJvdHRvbTogMDsNCiAgbGVmdDogMDsNCiAgYmFja2dyb3VuZDogdmFyKC0tYmFja2dyb3VuZCwgcmdiYSgwLCAwLCAwLCAwLjg1KSk7DQogIG9wYWNpdHk6IDA7DQogIG92ZXJmbG93OiBoaWRkZW47DQogIHRyYW5zaXRpb246IG9wYWNpdHkgMC4zczsNCiAgei1pbmRleDogOTk5OTk7DQp9DQouYmFjazpub3QoLm9wZW4pIHsNCiAgcG9pbnRlci1ldmVudHM6IG5vbmU7DQp9DQouYmFjay5vcGVuIHsNCiAgb3BhY2l0eTogMTsNCn0NCi5iYWNrLm9wZW4gLmZvcmUucmVhZHkgew0KICB0cmFuc2l0aW9uOiBib3gtc2hhZG93IDAuM3MsIGJhY2tncm91bmQtY29sb3IgMC4zczsNCn0NCi5mb3JlLm92ZXIgew0KICBjdXJzb3I6IG1vdmU7DQogIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMjUwLCAyNTAsIDI1MCwgMSk7DQp9DQouZm9yZS5tb3Zpbmcgew0KICBjdXJzb3I6IGNyb3NzaGFpcjsNCiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgyMzAsIDIzMCwgMjMwLCAxKTsNCiAgdXNlci1zZWxlY3Q6IG5vbmU7DQp9DQouZm9yZS5vdmVyLA0KLmZvcmUubW92aW5nIHsNCiAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAuNWVtIGJsYWNrICFpbXBvcnRhbnQ7DQp9DQouZm9yZSB7DQogIGJhY2tncm91bmQtY29sb3I6ICNmZmY7DQogIG1pbi13aWR0aDogMXJlbTsNCiAgbWF4LXdpZHRoOiAxMDB2dzsNCiAgbWluLWhlaWdodDogMXJlbTsNCiAgbWF4LWhlaWdodDogMTAwdmg7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgb3ZlcmZsb3c6IGhpZGRlbjsNCiAgdG9wOiA1MCU7DQogIGxlZnQ6IDUwJTsNCiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDAuM3M7DQogIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMpOw0KICBib3gtc2hhZG93OiB2YXIoLS1ib3gtc2hhZG93KTsNCn0NCi5mb3JlID4gc3BhbiB7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgZm9udC1zaXplOiAxLjVlbTsNCiAgdXNlci1zZWxlY3Q6IG5vbmU7DQogIGNvbG9yOiByZ2JhKDAsIDAsIDAsIDAuMyk7DQp9DQouZm9yZS5uby1jbG9zZSB7DQogIG1heC13aWR0aDogY2FsYygxMDB2dyAtIDFlbSk7DQogIG1heC1oZWlnaHQ6IGNhbGMoMTAwdmggLSAxZW0pOw0KfQ0KLmZvcmUubm8tY2xvc2UgLmNsb3NlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5mb3JlIC5jbG9zZSB7DQogIGN1cnNvcjogcG9pbnRlcjsNCiAgdG9wOiAtNnB4Ow0KICByaWdodDogMDsNCiAgcGFkZGluZzogMC4yZW07DQp9DQouZm9yZTpub3QoLnJlc2l6ZSkgLnNlLXJlc2l6ZSB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQouZm9yZSAuc2UtcmVzaXplIHsNCiAgY3Vyc29yOiBzZS1yZXNpemU7DQogIGJvdHRvbTogLTlweDsNCiAgcmlnaHQ6IC00cHg7DQp9DQo=";
 
     class Popup extends CustomElementBase {
         constructor() {
-            super(stylesUrl, markupUrl);
-            this._styles = {};
+            super(Popup.Css, Popup.Html);
             const back = this.root.querySelector('.back');
@@ -148,14 +157,5 @@ const fore = back.querySelector('.fore');
                         fore.style.minHeight = fore.style.height = '';
-                        this.propagateSupportedStyles(back);
                     }
                     this.fire(doOpen ? 'open' : 'close');
                     break;
-                case 'style':
-                    if (newValue) {
-                        Popup.STYLE_KEYS.map((key) => ({ key, value: this.style[key] }))
-                            .filter((kvp) => kvp.value)
-                            .forEach((kvp) => (this._styles[kvp.key] = kvp.value));
-                        this.removeAttribute('style');
-                    }
-                    break;
             }
@@ -175,20 +175,2 @@ }
         }
-        /** Some relevant style properties are propagated */
-        propagateSupportedStyles(backing) {
-            // Backing
-            ['backgroundColor'].forEach((prop) => {
-                backing.style[prop] = this._styles[prop];
-            });
-            // Fore
-            const fore = backing.querySelector('.fore');
-            [
-                'borderTopLeftRadius',
-                'borderTopRightRadius',
-                'borderBottomRightRadius',
-                'borderBottomLeftRadius',
-                'boxShadow',
-            ].forEach((prop) => {
-                fore.style[prop] = this._styles[prop];
-            });
-        }
         /** Emits a new event. */
@@ -199,11 +181,5 @@ fire(event, detail) {
     }
-    Popup.observedAttributes = ['open', 'style'];
-    Popup.STYLE_KEYS = [
-        'backgroundColor',
-        'borderTopLeftRadius',
-        'borderTopRightRadius',
-        'borderBottomRightRadius',
-        'borderBottomLeftRadius',
-        'boxShadow',
-    ];
+    Popup.observedAttributes = ['open'];
+    Popup.Css = reduceCss(decode(stylesUrl));
+    Popup.Html = reduceHtml(decode(markupUrl));
 
@@ -210,0 +186,0 @@ if ('customElements' in window) {

dist/popup/popup.d.ts

 import { CustomElementBase } from '@ne1410s/cust-elems';
 export declare class Popup extends CustomElementBase {
     static readonly observedAttributes: string[];
-    private static readonly STYLE_KEYS;
+    private static readonly Css;
+    private static readonly Html;
     protected get canMove(): boolean;
@@ -9,3 +10,2 @@ protected get canResize(): boolean;
     private get canClose();
-    private _styles;
     private _coords;
@@ -24,6 +24,4 @@ private _drag;
     private resetOffscreenPosition;
-    /** Some relevant style properties are propagated */
-    private propagateSupportedStyles;
     /** Emits a new event. */
     private fire;
 }

package.json

 {
   "name": "@ne1410s/popup",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "A lightweight configurable popup.",
@@ -41,15 +41,15 @@ "main": "dist/ne14_pop.cjs.min.js",
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^15.1.0",
+    "@rollup/plugin-commonjs": "^16.0.0",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-node-resolve": "^10.0.0",
     "@rollup/plugin-url": "^5.0.1",
     "prettier": "^2.1.2",
     "rimraf": "^3.0.1",
-    "rollup": "^2.31.0",
-    "rollup-plugin-typescript2": "^0.27.3",
-    "typescript": "^4.0.3"
+    "rollup": "^2.33.2",
+    "rollup-plugin-typescript2": "^0.29.0",
+    "typescript": "^4.0.5"
   },
   "dependencies": {
-    "@ne1410s/cust-elems": "^0.1.5"
+    "@ne1410s/cust-elems": "^0.2.0"
   }
 }

README.md

@@ -59,1 +59,17 @@ # @ne1410s/popup
 - **dismissCallback**: () => boolean: Return false to prevent a call to dismiss from closing the popup
+
+### CSS Variables
+
+Some degree of custom styling can be provided, by way of css variables:
+
+```css
+ne14-pop {
+  --background: rgba(0, 0, 0, 0.5);
+  --border-radius: 5px;
+  --box-shadow: 5px 5px 20px black;
+}
+```
+
+- **`--background`** _Background behind the popup. Defaults to: `rgba(0, 0, 0, .85)`_
+- **`--border-radius`** _Border radius for the popup._
+- **`--box-shadow`** _Box shadow for the popup (when stationary)._

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Number of lines in readme file

75

increased by27.12%

Worsened metrics

Total package byte prevSize

34190

decreased by-7.1%

Lines of code

538

decreased by-15.01%

Dependency changes

• + Added@ne1410s/cust-elems@0.2.34(transitive)

• - Removed@ne1410s/cust-elems@0.1.5(transitive)

• Updated@ne1410s/cust-elems@^0.2.0