blip-toolkit - npm Package Compare versions

Comparing version 1.10.5 to 1.10.6

dist/blip-toolkit.js

@@ -1,1 +0,1 @@
-!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.BlipSelectBase=e.blipSelectOptionClass=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),a=n(0);var l=e.blipSelectOptionClass="blip-select__option";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.configOptions.isDisabled}},{key:"_arrayToDomOptions",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[{value:"",label:"",id:""}];this.selectOptionsContainer.innerHTML="",e.forEach(function(e){var n=e.value,i=e.label,o=e.id;t.selectOptionsContainer.appendChild((0,s.strToEl)('\n          <li tabindex="0" class="'+l+'" id="'+o+'" data-label="'+i+'" 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("."+l);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:"_getSearchResults",value:function(t){return this.configOptions.customSearch?this.configOptions.customSearch.call(this,(0,a.EventEmitter)({query:t,items:this.selectOptions})):this.selectOptions.filter(function(e){e.value;return e.label.toLowerCase().includes(t.toLowerCase())})}},{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._getSearchResults(e);this.configOptions.onInputChange((0,a.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,a.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,n=t.label;if(e){var i=this.selectOptions.find(function(t){return t.value===e});i?(i.element.classList.add("blip-select__option--selected"),this._setInputValue({value:i.value,label:i.label})):this._setInputValue({value:e,label:n});var o=new CustomEvent("keyup",{detail:{shouldOpenSelect:!1}});this.input.dispatchEvent(o)}}},{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){if(this.isSelectOpen){var e=t.target,n={label:e.getAttribute("data-label"),value:e.getAttribute("data-value")};this._setInputValue(n),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(l)||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="'+l+'">'+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.BlipTag=e.blipTagCompactClass=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),a=n(0);var l="blip-tag",r=e.blipTagSelectColorClass="blip-tag-select-color",c=e.blipTagCompactClass="blip-tag--compact";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:"#2cc3d5",color:"#fff",id:l+"-"+(0,s.guid)(),mode:"full",classes:"",tagClasses:"",canChangeBackground:!1,canRemoveTag:!0,onRemove:void 0,toggleCollapse:!1,onTagClick: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._handleTagClick=this._onTagClick.bind(this);var e=this.tagContainer.querySelector(".blip-tag__remove");e&&e.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))}),this.tagElement.addEventListener("click",this._handleTagClick)}},{key:"renderTemplate",value:function(t){var e,n=this,i=t.label,o=t.id,a=t.background,r=t.color;return(0,s.strToEl)('\n      <div class="blip-tag-container '+this.tagOptions.classes+'" id="'+o+'">\n        <div tabindex="0" class="'+(e=l+" "+n.tagOptions.tagClasses,"compact"===n.tagOptions.mode&&(e+=" "+c),(n.tagOptions.canRemoveTag||n.tagOptions.onRemove)&&(e+=" blip-tag--can-remove"),e)+'" style="background: '+a+"; color: "+r+'">\n          <span class="blip-tag__label">'+i+"</span>\n          "+(n.tagOptions.onRemove||n.tagOptions.canRemoveTag?'<button class="blip-tag__remove" style="color: '+r+'">x</button>':"")+"\n        </div>\n      </div>\n    ")}},{key:"_selectColor",value:function(t){this.tagBackground=t,this.tagOptions.onSelectColor.call(this,(0,a.EventEmitter)({color:t,tag:this})),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&&this.tagOptions.onRemove.call(this,(0,a.EventEmitter)({tag:{element:this.tagContainer,id:this.tagOptions.id,label:this.tagOptions.label},backspace:t})),this.tagOptions.canRemoveTag&&(this.tagContainer.parentNode.removeChild(this.tagContainer),this.tagContainer=void 0)}},{key:"_onTagKeydown",value:function(t){switch(t.keyCode){case 8:this._removeTag(!0)}}},{key:"_onTagClick",value:function(t){this.tagOptions.onTagClick.call(this,(0,a.EventEmitter)({tag:this})),this.tagOptions.toggleCollapse&&this.toggleCollapse()}},{key:"toggleCollapse",value:function(){this.tagElement.classList.contains(c)?this.tagElement.classList.remove(c):this.tagElement.classList.add(c)}},{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("."+l)}},{key:"tagBackground",get:function(){return this.tagOptions.background},set:function(t){this.tagOptions.background=t,this.tagContainer.querySelector("."+l).style.background=t}},{key:"id",get:function(){return this.tagOptions.id}}]),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(2);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 a=i({mode:"select"},n);return"autocomplete"===a.mode&&a.canAddOption?new o.BlipSelectAdd(e,a):new s.BlipSelectBase(e,a)}},,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(3),a=n(4),l=n(0),r=n(1),c=n(2);function u(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var p="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",mode:"full",canChangeBackground:!0,toggleTagsMode:!1,tags:[],onTagAdded:function(){},onTagRemoved:function(){},onSelectTagColor:function(){}},this.element=e,this.selectElement="",this.tags=[],this.blipSelectId=p+"-"+(0,r.guid)(),this.inputBuffer="",this.tagsOptions=i({},this.$state,n),this._setup()}return o(t,[{key:"_setup",value:function(){switch(this.tagsOptions.mode){case"full":this._setupFullMode();break;case"compact":this._setupCompactMode()}this.element.appendChild(this.tagsContainer),this.bindTagsIfExists()}},{key:"_setupFullMode",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._handleSanitizeNewOption=this._sanitizeNewOption.bind(this),this._handleCustomSearch=this._customOptionsSearch.bind(this),this.blipSelectInstance=new a.BlipSelect(this.selectElement,{mode:"autocomplete",canAddOption:{text:this.tagsOptions.addTagText},onAddNewOption:this._handleAddNewOption,onSelectOption:this._handleSelectOption,onInputChange:this._handleInputChange,onBlur:this._handleBlipSelectBlur,newOption:this._handleSanitizeNewOption,customSearch:this._handleCustomSearch}),this.tagsOptions.canChangeBackground&&(this.blipSelectInstance._arrayToDomOptions=this._overrideSelectDomOptions.bind(this.blipSelectInstance))}},{key:"_sanitizeNewOption",value:function(t){return{value:"#2cc3d5",label:t.$event.context.input.value}}},{key:"_customOptionsSearch",value:function(t){var e=t.$event.query;return this.tags.filter(function(t){return t.label.toLowerCase().includes(e.toLowerCase())}).map(function(t){return{label:t.label,value:t.tagBackground}})}},{key:"_setupCompactMode",value:function(){this.tagsContainer=(0,r.strToEl)('\n      <div class="blip-tags"></div>\n    ')}},{key:"bindTagsIfExists",value:function(){if(this.tagsOptions.tags.length>0)switch(this.tagsOptions.mode){case"full":this.bulkInsertTags(this.tagsOptions.tags);break;case"compact":this.bulkInsertCompactTags(this.tagsOptions.tags)}}},{key:"_onSelectBlur",value:function(t){t.relatedTarget&&t.relatedTarget.classList.contains(s.blipTagSelectColorClass)||this._hideLastTagOptions()}},{key:"_onSelectOption",value:function(t){var e=t.$event;this.blipSelectInstance.clearInput();var n=e.label,i=e.value,o=new s.BlipTag({label:n,background:i,canChangeBackground:!1});this.addTag(o)}},{key:"_onAddNewOption",value:function(t){var e=t.$event,n=e.label,i=e.id,o=new s.BlipTag({label:n,id:i,canChangeBackground:this.tagsOptions.canChangeBackground});this.addTag(o)}},{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:"insertTagIntoDom",value:function(t){if(0===this.tags.length)this.tagsContainer.prepend(t.element);else{var e=(0,r.last)(this.tags).element;(0,r.insertAfter)(t.element,e)}this.tags=this.tags.concat(t)}},{key:"bulkInsertCompactTags",value:function(t){var e=this;t.map(function(t){var n=t.label,i=t.background,o=new s.BlipTag({label:n,background:i,canChangeBackground:!1,canRemoveTag:!1,toggleCollapse:!1,onTagClick:e.onTagClick.bind(e),mode:"compact",classes:"blip-tag--on-list "});e.insertTagIntoDom(o)})}},{key:"bulkInsertTags",value:function(t){var e=this;t.map(function(t){var n,i=t.label,o=t.background,a=t.id,l=new s.BlipTag((u(n={label:i},o?"background":"",o),u(n,a?"id":"",a),u(n,"canChangeBackground",!1),u(n,"onRemove",e._removeTag.bind(e)),u(n,"onSelectColor",e._onSelectTagColor.bind(e)),u(n,"classes","blip-tag--on-list"),n));e.insertTagIntoDom(l),e.blipSelectInstance.addNewOption({label:l.label,value:l.tagOptions.background},!1)})}},{key:"addTag",value:function(t,e){var n=t.id,i=t.label,o=t.canChangeBackground,a=t.tagOptions.background,r=new s.BlipTag({id:n,label:i,canChangeBackground:o,background:a,onRemove:this._removeTag.bind(this),onSelectColor:this._onSelectTagColor.bind(this),classes:"blip-tag--on-list"});return this._hideLastTagOptions(),this.insertTagIntoDom(r),e&&this.blipSelectInstance.input.focus(),this.tagsOptions.onTagAdded.call(this,(0,l.EventEmitter)({tag:r})),r}},{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,l.EventEmitter)({tag:n})),i&&this.tags.length>0?(0,r.last)(this.tags).tagElement.focus():this.blipSelectInstance.input.focus()}},{key:"_onSelectTagColor",value:function(t){this.tagsOptions.onSelectTagColor.call(this,t)}},{key:"onTagClick",value:function(t){t.$event;this.tagsOptions.toggleTagsMode&&this.tags.forEach(function(t){return t.toggleCollapse()})}},{key:"_overrideSelectDomOptions",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[{value:"",label:"",id:""}];this.selectOptionsContainer.innerHTML="",e.forEach(function(e){var n=e.value,i=e.label,o=e.id;t.selectOptionsContainer.appendChild((0,r.strToEl)('\n          <li tabindex="0" class="'+c.blipSelectOptionClass+'" id="'+o+'" data-label="'+i+'" data-value="'+n+'">\n            <span class="blip-tag__label-option" style="background: '+n+'">'+i+"</span>\n          </li>\n        "))}),this._setupOptionsEventHandlers()}},{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),a=n(2),l=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,a.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(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];if("function"!=typeof this.configAddOptions.onAddNewOption)throw Error('Callback "onAddNewOption" is not a function');var n=i({},this._currentOptionState(),t,{id:"blip-select__option-"+(0,s.guid)()});""!==n.label.trim()&&(this.selectOptions=this.selectOptions.concat(n),this.clearInput(),this._arrayToDomOptions(this.selectOptions),e&&this.configAddOptions.onAddNewOption.call(this,(0,l.EventEmitter)(i({},n,{context:this}))),this._closeSelect())}},{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');this.configAddOptions.canAddOption&&this._removeAddOptionNode(),(e||n)&&this.configOptions.onSelectOption.call(this,(0,l.EventEmitter)({value:e,label:n}))}},{key:"_removeAddOptionNode",value:function(){var t=this.selectOptionsContainer.querySelector(".blip-select__add-option");t&&this.selectOptionsContainer.removeChild(t),this._arrayToDomOptions(this.selectOptions)}},{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(){if(this.configAddOptions.newOption)return this.configAddOptions.newOption.call(this,(0,l.EventEmitter)({context:this}));var t=this.input.value;return{value:t,label:t,element:(0,s.strToEl)('<li tabindex="0" class="blip-select__option" data-label="'+t+'" data-value="'+t+'">'+t+"</li>")}}},{key:"_onAddInputChange",value:function(t){var e=this;if(""===this.input.value||this.isSelectOpen||void 0!==t.detail.shouldOpenSelect||this._openSelect(),""===this.input.value&&this._closeSelect(),this._canAddOption()){var n=this._renderOptionButton(this.input.value);this.selectOptionsContainer.appendChild(n);var i=this._currentOptionState();n.addEventListener("click",this.addNewOption.bind(this,i)),n.addEventListener("keydown",function(t){switch(t.keyCode){case 13:e.addNewOption(i);break;case 38:n.previousSibling&&n.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(3);Object.defineProperty(e,"BlipTag",{enumerable:!0,get:function(){return s.BlipTag}}),n(6)},function(t,e,n){t.exports=n(9)}])});
+!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=11)}([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.BlipSelectBase=e.blipSelectOptionClass=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),a=n(0);var l=e.blipSelectOptionClass="blip-select__option";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.configOptions.isDisabled}},{key:"_arrayToDomOptions",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[{value:"",label:"",id:""}];this.selectOptionsContainer.innerHTML="",e.forEach(function(e){var n=e.value,i=e.label,o=e.id;t.selectOptionsContainer.appendChild((0,s.strToEl)('\n          <li tabindex="0" class="'+l+'" id="'+o+'" data-label="'+i+'" 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("."+l);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:"_getSearchResults",value:function(t){return this.configOptions.customSearch?this.configOptions.customSearch.call(this,(0,a.EventEmitter)({query:t,items:this.selectOptions})):this.selectOptions.filter(function(e){e.value;return e.label.toLowerCase().includes(t.toLowerCase())})}},{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._getSearchResults(e);this.configOptions.onInputChange((0,a.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,a.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,n=t.label;if(e){var i=this.selectOptions.find(function(t){return t.value===e});i?(i.element.classList.add("blip-select__option--selected"),this._setInputValue({value:i.value,label:i.label})):this._setInputValue({value:e,label:n});var o=new CustomEvent("keyup",{detail:{shouldOpenSelect:!1}});this.input.dispatchEvent(o)}}},{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){if(this.isSelectOpen){var e=t.currentTarget,n={label:e.getAttribute("data-label"),value:e.getAttribute("data-value")};this._setInputValue(n),this._resetSelectedOptions(),t.target.classList.add("blip-select__option--selected"),this._closeSelect()}t.stopPropagation()}},{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(l)||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="'+l+'">'+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.BlipTag=e.blipTagCompactClass=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),a=n(0);var l="blip-tag",r=e.blipTagSelectColorClass="blip-tag-select-color",c=e.blipTagCompactClass="blip-tag--compact";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:"#2cc3d5",color:"#fff",id:l+"-"+(0,s.guid)(),mode:"full",classes:"",tagClasses:"",canChangeBackground:!1,canRemoveTag:!0,onRemove:void 0,toggleCollapse:!1,onTagClick: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._handleTagClick=this._onTagClick.bind(this);var e=this.tagContainer.querySelector(".blip-tag__remove");e&&e.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))}),this.tagElement.addEventListener("click",this._handleTagClick)}},{key:"renderTemplate",value:function(t){var e,n=this,i=t.label,o=t.id,a=t.background,r=t.color;return(0,s.strToEl)('\n      <div class="blip-tag-container '+this.tagOptions.classes+'" id="'+o+'">\n        <div tabindex="0" class="'+(e=l+" "+n.tagOptions.tagClasses,"compact"===n.tagOptions.mode&&(e+=" "+c),(n.tagOptions.canRemoveTag||n.tagOptions.onRemove)&&(e+=" blip-tag--can-remove"),e)+'" style="background: '+a+"; color: "+r+'">\n          <span class="blip-tag__label">'+i+"</span>\n          "+(n.tagOptions.onRemove||n.tagOptions.canRemoveTag?'<button class="blip-tag__remove" style="color: '+r+'">x</button>':"")+"\n        </div>\n      </div>\n    ")}},{key:"_selectColor",value:function(t){this.tagBackground=t,this.tagOptions.onSelectColor.call(this,(0,a.EventEmitter)({color:t,tag:this})),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&&this.tagOptions.onRemove.call(this,(0,a.EventEmitter)({tag:{element:this.tagContainer,id:this.tagOptions.id,label:this.tagOptions.label},backspace:t})),this.tagOptions.canRemoveTag&&(this.tagContainer.parentNode.removeChild(this.tagContainer),this.tagContainer=void 0)}},{key:"_onTagKeydown",value:function(t){switch(t.keyCode){case 8:this._removeTag(!0)}}},{key:"_onTagClick",value:function(t){this.tagOptions.onTagClick.call(this,(0,a.EventEmitter)({tag:this})),this.tagOptions.toggleCollapse&&this.toggleCollapse()}},{key:"toggleCollapse",value:function(){this.tagElement.classList.contains(c)?this.tagElement.classList.remove(c):this.tagElement.classList.add(c)}},{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("."+l)}},{key:"tagBackground",get:function(){return this.tagOptions.background},set:function(t){this.tagOptions.background=t,this.tagContainer.querySelector("."+l).style.background=t}},{key:"id",get:function(){return this.tagOptions.id}}]),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(9),s=n(2);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 a=i({mode:"select"},n);return"autocomplete"===a.mode&&a.canAddOption?new o.BlipSelectAdd(e,a):new s.BlipSelectBase(e,a)}},,function(t,e,n){},function(t,e,n){"use strict";[Element.prototype,Document.prototype,DocumentFragment.prototype].forEach(function(t){t.hasOwnProperty("prepend")||Object.defineProperty(t,"prepend",{configurable:!0,enumerable:!0,writable:!0,value:function(){var t=Array.prototype.slice.call(arguments),e=document.createDocumentFragment();t.forEach(function(t){var n=t instanceof Node;e.appendChild(n?t:document.createTextNode(String(t)))}),this.insertBefore(e,this.firstChild)}})})},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(3),a=n(4),l=n(0),r=n(1),c=n(2);function u(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var p="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",mode:"full",canChangeBackground:!0,toggleTagsMode:!1,tags:[],onTagAdded:function(){},onTagRemoved:function(){},onSelectTagColor:function(){}},this.element=e,this.selectElement="",this.tags=[],this.blipSelectId=p+"-"+(0,r.guid)(),this.inputBuffer="",this.tagsOptions=i({},this.$state,n),this._setup()}return o(t,[{key:"_setup",value:function(){switch(this.tagsOptions.mode){case"full":this._setupFullMode();break;case"compact":this._setupCompactMode()}this.element.appendChild(this.tagsContainer),this.bindTagsIfExists()}},{key:"_setupFullMode",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._handleSanitizeNewOption=this._sanitizeNewOption.bind(this),this._handleCustomSearch=this._customOptionsSearch.bind(this),this.blipSelectInstance=new a.BlipSelect(this.selectElement,{mode:"autocomplete",canAddOption:{text:this.tagsOptions.addTagText},onAddNewOption:this._handleAddNewOption,onSelectOption:this._handleSelectOption,onInputChange:this._handleInputChange,onBlur:this._handleBlipSelectBlur,newOption:this._handleSanitizeNewOption,customSearch:this._handleCustomSearch}),this.tagsOptions.canChangeBackground&&(this.blipSelectInstance._arrayToDomOptions=this._overrideSelectDomOptions.bind(this.blipSelectInstance))}},{key:"_sanitizeNewOption",value:function(t){return{value:"#2cc3d5",label:t.$event.context.input.value}}},{key:"_customOptionsSearch",value:function(t){var e=t.$event.query;return this.tags.filter(function(t){return t.label.toLowerCase().includes(e.toLowerCase())}).map(function(t){return{label:t.label,value:t.tagBackground}})}},{key:"_setupCompactMode",value:function(){this.tagsContainer=(0,r.strToEl)('\n      <div class="blip-tags"></div>\n    ')}},{key:"bindTagsIfExists",value:function(){if(this.tagsOptions.tags.length>0)switch(this.tagsOptions.mode){case"full":this.bulkInsertTags(this.tagsOptions.tags);break;case"compact":this.bulkInsertCompactTags(this.tagsOptions.tags)}}},{key:"_onSelectBlur",value:function(t){t.relatedTarget&&t.relatedTarget.classList.contains(s.blipTagSelectColorClass)||this._hideLastTagOptions()}},{key:"_onSelectOption",value:function(t){var e=t.$event;this.blipSelectInstance.clearInput();var n=e.label,i=e.value,o=new s.BlipTag({label:n,background:i,canChangeBackground:!1});this.addTag(o)}},{key:"_onAddNewOption",value:function(t){var e=t.$event,n=e.label,i=e.id,o=new s.BlipTag({label:n,id:i,canChangeBackground:this.tagsOptions.canChangeBackground});this.addTag(o)}},{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:"insertTagIntoDom",value:function(t){if(0===this.tags.length)this.tagsContainer.prepend(t.element);else{var e=(0,r.last)(this.tags).element;(0,r.insertAfter)(t.element,e)}this.tags=this.tags.concat(t)}},{key:"bulkInsertCompactTags",value:function(t){var e=this;t.map(function(t){var n=t.label,i=t.background,o=new s.BlipTag({label:n,background:i,canChangeBackground:!1,canRemoveTag:!1,toggleCollapse:!1,onTagClick:e.onTagClick.bind(e),mode:"compact",classes:"blip-tag--on-list "});e.insertTagIntoDom(o)})}},{key:"bulkInsertTags",value:function(t){var e=this;t.map(function(t){var n,i=t.label,o=t.background,a=t.id,l=new s.BlipTag((u(n={label:i},o?"background":"",o),u(n,a?"id":"",a),u(n,"canChangeBackground",!1),u(n,"onRemove",e._removeTag.bind(e)),u(n,"onSelectColor",e._onSelectTagColor.bind(e)),u(n,"classes","blip-tag--on-list"),n));e.insertTagIntoDom(l),e.blipSelectInstance.addNewOption({label:l.label,value:l.tagOptions.background},!1)})}},{key:"addTag",value:function(t,e){var n=t.id,i=t.label,o=t.canChangeBackground,a=t.tagOptions.background,r=new s.BlipTag({id:n,label:i,canChangeBackground:o,background:a,onRemove:this._removeTag.bind(this),onSelectColor:this._onSelectTagColor.bind(this),classes:"blip-tag--on-list"});return this._hideLastTagOptions(),this.insertTagIntoDom(r),e&&this.blipSelectInstance.input.focus(),this.tagsOptions.onTagAdded.call(this,(0,l.EventEmitter)({tag:r})),r}},{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,l.EventEmitter)({tag:n})),i&&this.tags.length>0?(0,r.last)(this.tags).tagElement.focus():this.blipSelectInstance.input.focus()}},{key:"_onSelectTagColor",value:function(t){this.tagsOptions.onSelectTagColor.call(this,t)}},{key:"onTagClick",value:function(t){t.$event;this.tagsOptions.toggleTagsMode&&this.tags.forEach(function(t){return t.toggleCollapse()})}},{key:"_overrideSelectDomOptions",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[{value:"",label:"",id:""}];this.selectOptionsContainer.innerHTML="",e.forEach(function(e){var n=e.value,i=e.label,o=e.id;t.selectOptionsContainer.appendChild((0,r.strToEl)('\n          <li tabindex="0" class="'+c.blipSelectOptionClass+'" id="'+o+'" data-label="'+i+'" data-value="'+n+'">\n            <span class="blip-tag__label-option" style="background: '+n+'">'+i+"</span>\n          </li>\n        "))}),this._setupOptionsEventHandlers()}},{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),a=n(2),l=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,a.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(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];if("function"!=typeof this.configAddOptions.onAddNewOption)throw Error('Callback "onAddNewOption" is not a function');var n=i({},this._currentOptionState(),t,{id:"blip-select__option-"+(0,s.guid)()});""!==n.label.trim()&&(this.selectOptions=this.selectOptions.concat(n),this.clearInput(),this._arrayToDomOptions(this.selectOptions),e&&this.configAddOptions.onAddNewOption.call(this,(0,l.EventEmitter)(i({},n,{context:this}))),this._closeSelect())}},{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');this.configAddOptions.canAddOption&&this._removeAddOptionNode(),(e||n)&&this.configOptions.onSelectOption.call(this,(0,l.EventEmitter)({value:e,label:n}))}},{key:"_removeAddOptionNode",value:function(){var t=this.selectOptionsContainer.querySelector(".blip-select__add-option");t&&this.selectOptionsContainer.removeChild(t),this._arrayToDomOptions(this.selectOptions)}},{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(){if(this.configAddOptions.newOption)return this.configAddOptions.newOption.call(this,(0,l.EventEmitter)({context:this}));var t=this.input.value;return{value:t,label:t,element:(0,s.strToEl)('<li tabindex="0" class="blip-select__option" data-label="'+t+'" data-value="'+t+'">'+t+"</li>")}}},{key:"_onAddInputChange",value:function(t){var e=this;if(""===this.input.value||this.isSelectOpen||void 0!==t.detail.shouldOpenSelect||this._openSelect(),""===this.input.value&&this._closeSelect(),this._canAddOption()){var n=this._renderOptionButton(this.input.value);this.selectOptionsContainer.appendChild(n);var i=this._currentOptionState();n.addEventListener("click",this.addNewOption.bind(this,i)),n.addEventListener("keydown",function(t){switch(t.keyCode){case 13:e.addNewOption(i);break;case 38:n.previousSibling&&n.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(8);Object.defineProperty(e,"BlipTags",{enumerable:!0,get:function(){return o.BlipTags}});var s=n(3);Object.defineProperty(e,"BlipTag",{enumerable:!0,get:function(){return s.BlipTag}}),n(7),n(6)},function(t,e,n){t.exports=n(10)}])});

package.json

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

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

90413

increased by0.55%

No dependency changes