sf-multiselect-search 1.0.3 → 1.0.5

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.
Files changed (4) hide show
  1. package/dist/sf-multiselect-search.d.ts.map +1 -1
  2. package/dist/sf-multiselect-search.js +60 -48
  3. package/dist/sf-multiselect-search.js.map +1 -1
  4. package/package.json +1 -1
package/dist/sf-multiselect-search.d.ts.map CHANGED
@@ -1 +1 @@
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,mBAAmB;;MASlB;IACD,oBAAoB,aAUnB;IAED,aAAa,aA2BZ;IAED,oBAAoB,aAuCnB;IAED,YAAY,aA4CX;IAED,QAAQ,sBAQP;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"}
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,0BAiHpB;IAIF,IAAI,SAAU;IAGd,QAAQ,UAAQ;IAGhB,QAAQ,SAAK;IAGb,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,CAAK;IAGjD,aAAa,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAK;IAE9C,cAAc;;MASb;IACD,mBAAmB;;MASlB;IACD,oBAAoB,aAUnB;IAED,aAAa,aAuCZ;IAED,oBAAoB,aA0CnB;IAED,YAAY,aAyEX;IAED,QAAQ,sBAIP;cAEkB,YAAY,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IAMnG,iBAAiB;IAGjB,MAAM;CAgBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;KAC9B;CACF"}
package/dist/sf-multiselect-search.js CHANGED
@@ -36,45 +36,8 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
36
36
  this.readonly = false;
37
37
  // readonly = true
38
38
  this.listname = "";
39
- // listelements: string[] = []
40
- this.listelements = [
41
- {
42
- "name": "Contract term 1",
43
- "id": "ct1"
44
- },
45
- {
46
- "name": "contract term 2",
47
- "id": "ct2"
48
- },
49
- {
50
- "name": "contract term 3",
51
- "id": "ct3"
52
- }
53
- ];
54
- // listelements: { name: string }[] = [{"name": "Terms1"},{"name": "Terms2"}]
55
- // listelements: { name: string }[] = [
56
- // {
57
- // "name": "item 1"
58
- // },
59
- // {
60
- // "name": "item 2"
61
- // }
62
- // ]
39
+ this.listelements = [];
63
40
  this.listselection = {};
64
- // listselection: { [key: string]: boolean } = {
65
- // "Contract term 1": true,
66
- // "contract term 2": true,
67
- // "contract term 3": true
68
- // }
69
- // listselection: any = {
70
- // "First term": true,
71
- // "Second term": true
72
- // }
73
- // listselection: any = {
74
- // "Check 1": true,
75
- // "Check 2": false,
76
- // "Check 3": true
77
- // }
78
41
  this.selectedValues = () => {
79
42
  console.log('multiselect selectedvalues', JSON.stringify(this.listselection));
80
43
  let retObj = {};
@@ -132,6 +95,17 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
132
95
  dropdownButton.innerHTML = "keyboard_arrow_up";
133
96
  }
134
97
  });
98
+ let applyButton = this.shadowRoot?.getElementById("apply-button");
99
+ applyButton?.addEventListener('click', () => {
100
+ this.populateList();
101
+ this.dispatchValueChanged();
102
+ let multiselectList = this.shadowRoot?.getElementById("select-list");
103
+ let dropDownButton = this.shadowRoot?.getElementById("dropdown-button");
104
+ if (dropDownButton.innerHTML != "keyboard_arrow_down") {
105
+ multiselectList.classList.add("hide");
106
+ dropDownButton.innerHTML = "keyboard_arrow_down";
107
+ }
108
+ });
135
109
  };
136
110
  this.populateSelectedList = () => {
137
111
  let searchInput = this.shadowRoot?.getElementById("search-input");
@@ -153,6 +127,9 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
153
127
  `;
154
128
  });
155
129
  }
130
+ if (selectedList == null) {
131
+ return;
132
+ }
156
133
  selectedList.innerHTML = innerHTML;
157
134
  for (const item of this.listelements) {
158
135
  const deleteSpan = this.shadowRoot?.getElementById(`selected-delete-${(item.id ?? "").replace(/ /g, '-')}`);
@@ -160,6 +137,7 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
160
137
  deleteSpan.addEventListener('click', () => {
161
138
  const id = item.id ?? "";
162
139
  delete this.listselection[id];
140
+ this.populateList();
163
141
  this.dispatchValueChanged();
164
142
  });
165
143
  }
@@ -168,6 +146,7 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
168
146
  selectedLabel.addEventListener('click', () => {
169
147
  const id = item.id ?? "";
170
148
  delete this.listselection[id];
149
+ this.populateList();
171
150
  this.dispatchValueChanged();
172
151
  });
173
152
  }
@@ -176,10 +155,22 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
176
155
  this.populateList = () => {
177
156
  let searchInput = this.shadowRoot?.getElementById("search-input");
178
157
  let filterText = (searchInput?.value ?? "").toLowerCase();
179
- console.log("populateList", this.listelements, filterText);
158
+ console.log("populateList", this.listelements, filterText, this.listselection);
180
159
  let multiselectList = this.shadowRoot?.getElementById("select-list");
181
160
  let innerHTML = '';
182
161
  if (Array.isArray(this.listelements)) {
162
+ if (this.listelements.length > 0) {
163
+ let flagListSelection = false;
164
+ for (let objKey of Object.keys(this.listselection)) {
165
+ if (this.listselection[objKey] == true) {
166
+ flagListSelection = true;
167
+ break;
168
+ }
169
+ }
170
+ innerHTML += `
171
+ <button id="select-all-button" part="button-icon" class="align-self-start material-symbols-outlined">${flagListSelection ? 'deselect' : 'select_all'}</button>
172
+ `;
173
+ }
183
174
  this.listelements.map((item) => {
184
175
  console.log('sf-multiselect-searcht rendering checkbox', this.listselection[(item.id ?? "")]);
185
176
  if (filterText !== "" && !(item.name ?? "").toLowerCase().includes(filterText)) {
@@ -196,6 +187,29 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
196
187
  if (multiselectList != null) {
197
188
  multiselectList.innerHTML = innerHTML;
198
189
  }
190
+ const selectAllButton = this.shadowRoot?.getElementById(`select-all-button`);
191
+ selectAllButton?.addEventListener('click', () => {
192
+ if (selectAllButton.innerHTML == "select_all") {
193
+ for (const item of this.listelements) {
194
+ this.listselection[item.id] = true;
195
+ }
196
+ }
197
+ else {
198
+ for (const item of this.listelements) {
199
+ delete this.listselection[item.id];
200
+ }
201
+ }
202
+ console.log('listselection', this.listselection);
203
+ this.populateList();
204
+ if (Object.keys(this.listselection).length > 0) {
205
+ let dropDownButton = this.shadowRoot?.getElementById("dropdown-button");
206
+ if (dropDownButton.innerHTML != "keyboard_arrow_down") {
207
+ multiselectList.classList.add("hide");
208
+ dropDownButton.innerHTML = "keyboard_arrow_down";
209
+ }
210
+ // this.dispatchValueChanged();
211
+ }
212
+ });
199
213
  for (const item of this.listelements) {
200
214
  const checkbox = this.shadowRoot?.getElementById(`checkbox-${(item.id ?? "").replace(/ /g, '-')}`);
201
215
  if (checkbox) {
@@ -205,21 +219,15 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
205
219
  ...this.listselection,
206
220
  [id]: checkbox.checked
207
221
  };
208
- console.log('multiselect selected', this.listselection, typeof (this.listselection));
209
- this.dispatchValueChanged();
210
- let multiselectList = this.shadowRoot?.getElementById("select-list");
211
- multiselectList.classList.add("hide");
212
- let dropdownButton = this.shadowRoot?.getElementById("dropdown-button");
213
- dropdownButton.innerHTML = "keyboard_arrow_down";
214
222
  });
215
223
  }
216
224
  }
225
+ if (Object.keys(this.listselection).length > 0) {
226
+ this.dispatchValueChanged();
227
+ }
217
228
  };
218
229
  this.loadMode = async () => {
219
230
  console.log("loadMode", this.mode, this.listelements, this.listselection);
220
- // this.listelements = Object.keys(this.listselection)
221
- // this.populateList()
222
- // this.dispatchValueChanged();
223
231
  this.initListeners();
224
232
  this.populateList();
225
233
  };
@@ -239,6 +247,7 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
239
247
  <div id="multiselect-input-container" part="multiselect-input-container" class="d-flex">
240
248
  <input part="input" type="text" id="search-input" name="search-input" class="flex-grow" value="" placeholder="Search"/>
241
249
  <button id="dropdown-button" part="button-icon" class="material-icons">keyboard_arrow_down</button>
250
+ <button id="apply-button" part="button-icon" class="material-icons">done</button>
242
251
  </div>
243
252
  <div id="select-list" part="select-list" class="hide d-flex flex-col flex-wrap justify-center"></div>
244
253
  </div>
@@ -347,6 +356,9 @@ SfMultiselectSearch.styles = css `
347
356
  .align-stretch {
348
357
  align-items: stretch;
349
358
  }
359
+ .align-self-start {
360
+ align-self: flex-start;
361
+ }
350
362
  body {
351
363
  display: grid;
352
364
  place-items: center;
package/dist/sf-multiselect-search.js.map CHANGED
@@ -1 +1 @@
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 selectedValuesNames = () => {\r\n console.log('multiselect selectedvalues', JSON.stringify(this.listselection))\r\n let retObj: { [key: string]: any } = {}\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] = { name: key.name, id: 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 console.log(\"dispatched valueChanged event\", this.selectedValues());\r\n }\r\n\r\n initListeners = () => {\r\n let dropDownButton = this.shadowRoot?.getElementById(\"dropdown-button\") as HTMLButtonElement;\r\n dropDownButton?.addEventListener('click', (e) => {\r\n let multiselectList = this.shadowRoot?.getElementById(\"select-list\") as HTMLDivElement;\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 \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.dispatchValueChanged()\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.dispatchValueChanged();\r\n });\r\n }\r\n }\r\n }\r\n\r\n populateList = () => {\r\n \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 multiselectList = 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 if(multiselectList != null){\r\n multiselectList.innerHTML = innerHTML;\r\n }\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('multiselect 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 this.populateList()\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"]}
1
+ {"version":3,"file":"sf-multiselect-search.js","sourceRoot":"","sources":["../src/sf-multiselect-search.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAoB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;EAKE;AAEF;;;;;;;;;;GAUG;AAEH,IAAa,mBAAmB,GAAhC,MAAa,mBAAoB,SAAQ,UAAU;IAAnD;;QAsHE,AADA,YAAY;QACZ,SAAI,GAAG,OAAO,CAAA;QAGd,aAAQ,GAAG,KAAK,CAAA;QAChB,kBAAkB;QAElB,aAAQ,GAAG,EAAE,CAAA;QAGb,iBAAY,GAAmC,EAAE,CAAA;QAGjD,kBAAa,GAA+B,EAAE,CAAA;QAE9C,mBAAc,GAAG,GAAG,EAAE;YACpB,OAAO,CAAC,GAAG,CAAC,4BAA4B,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAA;YAC7E,IAAI,MAAM,GAA+B,EAAE,CAAA;YAC3C,KAAK,IAAI,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE;gBACjC,IAAI,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,IAAI,IAAI,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,KAAK,EAAE;oBAC9E,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;iBAC5C;aACF;YACD,OAAO,MAAM,CAAA;QACf,CAAC,CAAA;QACD,wBAAmB,GAAG,GAAG,EAAE;YACzB,OAAO,CAAC,GAAG,CAAC,4BAA4B,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAA;YAC7E,IAAI,MAAM,GAA2B,EAAE,CAAA;YACvC,KAAK,IAAI,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE;gBACjC,IAAI,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,IAAI,IAAI,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,KAAK,EAAE;oBAC9E,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,EAAE,EAAE,CAAA;iBAChD;aACF;YACD,OAAO,MAAM,CAAA;QACf,CAAC,CAAA;QACD,yBAAoB,GAAG,GAAG,EAAE;YAC1B,OAAO,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;YACpC,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC5B,IAAI,WAAW,GAAG,IAAI,WAAW,CAAC,cAAc,EAAE;gBAChD,MAAM,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE;gBAC/C,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CAAC;YACH,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;YAChC,OAAO,CAAC,GAAG,CAAC,+BAA+B,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;QACtE,CAAC,CAAA;QAED,kBAAa,GAAG,GAAG,EAAE;YACnB,IAAI,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,iBAAiB,CAAsB,CAAC;YAC7F,cAAc,EAAE,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBAC9C,IAAI,eAAe,GAAG,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,aAAa,CAAmB,CAAC;gBACvF,IAAI,MAAM,GAAG,CAAC,CAAC,MAA2B,CAAC;gBAC3C,IAAI,MAAM,CAAC,SAAS,KAAK,qBAAqB,EAAE;oBAC9C,eAAe,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;oBACzC,MAAM,CAAC,SAAS,GAAG,mBAAmB,CAAA;iBACvC;qBAAM;oBACL,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;oBACtC,MAAM,CAAC,SAAS,GAAG,qBAAqB,CAAA;iBACzC;YAEH,CAAC,CAAC,CAAA;YAEF,IAAI,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,cAAc,CAAqB,CAAC;YACtF,WAAW,EAAE,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBAC3C,IAAI,CAAC,YAAY,EAAE,CAAC;gBACpB,IAAI,WAAW,GAAG,CAAC,CAAC,MAA0B,CAAC;gBAC/C,IAAI,UAAU,GAAG,WAAW,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;gBACjD,IAAI,UAAU,KAAK,EAAE,EAAE;oBACrB,IAAI,eAAe,GAAG,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,aAAa,CAAmB,CAAC;oBACvF,eAAe,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;oBACzC,IAAI,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,iBAAiB,CAAsB,CAAC;oBAC7F,cAAc,CAAC,SAAS,GAAG,mBAAmB,CAAA;iBAC/C;YACH,CAAC,CAAC,CAAA;YAEF,IAAI,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,cAAc,CAAsB,CAAC;YACvF,WAAW,EAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBAC1C,IAAI,CAAC,YAAY,EAAE,CAAC;gBACpB,IAAI,CAAC,oBAAoB,EAAE,CAAC;gBAC5B,IAAI,eAAe,GAAG,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,aAAa,CAAmB,CAAC;gBACvF,IAAI,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,iBAAiB,CAAsB,CAAC;gBAC7F,IAAI,cAAc,CAAC,SAAS,IAAI,qBAAqB,EAAE;oBACrD,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;oBACtC,cAAc,CAAC,SAAS,GAAG,qBAAqB,CAAA;iBACjD;YACH,CAAC,CAAC,CAAA;QACJ,CAAC,CAAA;QAED,yBAAoB,GAAG,GAAG,EAAE;YAE1B,IAAI,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,cAAc,CAAqB,CAAC;YACtF,IAAI,UAAU,GAAG,CAAC,WAAW,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC;YAC1D,OAAO,CAAC,GAAG,CAAC,sBAAsB,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;YACnE,IAAI,YAAY,GAAG,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,eAAe,CAAmB,CAAC;YACtF,IAAI,SAAS,GAAG,EAAE,CAAA;YAClB,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;gBACpC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;oBAC7B,OAAO,CAAC,GAAG,CAAC,2CAA2C,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAA;oBAC7F,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,KAAK,IAAI,EAAE;wBAChD,OAAO;qBACR;oBACD,SAAS,IAAI;;sCAEiB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC;4DACZ,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;;OAE7G,CAAA;gBAAA,CAAC,CAAC,CAAC;aACL;YACD,IAAI,YAAY,IAAI,IAAI,EAAE;gBAAE,OAAO;aAAE;YACrC,YAAY,CAAC,SAAS,GAAG,SAAS,CAAC;YACnC,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,YAAY,EAAE;gBACpC,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAoB,CAAC;gBAC/H,IAAI,UAAU,IAAI,IAAI,EAAE;oBACtB,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;wBACxC,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC;wBACzB,OAAO,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;wBAC9B,IAAI,CAAC,YAAY,EAAE,CAAC;wBACpB,IAAI,CAAC,oBAAoB,EAAE,CAAC;oBAC9B,CAAC,CAAC,CAAC;iBACJ;gBACD,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAqB,CAAC;gBAClI,IAAI,aAAa,IAAI,IAAI,EAAE;oBACzB,aAAa,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;wBAC3C,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC;wBACzB,OAAO,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;wBAC9B,IAAI,CAAC,YAAY,EAAE,CAAC;wBACpB,IAAI,CAAC,oBAAoB,EAAE,CAAC;oBAC9B,CAAC,CAAC,CAAC;iBACJ;aACF;QACH,CAAC,CAAA;QAED,iBAAY,GAAG,GAAG,EAAE;YAElB,IAAI,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,cAAc,CAAqB,CAAC;YACtF,IAAI,UAAU,GAAG,CAAC,WAAW,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC;YAC1D,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;YAC/E,IAAI,eAAe,GAAG,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,aAAa,CAAmB,CAAC;YACvF,IAAI,SAAS,GAAG,EAAE,CAAA;YAClB,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;gBACpC,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;oBAChC,IAAI,iBAAiB,GAAG,KAAK,CAAA;oBAC7B,KAAK,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE;wBAClD,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,IAAI,EAAE;4BACtC,iBAAiB,GAAG,IAAI,CAAA;4BACxB,MAAM;yBACP;qBACF;oBACD,SAAS,IAAI;iHAC4F,iBAAiB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;SACrJ,CAAA;iBACF;gBACD,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;oBAC7B,OAAO,CAAC,GAAG,CAAC,2CAA2C,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAA;oBAC7F,IAAI,UAAU,KAAK,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;wBAC9E,OAAO;qBACR;oBACD,SAAS,IAAI;;4EAEuD,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;mEACzM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;;OAEpH,CAAA;gBAAA,CAAC,CAAC,CAAC;aACL;YACD,IAAI,eAAe,IAAI,IAAI,EAAE;gBAC3B,eAAe,CAAC,SAAS,GAAG,SAAS,CAAC;aACvC;YACD,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,mBAAmB,CAAsB,CAAC;YAClG,eAAe,EAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBAC9C,IAAI,eAAe,CAAC,SAAS,IAAI,YAAY,EAAE;oBAC7C,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,YAAY,EAAE;wBACpC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;qBACpC;iBACF;qBAAM;oBACL,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,YAAY,EAAE;wBACpC,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;qBACpC;iBACF;gBACD,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;gBAChD,IAAI,CAAC,YAAY,EAAE,CAAC;gBACpB,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC9C,IAAI,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,iBAAiB,CAAsB,CAAC;oBAC7F,IAAI,cAAc,CAAC,SAAS,IAAI,qBAAqB,EAAE;wBACrD,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;wBACtC,cAAc,CAAC,SAAS,GAAG,qBAAqB,CAAA;qBACjD;oBACD,+BAA+B;iBAChC;YACH,CAAC,CAAC,CAAA;YACF,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,YAAY,EAAE;gBACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAqB,CAAC;gBACvH,IAAI,QAAQ,EAAE;oBACZ,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;wBACvC,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC;wBACzB,IAAI,CAAC,aAAa,GAAG;4BACnB,GAAG,IAAI,CAAC,aAAa;4BACrB,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,OAAO;yBACvB,CAAC;oBACJ,CAAC,CAAC,CAAC;iBACJ;aACF;YAED,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC9C,IAAI,CAAC,oBAAoB,EAAE,CAAA;aAC5B;QACH,CAAC,CAAA;QAED,aAAQ,GAAG,KAAK,IAAI,EAAE;YACpB,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;YAC1E,IAAI,CAAC,aAAa,EAAE,CAAA;YACpB,IAAI,CAAC,YAAY,EAAE,CAAA;QACrB,CAAC,CAAA;IA2BH,CAAC;IAzBoB,YAAY,CAAC,kBAAqE;QAEnG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAElB,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;IAC3B,CAAC;IACQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;UAIL,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC,gCAAgC,IAAI,CAAC,QAAQ,OAAO,CAAC,CAAC,CAAC,EAAE;;;;;;;;;KASpF,CAAC;IACJ,CAAC;CACF,CAAA;AAlWiB,0BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiH1B,CAAA;AAIF;IAFC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAEb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDACZ;AAGhB;IADC,QAAQ,EAAE;qDACE;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;yDACuB;AAGjD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DACmB;AAlInC,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CAmW/B;SAnWY,mBAAmB","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 .align-self-start {\r\n align-self: flex-start;\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: { name: string, id: string }[] = []\r\n\r\n @property({ type: Object })\r\n listselection: { [key: string]: boolean } = {}\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 selectedValuesNames = () => {\r\n console.log('multiselect selectedvalues', JSON.stringify(this.listselection))\r\n let retObj: { [key: string]: any } = {}\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] = { name: key.name, id: 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 console.log(\"dispatched valueChanged event\", this.selectedValues());\r\n }\r\n\r\n initListeners = () => {\r\n let dropDownButton = this.shadowRoot?.getElementById(\"dropdown-button\") as HTMLButtonElement;\r\n dropDownButton?.addEventListener('click', (e) => {\r\n let multiselectList = this.shadowRoot?.getElementById(\"select-list\") as HTMLDivElement;\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 let applyButton = this.shadowRoot?.getElementById(\"apply-button\") as HTMLButtonElement;\r\n applyButton?.addEventListener('click', () => {\r\n this.populateList();\r\n this.dispatchValueChanged();\r\n let multiselectList = this.shadowRoot?.getElementById(\"select-list\") as HTMLDivElement;\r\n let dropDownButton = this.shadowRoot?.getElementById(\"dropdown-button\") as HTMLButtonElement;\r\n if (dropDownButton.innerHTML != \"keyboard_arrow_down\") {\r\n multiselectList.classList.add(\"hide\");\r\n dropDownButton.innerHTML = \"keyboard_arrow_down\"\r\n }\r\n })\r\n }\r\n\r\n populateSelectedList = () => {\r\n\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 if (selectedList == null) { return; }\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.populateList();\r\n this.dispatchValueChanged();\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.populateList();\r\n this.dispatchValueChanged();\r\n });\r\n }\r\n }\r\n }\r\n\r\n populateList = () => {\r\n\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, this.listselection);\r\n let multiselectList = this.shadowRoot?.getElementById(\"select-list\") as HTMLDivElement;\r\n let innerHTML = ''\r\n if (Array.isArray(this.listelements)) {\r\n if (this.listelements.length > 0) {\r\n let flagListSelection = false\r\n for (let objKey of Object.keys(this.listselection)) {\r\n if (this.listselection[objKey] == true) {\r\n flagListSelection = true\r\n break;\r\n }\r\n }\r\n innerHTML += `\r\n <button id=\"select-all-button\" part=\"button-icon\" class=\"align-self-start material-symbols-outlined\">${flagListSelection ? 'deselect' : 'select_all'}</button>\r\n `\r\n }\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 if (multiselectList != null) {\r\n multiselectList.innerHTML = innerHTML;\r\n }\r\n const selectAllButton = this.shadowRoot?.getElementById(`select-all-button`) as HTMLButtonElement;\r\n selectAllButton?.addEventListener('click', () => {\r\n if (selectAllButton.innerHTML == \"select_all\") {\r\n for (const item of this.listelements) {\r\n this.listselection[item.id] = true;\r\n }\r\n } else {\r\n for (const item of this.listelements) {\r\n delete this.listselection[item.id];\r\n }\r\n }\r\n console.log('listselection', this.listselection)\r\n this.populateList();\r\n if (Object.keys(this.listselection).length > 0) {\r\n let dropDownButton = this.shadowRoot?.getElementById(\"dropdown-button\") as HTMLButtonElement;\r\n if (dropDownButton.innerHTML != \"keyboard_arrow_down\") {\r\n multiselectList.classList.add(\"hide\");\r\n dropDownButton.innerHTML = \"keyboard_arrow_down\"\r\n }\r\n // this.dispatchValueChanged();\r\n }\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 });\r\n }\r\n }\r\n\r\n if (Object.keys(this.listselection).length > 0) {\r\n this.dispatchValueChanged()\r\n }\r\n }\r\n\r\n loadMode = async () => {\r\n console.log(\"loadMode\", this.mode, this.listelements, this.listselection);\r\n this.initListeners()\r\n this.populateList()\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 <button id=\"apply-button\" part=\"button-icon\" class=\"material-icons\">done</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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "sf-multiselect-search",
3
3
  "private": false,
4
- "version": "1.0.3",
4
+ "version": "1.0.5",
5
5
  "description": "Superflows Multiselect Component",
6
6
  "module": "dist/sf-multiselect-search.js",
7
7
  "outDir": "dist",