blip-toolkit - npm Package Compare versions

Comparing version 1.4.5 to 1.5.0

dist/blip-toolkit.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.BLiPToolkit=t():e.BLiPToolkit=t()}(window,function(){return function(e){var t={};function s(i){if(t[i])return t[i].exports;var n=t[i]={i:i,l:!1,exports:{}};return e[i].call(n.exports,n,n.exports,s),n.l=!0,n.exports}return s.m=e,s.c=t,s.d=function(e,t,i){s.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:i})},s.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="",s(s.s=6)}([,function(e,t,s){},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.EventEmitter=(e=>({$event:e}))},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.strToEl=(()=>{const e=document.createElement("div");return function(t){const s=t.trim();let i;for(e.innerHTML=s,i=e.children[0];e.firstChild;)e.removeChild(e.firstChild);return i}})(),t.guid=(()=>{const e=()=>Math.floor(65536*(1+Math.random())).toString(16).substring(1);return()=>e()+e()+"-"+e()+"-"+e()+"-"+e()+"-"+e()+e()+e()})()},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.BlipSelect=void 0;var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var i in s)Object.prototype.hasOwnProperty.call(s,i)&&(e[i]=s[i])}return e},n=s(3),l=s(2);const o=300,c="bp-input-wrapper",a="blip-select",r="bp-label",p="blip-select__input",u="blip-select__options",h="blip-select__options--open-top",d="blip-select__option",f="blip-select__option--selected",b="bp-input--with-bullet",O="bp-c-rooftop",v="bp-c-cloud",S="bp-c-blip-light",g="bp-input-wrapper--focus",_="bp-input-wrapper--disabled";t.BlipSelect=class{constructor(e,t){this.$state={isSelectOpen:!1,noResultsFound:!1,disabled:!1,label:"",placeholder:"",mode:"select",noResultsText:"No results found",beforeOpenSelect:()=>{},afterOpenSelect:()=>{},beforeCloseSelect:()=>{},afterCloseSelect:()=>{},onInputChange:({$event:e})=>{},onSelectOption:({$event:e})=>{},customSearch:void 0},this.wrapper="",this.elementLabel="",this.selectOptions=[],this.searchResults=[],this.selectOptionsContainer="",this.selectLabel="",this._handleSelectFocus="",this._handleSelectBlur="",this._handleOptionClick="",this.configOptions=i({},this.$state,t),this.el=e,this._setup(),this._setupEventHandlers()}get isSelectOpen(){return this.$state.isSelectOpen}set isSelectOpen(e){this.$state.isSelectOpen=e}get noResultsFound(){return this.$state.noResultsFound}set noResultsFound(e){switch(this.$state.noResultsFound=e,e){case!0:this.selectOptionsContainer.innerHTML=`<li style="cursor: default" class="${d}">${this.configOptions.noResultsText}</li>`}}get isDisabled(){return this.$state.disabled}set isDisabled(e){switch(this.$state.disabled=e,this.input.disabled=e,e){case!0:this.wrapper.classList.add(_);break;case!1:this.wrapper.classList.remove(_)}}_setup(){if(this.el instanceof Element==0)throw new Error("Invalid dom element");const e=this.el.querySelectorAll("option");if(0===e.length)throw new Error("Element has no options");const t=this.el.parentNode;switch(this.customSelectId=`${u}-${(0,n.guid)()}`,this.configOptions.mode){case"select":this.wrapper=(0,n.strToEl)(`\n          <div class="${c} ${a} ${b}">\n            <label class="${r} ${O}">${this.configOptions.label}</label>\n            <input placeholder="${this.configOptions.placeholder}" class="${p} ${v}" data-target="${this.customSelectId}" readonly>\n            <ul class="${u}" id="${this.customSelectId}"></ul>\n          </div>\n        `);break;case"autocomplete":this.wrapper=(0,n.strToEl)(`\n          <div class="${c} ${a}">\n            <label class="${r} ${O}">${this.configOptions.label}</label>\n            <input placeholder="${this.configOptions.placeholder}" class="${p} ${v}" data-target="${this.customSelectId}">\n            <ul class="${u}" id="${this.customSelectId}"></ul>\n          </div>\n        `);break;default:throw new Error("Unrecognized component mode")}t.insertBefore(this.wrapper,this.el),this.selectOptionsContainer=this.wrapper.querySelector(`#${this.customSelectId}`),this.selectLabel=this.wrapper.querySelector("label"),e.forEach(e=>{this.selectOptions=this.selectOptions.concat({value:e.value,label:e.label,element:e})}),this._arrayToDomOptions(this.selectOptions),this.input=this.wrapper.querySelector(`input[data-target="${this.customSelectId}"]`),this.el.style.display="none",this.isDisabled=this.el.disabled}_arrayToDomOptions(e=[{value:"",label:""}]){this.selectOptionsContainer.innerHTML="",e.forEach(({value:e,label:t})=>{this.selectOptionsContainer.appendChild((0,n.strToEl)(`\n          <li tabindex="0" class="${d}" data-value="${e}">${t}</li>\n        `))}),this._setupOptionsEventHandlers()}_setupOptionsEventHandlers(){this.selectOptionsContainer.querySelectorAll("li").forEach(e=>e.addEventListener("click",e=>this._onOptionClick(e)))}_setupEventHandlers(){switch(this._handleSelectFocus=this._onSelectFocus.bind(this),this._handleSelectBlur=this._onSelectBlur.bind(this),this._handleCenterOption=this._centerSelectedOption.bind(this),this._handleInputChange=this._onInputChange.bind(this),this.input.addEventListener("focus",this._handleSelectFocus),this.input.addEventListener("blur",this._handleSelectBlur),this.configOptions.mode){case"autocomplete":this.input.addEventListener("keyup",this._handleInputChange)}this.selectOptionsContainer.addEventListener("transitionend",this._handleCenterOption)}_onInputChange(e){if("function"!=typeof this.configOptions.onInputChange)throw new Error('Callback "onInputChange" is not a function');const t=this.input.value,s=this.configOptions.customSearch?this.configOptions.customSearch.call(this,(0,l.EventEmitter)({query:t,items:this.selectOptions})):this.selectOptions.filter(({value:e,label:s})=>s.toLowerCase().includes(t.toLowerCase()));this.configOptions.onInputChange((0,l.EventEmitter)({value:t,event:e})),s.length>0?(this.noResultsFound=!1,this._arrayToDomOptions(s)):this.noResultsFound=!0}_setInputValue({value:e,label:t}){if(this.input.value=t||e,"function"!=typeof this.configOptions.onSelectOption)throw new Error('Callback "onSelectOption" is not a function');this.configOptions.onSelectOption.call(this,(0,l.EventEmitter)({value:e,label:t}))}setValue({value:e,label:t}={value:"",label:""}){if(e){const t=this.selectOptions.find(t=>t.value===e);t?(t.element.classList.add(f),this._setInputValue({value:t.value,label:t.label})):this._setInputValue({value:e})}}getValue(){if(!this.input.value)return{value:void 0,label:void 0};const e=this.selectOptions.find(e=>e.label===this.input.value);return e?{value:e.value,label:e.label}:{value:this.input.value,label:this.input.value}}_onOptionClick(e){this.isSelectOpen&&(this._setInputValue(this.selectOptions.find(t=>t.value===e.target.getAttribute("data-value"))),this._resetSelectedOptions(),e.target.classList.add(f))}_resetSelectedOptions(){this.selectOptionsContainer.querySelectorAll("li").forEach(e=>e.classList.contains(f)?e.classList.remove(f):"")}_onSelectFocus(){if(!this.isDisabled){if("function"!=typeof this.configOptions.beforeOpenSelect)throw Error('Callback "beforeOpenSelect" is not a function');if("function"!=typeof this.configOptions.afterOpenSelect)throw Error('Callback "afterOpenSelect" is not a function');this.configOptions.beforeOpenSelect(),this._openSelect(),this.configOptions.afterOpenSelect()}}_onSelectBlur(){if("function"!=typeof this.configOptions.beforeCloseSelect)throw Error('Callback "beforeCloseSelect" is not a function');if("function"!=typeof this.configOptions.afterCloseSelect)throw Error('Callback "afterCloseSelect" is not a function');this.configOptions.beforeCloseSelect(),setTimeout(()=>{this._closeSelect()},o-200),this.configOptions.afterCloseSelect()}_openSelect(){this.selectOptionsContainer.style.display="block",setTimeout(()=>{const e=this.selectOptionsContainer.offsetHeight,t=this.wrapper.getBoundingClientRect().top,s=window.innerHeight-t;(s<e&&t>e||t>s)&&this.selectOptionsContainer.classList.add(h),this.selectOptionsContainer.style.transform="scale(1)",this.selectOptionsContainer.style.opacity=1}),this.input.parentNode.classList.add(g),this.selectLabel.classList.remove(O),this.selectLabel.classList.add(S),this.isSelectOpen=!0}_centerSelectedOption(e){const t=this.selectOptionsContainer.querySelector(`li.${f}`);if(this.selectOptionsContainer.scrollHeight>this.selectOptionsContainer.clientHeight&&"transform"===e.propertyName){if(!t)return;let e=t.getBoundingClientRect().top-this.selectOptionsContainer.getBoundingClientRect().top;e-=this.selectOptionsContainer.clientHeight/2,this.selectOptionsContainer.scrollTop=e}}_closeSelect(){this.selectOptionsContainer.style.transform="scale(0)",this.selectOptionsContainer.style.opacity=0,setTimeout(()=>{this.selectOptionsContainer.style.display="none",this.selectOptionsContainer.classList.remove(h)},o),this.input.parentNode.classList.remove(g),this.selectLabel.classList.remove(S),this.selectLabel.classList.add(O),this.isSelectOpen=!1}}},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.BlipSelect=void 0;var i=s(4);Object.defineProperty(t,"BlipSelect",{enumerable:!0,get:function(){return i.BlipSelect}}),s(1)},function(e,t,s){e.exports=s(5)}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.BLiPToolkit=t():e.BLiPToolkit=t()}(window,function(){return function(e){var t={};function s(i){if(t[i])return t[i].exports;var n=t[i]={i:i,l:!1,exports:{}};return e[i].call(n.exports,n,n.exports,s),n.l=!0,n.exports}return s.m=e,s.c=t,s.d=function(e,t,i){s.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:i})},s.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="",s(s.s=6)}([,function(e,t,s){},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.EventEmitter=(e=>({$event:e}))},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.strToEl=(()=>{const e=document.createElement("div");return function(t){const s=t.trim();let i;for(e.innerHTML=s,i=e.children[0];e.firstChild;)e.removeChild(e.firstChild);return i}})(),t.guid=(()=>{const e=()=>Math.floor(65536*(1+Math.random())).toString(16).substring(1);return()=>e()+e()+"-"+e()+"-"+e()+"-"+e()+"-"+e()+e()+e()})()},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.BlipSelect=void 0;var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var i in s)Object.prototype.hasOwnProperty.call(s,i)&&(e[i]=s[i])}return e},n=s(3),l=s(2);const o=300,r="bp-input-wrapper",a="blip-select",c="bp-label",p="blip-select__input",h="blip-select__options",u="blip-select__options--open-top",d="blip-select__option",f="blip-select__option--selected",b="bp-input--with-bullet",O="bp-c-rooftop",v="bp-c-cloud",S="bp-c-blip-light",_="bp-input-wrapper--focus",m="bp-input-wrapper--disabled";t.BlipSelect=class{constructor(e,t){this.$state={isSelectOpen:!1,noResultsFound:!1,disabled:!1,label:"",placeholder:"",mode:"select",noResultsText:"No results found",beforeOpenSelect:()=>{},afterOpenSelect:()=>{},beforeCloseSelect:()=>{},afterCloseSelect:()=>{},onInputChange:({$event:e})=>{},onSelectOption:({$event:e})=>{},customSearch:void 0},this.wrapper="",this.elementLabel="",this.selectOptions=[],this.searchResults=[],this.selectOptionsContainer="",this.selectLabel="",this._handleSelectFocus="",this._handleSelectBlur="",this._handleOptionClick="",this.parentNode="",this.configOptions=i({},this.$state,t),this.el=e,this._setup(),this._setupEventHandlers()}get isSelectOpen(){return this.$state.isSelectOpen}set isSelectOpen(e){this.$state.isSelectOpen=e}get noResultsFound(){return this.$state.noResultsFound}set noResultsFound(e){switch(this.$state.noResultsFound=e,e){case!0:this.selectOptionsContainer.innerHTML=`<li style="cursor: default" class="${d}">${this.configOptions.noResultsText}</li>`}}get isDisabled(){return this.$state.disabled}set isDisabled(e){switch(this.$state.disabled=e,this.input.disabled=e,e){case!0:this.wrapper.classList.add(m);break;case!1:this.wrapper.classList.remove(m)}}_setup(){if(this.el instanceof Element==0)throw new Error("Invalid dom element");const e=this.el.querySelectorAll("option");if(0===e.length)throw new Error("Element has no options");switch(this.parentNode=this.el.parentNode,this.customSelectId=`${h}-${(0,n.guid)()}`,this.configOptions.mode){case"select":this.wrapper=(0,n.strToEl)(`\n          <div class="${r} ${a} ${b}">\n            <label class="${c} ${O}">${this.configOptions.label}</label>\n            <input placeholder="${this.configOptions.placeholder}" class="${p} ${v}" data-target="${this.customSelectId}" readonly>\n            <ul class="${h}" id="${this.customSelectId}"></ul>\n          </div>\n        `);break;case"autocomplete":this.wrapper=(0,n.strToEl)(`\n          <div class="${r} ${a}">\n            <label class="${c} ${O}">${this.configOptions.label}</label>\n            <input placeholder="${this.configOptions.placeholder}" class="${p} ${v}" data-target="${this.customSelectId}">\n            <ul class="${h}" id="${this.customSelectId}"></ul>\n          </div>\n        `);break;default:throw new Error("Unrecognized component mode")}this.parentNode.insertBefore(this.wrapper,this.el),this.selectOptionsContainer=this.wrapper.querySelector(`#${this.customSelectId}`),this.selectLabel=this.wrapper.querySelector("label"),e.forEach(e=>{this.selectOptions=this.selectOptions.concat({value:e.value,label:e.label,element:e})}),this._arrayToDomOptions(this.selectOptions),this.input=this.wrapper.querySelector(`input[data-target="${this.customSelectId}"]`),this.el.style.display="none",this.isDisabled=this.el.disabled}_arrayToDomOptions(e=[{value:"",label:""}]){this.selectOptionsContainer.innerHTML="",e.forEach(({value:e,label:t})=>{this.selectOptionsContainer.appendChild((0,n.strToEl)(`\n          <li tabindex="0" class="${d}" data-value="${e}">${t}</li>\n        `))}),this._setupOptionsEventHandlers()}_setupOptionsEventHandlers(){this.selectOptionsContainer.querySelectorAll("li").forEach(e=>e.addEventListener("click",e=>this._onOptionClick(e)))}_setupEventHandlers(){switch(this._handleSelectFocus=this._onSelectFocus.bind(this),this._handleSelectBlur=this._onSelectBlur.bind(this),this._handleCenterOption=this._centerSelectedOption.bind(this),this._handleInputChange=this._onInputChange.bind(this),this.input.addEventListener("focus",this._handleSelectFocus),this.input.addEventListener("blur",this._handleSelectBlur),this.configOptions.mode){case"autocomplete":this.input.addEventListener("keyup",this._handleInputChange)}this.selectOptionsContainer.addEventListener("transitionend",this._handleCenterOption)}_onInputChange(e){if("function"!=typeof this.configOptions.onInputChange)throw new Error('Callback "onInputChange" is not a function');const t=this.input.value,s=this.configOptions.customSearch?this.configOptions.customSearch.call(this,(0,l.EventEmitter)({query:t,items:this.selectOptions})):this.selectOptions.filter(({value:e,label:s})=>s.toLowerCase().includes(t.toLowerCase()));this.configOptions.onInputChange((0,l.EventEmitter)({value:t,event:e})),s.length>0?(this.noResultsFound=!1,this._arrayToDomOptions(s)):this.noResultsFound=!0}_setInputValue({value:e,label:t}){if(this.input.value=t||e,"function"!=typeof this.configOptions.onSelectOption)throw new Error('Callback "onSelectOption" is not a function');this.configOptions.onSelectOption.call(this,(0,l.EventEmitter)({value:e,label:t}))}clearInput(){this._setInputValue({value:"",label:""})}setValue({value:e,label:t}={value:"",label:""}){if(e){const t=this.selectOptions.find(t=>t.value===e);t?(t.element.classList.add(f),this._setInputValue({value:t.value,label:t.label})):this._setInputValue({value:e})}}getValue(){if(!this.input.value)return{value:void 0,label:void 0};const e=this.selectOptions.find(e=>e.label===this.input.value);return e?{value:e.value,label:e.label}:{value:this.input.value,label:this.input.value}}_onOptionClick(e){this.isSelectOpen&&(this._setInputValue(this.selectOptions.find(t=>t.value===e.target.getAttribute("data-value"))),this._resetSelectedOptions(),e.target.classList.add(f))}_resetSelectedOptions(){this.selectOptionsContainer.querySelectorAll("li").forEach(e=>e.classList.contains(f)?e.classList.remove(f):"")}_onSelectFocus(){if(!this.isDisabled){if("function"!=typeof this.configOptions.beforeOpenSelect)throw Error('Callback "beforeOpenSelect" is not a function');if("function"!=typeof this.configOptions.afterOpenSelect)throw Error('Callback "afterOpenSelect" is not a function');this.configOptions.beforeOpenSelect(),this._openSelect(),this.configOptions.afterOpenSelect()}}_onSelectBlur(){if("function"!=typeof this.configOptions.beforeCloseSelect)throw Error('Callback "beforeCloseSelect" is not a function');if("function"!=typeof this.configOptions.afterCloseSelect)throw Error('Callback "afterCloseSelect" is not a function');this.configOptions.beforeCloseSelect(),setTimeout(()=>{this._closeSelect()},o-200),this.configOptions.afterCloseSelect()}_openSelect(){this.selectOptionsContainer.style.display="block",setTimeout(()=>{const e=this.selectOptionsContainer.offsetHeight,t=this.wrapper.getBoundingClientRect().top,s=window.innerHeight-t;(s<e&&t>e||t>s)&&this.selectOptionsContainer.classList.add(u),this.selectOptionsContainer.style.transform="scale(1)",this.selectOptionsContainer.style.opacity=1}),this.input.parentNode.classList.add(_),this.selectLabel.classList.remove(O),this.selectLabel.classList.add(S),this.isSelectOpen=!0}_centerSelectedOption(e){const t=this.selectOptionsContainer.querySelector(`li.${f}`);if(this.selectOptionsContainer.scrollHeight>this.selectOptionsContainer.clientHeight&&"transform"===e.propertyName){if(!t)return;let e=t.getBoundingClientRect().top-this.selectOptionsContainer.getBoundingClientRect().top;e-=this.selectOptionsContainer.clientHeight/2,this.selectOptionsContainer.scrollTop=e}}_closeSelect(){this.selectOptionsContainer.style.transform="scale(0)",this.selectOptionsContainer.style.opacity=0,setTimeout(()=>{this.selectOptionsContainer.style.display="none",this.selectOptionsContainer.classList.remove(u)},o),this.input.parentNode.classList.remove(_),this.selectLabel.classList.remove(S),this.selectLabel.classList.add(O),this.isSelectOpen=!1}_removeElements(){this.wrapper.parentNode.removeChild(this.wrapper)}_removeEventHandlers(){this.input.removeEventListener("focus",this._handleSelectFocus),this.input.removeEventListener("blur",this._handleSelectBlur),this.input.removeEventListener("keyup",this._handleInputChange)}destroy(){this._removeEventHandlers(),this._removeElements(),this.el.style.display="inline-block"}}},function(e,t,s){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.BlipSelect=void 0;var i=s(4);Object.defineProperty(t,"BlipSelect",{enumerable:!0,get:function(){return i.BlipSelect}}),s(1)},function(e,t,s){e.exports=s(5)}])});

package.json

 {
   "name": "blip-toolkit",
   "description": "'BLiP's Toolkit'",
-  "version": "1.4.5",
+  "version": "1.5.0",
   "license": "MIT",
@@ -6,0 +6,0 @@ "main": "dist/blip-toolkit.js",

No alert changes

Improved metrics

Total package byte prevSize

74636

increased by0.64%

No dependency changes