UNPKG

@author.io/element-options

Version:

author-options custom element (web component).

3 lines (2 loc) 12.6 kB
var AuthorOptionsElement=function(){"use strict";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"));class e extends(AuthorBaseElement(HTMLElement)){constructor(){super('<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>'),this.UTIL.defineProperties({cherryPickedOptions:{private:!0},filteredOptions:{readonly:!0,get:()=>{let{options:e}=this;for(let t in this.PRIVATE.filters)e=this.PRIVATE.filters[t]();return Array.isArray(e)?e:[]}},filters:{private:!0,default:{}},form:{readonly:!0,get:()=>this.parentNode.form},displayOptions:{readonly:!0,get:()=>{return new(this.PRIVATE.generateAuthorHTMLOptionsCollectionConstructor())(this.options.map(e=>e.displayElement),this.selectedIndex,(e,t)=>this.addOption(this.PRIVATE.generateOptionObject(e),t),e=>this.removeOptionByIndex(e))}},hoveredIndex:{readonly:!0,get:()=>this.options.findIndex(e=>e.displayElement.hover)},isSlave:{private:!0,readonly:!0,get:()=>"author-select"===this.parentNode.localName||"author-datalist"===this.parentNode.localName},lastSelectedIndex:{private:!0},multiple:{readonly:!0,get:()=>this.parentNode.multiple},options:{readonly:!0,default:[]},selectedIndices:{readonly:!0,get:()=>[...this.selectedOptions].map(e=>e.index)},selectedOptions:{readonly:!0,get:()=>{let e=this.querySelectorAll("[selected]");return new(this.PRIVATE.generateAuthorHTMLCollectionConstructor())(e)}},Selection:{readonly:!0,private:!0,default:class{constructor(e=[]){this.options=e}get displayElements(){return this.options.map(e=>e.displayElement)}get length(){return this.options.length}get first(){return this.options[0]}get last(){return this.options[this.options.length-1]}append(e){this.options.push(e)}clear(){this.options=[]}includes(e){return this.options.includes(e)}prepend(e){this.options.unshift(e)}selectAll(){this.options.forEach(e=>e.selected=!0)}}},selectionStartIndex:{private:!0},visibleOptions:{readonly:!0,get:()=>this.options.filter(e=>!e.hidden)}}),this.UTIL.definePrivateMethods({arrowDownHandler:e=>{if(!this.multiple){let{startIndex:t}=e.detail;switch(t){case this.options.length-1:return;default:return this.PRIVATE.hoverNextOption(t)}return}let{lastSelectedIndex:t}=this.PRIVATE;if(t!==this.options.length-1)return this.emit("option.selected",{index:null===t?0:t+1,keyboard:!0,shiftKey:e.detail.shiftKey,ctrlKey:!1,metaKey:!1})},arrowUpHandler:e=>{if(!this.multiple){let{startIndex:t}=e.detail;switch(t){case-1:case 0:return;default:return this.PRIVATE.hoverPreviousOption(t)}return}let{lastSelectedIndex:t}=this.PRIVATE;if(0!==t)return this.emit("option.selected",{index:null===t?this.options.length-1:t-1,keyboard:!0,shiftKey:e.detail.shiftKey,ctrlKey:!1,metaKey:!1})},diffSelections:(e,t)=>e.filter(e=>!t.includes(e)),generateAuthorHTMLOptionsCollectionConstructor:()=>{let e=new WeakMap,t=this.PRIVATE.generateAuthorHTMLCollectionConstructor();return class extends t{constructor(t,i=-1,s,n){super(t),this.selectedIndex=i,this.add=s,this.remove=n,e.set(this,{arr:t})}[Symbol.toStringTag](){return"AuthorHTMLOptionsCollection"}}},generateOptgroup:e=>{if(!customElements.get("author-optgroup"))return this.UTIL.throwError({type:"dependency",vars:{name:"author-optgroup"}});let t=document.createElement("author-optgroup");t.id=this.UTIL.generateGuid("optgroup");let i=e.getAttribute("label");if(!i||""===i.trim())return this.UTIL.throwError({message:"<optgroup> must have a label attribute!"});t.setAttribute("label",i);let s=e.querySelectorAll("option");return Array.from(s).forEach(e=>{this.addOption(this.PRIVATE.generateOptionObject(e),null,t)}),t},generateOptionObject:e=>{if(!customElements.get("author-option"))return this.UTIL.throwError({type:"dependency",vars:{name:"author-option"}});return new(this.PRIVATE.generateOptionConstructor())(this,this.UTIL.generateGuid(),e,document.createElement("author-option"))},generateOptionConstructor:()=>{let e=new WeakMap;return class{constructor(t,i,s,n){this.key=i,this.form=t.form,this.defaultSelected=s.selected,this.sourceElement=s,this.displayElement=n,this.displayElement.parent=t,this.displayElement.selected=s.selected,this.displayElement.defaultSelected=s.selected,this.displayElement.innerHTML=s.innerHTML,Array.from(s.attributes).forEach(e=>{if("boolean"==typeof e.value)return e.value?this.displayElement.setAttribute(e.name,""):this.displayElement.removeAttribute(e.name);this.displayElement.setAttribute(e.name,e.value)}),e.set(this,{attributes:{disabled:s.disabled,id:s.getAttribute("id"),label:s.getAttribute("label")||s.textContent.trim(),selected:s.selected,value:s.hasAttribute("value")?s.getAttribute("value").trim():null,text:s.text.trim()},setAttr:(t,i)=>{this.sourceElement[t]=i,"boolean"==typeof i?i?this.displayElement.setAttribute(t,""):this.displayElement.removeAttribute(t):this.displayElement.setAttribute(t,i),e.get(this).attributes[t]=i}})}get disabled(){return e.get(this).attributes.disabled}set disabled(t){e.get(this).setAttr("disabled",t)}get hidden(){return this.displayElement.hidden}set hidden(e){this.displayElement.hidden=e}get index(){return this.sourceElement.index}get id(){return e.get(this).attributes.id}set id(t){e.get(this).setAttr("id",t)}get selected(){return e.get(this).attributes.selected}set selected(t){e.get(this).setAttr("selected",t)}get label(){return e.get(this).attributes.label}set label(t){e.get(this).setAttr("label",t)}get text(){return e.get(this).attributes.text}set text(t){e.get(this).setAttr("text",t)}get value(){return e.get(this).attributes.value}set value(t){e.get(this).setAttr("value",t)}remove(){this.sourceElement.remove(),this.displayElement.remove()}}},getCurrentSelection:()=>this.options.filter(e=>e.selected),getPreviousVisibleOption:e=>{let t=e-1,i=this.options[t];return i?(i.hidden&&(i=this.PRIVATE.getPreviousVisibleOption(t)),i):null},getNextVisibleOption:e=>{let t=e+1,i=this.options[t];return i?(i.hidden&&(i=this.PRIVATE.getNextVisibleOption(t)),i):null},handleClickSelection:(e,t)=>{let{cherryPickedOptions:i,getCurrentSelection:s,lastSelectedIndex:n,Selection:r,selectionStartIndex:o}=this.PRIVATE,{index:l,shiftKey:a,ctrlKey:h,metaKey:d}=e,p=this.options[l];if(a&&null!==n){this.PRIVATE.lastSelectedIndex=l,this.PRIVATE.cherryPickedOptions.clear();let e=[l,o].sort((e,t)=>e-t);return t(new r(e[0]===e[1]?[p]:this.options.slice(e[0],e[1]+1)))}let u=s();return h||d?(this.PRIVATE.lastSelectedIndex=l,this.PRIVATE.selectionStartIndex=l,this.PRIVATE.cherryPickedOptions.options=p.selected?u.filter(e=>e!==p):this.options.filter(e=>e===p||u.includes(e)),t(this.PRIVATE.cherryPickedOptions)):1!==u.length||l!==n?(this.PRIVATE.lastSelectedIndex=l,this.PRIVATE.selectionStartIndex=l,this.PRIVATE.cherryPickedOptions.clear(),t(new r([p]))):void 0},handleKeyboardSelection:(e,t)=>{let{cherryPickedOptions:i,getCurrentSelection:s,Selection:n,selectionStartIndex:r}=this.PRIVATE,{index:o,shiftKey:l}=e,a=this.options[o],h=s();if(this.PRIVATE.lastSelectedIndex=o,!l||0===h.length)return this.PRIVATE.selectionStartIndex=o,this.PRIVATE.cherryPickedOptions.clear(),t(new n([a]));if(h.length>0){let e=[o,r].sort(),s=new n(e[0]===e[1]?[a]:this.options.slice(e[0],e[1]+1));return i.length>0&&(s.options=this.options.filter(e=>s.includes(e)||i.includes(e))),t(s)}},hoverPreviousOption:e=>{let t=this.PRIVATE.getPreviousVisibleOption(e);t&&t.index!==e&&this.hoverOption(t.index)},hoverNextOption:e=>{let t=this.PRIVATE.getNextVisibleOption(e);t&&t.index!==e&&this.hoverOption(t.index)},optionSelectionHandler:e=>{let{cherryPickedOptions:t,diffSelections:i,getCurrentSelection:s,generateAuthorHTMLCollectionConstructor:n,handleClickSelection:r,handleKeyboardSelection:o,Selection:l}=this.PRIVATE;null===t&&(this.PRIVATE.cherryPickedOptions=new l([]));let{index:a,keyboard:h}=e.detail,d=e=>{if(!e)return this.emit("cleared");let t=s(),r=e.length>=t.length?e.options:t;0!==i(r,r===t?e.options:t).length&&this.PRIVATE.isSlave&&(this.deselectAll(),e.selectAll(),this.emit("options.selected",{options:e.options,previous:this.selectedOptions,next:new(n())(e.displayElements)},this.parentNode))};return this.multiple?h?this.PRIVATE.handleKeyboardSelection(e.detail,d):this.PRIVATE.handleClickSelection(e.detail,d):d(this.options[a]?new l([this.options[a]]):null)},parentStateChangeHandler:e=>{this.emit("state.change",e.detail);let{name:t,value:i}=e.detail;switch(t){case"multiple":if(!i&&this.selectedOptions.length>0){let e=this.selectedIndex;this.deselectAll(),this.emit("option.selected",{index:e})}break;default:return}}}),this.UTIL.registerListeners(this,{connected:()=>{this.PRIVATE.selectionStartIndex=this.selectedIndex>=0?this.selectedIndex:0,this.PRIVATE.isSlave&&this.parentNode.on("state.change",this.PRIVATE.parentStateChangeHandler)},disconnected:()=>{this.PRIVATE.isSlave&&this.parentNode.off("state.change",this.PRIVATE.parentStateChangeHandler)},"keydown.arrowUp":this.PRIVATE.arrowUpHandler,"keydown.arrowDown":this.PRIVATE.arrowDownHandler,"option.selected":this.PRIVATE.optionSelectionHandler})}get selectedIndex(){return this.selectedOptions.length>0?this.selectedOptions.item(0).index:-1}set selectedIndex(e){this.emit("option.selected",{index:e})}addFilter(e=this.UTIL.generateGuid("filter_"),t){"function"!=typeof t&&this.UTIL.throwError({type:"type",message:"Filter must be a function"}),this.PRIVATE.filters.hasOwnProperty(e)&&console.warn(`Filter "${e}" alredy exists! Overwriting...`),this.PRIVATE.filters[e]=t}hasFilter(e){return this.PRIVATE.filters.hasOwnProperty(e)}removeFilter(e){if(!this.PRIVATE.filters.hasOwnProperty(e))return console.warn(`Filter "${e}" not found.`);delete this.PRIVATE.filters[e]}removeAllFilters(){this.PRIVATE.filters={}}addOptgroup(e){let t=document.createElement("author-optgroup-label");t.innerHTML=e.getAttribute("label"),this.appendChild(t),this.appendChild(e)}addOption(e,t=null,i=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[`${e.index}`]=e.displayElement),t?(i.insertBefore(e.displayElement,i.children.item(t)),this.options.splice(t,0,e),this.PRIVATE.isSlave&&this.parentNode.sourceElement.add(e.sourceElement,t)):(i.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)}addOptions(e){Array.from(e).forEach(e=>{let t=e instanceof HTMLElement;switch(e.nodeName){case"OPTION":return this.addOption(t?this.PRIVATE.generateOptionObject(e):e);case"OPTGROUP":return this.addOptgroup(t?this.PRIVATE.generateOptgroup(e):e);default:return this.UTIL.printToConsole(`${e.nodeName.toLowerCase()} is not a valid child element for <author-select>. Removing...`,"warning")}})}clear(){for(this.selectedIndex=-1,this.innerHTML="";this.options.length;)this.options.pop()}deselect(e,t=!0){"number"==typeof e&&(e=this.options[e]),e.selected=!1,this.PRIVATE.isSlave&&void 0!==this.selectedOptionsElement&&this.parentNode.selectedOptionsElement.remove(e,t)}deselectAll(e=!0){this.options.filter(e=>e.selected).forEach((t,i,s)=>{this.deselect(t,s.length-1&&e)})}find(e,t=!1){let i=Array.from(this.options).filter(i=>{let s=t?i.value:i.value.toLowerCase(),n=t?i.text:i.text.toLowerCase();return e=t?e:e.toLowerCase(),s.indexOf(e)>=0||n.indexOf(e)>=0});return Array.isArray(i)?i:[]}hoverOption(e){this.unHoverAllOptions(),this.options[e].displayElement.hover=!0}item(e){return this.options[e].displayElement}namedItem(e){let t=this.options.filter(t=>{let i=t.sourceElement.attributes.getNamedItem("id");return i&&i.value===e});return t.length?t[t.length-1].displayElement:null}removeOptionByIndex(e=null){null===e||e>=this.options.length||this.options[e].remove()}unHoverAllOptions(){this.options.forEach((e,t)=>this.unHoverOption(t))}unHoverOption(e){this.options[e].displayElement.hover=!1}}return customElements.define("author-options",e),e}(); //# sourceMappingURL=author-options.min.js.map