@travelopia/web-components 0.6.5 → 0.6.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.currentlyHighlightedOption=-1,this.keyboardEventListener=this.handleKeyboardInputs.bind(this),document.addEventListener("click",this.handleDocumentClick.bind(this)),this.addEventListener("change",this.update.bind(this));const t=this.querySelector("tp-multi-select-options");t&&new MutationObserver(this.initialize.bind(this)).observe(t,{childList:!0,subtree:!0}),this.initialize()}static get observedAttributes(){return["open"]}attributeChangedCallback(t="",e="",l=""){e!==l&&"open"===t&&("yes"===l?(document.addEventListener("keydown",this.keyboardEventListener),this.dispatchEvent(new CustomEvent("open",{bubbles:!0}))):(this.unHighlightAllOptions(),document.removeEventListener("keydown",this.keyboardEventListener),this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))))}set value(t){if(!t||!Array.isArray(t))return;const e=this.querySelectorAll("tp-multi-select-option");null==e||e.forEach((e=>{var l;t.includes(null!==(l=e.getAttribute("value"))&&void 0!==l?l:"")?e.setAttribute("selected","yes"):e.removeAttribute("selected")})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}get value(){const t=[],e=this.querySelectorAll("select option[selected]");return null==e||e.forEach((e=>{const l=e.getAttribute("value");l&&t.push(l)})),t}updateFormFieldValue(){const t=this.querySelectorAll("tp-multi-select-option"),e=this.querySelector("select");if(!t||!e)return;const l=Array.from(e.options);t.forEach((t=>{var i,s;const n=null!==(i=t.getAttribute("value"))&&void 0!==i?i:"";if(n){const i=l.find((t=>t.value===n));if("yes"===t.getAttribute("selected"))if(i)i.setAttribute("selected","selected");else{const l=document.createElement("option");l.setAttribute("value",null!==(s=t.getAttribute("value"))&&void 0!==s?s:""),l.setAttribute("selected","selected"),null==e||e.append(l)}else null==i||i.remove()}})),e.dispatchEvent(new Event("change"))}update(){this.updateFormFieldValue();const t=this.value;0!==t.length?this.setAttribute("selected","yes"):this.removeAttribute("selected");const e=this.querySelector("tp-multi-select-status");e&&(t.length>0?e.setAttribute("total",t.length.toString()):e.removeAttribute("total"))}handleDocumentClick(t){this===t.target||this.contains(t.target)||this.removeAttribute("open")}initialize(){var t,e;let l=this.querySelector("select");if(l)l.innerHTML="";else{l=document.createElement("select"),l.setAttribute("name",null!==(t=this.getAttribute("name"))&&void 0!==t?t:""),l.setAttribute("form",null!==(e=this.getAttribute("form"))&&void 0!==e?e:"");const i=this.getAttribute("form");i&&l.setAttribute("form",i),"no"!==this.getAttribute("multiple")&&l.setAttribute("multiple","multiple"),this.append(l)}this.update()}select(t=""){if("no"===this.getAttribute("multiple")&&(this.unSelectAll(),""===t))return void("yes"===this.getAttribute("close-on-select")&&this.removeAttribute("open"));const e=this.querySelectorAll(`tp-multi-select-option[value="${t}"]`);null==e||e.forEach((t=>{"yes"!==t.getAttribute("disabled")&&t.setAttribute("selected","yes")}));const l=this.querySelector("tp-multi-select-search");null==l||l.clear(),null==l||l.focus(),"yes"===this.getAttribute("close-on-select")&&this.removeAttribute("open"),this.update()}selectAll(){const t=this.querySelectorAll("tp-multi-select-option");null==t||t.forEach((t=>{"yes"!==t.getAttribute("disabled")&&t.setAttribute("selected","yes")})),this.update()}unSelect(t=""){const e=this.querySelectorAll(`tp-multi-select-option[value="${t}"]`);null==e||e.forEach((t=>{t.removeAttribute("selected")})),this.update()}unSelectAll(){const t=this.querySelectorAll("tp-multi-select-option");null==t||t.forEach((t=>{t.removeAttribute("selected")})),this.update()}handleKeyboardInputs(t){switch(t.key){case"ArrowDown":t.preventDefault(),this.highlightNextOption();break;case"ArrowUp":t.preventDefault(),this.highlightPreviousOption();break;case"Enter":this.toggleHighlightedOption();break;case"Escape":this.unHighlightAllOptions(),this.removeAttribute("open")}}highlightNextOption(){const t=this.querySelectorAll('tp-multi-select-option:not([hidden="yes"])');if(!t)return void(this.currentlyHighlightedOption=-1);let e=this.currentlyHighlightedOption+1;for(;e<t.length&&"yes"===t[e].getAttribute("disabled");)e++;e!==t.length&&(-1!==this.currentlyHighlightedOption&&t[this.currentlyHighlightedOption].removeAttribute("highlighted"),t[e].setAttribute("highlighted","yes"),t[e].scrollIntoView({behavior:"smooth",block:"nearest"}),this.currentlyHighlightedOption=e)}highlightPreviousOption(){const t=this.querySelectorAll('tp-multi-select-option:not([hidden="yes"])');if(!t)return void(this.currentlyHighlightedOption=-1);let e=this.currentlyHighlightedOption-1;for(;e>=0&&"yes"===t[e].getAttribute("disabled");)e--;e<0||(0!==this.currentlyHighlightedOption&&t[this.currentlyHighlightedOption].removeAttribute("highlighted"),t[e].setAttribute("highlighted","yes"),t[e].scrollIntoView({behavior:"smooth",block:"nearest"}),this.currentlyHighlightedOption=e)}toggleHighlightedOption(){const t=this.querySelector('tp-multi-select-option[highlighted="yes"]');null==t||t.toggle(null)}unHighlightAllOptions(){this.currentlyHighlightedOption=-1;const t=this.querySelectorAll("tp-multi-select-option");t&&t.forEach((t=>{t.removeAttribute("highlighted")}))}}class e extends HTMLElement{constructor(){super(),this.addEventListener("click",this.toggleOpen.bind(this))}toggleOpen(){const t=this.closest("tp-multi-select");t&&("yes"===t.getAttribute("open")?t.removeAttribute("open"):t.setAttribute("open","yes"))}}class l extends HTMLElement{}class i extends HTMLElement{static get observedAttributes(){return["total","format"]}attributeChangedCallback(t="",e="",l=""){e!==l&&this.update()}update(){var t,e,l,i;const s=null!==(t=this.getAttribute("format"))&&void 0!==t?t:"$total Selected";let n=s.replace("$total",null!==(e=this.getAttribute("total"))&&void 0!==e?e:"");if(s.includes("$value")){const t=this.closest("tp-multi-select");if(t){const e=null!==(l=t.value)&&void 0!==l?l:[];let s="";if(e.length>0){const l=t.querySelector(`tp-multi-select-option[value="${e[0]}"]`);l&&(s=null!==(i=l.getAttribute("label"))&&void 0!==i?i:"")}n=n.replace("$value",s)}}this.innerHTML=n}}class s extends HTMLElement{}class n extends HTMLElement{constructor(){super(),this.addEventListener("click",this.toggle.bind(this))}toggle(t){var e;null==t||t.preventDefault(),null==t||t.stopPropagation();const l=this.closest("tp-multi-select"),i=null!==(e=this.getAttribute("value"))&&void 0!==e?e:"";"yes"!==this.getAttribute("selected")?(null==l||l.select(i),null==l||l.dispatchEvent(new CustomEvent("select",{bubbles:!0,detail:{value:i}}))):(null==l||l.unSelect(i),null==l||l.dispatchEvent(new CustomEvent("unselect",{bubbles:!0,detail:{value:i}}))),null==l||l.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}}class u extends HTMLElement{constructor(){var t;super();const e=this.querySelector("input");e&&(e.addEventListener("keydown",this.handleKeyboardInputs.bind(this)),e.addEventListener("keyup",this.handleSearchChange.bind(this)),e.addEventListener("input",this.handleSearchChange.bind(this)),this.addEventListener("click",this.handleClick.bind(this)),null===(t=this.closest("tp-multi-select"))||void 0===t||t.addEventListener("open",this.focus.bind(this)))}handleKeyboardInputs(t){const e=this.closest("tp-multi-select"),l=this.querySelector("input");if(e&&l)switch(t.key){case"Enter":t.preventDefault();break;case"ArrowDown":e.setAttribute("open","yes");break;case"Backspace":if(0===l.value.length){const t=e.querySelector("tp-multi-select-pill:last-of-type");t&&t.removePill()}}}handleSearchChange(){var t;const e=this.closest("tp-multi-select"),l=this.querySelector("input"),i=null===(t=this.closest("tp-multi-select"))||void 0===t?void 0:t.querySelectorAll("tp-multi-select-option");if(!e||!l||!i)return;let s=0;i.forEach((t=>{var e;(null===(e=t.getAttribute("label"))||void 0===e?void 0:e.toLowerCase().match(new RegExp(`.*${l.value.toLowerCase().replace(/\s/g,".*")}.*`)))?(t.removeAttribute("hidden"),s++):t.setAttribute("hidden","yes")})),""===l.value?l.removeAttribute("style"):(l.style.width=`${l.value.length+2}ch`,e.setAttribute("open","yes")),e.setAttribute("visible-options",s.toString())}handleClick(t){var e;t.preventDefault(),t.stopPropagation(),this.dispatchEvent(new CustomEvent("multi-select-opened")),document.dispatchEvent(new Event("click")),null===(e=this.closest("tp-multi-select"))||void 0===e||e.setAttribute("open","yes")}clear(){const t=this.querySelector("input");t&&(t.value="",t.dispatchEvent(new Event("change")))}focus(){var t;this.handleSearchChange(),null===(t=this.querySelector("input"))||void 0===t||t.focus()}}class o extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleButtonClick.bind(this))}handleButtonClick(t){null==t||t.preventDefault(),null==t||t.stopPropagation(),this.removePill()}removePill(){var t;const e=this.closest("tp-multi-select");e&&this.getAttribute("value")&&(e.unSelect(null!==(t=this.getAttribute("value"))&&void 0!==t?t:""),e.dispatchEvent(new CustomEvent("unselect",{bubbles:!0})),e.dispatchEvent(new CustomEvent("change",{bubbles:!0})))}}class r extends HTMLElement{constructor(){var t,e,l;super(),null===(t=this.closest("tp-multi-select"))||void 0===t||t.addEventListener("change",this.update.bind(this)),null===(l=null===(e=this.closest("tp-multi-select"))||void 0===e?void 0:e.querySelector("select"))||void 0===l||l.addEventListener("change",(()=>this.update())),this.update()}update(){var t;const e=this.closest("tp-multi-select");if(!e)return;const l=this.querySelectorAll("tp-multi-select-pill"),i=null!==(t=e.value)&&void 0!==t?t:[],s=[];l.forEach((t=>{var e;const l=null!==(e=t.getAttribute("value"))&&void 0!==e?e:"";""!==l&&(s.push(l),i.includes(l)||t.remove())})),i.filter((t=>!s.includes(t))).forEach((t=>{var l;if(""===t)return;const i=e.querySelector(`tp-multi-select-option[value="${t}"]`);i&&this.appendChild(this.createPill(t,null!==(l=i.getAttribute("label"))&&void 0!==l?l:""))}))}createPill(t,e){const l=document.createElement("tp-multi-select-pill");l.setAttribute("value",t);const i=document.createElement("span");i.textContent=e;const s=document.createElement("button");return s.setAttribute("type","button"),s.textContent="x",s.addEventListener("click",(()=>{l.removePill()})),l.appendChild(i),l.appendChild(s),l}}class c extends HTMLElement{constructor(){var t;super(),null===(t=this.closest("tp-multi-select"))||void 0===t||t.addEventListener("change",this.handleValueChanged.bind(this)),this.addEventListener("click",this.toggleSelectAll.bind(this))}handleValueChanged(){var t,e;const l=this.closest("tp-multi-select"),i=null==l?void 0:l.querySelectorAll("tp-multi-select-option");l&&i&&(Array.from(i).filter((t=>"yes"!==t.getAttribute("disabled"))).length===l.value.length?(this.setAttribute("selected","yes"),this.innerHTML=null!==(t=this.getAttribute("unselect-text"))&&void 0!==t?t:""):(this.removeAttribute("selected"),this.innerHTML=null!==(e=this.getAttribute("select-text"))&&void 0!==e?e:""))}toggleSelectAll(){const t=this.closest("tp-multi-select");t&&("yes"!==this.getAttribute("selected")?(t.selectAll(),t.dispatchEvent(new CustomEvent("select-all",{bubbles:!0}))):(t.unSelectAll(),t.dispatchEvent(new CustomEvent("unselect-all",{bubbles:!0}))),t.dispatchEvent(new CustomEvent("change",{bubbles:!0})))}}customElements.define("tp-multi-select",t),customElements.define("tp-multi-select-field",e),customElements.define("tp-multi-select-placeholder",l),customElements.define("tp-multi-select-status",i),customElements.define("tp-multi-select-options",s),customElements.define("tp-multi-select-option",n),customElements.define("tp-multi-select-search",u),customElements.define("tp-multi-select-pill",o),customElements.define("tp-multi-select-pills",r),customElements.define("tp-multi-select-select-all",c)})();
|
|
1
|
+
(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.currentlyHighlightedOption=-1,this.keyboardEventListener=this.handleKeyboardInputs.bind(this),document.addEventListener("click",this.handleDocumentClick.bind(this)),this.addEventListener("change",this.update.bind(this));const t=this.querySelector("tp-multi-select-options");t&&new MutationObserver(this.initialize.bind(this)).observe(t,{childList:!0,subtree:!0}),this.initialize()}static get observedAttributes(){return["open"]}attributeChangedCallback(t="",e="",l=""){e!==l&&"open"===t&&("yes"===l?(document.addEventListener("keydown",this.keyboardEventListener),this.dispatchEvent(new CustomEvent("open",{bubbles:!0}))):(this.unHighlightAllOptions(),document.removeEventListener("keydown",this.keyboardEventListener),this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))))}set value(t){if(!t||!Array.isArray(t))return;const e=this.querySelectorAll("tp-multi-select-option");null==e||e.forEach((e=>{var l;t.includes(null!==(l=e.getAttribute("value"))&&void 0!==l?l:"")?e.setAttribute("selected","yes"):e.removeAttribute("selected")})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}get value(){const t=[],e=this.querySelectorAll("select option[selected]");return null==e||e.forEach((e=>{const l=e.getAttribute("value");l&&t.push(l)})),t}updateFormFieldValue(){const t=this.querySelectorAll("tp-multi-select-option"),e=this.querySelector("select");if(!t||!e)return;const l=Array.from(e.options);t.forEach((t=>{var i,s;const n=null!==(i=t.getAttribute("value"))&&void 0!==i?i:"";if(n){const i=l.find((t=>t.value===n));if("yes"===t.getAttribute("selected"))if(i)i.setAttribute("selected","selected");else{const l=document.createElement("option");l.setAttribute("value",null!==(s=t.getAttribute("value"))&&void 0!==s?s:""),l.setAttribute("selected","selected"),null==e||e.append(l)}else null==i||i.remove()}})),e.dispatchEvent(new Event("change"))}update(){this.updateFormFieldValue();const t=this.value;0!==t.length?this.setAttribute("selected","yes"):this.removeAttribute("selected");const e=this.querySelector("tp-multi-select-status");e&&(t.length>0?e.setAttribute("total",t.length.toString()):e.removeAttribute("total"))}handleDocumentClick(t){this===t.target||this.contains(t.target)||this.removeAttribute("open")}initialize(){var t;let e=this.querySelector("select");if(e)e.innerHTML="";else{e=document.createElement("select"),e.setAttribute("name",null!==(t=this.getAttribute("name"))&&void 0!==t?t:"");const l=this.getAttribute("form");l&&e.setAttribute("form",l),"no"!==this.getAttribute("multiple")&&e.setAttribute("multiple","multiple"),this.append(e)}this.update()}select(t=""){if("no"===this.getAttribute("multiple")&&(this.unSelectAll(),""===t))return void("yes"===this.getAttribute("close-on-select")&&this.removeAttribute("open"));const e=this.querySelectorAll(`tp-multi-select-option[value="${t}"]`);null==e||e.forEach((t=>{"yes"!==t.getAttribute("disabled")&&t.setAttribute("selected","yes")}));const l=this.querySelector("tp-multi-select-search");null==l||l.clear(),null==l||l.focus(),"yes"===this.getAttribute("close-on-select")&&this.removeAttribute("open"),this.update()}selectAll(){const t=this.querySelectorAll("tp-multi-select-option");null==t||t.forEach((t=>{"yes"!==t.getAttribute("disabled")&&t.setAttribute("selected","yes")})),this.update()}unSelect(t=""){const e=this.querySelectorAll(`tp-multi-select-option[value="${t}"]`);null==e||e.forEach((t=>{t.removeAttribute("selected")})),this.update()}unSelectAll(){const t=this.querySelectorAll("tp-multi-select-option");null==t||t.forEach((t=>{t.removeAttribute("selected")})),this.update()}handleKeyboardInputs(t){switch(t.key){case"ArrowDown":t.preventDefault(),this.highlightNextOption();break;case"ArrowUp":t.preventDefault(),this.highlightPreviousOption();break;case"Enter":this.toggleHighlightedOption();break;case"Escape":this.unHighlightAllOptions(),this.removeAttribute("open")}}highlightNextOption(){const t=this.querySelectorAll('tp-multi-select-option:not([hidden="yes"])');if(!t)return void(this.currentlyHighlightedOption=-1);let e=this.currentlyHighlightedOption+1;for(;e<t.length&&"yes"===t[e].getAttribute("disabled");)e++;e!==t.length&&(-1!==this.currentlyHighlightedOption&&t[this.currentlyHighlightedOption].removeAttribute("highlighted"),t[e].setAttribute("highlighted","yes"),t[e].scrollIntoView({behavior:"smooth",block:"nearest"}),this.currentlyHighlightedOption=e)}highlightPreviousOption(){const t=this.querySelectorAll('tp-multi-select-option:not([hidden="yes"])');if(!t)return void(this.currentlyHighlightedOption=-1);let e=this.currentlyHighlightedOption-1;for(;e>=0&&"yes"===t[e].getAttribute("disabled");)e--;e<0||(0!==this.currentlyHighlightedOption&&t[this.currentlyHighlightedOption].removeAttribute("highlighted"),t[e].setAttribute("highlighted","yes"),t[e].scrollIntoView({behavior:"smooth",block:"nearest"}),this.currentlyHighlightedOption=e)}toggleHighlightedOption(){const t=this.querySelector('tp-multi-select-option[highlighted="yes"]');null==t||t.toggle(null)}unHighlightAllOptions(){this.currentlyHighlightedOption=-1;const t=this.querySelectorAll("tp-multi-select-option");t&&t.forEach((t=>{t.removeAttribute("highlighted")}))}}class e extends HTMLElement{constructor(){super(),this.addEventListener("click",this.toggleOpen.bind(this))}toggleOpen(){const t=this.closest("tp-multi-select");t&&("yes"===t.getAttribute("open")?t.removeAttribute("open"):t.setAttribute("open","yes"))}}class l extends HTMLElement{}class i extends HTMLElement{static get observedAttributes(){return["total","format"]}attributeChangedCallback(t="",e="",l=""){e!==l&&this.update()}update(){var t,e,l,i;const s=null!==(t=this.getAttribute("format"))&&void 0!==t?t:"$total Selected";let n=s.replace("$total",null!==(e=this.getAttribute("total"))&&void 0!==e?e:"");if(s.includes("$value")){const t=this.closest("tp-multi-select");if(t){const e=null!==(l=t.value)&&void 0!==l?l:[];let s="";if(e.length>0){const l=t.querySelector(`tp-multi-select-option[value="${e[0]}"]`);l&&(s=null!==(i=l.getAttribute("label"))&&void 0!==i?i:"")}n=n.replace("$value",s)}}this.innerHTML=n}}class s extends HTMLElement{}class n extends HTMLElement{constructor(){super(),this.addEventListener("click",this.toggle.bind(this))}toggle(t){var e;null==t||t.preventDefault(),null==t||t.stopPropagation();const l=this.closest("tp-multi-select"),i=null!==(e=this.getAttribute("value"))&&void 0!==e?e:"";"yes"!==this.getAttribute("selected")?(null==l||l.select(i),null==l||l.dispatchEvent(new CustomEvent("select",{bubbles:!0,detail:{value:i}}))):(null==l||l.unSelect(i),null==l||l.dispatchEvent(new CustomEvent("unselect",{bubbles:!0,detail:{value:i}}))),null==l||l.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}}class u extends HTMLElement{constructor(){var t;super();const e=this.querySelector("input");e&&(e.addEventListener("keydown",this.handleKeyboardInputs.bind(this)),e.addEventListener("keyup",this.handleSearchChange.bind(this)),e.addEventListener("input",this.handleSearchChange.bind(this)),this.addEventListener("click",this.handleClick.bind(this)),null===(t=this.closest("tp-multi-select"))||void 0===t||t.addEventListener("open",this.focus.bind(this)))}handleKeyboardInputs(t){const e=this.closest("tp-multi-select"),l=this.querySelector("input");if(e&&l)switch(t.key){case"Enter":t.preventDefault();break;case"ArrowDown":e.setAttribute("open","yes");break;case"Backspace":if(0===l.value.length){const t=e.querySelector("tp-multi-select-pill:last-of-type");t&&t.removePill()}}}handleSearchChange(){var t;const e=this.closest("tp-multi-select"),l=this.querySelector("input"),i=null===(t=this.closest("tp-multi-select"))||void 0===t?void 0:t.querySelectorAll("tp-multi-select-option");if(!e||!l||!i)return;let s=0;i.forEach((t=>{var e;(null===(e=t.getAttribute("label"))||void 0===e?void 0:e.toLowerCase().match(new RegExp(`.*${l.value.toLowerCase().replace(/\s/g,".*")}.*`)))?(t.removeAttribute("hidden"),s++):t.setAttribute("hidden","yes")})),""===l.value?l.removeAttribute("style"):(l.style.width=`${l.value.length+2}ch`,e.setAttribute("open","yes")),e.setAttribute("visible-options",s.toString())}handleClick(t){var e;t.preventDefault(),t.stopPropagation(),this.dispatchEvent(new CustomEvent("multi-select-opened")),document.dispatchEvent(new Event("click")),null===(e=this.closest("tp-multi-select"))||void 0===e||e.setAttribute("open","yes")}clear(){const t=this.querySelector("input");t&&(t.value="",t.dispatchEvent(new Event("change")))}focus(){var t;this.handleSearchChange(),null===(t=this.querySelector("input"))||void 0===t||t.focus()}}class o extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleButtonClick.bind(this))}handleButtonClick(t){null==t||t.preventDefault(),null==t||t.stopPropagation(),this.removePill()}removePill(){var t;const e=this.closest("tp-multi-select");e&&this.getAttribute("value")&&(e.unSelect(null!==(t=this.getAttribute("value"))&&void 0!==t?t:""),e.dispatchEvent(new CustomEvent("unselect",{bubbles:!0})),e.dispatchEvent(new CustomEvent("change",{bubbles:!0})))}}class r extends HTMLElement{constructor(){var t,e,l;super(),null===(t=this.closest("tp-multi-select"))||void 0===t||t.addEventListener("change",this.update.bind(this)),null===(l=null===(e=this.closest("tp-multi-select"))||void 0===e?void 0:e.querySelector("select"))||void 0===l||l.addEventListener("change",(()=>this.update())),this.update()}update(){var t;const e=this.closest("tp-multi-select");if(!e)return;const l=this.querySelectorAll("tp-multi-select-pill"),i=null!==(t=e.value)&&void 0!==t?t:[],s=[];l.forEach((t=>{var e;const l=null!==(e=t.getAttribute("value"))&&void 0!==e?e:"";""!==l&&(s.push(l),i.includes(l)||t.remove())})),i.filter((t=>!s.includes(t))).forEach((t=>{var l;if(""===t)return;const i=e.querySelector(`tp-multi-select-option[value="${t}"]`);i&&this.appendChild(this.createPill(t,null!==(l=i.getAttribute("label"))&&void 0!==l?l:""))}))}createPill(t,e){const l=document.createElement("tp-multi-select-pill");l.setAttribute("value",t);const i=document.createElement("span");i.textContent=e;const s=document.createElement("button");return s.setAttribute("type","button"),s.textContent="x",s.addEventListener("click",(()=>{l.removePill()})),l.appendChild(i),l.appendChild(s),l}}class c extends HTMLElement{constructor(){var t;super(),null===(t=this.closest("tp-multi-select"))||void 0===t||t.addEventListener("change",this.handleValueChanged.bind(this)),this.addEventListener("click",this.toggleSelectAll.bind(this))}handleValueChanged(){var t,e;const l=this.closest("tp-multi-select"),i=null==l?void 0:l.querySelectorAll("tp-multi-select-option");l&&i&&(Array.from(i).filter((t=>"yes"!==t.getAttribute("disabled"))).length===l.value.length?(this.setAttribute("selected","yes"),this.innerHTML=null!==(t=this.getAttribute("unselect-text"))&&void 0!==t?t:""):(this.removeAttribute("selected"),this.innerHTML=null!==(e=this.getAttribute("select-text"))&&void 0!==e?e:""))}toggleSelectAll(){const t=this.closest("tp-multi-select");t&&("yes"!==this.getAttribute("selected")?(t.selectAll(),t.dispatchEvent(new CustomEvent("select-all",{bubbles:!0}))):(t.unSelectAll(),t.dispatchEvent(new CustomEvent("unselect-all",{bubbles:!0}))),t.dispatchEvent(new CustomEvent("change",{bubbles:!0})))}}customElements.define("tp-multi-select",t),customElements.define("tp-multi-select-field",e),customElements.define("tp-multi-select-placeholder",l),customElements.define("tp-multi-select-status",i),customElements.define("tp-multi-select-options",s),customElements.define("tp-multi-select-option",n),customElements.define("tp-multi-select-search",u),customElements.define("tp-multi-select-pill",o),customElements.define("tp-multi-select-pills",r),customElements.define("tp-multi-select-select-all",c)})();
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dist/multi-select/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/multi-select/tp-multi-select.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-field.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-placeholder.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-status.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-options.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-option.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-search.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-pill.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-pills.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-select-all.ts","webpack://@travelopia/web-components/./src/multi-select/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\nimport { TPMultiSelectStatusElement } from './tp-multi-select-status';\nimport { TPMultiSelectOptionsElement } from './tp-multi-select-options';\nimport { TPMultiSelectSearchElement } from './tp-multi-select-search';\n\n/**\n * TP Multi Select.\n */\nexport class TPMultiSelectElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tcurrentlyHighlightedOption: number = -1;\n\tprotected keyboardEventListener: EventListener;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.keyboardEventListener = this.handleKeyboardInputs.bind( this ) as EventListener;\n\t\tdocument.addEventListener( 'click', this.handleDocumentClick.bind( this ) );\n\t\tthis.addEventListener( 'change', this.update.bind( this ) );\n\n\t\t// Listen for dynamic changes to the option values.\n\t\tconst options: TPMultiSelectOptionsElement | null = this.querySelector( 'tp-multi-select-options' );\n\t\tif ( options ) {\n\t\t\tconst mutationObserver: MutationObserver = new MutationObserver( this.initialize.bind( this ) );\n\t\t\tmutationObserver.observe( options, { childList: true, subtree: true } );\n\t\t}\n\n\t\t// Initialize component.\n\t\tthis.initialize();\n\t}\n\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} List of observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'open' ];\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t *\n\t * @param {string} name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t */\n\tattributeChangedCallback( name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( oldValue === newValue ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'open' === name ) {\n\t\t\tif ( 'yes' === newValue ) {\n\t\t\t\tdocument.addEventListener( 'keydown', this.keyboardEventListener );\n\t\t\t\tthis.dispatchEvent( new CustomEvent( 'open', { bubbles: true } ) );\n\t\t\t} else {\n\t\t\t\tthis.unHighlightAllOptions();\n\t\t\t\tdocument.removeEventListener( 'keydown', this.keyboardEventListener );\n\t\t\t\tthis.dispatchEvent( new CustomEvent( 'close', { bubbles: true } ) );\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Set the value of this component.\n\t *\n\t * @param {Array} value Value.\n\t */\n\tset value( value: string[] ) {\n\t\tif ( ! value || ! Array.isArray( value ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst styledOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tstyledOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tif ( value.includes( option.getAttribute( 'value' ) ?? '' ) ) {\n\t\t\t\toption.setAttribute( 'selected', 'yes' );\n\t\t\t} else {\n\t\t\t\toption.removeAttribute( 'selected' );\n\t\t\t}\n\t\t} );\n\n\t\tthis.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t}\n\n\t/**\n\t * Get the value of this component.\n\t *\n\t * @return {Array} Value of this component.\n\t */\n\tget value(): string[] {\n\t\tconst value: string[] = [];\n\n\t\tconst selectedOptions: NodeListOf<HTMLOptionElement> | null = this.querySelectorAll( 'select option[selected]' );\n\t\tselectedOptions?.forEach( ( option: HTMLOptionElement ) => {\n\t\t\tconst optionValue = option.getAttribute( 'value' );\n\t\t\tif ( optionValue ) {\n\t\t\t\tvalue.push( optionValue );\n\t\t\t}\n\t\t} );\n\t\treturn value;\n\t}\n\n\t/**\n\t * Update the value of the select field.\n\t */\n\tprotected updateFormFieldValue(): void {\n\t\t// Get options.\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( `tp-multi-select-option` );\n\t\tconst selectField: HTMLSelectElement | null = this.querySelector( 'select' );\n\n\t\tif ( ! styledSelectedOptions || ! selectField ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst selectOptions: HTMLOptionElement[] = Array.from( selectField.options );\n\n\t\t// Traverse options.\n\t\tstyledSelectedOptions.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tconst optionValue = option.getAttribute( 'value' ) ?? '';\n\t\t\tif ( optionValue ) {\n\t\t\t\tconst matchingSelectOption: HTMLOptionElement | undefined = selectOptions.find( ( selectOption ) => selectOption.value === optionValue );\n\n\t\t\t\tif ( 'yes' === option.getAttribute( 'selected' ) ) {\n\t\t\t\t\tif ( matchingSelectOption ) {\n\t\t\t\t\t\tmatchingSelectOption.setAttribute( 'selected', 'selected' );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tconst newOption: HTMLOptionElement = document.createElement( 'option' );\n\t\t\t\t\t\tnewOption.setAttribute( 'value', option.getAttribute( 'value' ) ?? '' );\n\t\t\t\t\t\tnewOption.setAttribute( 'selected', 'selected' );\n\t\t\t\t\t\tselectField?.append( newOption );\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tmatchingSelectOption?.remove();\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\n\t\t// Dispatch events.\n\t\tselectField.dispatchEvent( new Event( 'change' ) );\n\t}\n\n\t/**\n\t * Update component and sub-components.\n\t */\n\tupdate(): void {\n\t\t// First, update field value.\n\t\tthis.updateFormFieldValue();\n\n\t\t// Get value.\n\t\tconst value: string[] = this.value;\n\n\t\t// Toggle selected attribute.\n\t\tif ( 0 !== value.length ) {\n\t\t\tthis.setAttribute( 'selected', 'yes' );\n\t\t} else {\n\t\t\tthis.removeAttribute( 'selected' );\n\t\t}\n\n\t\t// Update status.\n\t\tconst status: TPMultiSelectStatusElement | null = this.querySelector( 'tp-multi-select-status' );\n\t\tif ( status ) {\n\t\t\tif ( value.length > 0 ) {\n\t\t\t\tstatus.setAttribute( 'total', value.length.toString() );\n\t\t\t} else {\n\t\t\t\tstatus.removeAttribute( 'total' );\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Handle clicking the document.\n\t *\n\t * @param {Event} e Event.\n\t */\n\tprotected handleDocumentClick( e: Event ): void {\n\t\tif ( this !== e.target && ! this.contains( e.target as Node ) ) {\n\t\t\tthis.removeAttribute( 'open' );\n\t\t}\n\t}\n\n\t/**\n\t * Initialize component.\n\t */\n\tinitialize(): void {\n\t\t// Create select element (if it doesn't already exist).\n\t\tlet selectElement: HTMLSelectElement | null = this.querySelector( 'select' );\n\t\tif ( ! selectElement ) {\n\t\t\tselectElement = document.createElement( 'select' );\n\t\t\tselectElement.setAttribute( 'name', this.getAttribute( 'name' ) ?? '' );\n\t\t\tselectElement.setAttribute( 'form', this.getAttribute( 'form' ) ?? '' );\n\n\t\t\tconst formReference = this.getAttribute( 'form' );\n\n\t\t\tif ( formReference ) {\n\t\t\t\tselectElement.setAttribute( 'form', formReference );\n\t\t\t}\n\n\t\t\tif ( 'no' !== this.getAttribute( 'multiple' ) ) {\n\t\t\t\tselectElement.setAttribute( 'multiple', 'multiple' );\n\t\t\t}\n\n\t\t\tthis.append( selectElement );\n\t\t} else {\n\t\t\tselectElement.innerHTML = '';\n\t\t}\n\n\t\t// Update components for selected options.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Select a value.\n\t *\n\t * @param {string} value Value to select.\n\t */\n\tselect( value: string = '' ): void {\n\t\t// Stuff for single-select.\n\t\tif ( 'no' === this.getAttribute( 'multiple' ) ) {\n\t\t\t// First, unselect everything.\n\t\t\tthis.unSelectAll();\n\n\t\t\t// If the value is blank, don't do anything else.\n\t\t\tif ( '' === value ) {\n\t\t\t\tif ( 'yes' === this.getAttribute( 'close-on-select' ) ) {\n\t\t\t\t\tthis.removeAttribute( 'open' );\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\t// Select all options.\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( `tp-multi-select-option[value=\"${ value }\"]` );\n\t\tstyledSelectedOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tif ( 'yes' !== option.getAttribute( 'disabled' ) ) {\n\t\t\t\toption.setAttribute( 'selected', 'yes' );\n\t\t\t}\n\t\t} );\n\n\t\t// Search stuff.\n\t\tconst search: TPMultiSelectSearchElement | null = this.querySelector( 'tp-multi-select-search' );\n\t\tsearch?.clear();\n\t\tsearch?.focus();\n\n\t\t// Close the field, if applicable.\n\t\tif ( 'yes' === this.getAttribute( 'close-on-select' ) ) {\n\t\t\tthis.removeAttribute( 'open' );\n\t\t}\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Select all values.\n\t */\n\tselectAll(): void {\n\t\tconst styledOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tstyledOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tif ( 'yes' !== option.getAttribute( 'disabled' ) ) {\n\t\t\t\toption.setAttribute( 'selected', 'yes' );\n\t\t\t}\n\t\t} );\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Un-select a value.\n\t *\n\t * @param {string} value Value to unselect.\n\t */\n\tunSelect( value: string = '' ): void {\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( `tp-multi-select-option[value=\"${ value }\"]` );\n\t\tstyledSelectedOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\toption.removeAttribute( 'selected' );\n\t\t} );\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Un-select all values.\n\t */\n\tunSelectAll(): void {\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tstyledSelectedOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\toption.removeAttribute( 'selected' );\n\t\t} );\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Handle keyboard inputs.\n\t *\n\t * @param {Event} e Keyboard event.\n\t */\n\thandleKeyboardInputs( e: KeyboardEvent ): void {\n\t\tswitch ( e.key ) {\n\t\t\tcase 'ArrowDown':\n\t\t\t\te.preventDefault();\n\t\t\t\tthis.highlightNextOption();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowUp':\n\t\t\t\te.preventDefault();\n\t\t\t\tthis.highlightPreviousOption();\n\t\t\t\tbreak;\n\t\t\tcase 'Enter':\n\t\t\t\tthis.toggleHighlightedOption();\n\t\t\t\tbreak;\n\t\t\tcase 'Escape':\n\t\t\t\tthis.unHighlightAllOptions();\n\t\t\t\tthis.removeAttribute( 'open' );\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t/**\n\t * Highlight the next option.\n\t */\n\thighlightNextOption(): void {\n\t\t// Get options.\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option:not([hidden=\"yes\"])' );\n\t\tif ( ! options ) {\n\t\t\tthis.currentlyHighlightedOption = -1;\n\t\t\treturn;\n\t\t}\n\n\t\t// Find the next option to be highlighted. Assume next option is the favorable option.\n\t\tlet nextToBeHighlighted = this.currentlyHighlightedOption + 1;\n\n\t\t// Keep iterating to skip over disabled options until we find a suitable option.\n\t\twhile ( nextToBeHighlighted < options.length && options[ nextToBeHighlighted ].getAttribute( 'disabled' ) === 'yes' ) {\n\t\t\tnextToBeHighlighted++;\n\t\t}\n\n\t\t// If there are no more options to highlight, exit. Here, the last highlighted option keeps highlighted.\n\t\tif ( nextToBeHighlighted === options.length ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Remove highlight from the current option, if any.\n\t\tif ( this.currentlyHighlightedOption !== -1 ) {\n\t\t\toptions[ this.currentlyHighlightedOption ].removeAttribute( 'highlighted' );\n\t\t}\n\n\t\t// Highlight the found option.\n\t\toptions[ nextToBeHighlighted ].setAttribute( 'highlighted', 'yes' );\n\n\t\t// Scroll the highlighted option into view with smooth behavior.\n\t\toptions[ nextToBeHighlighted ].scrollIntoView( { behavior: 'smooth', block: 'nearest' } );\n\n\t\t// Update the currentlyHighlightedOption for the next iteration.\n\t\tthis.currentlyHighlightedOption = nextToBeHighlighted;\n\t}\n\n\t/**\n\t * Highlight previous option.\n\t */\n\thighlightPreviousOption(): void {\n\t\t// Get options.\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option:not([hidden=\"yes\"])' );\n\t\tif ( ! options ) {\n\t\t\tthis.currentlyHighlightedOption = -1;\n\t\t\treturn;\n\t\t}\n\n\t\t// Find the previous option to be highlighted. Assume previous option is the favorable option.\n\t\tlet previousToBeHighlighted = this.currentlyHighlightedOption - 1;\n\n\t\t// Keep iterating to skip over disabled options until we find a suitable option.\n\t\twhile ( previousToBeHighlighted >= 0 && options[ previousToBeHighlighted ].getAttribute( 'disabled' ) === 'yes' ) {\n\t\t\tpreviousToBeHighlighted--;\n\t\t}\n\n\t\t// If there are no more options to highlight, exit.\n\t\tif ( previousToBeHighlighted < 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Remove highlight from the current option, if any.\n\t\tif ( this.currentlyHighlightedOption !== 0 ) {\n\t\t\toptions[ this.currentlyHighlightedOption ].removeAttribute( 'highlighted' );\n\t\t}\n\n\t\t// Highlight the found option.\n\t\toptions[ previousToBeHighlighted ].setAttribute( 'highlighted', 'yes' );\n\n\t\t// Scroll the highlighted option into view with smooth behavior.\n\t\toptions[ previousToBeHighlighted ].scrollIntoView( { behavior: 'smooth', block: 'nearest' } );\n\n\t\t// Update the currentlyHighlightedOption for the next iteration.\n\t\tthis.currentlyHighlightedOption = previousToBeHighlighted;\n\t}\n\n\t/**\n\t * Toggle highlighted option.\n\t */\n\ttoggleHighlightedOption(): void {\n\t\tconst option: TPMultiSelectOptionElement | null = this.querySelector( `tp-multi-select-option[highlighted=\"yes\"]` );\n\t\toption?.toggle( null );\n\t}\n\n\t/**\n\t * Un-highlight all options.\n\t */\n\tunHighlightAllOptions(): void {\n\t\tthis.currentlyHighlightedOption = -1;\n\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tif ( options ) {\n\t\t\toptions.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\t\toption.removeAttribute( 'highlighted' );\n\t\t\t} );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\n\n/**\n * TP Multi Select Field.\n */\nexport class TPMultiSelectFieldElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener( 'click', this.toggleOpen.bind( this ) );\n\t}\n\n\t/**\n\t * Toggle opening this component.\n\t */\n\ttoggleOpen(): void {\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tif ( ! multiSelect ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'yes' === multiSelect.getAttribute( 'open' ) ) {\n\t\t\tmultiSelect.removeAttribute( 'open' );\n\t\t} else {\n\t\t\tmultiSelect.setAttribute( 'open', 'yes' );\n\t\t}\n\t}\n}\n","/**\n * TP Multi Select Placeholder.\n */\nexport class TPMultiSelectPlaceholderElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\n\n/**\n * TP Multi Select Status.\n */\nexport class TPMultiSelectStatusElement extends HTMLElement {\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} List of observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'total', 'format' ];\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t *\n\t * @param {string} _name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t */\n\tattributeChangedCallback( _name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( oldValue !== newValue ) {\n\t\t\tthis.update();\n\t\t}\n\t}\n\n\t/**\n\t * Update this component.\n\t */\n\tupdate(): void {\n\t\tconst format: string = this.getAttribute( 'format' ) ?? '$total Selected';\n\t\tlet html: string = format.replace( '$total', this.getAttribute( 'total' ) ?? '' );\n\n\t\tif ( format.includes( '$value' ) ) {\n\t\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\t\tif ( multiSelect ) {\n\t\t\t\tconst value: string[] = multiSelect.value ?? [];\n\t\t\t\tlet replace: string = '';\n\n\t\t\t\tif ( value.length > 0 ) {\n\t\t\t\t\tconst option: TPMultiSelectOptionElement | null = multiSelect.querySelector( `tp-multi-select-option[value=\"${ value[ 0 ] }\"]` );\n\t\t\t\t\tif ( option ) {\n\t\t\t\t\t\treplace = option.getAttribute( 'label' ) ?? '';\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\thtml = html.replace( '$value', replace );\n\t\t\t}\n\t\t}\n\n\t\tthis.innerHTML = html;\n\t}\n}\n","/**\n * TP Multi Select Options.\n */\nexport class TPMultiSelectOptionsElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\n\n/**\n * TP Multi Select Option.\n */\nexport class TPMultiSelectOptionElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener( 'click', this.toggle.bind( this ) );\n\t}\n\n\t/**\n\t * Select / un-select this option.\n\t *\n\t * @param {Event} e Click event.\n\t */\n\ttoggle( e: Event | null ): void {\n\t\te?.preventDefault();\n\t\te?.stopPropagation();\n\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tconst value: string = this.getAttribute( 'value' ) ?? '';\n\n\t\tif ( 'yes' !== this.getAttribute( 'selected' ) ) {\n\t\t\tmultiSelect?.select( value );\n\t\t\tmultiSelect?.dispatchEvent( new CustomEvent( 'select', {\n\t\t\t\tbubbles: true,\n\t\t\t\tdetail: { value },\n\t\t\t} ) );\n\t\t} else {\n\t\t\tmultiSelect?.unSelect( value );\n\t\t\tmultiSelect?.dispatchEvent( new CustomEvent( 'unselect', {\n\t\t\t\tbubbles: true,\n\t\t\t\tdetail: { value },\n\t\t\t} ) );\n\t\t}\n\t\tmultiSelect?.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\nimport { TPMultiSelectPillElement } from './tp-multi-select-pill';\n\n/**\n * TP Multi Select Search.\n */\nexport class TPMultiSelectSearchElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\tconst input: HTMLInputElement | null = this.querySelector( 'input' );\n\t\tif ( ! input ) {\n\t\t\treturn;\n\t\t}\n\n\t\tinput.addEventListener( 'keydown', this.handleKeyboardInputs.bind( this ) );\n\t\tinput.addEventListener( 'keyup', this.handleSearchChange.bind( this ) );\n\t\tinput.addEventListener( 'input', this.handleSearchChange.bind( this ) );\n\t\tthis.addEventListener( 'click', this.handleClick.bind( this ) );\n\t\tthis.closest( 'tp-multi-select' )?.addEventListener( 'open', this.focus.bind( this ) );\n\t}\n\n\t/**\n\t * Handle keyboard inputs.\n\t *\n\t * @param {Event} e Keyboard event.\n\t */\n\thandleKeyboardInputs( e: KeyboardEvent ): void {\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tconst search: HTMLInputElement | null = this.querySelector( 'input' );\n\t\tif ( ! multiSelect || ! search ) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( e.key ) {\n\t\t\tcase 'Enter':\n\t\t\t\te.preventDefault(); // Prevent inadvertent form submits.\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\t\tmultiSelect.setAttribute( 'open', 'yes' );\n\t\t\t\tbreak;\n\t\t\tcase 'Backspace':\n\t\t\t\tif ( 0 === search.value.length ) {\n\t\t\t\t\tconst pill: TPMultiSelectPillElement | null = multiSelect.querySelector( 'tp-multi-select-pill:last-of-type' );\n\t\t\t\t\tif ( pill ) {\n\t\t\t\t\t\tpill.removePill();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t/**\n\t * Handle search field value changed.\n\t */\n\tprotected handleSearchChange(): void {\n\t\t// Get search field and options.\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tconst search: HTMLInputElement | null = this.querySelector( 'input' );\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> | undefined = this.closest( 'tp-multi-select' )?.querySelectorAll( 'tp-multi-select-option' );\n\t\tif ( ! multiSelect || ! search || ! options ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet matchedOptionCount = 0;\n\t\t// Hide and show options based on search.\n\t\toptions.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tif ( option.getAttribute( 'label' )?.toLowerCase().match( new RegExp( `.*${ search.value.toLowerCase().replace( /\\s/g, '.*' ) }.*` ) ) ) {\n\t\t\t\toption.removeAttribute( 'hidden' );\n\t\t\t\tmatchedOptionCount++;\n\t\t\t} else {\n\t\t\t\toption.setAttribute( 'hidden', 'yes' );\n\t\t\t}\n\t\t} );\n\n\t\t// Resize input width.\n\t\tif ( '' === search.value ) {\n\t\t\tsearch.removeAttribute( 'style' );\n\t\t} else {\n\t\t\tsearch.style.width = `${ search.value.length + 2 }ch`;\n\t\t\tmultiSelect.setAttribute( 'open', 'yes' );\n\t\t}\n\n\t\tmultiSelect.setAttribute( 'visible-options', matchedOptionCount.toString() );\n\t}\n\n\t/**\n\t * Handle click.\n\t *\n\t * @param {Event} e Click event.\n\t */\n\tprotected handleClick( e: Event ): void {\n\t\t// First, prevent propagation to avoid document.click set on `tp-multi-select`.\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\n\t\t// Now send the event so other stuff can work as per normal, and another event for good measure.\n\t\tthis.dispatchEvent( new CustomEvent( 'multi-select-opened' ) );\n\t\tdocument.dispatchEvent( new Event( 'click' ) );\n\n\t\t// Open multi select.\n\t\tthis.closest( 'tp-multi-select' )?.setAttribute( 'open', 'yes' );\n\t}\n\n\t/**\n\t * Clear the search field.\n\t */\n\tclear(): void {\n\t\tconst search: HTMLInputElement | null = this.querySelector( 'input' );\n\t\tif ( search ) {\n\t\t\tsearch.value = '';\n\t\t\tsearch.dispatchEvent( new Event( 'change' ) );\n\t\t}\n\t}\n\n\t/**\n\t * Set focus on the search field.\n\t */\n\tfocus(): void {\n\t\t// When it's focused, use search change to ensure the results are refreshed.\n\t\tthis.handleSearchChange();\n\n\t\t// Focus on input.\n\t\tthis.querySelector( 'input' )?.focus();\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\n\n/**\n * TP Multi Select Pill.\n */\nexport class TPMultiSelectPillElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.handleButtonClick.bind( this ) );\n\t}\n\n\t/**\n\t * Handle button click.\n\t *\n\t * @param {Event} e Click event.\n\t */\n\thandleButtonClick( e: Event | null ): void {\n\t\te?.preventDefault();\n\t\te?.stopPropagation();\n\t\tthis.removePill();\n\t}\n\n\t/**\n\t * Remove this pill.\n\t */\n\tremovePill(): void {\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tif ( multiSelect && this.getAttribute( 'value' ) ) {\n\t\t\tmultiSelect.unSelect( this.getAttribute( 'value' ) ?? '' );\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'unselect', { bubbles: true } ) );\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectPillElement } from './tp-multi-select-pill';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\n\n/**\n * TP Multi Select Pills.\n */\nexport class TPMultiSelectPillsElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.closest( 'tp-multi-select' )?.addEventListener( 'change', this.update.bind( this ) );\n\t\tthis.closest( 'tp-multi-select' )?.querySelector( 'select' )?.addEventListener( 'change', ( () => this.update() ) as EventListener );\n\n\t\t// Update.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update this component.\n\t */\n\tupdate(): void {\n\t\t// Get multi-select.\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tif ( ! multiSelect ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Determine pills.\n\t\tconst pills: NodeListOf<TPMultiSelectPillElement> | null = this.querySelectorAll( 'tp-multi-select-pill' );\n\t\tconst values: string[] = multiSelect.value ?? [];\n\t\tconst pillValues: string[] = [];\n\n\t\t// Remove pills that shouldn't exist.\n\t\tpills.forEach( ( pill: TPMultiSelectPillElement ): void => {\n\t\t\tconst pillValue: string = pill.getAttribute( 'value' ) ?? '';\n\n\t\t\tif ( '' === pillValue ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tpillValues.push( pillValue );\n\n\t\t\tif ( ! values.includes( pillValue ) ) {\n\t\t\t\tpill.remove();\n\t\t\t}\n\t\t} );\n\n\t\t// Create new pills.\n\t\tconst pillsToCreate: string[] = values.filter( ( value: string ) => ! pillValues.includes( value ) );\n\t\tpillsToCreate.forEach( ( pillValue: string ): void => {\n\t\t\tif ( '' === pillValue ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst multiSelectOption: TPMultiSelectOptionElement | null = multiSelect.querySelector( `tp-multi-select-option[value=\"${ pillValue }\"]` );\n\t\t\tif ( ! multiSelectOption ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis.appendChild( this.createPill( pillValue, multiSelectOption.getAttribute( 'label' ) ?? '' ) );\n\t\t} );\n\t}\n\n\t/**\n\t * Create a new pill.\n\t *\n\t * @param {string} value Pill value.\n\t * @param {string} label Pill label.\n\t *\n\t * @return {TPMultiSelectPillElement} New pill.\n\t */\n\tcreatePill( value: string, label: string ): TPMultiSelectPillElement {\n\t\tconst newPill = document.createElement( 'tp-multi-select-pill' ) as TPMultiSelectPillElement;\n\t\tnewPill.setAttribute( 'value', value );\n\n\t\tconst pillLabel: HTMLElement = document.createElement( 'span' );\n\t\tpillLabel.textContent = label;\n\n\t\tconst pillCloseButton: HTMLElement = document.createElement( 'button' );\n\t\tpillCloseButton.setAttribute( 'type', 'button' );\n\t\tpillCloseButton.textContent = 'x';\n\t\tpillCloseButton.addEventListener( 'click', () => {\n\t\t\tnewPill.removePill();\n\t\t} );\n\n\t\tnewPill.appendChild( pillLabel );\n\t\tnewPill.appendChild( pillCloseButton );\n\n\t\treturn newPill;\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\n\n/**\n * TP Multi Select Select All.\n */\nexport class TPMultiSelectSelectAllElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.closest( 'tp-multi-select' )?.addEventListener( 'change', this.handleValueChanged.bind( this ) );\n\t\tthis.addEventListener( 'click', this.toggleSelectAll.bind( this ) );\n\t}\n\n\t/**\n\t * Handle value changed.\n\t */\n\thandleValueChanged(): void {\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> | null | undefined = multiSelect?.querySelectorAll( 'tp-multi-select-option' );\n\t\tif ( ! multiSelect || ! options ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( Array.from( options ).filter( ( optionNode ) => optionNode.getAttribute( 'disabled' ) !== 'yes' ).length === multiSelect.value.length ) {\n\t\t\tthis.setAttribute( 'selected', 'yes' );\n\t\t\tthis.innerHTML = this.getAttribute( 'unselect-text' ) ?? '';\n\t\t} else {\n\t\t\tthis.removeAttribute( 'selected' );\n\t\t\tthis.innerHTML = this.getAttribute( 'select-text' ) ?? '';\n\t\t}\n\t}\n\n\t/**\n\t * Toggle select all.\n\t */\n\ttoggleSelectAll(): void {\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tif ( ! multiSelect ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'yes' !== this.getAttribute( 'selected' ) ) {\n\t\t\tmultiSelect.selectAll();\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'select-all', { bubbles: true } ) );\n\t\t} else {\n\t\t\tmultiSelect.unSelectAll();\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'unselect-all', { bubbles: true } ) );\n\t\t}\n\t\tmultiSelect.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectFieldElement } from './tp-multi-select-field';\nimport { TPMultiSelectPlaceholderElement } from './tp-multi-select-placeholder';\nimport { TPMultiSelectStatusElement } from './tp-multi-select-status';\nimport { TPMultiSelectOptionsElement } from './tp-multi-select-options';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\nimport { TPMultiSelectSearchElement } from './tp-multi-select-search';\nimport { TPMultiSelectPillElement } from './tp-multi-select-pill';\nimport { TPMultiSelectPillsElement } from './tp-multi-select-pills';\nimport { TPMultiSelectSelectAllElement } from './tp-multi-select-select-all';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-multi-select', TPMultiSelectElement );\ncustomElements.define( 'tp-multi-select-field', TPMultiSelectFieldElement );\ncustomElements.define( 'tp-multi-select-placeholder', TPMultiSelectPlaceholderElement );\ncustomElements.define( 'tp-multi-select-status', TPMultiSelectStatusElement );\ncustomElements.define( 'tp-multi-select-options', TPMultiSelectOptionsElement );\ncustomElements.define( 'tp-multi-select-option', TPMultiSelectOptionElement );\ncustomElements.define( 'tp-multi-select-search', TPMultiSelectSearchElement );\ncustomElements.define( 'tp-multi-select-pill', TPMultiSelectPillElement );\ncustomElements.define( 'tp-multi-select-pills', TPMultiSelectPillsElement );\ncustomElements.define( 'tp-multi-select-select-all', TPMultiSelectSelectAllElement );\n"],"names":["TPMultiSelectElement","HTMLElement","constructor","super","currentlyHighlightedOption","this","keyboardEventListener","handleKeyboardInputs","bind","document","addEventListener","handleDocumentClick","update","options","querySelector","MutationObserver","initialize","observe","childList","subtree","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","bubbles","unHighlightAllOptions","removeEventListener","value","Array","isArray","styledOptions","querySelectorAll","forEach","option","includes","getAttribute","setAttribute","removeAttribute","selectedOptions","optionValue","push","updateFormFieldValue","styledSelectedOptions","selectField","selectOptions","from","matchingSelectOption","find","selectOption","newOption","createElement","append","remove","Event","length","status","toString","e","target","contains","selectElement","innerHTML","formReference","select","unSelectAll","search","clear","focus","selectAll","unSelect","key","preventDefault","highlightNextOption","highlightPreviousOption","toggleHighlightedOption","nextToBeHighlighted","scrollIntoView","behavior","block","previousToBeHighlighted","toggle","TPMultiSelectFieldElement","toggleOpen","multiSelect","closest","TPMultiSelectPlaceholderElement","TPMultiSelectStatusElement","_name","format","html","replace","TPMultiSelectOptionsElement","TPMultiSelectOptionElement","stopPropagation","detail","TPMultiSelectSearchElement","input","handleSearchChange","handleClick","pill","removePill","matchedOptionCount","toLowerCase","match","RegExp","style","width","TPMultiSelectPillElement","handleButtonClick","TPMultiSelectPillsElement","pills","values","pillValues","pillValue","filter","multiSelectOption","appendChild","createPill","label","newPill","pillLabel","textContent","pillCloseButton","TPMultiSelectSelectAllElement","handleValueChanged","toggleSelectAll","optionNode","customElements","define"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"dist/multi-select/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/multi-select/tp-multi-select.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-field.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-placeholder.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-status.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-options.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-option.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-search.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-pill.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-pills.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-select-all.ts","webpack://@travelopia/web-components/./src/multi-select/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\nimport { TPMultiSelectStatusElement } from './tp-multi-select-status';\nimport { TPMultiSelectOptionsElement } from './tp-multi-select-options';\nimport { TPMultiSelectSearchElement } from './tp-multi-select-search';\n\n/**\n * TP Multi Select.\n */\nexport class TPMultiSelectElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tcurrentlyHighlightedOption: number = -1;\n\tprotected keyboardEventListener: EventListener;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.keyboardEventListener = this.handleKeyboardInputs.bind( this ) as EventListener;\n\t\tdocument.addEventListener( 'click', this.handleDocumentClick.bind( this ) );\n\t\tthis.addEventListener( 'change', this.update.bind( this ) );\n\n\t\t// Listen for dynamic changes to the option values.\n\t\tconst options: TPMultiSelectOptionsElement | null = this.querySelector( 'tp-multi-select-options' );\n\t\tif ( options ) {\n\t\t\tconst mutationObserver: MutationObserver = new MutationObserver( this.initialize.bind( this ) );\n\t\t\tmutationObserver.observe( options, { childList: true, subtree: true } );\n\t\t}\n\n\t\t// Initialize component.\n\t\tthis.initialize();\n\t}\n\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} List of observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'open' ];\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t *\n\t * @param {string} name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t */\n\tattributeChangedCallback( name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( oldValue === newValue ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'open' === name ) {\n\t\t\tif ( 'yes' === newValue ) {\n\t\t\t\tdocument.addEventListener( 'keydown', this.keyboardEventListener );\n\t\t\t\tthis.dispatchEvent( new CustomEvent( 'open', { bubbles: true } ) );\n\t\t\t} else {\n\t\t\t\tthis.unHighlightAllOptions();\n\t\t\t\tdocument.removeEventListener( 'keydown', this.keyboardEventListener );\n\t\t\t\tthis.dispatchEvent( new CustomEvent( 'close', { bubbles: true } ) );\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Set the value of this component.\n\t *\n\t * @param {Array} value Value.\n\t */\n\tset value( value: string[] ) {\n\t\tif ( ! value || ! Array.isArray( value ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst styledOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tstyledOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tif ( value.includes( option.getAttribute( 'value' ) ?? '' ) ) {\n\t\t\t\toption.setAttribute( 'selected', 'yes' );\n\t\t\t} else {\n\t\t\t\toption.removeAttribute( 'selected' );\n\t\t\t}\n\t\t} );\n\n\t\tthis.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t}\n\n\t/**\n\t * Get the value of this component.\n\t *\n\t * @return {Array} Value of this component.\n\t */\n\tget value(): string[] {\n\t\tconst value: string[] = [];\n\n\t\tconst selectedOptions: NodeListOf<HTMLOptionElement> | null = this.querySelectorAll( 'select option[selected]' );\n\t\tselectedOptions?.forEach( ( option: HTMLOptionElement ) => {\n\t\t\tconst optionValue = option.getAttribute( 'value' );\n\t\t\tif ( optionValue ) {\n\t\t\t\tvalue.push( optionValue );\n\t\t\t}\n\t\t} );\n\t\treturn value;\n\t}\n\n\t/**\n\t * Update the value of the select field.\n\t */\n\tprotected updateFormFieldValue(): void {\n\t\t// Get options.\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( `tp-multi-select-option` );\n\t\tconst selectField: HTMLSelectElement | null = this.querySelector( 'select' );\n\n\t\tif ( ! styledSelectedOptions || ! selectField ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst selectOptions: HTMLOptionElement[] = Array.from( selectField.options );\n\n\t\t// Traverse options.\n\t\tstyledSelectedOptions.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tconst optionValue = option.getAttribute( 'value' ) ?? '';\n\t\t\tif ( optionValue ) {\n\t\t\t\tconst matchingSelectOption: HTMLOptionElement | undefined = selectOptions.find( ( selectOption ) => selectOption.value === optionValue );\n\n\t\t\t\tif ( 'yes' === option.getAttribute( 'selected' ) ) {\n\t\t\t\t\tif ( matchingSelectOption ) {\n\t\t\t\t\t\tmatchingSelectOption.setAttribute( 'selected', 'selected' );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tconst newOption: HTMLOptionElement = document.createElement( 'option' );\n\t\t\t\t\t\tnewOption.setAttribute( 'value', option.getAttribute( 'value' ) ?? '' );\n\t\t\t\t\t\tnewOption.setAttribute( 'selected', 'selected' );\n\t\t\t\t\t\tselectField?.append( newOption );\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tmatchingSelectOption?.remove();\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\n\t\t// Dispatch events.\n\t\tselectField.dispatchEvent( new Event( 'change' ) );\n\t}\n\n\t/**\n\t * Update component and sub-components.\n\t */\n\tupdate(): void {\n\t\t// First, update field value.\n\t\tthis.updateFormFieldValue();\n\n\t\t// Get value.\n\t\tconst value: string[] = this.value;\n\n\t\t// Toggle selected attribute.\n\t\tif ( 0 !== value.length ) {\n\t\t\tthis.setAttribute( 'selected', 'yes' );\n\t\t} else {\n\t\t\tthis.removeAttribute( 'selected' );\n\t\t}\n\n\t\t// Update status.\n\t\tconst status: TPMultiSelectStatusElement | null = this.querySelector( 'tp-multi-select-status' );\n\t\tif ( status ) {\n\t\t\tif ( value.length > 0 ) {\n\t\t\t\tstatus.setAttribute( 'total', value.length.toString() );\n\t\t\t} else {\n\t\t\t\tstatus.removeAttribute( 'total' );\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Handle clicking the document.\n\t *\n\t * @param {Event} e Event.\n\t */\n\tprotected handleDocumentClick( e: Event ): void {\n\t\tif ( this !== e.target && ! this.contains( e.target as Node ) ) {\n\t\t\tthis.removeAttribute( 'open' );\n\t\t}\n\t}\n\n\t/**\n\t * Initialize component.\n\t */\n\tinitialize(): void {\n\t\t// Create select element (if it doesn't already exist).\n\t\tlet selectElement: HTMLSelectElement | null = this.querySelector( 'select' );\n\t\tif ( ! selectElement ) {\n\t\t\tselectElement = document.createElement( 'select' );\n\t\t\tselectElement.setAttribute( 'name', this.getAttribute( 'name' ) ?? '' );\n\n\t\t\tconst formReference = this.getAttribute( 'form' );\n\n\t\t\tif ( formReference ) {\n\t\t\t\tselectElement.setAttribute( 'form', formReference );\n\t\t\t}\n\n\t\t\tif ( 'no' !== this.getAttribute( 'multiple' ) ) {\n\t\t\t\tselectElement.setAttribute( 'multiple', 'multiple' );\n\t\t\t}\n\n\t\t\tthis.append( selectElement );\n\t\t} else {\n\t\t\tselectElement.innerHTML = '';\n\t\t}\n\n\t\t// Update components for selected options.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Select a value.\n\t *\n\t * @param {string} value Value to select.\n\t */\n\tselect( value: string = '' ): void {\n\t\t// Stuff for single-select.\n\t\tif ( 'no' === this.getAttribute( 'multiple' ) ) {\n\t\t\t// First, unselect everything.\n\t\t\tthis.unSelectAll();\n\n\t\t\t// If the value is blank, don't do anything else.\n\t\t\tif ( '' === value ) {\n\t\t\t\tif ( 'yes' === this.getAttribute( 'close-on-select' ) ) {\n\t\t\t\t\tthis.removeAttribute( 'open' );\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\t// Select all options.\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( `tp-multi-select-option[value=\"${ value }\"]` );\n\t\tstyledSelectedOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tif ( 'yes' !== option.getAttribute( 'disabled' ) ) {\n\t\t\t\toption.setAttribute( 'selected', 'yes' );\n\t\t\t}\n\t\t} );\n\n\t\t// Search stuff.\n\t\tconst search: TPMultiSelectSearchElement | null = this.querySelector( 'tp-multi-select-search' );\n\t\tsearch?.clear();\n\t\tsearch?.focus();\n\n\t\t// Close the field, if applicable.\n\t\tif ( 'yes' === this.getAttribute( 'close-on-select' ) ) {\n\t\t\tthis.removeAttribute( 'open' );\n\t\t}\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Select all values.\n\t */\n\tselectAll(): void {\n\t\tconst styledOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tstyledOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tif ( 'yes' !== option.getAttribute( 'disabled' ) ) {\n\t\t\t\toption.setAttribute( 'selected', 'yes' );\n\t\t\t}\n\t\t} );\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Un-select a value.\n\t *\n\t * @param {string} value Value to unselect.\n\t */\n\tunSelect( value: string = '' ): void {\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( `tp-multi-select-option[value=\"${ value }\"]` );\n\t\tstyledSelectedOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\toption.removeAttribute( 'selected' );\n\t\t} );\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Un-select all values.\n\t */\n\tunSelectAll(): void {\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tstyledSelectedOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\toption.removeAttribute( 'selected' );\n\t\t} );\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Handle keyboard inputs.\n\t *\n\t * @param {Event} e Keyboard event.\n\t */\n\thandleKeyboardInputs( e: KeyboardEvent ): void {\n\t\tswitch ( e.key ) {\n\t\t\tcase 'ArrowDown':\n\t\t\t\te.preventDefault();\n\t\t\t\tthis.highlightNextOption();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowUp':\n\t\t\t\te.preventDefault();\n\t\t\t\tthis.highlightPreviousOption();\n\t\t\t\tbreak;\n\t\t\tcase 'Enter':\n\t\t\t\tthis.toggleHighlightedOption();\n\t\t\t\tbreak;\n\t\t\tcase 'Escape':\n\t\t\t\tthis.unHighlightAllOptions();\n\t\t\t\tthis.removeAttribute( 'open' );\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t/**\n\t * Highlight the next option.\n\t */\n\thighlightNextOption(): void {\n\t\t// Get options.\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option:not([hidden=\"yes\"])' );\n\t\tif ( ! options ) {\n\t\t\tthis.currentlyHighlightedOption = -1;\n\t\t\treturn;\n\t\t}\n\n\t\t// Find the next option to be highlighted. Assume next option is the favorable option.\n\t\tlet nextToBeHighlighted = this.currentlyHighlightedOption + 1;\n\n\t\t// Keep iterating to skip over disabled options until we find a suitable option.\n\t\twhile ( nextToBeHighlighted < options.length && options[ nextToBeHighlighted ].getAttribute( 'disabled' ) === 'yes' ) {\n\t\t\tnextToBeHighlighted++;\n\t\t}\n\n\t\t// If there are no more options to highlight, exit. Here, the last highlighted option keeps highlighted.\n\t\tif ( nextToBeHighlighted === options.length ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Remove highlight from the current option, if any.\n\t\tif ( this.currentlyHighlightedOption !== -1 ) {\n\t\t\toptions[ this.currentlyHighlightedOption ].removeAttribute( 'highlighted' );\n\t\t}\n\n\t\t// Highlight the found option.\n\t\toptions[ nextToBeHighlighted ].setAttribute( 'highlighted', 'yes' );\n\n\t\t// Scroll the highlighted option into view with smooth behavior.\n\t\toptions[ nextToBeHighlighted ].scrollIntoView( { behavior: 'smooth', block: 'nearest' } );\n\n\t\t// Update the currentlyHighlightedOption for the next iteration.\n\t\tthis.currentlyHighlightedOption = nextToBeHighlighted;\n\t}\n\n\t/**\n\t * Highlight previous option.\n\t */\n\thighlightPreviousOption(): void {\n\t\t// Get options.\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option:not([hidden=\"yes\"])' );\n\t\tif ( ! options ) {\n\t\t\tthis.currentlyHighlightedOption = -1;\n\t\t\treturn;\n\t\t}\n\n\t\t// Find the previous option to be highlighted. Assume previous option is the favorable option.\n\t\tlet previousToBeHighlighted = this.currentlyHighlightedOption - 1;\n\n\t\t// Keep iterating to skip over disabled options until we find a suitable option.\n\t\twhile ( previousToBeHighlighted >= 0 && options[ previousToBeHighlighted ].getAttribute( 'disabled' ) === 'yes' ) {\n\t\t\tpreviousToBeHighlighted--;\n\t\t}\n\n\t\t// If there are no more options to highlight, exit.\n\t\tif ( previousToBeHighlighted < 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Remove highlight from the current option, if any.\n\t\tif ( this.currentlyHighlightedOption !== 0 ) {\n\t\t\toptions[ this.currentlyHighlightedOption ].removeAttribute( 'highlighted' );\n\t\t}\n\n\t\t// Highlight the found option.\n\t\toptions[ previousToBeHighlighted ].setAttribute( 'highlighted', 'yes' );\n\n\t\t// Scroll the highlighted option into view with smooth behavior.\n\t\toptions[ previousToBeHighlighted ].scrollIntoView( { behavior: 'smooth', block: 'nearest' } );\n\n\t\t// Update the currentlyHighlightedOption for the next iteration.\n\t\tthis.currentlyHighlightedOption = previousToBeHighlighted;\n\t}\n\n\t/**\n\t * Toggle highlighted option.\n\t */\n\ttoggleHighlightedOption(): void {\n\t\tconst option: TPMultiSelectOptionElement | null = this.querySelector( `tp-multi-select-option[highlighted=\"yes\"]` );\n\t\toption?.toggle( null );\n\t}\n\n\t/**\n\t * Un-highlight all options.\n\t */\n\tunHighlightAllOptions(): void {\n\t\tthis.currentlyHighlightedOption = -1;\n\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> | null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tif ( options ) {\n\t\t\toptions.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\t\toption.removeAttribute( 'highlighted' );\n\t\t\t} );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\n\n/**\n * TP Multi Select Field.\n */\nexport class TPMultiSelectFieldElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener( 'click', this.toggleOpen.bind( this ) );\n\t}\n\n\t/**\n\t * Toggle opening this component.\n\t */\n\ttoggleOpen(): void {\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tif ( ! multiSelect ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'yes' === multiSelect.getAttribute( 'open' ) ) {\n\t\t\tmultiSelect.removeAttribute( 'open' );\n\t\t} else {\n\t\t\tmultiSelect.setAttribute( 'open', 'yes' );\n\t\t}\n\t}\n}\n","/**\n * TP Multi Select Placeholder.\n */\nexport class TPMultiSelectPlaceholderElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\n\n/**\n * TP Multi Select Status.\n */\nexport class TPMultiSelectStatusElement extends HTMLElement {\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} List of observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'total', 'format' ];\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t *\n\t * @param {string} _name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t */\n\tattributeChangedCallback( _name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( oldValue !== newValue ) {\n\t\t\tthis.update();\n\t\t}\n\t}\n\n\t/**\n\t * Update this component.\n\t */\n\tupdate(): void {\n\t\tconst format: string = this.getAttribute( 'format' ) ?? '$total Selected';\n\t\tlet html: string = format.replace( '$total', this.getAttribute( 'total' ) ?? '' );\n\n\t\tif ( format.includes( '$value' ) ) {\n\t\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\t\tif ( multiSelect ) {\n\t\t\t\tconst value: string[] = multiSelect.value ?? [];\n\t\t\t\tlet replace: string = '';\n\n\t\t\t\tif ( value.length > 0 ) {\n\t\t\t\t\tconst option: TPMultiSelectOptionElement | null = multiSelect.querySelector( `tp-multi-select-option[value=\"${ value[ 0 ] }\"]` );\n\t\t\t\t\tif ( option ) {\n\t\t\t\t\t\treplace = option.getAttribute( 'label' ) ?? '';\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\thtml = html.replace( '$value', replace );\n\t\t\t}\n\t\t}\n\n\t\tthis.innerHTML = html;\n\t}\n}\n","/**\n * TP Multi Select Options.\n */\nexport class TPMultiSelectOptionsElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\n\n/**\n * TP Multi Select Option.\n */\nexport class TPMultiSelectOptionElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener( 'click', this.toggle.bind( this ) );\n\t}\n\n\t/**\n\t * Select / un-select this option.\n\t *\n\t * @param {Event} e Click event.\n\t */\n\ttoggle( e: Event | null ): void {\n\t\te?.preventDefault();\n\t\te?.stopPropagation();\n\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tconst value: string = this.getAttribute( 'value' ) ?? '';\n\n\t\tif ( 'yes' !== this.getAttribute( 'selected' ) ) {\n\t\t\tmultiSelect?.select( value );\n\t\t\tmultiSelect?.dispatchEvent( new CustomEvent( 'select', {\n\t\t\t\tbubbles: true,\n\t\t\t\tdetail: { value },\n\t\t\t} ) );\n\t\t} else {\n\t\t\tmultiSelect?.unSelect( value );\n\t\t\tmultiSelect?.dispatchEvent( new CustomEvent( 'unselect', {\n\t\t\t\tbubbles: true,\n\t\t\t\tdetail: { value },\n\t\t\t} ) );\n\t\t}\n\t\tmultiSelect?.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\nimport { TPMultiSelectPillElement } from './tp-multi-select-pill';\n\n/**\n * TP Multi Select Search.\n */\nexport class TPMultiSelectSearchElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\tconst input: HTMLInputElement | null = this.querySelector( 'input' );\n\t\tif ( ! input ) {\n\t\t\treturn;\n\t\t}\n\n\t\tinput.addEventListener( 'keydown', this.handleKeyboardInputs.bind( this ) );\n\t\tinput.addEventListener( 'keyup', this.handleSearchChange.bind( this ) );\n\t\tinput.addEventListener( 'input', this.handleSearchChange.bind( this ) );\n\t\tthis.addEventListener( 'click', this.handleClick.bind( this ) );\n\t\tthis.closest( 'tp-multi-select' )?.addEventListener( 'open', this.focus.bind( this ) );\n\t}\n\n\t/**\n\t * Handle keyboard inputs.\n\t *\n\t * @param {Event} e Keyboard event.\n\t */\n\thandleKeyboardInputs( e: KeyboardEvent ): void {\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tconst search: HTMLInputElement | null = this.querySelector( 'input' );\n\t\tif ( ! multiSelect || ! search ) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( e.key ) {\n\t\t\tcase 'Enter':\n\t\t\t\te.preventDefault(); // Prevent inadvertent form submits.\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\t\tmultiSelect.setAttribute( 'open', 'yes' );\n\t\t\t\tbreak;\n\t\t\tcase 'Backspace':\n\t\t\t\tif ( 0 === search.value.length ) {\n\t\t\t\t\tconst pill: TPMultiSelectPillElement | null = multiSelect.querySelector( 'tp-multi-select-pill:last-of-type' );\n\t\t\t\t\tif ( pill ) {\n\t\t\t\t\t\tpill.removePill();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t/**\n\t * Handle search field value changed.\n\t */\n\tprotected handleSearchChange(): void {\n\t\t// Get search field and options.\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tconst search: HTMLInputElement | null = this.querySelector( 'input' );\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> | undefined = this.closest( 'tp-multi-select' )?.querySelectorAll( 'tp-multi-select-option' );\n\t\tif ( ! multiSelect || ! search || ! options ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet matchedOptionCount = 0;\n\t\t// Hide and show options based on search.\n\t\toptions.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tif ( option.getAttribute( 'label' )?.toLowerCase().match( new RegExp( `.*${ search.value.toLowerCase().replace( /\\s/g, '.*' ) }.*` ) ) ) {\n\t\t\t\toption.removeAttribute( 'hidden' );\n\t\t\t\tmatchedOptionCount++;\n\t\t\t} else {\n\t\t\t\toption.setAttribute( 'hidden', 'yes' );\n\t\t\t}\n\t\t} );\n\n\t\t// Resize input width.\n\t\tif ( '' === search.value ) {\n\t\t\tsearch.removeAttribute( 'style' );\n\t\t} else {\n\t\t\tsearch.style.width = `${ search.value.length + 2 }ch`;\n\t\t\tmultiSelect.setAttribute( 'open', 'yes' );\n\t\t}\n\n\t\tmultiSelect.setAttribute( 'visible-options', matchedOptionCount.toString() );\n\t}\n\n\t/**\n\t * Handle click.\n\t *\n\t * @param {Event} e Click event.\n\t */\n\tprotected handleClick( e: Event ): void {\n\t\t// First, prevent propagation to avoid document.click set on `tp-multi-select`.\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\n\t\t// Now send the event so other stuff can work as per normal, and another event for good measure.\n\t\tthis.dispatchEvent( new CustomEvent( 'multi-select-opened' ) );\n\t\tdocument.dispatchEvent( new Event( 'click' ) );\n\n\t\t// Open multi select.\n\t\tthis.closest( 'tp-multi-select' )?.setAttribute( 'open', 'yes' );\n\t}\n\n\t/**\n\t * Clear the search field.\n\t */\n\tclear(): void {\n\t\tconst search: HTMLInputElement | null = this.querySelector( 'input' );\n\t\tif ( search ) {\n\t\t\tsearch.value = '';\n\t\t\tsearch.dispatchEvent( new Event( 'change' ) );\n\t\t}\n\t}\n\n\t/**\n\t * Set focus on the search field.\n\t */\n\tfocus(): void {\n\t\t// When it's focused, use search change to ensure the results are refreshed.\n\t\tthis.handleSearchChange();\n\n\t\t// Focus on input.\n\t\tthis.querySelector( 'input' )?.focus();\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\n\n/**\n * TP Multi Select Pill.\n */\nexport class TPMultiSelectPillElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.handleButtonClick.bind( this ) );\n\t}\n\n\t/**\n\t * Handle button click.\n\t *\n\t * @param {Event} e Click event.\n\t */\n\thandleButtonClick( e: Event | null ): void {\n\t\te?.preventDefault();\n\t\te?.stopPropagation();\n\t\tthis.removePill();\n\t}\n\n\t/**\n\t * Remove this pill.\n\t */\n\tremovePill(): void {\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tif ( multiSelect && this.getAttribute( 'value' ) ) {\n\t\t\tmultiSelect.unSelect( this.getAttribute( 'value' ) ?? '' );\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'unselect', { bubbles: true } ) );\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectPillElement } from './tp-multi-select-pill';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\n\n/**\n * TP Multi Select Pills.\n */\nexport class TPMultiSelectPillsElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.closest( 'tp-multi-select' )?.addEventListener( 'change', this.update.bind( this ) );\n\t\tthis.closest( 'tp-multi-select' )?.querySelector( 'select' )?.addEventListener( 'change', ( () => this.update() ) as EventListener );\n\n\t\t// Update.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update this component.\n\t */\n\tupdate(): void {\n\t\t// Get multi-select.\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tif ( ! multiSelect ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Determine pills.\n\t\tconst pills: NodeListOf<TPMultiSelectPillElement> | null = this.querySelectorAll( 'tp-multi-select-pill' );\n\t\tconst values: string[] = multiSelect.value ?? [];\n\t\tconst pillValues: string[] = [];\n\n\t\t// Remove pills that shouldn't exist.\n\t\tpills.forEach( ( pill: TPMultiSelectPillElement ): void => {\n\t\t\tconst pillValue: string = pill.getAttribute( 'value' ) ?? '';\n\n\t\t\tif ( '' === pillValue ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tpillValues.push( pillValue );\n\n\t\t\tif ( ! values.includes( pillValue ) ) {\n\t\t\t\tpill.remove();\n\t\t\t}\n\t\t} );\n\n\t\t// Create new pills.\n\t\tconst pillsToCreate: string[] = values.filter( ( value: string ) => ! pillValues.includes( value ) );\n\t\tpillsToCreate.forEach( ( pillValue: string ): void => {\n\t\t\tif ( '' === pillValue ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst multiSelectOption: TPMultiSelectOptionElement | null = multiSelect.querySelector( `tp-multi-select-option[value=\"${ pillValue }\"]` );\n\t\t\tif ( ! multiSelectOption ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis.appendChild( this.createPill( pillValue, multiSelectOption.getAttribute( 'label' ) ?? '' ) );\n\t\t} );\n\t}\n\n\t/**\n\t * Create a new pill.\n\t *\n\t * @param {string} value Pill value.\n\t * @param {string} label Pill label.\n\t *\n\t * @return {TPMultiSelectPillElement} New pill.\n\t */\n\tcreatePill( value: string, label: string ): TPMultiSelectPillElement {\n\t\tconst newPill = document.createElement( 'tp-multi-select-pill' ) as TPMultiSelectPillElement;\n\t\tnewPill.setAttribute( 'value', value );\n\n\t\tconst pillLabel: HTMLElement = document.createElement( 'span' );\n\t\tpillLabel.textContent = label;\n\n\t\tconst pillCloseButton: HTMLElement = document.createElement( 'button' );\n\t\tpillCloseButton.setAttribute( 'type', 'button' );\n\t\tpillCloseButton.textContent = 'x';\n\t\tpillCloseButton.addEventListener( 'click', () => {\n\t\t\tnewPill.removePill();\n\t\t} );\n\n\t\tnewPill.appendChild( pillLabel );\n\t\tnewPill.appendChild( pillCloseButton );\n\n\t\treturn newPill;\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\n\n/**\n * TP Multi Select Select All.\n */\nexport class TPMultiSelectSelectAllElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.closest( 'tp-multi-select' )?.addEventListener( 'change', this.handleValueChanged.bind( this ) );\n\t\tthis.addEventListener( 'click', this.toggleSelectAll.bind( this ) );\n\t}\n\n\t/**\n\t * Handle value changed.\n\t */\n\thandleValueChanged(): void {\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> | null | undefined = multiSelect?.querySelectorAll( 'tp-multi-select-option' );\n\t\tif ( ! multiSelect || ! options ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( Array.from( options ).filter( ( optionNode ) => optionNode.getAttribute( 'disabled' ) !== 'yes' ).length === multiSelect.value.length ) {\n\t\t\tthis.setAttribute( 'selected', 'yes' );\n\t\t\tthis.innerHTML = this.getAttribute( 'unselect-text' ) ?? '';\n\t\t} else {\n\t\t\tthis.removeAttribute( 'selected' );\n\t\t\tthis.innerHTML = this.getAttribute( 'select-text' ) ?? '';\n\t\t}\n\t}\n\n\t/**\n\t * Toggle select all.\n\t */\n\ttoggleSelectAll(): void {\n\t\tconst multiSelect: TPMultiSelectElement | null = this.closest( 'tp-multi-select' );\n\t\tif ( ! multiSelect ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'yes' !== this.getAttribute( 'selected' ) ) {\n\t\t\tmultiSelect.selectAll();\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'select-all', { bubbles: true } ) );\n\t\t} else {\n\t\t\tmultiSelect.unSelectAll();\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'unselect-all', { bubbles: true } ) );\n\t\t}\n\t\tmultiSelect.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectFieldElement } from './tp-multi-select-field';\nimport { TPMultiSelectPlaceholderElement } from './tp-multi-select-placeholder';\nimport { TPMultiSelectStatusElement } from './tp-multi-select-status';\nimport { TPMultiSelectOptionsElement } from './tp-multi-select-options';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\nimport { TPMultiSelectSearchElement } from './tp-multi-select-search';\nimport { TPMultiSelectPillElement } from './tp-multi-select-pill';\nimport { TPMultiSelectPillsElement } from './tp-multi-select-pills';\nimport { TPMultiSelectSelectAllElement } from './tp-multi-select-select-all';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-multi-select', TPMultiSelectElement );\ncustomElements.define( 'tp-multi-select-field', TPMultiSelectFieldElement );\ncustomElements.define( 'tp-multi-select-placeholder', TPMultiSelectPlaceholderElement );\ncustomElements.define( 'tp-multi-select-status', TPMultiSelectStatusElement );\ncustomElements.define( 'tp-multi-select-options', TPMultiSelectOptionsElement );\ncustomElements.define( 'tp-multi-select-option', TPMultiSelectOptionElement );\ncustomElements.define( 'tp-multi-select-search', TPMultiSelectSearchElement );\ncustomElements.define( 'tp-multi-select-pill', TPMultiSelectPillElement );\ncustomElements.define( 'tp-multi-select-pills', TPMultiSelectPillsElement );\ncustomElements.define( 'tp-multi-select-select-all', TPMultiSelectSelectAllElement );\n"],"names":["TPMultiSelectElement","HTMLElement","constructor","super","currentlyHighlightedOption","this","keyboardEventListener","handleKeyboardInputs","bind","document","addEventListener","handleDocumentClick","update","options","querySelector","MutationObserver","initialize","observe","childList","subtree","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","bubbles","unHighlightAllOptions","removeEventListener","value","Array","isArray","styledOptions","querySelectorAll","forEach","option","includes","getAttribute","setAttribute","removeAttribute","selectedOptions","optionValue","push","updateFormFieldValue","styledSelectedOptions","selectField","selectOptions","from","matchingSelectOption","find","selectOption","newOption","createElement","append","remove","Event","length","status","toString","e","target","contains","selectElement","innerHTML","formReference","select","unSelectAll","search","clear","focus","selectAll","unSelect","key","preventDefault","highlightNextOption","highlightPreviousOption","toggleHighlightedOption","nextToBeHighlighted","scrollIntoView","behavior","block","previousToBeHighlighted","toggle","TPMultiSelectFieldElement","toggleOpen","multiSelect","closest","TPMultiSelectPlaceholderElement","TPMultiSelectStatusElement","_name","format","html","replace","TPMultiSelectOptionsElement","TPMultiSelectOptionElement","stopPropagation","detail","TPMultiSelectSearchElement","input","handleSearchChange","handleClick","pill","removePill","matchedOptionCount","toLowerCase","match","RegExp","style","width","TPMultiSelectPillElement","handleButtonClick","TPMultiSelectPillsElement","pills","values","pillValues","pillValue","filter","multiSelectOption","appendChild","createPill","label","newPill","pillLabel","textContent","pillCloseButton","TPMultiSelectSelectAllElement","handleValueChanged","toggleSelectAll","optionNode","customElements","define"],"sourceRoot":""}
|