vicowa-web-components/dist/vicowa-move-between-lists/vicowa-move-between-lists.js

Various web components

import{WebComponentBaseClass as t}from"/third_party/web-component-base-class/dist/web-component-base-class.js";import"../vicowa-input/vicowa-input.js";window.customElements.define("vicowa-move-between-lists",class VicowaMoveBetweenLists extends t{constructor(){super()}static get properties(){return{firstTitle:{type:String,value:"",reflectToAttribute:!0,observer:t=>t.#t()},secondTitle:{type:String,value:"",reflectToAttribute:!0,observer:t=>t.#t()},first:{type:Array,value:[],observer:t=>t.#e()},second:{type:Array,value:[],observer:t=>t.#i()}}}attached(){this.$.firstFilter.onChange=()=>{this.#e()},this.$.secondFilter.onChange=()=>{this.#i()};const t=()=>{this.$.secondToFirst.classList.toggle("disabled",!this.$.secondList.selectedOptions.length),this.$.firstToSecond.classList.toggle("disabled",!this.$.firstList.selectedOptions.length)};this.addAutoEventListener(this.$.secondList,"change",t),this.addAutoEventListener(this.$.firstList,"change",t),t(),this.addAutoEventListener(this.$.firstToSecond,"click",(()=>{const e=Array.from(this.$.firstList.selectedOptions);this.second=this.second.concat(e.map((t=>t.item))),this.first=this.first.filter((t=>!e.find((e=>e.item===t)))),t(),this.onChange&&this.onChange()})),this.addAutoEventListener(this.$.secondToFirst,"click",(()=>{const e=Array.from(this.$.secondList.selectedOptions);this.first=this.first.concat(e.map((t=>t.item))),this.second=this.second.filter((t=>!e.find((e=>e.item===t)))),t(),this.onChange&&this.onChange()}))}#e(){const t=this.$.firstFilter.value.trim()?new RegExp(this.$.firstFilter.value.trim()):null;this.$.firstList.innerHTML="",this.first.filter((e=>!t||t.test(e.displayName))).sort().forEach((t=>{const e=document.createElement("option");e.item=t,e.textContent=t.displayName,this.$.firstList.appendChild(e)}))}#i(){const t=this.$.secondFilter.value.trim()?new RegExp(this.$.secondFilter.value.trim()):null;this.$.secondList.innerHTML="",this.second.filter((e=>!t||t.test(e.displayName))).sort().forEach((t=>{const e=document.createElement("option");e.item=t,e.textContent=t.displayName,this.$.secondList.appendChild(e)}))}#t(){this.$.firstTitle.string=this.firstTitle,this.$.secondTitle.string=this.secondTitle}static get template(){return'\n\t\t\t<style>\n\t\t\t\t.list-container {\n\t\t\t\t\tjustify-content: stretch;\n\t\t\t\t\t--vicowa-input-control-width: 200px;\n\t\t\t\t}\n\t\t\t\t.swap-button-container {\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t}\n\t\t\n\t\t\t\t.swap-button-container button {\n\t\t\t\t\tmargin: 3px 2px;\n\t\t\t\t}\n\t\t\n\t\t\t\t.list-container,\n\t\t\t\t.swap-button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t}\n\t\t\n\t\t\t\tselect {\n\t\t\t\t\twidth: var(--vicowa-input-control-width);\n\t\t\t\t\theight: 200px;\n\t\t\t\t}\n\t\t\n\t\t\t\tlabel {\n\t\t\t\t\tmargin: .2em 0;\n\t\t\t\t}\n\t\t\n\t\t\t\t.side-by-side {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t}\n\t\t\n\t\t\t\t.move {\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t}\n\t\t\n\t\t\t\t.disabled {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.5;\n\t\t\t\t\tcursor: default;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<div class="side-by-side">\n\t\t\t\t<div class="list-container">\n\t\t\t\t\t<label for="first-list"><vicowa-string id="first-title"></vicowa-string></label>\n\t\t\t\t\t<vicowa-input id="first-filter" placeholder="Filter" hide-label></vicowa-input>\n\t\t\t\t\t<select id="first-list" multiple>\n\t\t\t\t\t</select>\n\t\t\t\t</div>\n\t\t\t\t<div class="swap-button-container">\n\t\t\t\t\t<div class="move" id="first-to-second"><slot name="first-to-second-button"><button >-></button></slot></div>\n\t\t\t\t\t<div class="move" id="second-to-first"><slot name="second-to-first-button"><button ><-</button></slot></div>\n\t\t\t\t</div>\n\t\t\t\t<div class="list-container">\n\t\t\t\t\t<label for="second-list"><vicowa-string id="second-title"></vicowa-string></label>\n\t\t\t\t\t<vicowa-input id="second-filter" placeholder="Filter" hide-label></vicowa-input>\n\t\t\t\t\t<select id="second-list" multiple>\n\t\t\t\t\t</select>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t'}});
//# sourceMappingURL=vicowa-move-between-lists.js.map