blip-toolkit - npm Package Compare versions

Comparing version 1.6.3 to 1.7.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 n(i){if(t[i])return t[i].exports;var s=t[i]={i:i,l:!1,exports:{}};return e[i].call(s.exports,s,s.exports,n),s.l=!0,s.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:i})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=6)}([,function(e,t,n){},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.EventEmitter=function(e){return{$event:e}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i,s;t.strToEl=(i=document.createElement("div"),function(e){var t,n=e.trim();for(i.innerHTML=n,t=i.children[0];i.firstChild;)i.removeChild(i.firstChild);return t}),t.guid=(s=function(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)},function(){return s()+s()+"-"+s()+"-"+s()+"-"+s()+"-"+s()+s()+s()})},function(e,t,n){"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 n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},s=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),o=n(3),l=n(2);t.BlipSelect=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.$state={isSelectOpen:!1,noResultsFound:!1,disabled:!1,label:"",placeholder:"",mode:"select",noResultsText:"No results found",beforeOpenSelect:function(){},afterOpenSelect:function(){},beforeCloseSelect:function(){},afterCloseSelect:function(){},onFocus:function(){},onBlur:function(){},onInputChange:function(e){e.$event},onSelectOption:function(e){e.$event},customSearch:void 0},this.wrapper="",this.elementLabel="",this.selectOptions=[],this.searchResults=[],this.selectOptionsContainer="",this.selectOptionsContainerOpenPosition="",this.selectLabel="",this._handleSelectFocus="",this._handleSelectBlur="",this._handleOptionClick="",this.parentNode="",this.configOptions=i({},this.$state,n),this.el=t,this._setup(),this._setupEventHandlers()}return s(e,[{key:"_setup",value:function(){var e=this;if(this.el instanceof Element==!1)throw new Error("Invalid dom element");var t=this.el.querySelectorAll("option");if(0===t.length)throw new Error("Element has no options");switch(this.parentNode=this.el.parentNode,this.customSelectId="blip-select__options-"+(0,o.guid)(),this.configOptions.mode){case"select":this.wrapper=(0,o.strToEl)('\n          <div tabindex="0" class="bp-input-wrapper blip-select bp-input--with-bullet">\n            <label class="bp-label bp-c-rooftop">'+this.configOptions.label+'</label>\n            <input placeholder="'+this.configOptions.placeholder+'" class="blip-select__input bp-c-cloud" data-target="'+this.customSelectId+'" readonly>\n            <ul class="blip-select__options" id="'+this.customSelectId+'"></ul>\n          </div>\n        ');break;case"autocomplete":this.wrapper=(0,o.strToEl)('\n          <div tabindex="0" class="bp-input-wrapper blip-select">\n            <label class="bp-label bp-c-rooftop">'+this.configOptions.label+'</label>\n            <input placeholder="'+this.configOptions.placeholder+'" class="blip-select__input bp-c-cloud" data-target="'+this.customSelectId+'">\n            <ul class="blip-select__options" 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"),Array.prototype.forEach.call(t,function(t){e.selectOptions=e.selectOptions.concat({value:t.value,label:t.label,element:t})}),this._arrayToDomOptions(this.selectOptions),this.input=this.wrapper.querySelector('input[data-target="'+this.customSelectId+'"]'),this.el.style.display="none",this.isDisabled=this.el.disabled}},{key:"_arrayToDomOptions",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[{value:"",label:""}];this.selectOptionsContainer.innerHTML="",t.forEach(function(t){var n=t.value,i=t.label;e.selectOptionsContainer.appendChild((0,o.strToEl)('\n          <li tabindex="0" class="blip-select__option" data-value="'+n+'">'+i+"</li>\n        "))}),this._setupOptionsEventHandlers()}},{key:"_setupOptionsEventHandlers",value:function(){var e=this;Array.prototype.forEach.call(this.selectOptionsContainer.querySelectorAll("li"),function(t){return t.addEventListener("click",e._onOptionClick.bind(e))})}},{key:"_setupEventHandlers",value:function(){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)}},{key:"_onInputChange",value:function(e){if("function"!=typeof this.configOptions.onInputChange)throw new Error('Callback "onInputChange" is not a function');var t=this.input.value,n=this.configOptions.customSearch?this.configOptions.customSearch.call(this,(0,l.EventEmitter)({query:t,items:this.selectOptions})):this.selectOptions.filter(function(e){e.value;return e.label.toLowerCase().includes(t.toLowerCase())});this.configOptions.onInputChange((0,l.EventEmitter)({value:t,event:e})),n.length>0?(this.noResultsFound=!1,this._arrayToDomOptions(n)):this.noResultsFound=!0}},{key:"_setInputValue",value:function(e){var t=e.value,n=e.label;if(this.input.value=n||t,"function"!=typeof this.configOptions.onSelectOption)throw new Error('Callback "onSelectOption" is not a function');this.configOptions.onSelectOption.call(this,(0,l.EventEmitter)({value:t,label:n}))}},{key:"clearInput",value:function(){this._setInputValue({value:"",label:""})}},{key:"setValue",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{value:"",label:""},t=e.value;e.label;if(t){var n=this.selectOptions.find(function(e){return e.value===t});n?(n.element.classList.add("blip-select__option--selected"),this._setInputValue({value:n.value,label:n.label})):this._setInputValue({value:t})}}},{key:"getValue",value:function(){var e=this;if(!this.input.value)return{value:void 0,label:void 0};var t=this.selectOptions.find(function(t){return t.label===e.input.value});return t?{value:t.value,label:t.label}:{value:this.input.value,label:this.input.value}}},{key:"_onOptionClick",value:function(e){this.isSelectOpen&&(this._setInputValue(this.selectOptions.find(function(t){return t.value===e.target.getAttribute("data-value")})),this._resetSelectedOptions(),e.target.classList.add("blip-select__option--selected"),this._closeSelect())}},{key:"_resetSelectedOptions",value:function(){Array.prototype.forEach.call(this.selectOptionsContainer.querySelectorAll("li"),function(e){return e.classList.contains("blip-select__option--selected")?e.classList.remove("blip-select__option--selected"):""})}},{key:"_onSelectFocus",value:function(){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');if("function"!=typeof this.configOptions.onFocus)throw Error('Callback "onFocus" is not a function');this.configOptions.onFocus(),this.configOptions.beforeOpenSelect(),this._openSelect(),this.configOptions.afterOpenSelect()}}},{key:"_onSelectBlur",value:function(e){var t=this;if(!e.relatedTarget||!e.relatedTarget.classList.contains("blip-select__option")){if("function"!=typeof this.configOptions.onBlur)throw Error('Callback "onBlur" is not a function');this.configOptions.onBlur(),setTimeout(function(){t._closeSelect()},100)}}},{key:"_openSelect",value:function(){var e=this;this.selectOptionsContainer.style.display="block",setTimeout(function(){var t=e.selectOptionsContainer.offsetHeight,n=e.wrapper.getBoundingClientRect().top,i=window.innerHeight-n;i<t&&n>t&&n>i?(e.selectOptionsContainer.classList.add("blip-select__options--open-top"),e.selectOptionsContainerOpenPosition="top"):e.selectOptionsContainerOpenPosition="bottom",e.selectOptionsContainer.style.transform="scale(1)",e.selectOptionsContainer.style.opacity=1}),this.input.parentNode.classList.add("bp-input-wrapper--focus"),this.selectLabel.classList.remove("bp-c-rooftop"),this.selectLabel.classList.add("bp-c-blip-light"),this.isSelectOpen=!0}},{key:"_centerSelectedOption",value:function(e){var t=this.selectOptionsContainer.querySelector("li.blip-select__option--selected");if(this.selectOptionsContainer.scrollHeight>this.selectOptionsContainer.clientHeight&&"transform"===e.propertyName){if(!t)return;var n=t.getBoundingClientRect().top-this.selectOptionsContainer.getBoundingClientRect().top;n-=this.selectOptionsContainer.clientHeight/2,this.selectOptionsContainer.scrollTop=n}}},{key:"_closeSelect",value:function(){var e=this;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(),this.selectOptionsContainer.style.transform="scale(0)",this.selectOptionsContainer.style.opacity=0,setTimeout(function(){e.selectOptionsContainer.style.display="none",e.selectOptionsContainer.classList.remove("blip-select__options--open-top")},300),this.input.parentNode.classList.remove("bp-input-wrapper--focus"),this.selectLabel.classList.remove("bp-c-blip-light"),this.selectLabel.classList.add("bp-c-rooftop"),this.isSelectOpen=!1,this.configOptions.afterCloseSelect()}},{key:"_removeElements",value:function(){this.wrapper.parentNode.removeChild(this.wrapper)}},{key:"_removeEventHandlers",value:function(){this.input.removeEventListener("focus",this._handleSelectFocus),this.input.removeEventListener("blur",this._handleSelectBlur),this.input.removeEventListener("keyup",this._handleInputChange)}},{key:"destroy",value:function(){this._removeEventHandlers(),this._removeElements(),this.el.style.display="inline-block"}},{key:"isSelectOpen",get:function(){return this.$state.isSelectOpen},set:function(e){this.$state.isSelectOpen=e}},{key:"noResultsFound",get:function(){return this.$state.noResultsFound},set:function(e){switch(this.$state.noResultsFound=e,e){case!0:this.selectOptionsContainer.innerHTML='<li style="cursor: default" class="blip-select__option">'+this.configOptions.noResultsText+"</li>"}}},{key:"isDisabled",get:function(){return this.$state.disabled},set:function(e){switch(this.$state.disabled=e,this.input.disabled=e,e){case!0:this.wrapper.classList.add("bp-input-wrapper--disabled");break;case!1:this.wrapper.classList.remove("bp-input-wrapper--disabled")}}}]),e}()},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.BlipSelect=void 0;var i=n(4);Object.defineProperty(t,"BlipSelect",{enumerable:!0,get:function(){return i.BlipSelect}}),n(1)},function(e,t,n){e.exports=n(5)}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.BLiPToolkit=e():t.BLiPToolkit=e()}(window,function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:i})},n.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=10)}([function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.EventEmitter=function(t){return{$event:t}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i,o;e.strToEl=(i=document.createElement("div"),function(t){var e,n=t.trim();for(i.innerHTML=n,e=i.children[0];i.firstChild;)i.removeChild(i.firstChild);return e}),e.guid=(o=function(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)},function(){return o()+o()+"-"+o()+"-"+o()+"-"+o()+"-"+o()+o()+o()}),e.last=function(t){return t[t.length-1]},e.insertAfter=function(t,e){e.parentNode.insertBefore(t,e.nextSibling)}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.BlipTag=e.blipTagSelectColorClass=void 0;var i=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},o=function(){function t(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)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),s=n(1),l=n(0);var a="blip-tag",r=e.blipTagSelectColorClass="blip-tag-select-color";e.BlipTag=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$state={label:"",background:"",color:"#fff",id:a+"-"+(0,s.guid)(),classes:"",canChangeBackground:!1,onRemove:function(){},onSelectColor:function(){}},this.tagContainer="",this.tagOptions=i({},this.$state,e),this._setup()}return o(t,[{key:"getValue",value:function(){return this.tagOptions.label}},{key:"_setup",value:function(){if(!this.tagOptions.label||""===this.tagOptions.label)throw Error("Tag must have a label");if(this.tagContainer=this.renderTemplate({label:this.tagOptions.label,background:this.tagOptions.background,color:this.tagOptions.color,id:this.tagOptions.id}),this.tagOptions.canChangeBackground){var t=(0,s.strToEl)('\n        <ul class="'+r+'" tabindex="0">\n          <li class="blip-tag-color-option" data-color="#0CC7CB"></li>\n          <li class="blip-tag-color-option" data-color="#FF4A1E"></li>\n          <li class="blip-tag-color-option" data-color="#FF6F1E"></li>\n          <li class="blip-tag-color-option" data-color="#FF961E"></li>\n          <li class="blip-tag-color-option" data-color="#1EDEFF"></li>\n          <li class="blip-tag-color-option" data-color="#1EA1FF"></li>\n          <li class="blip-tag-color-option" data-color="#61D36F"></li>\n          <li class="blip-tag-color-option" data-color="#37C5AB"></li>\n          <li class="blip-tag-color-option" data-color="#7762E3"></li>\n          <li class="blip-tag-color-option" data-color="#EA4D9C"></li>\n          <li class="blip-tag-color-option" data-color="#FC91AE"></li>\n          <li class="blip-tag-color-option" data-color="#FF1E90"></li>\n        </ul>\n      ');this.tagContainer.appendChild(t)}this._setupEventHandlers()}},{key:"_setupEventHandlers",value:function(){var t=this;this._handleRemoveTag=this._removeTag.bind(this),this._handleTagKeydown=this._onTagKeydown.bind(this),this.tagContainer.querySelector(".blip-tag__remove").addEventListener("click",this._handleRemoveTag),this.tagElement.addEventListener("keydown",this._handleTagKeydown),this.tagOptions.canChangeBackground&&Array.prototype.forEach.call(this.tagContainer.querySelectorAll(".blip-tag-color-option"),function(e){var n=e.getAttribute("data-color");e.style.background=n,e.addEventListener("click",t._selectColor.bind(t,n))})}},{key:"renderTemplate",value:function(t){var e=t.label,n=t.id,i=t.background,o=t.color;return(0,s.strToEl)('\n      <div class="blip-tag-container '+this.tagOptions.classes+'" id="'+n+'">\n        <div tabindex="0" class="'+a+'" style="background: '+i+"; color: "+o+'">\n          <span class="blip-tag__label">'+e+'</span>\n          <button class="blip-tag__remove" style="color: '+o+'">x</button>\n        </div>\n      </div>\n    ')}},{key:"_selectColor",value:function(t){this.tagBackground=t,this.tagOptions.onSelectColor.call(this,(0,l.EventEmitter)({color:t})),this.hideColorOptions()}},{key:"hideColorOptions",value:function(){var t=this.tagContainer.querySelector("."+r);t.style.transform="scale(0)",t.style.opacity=0,setTimeout(function(){t.style.display="none"},300)}},{key:"_removeTag",value:function(t){this.tagOptions.onRemove.call(this,(0,l.EventEmitter)({tag:{element:this.tagContainer,id:this.tagOptions.id,label:this.tagOptions.label},backspace:t})),this.tagContainer.parentNode.removeChild(this.tagContainer),this.tagContainer=void 0}},{key:"_onTagKeydown",value:function(t){switch(t.keyCode){case 8:this._removeTag(!0)}}},{key:"canChangeBackground",get:function(){return this.tagOptions.canChangeBackground}},{key:"label",get:function(){return this.tagOptions.label}},{key:"element",get:function(){return this.tagContainer}},{key:"tagElement",get:function(){return this.tagContainer.querySelector("."+a)}},{key:"tagBackground",set:function(t){this.tagContainer.querySelector("."+a).style.background=t}}]),t}()},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.BlipSelectBase=void 0;var i=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},o=function(){function t(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)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),s=n(1),l=n(0);e.BlipSelectBase=function(){function t(e,n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$state={isSelectOpen:!1,noResultsFound:!1,disabled:!1,label:"",placeholder:"",mode:"select",noResultsText:"No results found",beforeOpenSelect:function(){},afterOpenSelect:function(){},beforeCloseSelect:function(){},afterCloseSelect:function(){},onInputChange:function(t){t.$event},onSelectOption:function(t){t.$event},onFocus:function(){},onBlur:function(){},customSearch:void 0},this.wrapper="",this.elementLabel="",this.selectOptions=[],this.searchResults=[],this.selectOptionsContainer="",this.selectOptionsContainerOpenPosition="",this.selectLabel="",this._handleSelectFocus="",this._handleSelectBlur="",this._handleOptionClick="",this.parentNode="",this.configOptions=i({},this.$state,n),this.el=e,this._setup(),this._setupEventHandlers()}return o(t,[{key:"_setup",value:function(){var t=this;if(this.el instanceof Element==!1)throw new Error("Invalid dom element");var e=this.el.querySelectorAll("option");if(0===e.length&&!this.configOptions.canAddOption)throw new Error("Element has no options");switch(this.parentNode=this.el.parentNode,this.customSelectId="blip-select__options-"+(0,s.guid)(),this.configOptions.mode){case"select":this.wrapper=(0,s.strToEl)('\n          <div class="bp-input-wrapper blip-select bp-input--with-bullet">\n            <label class="bp-label bp-c-rooftop">'+this.configOptions.label+'</label>\n            <input placeholder="'+this.configOptions.placeholder+'" class="blip-select__input bp-c-cloud" data-target="'+this.customSelectId+'" readonly>\n            <ul class="blip-select__options" id="'+this.customSelectId+'"></ul>\n          </div>\n        ');break;case"autocomplete":this.wrapper=(0,s.strToEl)('\n          <div class="bp-input-wrapper blip-select">\n            <label class="bp-label bp-c-rooftop">'+this.configOptions.label+'</label>\n            <input placeholder="'+this.configOptions.placeholder+'" class="blip-select__input bp-c-cloud" data-target="'+this.customSelectId+'">\n            <ul class="blip-select__options" 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"),Array.prototype.forEach.call(e,function(e){t.selectOptions=t.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}},{key:"_arrayToDomOptions",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[{value:"",label:""}];this.selectOptionsContainer.innerHTML="",e.forEach(function(e){var n=e.value,i=e.label;t.selectOptionsContainer.appendChild((0,s.strToEl)('\n          <li tabindex="0" class="blip-select__option" data-value="'+n+'">'+i+"</li>\n        "))}),this._setupOptionsEventHandlers()}},{key:"_setupOptionsEventHandlers",value:function(){var t=this;Array.prototype.forEach.call(this.selectOptionsContainer.querySelectorAll("li[data-value]"),function(e){e.addEventListener("click",t._onOptionClick.bind(t)),e.addEventListener("keydown",function(e){switch(e.keyCode){case 13:t._onOptionClick(e)}})}),this._attachOptionsKeyboardListeners()}},{key:"_setupEventHandlers",value:function(){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),this._attachKeyboardListeners()}},{key:"_attachKeyboardListeners",value:function(){this._attachInputKeyboardListener(),this._attachOptionsKeyboardListeners()}},{key:"_attachOptionsKeyboardListeners",value:function(){var t=this,e=this.selectOptionsContainer.querySelectorAll(".blip-select__option");Array.prototype.forEach.call(e,function(e){e.addEventListener("keydown",function(n){switch(n.keyCode){case 40:e.nextSibling&&e.nextSibling.focus();break;case 38:e.previousSibling?e.previousSibling.focus():t.input.focus()}})})}},{key:"_attachInputKeyboardListener",value:function(){var t=this;this.input.addEventListener("keydown",function(e){switch(e.keyCode){case 40:if(document.activeElement===t.input){var n=t.selectOptionsContainer.firstChild;n&&n.focus()}}})}},{key:"_onInputChange",value:function(t){if("function"!=typeof this.configOptions.onInputChange)throw new Error('Callback "onInputChange" is not a function');var e=this.input.value,n=this.configOptions.customSearch?this.configOptions.customSearch.call(this,(0,l.EventEmitter)({query:e,items:this.selectOptions})):this.selectOptions.filter(function(t){t.value;return t.label.toLowerCase().includes(e.toLowerCase())});this.configOptions.onInputChange((0,l.EventEmitter)({value:e,event:t})),this.noResultsFound=n.length<0,this._arrayToDomOptions(n)}},{key:"_setInputValue",value:function(t){var e=t.value,n=t.label;if(this.input.value=n||e,"function"!=typeof this.configOptions.onSelectOption)throw new Error('Callback "onSelectOption" is not a function');(e||n)&&this.configOptions.onSelectOption.call(this,(0,l.EventEmitter)({value:e,label:n}))}},{key:"clearInput",value:function(){this._setInputValue({value:"",label:""})}},{key:"setValue",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{value:"",label:""},e=t.value;t.label;if(e){var n=this.selectOptions.find(function(t){return t.value===e});n?(n.element.classList.add("blip-select__option--selected"),this._setInputValue({value:n.value,label:n.label})):this._setInputValue({value:e})}}},{key:"getValue",value:function(){var t=this;if(!this.input.value)return{value:void 0,label:void 0};var e=this.selectOptions.find(function(e){return e.label===t.input.value});return e?{value:e.value,label:e.label}:{value:this.input.value,label:this.input.value}}},{key:"_onOptionClick",value:function(t){this.isSelectOpen&&(this._setInputValue(this.selectOptions.find(function(e){return e.value===t.target.getAttribute("data-value")})),this._resetSelectedOptions(),t.target.classList.add("blip-select__option--selected"),this._closeSelect())}},{key:"_resetSelectedOptions",value:function(){Array.prototype.forEach.call(this.selectOptionsContainer.querySelectorAll("li"),function(t){return t.classList.contains("blip-select__option--selected")?t.classList.remove("blip-select__option--selected"):""})}},{key:"_onSelectFocus",value:function(){if(!(this.isDisabled||""===this.input.value&&this.configOptions.canAddOption&&0===this.selectOptions.length)){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.configOptions.onFocus(),this._openSelect(),this.configOptions.afterOpenSelect()}}},{key:"_isPartOfComponent",value:function(t){if(t.relatedTarget){var e=t.relatedTarget.classList;if(e.contains("blip-select__option")||e.contains("blip-select"))return!0}return!1}},{key:"_onSelectBlur",value:function(t){var e=this;this._isPartOfComponent(t)||(this.configOptions.onBlur(t),setTimeout(function(){e._closeSelect()},100))}},{key:"_openSelect",value:function(){var t=this;this.selectOptionsContainer.style.display="block",setTimeout(function(){var e=t.selectOptionsContainer.offsetHeight,n=t.wrapper.getBoundingClientRect().top,i=window.innerHeight-n;i<e&&n>e||n>i?(t.selectOptionsContainer.classList.add("blip-select__options--open-top"),t.selectOptionsContainerOpenPosition="top"):t.selectOptionsContainerOpenPosition="bottom",t.selectOptionsContainer.style.transform="scale(1)",t.selectOptionsContainer.style.opacity=1}),this.input.parentNode.classList.add("bp-input-wrapper--focus"),this.selectLabel.classList.remove("bp-c-rooftop"),this.selectLabel.classList.add("bp-c-blip-light"),this.isSelectOpen=!0}},{key:"_centerSelectedOption",value:function(t){var e=this.selectOptionsContainer.querySelector("li.blip-select__option--selected");if(this.selectOptionsContainer.scrollHeight>this.selectOptionsContainer.clientHeight&&"transform"===t.propertyName){if(!e)return;var n=e.getBoundingClientRect().top-this.selectOptionsContainer.getBoundingClientRect().top;n-=this.selectOptionsContainer.clientHeight/2,this.selectOptionsContainer.scrollTop=n}}},{key:"_closeSelect",value:function(){var t=this;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(),this.selectOptionsContainer.style.transform="scale(0)",this.selectOptionsContainer.style.opacity=0,setTimeout(function(){t.selectOptionsContainer.style.display="none",t.selectOptionsContainer.classList.remove("blip-select__options--open-top")},300),this.input.parentNode.classList.remove("bp-input-wrapper--focus"),this.selectLabel.classList.remove("bp-c-blip-light"),this.selectLabel.classList.add("bp-c-rooftop"),this.isSelectOpen=!1,this.configOptions.afterCloseSelect()}},{key:"_removeElements",value:function(){this.wrapper.parentNode.removeChild(this.wrapper)}},{key:"_removeEventHandlers",value:function(){this.input.removeEventListener("focus",this._handleSelectFocus),this.input.removeEventListener("blur",this._handleSelectBlur),this.input.removeEventListener("keyup",this._handleInputChange)}},{key:"destroy",value:function(){this._removeEventHandlers(),this._removeElements(),this.el.style.display="inline-block"}},{key:"isSelectOpen",get:function(){return this.$state.isSelectOpen},set:function(t){this.$state.isSelectOpen=t}},{key:"noResultsFound",get:function(){return this.$state.noResultsFound},set:function(t){switch(this.$state.noResultsFound=t,t){case!0:this.configOptions.canAddOption||(this.selectOptionsContainer.innerHTML='<li style="cursor: default" class="blip-select__option">'+this.configOptions.noResultsText+"</li>")}}},{key:"isDisabled",get:function(){return this.$state.disabled},set:function(t){switch(this.$state.disabled=t,this.input.disabled=t,t){case!0:this.wrapper.classList.add("bp-input-wrapper--disabled");break;case!1:this.wrapper.classList.remove("bp-input-wrapper--disabled")}}}]),t}()},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.BlipSelect=void 0;var i=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},o=n(8),s=n(3);e.BlipSelect=function t(e,n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t);var l=i({mode:"select"},n);return"autocomplete"===l.mode&&l.canAddOption?new o.BlipSelectAdd(e,l):new s.BlipSelectBase(e,l)}},,function(t,e,n){},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.BlipTags=void 0;var i=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},o=function(){function t(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)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),s=n(2),l=n(4),a=n(0),r=n(1);var c="blip-select";e.BlipTags=function(){function t(e,n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$state={addTagText:"Add tag",onTagAdded:function(){},onTagRemoved:function(){}},this.element=e,this.selectElement="",this.tags=[],this.blipSelectId=c+"-"+(0,r.guid)(),this.inputBuffer="",this.tagsOptions=i({},this.$state,n),this._setup()}return o(t,[{key:"_setup",value:function(){this.tagsContainer=(0,r.strToEl)('\n      <div class="blip-tags">\n        <select id="'+this.blipSelectId+'"></select>\n      </div>\n    '),this.selectElement=this.tagsContainer.querySelector("#"+this.blipSelectId),this._handleAddNewOption=this._onAddNewOption.bind(this),this._handleInputChange=this._onInputChange.bind(this),this._handleSelectOption=this._onSelectOption.bind(this),this._handleBlipSelectBlur=this._onSelectBlur.bind(this),this.blipSelectInstance=new l.BlipSelect(this.selectElement,{mode:"autocomplete",canAddOption:{text:this.tagsOptions.addTagText},onAddNewOption:this._handleAddNewOption,onSelectOption:this._handleSelectOption,onInputChange:this._handleInputChange,onBlur:this._handleBlipSelectBlur}),this.element.appendChild(this.tagsContainer)}},{key:"_onSelectBlur",value:function(t){t.relatedTarget&&t.relatedTarget.classList.contains(s.blipTagSelectColorClass)||this._hideLastTagOptions()}},{key:"_onSelectOption",value:function(t){this.blipSelectInstance.clearInput(),this._onAddNewOption(t)}},{key:"_onAddNewOption",value:function(t){var e=t.$event.label;this._addTag(e)}},{key:"_onInputChange",value:function(t){var e=t.$event,n=e.event,i=e.value,o=this.inputBuffer;switch(this.inputBuffer=i,n.keyCode){case 8:""===o&&this.tags.length>0&&(0,r.last)(this.tags).tagElement.focus()}}},{key:"_hideLastTagOptions",value:function(){this.tags.length>0&&this.lastTag.canChangeBackground&&this.lastTag.hideColorOptions()}},{key:"_addTag",value:function(t){var e=new s.BlipTag({label:t,canChangeBackground:!0,onRemove:this._removeTag.bind(this),classes:"blip-tag--on-list"});if(this._hideLastTagOptions(),0===this.tags.length)this.tagsContainer.prepend(e.element);else{var n=(0,r.last)(this.tags).element;(0,r.insertAfter)(e.element,n)}return this.tags=this.tags.concat(e),this.blipSelectInstance.input.focus(),this.tagsOptions.onTagAdded.call(this,(0,a.EventEmitter)({tag:e})),e}},{key:"_removeTag",value:function(t){var e=t.$event,n=e.tag,i=e.backspace;this.tags=this.tags.filter(function(t){return t.tagOptions.id!==n.id}),this.tagsOptions.onTagRemoved.call(this,(0,a.EventEmitter)({tag:n})),i&&this.tags.length>0?(0,r.last)(this.tags).tagElement.focus():this.blipSelectInstance.input.focus()}},{key:"lastTag",get:function(){return(0,r.last)(this.tags)}}]),t}()},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.BlipSelectAdd=void 0;var i=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},o=function(){function t(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)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),s=n(1),l=n(3),a=n(0);e.BlipSelectAdd=function(t){function e(t,n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);var o=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t,n));return o.$state={onAddNewOption:function(t){t.$event},canAddOption:!1},o.configAddOptions=i({},o.$state,n,o.configOptions),o._setupAdd(),o}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,l.BlipSelectBase),o(e,[{key:"_setupAdd",value:function(){var t=this;this._handleAddInputChange=this._onAddInputChange.bind(this),this.input.addEventListener("keyup",this._handleAddInputChange),this.input.addEventListener("keydown",function(e){switch(e.keyCode){case 13:t._canAddOption()&&t.addNewOption(t._currentOptionState())}})}},{key:"_renderOptionButton",value:function(t){return(0,s.strToEl)('\n      <div tabindex="0" class="blip-select__option blip-select__add-option">\n        <small>'+this.configOptions.canAddOption.text+'</small>\n        <div class="blip-new-option-text">'+t+"</div>\n      </div>\n      ")}},{key:"addNewOption",value:function(t){var e=t.label,n=t.value,i=t.element;if("function"!=typeof this.configAddOptions.onAddNewOption)throw Error('Callback "onAddNewOption" is not a function');if(""!==e.trim()){var o={label:e,value:n,element:i};this.selectOptions=this.selectOptions.concat(o),this.clearInput(),this._arrayToDomOptions(this.selectOptions),this.configAddOptions.onAddNewOption.call(this,(0,a.EventEmitter)(o)),this._closeSelect()}}},{key:"_valueMatchesAnyOption",value:function(t){return this.selectOptions.filter(function(e){return e.label===t}).length>0}},{key:"_canAddOption",value:function(){return this.configAddOptions.canAddOption&&this.input&&this.input.value&&""!==this.input.value.trim()&&!this._valueMatchesAnyOption(this.input.value)}},{key:"_currentOptionState",value:function(){var t=this.input.value;return{label:t,value:t,element:(0,s.strToEl)('<li tabindex="0" class="blip-select__option" data-value="'+t+'">'+t+"</li>")}}},{key:"_onAddInputChange",value:function(){var t=this;if(""===this.input.value||this.isSelectOpen||this._openSelect(),""===this.input.value&&this._closeSelect(),this._canAddOption()){var e=this._renderOptionButton(this.input.value);this.selectOptionsContainer.appendChild(e);var n=this._currentOptionState();e.addEventListener("click",this.addNewOption.bind(this,n)),e.addEventListener("keydown",function(i){switch(i.keyCode){case 13:t.addNewOption(n);break;case 38:e.previousSibling&&e.previousSibling.focus()}})}}}]),e}()},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.BlipTag=e.BlipTags=e.BlipSelect=void 0;var i=n(4);Object.defineProperty(e,"BlipSelect",{enumerable:!0,get:function(){return i.BlipSelect}});var o=n(7);Object.defineProperty(e,"BlipTags",{enumerable:!0,get:function(){return o.BlipTags}});var s=n(2);Object.defineProperty(e,"BlipTag",{enumerable:!0,get:function(){return s.BlipTag}}),n(6)},function(t,e,n){t.exports=n(9)}])});

package.json

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

README.md

@@ -18,2 +18,6 @@ # BLiP Toolkit
 
+## Want to contribute?
+
+Follow contributing guidelines as [described here](CONTRIBUTING.md)
+
 **A Documentação**
@@ -20,0 +24,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

82724

increased by20.21%

Lines of code

204

increased by1.49%

Number of lines in readme file

49

increased by8.89%

No dependency changes