@nrk/core-toggle - npm Package Compare versions

Comparing version 3.0.7 to 3.0.8

core-toggle.cjs.js

@@ -146,5 +146,3 @@ 'use strict';
 if (!IS_BROWSER && !global.HTMLElement) {
-  global.HTMLElement =
-  /*#__PURE__*/
-  function () {
+  global.HTMLElement = /*#__PURE__*/function () {
     function _class() {
@@ -236,5 +234,3 @@ _classCallCheck(this, _class);
 
-var CoreToggle =
-/*#__PURE__*/
-function (_HTMLElement) {
+var CoreToggle = /*#__PURE__*/function (_HTMLElement) {
   _inherits(CoreToggle, _HTMLElement);
@@ -349,5 +345,7 @@
       if (popup === this.popup) {
+        var target = button.querySelector('span') || button; // Use span to preserve embedded HTML and SVG
+
         button.value = data.value || label;
-        button[data.innerHTML ? 'innerHTML' : 'textContent'] = data.innerHTML || label;
         button.setAttribute('aria-label', "".concat(button.textContent, ",").concat(this.popup));
+        target[data.innerHTML ? 'innerHTML' : 'textContent'] = data.innerHTML || label;
       }
@@ -363,4 +361,4 @@ }
   return CoreToggle;
-}(_wrapNativeSuper(HTMLElement));
+}( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
 
 module.exports = CoreToggle;

core-toggle.js

@@ -78,7 +78,8 @@ import { IS_ANDROID, IS_IOS, closest, dispatchEvent, getUUID, toggleAttribute } from '../utils'
     if (popup === this.popup) {
+      const target = button.querySelector('span') || button // Use span to preserve embedded HTML and SVG
       button.value = data.value || label
-      button[data.innerHTML ? 'innerHTML' : 'textContent'] = data.innerHTML || label
       button.setAttribute('aria-label', `${button.textContent},${this.popup}`)
+      target[data.innerHTML ? 'innerHTML' : 'textContent'] = data.innerHTML || label
     }
   }
 }

core-toggle.jsx.js

@@ -152,5 +152,3 @@ (function (global, factory) {
   if (!IS_BROWSER && !global.HTMLElement) {
-    global.HTMLElement =
-    /*#__PURE__*/
-    function () {
+    global.HTMLElement = /*#__PURE__*/function () {
       function _class() {
@@ -242,5 +240,3 @@ _classCallCheck(this, _class);
 
-  var CoreToggle =
-  /*#__PURE__*/
-  function (_HTMLElement) {
+  var CoreToggle = /*#__PURE__*/function (_HTMLElement) {
     _inherits(CoreToggle, _HTMLElement);
@@ -355,5 +351,7 @@
         if (popup === this.popup) {
+          var target = button.querySelector('span') || button; // Use span to preserve embedded HTML and SVG
+
           button.value = data.value || label;
-          button[data.innerHTML ? 'innerHTML' : 'textContent'] = data.innerHTML || label;
           button.setAttribute('aria-label', "".concat(button.textContent, ",").concat(this.popup));
+          target[data.innerHTML ? 'innerHTML' : 'textContent'] = data.innerHTML || label;
         }
@@ -369,5 +367,5 @@ }
     return CoreToggle;
-  }(_wrapNativeSuper(HTMLElement));
+  }( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
 
-  var version = "3.0.7";
+  var version = "3.0.8";
 
@@ -427,5 +425,3 @@ /**
     var tagName = (dashCase + "-" + (options.suffix || 'react')).replace(/\W+/g, '-').toLowerCase();
-    return (
-      /*@__PURE__*/
-      function (superclass) {
+    return (/*@__PURE__*/function (superclass) {
         function anonymous(props) {
@@ -432,0 +428,0 @@ var this$1 = this;

core-toggle.min.js

@@ -1,3 +0,3 @@
-/*! @nrk/core-toggle v3.0.7 - Copyright (c) 2017-2019 NRK */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).coreToggle=e()}(this,function(){"use strict";function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function o(t){return(o=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function r(t,e){return(r=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function u(t,e,n){return(u=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}()?Reflect.construct:function(t,e,n){var i=[null];i.push.apply(i,e);var o=new(Function.bind.apply(t,i));return n&&r(o,n.prototype),o}).apply(null,arguments)}function c(t){var n="function"==typeof Map?new Map:void 0;return(c=function(t){if(null===t||!function(t){return-1!==Function.toString.call(t).indexOf("[native code]")}(t))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==n){if(n.has(t))return n.get(t);n.set(t,e)}function e(){return u(t,arguments,o(this).constructor)}return e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r(e,t)})(t)}function n(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}var t="undefined"!=typeof window,s=t&&/(android)/i.test(navigator.userAgent),a=t&&/iPad|iPhone|iPod/.test(String(navigator.platform));t||global.HTMLElement||(global.HTMLElement=function(){return function t(){e(this,t)}}());var l,f,h=(l="undefined"==typeof window?{}:window.Element.prototype,f=l.matches||l.msMatchesSelector||l.webkitMatchesSelector,l.closest?function(t,e){return t.closest(e)}:function(t,e){for(t.correspondingUseElement&&(t=t.correspondingUseElement);t;t=t.parentElement)if(f.call(t,e))return t;return null});function d(t,e,n){var i,o=2<arguments.length&&void 0!==n?n:{},r="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[r])return!0;t[r]=!0,"function"==typeof window.CustomEvent?i=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:o}):(i=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,o);var u=t.dispatchEvent(i);return t[r]=null,u}function p(){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}return function(){function t(){return e(this,t),n(this,o(t).apply(this,arguments))}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&r(t,e)}(t,c(HTMLElement)),function(t,e,n){e&&i(t.prototype,e),n&&i(t,n)}(t,[{key:"connectedCallback",value:function(){a&&(document.documentElement.style.cursor="pointer"),s||this.setAttribute("aria-labelledby",this.button.id=this.button.id||p()),this.value=this.button.textContent,this.setAttribute("role","group"),this.button.setAttribute("aria-expanded",this._open=!this.hidden),this.button.setAttribute("aria-controls",this.id=this.id||p()),document.addEventListener("keydown",this,!0),document.addEventListener("click",this)}},{key:"disconnectedCallback",value:function(){this._button=null,document.removeEventListener("keydown",this,!0),document.removeEventListener("click",this)}},{key:"attributeChangedCallback",value:function(){if(this._open===this.hidden){this.button.setAttribute("aria-expanded",this._open=!this.hidden);try{this.querySelector("[autofocus]").focus()}catch(t){}d(this,"toggle")}}},{key:"handleEvent",value:function(t){if(!t.defaultPrevented){if("keydown"===t.type&&27===t.keyCode)if(t.target.getAttribute&&"true"===t.target.getAttribute("aria-expanded")?t.target===this.button:h(t.target,this.nodeName)===this)return this.hidden=!0,this.button.focus(),t.preventDefault();if("click"===t.type){var e=h(t.target,"a,button");e&&!e.hasAttribute("aria-expanded")&&h(t.target,this.nodeName)===this?d(this,"toggle.select",e):e&&e.getAttribute("aria-controls")===this.id?this.hidden=!this.hidden:this.popup&&!this.contains(t.target)&&(this.hidden=!0)}}}},{key:"button",get:function(){return this._button&&this._button.getAttribute("for")===this.id?this._button:(this._button=this.id&&document.querySelector('[for="'.concat(this.id,'"]')))||this.previousElementSibling}},{key:"popup",get:function(){return"true"===this.getAttribute("popup")||this.getAttribute("popup")||this.hasAttribute("popup")},set:function(t){this[!1===t?"removeAttribute":"setAttribute"]("popup",t)}},{key:"hidden",get:function(){return this.hasAttribute("hidden")},set:function(t){!function(t,e,n){var i=2<arguments.length&&void 0!==n?n:!this.hasAttribute(e);!i===t.hasAttribute(e)&&t[i?"setAttribute":"removeAttribute"](e,"")}(this,"hidden",t)}},{key:"value",get:function(){return this.button.value||this.button.textContent},set:function(t){var e=0<arguments.length&&void 0!==t&&t;if(this.button&&this.popup.length){var n=this.button,i=(n.getAttribute("aria-label")||",".concat(this.popup)).split(",")[1],o=e.textContent||e||"";i===this.popup&&(n.value=e.value||o,n[e.innerHTML?"innerHTML":"textContent"]=e.innerHTML||o,n.setAttribute("aria-label","".concat(n.textContent,",").concat(this.popup)))}}}],[{key:"observedAttributes",get:function(){return["hidden"]}}]),t}()}),window.customElements.define("core-toggle",coreToggle);
+/*! @nrk/core-toggle v3.0.8 - Copyright (c) 2017-2020 NRK */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).coreToggle=e()}(this,function(){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function u(t){return(u=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function c(t,e){return(c=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function s(t,e,n){return(s=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}()?Reflect.construct:function(t,e,n){var i=[null];i.push.apply(i,e);var o=new(Function.bind.apply(t,i));return n&&c(o,n.prototype),o}).apply(null,arguments)}function a(t){var i="function"==typeof Map?new Map:void 0;return(a=function(t){if(null===t||(e=t,-1===Function.toString.call(e).indexOf("[native code]")))return t;var e;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==i){if(i.has(t))return i.get(t);i.set(t,n)}function n(){return s(t,arguments,u(this).constructor)}return n.prototype=Object.create(t.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),c(n,t)})(t)}function l(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}var t="undefined"!=typeof window,f=t&&/(android)/i.test(navigator.userAgent),h=t&&/iPad|iPhone|iPod/.test(String(navigator.platform));t||global.HTMLElement||(global.HTMLElement=function(){return function t(){o(this,t)}}());var e,n,p=(e="undefined"==typeof window?{}:window.Element.prototype,n=e.matches||e.msMatchesSelector||e.webkitMatchesSelector,e.closest?function(t,e){return t.closest(e)}:function(t,e){for(t.correspondingUseElement&&(t=t.correspondingUseElement);t;t=t.parentElement)if(n.call(t,e))return t;return null});function d(t,e,n){var i,o=2<arguments.length&&void 0!==n?n:{},r="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[r])return!0;t[r]=!0,"function"==typeof window.CustomEvent?i=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:o}):(i=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,o);var u=t.dispatchEvent(i);return t[r]=null,u}function b(){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}return function(){function t(){return o(this,t),l(this,u(t).apply(this,arguments))}var e,n,i;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&c(t,e)}(t,a(HTMLElement)),e=t,i=[{key:"observedAttributes",get:function(){return["hidden"]}}],(n=[{key:"connectedCallback",value:function(){h&&(document.documentElement.style.cursor="pointer"),f||this.setAttribute("aria-labelledby",this.button.id=this.button.id||b()),this.value=this.button.textContent,this.setAttribute("role","group"),this.button.setAttribute("aria-expanded",this._open=!this.hidden),this.button.setAttribute("aria-controls",this.id=this.id||b()),document.addEventListener("keydown",this,!0),document.addEventListener("click",this)}},{key:"disconnectedCallback",value:function(){this._button=null,document.removeEventListener("keydown",this,!0),document.removeEventListener("click",this)}},{key:"attributeChangedCallback",value:function(){if(this._open===this.hidden){this.button.setAttribute("aria-expanded",this._open=!this.hidden);try{this.querySelector("[autofocus]").focus()}catch(t){}d(this,"toggle")}}},{key:"handleEvent",value:function(t){if(!t.defaultPrevented){if("keydown"===t.type&&27===t.keyCode)if(t.target.getAttribute&&"true"===t.target.getAttribute("aria-expanded")?t.target===this.button:p(t.target,this.nodeName)===this)return this.hidden=!0,this.button.focus(),t.preventDefault();if("click"===t.type){var e=p(t.target,"a,button");e&&!e.hasAttribute("aria-expanded")&&p(t.target,this.nodeName)===this?d(this,"toggle.select",e):e&&e.getAttribute("aria-controls")===this.id?this.hidden=!this.hidden:this.popup&&!this.contains(t.target)&&(this.hidden=!0)}}}},{key:"button",get:function(){return this._button&&this._button.getAttribute("for")===this.id?this._button:(this._button=this.id&&document.querySelector('[for="'.concat(this.id,'"]')))||this.previousElementSibling}},{key:"popup",get:function(){return"true"===this.getAttribute("popup")||this.getAttribute("popup")||this.hasAttribute("popup")},set:function(t){this[!1===t?"removeAttribute":"setAttribute"]("popup",t)}},{key:"hidden",get:function(){return this.hasAttribute("hidden")},set:function(t){!function(t,e,n){var i=2<arguments.length&&void 0!==n?n:!this.hasAttribute(e);!i===t.hasAttribute(e)&&t[i?"setAttribute":"removeAttribute"](e,"")}(this,"hidden",t)}},{key:"value",get:function(){return this.button.value||this.button.textContent},set:function(t){var e=0<arguments.length&&void 0!==t&&t;if(this.button&&this.popup.length){var n=this.button,i=(n.getAttribute("aria-label")||",".concat(this.popup)).split(",")[1],o=e.textContent||e||"";if(i===this.popup){var r=n.querySelector("span")||n;n.value=e.value||o,n.setAttribute("aria-label","".concat(n.textContent,",").concat(this.popup)),r[e.innerHTML?"innerHTML":"textContent"]=e.innerHTML||o}}}}])&&r(e.prototype,n),i&&r(e,i),t}()}),window.customElements.define("core-toggle",coreToggle);
 //# sourceMappingURL=core-toggle.min.js.map

core-toggle.test.cjs.js

@@ -8,2 +8,38 @@ 'use strict';
 
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+  try {
+    var info = gen[key](arg);
+    var value = info.value;
+  } catch (error) {
+    reject(error);
+    return;
+  }
+
+  if (info.done) {
+    resolve(value);
+  } else {
+    Promise.resolve(value).then(_next, _throw);
+  }
+}
+
+function _asyncToGenerator(fn) {
+  return function () {
+    var self = this,
+        args = arguments;
+    return new Promise(function (resolve, reject) {
+      var gen = fn.apply(self, args);
+
+      function _next(value) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+      }
+
+      function _throw(err) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+      }
+
+      _next(undefined);
+    });
+  };
+}
+
 function prop(selector, name) {
@@ -23,4 +59,4 @@ return browser.executeScript(function (selector, name) {
 describe('core-toggle', function () {
-  beforeEach(function _callee() {
-    return regeneratorRuntime.async(function _callee$(_context) {
+  beforeEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    return regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
@@ -30,11 +66,11 @@ switch (_context.prev = _context.next) {
             _context.next = 2;
-            return regeneratorRuntime.awrap(browser.refresh());
+            return browser.refresh();
 
           case 2:
             _context.next = 4;
-            return regeneratorRuntime.awrap(browser.executeScript(customElements));
+            return browser.executeScript(customElements);
 
           case 4:
             _context.next = 6;
-            return regeneratorRuntime.awrap(browser.executeScript(coreToggle));
+            return browser.executeScript(coreToggle);
 
@@ -46,7 +82,7 @@ case 6:
       }
-    });
-  });
-  it('sets up all properties', function _callee2() {
+    }, _callee);
+  })));
+  it('sets up all properties', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
     var toggleId, buttonId;
-    return regeneratorRuntime.async(function _callee2$(_context2) {
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) {
@@ -56,13 +92,13 @@ switch (_context2.prev = _context2.next) {
             _context2.next = 2;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               document.body.innerHTML = "\n        <button>Toggle</button>\n        <core-toggle hidden></core-toggle>\n      ";
-            }));
+            });
 
           case 2:
             _context2.next = 4;
-            return regeneratorRuntime.awrap(expect(attr('button', 'aria-expanded')).toMatch(/null|false/));
+            return expect(attr('button', 'aria-expanded')).toMatch(/null|false/);
 
           case 4:
             _context2.next = 6;
-            return regeneratorRuntime.awrap(attr('core-toggle', 'id'));
+            return attr('core-toggle', 'id');
 
@@ -72,11 +108,11 @@ case 6:
             _context2.next = 9;
-            return regeneratorRuntime.awrap(expect(attr('button', 'aria-controls')).toEqual(toggleId));
+            return expect(attr('button', 'aria-controls')).toEqual(toggleId);
 
           case 9:
             _context2.next = 11;
-            return regeneratorRuntime.awrap(expect(prop('core-toggle', 'hidden')).toMatch(/true/i));
+            return expect(prop('core-toggle', 'hidden')).toMatch(/true/i);
 
           case 11:
             _context2.next = 13;
-            return regeneratorRuntime.awrap(attr('button', 'id'));
+            return attr('button', 'id');
 
@@ -86,3 +122,3 @@ case 13:
             _context2.next = 16;
-            return regeneratorRuntime.awrap(expect(attr('core-toggle', 'aria-labelledby')).toEqual(buttonId));
+            return expect(attr('core-toggle', 'aria-labelledby')).toEqual(buttonId);
 
@@ -94,6 +130,6 @@ case 16:
       }
-    });
-  });
-  it('opens and closes toggle', function _callee3() {
-    return regeneratorRuntime.async(function _callee3$(_context3) {
+    }, _callee2);
+  })));
+  it('opens and closes toggle', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
       while (1) {
@@ -103,29 +139,29 @@ switch (_context3.prev = _context3.next) {
             _context3.next = 2;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               document.body.innerHTML = "\n        <button>Toggle</button>\n        <core-toggle hidden></core-toggle>\n      ";
-            }));
+            });
 
           case 2:
             _context3.next = 4;
-            return regeneratorRuntime.awrap($('button').click());
+            return $('button').click();
 
           case 4:
             _context3.next = 6;
-            return regeneratorRuntime.awrap(expect(attr('button', 'aria-expanded')).toMatch(/true/i));
+            return expect(attr('button', 'aria-expanded')).toMatch(/true/i);
 
           case 6:
             _context3.next = 8;
-            return regeneratorRuntime.awrap(expect(prop('core-toggle', 'hidden')).toMatch(/(null|false)/i));
+            return expect(prop('core-toggle', 'hidden')).toMatch(/(null|false)/i);
 
           case 8:
             _context3.next = 10;
-            return regeneratorRuntime.awrap($('button').click());
+            return $('button').click();
 
           case 10:
             _context3.next = 12;
-            return regeneratorRuntime.awrap(expect(attr('button', 'aria-expanded')).toEqual('false'));
+            return expect(attr('button', 'aria-expanded')).toEqual('false');
 
           case 12:
             _context3.next = 14;
-            return regeneratorRuntime.awrap(expect(prop('core-toggle', 'hidden')).toMatch(/true/i));
+            return expect(prop('core-toggle', 'hidden')).toMatch(/true/i);
 
@@ -137,6 +173,6 @@ case 14:
       }
-    });
-  });
-  it('opens and closes nested toggle', function _callee4() {
-    return regeneratorRuntime.async(function _callee4$(_context4) {
+    }, _callee3);
+  })));
+  it('opens and closes nested toggle', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+    return regeneratorRuntime.wrap(function _callee4$(_context4) {
       while (1) {
@@ -146,41 +182,41 @@ switch (_context4.prev = _context4.next) {
             _context4.next = 2;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               document.body.innerHTML = "\n        <button id=\"outer\">Toggle outer</button>\n        <core-toggle hidden>\n          <button id=\"inner\">Toggle inner</button>\n          <core-toggle hidden>\n            <div>Inner content</div>\n          </core-toggle>\n        </core-toggle>\n      ";
-            }));
+            });
 
           case 2:
             _context4.next = 4;
-            return regeneratorRuntime.awrap($('button#outer').click());
+            return $('button#outer').click();
 
           case 4:
             _context4.next = 6;
-            return regeneratorRuntime.awrap($('button#inner').click());
+            return $('button#inner').click();
 
           case 6:
             _context4.next = 8;
-            return regeneratorRuntime.awrap(expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/(null|false)/i));
+            return expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/(null|false)/i);
 
           case 8:
             _context4.next = 10;
-            return regeneratorRuntime.awrap(expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/(null|false)/i));
+            return expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/(null|false)/i);
 
           case 10:
             _context4.next = 12;
-            return regeneratorRuntime.awrap($('button#inner').click());
+            return $('button#inner').click();
 
           case 12:
             _context4.next = 14;
-            return regeneratorRuntime.awrap(expect(prop('button#inner + core-toggle', 'hidden')).toMatch(/true/i));
+            return expect(prop('button#inner + core-toggle', 'hidden')).toMatch(/true/i);
 
           case 14:
             _context4.next = 16;
-            return regeneratorRuntime.awrap(expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/(null|false)/i));
+            return expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/(null|false)/i);
 
           case 16:
             _context4.next = 18;
-            return regeneratorRuntime.awrap($('button#outer').click());
+            return $('button#outer').click();
 
           case 18:
             _context4.next = 20;
-            return regeneratorRuntime.awrap(expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/true/i));
+            return expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/true/i);
 
@@ -192,6 +228,6 @@ case 20:
       }
-    });
-  });
-  it('closes nested toggle with esc', function _callee5() {
-    return regeneratorRuntime.async(function _callee5$(_context5) {
+    }, _callee4);
+  })));
+  it('closes nested toggle with esc', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
+    return regeneratorRuntime.wrap(function _callee5$(_context5) {
       while (1) {
@@ -201,41 +237,41 @@ switch (_context5.prev = _context5.next) {
             _context5.next = 2;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               document.body.innerHTML = "\n        <button id=\"outer\">Toggle outer</button>\n        <core-toggle hidden>\n          <button id=\"inner\">Toggle inner</button>\n          <core-toggle hidden>\n            <div>Inner content</div>\n          </core-toggle>\n        </core-toggle>\n      ";
-            }));
+            });
 
           case 2:
             _context5.next = 4;
-            return regeneratorRuntime.awrap($('button#outer').click());
+            return $('button#outer').click();
 
           case 4:
             _context5.next = 6;
-            return regeneratorRuntime.awrap($('button#inner').click());
+            return $('button#inner').click();
 
           case 6:
             _context5.next = 8;
-            return regeneratorRuntime.awrap(expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/(null|false)/i));
+            return expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/(null|false)/i);
 
           case 8:
             _context5.next = 10;
-            return regeneratorRuntime.awrap(expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/(null|false)/i));
+            return expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/(null|false)/i);
 
           case 10:
             _context5.next = 12;
-            return regeneratorRuntime.awrap($('button#inner').sendKeys(protractor.Key.ESCAPE));
+            return $('button#inner').sendKeys(protractor.Key.ESCAPE);
 
           case 12:
             _context5.next = 14;
-            return regeneratorRuntime.awrap(expect(prop('button#inner + core-toggle', 'hidden')).toMatch(/true/i));
+            return expect(prop('button#inner + core-toggle', 'hidden')).toMatch(/true/i);
 
           case 14:
             _context5.next = 16;
-            return regeneratorRuntime.awrap(expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/(null|false)/i));
+            return expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/(null|false)/i);
 
           case 16:
             _context5.next = 18;
-            return regeneratorRuntime.awrap($('button#inner').sendKeys(protractor.Key.ESCAPE));
+            return $('button#inner').sendKeys(protractor.Key.ESCAPE);
 
           case 18:
             _context5.next = 20;
-            return regeneratorRuntime.awrap(expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/true/i));
+            return expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/true/i);
 
@@ -247,6 +283,6 @@ case 20:
       }
-    });
-  });
-  it('closes popup on click outside', function _callee6() {
-    return regeneratorRuntime.async(function _callee6$(_context6) {
+    }, _callee5);
+  })));
+  it('closes popup on click outside', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
+    return regeneratorRuntime.wrap(function _callee6$(_context6) {
       while (1) {
@@ -256,21 +292,21 @@ switch (_context6.prev = _context6.next) {
             _context6.next = 2;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               document.body.innerHTML = "\n        <button>Toggle</button>\n        <core-toggle popup hidden></core-toggle>\n      ";
-            }));
+            });
 
           case 2:
             _context6.next = 4;
-            return regeneratorRuntime.awrap($('button').click());
+            return $('button').click();
 
           case 4:
             _context6.next = 6;
-            return regeneratorRuntime.awrap(expect(prop('core-toggle', 'hidden')).toMatch(/(null|false)/i));
+            return expect(prop('core-toggle', 'hidden')).toMatch(/(null|false)/i);
 
           case 6:
             _context6.next = 8;
-            return regeneratorRuntime.awrap($('body').click());
+            return $('body').click();
 
           case 8:
             _context6.next = 10;
-            return regeneratorRuntime.awrap(expect(prop('core-toggle', 'hidden')).toMatch(/true/i));
+            return expect(prop('core-toggle', 'hidden')).toMatch(/true/i);
 
@@ -282,7 +318,7 @@ case 10:
       }
-    });
-  });
-  it('respects "for" attribute', function _callee7() {
+    }, _callee6);
+  })));
+  it('respects "for" attribute', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
     var toggleId;
-    return regeneratorRuntime.async(function _callee7$(_context7) {
+    return regeneratorRuntime.wrap(function _callee7$(_context7) {
       while (1) {
@@ -292,9 +328,9 @@ switch (_context7.prev = _context7.next) {
             _context7.next = 2;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               document.body.innerHTML = "\n        <div><button for=\"content\">Toggle</button></div>\n        <core-toggle id=\"content\" hidden></core-toggle>\n      ";
-            }));
+            });
 
           case 2:
             _context7.next = 4;
-            return regeneratorRuntime.awrap(attr('core-toggle', 'id'));
+            return attr('core-toggle', 'id');
 
@@ -304,7 +340,7 @@ case 4:
             _context7.next = 7;
-            return regeneratorRuntime.awrap(expect(attr('button', 'for')).toEqual(toggleId));
+            return expect(attr('button', 'for')).toEqual(toggleId);
 
           case 7:
             _context7.next = 9;
-            return regeneratorRuntime.awrap(expect(attr('button', 'aria-controls')).toEqual(toggleId));
+            return expect(attr('button', 'aria-controls')).toEqual(toggleId);
 
@@ -316,7 +352,7 @@ case 9:
       }
-    });
-  });
-  it('respects exisiting aria-label with popup and value', function _callee8() {
+    }, _callee7);
+  })));
+  it('respects exisiting aria-label with popup and value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
     var toggleValue;
-    return regeneratorRuntime.async(function _callee8$(_context8) {
+    return regeneratorRuntime.wrap(function _callee8$(_context8) {
       while (1) {
@@ -326,15 +362,15 @@ switch (_context8.prev = _context8.next) {
             _context8.next = 2;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               document.body.innerHTML = "\n        <button aria-label=\"Label\">Toggle</button>\n        <core-toggle popup=\"Another label\" hidden></core-toggle>\n      ";
-            }));
+            });
 
           case 2:
             _context8.next = 4;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               return document.querySelector('core-toggle').value = 'Button text';
-            }));
+            });
 
           case 4:
             _context8.next = 6;
-            return regeneratorRuntime.awrap(prop('core-toggle', 'value'));
+            return prop('core-toggle', 'value');
 
@@ -344,7 +380,7 @@ case 6:
             _context8.next = 9;
-            return regeneratorRuntime.awrap(expect(prop('button', 'textContent')).toEqual(toggleValue));
+            return expect(prop('button', 'textContent')).toEqual(toggleValue);
 
           case 9:
             _context8.next = 11;
-            return regeneratorRuntime.awrap(expect(attr('button', 'aria-label')).toEqual('Label'));
+            return expect(attr('button', 'aria-label')).toEqual('Label');
 
@@ -356,7 +392,7 @@ case 11:
       }
-    });
-  });
-  it('sets aria-label with popup attr and value', function _callee9() {
+    }, _callee8);
+  })));
+  it('sets aria-label with popup attr and value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {
     var toggleValue;
-    return regeneratorRuntime.async(function _callee9$(_context9) {
+    return regeneratorRuntime.wrap(function _callee9$(_context9) {
       while (1) {
@@ -366,15 +402,15 @@ switch (_context9.prev = _context9.next) {
             _context9.next = 2;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               document.body.innerHTML = "\n        <button>Toggle</button>\n        <core-toggle popup=\"Some label\" hidden></core-toggle>\n      ";
-            }));
+            });
 
           case 2:
             _context9.next = 4;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               return document.querySelector('core-toggle').value = 'Button text';
-            }));
+            });
 
           case 4:
             _context9.next = 6;
-            return regeneratorRuntime.awrap(prop('core-toggle', 'value'));
+            return prop('core-toggle', 'value');
 
@@ -384,7 +420,7 @@ case 6:
             _context9.next = 9;
-            return regeneratorRuntime.awrap(expect(prop('button', 'textContent')).toEqual(toggleValue));
+            return expect(prop('button', 'textContent')).toEqual(toggleValue);
 
           case 9:
             _context9.next = 11;
-            return regeneratorRuntime.awrap(expect(attr('button', 'aria-label')).toEqual('Button text,Some label'));
+            return expect(attr('button', 'aria-label')).toEqual('Button text,Some label');
 
@@ -396,7 +432,7 @@ case 11:
       }
-    });
-  });
-  it('sets aria-label with popup prop and value', function _callee10() {
+    }, _callee9);
+  })));
+  it('sets aria-label with popup prop and value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10() {
     var toggleValue;
-    return regeneratorRuntime.async(function _callee10$(_context10) {
+    return regeneratorRuntime.wrap(function _callee10$(_context10) {
       while (1) {
@@ -406,21 +442,21 @@ switch (_context10.prev = _context10.next) {
             _context10.next = 2;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               document.body.innerHTML = "\n        <button>Toggle</button>\n        <core-toggle hidden></core-toggle>\n      ";
-            }));
+            });
 
           case 2:
             _context10.next = 4;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               return document.querySelector('core-toggle').popup = 'Some label';
-            }));
+            });
 
           case 4:
             _context10.next = 6;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               return document.querySelector('core-toggle').value = 'Button text';
-            }));
+            });
 
           case 6:
             _context10.next = 8;
-            return regeneratorRuntime.awrap(prop('core-toggle', 'value'));
+            return prop('core-toggle', 'value');
 
@@ -430,7 +466,7 @@ case 8:
             _context10.next = 11;
-            return regeneratorRuntime.awrap(expect(prop('button', 'textContent')).toEqual(toggleValue));
+            return expect(prop('button', 'textContent')).toEqual(toggleValue);
 
           case 11:
             _context10.next = 13;
-            return regeneratorRuntime.awrap(expect(attr('button', 'aria-label')).toEqual('Button text,Some label'));
+            return expect(attr('button', 'aria-label')).toEqual('Button text,Some label');
 
@@ -442,7 +478,7 @@ case 13:
       }
-    });
-  });
-  it('triggers toggle event', function _callee11() {
+    }, _callee10);
+  })));
+  it('triggers toggle event', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11() {
     var triggered;
-    return regeneratorRuntime.async(function _callee11$(_context11) {
+    return regeneratorRuntime.wrap(function _callee11$(_context11) {
       while (1) {
@@ -452,3 +488,3 @@ switch (_context11.prev = _context11.next) {
             _context11.next = 2;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               document.body.innerHTML = "\n        <button>Toggle</button>\n        <core-toggle hidden></core-toggle>\n      ";
@@ -459,9 +495,9 @@ document.addEventListener('toggle', function () {
               document.querySelector('core-toggle').hidden = false;
-            }));
+            });
 
           case 2:
             _context11.next = 4;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               return window.triggered;
-            }));
+            });
 
@@ -471,3 +507,3 @@ case 4:
             _context11.next = 7;
-            return regeneratorRuntime.awrap(expect(triggered).toEqual(true));
+            return expect(triggered).toEqual(true);
 
@@ -479,7 +515,7 @@ case 7:
       }
-    });
-  });
-  it('triggers select event', function _callee12() {
+    }, _callee11);
+  })));
+  it('triggers select event', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
     var itemId;
-    return regeneratorRuntime.async(function _callee12$(_context12) {
+    return regeneratorRuntime.wrap(function _callee12$(_context12) {
       while (1) {
@@ -489,9 +525,9 @@ switch (_context12.prev = _context12.next) {
             _context12.next = 2;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               document.body.innerHTML = "\n        <button>Toggle</button>\n        <core-toggle hidden>\n          <button id=\"my-item\">Select me</button>\n        </core-toggle>\n      ";
-            }));
+            });
 
           case 2:
             _context12.next = 4;
-            return regeneratorRuntime.awrap(browser.executeScript(function () {
+            return browser.executeScript(function () {
               document.addEventListener('toggle.select', function (event) {
@@ -503,11 +539,11 @@ return window.itemId = event.detail.id;
               toggle.children[0].click();
-            }));
+            });
 
           case 4:
             _context12.next = 6;
-            return regeneratorRuntime.awrap(browser.wait(function () {
+            return browser.wait(function () {
               return browser.executeScript(function () {
                 return window.itemId;
               });
-            }));
+            });
 
@@ -517,3 +553,3 @@ case 6:
             _context12.next = 9;
-            return regeneratorRuntime.awrap(expect(itemId).toEqual('my-item'));
+            return expect(itemId).toEqual('my-item');
 
@@ -525,4 +561,4 @@ case 9:
       }
-    });
-  });
+    }, _callee12);
+  })));
 });

jsx.js

@@ -150,5 +150,3 @@ 'use strict';
 if (!IS_BROWSER && !global.HTMLElement) {
-  global.HTMLElement =
-  /*#__PURE__*/
-  function () {
+  global.HTMLElement = /*#__PURE__*/function () {
     function _class() {
@@ -240,5 +238,3 @@ _classCallCheck(this, _class);
 
-var CoreToggle =
-/*#__PURE__*/
-function (_HTMLElement) {
+var CoreToggle = /*#__PURE__*/function (_HTMLElement) {
   _inherits(CoreToggle, _HTMLElement);
@@ -353,5 +349,7 @@
       if (popup === this.popup) {
+        var target = button.querySelector('span') || button; // Use span to preserve embedded HTML and SVG
+
         button.value = data.value || label;
-        button[data.innerHTML ? 'innerHTML' : 'textContent'] = data.innerHTML || label;
         button.setAttribute('aria-label', "".concat(button.textContent, ",").concat(this.popup));
+        target[data.innerHTML ? 'innerHTML' : 'textContent'] = data.innerHTML || label;
       }
@@ -367,5 +365,5 @@ }
   return CoreToggle;
-}(_wrapNativeSuper(HTMLElement));
+}( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
 
-var version = "3.0.7";
+var version = "3.0.8";
 
@@ -425,5 +423,3 @@ /**
   var tagName = (dashCase + "-" + (options.suffix || 'react')).replace(/\W+/g, '-').toLowerCase();
-  return (
-    /*@__PURE__*/
-    function (superclass) {
+  return (/*@__PURE__*/function (superclass) {
       function anonymous(props) {
@@ -430,0 +426,0 @@ var this$1 = this;

package.json

@@ -5,3 +5,3 @@ {
   "author": "NRK <[e-mail]> (https://www.nrk.no/)",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "license": "MIT",
@@ -8,0 +8,0 @@ "main": "core-toggle.cjs.js",

readme.md

@@ -137,7 +137,20 @@ # Core Toggle
 <div>
-  <button for="my-toggle">Toggle VanillaJS</button>
+  <button for="my-toggle">Toggle</button>
 </div>
-<core-toggle id="my-toggle" hidden>Content</core-toggle>
+<core-toggle id="my-toggle" hidden>...</core-toggle>
 ```
 
+### Popup and button HTML
+
+Using the `popup` attribute in conjunction with embedded HTML in your toggle button (an SVG icon for instance) will only preserve text when updating the value/label for the button. To preserve the embedded HTML, put the actual button text inside a `<span>`:
+
+```html
+<button>
+  <span>Toggle</span>
+  <svg style="width:1.5em; height:1.5em" aria-hidden="true"><use xlink:href="#nrk-heart"></use></svg>
+</button>
+<core-toggle popup="..." hidden>...</core-toggle>
+```
+
+
 ### Autofocus
@@ -177,3 +190,3 @@
 
-**Note:** `<core-toggle>` is `display: inline` by default. Change this by for instance setting `core-tabs:not([hidden]) { display: block | flex | grid }` or similar in your app. Not needed when `position` or `float` is used. All styling in documentation is example only. Both the `<button>` and `<core-toggle>` element receive attributes reflecting the current toggle state:
+**Note:** `<core-toggle>` is `display: inline` by default. Change this by for instance setting `core-toggle:not([hidden]) { display: block | flex | grid }` or similar in your app. Not needed when `position` or `float` is used. All styling in documentation is example only. Both the `<button>` and `<core-toggle>` element receive attributes reflecting the current toggle state:
 
@@ -180,0 +193,0 @@ ```css

No alert changes

Improved metrics

Total package byte prevSize

137836

increased by0.83%

Lines of code

1885

increased by0.96%

Number of lines in readme file

294

increased by4.63%

No dependency changes