@nrk/core-toggle - npm Package Compare versions

Comparing version 4.0.2 to 4.0.3

core-toggle.cjs.js

@@ -1,2 +0,2 @@
-/*! @nrk/core-toggle v4.0.2 - Copyright (c) 2017-2022 NRK */
+/*! @nrk/core-toggle v4.0.3 - Copyright (c) 2017-2022 NRK */
 'use strict';
@@ -3,0 +3,0 @@

core-toggle.jsx

@@ -7,3 +7,4 @@ import CoreToggle from './core-toggle.js'
   customEvents: ['toggle', 'toggle.select'],
+  props: ['value'],
   suffix: version
 })

core-toggle.jsx.js

@@ -1,2 +0,2 @@
-/*! @nrk/core-toggle v4.0.2 - Copyright (c) 2017-2022 NRK */
+/*! @nrk/core-toggle v4.0.3 - Copyright (c) 2017-2022 NRK */
 (function (global, factory) {
@@ -477,3 +477,3 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
 
-  var version = "4.0.2";
+  var version = "4.0.3";
 
@@ -631,2 +631,3 @@ /**
     customEvents: ['toggle', 'toggle.select'],
+    props: ['value'],
     suffix: version
@@ -633,0 +634,0 @@ });

core-toggle.min.js

@@ -1,3 +0,3 @@
-/*! @nrk/core-toggle v4.0.2 - Copyright (c) 2017-2022 NRK */
+/*! @nrk/core-toggle v4.0.3 - Copyright (c) 2017-2022 NRK */
 !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).coreToggle=e()}(this,(function(){"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(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 n(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),Object.defineProperty(t,"prototype",{writable:!1}),t}function i(t){return i=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},i(t)}function o(t,e){return o=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},o(t,e)}function r(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}function u(t,e,n){return u=r()?Reflect.construct.bind():function(t,e,n){var i=[null];i.push.apply(i,e);var r=new(Function.bind.apply(t,i));return n&&o(r,n.prototype),r},u.apply(null,arguments)}function s(t){var e="function"==typeof Map?new Map:void 0;return s=function(t){if(null===t||(n=t,-1===Function.toString.call(n).indexOf("[native code]")))return t;var n;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,r)}function r(){return u(t,arguments,i(this).constructor)}return r.prototype=Object.create(t.prototype,{constructor:{value:r,enumerable:!1,writable:!0,configurable:!0}}),o(r,t)},s(t)}function a(t,e){if(e&&("object"==typeof e||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}var c="undefined"!=typeof window,d=c&&void 0!==window.navigator,l=d&&/(android)/i.test(navigator.userAgent),h=d&&/iPad|iPhone|iPod/.test(String(navigator.platform));c||global.HTMLElement||(global.HTMLElement=function(){return n((function e(){t(this,e)}))}());var p,f,b=(p="undefined"==typeof window?{}:window.Element.prototype,f=p.matches||p.msMatchesSelector||p.webkitMatchesSelector,p.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 v(t,e){var n,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[o])return!0;t[o]=!0,"function"==typeof window.CustomEvent?n=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:i}):(n=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,i);var r=t.dispatchEvent(n);return t[o]=null,r}function y(){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}function g(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:!this.hasAttribute(e);return!n===t.hasAttribute(e)&&t[n?"setAttribute":"removeAttribute"](e,""),n}var w=c&&document.createElement("div"),m=function(e){!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}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&o(t,e)}(d,e);var u,s,c=(u=d,s=r(),function(){var t,e=i(u);if(s){var n=i(this).constructor;t=Reflect.construct(e,arguments,n)}else t=e.apply(this,arguments);return a(this,t)});function d(){return t(this,d),c.apply(this,arguments)}return n(d,[{key:"connectedCallback",value:function(){h&&(document.documentElement.style.cursor="pointer"),l||this.setAttribute("aria-labelledby",this.button.id=this.button.id||y()),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||y()),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),E(this,!0)}},{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){}E(this,this.hidden),v(this,"toggle")}}},{key:"handleEvent",value:function(t){if(!t.defaultPrevented){if("resize"===t.type||"scroll"===t.type)return this.updatePosition();if("keydown"===t.type&&27===t.keyCode)if(t.target.getAttribute&&"true"===t.target.getAttribute("aria-expanded")?t.target===this.button:b(t.target,this.nodeName)===this)return this.hidden=!0,this.button.focus(),t.preventDefault();if("click"===t.type){var e=b(t.target,"a,button");e&&!e.hasAttribute("aria-expanded")&&b(t.target,this.nodeName)===this?v(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:"updatePosition",value:function(){var t=this;if(!this._skipPosition&&this.button){this._skipPosition=!0,this.style.position="fixed";var e=this.button.getBoundingClientRect(),n=this.getBoundingClientRect(),i=e.left+n.width<window.innerWidth,o=e.right-n.width>=0,r=e.bottom+n.height<window.innerHeight,u=e.top-n.height>0,s=Math.round((window.innerWidth-n.width)/2);n.width>window.innerWidth?s=0:i?s=e.left:o&&(s=e.right-n.width);var a=r||!u,c=a?window.pageYOffset+e.bottom+n.height+30:0;this.style.left="".concat(s,"px"),this.style.top="".concat(Math.round(a?e.bottom:e.top-n.height),"px"),w.style.cssText="position:absolute;padding:1px;top:".concat(Math.round(c),"px"),setTimeout((function(){return t._skipPosition=null}))}}},{key:"button",get:function(){return this._button&&(this._button.getAttribute("data-for")||this._button.getAttribute("for"))===this.id?this._button:(this._button=this.id&&document.querySelector('[for="'.concat(this.id,'"],[data-for="').concat(this.id,'"]')))||this.previousElementSibling}},{key:"popup",get:function(){return"true"===this.getAttribute("data-popup")||this.getAttribute("data-popup")||this.hasAttribute("data-popup")},set:function(t){this[!1===t?"removeAttribute":"setAttribute"]("data-popup",t)}},{key:"autoposition",get:function(){return this.hasAttribute("autoposition")},set:function(t){g(this,"autoposition",t)}},{key:"hidden",get:function(){return this.hasAttribute("hidden")},set:function(t){g(this,"hidden",t)}},{key:"value",get:function(){return this.button.value||this.button.textContent},set:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(this.button&&this.popup.length){var e=this.button,n=(e.getAttribute("aria-label")||",".concat(this.popup)).split(",")[1],i=t.textContent||t||"";if(n===this.popup){var o=e.querySelector("span")||e;e.value=t.value||i,o[t.innerHTML?"innerHTML":"textContent"]=t.innerHTML||i,e.setAttribute("aria-label","".concat(e.textContent,",").concat(this.popup))}}}}],[{key:"observedAttributes",get:function(){return["hidden","autoposition"]}}]),d}(s(HTMLElement));function E(t,e){e?(t._positionObserver&&t._positionObserver.disconnect(),w.parentNode&&w.parentNode.removeChild(w),t.style.position=t._positionObserver=null,window.removeEventListener("scroll",t,!0),window.removeEventListener("resize",t)):t.autoposition&&(t._positionObserver||(t._positionObserver=window.MutationObserver&&new window.MutationObserver(t.updatePosition.bind(t))),t._positionObserver&&t._positionObserver.observe(t,{childList:!0,subtree:!0,attributes:!0}),document.body.appendChild(w),window.addEventListener("scroll",t,!0),window.addEventListener("resize",t),t.updatePosition())}return m})),window.customElements.define("core-toggle",coreToggle);
 //# sourceMappingURL=core-toggle.min.js.map

core-toggle.test.cjs.js

@@ -1,2 +0,2 @@
-/*! @nrk/core-toggle v4.0.2 - Copyright (c) 2017-2022 NRK */
+/*! @nrk/core-toggle v4.0.3 - Copyright (c) 2017-2022 NRK */
 'use strict';
@@ -3,0 +3,0 @@

jsx.js

@@ -1,2 +0,2 @@
-/*! @nrk/core-toggle v4.0.2 - Copyright (c) 2017-2022 NRK */
+/*! @nrk/core-toggle v4.0.3 - Copyright (c) 2017-2022 NRK */
 'use strict';
@@ -475,3 +475,3 @@
 
-var version = "4.0.2";
+var version = "4.0.3";
 
@@ -629,2 +629,3 @@ /**
   customEvents: ['toggle', 'toggle.select'],
+  props: ['value'],
   suffix: version
@@ -631,0 +632,0 @@ });

package.json

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

readme.md

@@ -124,2 +124,3 @@ # Core Toggle
   forwardRef={(el) => {}}        // Optional. Get reference to underlying DOM custom element
+  value={String}                 // Optional. Set selected value in order to get correct aria-label. See "Example: Select"
   onToggle={Function}            // Optional. Toggle event listener. See event 'toggle'
@@ -242,2 +243,4 @@ onToggleSelect={Function}      // Optional. Toggle select event listener. See event 'toggle.select'
 
+### HTML and JavaScript
+
 ```html
@@ -263,2 +266,4 @@ <!--demo-->
 
+### React class component
+
 ```html
@@ -271,3 +276,3 @@ <!--demo-->
       super(props)
-      this.state = { value: 'Select number' }
+      this.state = { value: 'Episode 1' }
       this.onSelect = this.onSelect.bind(this)
@@ -282,7 +287,7 @@ }
         <button type="button">{this.state.value}</button>
-        <CoreToggle className='my-dropdown' data-popup='Example picker' hidden onToggleSelect={this.onSelect}>
+        <CoreToggle className='my-dropdown' data-popup='Choose episode' hidden onToggleSelect={this.onSelect} value={this.state.value}>
           <ul>
-            <li><button type="button">One</button></li>
-            <li><button type="button">Two</button></li>
-            <li><button type="button">Three</button></li>
+            <li><button type="button">Episode 1</button></li>
+            <li><button type="button">Episode 2</button></li>
+            <li><button type="button">Episode 3</button></li>
           </ul>
@@ -297,2 +302,37 @@ </CoreToggle>
 
+### React function component
+
+```html
+<!--demo-->
+<div id="react-func-toggle-select"></div>
+<script type="text/javascript">
+  const FuncToggle = () => {
+    const [selectVal, setSelectVal] = React.useState('Episode 1')
+    const handleSelect = (event) => {
+      event.target.hidden = true
+      setSelectVal(event.detail.textContent)
+    }
+    return (
+      <>
+        <button type="button">{selectVal}</button>
+        <CoreToggle
+          className='my-dropdown'
+          data-popup='Choose episode'
+          onToggleSelect={handleSelect}
+          value={selectVal}
+          hidden
+        >
+          <ul>
+            <li><button type="button">Episode 1</button></li>
+            <li><button type="button">Episode 2</button></li>
+            <li><button type="button">Episode 3</button></li>
+          </ul>
+        </CoreToggle>
+      </>
+    )
+  }
+  ReactDOM.render(<FuncToggle/>, document.getElementById('react-func-toggle-select'))
+</script>
+```
+
 ## FAQ
@@ -299,0 +339,0 @@

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

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

Improved metrics

Total package byte prevSize

207069

increased by0.63%

Lines of code

2784

increased by0.11%

Number of lines in readme file

348

increased by12.99%

No dependency changes