UNPKG

@author.io/element-options

Version:

author-options custom element (web component).

3 lines (2 loc) 15.9 kB
var AuthorOptionsElement=function(){"use strict";function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(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)}}function n(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&r(e,t)}function a(e){return(a=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function r(e,t){return(r=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function c(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?u(e):t}function l(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}window.hasOwnProperty("AuthorBaseElement")||(console.error('[ERROR] <author-options> Required dependency "AuthorBaseElement" not found.'),console.info("AuthorBaseElement is available at https://github.com/author-elements/base"));var e=function(e){function t(){var f;return s(this,t),(f=c(this,a(t).call(this,'<template><style>@charset "UTF-8"; :host{contain:content;display:block;width:100%}:host *,:host :after,:host :before{box-sizing:border-box}author-options{contain:content;display:block;width:100%}author-options *,author-options :after,author-options :before{box-sizing:border-box}</style><slot name="afterbegin"></slot><slot name="beforeoptions"></slot><slot></slot><slot name="afteroptions"></slot><slot name="beforeend"></slot></template>'))).UTIL.defineProperties({cherryPickedOptions:{private:!0},filteredOptions:{readonly:!0,get:function(){var e=u(f).options;for(var t in f.PRIVATE.filters)e=f.PRIVATE.filters[t]();return Array.isArray(e)?e:[]}},filters:{private:!0,default:{}},form:{readonly:!0,get:function(){return f.parentNode.form}},displayOptions:{readonly:!0,get:function(){return new(f.PRIVATE.generateAuthorHTMLOptionsCollectionConstructor())(f.options.map(function(e){return e.displayElement}),f.selectedIndex,function(e,t){return f.addOption(f.PRIVATE.generateOptionObject(e),t)},function(e){return f.removeOptionByIndex(e)})}},hoveredIndex:{readonly:!0,get:function(){return f.options.findIndex(function(e){return e.displayElement.hover})}},isSlave:{private:!0,readonly:!0,get:function(){return"author-select"===f.parentNode.localName||"author-datalist"===f.parentNode.localName}},lastSelectedIndex:{private:!0},multiple:{readonly:!0,get:function(){return f.parentNode.multiple}},options:{readonly:!0,default:[]},selectedIndices:{readonly:!0,get:function(){return l(f.selectedOptions).map(function(e){return e.index})}},selectedOptions:{readonly:!0,get:function(){var e=f.querySelectorAll("[selected]");return new(f.PRIVATE.generateAuthorHTMLCollectionConstructor())(e)}},Selection:{readonly:!0,private:!0,default:function(){function t(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[];s(this,t),this.options=e}return n(t,[{key:"append",value:function(e){this.options.push(e)}},{key:"clear",value:function(){this.options=[]}},{key:"includes",value:function(e){return this.options.includes(e)}},{key:"prepend",value:function(e){this.options.unshift(e)}},{key:"selectAll",value:function(){this.options.forEach(function(e){return e.selected=!0})}},{key:"displayElements",get:function(){return this.options.map(function(e){return e.displayElement})}},{key:"length",get:function(){return this.options.length}},{key:"first",get:function(){return this.options[0]}},{key:"last",get:function(){return this.options[this.options.length-1]}}]),t}()},selectionStartIndex:{private:!0},visibleOptions:{readonly:!0,get:function(){return f.options.filter(function(e){return!e.hidden})}}}),f.UTIL.definePrivateMethods({arrowDownHandler:function(e){if(f.multiple){var t=f.PRIVATE.lastSelectedIndex;if(t!==f.options.length-1)return f.emit("option.selected",{index:null===t?0:t+1,keyboard:!0,shiftKey:e.detail.shiftKey,ctrlKey:!1,metaKey:!1})}else{var n=e.detail.startIndex;switch(n){case f.options.length-1:return;default:return f.PRIVATE.hoverNextOption(n)}}},arrowUpHandler:function(e){if(f.multiple){var t=f.PRIVATE.lastSelectedIndex;if(0!==t)return f.emit("option.selected",{index:null===t?f.options.length-1:t-1,keyboard:!0,shiftKey:e.detail.shiftKey,ctrlKey:!1,metaKey:!1})}else{var n=e.detail.startIndex;switch(n){case-1:case 0:return;default:return f.PRIVATE.hoverPreviousOption(n)}}},diffSelections:function(e,t){return e.filter(function(e){return!t.includes(e)})},generateAuthorHTMLOptionsCollectionConstructor:function(){var l=new WeakMap,t=f.PRIVATE.generateAuthorHTMLCollectionConstructor();return function(e){function r(e){var t,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:-1,i=2<arguments.length?arguments[2]:void 0,o=3<arguments.length?arguments[3]:void 0;return s(this,r),(t=c(this,a(r).call(this,e))).selectedIndex=n,t.add=i,t.remove=o,l.set(u(t),{arr:e}),t}return o(r,t),n(r,[{key:Symbol.toStringTag,value:function(){return"AuthorHTMLOptionsCollection"}}]),r}()},generateOptgroup:function(e){if(!customElements.get("author-optgroup"))return f.UTIL.throwError({type:"dependency",vars:{name:"author-optgroup"}});var t=document.createElement("author-optgroup");t.id=f.UTIL.generateGuid("optgroup");var n=e.getAttribute("label");if(!n||""===n.trim())return f.UTIL.throwError({message:"<optgroup> must have a label attribute!"});t.setAttribute("label",n);var i=e.querySelectorAll("option");return Array.from(i).forEach(function(e){f.addOption(f.PRIVATE.generateOptionObject(e),null,t)}),t},generateOptionObject:function(e){return customElements.get("author-option")?new(f.PRIVATE.generateOptionConstructor())(u(f),f.UTIL.generateGuid(),e,document.createElement("author-option")):f.UTIL.throwError({type:"dependency",vars:{name:"author-option"}})},generateOptionConstructor:function(){var l=new WeakMap;return function(){function r(e,t,n,i){var o=this;s(this,r),this.key=t,this.form=e.form,this.defaultSelected=n.selected,this.sourceElement=n,this.displayElement=i,this.displayElement.parent=e,this.displayElement.selected=n.selected,this.displayElement.defaultSelected=n.selected,this.displayElement.innerHTML=n.innerHTML,Array.from(n.attributes).forEach(function(e){if("boolean"==typeof e.value)return e.value?o.displayElement.setAttribute(e.name,""):o.displayElement.removeAttribute(e.name);o.displayElement.setAttribute(e.name,e.value)}),l.set(this,{attributes:{disabled:n.disabled,id:n.getAttribute("id"),label:n.getAttribute("label")||n.textContent.trim(),selected:n.selected,value:n.hasAttribute("value")?n.getAttribute("value").trim():null,text:n.text.trim()},setAttr:function(e,t){"boolean"==typeof(o.sourceElement[e]=t)?t?o.displayElement.setAttribute(e,""):o.displayElement.removeAttribute(e):o.displayElement.setAttribute(e,t),l.get(o).attributes[e]=t}})}return n(r,[{key:"remove",value:function(){this.sourceElement.remove(),this.displayElement.remove()}},{key:"disabled",get:function(){return l.get(this).attributes.disabled},set:function(e){l.get(this).setAttr("disabled",e)}},{key:"hidden",get:function(){return this.displayElement.hidden},set:function(e){this.displayElement.hidden=e}},{key:"index",get:function(){return this.sourceElement.index}},{key:"id",get:function(){return l.get(this).attributes.id},set:function(e){l.get(this).setAttr("id",e)}},{key:"selected",get:function(){return l.get(this).attributes.selected},set:function(e){l.get(this).setAttr("selected",e)}},{key:"label",get:function(){return l.get(this).attributes.label},set:function(e){l.get(this).setAttr("label",e)}},{key:"text",get:function(){return l.get(this).attributes.text},set:function(e){l.get(this).setAttr("text",e)}},{key:"value",get:function(){return l.get(this).attributes.value},set:function(e){l.get(this).setAttr("value",e)}}]),r}()},getCurrentSelection:function(){return f.options.filter(function(e){return e.selected})},getPreviousVisibleOption:function(e){var t=e-1,n=f.options[t];return n?(n.hidden&&(n=f.PRIVATE.getPreviousVisibleOption(t)),n):null},getNextVisibleOption:function(e){var t=e+1,n=f.options[t];return n?(n.hidden&&(n=f.PRIVATE.getNextVisibleOption(t)),n):null},handleClickSelection:function(e,t){var n=f.PRIVATE,i=(n.cherryPickedOptions,n.getCurrentSelection),o=n.lastSelectedIndex,r=n.Selection,l=n.selectionStartIndex,s=e.index,a=e.shiftKey,u=e.ctrlKey,c=e.metaKey,d=f.options[s];if(a&&null!==o){f.PRIVATE.lastSelectedIndex=s,f.PRIVATE.cherryPickedOptions.clear();var p=[s,l].sort(function(e,t){return e-t});return t(new r(p[0]===p[1]?[d]:f.options.slice(p[0],p[1]+1)))}var h=i();return u||c?(f.PRIVATE.lastSelectedIndex=s,f.PRIVATE.selectionStartIndex=s,f.PRIVATE.cherryPickedOptions.options=d.selected?h.filter(function(e){return e!==d}):f.options.filter(function(e){return e===d||h.includes(e)}),t(f.PRIVATE.cherryPickedOptions)):1!==h.length||s!==o?(f.PRIVATE.lastSelectedIndex=s,f.PRIVATE.selectionStartIndex=s,f.PRIVATE.cherryPickedOptions.clear(),t(new r([d]))):void 0},handleKeyboardSelection:function(e,t){var n=f.PRIVATE,i=n.cherryPickedOptions,o=n.getCurrentSelection,r=n.Selection,l=n.selectionStartIndex,s=e.index,a=e.shiftKey,u=f.options[s],c=o();if(f.PRIVATE.lastSelectedIndex=s,!a||0===c.length)return f.PRIVATE.selectionStartIndex=s,f.PRIVATE.cherryPickedOptions.clear(),t(new r([u]));if(0<c.length){var d=[s,l].sort(),p=new r(d[0]===d[1]?[u]:f.options.slice(d[0],d[1]+1));return 0<i.length&&(p.options=f.options.filter(function(e){return p.includes(e)||i.includes(e)})),t(p)}},hoverPreviousOption:function(e){var t=f.PRIVATE.getPreviousVisibleOption(e);t&&t.index!==e&&f.hoverOption(t.index)},hoverNextOption:function(e){var t=f.PRIVATE.getNextVisibleOption(e);t&&t.index!==e&&f.hoverOption(t.index)},optionSelectionHandler:function(e){var t=f.PRIVATE,n=t.cherryPickedOptions,i=t.diffSelections,o=t.getCurrentSelection,r=t.generateAuthorHTMLCollectionConstructor,l=(t.handleClickSelection,t.handleKeyboardSelection,t.Selection);null===n&&(f.PRIVATE.cherryPickedOptions=new l([]));var s=e.detail,a=s.index,u=s.keyboard,c=function(e){if(!e)return f.emit("cleared");var t=o(),n=e.length>=t.length?e.options:t;0!==i(n,n===t?e.options:t).length&&f.PRIVATE.isSlave&&(f.deselectAll(),e.selectAll(),f.emit("options.selected",{options:e.options,previous:f.selectedOptions,next:new(r())(e.displayElements)},f.parentNode))};return f.multiple?u?f.PRIVATE.handleKeyboardSelection(e.detail,c):f.PRIVATE.handleClickSelection(e.detail,c):c(f.options[a]?new l([f.options[a]]):null)},parentStateChangeHandler:function(e){f.emit("state.change",e.detail);var t=e.detail,n=t.name,i=t.value;switch(n){case"multiple":if(!i&&0<f.selectedOptions.length){var o=f.selectedIndex;f.deselectAll(),f.emit("option.selected",{index:o})}break;default:return}}}),f.UTIL.registerListeners(u(f),{connected:function(){f.PRIVATE.selectionStartIndex=0<=f.selectedIndex?f.selectedIndex:0,f.PRIVATE.isSlave&&f.parentNode.on("state.change",f.PRIVATE.parentStateChangeHandler)},disconnected:function(){f.PRIVATE.isSlave&&f.parentNode.off("state.change",f.PRIVATE.parentStateChangeHandler)},"keydown.arrowUp":f.PRIVATE.arrowUpHandler,"keydown.arrowDown":f.PRIVATE.arrowDownHandler,"option.selected":f.PRIVATE.optionSelectionHandler}),f}return o(t,AuthorBaseElement(HTMLElement)),n(t,[{key:"addFilter",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.UTIL.generateGuid("filter_"),t=1<arguments.length?arguments[1]:void 0;"function"!=typeof t&&this.UTIL.throwError({type:"type",message:"Filter must be a function"}),this.PRIVATE.filters.hasOwnProperty(e)&&console.warn('Filter "'.concat(e,'" alredy exists! Overwriting...')),this.PRIVATE.filters[e]=t}},{key:"hasFilter",value:function(e){return this.PRIVATE.filters.hasOwnProperty(e)}},{key:"removeFilter",value:function(e){if(!this.PRIVATE.filters.hasOwnProperty(e))return console.warn('Filter "'.concat(e,'" not found.'));delete this.PRIVATE.filters[e]}},{key:"removeAllFilters",value:function(){this.PRIVATE.filters={}}},{key:"addOptgroup",value:function(e){var t=document.createElement("author-optgroup-label");t.innerHTML=e.getAttribute("label"),this.appendChild(t),this.appendChild(e)}},{key:"addOption",value:function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:null,n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:this;if(!customElements.get("author-option"))return this.UTIL.throwError({type:"dependency",vars:{name:"author-option"}});e instanceof Option&&(e=this.PRIVATE.generateOptionObject(e)),this.PRIVATE.isSlave&&(this.parentNode["".concat(e.index)]=e.displayElement),t?(n.insertBefore(e.displayElement,n.children.item(t)),this.options.splice(t,0,e),this.PRIVATE.isSlave&&this.parentNode.sourceElement.add(e.sourceElement,t)):(n.appendChild(e.displayElement),this.options.push(e),this.PRIVATE.isSlave&&!this.parentNode.sourceElement[this.options.length-1]&&this.parentNode.sourceElement.appendChild(e.sourceElement)),!e.selected||this.multiple||(this.selectedIndex=e.index)}},{key:"addOptions",value:function(e){var n=this;Array.from(e).forEach(function(e){var t=e instanceof HTMLElement;switch(e.nodeName){case"OPTION":return n.addOption(t?n.PRIVATE.generateOptionObject(e):e);case"OPTGROUP":return n.addOptgroup(t?n.PRIVATE.generateOptgroup(e):e);default:return n.UTIL.printToConsole("".concat(e.nodeName.toLowerCase()," is not a valid child element for <author-select>. Removing..."),"warning")}})}},{key:"clear",value:function(){for(this.selectedIndex=-1,this.innerHTML="";this.options.length;)this.options.pop()}},{key:"deselect",value:function(e){var t=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];"number"==typeof e&&(e=this.options[e]),e.selected=!1,this.PRIVATE.isSlave&&void 0!==this.selectedOptionsElement&&this.parentNode.selectedOptionsElement.remove(e,t)}},{key:"deselectAll",value:function(){var i=this,o=!(0<arguments.length&&void 0!==arguments[0])||arguments[0];this.options.filter(function(e){return e.selected}).forEach(function(e,t,n){i.deselect(e,n.length-1&&o)})}},{key:"find",value:function(i){var o=1<arguments.length&&void 0!==arguments[1]&&arguments[1],e=Array.from(this.options).filter(function(e){var t=o?e.value:e.value.toLowerCase(),n=o?e.text:e.text.toLowerCase();return i=o?i:i.toLowerCase(),0<=t.indexOf(i)||0<=n.indexOf(i)});return Array.isArray(e)?e:[]}},{key:"hoverOption",value:function(e){this.unHoverAllOptions(),this.options[e].displayElement.hover=!0}},{key:"item",value:function(e){return this.options[e].displayElement}},{key:"namedItem",value:function(n){var e=this.options.filter(function(e){var t=e.sourceElement.attributes.getNamedItem("id");return t&&t.value===n});return e.length?e[e.length-1].displayElement:null}},{key:"removeOptionByIndex",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:null;null===e||e>=this.options.length||this.options[e].remove()}},{key:"unHoverAllOptions",value:function(){var n=this;this.options.forEach(function(e,t){return n.unHoverOption(t)})}},{key:"unHoverOption",value:function(e){this.options[e].displayElement.hover=!1}},{key:"selectedIndex",get:function(){return 0<this.selectedOptions.length?this.selectedOptions.item(0).index:-1},set:function(e){this.emit("option.selected",{index:e})}}]),t}();return customElements.define("author-options",e),e}(); //# sourceMappingURL=author-options.es5.min.js.map