@preline/pin-input 2.6.0 → 3.1.0

package/index.js

@@ -1,16 +1,16 @@
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n=e();for(var o in n)("object"==typeof exports?exports:t)[o]=n[o]}}(self,(()=>(()=>{"use strict";var t={961:(t,e)=>{Object.defineProperty(e,"__esModule",{value:!0});var n=function(){function t(t,e,n){this.el=t,this.options=e,this.events=n,this.el=t,this.options=e,this.events={}}return t.prototype.createCollection=function(t,e){var n;t.push({id:(null===(n=null==e?void 0:e.el)||void 0===n?void 0:n.id)||t.length+1,element:e})},t.prototype.fireEvent=function(t,e){if(void 0===e&&(e=null),this.events.hasOwnProperty(t))return this.events[t](e)},t.prototype.on=function(t,e){this.events[t]=e},t}();e.default=n},60:function(t,e,n){
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var i in n)("object"==typeof exports?exports:e)[i]=n[i]}}(self,(()=>(()=>{"use strict";var e={60:function(e,t,n){
 /*
  * HSPinInput
- * @version: 2.6.0
+ * @version: 3.1.0
  * @author: Preline Labs Ltd.
  * @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
  * Copyright 2024 Preline Labs Ltd.
  */
-var o,i=this&&this.__extends||(o=function(t,e){return o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},o(t,e)},function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function n(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}),r=this&&this.__assign||function(){return r=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t},r.apply(this,arguments)},u=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});var s=n(292),l=function(t){function e(e,n){var o=t.call(this,e,n)||this,i=e.getAttribute("data-hs-pin-input"),u=i?JSON.parse(i):{},s=r(r({},u),n);return o.items=o.el.querySelectorAll("[data-hs-pin-input-item]"),o.currentItem=null,o.currentValue=new Array(o.items.length).fill(""),o.placeholders=[],o.availableCharsRE=new RegExp((null==s?void 0:s.availableCharsRE)||"^[a-zA-Z0-9]+$"),o.onElementInputListener=[],o.onElementPasteListener=[],o.onElementKeydownListener=[],o.onElementFocusinListener=[],o.onElementFocusoutListener=[],o.init(),o}return i(e,t),e.prototype.elementInput=function(t,e){this.onInput(t,e)},e.prototype.elementPaste=function(t){this.onPaste(t)},e.prototype.elementKeydown=function(t,e){this.onKeydown(t,e)},e.prototype.elementFocusin=function(t){this.onFocusIn(t)},e.prototype.elementFocusout=function(t){this.onFocusOut(t)},e.prototype.init=function(){this.createCollection(window.$hsPinInputCollection,this),this.items.length&&this.build()},e.prototype.build=function(){this.buildInputItems()},e.prototype.buildInputItems=function(){var t=this;this.items.forEach((function(e,n){t.placeholders.push(e.getAttribute("placeholder")||""),e.hasAttribute("autofocus")&&t.onFocusIn(n),t.onElementInputListener.push({el:e,fn:function(e){return t.elementInput(e,n)}}),t.onElementPasteListener.push({el:e,fn:function(e){return t.elementPaste(e)}}),t.onElementKeydownListener.push({el:e,fn:function(e){return t.elementKeydown(e,n)}}),t.onElementFocusinListener.push({el:e,fn:function(){return t.elementFocusin(n)}}),t.onElementFocusoutListener.push({el:e,fn:function(){return t.elementFocusout(n)}}),e.addEventListener("input",t.onElementInputListener.find((function(t){return t.el===e})).fn),e.addEventListener("paste",t.onElementPasteListener.find((function(t){return t.el===e})).fn),e.addEventListener("keydown",t.onElementKeydownListener.find((function(t){return t.el===e})).fn),e.addEventListener("focusin",t.onElementFocusinListener.find((function(t){return t.el===e})).fn),e.addEventListener("focusout",t.onElementFocusoutListener.find((function(t){return t.el===e})).fn)}))},e.prototype.checkIfNumber=function(t){return t.match(this.availableCharsRE)},e.prototype.autoFillAll=function(t){var e=this;Array.from(t).forEach((function(t,n){if(!(null==e?void 0:e.items[n]))return!1;e.items[n].value=t,e.items[n].dispatchEvent(new Event("input",{bubbles:!0}))}))},e.prototype.setCurrentValue=function(){this.currentValue=Array.from(this.items).map((function(t){return t.value}))},e.prototype.toggleCompleted=function(){this.currentValue.includes("")?this.el.classList.remove("active"):this.el.classList.add("active")},e.prototype.onInput=function(t,e){var n=t.target.value;if(this.currentItem=t.target,this.currentItem.value="",this.currentItem.value=n[n.length-1],!this.checkIfNumber(this.currentItem.value))return this.currentItem.value=this.currentValue[e]||"",!1;if(this.setCurrentValue(),this.currentItem.value){if(e<this.items.length-1&&this.items[e+1].focus(),!this.currentValue.includes("")){var o={currentValue:this.currentValue};this.fireEvent("completed",o),(0,s.dispatch)("completed.hs.pinInput",this.el,o)}this.toggleCompleted()}else e>0&&this.items[e-1].focus()},e.prototype.onKeydown=function(t,e){"Backspace"===t.key&&e>0&&(""===this.items[e].value?(this.items[e-1].value="",this.items[e-1].focus()):this.items[e].value=""),this.setCurrentValue(),this.toggleCompleted()},e.prototype.onFocusIn=function(t){this.items[t].setAttribute("placeholder","")},e.prototype.onFocusOut=function(t){this.items[t].setAttribute("placeholder",this.placeholders[t])},e.prototype.onPaste=function(t){var e=this;t.preventDefault(),this.items.forEach((function(n){document.activeElement===n&&e.autoFillAll(t.clipboardData.getData("text"))}))},e.prototype.destroy=function(){var t=this;this.el.classList.remove("active"),this.items.length&&this.items.forEach((function(e){e.removeEventListener("input",t.onElementInputListener.find((function(t){return t.el===e})).fn),e.removeEventListener("paste",t.onElementPasteListener.find((function(t){return t.el===e})).fn),e.removeEventListener("keydown",t.onElementKeydownListener.find((function(t){return t.el===e})).fn),e.removeEventListener("focusin",t.onElementFocusinListener.find((function(t){return t.el===e})).fn),e.removeEventListener("focusout",t.onElementFocusoutListener.find((function(t){return t.el===e})).fn)})),this.items=null,this.currentItem=null,this.currentValue=null,window.$hsPinInputCollection=window.$hsPinInputCollection.filter((function(e){return e.element.el!==t.el}))},e.getInstance=function(t,e){var n=window.$hsPinInputCollection.find((function(e){return e.element.el===("string"==typeof t?document.querySelector(t):t)}));return n?e?n:n.element:null},e.autoInit=function(){window.$hsPinInputCollection||(window.$hsPinInputCollection=[]),window.$hsPinInputCollection&&(window.$hsPinInputCollection=window.$hsPinInputCollection.filter((function(t){var e=t.element;return document.contains(e.el)}))),document.querySelectorAll("[data-hs-pin-input]:not(.--prevent-on-load-init)").forEach((function(t){window.$hsPinInputCollection.find((function(e){var n;return(null===(n=null==e?void 0:e.element)||void 0===n?void 0:n.el)===t}))||new e(t)}))},e}(u(n(961)).default);window.addEventListener("load",(function(){l.autoInit()})),"undefined"!=typeof window&&(window.HSPinInput=l),e.default=l},292:function(t,e){
+var i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const s=n(292),o=i(n(961));class l extends o.default{elementInput(e,t){this.onInput(e,t)}elementPaste(e){this.onPaste(e)}elementKeydown(e,t){this.onKeydown(e,t)}elementFocusin(e){this.onFocusIn(e)}elementFocusout(e){this.onFocusOut(e)}constructor(e,t){super(e,t);const n=e.getAttribute("data-hs-pin-input"),i=n?JSON.parse(n):{},s=Object.assign(Object.assign({},i),t);this.items=this.el.querySelectorAll("[data-hs-pin-input-item]"),this.currentItem=null,this.currentValue=new Array(this.items.length).fill(""),this.placeholders=[],this.availableCharsRE=new RegExp((null==s?void 0:s.availableCharsRE)||"^[a-zA-Z0-9]+$"),this.onElementInputListener=[],this.onElementPasteListener=[],this.onElementKeydownListener=[],this.onElementFocusinListener=[],this.onElementFocusoutListener=[],this.init()}init(){this.createCollection(window.$hsPinInputCollection,this),this.items.length&&this.build()}build(){this.buildInputItems()}buildInputItems(){this.items.forEach(((e,t)=>{this.placeholders.push(e.getAttribute("placeholder")||""),e.hasAttribute("autofocus")&&this.onFocusIn(t),this.onElementInputListener.push({el:e,fn:e=>this.elementInput(e,t)}),this.onElementPasteListener.push({el:e,fn:e=>this.elementPaste(e)}),this.onElementKeydownListener.push({el:e,fn:e=>this.elementKeydown(e,t)}),this.onElementFocusinListener.push({el:e,fn:()=>this.elementFocusin(t)}),this.onElementFocusoutListener.push({el:e,fn:()=>this.elementFocusout(t)}),e.addEventListener("input",this.onElementInputListener.find((t=>t.el===e)).fn),e.addEventListener("paste",this.onElementPasteListener.find((t=>t.el===e)).fn),e.addEventListener("keydown",this.onElementKeydownListener.find((t=>t.el===e)).fn),e.addEventListener("focusin",this.onElementFocusinListener.find((t=>t.el===e)).fn),e.addEventListener("focusout",this.onElementFocusoutListener.find((t=>t.el===e)).fn)}))}checkIfNumber(e){return e.match(this.availableCharsRE)}autoFillAll(e){Array.from(e).forEach(((e,t)=>{if(!(null==this?void 0:this.items[t]))return!1;this.items[t].value=e,this.items[t].dispatchEvent(new Event("input",{bubbles:!0}))}))}setCurrentValue(){this.currentValue=Array.from(this.items).map((e=>e.value))}toggleCompleted(){this.currentValue.includes("")?this.el.classList.remove("active"):this.el.classList.add("active")}onInput(e,t){const n=e.target.value;if(this.currentItem=e.target,this.currentItem.value="",this.currentItem.value=n[n.length-1],!this.checkIfNumber(this.currentItem.value))return this.currentItem.value=this.currentValue[t]||"",!1;if(this.setCurrentValue(),this.currentItem.value){if(t<this.items.length-1&&this.items[t+1].focus(),!this.currentValue.includes("")){const e={currentValue:this.currentValue};this.fireEvent("completed",e),(0,s.dispatch)("completed.hs.pinInput",this.el,e)}this.toggleCompleted()}else t>0&&this.items[t-1].focus()}onKeydown(e,t){"Backspace"===e.key&&t>0&&(""===this.items[t].value?(this.items[t-1].value="",this.items[t-1].focus()):this.items[t].value=""),this.setCurrentValue(),this.toggleCompleted()}onFocusIn(e){this.items[e].setAttribute("placeholder","")}onFocusOut(e){this.items[e].setAttribute("placeholder",this.placeholders[e])}onPaste(e){e.preventDefault(),this.items.forEach((t=>{document.activeElement===t&&this.autoFillAll(e.clipboardData.getData("text"))}))}destroy(){this.el.classList.remove("active"),this.items.length&&this.items.forEach((e=>{e.removeEventListener("input",this.onElementInputListener.find((t=>t.el===e)).fn),e.removeEventListener("paste",this.onElementPasteListener.find((t=>t.el===e)).fn),e.removeEventListener("keydown",this.onElementKeydownListener.find((t=>t.el===e)).fn),e.removeEventListener("focusin",this.onElementFocusinListener.find((t=>t.el===e)).fn),e.removeEventListener("focusout",this.onElementFocusoutListener.find((t=>t.el===e)).fn)})),this.items=null,this.currentItem=null,this.currentValue=null,window.$hsPinInputCollection=window.$hsPinInputCollection.filter((({element:e})=>e.el!==this.el))}static getInstance(e,t){const n=window.$hsPinInputCollection.find((t=>t.element.el===("string"==typeof e?document.querySelector(e):e)));return n?t?n:n.element:null}static autoInit(){window.$hsPinInputCollection||(window.$hsPinInputCollection=[]),window.$hsPinInputCollection&&(window.$hsPinInputCollection=window.$hsPinInputCollection.filter((({element:e})=>document.contains(e.el)))),document.querySelectorAll("[data-hs-pin-input]:not(.--prevent-on-load-init)").forEach((e=>{window.$hsPinInputCollection.find((t=>{var n;return(null===(n=null==t?void 0:t.element)||void 0===n?void 0:n.el)===e}))||new l(e)}))}}window.addEventListener("load",(()=>{l.autoInit()})),"undefined"!=typeof window&&(window.HSPinInput=l),t.default=l},292:function(e,t){
 /*
- * @version: 2.6.0
+ * @version: 3.1.0
  * @author: Preline Labs Ltd.
  * @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
  * Copyright 2024 Preline Labs Ltd.
  */
-var n=this;Object.defineProperty(e,"__esModule",{value:!0}),e.menuSearchHistory=e.classToClassList=e.htmlToElement=e.afterTransition=e.dispatch=e.debounce=e.isJson=e.isDirectChild=e.isFormElement=e.isParentOrElementHidden=e.isEnoughSpace=e.isIpadOS=e.isIOS=e.getZIndex=e.getClassPropertyAlt=e.getClassProperty=e.stringToBoolean=void 0,e.getHighestZIndex=function(t){var e=Number.NEGATIVE_INFINITY;return t.forEach((function(t){var n=o(t);"auto"!==n&&(n=parseInt(n,10))>e&&(e=n)})),e};e.stringToBoolean=function(t){return"true"===t};e.getClassProperty=function(t,e,n){return void 0===n&&(n=""),(window.getComputedStyle(t).getPropertyValue(e)||n).replace(" ","")};e.getClassPropertyAlt=function(t,e,n){void 0===n&&(n="");var o="";return t.classList.forEach((function(t){t.includes(e)&&(o=t)})),o.match(/:(.*)]/)?o.match(/:(.*)]/)[1]:n};var o=function(t){return window.getComputedStyle(t).getPropertyValue("z-index")};e.getZIndex=o;e.isIOS=function(){return!!/iPad|iPhone|iPod/.test(navigator.platform)||navigator.maxTouchPoints&&navigator.maxTouchPoints>2&&/MacIntel/.test(navigator.platform)};e.isIpadOS=function(){return navigator.maxTouchPoints&&navigator.maxTouchPoints>2&&/MacIntel/.test(navigator.platform)};e.isDirectChild=function(t,e){for(var n=t.children,o=0;o<n.length;o++)if(n[o]===e)return!0;return!1};e.isEnoughSpace=function(t,e,n,o,i){void 0===n&&(n="auto"),void 0===o&&(o=10),void 0===i&&(i=null);var r=e.getBoundingClientRect(),u=i?i.getBoundingClientRect():null,s=window.innerHeight,l=u?r.top-u.top:r.top,a=(i?u.bottom:s)-r.bottom,c=t.clientHeight+o;return"bottom"===n?a>=c:"top"===n?l>=c:l>=c||a>=c};e.isFormElement=function(t){return t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement};var i=function(t){return!!t&&("none"===window.getComputedStyle(t).display||i(t.parentElement))};e.isParentOrElementHidden=i;e.isJson=function(t){if("string"!=typeof t)return!1;var e=t.trim()[0],n=t.trim().slice(-1);if("{"===e&&"}"===n||"["===e&&"]"===n)try{return JSON.parse(t),!0}catch(t){return!1}return!1};e.debounce=function(t,e){var o;return void 0===e&&(e=200),function(){for(var i=[],r=0;r<arguments.length;r++)i[r]=arguments[r];clearTimeout(o),o=setTimeout((function(){t.apply(n,i)}),e)}};e.dispatch=function(t,e,n){void 0===n&&(n=null);var o=new CustomEvent(t,{detail:{payload:n},bubbles:!0,cancelable:!0,composed:!1});e.dispatchEvent(o)};e.afterTransition=function(t,e){var n=function(){e(),t.removeEventListener("transitionend",n,!0)},o=window.getComputedStyle(t),i=o.getPropertyValue("transition-duration");"none"!==o.getPropertyValue("transition-property")&&parseFloat(i)>0?t.addEventListener("transitionend",n,!0):e()};e.htmlToElement=function(t){var e=document.createElement("template");return t=t.trim(),e.innerHTML=t,e.content.firstChild};e.classToClassList=function(t,e,n,o){void 0===n&&(n=" "),void 0===o&&(o="add"),t.split(n).forEach((function(t){return"add"===o?e.classList.add(t):e.classList.remove(t)}))};e.menuSearchHistory={historyIndex:-1,addHistory:function(t){this.historyIndex=t},existsInHistory:function(t){return t>this.historyIndex},clearHistory:function(){this.historyIndex=-1}}}},e={};var n=function n(o){var i=e[o];if(void 0!==i)return i.exports;var r=e[o]={exports:{}};return t[o].call(r.exports,r,r.exports,n),r.exports}(60);return n})()));
+Object.defineProperty(t,"__esModule",{value:!0}),t.menuSearchHistory=t.classToClassList=t.htmlToElement=t.afterTransition=t.dispatch=t.debounce=t.isScrollable=t.isParentOrElementHidden=t.isJson=t.isIpadOS=t.isIOS=t.isDirectChild=t.isFormElement=t.isFocused=t.isEnoughSpace=t.getHighestZIndex=t.getZIndex=t.getClassPropertyAlt=t.getClassProperty=t.stringToBoolean=void 0;t.stringToBoolean=e=>"true"===e;t.getClassProperty=(e,t,n="")=>(window.getComputedStyle(e).getPropertyValue(t)||n).replace(" ","");t.getClassPropertyAlt=(e,t,n="")=>{let i="";return e.classList.forEach((e=>{e.includes(t)&&(i=e)})),i.match(/:(.*)]/)?i.match(/:(.*)]/)[1]:n};const n=e=>window.getComputedStyle(e).getPropertyValue("z-index");t.getZIndex=n;t.getHighestZIndex=e=>{let t=Number.NEGATIVE_INFINITY;return e.forEach((e=>{let i=n(e);"auto"!==i&&(i=parseInt(i,10),i>t&&(t=i))})),t};t.isDirectChild=(e,t)=>{const n=e.children;for(let e=0;e<n.length;e++)if(n[e]===t)return!0;return!1};t.isEnoughSpace=(e,t,n="auto",i=10,s=null)=>{const o=t.getBoundingClientRect(),l=s?s.getBoundingClientRect():null,r=window.innerHeight,u=l?o.top-l.top:o.top,a=(s?l.bottom:r)-o.bottom,c=e.clientHeight+i;return"bottom"===n?a>=c:"top"===n?u>=c:u>=c||a>=c};t.isFocused=e=>document.activeElement===e;t.isFormElement=e=>e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement;t.isIOS=()=>!!/iPad|iPhone|iPod/.test(navigator.platform)||navigator.maxTouchPoints&&navigator.maxTouchPoints>2&&/MacIntel/.test(navigator.platform);t.isIpadOS=()=>navigator.maxTouchPoints&&navigator.maxTouchPoints>2&&/MacIntel/.test(navigator.platform);t.isJson=e=>{if("string"!=typeof e)return!1;const t=e.trim()[0],n=e.trim().slice(-1);if("{"===t&&"}"===n||"["===t&&"]"===n)try{return JSON.parse(e),!0}catch(e){return!1}return!1};const i=e=>{if(!e)return!1;return"none"===window.getComputedStyle(e).display||i(e.parentElement)};t.isParentOrElementHidden=i;t.isScrollable=e=>{const t=window.getComputedStyle(e),n=t.overflowY,i=t.overflowX,s=("scroll"===n||"auto"===n)&&e.scrollHeight>e.clientHeight,o=("scroll"===i||"auto"===i)&&e.scrollWidth>e.clientWidth;return s||o};t.debounce=(e,t=200)=>{let n;return(...i)=>{clearTimeout(n),n=setTimeout((()=>{e.apply(this,i)}),t)}};t.dispatch=(e,t,n=null)=>{const i=new CustomEvent(e,{detail:{payload:n},bubbles:!0,cancelable:!0,composed:!1});t.dispatchEvent(i)};t.afterTransition=(e,t)=>{const n=()=>{t(),e.removeEventListener("transitionend",n,!0)},i=window.getComputedStyle(e),s=i.getPropertyValue("transition-duration");"none"!==i.getPropertyValue("transition-property")&&parseFloat(s)>0?e.addEventListener("transitionend",n,!0):t()};t.htmlToElement=e=>{const t=document.createElement("template");return e=e.trim(),t.innerHTML=e,t.content.firstChild};t.classToClassList=(e,t,n=" ",i="add")=>{e.split(n).forEach((e=>"add"===i?t.classList.add(e):t.classList.remove(e)))};const s={historyIndex:-1,addHistory(e){this.historyIndex=e},existsInHistory(e){return e>this.historyIndex},clearHistory(){this.historyIndex=-1}};t.menuSearchHistory=s},961:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0});t.default=class{constructor(e,t,n){this.el=e,this.options=t,this.events=n,this.el=e,this.options=t,this.events={}}createCollection(e,t){var n;e.push({id:(null===(n=null==t?void 0:t.el)||void 0===n?void 0:n.id)||e.length+1,element:t})}fireEvent(e,t=null){if(this.events.hasOwnProperty(e))return this.events[e](t)}on(e,t){this.events[e]=t}}}},t={};var n=function n(i){var s=t[i];if(void 0!==s)return s.exports;var o=t[i]={exports:{}};return e[i].call(o.exports,o,o.exports,n),o.exports}(60);return n})()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preline/pin-input",
-  "version": "2.6.0",
+  "version": "3.1.0",
   "description": "Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.",
   "main": "index.js",
   "types": "index.d.ts",

package/variants.css

@@ -0,0 +1,10 @@
+@custom-variant hs-pin-input-active {
+
+  &.active {
+    @slot;
+  }
+
+  .active & {
+    @slot;
+  }
+}