sf-multiselect-search 1.0.1

package/LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2019 Google LLC. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1 @@
+# sf-multiselect-search

package/dist/sf-checklist.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2022 Superflow.dev
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, PropertyValueMap } from 'lit';
+/**
+ * SfMultiselectSearch element.
+ * @fires renderComplete - When the list is populated
+ * @fires valueChanged - When the value is changed
+ * @property apiId - backend api id
+ * @property label - input label
+ * @property name - name of the input
+ * @property mode - mode of operation
+ * @property selectedId - id to preselect
+ * @property selectedValue - callback function
+ */
+export declare class SfMultiselectSearch extends LitElement {
+    static styles: import("lit").CSSResult;
+    mode: string;
+    readonly: boolean;
+    listname: string;
+    listelements: string[];
+    listselection: {
+        [key: string]: boolean;
+    };
+    selectedValues: () => {
+        [key: string]: boolean;
+    };
+    dispatchValueChanged: () => void;
+    reorderArray<T>(arr: T[], oldIndex: number, newIndex: number): T[];
+    reorderMap(map: Map<string, any>, newOrder: string[]): Map<string, any>;
+    initListeners: () => void;
+    loadMode: () => Promise<void>;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+    }
+}
+//# sourceMappingURL=sf-multiselect-search.d.ts.map

package/dist/sf-checklist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sf-multiselect-search.d.ts","sourceRoot":"","sources":["../src/sf-multiselect-search.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAa,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAU9D;;;;;;;;;;GAUG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAyGpB;IAIF,IAAI,SAAU;IAGd,QAAQ,UAAQ;IAGhB,QAAQ,SAAK;IAGb,YAAY,EAAE,MAAM,EAAE,CAAK;IAuB3B,aAAa,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAK;IAgB9C,cAAc;;MAOb;IACD,oBAAoB,aAQnB;IACD,YAAY,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,EAAE;IAWlE,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IASvE,aAAa,aAkDZ;IACD,QAAQ,sBAwDP;cAEkB,YAAY,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IAMnG,iBAAiB;IAGjB,MAAM;CA0BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;KAC9B;CACF"}

package/dist/sf-checklist.js

@@ -0,0 +1,378 @@
+/**
+ * @license
+ * Copyright 2022 Superflow.dev
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+/*
+
+Modes: multiselect, select
+Flows: view,edit
+
+*/
+/**
+ * SfMultiselectSearch element.
+ * @fires renderComplete - When the list is populated
+ * @fires valueChanged - When the value is changed
+ * @property apiId - backend api id
+ * @property label - input label
+ * @property name - name of the input
+ * @property mode - mode of operation
+ * @property selectedId - id to preselect
+ * @property selectedValue - callback function
+ */
+let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
+    constructor() {
+        super(...arguments);
+        // mode = ""
+        this.mode = "admin";
+        this.readonly = false;
+        // readonly = true
+        this.listname = "";
+        this.listelements = [];
+        //   listelements: { name: string }[] = [
+        //     {
+        //         "name": "Contract term 1"
+        //     },
+        //     {
+        //         "name": "contract term 2"
+        //     },
+        //     {
+        //         "name": "contract term 3"
+        //     }
+        // ]
+        // listelements: { name: string }[] = [{"name": "Terms1"},{"name": "Terms2"}]
+        //   listelements: { name: string }[] = [
+        //     {
+        //         "name": "item 1"
+        //     },
+        //     {
+        //         "name": "item 2"
+        //     }
+        // ]
+        this.listselection = {};
+        //   listselection: { [key: string]: boolean } = {
+        //     "Contract term 1": true,
+        //     "contract term 2": true,
+        //     "contract term 3": true
+        // }
+        // listselection: any = {
+        //   "First term": true,
+        //   "Second term": true
+        // }
+        // listselection: any = {
+        //   "Check 1": true,
+        //   "Check 2": false,
+        //   "Check 3": true
+        // }
+        this.selectedValues = () => {
+            console.log('checklist selectedvalues', JSON.stringify(this.listselection));
+            let retObj = {};
+            for (let key of this.listelements) {
+                retObj[key] = this.listselection[key] ?? false;
+            }
+            return this.listselection;
+        };
+        this.dispatchValueChanged = () => {
+            console.log("dispatchValueChanged");
+            let customEvent = new CustomEvent('valueChanged', {
+                detail: { source: 'InnerElement', id: this.id },
+                bubbles: true,
+                composed: true
+            });
+            this.dispatchEvent(customEvent);
+        };
+        this.initListeners = () => {
+            let addButton = this.shadowRoot?.getElementById("add-button");
+            let addInput = this.shadowRoot?.getElementById("add-input");
+            addButton?.addEventListener("click", () => {
+                let newItem = addInput?.value;
+                if (newItem) {
+                    // this.listelements.push({ name: newItem });
+                    this.listselection[newItem] = false;
+                    addInput.value = "";
+                    this.dispatchValueChanged();
+                    this.loadMode();
+                }
+            });
+            let deleteButtons = this.shadowRoot?.querySelectorAll('.button-delete');
+            for (let deleteButton of deleteButtons) {
+                deleteButton.addEventListener('click', () => {
+                    let id = deleteButton.id;
+                    let index = parseInt(id.split('-')[2]);
+                    let listelement = this.listelements[index];
+                    this.listelements.splice(index, 1);
+                    delete this.listselection[listelement];
+                    this.dispatchValueChanged();
+                    this.loadMode();
+                });
+            }
+            let upButtons = this.shadowRoot?.querySelectorAll('.button-up');
+            for (let upButton of upButtons) {
+                upButton.addEventListener('click', () => {
+                    let id = upButton.id;
+                    let index = parseInt(id.split('-')[2]);
+                    this.listelements = this.reorderArray(this.listelements, index, index - 1);
+                    let newMap = this.reorderMap(new Map(Object.entries(this.listselection)), this.listelements);
+                    this.listselection = Object.fromEntries(newMap);
+                    this.dispatchValueChanged();
+                    this.loadMode();
+                });
+            }
+            let downButtons = this.shadowRoot?.querySelectorAll('.button-down');
+            for (let downButton of downButtons) {
+                downButton.addEventListener('click', () => {
+                    let id = downButton.id;
+                    let index = parseInt(id.split('-')[2]);
+                    this.listelements = this.reorderArray(this.listelements, index, index + 1);
+                    let newMap = this.reorderMap(new Map(Object.entries(this.listselection)), this.listelements);
+                    this.listselection = Object.fromEntries(newMap);
+                    this.dispatchValueChanged();
+                    this.loadMode();
+                });
+            }
+        };
+        this.loadMode = async () => {
+            console.log("loadMode", this.mode, this.listelements, this.listselection);
+            this.listelements = Object.keys(this.listselection);
+            if (this.mode == "admin") {
+                let checklistInputContainer = this.shadowRoot?.getElementById('checklist-input-container');
+                checklistInputContainer.style.display = this.readonly ? 'none' : 'flex';
+                let checklistList = this.shadowRoot?.getElementById("checklist-list");
+                let innerHTML = '';
+                if (Array.isArray(this.listelements)) {
+                    this.listelements.map((item, index) => {
+                        innerHTML += `
+          <div part="checklist-item" class="d-flex align-center">
+            <label part="checklist-checkbox-label">${(item ?? "")}</label>${!this.readonly && index > 0 ? `<button id="button-up-${index}" part="button-icon" class="mrl-5 material-symbols-outlined button-up">arrow_upward</button>` : ''}${!this.readonly && index < (this.listelements.length - 1) ? `<button id="button-down-${index}" part="button-icon" class="mrl-5 material-symbols-outlined button-down">arrow_downward</button>` : ''}${!this.readonly ? `<button id="button-delete-${index}" part="button-icon" class="mrl-5 material-icons button-delete">delete</button>` : ''}
+        </div>
+      `;
+                    });
+                }
+                checklistList.innerHTML = innerHTML;
+                console.log("checklistList", checklistList.innerHTML);
+                if (!this.readonly) {
+                    this.initListeners();
+                }
+            }
+            else {
+                let checklistList = this.shadowRoot?.getElementById("checklist-list");
+                let innerHTML = '';
+                if (Array.isArray(this.listelements)) {
+                    this.listelements.map((item) => {
+                        console.log('sf-multiselect-searcht rendering checkbox', this.listselection[(item ?? "")]);
+                        innerHTML += `
+          <div part="checklist-item" class="d-flex">
+            <input part="checklist-checkbox" type="checkbox" id="checkbox-${(item ?? "").replace(/ /g, '-')}" name="${(item ?? "")}" value="${(item ?? "")}" ${(this.listselection[(item ?? "")] ?? false) ? "checked" : ""} ${this.readonly ? "disabled" : ""}/>
+            <label part="checklist-checkbox-label" for="checkbox-${(item ?? "").replace(/ /g, '-')}">${(item ?? "")}</label>
+        </div>
+        `;
+                    });
+                }
+                checklistList.innerHTML = innerHTML;
+                for (const item of this.listelements) {
+                    const checkbox = this.shadowRoot?.getElementById(`checkbox-${(item ?? "").replace(/ /g, '-')}`);
+                    if (checkbox) {
+                        checkbox.addEventListener('change', () => {
+                            const name = item ?? "";
+                            this.listselection = {
+                                ...this.listselection,
+                                [name]: checkbox.checked
+                            };
+                            console.log('checklist selected', this.listselection, typeof (this.listselection));
+                            this.dispatchValueChanged();
+                        });
+                    }
+                    if (this.listselection[(item ?? "")] == null) {
+                        this.listselection[(item ?? "")] = false;
+                    }
+                }
+                this.dispatchValueChanged();
+            }
+        };
+    }
+    reorderArray(arr, oldIndex, newIndex) {
+        if (oldIndex === newIndex) {
+            return arr;
+        }
+        const newArr = [...arr];
+        const [item] = newArr.splice(oldIndex, 1);
+        newArr.splice(newIndex, 0, item);
+        return newArr;
+    }
+    reorderMap(map, newOrder) {
+        const reordered = new Map();
+        for (const key of newOrder) {
+            if (map.has(key)) {
+                reordered.set(key, map.get(key));
+            }
+        }
+        return reordered;
+    }
+    firstUpdated(_changedProperties) {
+        this.loadMode();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    render() {
+        if (this.mode == "admin") {
+            return html `
+      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+      <div part="checklist-container" class="d-flex flex-col">  
+        ${this.listname != "" ? `<h2 part="checklist-title">${this.listname}</h2>` : ''}
+        <div id="checklist-input-container" part="checklist-input-container" class="d-flex">
+          <input part="checklist-add-input" type="text" id="add-input" name="add-input" value="" placeholder="Add new item" />
+          <button id="add-button" part="checklist-add-button" class="ml-10">Add</button>
+        </div>
+        <div id="checklist-list" part="checklist-list" class="d-flex flex-col flex-wrap justify-center w-100-m-0">
+        </div>
+      </div>
+    `;
+        }
+        else {
+            return html `
+    <div part="checklist-container" class="d-flex">  
+      ${this.listname != "" ? `<h2 part="checklist-title">${this.listname}</h2>` : ''}
+      <div id="checklist-list" part="checklist-list" class="d-flex flex-col flex-wrap justify-center w-100-m-0">
+        
+        </div>
+    </div>
+    `;
+        }
+    }
+};
+SfMultiselectSearch.styles = css `
+    :root {
+      --color: #fcc419;
+      --shadow: #f08c00;
+      --glare: hsl(0 0% 100% / 0.75);
+      --font-size: clamp(.75rem, 2vw, 1rem);
+      --transition: 0.2s;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .d-flex {
+      display: flex;
+    }
+
+    .flex-col {
+      flex-direction: column;
+    }
+
+    .flex-wrap {
+      flex-wrap: wrap;
+    }
+
+    .justify-center {
+      justify-content: center;
+    }
+
+    .justify-between {
+      justify-content: space-between;
+    }
+
+    .justify-end {
+      justify-content: flex-end;
+    }
+
+    .w-100-m-0 {
+      width: 100%;
+    }
+    
+    .mb-20 {
+      margin-bottom: 20px;
+    }
+    
+    .mt-20 {
+      margin-top: 20px;
+    }
+    .mr-10 {
+      margin-right: 10px;
+    }
+    .m-0 {
+      margin: 0px;
+    }
+
+    .m-20 {
+      margin: 20px;
+    }
+    .md-20-ml-10 {
+      margin-top: 20px;
+      margin-bottom: 20px;
+      margin-left: 10px;
+      margin-right: 10px;
+    }
+    .mrl-5 {
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+    .mrl-10 {
+      margin-left: 10px;
+      margin-right: 10px;
+    }
+    .mt-10{
+      margin-top: 10px
+    }
+    .ml-10{
+      margin-left: 10px
+    }
+    .mr-20{
+      margin-right: 20px
+    }
+    .flex-grow {
+      flex-grow: 1;
+    }
+    .align-start {
+      align-items: flex-start;
+    }
+
+    .align-end {
+      align-items: flex-end;
+    }
+
+    .align-center {
+      align-items: center;
+    }
+    .align-stretch {
+      align-items: stretch;
+    }
+    body {
+      display: grid;
+      place-items: center;
+      min-height: 100vh;
+      font-family: 'Google Sans', sans-serif, system-ui;
+    }
+
+  `;
+__decorate([
+    property({ type: String })
+], SfMultiselectSearch.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean })
+], SfMultiselectSearch.prototype, "readonly", void 0);
+__decorate([
+    property()
+], SfMultiselectSearch.prototype, "listname", void 0);
+__decorate([
+    property({ type: Array })
+], SfMultiselectSearch.prototype, "listelements", void 0);
+__decorate([
+    property({ type: Object })
+], SfMultiselectSearch.prototype, "listselection", void 0);
+SfMultiselectSearch = __decorate([
+    customElement('sf-multiselect-search')
+], SfMultiselectSearch);
+export { SfMultiselectSearch };
+//# sourceMappingURL=sf-multiselect-search.js.map

package/dist/sf-checklist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sf-multiselect-search.js","sourceRoot":"","sources":["../src/sf-multiselect-search.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Superflow.dev\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html, css, PropertyValueMap } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/*\n\nModes: multiselect, select\nFlows: view,edit\n\n*/\n\n/**\n * SfMultiselectSearch element.\n * @fires renderComplete - When the list is populated\n * @fires valueChanged - When the value is changed\n * @property apiId - backend api id\n * @property label - input label\n * @property name - name of the input\n * @property mode - mode of operation\n * @property selectedId - id to preselect\n * @property selectedValue - callback function\n */\n@customElement('sf-multiselect-search')\nexport class SfMultiselectSearch extends LitElement {\n  static override styles = css`\n    :root {\n      --color: #fcc419;\n      --shadow: #f08c00;\n      --glare: hsl(0 0% 100% / 0.75);\n      --font-size: clamp(.75rem, 2vw, 1rem);\n      --transition: 0.2s;\n    }\n\n    * {\n      box-sizing: border-box;\n    }\n\n    .d-flex {\n      display: flex;\n    }\n\n    .flex-col {\n      flex-direction: column;\n    }\n\n    .flex-wrap {\n      flex-wrap: wrap;\n    }\n\n    .justify-center {\n      justify-content: center;\n    }\n\n    .justify-between {\n      justify-content: space-between;\n    }\n\n    .justify-end {\n      justify-content: flex-end;\n    }\n\n    .w-100-m-0 {\n      width: 100%;\n    }\n    \n    .mb-20 {\n      margin-bottom: 20px;\n    }\n    \n    .mt-20 {\n      margin-top: 20px;\n    }\n    .mr-10 {\n      margin-right: 10px;\n    }\n    .m-0 {\n      margin: 0px;\n    }\n\n    .m-20 {\n      margin: 20px;\n    }\n    .md-20-ml-10 {\n      margin-top: 20px;\n      margin-bottom: 20px;\n      margin-left: 10px;\n      margin-right: 10px;\n    }\n    .mrl-5 {\n      margin-left: 5px;\n      margin-right: 5px;\n    }\n    .mrl-10 {\n      margin-left: 10px;\n      margin-right: 10px;\n    }\n    .mt-10{\n      margin-top: 10px\n    }\n    .ml-10{\n      margin-left: 10px\n    }\n    .mr-20{\n      margin-right: 20px\n    }\n    .flex-grow {\n      flex-grow: 1;\n    }\n    .align-start {\n      align-items: flex-start;\n    }\n\n    .align-end {\n      align-items: flex-end;\n    }\n\n    .align-center {\n      align-items: center;\n    }\n    .align-stretch {\n      align-items: stretch;\n    }\n    body {\n      display: grid;\n      place-items: center;\n      min-height: 100vh;\n      font-family: 'Google Sans', sans-serif, system-ui;\n    }\n\n  `;\n\n  @property({ type: String })\n  // mode = \"\"\n  mode = \"admin\"\n\n  @property({ type: Boolean })\n  readonly = false\n  // readonly = true\n  @property()\n  listname = \"\"\n\n  @property({ type: Array })\n  listelements: string[] = []\n//   listelements: { name: string }[] = [\n//     {\n//         \"name\": \"Contract term 1\"\n//     },\n//     {\n//         \"name\": \"contract term 2\"\n//     },\n//     {\n//         \"name\": \"contract term 3\"\n//     }\n// ]\n  // listelements: { name: string }[] = [{\"name\": \"Terms1\"},{\"name\": \"Terms2\"}]\n  //   listelements: { name: string }[] = [\n  //     {\n  //         \"name\": \"item 1\"\n  //     },\n  //     {\n  //         \"name\": \"item 2\"\n  //     }\n  // ]\n\n  @property({ type: Object })\n  listselection: { [key: string]: boolean } = {}\n//   listselection: { [key: string]: boolean } = {\n//     \"Contract term 1\": true,\n//     \"contract term 2\": true,\n//     \"contract term 3\": true\n// }\n  // listselection: any = {\n  //   \"First term\": true,\n  //   \"Second term\": true\n  // }\n  // listselection: any = {\n  //   \"Check 1\": true,\n  //   \"Check 2\": false,\n  //   \"Check 3\": true\n  // }\n\n  selectedValues = () => {\n    console.log('checklist selectedvalues', JSON.stringify(this.listselection))\n    let retObj: { [key: string]: boolean } = {}\n    for (let key of this.listelements) {\n      retObj[key] = this.listselection[key]  ?? false\n    }\n    return this.listselection\n  }\n  dispatchValueChanged = () => {\n    console.log(\"dispatchValueChanged\");\n    let customEvent = new CustomEvent('valueChanged', {\n      detail: { source: 'InnerElement', id: this.id },\n      bubbles: true,\n      composed: true\n    });\n    this.dispatchEvent(customEvent);\n  }\n  reorderArray<T>(arr: T[], oldIndex: number, newIndex: number): T[] {\n    if (oldIndex === newIndex) {\n      return arr;\n    }\n\n    const newArr = [...arr];\n    const [item] = newArr.splice(oldIndex, 1);\n    newArr.splice(newIndex, 0, item);\n\n    return newArr;\n  }\n  reorderMap(map: Map<string, any>, newOrder: string[]): Map<string, any> {\n    const reordered = new Map<string, any>();\n    for (const key of newOrder) {\n      if (map.has(key)) {\n        reordered.set(key, map.get(key));\n      }\n    }\n    return reordered;\n  }\n  initListeners = () => {\n    let addButton = this.shadowRoot?.getElementById(\"add-button\") as HTMLButtonElement;\n    let addInput = this.shadowRoot?.getElementById(\"add-input\") as HTMLInputElement;\n    addButton?.addEventListener(\"click\", () => {\n      let newItem = addInput?.value;\n      if (newItem) {\n        // this.listelements.push({ name: newItem });\n        this.listselection[newItem] = false;\n        addInput.value = \"\";\n        this.dispatchValueChanged()\n        this.loadMode();\n      }\n    })\n\n    let deleteButtons = this.shadowRoot?.querySelectorAll('.button-delete') as NodeListOf<HTMLButtonElement>\n    for (let deleteButton of deleteButtons) {\n      deleteButton.addEventListener('click', () => {\n        let id = deleteButton.id\n        let index = parseInt(id.split('-')[2])\n        let listelement = this.listelements[index]\n        this.listelements.splice(index, 1)\n        delete this.listselection[listelement]\n        this.dispatchValueChanged()\n        this.loadMode();\n      })\n    }\n    let upButtons = this.shadowRoot?.querySelectorAll('.button-up') as NodeListOf<HTMLButtonElement>\n    for (let upButton of upButtons) {\n      upButton.addEventListener('click', () => {\n        let id = upButton.id\n        let index = parseInt(id.split('-')[2])\n        this.listelements = this.reorderArray(this.listelements, index, index - 1)\n        let newMap = this.reorderMap(new Map(Object.entries(this.listselection)), this.listelements)\n        this.listselection = Object.fromEntries(newMap)\n        this.dispatchValueChanged()\n        this.loadMode();\n      })\n    }\n    let downButtons = this.shadowRoot?.querySelectorAll('.button-down') as NodeListOf<HTMLButtonElement>\n    for (let downButton of downButtons) {\n      downButton.addEventListener('click', () => {\n        let id = downButton.id\n        let index = parseInt(id.split('-')[2])\n        this.listelements = this.reorderArray(this.listelements, index, index + 1)\n        let newMap = this.reorderMap(new Map(Object.entries(this.listselection)), this.listelements)\n        this.listselection = Object.fromEntries(newMap)\n        this.dispatchValueChanged()\n        this.loadMode();\n      })\n    }\n  }\n  loadMode = async () => {\n    console.log(\"loadMode\", this.mode, this.listelements, this.listselection);\n    this.listelements = Object.keys(this.listselection)\n    if (this.mode == \"admin\") {\n      let checklistInputContainer = this.shadowRoot?.getElementById('checklist-input-container') as HTMLDivElement\n      checklistInputContainer.style.display = this.readonly ? 'none' : 'flex';\n      let checklistList = this.shadowRoot?.getElementById(\"checklist-list\") as HTMLDivElement;\n      let innerHTML = ''\n      if (Array.isArray(this.listelements)) {\n        this.listelements.map((item, index) => {\n          innerHTML += `\n          <div part=\"checklist-item\" class=\"d-flex align-center\">\n            <label part=\"checklist-checkbox-label\">${(item ?? \"\")}</label>${!this.readonly && index > 0 ? `<button id=\"button-up-${index}\" part=\"button-icon\" class=\"mrl-5 material-symbols-outlined button-up\">arrow_upward</button>` : ''}${!this.readonly && index < (this.listelements.length - 1) ? `<button id=\"button-down-${index}\" part=\"button-icon\" class=\"mrl-5 material-symbols-outlined button-down\">arrow_downward</button>` : ''}${!this.readonly ? `<button id=\"button-delete-${index}\" part=\"button-icon\" class=\"mrl-5 material-icons button-delete\">delete</button>` : ''}\n        </div>\n      `});\n      }\n      checklistList.innerHTML = innerHTML;\n      console.log(\"checklistList\", checklistList.innerHTML);\n      if (!this.readonly) {\n        this.initListeners();\n      }\n    } else {\n      let checklistList = this.shadowRoot?.getElementById(\"checklist-list\") as HTMLDivElement;\n      let innerHTML = ''\n      if (Array.isArray(this.listelements)) {\n        this.listelements.map((item) => {\n          console.log('sf-multiselect-searcht rendering checkbox', this.listselection[(item ?? \"\")])\n          innerHTML += `\n          <div part=\"checklist-item\" class=\"d-flex\">\n            <input part=\"checklist-checkbox\" type=\"checkbox\" id=\"checkbox-${(item ?? \"\").replace(/ /g, '-')}\" name=\"${(item ?? \"\")}\" value=\"${(item ?? \"\")}\" ${(this.listselection[(item ?? \"\")] ?? false) ? \"checked\" : \"\"} ${this.readonly ? \"disabled\" : \"\"}/>\n            <label part=\"checklist-checkbox-label\" for=\"checkbox-${(item ?? \"\").replace(/ /g, '-')}\">${(item ?? \"\")}</label>\n        </div>\n        `});\n      }\n      checklistList.innerHTML = innerHTML;\n\n      for (const item of this.listelements) {\n        const checkbox = this.shadowRoot?.getElementById(`checkbox-${(item ?? \"\").replace(/ /g, '-')}`) as HTMLInputElement;\n        if (checkbox) {\n          checkbox.addEventListener('change', () => {\n            const name = item ?? \"\";\n            this.listselection = {\n              ...this.listselection,\n              [name]: checkbox.checked\n            };\n            console.log('checklist selected', this.listselection, typeof (this.listselection));\n            this.dispatchValueChanged()\n          });\n        }\n        if (this.listselection[(item ?? \"\")] == null) {\n          this.listselection[(item ?? \"\")] = false;\n        }\n      }\n\n      this.dispatchValueChanged();\n    }\n  }\n\n  protected override firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n\n    this.loadMode();\n\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n  }\n  override render() {\n    if (this.mode == \"admin\") {\n      return html`\n      <link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n      <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0\" />\n      <div part=\"checklist-container\" class=\"d-flex flex-col\">  \n        ${this.listname != \"\" ? `<h2 part=\"checklist-title\">${this.listname}</h2>` : ''}\n        <div id=\"checklist-input-container\" part=\"checklist-input-container\" class=\"d-flex\">\n          <input part=\"checklist-add-input\" type=\"text\" id=\"add-input\" name=\"add-input\" value=\"\" placeholder=\"Add new item\" />\n          <button id=\"add-button\" part=\"checklist-add-button\" class=\"ml-10\">Add</button>\n        </div>\n        <div id=\"checklist-list\" part=\"checklist-list\" class=\"d-flex flex-col flex-wrap justify-center w-100-m-0\">\n        </div>\n      </div>\n    `;\n    } else {\n      return html`\n    <div part=\"checklist-container\" class=\"d-flex\">  \n      ${this.listname != \"\" ? `<h2 part=\"checklist-title\">${this.listname}</h2>` : ''}\n      <div id=\"checklist-list\" part=\"checklist-list\" class=\"d-flex flex-col flex-wrap justify-center w-100-m-0\">\n        \n        </div>\n    </div>\n    `;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n  }\n}\n"]}

package/dist/sf-multiselect-search.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright 2022 Superflow.dev
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, PropertyValueMap } from 'lit';
+/**
+ * SfMultiselectSearch element.
+ * @fires renderComplete - When the list is populated
+ * @fires valueChanged - When the value is changed
+ * @property apiId - backend api id
+ * @property label - input label
+ * @property name - name of the input
+ * @property mode - mode of operation
+ * @property selectedId - id to preselect
+ * @property selectedValue - callback function
+ */
+export declare class SfMultiselectSearch extends LitElement {
+    static styles: import("lit").CSSResult;
+    mode: string;
+    readonly: boolean;
+    listname: string;
+    listelements: {
+        name: string;
+        id: string;
+    }[];
+    listselection: {
+        [key: string]: boolean;
+    };
+    selectedValues: () => {
+        [key: string]: boolean;
+    };
+    dispatchValueChanged: () => void;
+    initListeners: () => void;
+    populateSelectedList: () => void;
+    populateList: () => void;
+    loadMode: () => Promise<void>;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+    }
+}
+//# sourceMappingURL=sf-multiselect-search.d.ts.map

package/dist/sf-multiselect-search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sf-multiselect-search.d.ts","sourceRoot":"","sources":["../src/sf-multiselect-search.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAa,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAU9D;;;;;;;;;;GAUG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAgB,MAAM,0BA8GpB;IAIF,IAAI,SAAU;IAGd,QAAQ,UAAQ;IAGhB,QAAQ,SAAK;IAIb,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,CAa3C;IAYD,aAAa,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAK;IAgB9C,cAAc;;MASb;IACD,oBAAoB,aAUnB;IAED,aAAa,aA6BZ;IAED,oBAAoB,aAsCnB;IAED,YAAY,aAyCX;IAED,QAAQ,sBAOP;cAEkB,YAAY,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IAMnG,iBAAiB;IAGjB,MAAM;CAehB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;KAC9B;CACF"}

package/dist/sf-multiselect-search.js

@@ -0,0 +1,367 @@
+/**
+ * @license
+ * Copyright 2022 Superflow.dev
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+/*
+
+Modes: multiselect, select
+Flows: view,edit
+
+*/
+/**
+ * SfMultiselectSearch element.
+ * @fires renderComplete - When the list is populated
+ * @fires valueChanged - When the value is changed
+ * @property apiId - backend api id
+ * @property label - input label
+ * @property name - name of the input
+ * @property mode - mode of operation
+ * @property selectedId - id to preselect
+ * @property selectedValue - callback function
+ */
+let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
+    constructor() {
+        super(...arguments);
+        // mode = ""
+        this.mode = "admin";
+        this.readonly = false;
+        // readonly = true
+        this.listname = "";
+        // listelements: string[] = []
+        this.listelements = [
+            {
+                "name": "Contract term 1",
+                "id": "ct1"
+            },
+            {
+                "name": "contract term 2",
+                "id": "ct2"
+            },
+            {
+                "name": "contract term 3",
+                "id": "ct3"
+            }
+        ];
+        // listelements: { name: string }[] = [{"name": "Terms1"},{"name": "Terms2"}]
+        //   listelements: { name: string }[] = [
+        //     {
+        //         "name": "item 1"
+        //     },
+        //     {
+        //         "name": "item 2"
+        //     }
+        // ]
+        this.listselection = {};
+        //   listselection: { [key: string]: boolean } = {
+        //     "Contract term 1": true,
+        //     "contract term 2": true,
+        //     "contract term 3": true
+        // }
+        // listselection: any = {
+        //   "First term": true,
+        //   "Second term": true
+        // }
+        // listselection: any = {
+        //   "Check 1": true,
+        //   "Check 2": false,
+        //   "Check 3": true
+        // }
+        this.selectedValues = () => {
+            console.log('multiselect selectedvalues', JSON.stringify(this.listselection));
+            let retObj = {};
+            for (let key of this.listelements) {
+                if (this.listselection[key.id] == null && this.listselection[key.id] !== false) {
+                    retObj[key.id] = this.listselection[key.id];
+                }
+            }
+            return retObj;
+        };
+        this.dispatchValueChanged = () => {
+            console.log("dispatchValueChanged");
+            this.populateSelectedList();
+            let customEvent = new CustomEvent('valueChanged', {
+                detail: { source: 'InnerElement', id: this.id },
+                bubbles: true,
+                composed: true
+            });
+            this.dispatchEvent(customEvent);
+        };
+        this.initListeners = () => {
+            let dropDownButton = this.shadowRoot?.getElementById("dropdown-button");
+            console.log("dropdownButton", dropDownButton.innerHTML);
+            dropDownButton.addEventListener('click', (e) => {
+                let multiselectList = this.shadowRoot?.getElementById("select-list");
+                console.log("checklistList", multiselectList.classList);
+                let button = e.target;
+                if (button.innerHTML === "keyboard_arrow_down") {
+                    multiselectList.classList.remove("hide");
+                    button.innerHTML = "keyboard_arrow_up";
+                }
+                else {
+                    multiselectList.classList.add("hide");
+                    button.innerHTML = "keyboard_arrow_down";
+                }
+            });
+            let searchInput = this.shadowRoot?.getElementById("search-input");
+            searchInput.addEventListener('input', (e) => {
+                this.populateList();
+                let searchInput = e.target;
+                let filterText = searchInput.value.toLowerCase();
+                if (filterText !== "") {
+                    let multiselectList = this.shadowRoot?.getElementById("select-list");
+                    multiselectList.classList.remove("hide");
+                    let dropdownButton = this.shadowRoot?.getElementById("dropdown-button");
+                    dropdownButton.innerHTML = "keyboard_arrow_up";
+                }
+            });
+        };
+        this.populateSelectedList = () => {
+            let searchInput = this.shadowRoot?.getElementById("search-input");
+            let filterText = searchInput.value.toLowerCase();
+            console.log("populateSelectedList", this.listelements, filterText);
+            let selectedList = this.shadowRoot?.getElementById("selected-list");
+            let innerHTML = '';
+            if (Array.isArray(this.listelements)) {
+                this.listelements.map((item) => {
+                    console.log('sf-multiselect-searcht rendering checkbox', this.listselection[(item.id ?? "")]);
+                    if (this.listselection[(item.id ?? "")] !== true) {
+                        return;
+                    }
+                    innerHTML += `
+        <div part="selected-item" class="d-flex align-center mr-10">
+          <span id="selected-delete-${(item.id ?? "").replace(/ /g, '-')}" class="material-icons" part="selected-unselect">cancel</span>
+          <label part="selected-label" id="selected-label-${(item.id ?? "").replace(/ /g, '-')}">${(item.name ?? "")}</label>
+        </div>
+      `;
+                });
+            }
+            selectedList.innerHTML = innerHTML;
+            for (const item of this.listelements) {
+                const deleteSpan = this.shadowRoot?.getElementById(`selected-delete-${(item.id ?? "").replace(/ /g, '-')}`);
+                if (deleteSpan != null) {
+                    deleteSpan.addEventListener('click', () => {
+                        const id = item.id ?? "";
+                        delete this.listselection[id];
+                        this.populateSelectedList();
+                    });
+                }
+                const selectedLabel = this.shadowRoot?.getElementById(`selected-label-${(item.id ?? "").replace(/ /g, '-')}`);
+                if (selectedLabel != null) {
+                    selectedLabel.addEventListener('click', () => {
+                        const id = item.id ?? "";
+                        delete this.listselection[id];
+                        this.populateSelectedList();
+                    });
+                }
+            }
+        };
+        this.populateList = () => {
+            let searchInput = this.shadowRoot?.getElementById("search-input");
+            let filterText = searchInput.value.toLowerCase();
+            console.log("populateList", this.listelements, filterText);
+            let miltiselectList = this.shadowRoot?.getElementById("select-list");
+            let innerHTML = '';
+            if (Array.isArray(this.listelements)) {
+                this.listelements.map((item) => {
+                    console.log('sf-multiselect-searcht rendering checkbox', this.listselection[(item.id ?? "")]);
+                    if (filterText !== "" && !(item.name ?? "").toLowerCase().includes(filterText)) {
+                        return;
+                    }
+                    innerHTML += `
+        <div part="multiselect-item" class="d-flex">
+          <input part="multiselect-checkbox" type="checkbox" id="checkbox-${(item.id ?? "").replace(/ /g, '-')}" name="${(item.name ?? "")}" value="${(item.id ?? "")}" ${(this.listselection[(item.id ?? "")] ?? false) ? "checked" : ""} ${this.readonly ? "disabled" : ""}/>
+          <label part="multiselect-checkbox-label" for="checkbox-${(item.id ?? "").replace(/ /g, '-')}">${(item.name ?? "")}</label>
+        </div>
+      `;
+                });
+            }
+            miltiselectList.innerHTML = innerHTML;
+            for (const item of this.listelements) {
+                const checkbox = this.shadowRoot?.getElementById(`checkbox-${(item.id ?? "").replace(/ /g, '-')}`);
+                if (checkbox) {
+                    checkbox.addEventListener('change', () => {
+                        const id = item.id ?? "";
+                        this.listselection = {
+                            ...this.listselection,
+                            [id]: checkbox.checked
+                        };
+                        console.log('checklist selected', this.listselection, typeof (this.listselection));
+                        this.dispatchValueChanged();
+                        let multiselectList = this.shadowRoot?.getElementById("select-list");
+                        multiselectList.classList.add("hide");
+                        let dropdownButton = this.shadowRoot?.getElementById("dropdown-button");
+                        dropdownButton.innerHTML = "keyboard_arrow_down";
+                    });
+                }
+            }
+        };
+        this.loadMode = async () => {
+            console.log("loadMode", this.mode, this.listelements, this.listselection);
+            // this.listelements = Object.keys(this.listselection)
+            this.populateList();
+            this.dispatchValueChanged();
+            this.initListeners();
+        };
+    }
+    firstUpdated(_changedProperties) {
+        this.loadMode();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    render() {
+        return html `
+      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+      <div part="multiselect-container" class="d-flex flex-col align-stretch">  
+        ${this.listname != "" ? `<h2 part="multiselect-title">${this.listname}</h2>` : ''}
+        <div id="multiselect-input-container" part="multiselect-input-container" class="d-flex">
+          <input part="input" type="text" id="search-input" name="search-input" class="flex-grow" value="" placeholder="Search"/>
+          <button id="dropdown-button" part="button-icon" class="material-icons">keyboard_arrow_down</button>
+        </div>
+        <div id="select-list" part="select-list" class="hide d-flex flex-col flex-wrap justify-center"></div>
+      </div>
+      <div id="selected-list" part="selected-list" class="d-flex flex-wrap"></div>
+    `;
+    }
+};
+SfMultiselectSearch.styles = css `
+    :root {
+      --color: #fcc419;
+      --shadow: #f08c00;
+      --glare: hsl(0 0% 100% / 0.75);
+      --font-size: clamp(.75rem, 2vw, 1rem);
+      --transition: 0.2s;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .d-flex {
+      display: flex;
+    }
+
+    .flex-col {
+      flex-direction: column;
+    }
+
+    .flex-wrap {
+      flex-wrap: wrap;
+    }
+
+    .justify-center {
+      justify-content: center;
+    }
+
+    .justify-between {
+      justify-content: space-between;
+    }
+
+    .justify-end {
+      justify-content: flex-end;
+    }
+
+    .w-100-m-0 {
+      width: 100%;
+    }
+    
+    .mb-20 {
+      margin-bottom: 20px;
+    }
+    
+    .mt-20 {
+      margin-top: 20px;
+    }
+    .mr-10 {
+      margin-right: 10px;
+    }
+    .mr-5 {
+      margin-right: 5px;
+    }
+    .m-0 {
+      margin: 0px;
+    }
+
+    .m-20 {
+      margin: 20px;
+    }
+    .md-20-ml-10 {
+      margin-top: 20px;
+      margin-bottom: 20px;
+      margin-left: 10px;
+      margin-right: 10px;
+    }
+    .mrl-5 {
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+    .mrl-10 {
+      margin-left: 10px;
+      margin-right: 10px;
+    }
+    .mt-10{
+      margin-top: 10px
+    }
+    .ml-10{
+      margin-left: 10px
+    }
+    .mr-20{
+      margin-right: 20px
+    }
+    .flex-grow {
+      flex-grow: 1;
+    }
+    .align-start {
+      align-items: flex-start;
+    }
+
+    .align-end {
+      align-items: flex-end;
+    }
+
+    .align-center {
+      align-items: center;
+    }
+    .align-stretch {
+      align-items: stretch;
+    }
+    body {
+      display: grid;
+      place-items: center;
+      min-height: 100vh;
+      font-family: 'Google Sans', sans-serif, system-ui;
+    }
+    .hide {
+      display: none;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], SfMultiselectSearch.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean })
+], SfMultiselectSearch.prototype, "readonly", void 0);
+__decorate([
+    property()
+], SfMultiselectSearch.prototype, "listname", void 0);
+__decorate([
+    property({ type: Array })
+], SfMultiselectSearch.prototype, "listelements", void 0);
+__decorate([
+    property({ type: Object })
+], SfMultiselectSearch.prototype, "listselection", void 0);
+SfMultiselectSearch = __decorate([
+    customElement('sf-multiselect-search')
+], SfMultiselectSearch);
+export { SfMultiselectSearch };
+//# sourceMappingURL=sf-multiselect-search.js.map

package/dist/sf-multiselect-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sf-multiselect-search.js","sourceRoot":"","sources":["../src/sf-multiselect-search.ts"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * @license\r\n * Copyright 2022 Superflow.dev\r\n * SPDX-License-Identifier: MIT\r\n */\r\n\r\nimport { LitElement, html, css, PropertyValueMap } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\n/*\r\n\r\nModes: multiselect, select\r\nFlows: view,edit\r\n\r\n*/\r\n\r\n/**\r\n * SfMultiselectSearch element.\r\n * @fires renderComplete - When the list is populated\r\n * @fires valueChanged - When the value is changed\r\n * @property apiId - backend api id\r\n * @property label - input label\r\n * @property name - name of the input\r\n * @property mode - mode of operation\r\n * @property selectedId - id to preselect\r\n * @property selectedValue - callback function\r\n */\r\n@customElement('sf-multiselect-search')\r\nexport class SfMultiselectSearch extends LitElement {\r\n  static override styles = css`\r\n    :root {\r\n      --color: #fcc419;\r\n      --shadow: #f08c00;\r\n      --glare: hsl(0 0% 100% / 0.75);\r\n      --font-size: clamp(.75rem, 2vw, 1rem);\r\n      --transition: 0.2s;\r\n    }\r\n\r\n    * {\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .d-flex {\r\n      display: flex;\r\n    }\r\n\r\n    .flex-col {\r\n      flex-direction: column;\r\n    }\r\n\r\n    .flex-wrap {\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .justify-center {\r\n      justify-content: center;\r\n    }\r\n\r\n    .justify-between {\r\n      justify-content: space-between;\r\n    }\r\n\r\n    .justify-end {\r\n      justify-content: flex-end;\r\n    }\r\n\r\n    .w-100-m-0 {\r\n      width: 100%;\r\n    }\r\n    \r\n    .mb-20 {\r\n      margin-bottom: 20px;\r\n    }\r\n    \r\n    .mt-20 {\r\n      margin-top: 20px;\r\n    }\r\n    .mr-10 {\r\n      margin-right: 10px;\r\n    }\r\n    .mr-5 {\r\n      margin-right: 5px;\r\n    }\r\n    .m-0 {\r\n      margin: 0px;\r\n    }\r\n\r\n    .m-20 {\r\n      margin: 20px;\r\n    }\r\n    .md-20-ml-10 {\r\n      margin-top: 20px;\r\n      margin-bottom: 20px;\r\n      margin-left: 10px;\r\n      margin-right: 10px;\r\n    }\r\n    .mrl-5 {\r\n      margin-left: 5px;\r\n      margin-right: 5px;\r\n    }\r\n    .mrl-10 {\r\n      margin-left: 10px;\r\n      margin-right: 10px;\r\n    }\r\n    .mt-10{\r\n      margin-top: 10px\r\n    }\r\n    .ml-10{\r\n      margin-left: 10px\r\n    }\r\n    .mr-20{\r\n      margin-right: 20px\r\n    }\r\n    .flex-grow {\r\n      flex-grow: 1;\r\n    }\r\n    .align-start {\r\n      align-items: flex-start;\r\n    }\r\n\r\n    .align-end {\r\n      align-items: flex-end;\r\n    }\r\n\r\n    .align-center {\r\n      align-items: center;\r\n    }\r\n    .align-stretch {\r\n      align-items: stretch;\r\n    }\r\n    body {\r\n      display: grid;\r\n      place-items: center;\r\n      min-height: 100vh;\r\n      font-family: 'Google Sans', sans-serif, system-ui;\r\n    }\r\n    .hide {\r\n      display: none;\r\n    }\r\n  `;\r\n\r\n  @property({ type: String })\r\n  // mode = \"\"\r\n  mode = \"admin\"\r\n\r\n  @property({ type: Boolean })\r\n  readonly = false\r\n  // readonly = true\r\n  @property()\r\n  listname = \"\"\r\n\r\n  @property({ type: Array })\r\n  // listelements: string[] = []\r\n  listelements: { name: string, id: string }[] = [\r\n    {\r\n      \"name\": \"Contract term 1\",\r\n      \"id\": \"ct1\"\r\n    },\r\n    {\r\n      \"name\": \"contract term 2\",\r\n      \"id\": \"ct2\"\r\n    },\r\n    {\r\n      \"name\": \"contract term 3\",\r\n      \"id\": \"ct3\"\r\n    }\r\n  ]\r\n  // listelements: { name: string }[] = [{\"name\": \"Terms1\"},{\"name\": \"Terms2\"}]\r\n  //   listelements: { name: string }[] = [\r\n  //     {\r\n  //         \"name\": \"item 1\"\r\n  //     },\r\n  //     {\r\n  //         \"name\": \"item 2\"\r\n  //     }\r\n  // ]\r\n\r\n  @property({ type: Object })\r\n  listselection: { [key: string]: boolean } = {}\r\n  //   listselection: { [key: string]: boolean } = {\r\n  //     \"Contract term 1\": true,\r\n  //     \"contract term 2\": true,\r\n  //     \"contract term 3\": true\r\n  // }\r\n  // listselection: any = {\r\n  //   \"First term\": true,\r\n  //   \"Second term\": true\r\n  // }\r\n  // listselection: any = {\r\n  //   \"Check 1\": true,\r\n  //   \"Check 2\": false,\r\n  //   \"Check 3\": true\r\n  // }\r\n\r\n  selectedValues = () => {\r\n    console.log('multiselect selectedvalues', JSON.stringify(this.listselection))\r\n    let retObj: { [key: string]: boolean } = {}\r\n    for (let key of this.listelements) {\r\n      if (this.listselection[key.id] == null && this.listselection[key.id] !== false) {\r\n        retObj[key.id] = this.listselection[key.id]\r\n      }\r\n    }\r\n    return retObj\r\n  }\r\n  dispatchValueChanged = () => {\r\n    console.log(\"dispatchValueChanged\");\r\n    this.populateSelectedList();\r\n    let customEvent = new CustomEvent('valueChanged', {\r\n      detail: { source: 'InnerElement', id: this.id },\r\n      bubbles: true,\r\n      composed: true\r\n    });\r\n    this.dispatchEvent(customEvent);\r\n\r\n  }\r\n\r\n  initListeners = () => {\r\n    let dropDownButton = this.shadowRoot?.getElementById(\"dropdown-button\") as HTMLButtonElement;\r\n    console.log(\"dropdownButton\", dropDownButton.innerHTML);\r\n    dropDownButton.addEventListener('click', (e) => {\r\n      let multiselectList = this.shadowRoot?.getElementById(\"select-list\") as HTMLDivElement;\r\n      console.log(\"checklistList\", multiselectList.classList);\r\n      let button = e.target as HTMLButtonElement;\r\n      if (button.innerHTML === \"keyboard_arrow_down\") {\r\n        multiselectList.classList.remove(\"hide\");\r\n        button.innerHTML = \"keyboard_arrow_up\"\r\n      } else {\r\n        multiselectList.classList.add(\"hide\");\r\n        button.innerHTML = \"keyboard_arrow_down\"\r\n      }\r\n\r\n    })\r\n\r\n    let searchInput = this.shadowRoot?.getElementById(\"search-input\") as HTMLInputElement;\r\n    searchInput.addEventListener('input', (e) => {\r\n      this.populateList();\r\n      let searchInput = e.target as HTMLInputElement;\r\n      let filterText = searchInput.value.toLowerCase();\r\n      if (filterText !== \"\") {\r\n        let multiselectList = this.shadowRoot?.getElementById(\"select-list\") as HTMLDivElement;\r\n        multiselectList.classList.remove(\"hide\");\r\n        let dropdownButton = this.shadowRoot?.getElementById(\"dropdown-button\") as HTMLButtonElement;\r\n        dropdownButton.innerHTML = \"keyboard_arrow_up\"\r\n      }\r\n    })\r\n  }\r\n\r\n  populateSelectedList = () => {\r\n    let searchInput = this.shadowRoot?.getElementById(\"search-input\") as HTMLInputElement;\r\n    let filterText = searchInput.value.toLowerCase();\r\n    console.log(\"populateSelectedList\", this.listelements, filterText);\r\n    let selectedList = this.shadowRoot?.getElementById(\"selected-list\") as HTMLDivElement;\r\n    let innerHTML = ''\r\n    if (Array.isArray(this.listelements)) {\r\n      this.listelements.map((item) => {\r\n        console.log('sf-multiselect-searcht rendering checkbox', this.listselection[(item.id ?? \"\")])\r\n        if (this.listselection[(item.id ?? \"\")] !== true) {\r\n          return;\r\n        }\r\n        innerHTML += `\r\n        <div part=\"selected-item\" class=\"d-flex align-center mr-10\">\r\n          <span id=\"selected-delete-${(item.id ?? \"\").replace(/ /g, '-')}\" class=\"material-icons\" part=\"selected-unselect\">cancel</span>\r\n          <label part=\"selected-label\" id=\"selected-label-${(item.id ?? \"\").replace(/ /g, '-')}\">${(item.name ?? \"\")}</label>\r\n        </div>\r\n      `});\r\n    }\r\n    selectedList.innerHTML = innerHTML;\r\n    for (const item of this.listelements) {\r\n      const deleteSpan = this.shadowRoot?.getElementById(`selected-delete-${(item.id ?? \"\").replace(/ /g, '-')}`) as HTMLSpanElement;\r\n      if (deleteSpan != null) {\r\n        deleteSpan.addEventListener('click', () => {\r\n          const id = item.id ?? \"\";\r\n          delete this.listselection[id];\r\n          this.populateSelectedList();\r\n        });\r\n      }\r\n      const selectedLabel = this.shadowRoot?.getElementById(`selected-label-${(item.id ?? \"\").replace(/ /g, '-')}`) as HTMLLabelElement;\r\n      if (selectedLabel != null) {\r\n        selectedLabel.addEventListener('click', () => {\r\n          const id = item.id ?? \"\";\r\n          delete this.listselection[id];\r\n          this.populateSelectedList();\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  populateList = () => {\r\n    let searchInput = this.shadowRoot?.getElementById(\"search-input\") as HTMLInputElement;\r\n    let filterText = searchInput.value.toLowerCase();\r\n    console.log(\"populateList\", this.listelements, filterText);\r\n    let miltiselectList = this.shadowRoot?.getElementById(\"select-list\") as HTMLDivElement;\r\n    let innerHTML = ''\r\n    if (Array.isArray(this.listelements)) {\r\n      this.listelements.map((item) => {\r\n        console.log('sf-multiselect-searcht rendering checkbox', this.listselection[(item.id ?? \"\")])\r\n        if (filterText !== \"\" && !(item.name ?? \"\").toLowerCase().includes(filterText)) {\r\n          return;\r\n        }\r\n        innerHTML += `\r\n        <div part=\"multiselect-item\" class=\"d-flex\">\r\n          <input part=\"multiselect-checkbox\" type=\"checkbox\" id=\"checkbox-${(item.id ?? \"\").replace(/ /g, '-')}\" name=\"${(item.name ?? \"\")}\" value=\"${(item.id ?? \"\")}\" ${(this.listselection[(item.id ?? \"\")] ?? false) ? \"checked\" : \"\"} ${this.readonly ? \"disabled\" : \"\"}/>\r\n          <label part=\"multiselect-checkbox-label\" for=\"checkbox-${(item.id ?? \"\").replace(/ /g, '-')}\">${(item.name ?? \"\")}</label>\r\n        </div>\r\n      `});\r\n    }\r\n    miltiselectList.innerHTML = innerHTML;\r\n\r\n    for (const item of this.listelements) {\r\n      const checkbox = this.shadowRoot?.getElementById(`checkbox-${(item.id ?? \"\").replace(/ /g, '-')}`) as HTMLInputElement;\r\n      if (checkbox) {\r\n        checkbox.addEventListener('change', () => {\r\n          const id = item.id ?? \"\";\r\n          this.listselection = {\r\n            ...this.listselection,\r\n            [id]: checkbox.checked\r\n          };\r\n          console.log('checklist selected', this.listselection, typeof (this.listselection));\r\n          this.dispatchValueChanged()\r\n          let multiselectList = this.shadowRoot?.getElementById(\"select-list\") as HTMLDivElement;\r\n          multiselectList.classList.add(\"hide\");\r\n          let dropdownButton = this.shadowRoot?.getElementById(\"dropdown-button\") as HTMLButtonElement;\r\n          dropdownButton.innerHTML = \"keyboard_arrow_down\"\r\n        });\r\n      }\r\n    }\r\n\r\n\r\n  }\r\n\r\n  loadMode = async () => {\r\n    console.log(\"loadMode\", this.mode, this.listelements, this.listselection);\r\n    // this.listelements = Object.keys(this.listselection)\r\n\r\n    this.populateList()\r\n    this.dispatchValueChanged();\r\n    this.initListeners()\r\n  }\r\n\r\n  protected override firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\r\n\r\n    this.loadMode();\r\n\r\n  }\r\n\r\n  override connectedCallback() {\r\n    super.connectedCallback()\r\n  }\r\n  override render() {\r\n    return html`\r\n      <link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\r\n      <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0\" />\r\n      <div part=\"multiselect-container\" class=\"d-flex flex-col align-stretch\">  \r\n        ${this.listname != \"\" ? `<h2 part=\"multiselect-title\">${this.listname}</h2>` : ''}\r\n        <div id=\"multiselect-input-container\" part=\"multiselect-input-container\" class=\"d-flex\">\r\n          <input part=\"input\" type=\"text\" id=\"search-input\" name=\"search-input\" class=\"flex-grow\" value=\"\" placeholder=\"Search\"/>\r\n          <button id=\"dropdown-button\" part=\"button-icon\" class=\"material-icons\">keyboard_arrow_down</button>\r\n        </div>\r\n        <div id=\"select-list\" part=\"select-list\" class=\"hide d-flex flex-col flex-wrap justify-center\"></div>\r\n      </div>\r\n      <div id=\"selected-list\" part=\"selected-list\" class=\"d-flex flex-wrap\"></div>\r\n    `;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n  }\r\n}\r\n"]}

package/dist/test/sf-checklist_test.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2022 Superflows.dev
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=sf-checklist_test.d.ts.map

package/dist/test/sf-checklist_test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sf-checklist_test.d.ts","sourceRoot":"","sources":["../../src/test/sf-checklist_test.ts"],"names":[],"mappings":"AAAA;;;;GAIG"}

package/dist/test/sf-checklist_test.js

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2022 Superflows.dev
+ * SPDX-License-Identifier: MIT
+ */
+import { SfMultiselectSearch } from '../sf-multiselect-search.js';
+// import { stub } from 'sinon';
+// import {fixture, assert} from '@open-wc/testing';
+import { assert } from '@open-wc/testing';
+// import {html} from 'lit/static-html.js';
+//const TIMEOUT = 2000;
+suite('sf-multiselect-search > left menu', () => {
+    test('is defined', () => {
+        const el = document.createElement('sf-multiselect-search');
+        assert.instanceOf(el, SfMultiselectSearch);
+    });
+});
+//# sourceMappingURL=sf-checklist_test.js.map

package/dist/test/sf-checklist_test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sf-checklist_test.js","sourceRoot":"","sources":["../../src/test/sf-checklist_test.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,mBAAmB,EAAC,MAAM,6BAA6B,CAAC;AAChE,gCAAgC;AAChC,oDAAoD;AACpD,OAAO,EAAC,MAAM,EAAC,MAAM,kBAAkB,CAAC;AACxC,2CAA2C;AAE3C,uBAAuB;AACvB,KAAK,CAAC,mCAAmC,EAAE,GAAG,EAAE;IAE9C,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE;QACtB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAC3D,MAAM,CAAC,UAAU,CAAC,EAAE,EAAE,mBAAmB,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;AAGL,CAAC,CAAC,CAAC","sourcesContent":["/**\r\n * @license\r\n * Copyright 2022 Superflows.dev\r\n * SPDX-License-Identifier: MIT\r\n */\r\n\r\nimport {SfMultiselectSearch} from '../sf-multiselect-search.js';\r\n// import { stub } from 'sinon';\r\n// import {fixture, assert} from '@open-wc/testing';\r\nimport {assert} from '@open-wc/testing';\r\n// import {html} from 'lit/static-html.js';\r\n\r\n//const TIMEOUT = 2000;\r\nsuite('sf-multiselect-search > left menu', () => {\r\n\r\n  test('is defined', () => {\r\n    const el = document.createElement('sf-multiselect-search');\r\n    assert.instanceOf(el, SfMultiselectSearch);\r\n  });\r\n\r\n\r\n});\r\n\r\n"]}

package/dist/util.d.ts

@@ -0,0 +1,7 @@
+declare function alphabeticalSort(arr: string[]): string[];
+declare const exportFunctions: {
+    validateName: (name: string) => boolean;
+    alphabeticalSort: typeof alphabeticalSort;
+};
+export default exportFunctions;
+//# sourceMappingURL=util.d.ts.map

package/dist/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAQA,iBAAS,gBAAgB,CAAC,GAAG,EAAC,MAAM,EAAE,YAKrC;AAGD,QAAA,MAAM,eAAe;yBAfO,MAAM;;CAiBjC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/util.js

@@ -0,0 +1,17 @@
+const validateName = (name) => {
+    if ((name + "").length > 2) {
+        return true;
+    }
+    return false;
+};
+function alphabeticalSort(arr) {
+    let arrSorted = arr.sort((a, b) => {
+        return a.trim().toLowerCase().localeCompare(b.trim().toLowerCase());
+    });
+    return arrSorted;
+}
+const exportFunctions = {
+    validateName, alphabeticalSort
+};
+export default exportFunctions;
+//# sourceMappingURL=util.js.map

package/dist/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AACA,MAAM,YAAY,GAAG,CAAC,IAAY,EAAE,EAAE;IACpC,IAAG,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;QACzB,OAAO,IAAI,CAAC;KACb;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAA;AAED,SAAS,gBAAgB,CAAC,GAAY;IACpC,IAAI,SAAS,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,EAAC,CAAC,EAAE,EAAE;QAC/B,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,CAAA;IACrE,CAAC,CAAC,CAAA;IACF,OAAO,SAAS,CAAA;AAClB,CAAC;AAGD,MAAM,eAAe,GAAG;IACrB,YAAY,EAAE,gBAAgB;CAChC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["\r\nconst validateName = (name: string) => {\r\n  if((name + \"\").length > 2) {\r\n    return true;\r\n  }\r\n  return false;\r\n}\r\n\r\nfunction alphabeticalSort(arr:string[]){\r\n  let arrSorted = arr.sort((a,b) => {\r\n    return a.trim().toLowerCase().localeCompare(b.trim().toLowerCase())\r\n  })\r\n  return arrSorted\r\n}\r\n\r\n\r\nconst exportFunctions = {\r\n   validateName, alphabeticalSort\r\n};\r\n\r\nexport default exportFunctions;"]}

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "sf-multiselect-search",
+  "private": false,
+  "version": "1.0.1",
+  "description": "Superflows Multiselect Component",
+  "module": "dist/sf-multiselect-search.js",
+  "outDir": "dist",
+  "declaration": true,
+  "type": "module",
+  "main": "dist/sf-multiselect-search.js",
+  "types": "dist/sf-multiselect-search.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "build:watch": "tsc --watch",
+    "clean": "rimraf sf-multiselect-search.{d.ts,d.ts.map,js,js.map} test/sf-multiselect-search.{d.ts,d.ts.map,js,js.map} test/sf-multiselect-search_test.{d.ts,d.ts.map,js,js.map}",
+    "lint": "npm run lint:lit-analyzer && npm run lint:eslint",
+    "lint:eslint": "eslint 'src/**/*.ts'",
+    "lint:lit-analyzer": "lit-analyzer",
+    "format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write",
+    "analyze": "cem analyze --litelement --globs \"src/**/*.ts\"",
+    "analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --watch",
+    "serve": "wds --watch",
+    "serve:prod": "MODE=prod npm run serve",
+    "test": "npm run test:dev && npm run test:prod",
+    "test:dev": "wtr --verbose=true --coverage --silent=false",
+    "test:watch": "wtr --watch",
+    "test:prod": "MODE=prod wtr",
+    "test:prod:watch": "MODE=prod wtr --watch",
+    "checksize": "rollup -c ; cat sf-multiselect-search.bundled.js | gzip -9 | wc -c ; rm sf-multiselect-search.bundled.js"
+  },
+  "keywords": [
+    "superflows",
+    "react",
+    "serverless",
+    "buttons",
+    "input",
+    "navigation",
+    "building blocks",
+    "lego",
+    "search",
+    "notifications",
+    "login",
+    "sign in",
+    "profile",
+    "menu",
+    "brand",
+    "lit",
+    "lit-element",
+    "navigation-bar",
+    "web component",
+    "browser"
+  ],
+  "author": "Superflows-dev",
+  "license": "MIT",
+  "repository": "superflows-dev/sf-multiselect-search",
+  "dependencies": {
+    "fs": "^0.0.1-security",
+    "lit": "^2.2.4",
+    "sinon": "^15.0.1"
+  },
+  "devDependencies": {
+    "@11ty/eleventy": "^3.1.0",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
+    "@custom-elements-manifest/analyzer": "^0.6.3",
+    "@open-wc/testing": "^3.1.7",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-replace": "^4.0.0",
+    "@types/mocha": "^10.0.10",
+    "@typescript-eslint/eslint-plugin": "^5.25.0",
+    "@typescript-eslint/parser": "^5.25.0",
+    "@web/dev-server": "^0.4.6",
+    "@web/dev-server-legacy": "^1.0.0",
+    "@web/test-runner": "^0.20.1",
+    "@web/test-runner-playwright": "^0.11.0",
+    "@webcomponents/webcomponentsjs": "^2.6.0",
+    "eslint": "^8.15.0",
+    "lit-analyzer": "^2.0.3",
+    "prettier": "^2.6.2",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.73.0",
+    "rollup-plugin-summary": "^1.4.3",
+    "rollup-plugin-terser": "^7.0.2",
+    "typescript": "~4.7.4"
+  },
+  "customElements": "custom-elements.json",
+  "include": [
+    "src"
+  ]
+}