sf-multiselect-search 1.0.4 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/sf-multiselect-search.d.ts.map +1 -1
  2. package/dist/sf-multiselect-search.js +42 -50
  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,CAAK;IA0BjD,aAAa,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAK;IAgB9C,cAAc;;MASb;IACD,mBAAmB;;MASlB;IACD,oBAAoB,aAUnB;IAED,aAAa,aAsCZ;IAED,oBAAoB,aA0CnB;IAED,YAAY,aA8CX;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;CAgBhB;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,46 +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
39
  this.listelements = [];
41
- // listelements: { name: string, id: string }[] = [
42
- // {
43
- // "name": "Contract term 1",
44
- // "id": "ct1"
45
- // },
46
- // {
47
- // "name": "contract term 2",
48
- // "id": "ct2"
49
- // },
50
- // {
51
- // "name": "contract term 3",
52
- // "id": "ct3"
53
- // }
54
- // ]
55
- // listelements: { name: string }[] = [{"name": "Terms1"},{"name": "Terms2"}]
56
- // listelements: { name: string }[] = [
57
- // {
58
- // "name": "item 1"
59
- // },
60
- // {
61
- // "name": "item 2"
62
- // }
63
- // ]
64
40
  this.listselection = {};
65
- // listselection: { [key: string]: boolean } = {
66
- // "Contract term 1": true,
67
- // "contract term 2": true,
68
- // "contract term 3": true
69
- // }
70
- // listselection: any = {
71
- // "First term": true,
72
- // "Second term": true
73
- // }
74
- // listselection: any = {
75
- // "Check 1": true,
76
- // "Check 2": false,
77
- // "Check 3": true
78
- // }
79
41
  this.selectedValues = () => {
80
42
  console.log('multiselect selectedvalues', JSON.stringify(this.listselection));
81
43
  let retObj = {};
@@ -135,6 +97,7 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
135
97
  });
136
98
  let applyButton = this.shadowRoot?.getElementById("apply-button");
137
99
  applyButton?.addEventListener('click', () => {
100
+ this.populateList();
138
101
  this.dispatchValueChanged();
139
102
  let multiselectList = this.shadowRoot?.getElementById("select-list");
140
103
  let dropDownButton = this.shadowRoot?.getElementById("dropdown-button");
@@ -192,10 +155,22 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
192
155
  this.populateList = () => {
193
156
  let searchInput = this.shadowRoot?.getElementById("search-input");
194
157
  let filterText = (searchInput?.value ?? "").toLowerCase();
195
- console.log("populateList", this.listelements, filterText);
158
+ console.log("populateList", this.listelements, filterText, this.listselection);
196
159
  let multiselectList = this.shadowRoot?.getElementById("select-list");
197
160
  let innerHTML = '';
198
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
+ }
199
174
  this.listelements.map((item) => {
200
175
  console.log('sf-multiselect-searcht rendering checkbox', this.listselection[(item.id ?? "")]);
201
176
  if (filterText !== "" && !(item.name ?? "").toLowerCase().includes(filterText)) {
@@ -212,6 +187,29 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
212
187
  if (multiselectList != null) {
213
188
  multiselectList.innerHTML = innerHTML;
214
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
+ });
215
213
  for (const item of this.listelements) {
216
214
  const checkbox = this.shadowRoot?.getElementById(`checkbox-${(item.id ?? "").replace(/ /g, '-')}`);
217
215
  if (checkbox) {
@@ -221,12 +219,6 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
221
219
  ...this.listselection,
222
220
  [id]: checkbox.checked
223
221
  };
224
- // console.log('multiselect selected', this.listselection, typeof (this.listselection));
225
- // this.dispatchValueChanged()
226
- // let multiselectList = this.shadowRoot?.getElementById("select-list") as HTMLDivElement;
227
- // multiselectList.classList.add("hide");
228
- // let dropdownButton = this.shadowRoot?.getElementById("dropdown-button") as HTMLButtonElement;
229
- // dropdownButton.innerHTML = "keyboard_arrow_down"
230
222
  });
231
223
  }
232
224
  }
@@ -236,9 +228,6 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
236
228
  };
237
229
  this.loadMode = async () => {
238
230
  console.log("loadMode", this.mode, this.listelements, this.listselection);
239
- // this.listelements = Object.keys(this.listselection)
240
- // this.populateList()
241
- // this.dispatchValueChanged();
242
231
  this.initListeners();
243
232
  this.populateList();
244
233
  };
@@ -256,8 +245,8 @@ let SfMultiselectSearch = class SfMultiselectSearch extends LitElement {
256
245
  <div part="multiselect-container" class="d-flex flex-col align-stretch">
257
246
  ${this.listname != "" ? `<h2 part="multiselect-title">${this.listname}</h2>` : ''}
258
247
  <div id="multiselect-input-container" part="multiselect-input-container" class="d-flex">
259
- <input part="input" type="text" id="search-input" name="search-input" class="flex-grow" value="" placeholder="Search"/>
260
- <button id="dropdown-button" part="button-icon" class="material-icons">keyboard_arrow_down</button>
248
+ <input part="input" type="text" id="search-input" name="search-input" class="flex-grow mr-5" value="" placeholder="Search"/>
249
+ <button id="dropdown-button" part="button-icon-light" class="material-icons mr-5">keyboard_arrow_down</button>
261
250
  <button id="apply-button" part="button-icon" class="material-icons">done</button>
262
251
  </div>
263
252
  <div id="select-list" part="select-list" class="hide d-flex flex-col flex-wrap justify-center"></div>
@@ -367,6 +356,9 @@ SfMultiselectSearch.styles = css `
367
356
  .align-stretch {
368
357
  align-items: stretch;
369
358
  }
359
+ .align-self-start {
360
+ align-self: flex-start;
361
+ }
370
362
  body {
371
363
  display: grid;
372
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 // 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 let applyButton = this.shadowRoot?.getElementById(\"apply-button\") as HTMLButtonElement;\r\n applyButton?.addEventListener('click', () => {\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);\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 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.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 <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"]}
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 .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 mr-5\" value=\"\" placeholder=\"Search\"/>\r\n <button id=\"dropdown-button\" part=\"button-icon-light\" class=\"material-icons mr-5\">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.4",
4
+ "version": "1.0.6",
5
5
  "description": "Superflows Multiselect Component",
6
6
  "module": "dist/sf-multiselect-search.js",
7
7
  "outDir": "dist",