dash-listbox - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/dash-listbox.es5.js

@@ -90,2 +90,6 @@ var classCallCheck = function (instance, Constructor) {
 
+var listboxTemplate = document.createElement('template');
+listboxTemplate.innerHTML = '\n  <style>\n    :host {\n      display: block;\n      border: 1px solid #8A8A8A;\n      border-radius: 3px;\n      width: 300px;\n    }\n  </style>\n  <slot></slot>\n'.trim();
+
+ShadyCSS.prepareTemplate(listboxTemplate, 'dash-listbox');
 var DashListbox = function (_HTMLElement) {
@@ -96,3 +100,7 @@ inherits(DashListbox, _HTMLElement);
     classCallCheck(this, DashListbox);
-    return possibleConstructorReturn(this, (DashListbox.__proto__ || Object.getPrototypeOf(DashListbox)).apply(this, arguments));
+
+    var _this = possibleConstructorReturn(this, (DashListbox.__proto__ || Object.getPrototypeOf(DashListbox)).call(this));
+
+    _this.attachShadow({ mode: 'open' });
+    return _this;
   }
@@ -103,2 +111,8 @@
     value: function connectedCallback() {
+      if (!this._mounted) {
+        ShadyCSS.styleElement(this);
+        this.shadowRoot(document.importNode(listboxTemplate.content, true));
+        this._mounted = true;
+      }
+
       if (!this.hasAttribute('role')) this.setAttribute('role', 'listbox');
@@ -313,8 +327,24 @@ if (!this.hasAttribute('tabindex')) this.setAttribute('tabindex', '0');
 
+var optionTemplate = document.createElement('template');
+optionTemplate.innerHTML = '\n  <style>\n    :host {\n      display: block;\n      padding: 8px;\n      user-select: none;\n      cursor: default;\n      border-bottom: 1px solid #8A8A8A;\n    }\n\n    :host:last-of-type {\n      border-bottom: none;\n    }\n\n    :host([selected]) {\n      color: white;\n      background: #0E9688;\n    }\n  </style>\n'.trim();
+
+ShadyCSS.prepareTemplate(optionTemplate, 'dash-option');
 var DashOption = function (_HTMLElement2) {
   inherits(DashOption, _HTMLElement2);
+  createClass(DashOption, null, [{
+    key: 'observedAttributes',
+    get: function get$$1() {
+      // There's no need to observe the `value` attribute because there's no
+      // side effects from setting it.
+      return ['selected'];
+    }
+  }]);
 
   function DashOption() {
     classCallCheck(this, DashOption);
-    return possibleConstructorReturn(this, (DashOption.__proto__ || Object.getPrototypeOf(DashOption)).apply(this, arguments));
+
+    var _this2 = possibleConstructorReturn(this, (DashOption.__proto__ || Object.getPrototypeOf(DashOption)).call(this));
+
+    _this2.createShadowRoot({ mode: 'open' });
+    return _this2;
   }
@@ -325,2 +355,8 @@
     value: function connectedCallback() {
+      if (!this._mounted) {
+        ShadyCSS.styleElement(this);
+        this.shadowRoot(document.importNode(optionTemplate.content, true));
+        this._mounted = true;
+      }
+
       if (!this.hasAttribute('role')) this.setAttribute('role', 'option');
@@ -366,9 +402,2 @@
     }
-  }], [{
-    key: 'observedAttributes',
-    get: function get$$1() {
-      // There's no need to observe the `value` attribute because there's no
-      // side effects from setting it.
-      return ['selected'];
-    }
   }]);
@@ -375,0 +404,0 @@ return DashOption;

dist/dash-listbox.js

@@ -24,4 +24,29 @@ /**
 
+let listboxTemplate = document.createElement('template');
+listboxTemplate.innerHTML = `
+  <style>
+    :host {
+      display: block;
+      border: 1px solid #8A8A8A;
+      border-radius: 3px;
+      width: 300px;
+    }
+  </style>
+  <slot></slot>
+`.trim();
+
+ShadyCSS.prepareTemplate(listboxTemplate, 'dash-listbox');
 class DashListbox extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
   connectedCallback() {
+    if (!this._mounted) {
+      ShadyCSS.styleElement(this);
+      this.shadowRoot(document.importNode(listboxTemplate.content, true));
+      this._mounted = true;
+    }
+
     if (!this.hasAttribute('role'))
@@ -212,2 +237,25 @@ this.setAttribute('role', 'listbox');
 
+let optionTemplate = document.createElement('template');
+optionTemplate.innerHTML = `
+  <style>
+    :host {
+      display: block;
+      padding: 8px;
+      user-select: none;
+      cursor: default;
+      border-bottom: 1px solid #8A8A8A;
+    }
+
+    :host:last-of-type {
+      border-bottom: none;
+    }
+
+    :host([selected]) {
+      color: white;
+      background: #0E9688;
+    }
+  </style>
+`.trim();
+
+ShadyCSS.prepareTemplate(optionTemplate, 'dash-option');
 class DashOption extends HTMLElement {
@@ -220,3 +268,14 @@ static get observedAttributes() {
 
+  constructor() {
+    super();
+    this.createShadowRoot({ mode: 'open' });
+  }
+
   connectedCallback() {
+    if (!this._mounted) {
+      ShadyCSS.styleElement(this);
+      this.shadowRoot(document.importNode(optionTemplate.content, true));
+      this._mounted = true;
+    }
+
     if (!this.hasAttribute('role'))
@@ -223,0 +282,0 @@ this.setAttribute('role', 'option');

dist/dash-listbox.umd.js

@@ -96,2 +96,6 @@ (function (global, factory) {
 
+var listboxTemplate = document.createElement('template');
+listboxTemplate.innerHTML = '\n  <style>\n    :host {\n      display: block;\n      border: 1px solid #8A8A8A;\n      border-radius: 3px;\n      width: 300px;\n    }\n  </style>\n  <slot></slot>\n'.trim();
+
+ShadyCSS.prepareTemplate(listboxTemplate, 'dash-listbox');
 var DashListbox = function (_HTMLElement) {
@@ -102,3 +106,7 @@ inherits(DashListbox, _HTMLElement);
     classCallCheck(this, DashListbox);
-    return possibleConstructorReturn(this, (DashListbox.__proto__ || Object.getPrototypeOf(DashListbox)).apply(this, arguments));
+
+    var _this = possibleConstructorReturn(this, (DashListbox.__proto__ || Object.getPrototypeOf(DashListbox)).call(this));
+
+    _this.attachShadow({ mode: 'open' });
+    return _this;
   }
@@ -109,2 +117,8 @@
     value: function connectedCallback() {
+      if (!this._mounted) {
+        ShadyCSS.styleElement(this);
+        this.shadowRoot(document.importNode(listboxTemplate.content, true));
+        this._mounted = true;
+      }
+
       if (!this.hasAttribute('role')) this.setAttribute('role', 'listbox');
@@ -319,8 +333,24 @@ if (!this.hasAttribute('tabindex')) this.setAttribute('tabindex', '0');
 
+var optionTemplate = document.createElement('template');
+optionTemplate.innerHTML = '\n  <style>\n    :host {\n      display: block;\n      padding: 8px;\n      user-select: none;\n      cursor: default;\n      border-bottom: 1px solid #8A8A8A;\n    }\n\n    :host:last-of-type {\n      border-bottom: none;\n    }\n\n    :host([selected]) {\n      color: white;\n      background: #0E9688;\n    }\n  </style>\n'.trim();
+
+ShadyCSS.prepareTemplate(optionTemplate, 'dash-option');
 var DashOption = function (_HTMLElement2) {
   inherits(DashOption, _HTMLElement2);
+  createClass(DashOption, null, [{
+    key: 'observedAttributes',
+    get: function get$$1() {
+      // There's no need to observe the `value` attribute because there's no
+      // side effects from setting it.
+      return ['selected'];
+    }
+  }]);
 
   function DashOption() {
     classCallCheck(this, DashOption);
-    return possibleConstructorReturn(this, (DashOption.__proto__ || Object.getPrototypeOf(DashOption)).apply(this, arguments));
+
+    var _this2 = possibleConstructorReturn(this, (DashOption.__proto__ || Object.getPrototypeOf(DashOption)).call(this));
+
+    _this2.createShadowRoot({ mode: 'open' });
+    return _this2;
   }
@@ -331,2 +361,8 @@
     value: function connectedCallback() {
+      if (!this._mounted) {
+        ShadyCSS.styleElement(this);
+        this.shadowRoot(document.importNode(optionTemplate.content, true));
+        this._mounted = true;
+      }
+
       if (!this.hasAttribute('role')) this.setAttribute('role', 'option');
@@ -372,9 +408,2 @@
     }
-  }], [{
-    key: 'observedAttributes',
-    get: function get$$1() {
-      // There's no need to observe the `value` attribute because there's no
-      // side effects from setting it.
-      return ['selected'];
-    }
   }]);
@@ -381,0 +410,0 @@ return DashOption;

package.json

 {
   "name": "dash-listbox",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A listbox Custom Element.",
@@ -5,0 +5,0 @@ "author": "Rob Dodson <[e-mail]>",

README.md

@@ -5,1 +5,4 @@ # dash-listbox
 Not to be used in production :)
+
+This element uses Shady DOM to shim Shadow DOM support for CSS.
+You'll want to use the web components polyfills in your project to test it.

src/dash-listbox.js

@@ -25,4 +25,29 @@
 
+let listboxTemplate = document.createElement('template');
+listboxTemplate.innerHTML = `
+  <style>
+    :host {
+      display: block;
+      border: 1px solid #8A8A8A;
+      border-radius: 3px;
+      width: 300px;
+    }
+  </style>
+  <slot></slot>
+`.trim();
+
+ShadyCSS.prepareTemplate(listboxTemplate, 'dash-listbox');
 export class DashListbox extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
   connectedCallback() {
+    if (!this._mounted) {
+      ShadyCSS.styleElement(this);
+      this.shadowRoot(document.importNode(listboxTemplate.content, true));
+      this._mounted = true;
+    }
+
     if (!this.hasAttribute('role'))
@@ -213,2 +238,25 @@ this.setAttribute('role', 'listbox');
 
+let optionTemplate = document.createElement('template');
+optionTemplate.innerHTML = `
+  <style>
+    :host {
+      display: block;
+      padding: 8px;
+      user-select: none;
+      cursor: default;
+      border-bottom: 1px solid #8A8A8A;
+    }
+
+    :host:last-of-type {
+      border-bottom: none;
+    }
+
+    :host([selected]) {
+      color: white;
+      background: #0E9688;
+    }
+  </style>
+`.trim();
+
+ShadyCSS.prepareTemplate(optionTemplate, 'dash-option');
 export class DashOption extends HTMLElement {
@@ -221,3 +269,14 @@ static get observedAttributes() {
 
+  constructor() {
+    super();
+    this.createShadowRoot({ mode: 'open' });
+  }
+
   connectedCallback() {
+    if (!this._mounted) {
+      ShadyCSS.styleElement(this);
+      this.shadowRoot(document.importNode(optionTemplate.content, true));
+      this._mounted = true;
+    }
+
     if (!this.hasAttribute('role'))
@@ -224,0 +283,0 @@ this.setAttribute('role', 'option');

No alert changes

Improved metrics

Total package byte prevSize

45251

increased by13.31%

Lines of code

1287

increased by12.8%

Number of lines in readme file

8

increased by60%

No dependency changes